feat: add container collections support

Author: rpenido

src/library-authoring/component-info/ComponentManagement.tsx

@@ -8,11 +8,11 @@ import {
 
 import { useLibraryContext } from '../common/context/LibraryContext';
 import { SidebarActions, useSidebarContext } from '../common/context/SidebarContext';
-import { useLibraryBlockMetadata } from '../data/apiHooks';
+import { ContentTagsDrawer, useContentTaxonomyTagsData } from '../../content-tags-drawer';
+import { useLibraryBlockMetadata, useUpdateComponentCollections } from '../data/apiHooks';
 import StatusWidget from '../generic/status-widget';
+import { ManageCollections } from '../generic/manage-collections';
 import messages from './messages';
-import { ContentTagsDrawer, useContentTaxonomyTagsData } from '../../content-tags-drawer';
-import ManageCollections from './ManageCollections';
 
 const ComponentManagement = () => {
   const intl = useIntl();
@@ -130,7 +130,11 @@ const ComponentManagement = () => {
           </Collapsible.Visible>
         </Collapsible.Trigger>
         <Collapsible.Body className="collapsible-body">
-          <ManageCollections usageKey={usageKey} collections={componentMetadata.collections} />
+          <ManageCollections
+            opaqueKey={usageKey}
+            collections={componentMetadata.collections}
+            useUpdateCollectionsHook={useUpdateComponentCollections}
+          />
         </Collapsible.Body>
       </Collapsible.Advanced>
     </Stack>

src/library-authoring/component-info/messages.ts

@@ -136,51 +136,6 @@ const messages = defineMessages({
     defaultMessage: 'Component Preview',
     description: 'Title for preview modal',
   },
-  manageCollectionsText: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.text',
-    defaultMessage: 'Manage Collections',
-    description: 'Header and button text for collection section in manage tab',
-  },
-  manageCollectionsAddBtnText: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.btn-text',
-    defaultMessage: 'Add to Collection',
-    description: 'Button text for collection section in manage tab',
-  },
-  manageCollectionsSearchPlaceholder: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.search-placeholder',
-    defaultMessage: 'Search',
-    description: 'Placeholder text for collection search in manage tab',
-  },
-  manageCollectionsSelectionLabel: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.selection-aria-label',
-    defaultMessage: 'Collection selection',
-    description: 'Aria label text for collection selection box',
-  },
-  manageCollectionsToComponentSuccess: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.add-success',
-    defaultMessage: 'Component collections updated',
-    description: 'Message to display on updating component collections',
-  },
-  manageCollectionsToComponentFailed: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.add-failed',
-    defaultMessage: 'Failed to update Component collections',
-    description: 'Message to display on failure of updating component collections',
-  },
-  manageCollectionsToComponentConfirmBtn: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.add-confirm-btn',
-    defaultMessage: 'Confirm',
-    description: 'Button text to confirm collections for a component',
-  },
-  manageCollectionsToComponentCancelBtn: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.add-cancel-btn',
-    defaultMessage: 'Cancel',
-    description: 'Button text to cancel collections selection for a component',
-  },
-  componentNotOrganizedIntoCollection: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.no-collections',
-    defaultMessage: 'This component is not organized into any collection.',
-    description: 'Message to display in manage collections section when component is not part of any collection.',
-  },
   componentPickerSingleSelect: {
     id: 'course-authoring.library-authoring.component-picker.single-select',
     defaultMessage: 'Add to Course', // TODO: Change this message to a generic one?

src/library-authoring/containers/ContainerOrganize.tsx

@@ -8,17 +8,23 @@ import {
   useToggle,
 } from '@openedx/paragon';
 import {
-  ExpandLess, ExpandMore, Tag,
+  BookOpen,
+  ExpandLess,
+  ExpandMore,
+  Tag,
 } from '@openedx/paragon/icons';
 
 import { ContentTagsDrawer, useContentTaxonomyTagsData } from '../../content-tags-drawer';
+import { ManageCollections } from '../generic/manage-collections';
+import { useContainer, useUpdateContainerCollections } from '../data/apiHooks';
 import { useLibraryContext } from '../common/context/LibraryContext';
 import { useSidebarContext } from '../common/context/SidebarContext';
 import messages from './messages';
 
 const ContainerOrganize = () => {
   const intl = useIntl();
   const [tagsCollapseIsOpen, , , toggleTags] = useToggle(true);
+  const [collectionsCollapseIsOpen, , , toggleCollections] = useToggle(true);
 
   const { readOnly } = useLibraryContext();
   const { sidebarComponentInfo } = useSidebarContext();
@@ -29,8 +35,10 @@ const ContainerOrganize = () => {
     throw new Error('containerId is required');
   }
 
+  const { data: containerMetadata } = useContainer(containerId);
   const { data: componentTags } = useContentTaxonomyTagsData(containerId);
 
+  const collectionsCount = useMemo(() => containerMetadata?.collections?.length || 0, [containerMetadata]);
   const tagsCount = useMemo(() => {
     if (!componentTags) {
       return 0;
@@ -50,6 +58,11 @@ const ContainerOrganize = () => {
     return result;
   }, [componentTags]);
 
+  // istanbul ignore if: this should never happen
+  if (!containerMetadata) {
+    return null;
+  }
+
   return (
     <Stack gap={3}>
       {[true, 'true'].includes(getConfig().ENABLE_TAGGING_TAXONOMY_PAGES)
@@ -82,6 +95,33 @@ const ContainerOrganize = () => {
             </Collapsible.Body>
           </Collapsible.Advanced>
         )}
+      <Collapsible.Advanced
+        open={collectionsCollapseIsOpen}
+        className="collapsible-card border-0"
+      >
+        <Collapsible.Trigger
+          onClick={toggleCollections}
+          className="collapsible-trigger d-flex justify-content-between p-2"
+        >
+          <Stack gap={1} direction="horizontal">
+            <Icon src={BookOpen} />
+            {intl.formatMessage(messages.organizeTabCollectionsTitle, { count: collectionsCount })}
+          </Stack>
+          <Collapsible.Visible whenClosed>
+            <Icon src={ExpandMore} />
+          </Collapsible.Visible>
+          <Collapsible.Visible whenOpen>
+            <Icon src={ExpandLess} />
+          </Collapsible.Visible>
+        </Collapsible.Trigger>
+        <Collapsible.Body className="collapsible-body">
+          <ManageCollections
+            opaqueKey={containerId}
+            collections={containerMetadata.collections}
+            useUpdateCollectionsHook={useUpdateContainerCollections}
+          />
+        </Collapsible.Body>
+      </Collapsible.Advanced>
     </Stack>
   );
 };

src/library-authoring/containers/messages.ts

@@ -21,6 +21,11 @@ const messages = defineMessages({
     defaultMessage: 'Tags ({count})',
     description: 'Title for tags section in organize tab',
   },
+  organizeTabCollectionsTitle: {
+    id: 'course-authoring.library-authoring.container-sidebar.organize-tab.collections.title',
+    defaultMessage: 'Collections ({count})',
+    description: 'Title for collections section in organize tab',
+  },
   settingsTabTitle: {
     id: 'course-authoring.library-authoring.container-sidebar.settings-tab.title',
     defaultMessage: 'Settings',

src/library-authoring/data/api.ts

@@ -40,7 +40,7 @@ export const getLibraryBlockMetadataUrl = (usageKey: string) => `${getApiBaseUrl
 export const getLibraryBlockRestoreUrl = (usageKey: string) => `${getLibraryBlockMetadataUrl(usageKey)}restore/`;
 
 /**
- * Get the URL for library block metadata.
+ * Get the URL for library block collections.
  */
 export const getLibraryBlockCollectionsUrl = (usageKey: string) => `${getLibraryBlockMetadataUrl(usageKey)}collections/`;
 
@@ -115,6 +115,10 @@ export const getLibraryContainerApiUrl = (containerId: string) => `${getApiBaseU
  * Get the URL for a single container children api.
  */
 export const getLibraryContainerChildrenApiUrl = (containerId: string) => `${getLibraryContainerApiUrl(containerId)}children/`;
+/**
+ * Get the URL for library container collections.
+ */
+export const getLibraryContainerCollectionsUrl = (containerId: string) => `${getLibraryContainerApiUrl(containerId)}collections/`;
 
 export interface ContentLibrary {
   id: string;
@@ -629,3 +633,12 @@ export async function getContainerChildren(containerId: string): Promise<Library
   const { data } = await client.get(getLibraryContainerChildrenApiUrl(containerId));
   return camelCaseObject(data);
 }
+
+/**
+ * Update container collections.
+ */
+export async function updateContainerCollections(containerId: string, collectionKeys: string[]) {
+  await getAuthenticatedHttpClient().patch(getLibraryContainerCollectionsUrl(containerId), {
+    collection_keys: collectionKeys,
+  });
+}

src/library-authoring/data/apiHooks.ts

@@ -52,6 +52,7 @@ import {
   updateContainerMetadata,
   type UpdateContainerDataRequest,
   getContainerChildren,
+  updateContainerCollections,
 } from './api';
 import { VersionSpec } from '../LibraryBlock';
 
@@ -570,8 +571,9 @@ export const useRestoreCollection = (libraryId: string, collectionId: string) =>
 /**
  * Use this mutation to update collections related a component in a library
  */
-export const useUpdateComponentCollections = (libraryId: string, usageKey: string) => {
+export const useUpdateComponentCollections = (usageKey: string) => {
   const queryClient = useQueryClient();
+  const libraryId = getLibraryId(usageKey);
   return useMutation({
     mutationFn: async (collectionKeys: string[]) => updateComponentCollections(usageKey, collectionKeys),
     onSettled: () => {
@@ -631,3 +633,18 @@ export const useContainerChildren = (containerId: string) => (
     queryFn: () => getContainerChildren(containerId!),
   })
 );
+
+/**
+ * Use this mutation to update collections related a container in a library
+ */
+export const useUpdateContainerCollections = (containerId: string) => {
+  const queryClient = useQueryClient();
+  const libraryId = getLibraryId(containerId);
+  return useMutation({
+    mutationFn: async (collectionKeys: string[]) => updateContainerCollections(containerId, collectionKeys),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: containerQueryKeys.container(containerId) });
+      queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, libraryId) });
+    },
+  });
+};

src/library-authoring/component-info/ManageCollections.test.tsx renamed to src/library-authoring/generic/manage-collections/ManageCollections.test.tsx

@@ -2,19 +2,20 @@ import fetchMock from 'fetch-mock-jest';
 
 import userEvent from '@testing-library/user-event';
 import MockAdapter from 'axios-mock-adapter/types';
+import { mockContentSearchConfig } from '../../../search-manager/data/api.mock';
 import {
   initializeMocks,
   render as baseRender,
   screen,
   waitFor,
-} from '../../testUtils';
-import mockCollectionsResults from '../__mocks__/collection-search.json';
-import { mockContentSearchConfig } from '../../search-manager/data/api.mock';
-import { mockContentLibrary, mockLibraryBlockMetadata } from '../data/api.mocks';
+} from '../../../testUtils';
+import mockCollectionsResults from '../../__mocks__/collection-search.json';
+import { LibraryProvider } from '../../common/context/LibraryContext';
+import { SidebarProvider } from '../../common/context/SidebarContext';
+import { getLibraryBlockCollectionsUrl } from '../../data/api';
+import { useUpdateComponentCollections } from '../../data/apiHooks';
+import { mockContentLibrary, mockLibraryBlockMetadata } from '../../data/api.mocks';
 import ManageCollections from './ManageCollections';
-import { LibraryProvider } from '../common/context/LibraryContext';
-import { SidebarProvider } from '../common/context/SidebarContext';
-import { getLibraryBlockCollectionsUrl } from '../data/api';
 
 let axiosMock: MockAdapter;
 let mockShowToast;
@@ -60,8 +61,9 @@ describe('<ManageCollections />', () => {
     const url = getLibraryBlockCollectionsUrl(mockLibraryBlockMetadata.usageKeyWithCollections);
     axiosMock.onPatch(url).reply(200);
     render(<ManageCollections
-      usageKey={mockLibraryBlockMetadata.usageKeyWithCollections}
+      opaqueKey={mockLibraryBlockMetadata.usageKeyWithCollections}
       collections={[{ title: 'My first collection', key: 'my-first-collection' }]}
+      useUpdateCollectionsHook={useUpdateComponentCollections}
     />);
     const manageBtn = await screen.findByRole('button', { name: 'Manage Collections' });
     userEvent.click(manageBtn);
@@ -73,10 +75,10 @@ describe('<ManageCollections />', () => {
     userEvent.click(confirmBtn);
     await waitFor(() => {
       expect(axiosMock.history.patch.length).toEqual(1);
-      expect(mockShowToast).toHaveBeenCalledWith('Component collections updated');
-      expect(JSON.parse(axiosMock.history.patch[0].data)).toEqual({
-        collection_keys: ['my-first-collection', 'my-second-collection'],
-      });
+    });
+    expect(mockShowToast).toHaveBeenCalledWith('Item collections updated');
+    expect(JSON.parse(axiosMock.history.patch[0].data)).toEqual({
+      collection_keys: ['my-first-collection', 'my-second-collection'],
     });
     expect(screen.queryByRole('search')).not.toBeInTheDocument();
   });
@@ -85,8 +87,9 @@ describe('<ManageCollections />', () => {
     const url = getLibraryBlockCollectionsUrl(mockLibraryBlockMetadata.usageKeyWithCollections);
     axiosMock.onPatch(url).reply(400);
     render(<ManageCollections
-      usageKey={mockLibraryBlockMetadata.usageKeyWithCollections}
+      opaqueKey={mockLibraryBlockMetadata.usageKeyWithCollections}
       collections={[]}
+      useUpdateCollectionsHook={useUpdateComponentCollections}
     />);
     screen.logTestingPlaygroundURL();
     const manageBtn = await screen.findByRole('button', { name: 'Add to Collection' });
@@ -99,20 +102,21 @@ describe('<ManageCollections />', () => {
     userEvent.click(confirmBtn);
     await waitFor(() => {
       expect(axiosMock.history.patch.length).toEqual(1);
-      expect(JSON.parse(axiosMock.history.patch[0].data)).toEqual({
-        collection_keys: ['my-second-collection'],
-      });
-      expect(mockShowToast).toHaveBeenCalledWith('Failed to update Component collections');
     });
+    expect(JSON.parse(axiosMock.history.patch[0].data)).toEqual({
+      collection_keys: ['my-second-collection'],
+    });
+    expect(mockShowToast).toHaveBeenCalledWith('Failed to update item collections');
     expect(screen.queryByRole('search')).not.toBeInTheDocument();
   });
 
   it('should close manage collections selection on cancel', async () => {
     const url = getLibraryBlockCollectionsUrl(mockLibraryBlockMetadata.usageKeyWithCollections);
     axiosMock.onPatch(url).reply(400);
     render(<ManageCollections
-      usageKey={mockLibraryBlockMetadata.usageKeyWithCollections}
+      opaqueKey={mockLibraryBlockMetadata.usageKeyWithCollections}
       collections={[]}
+      useUpdateCollectionsHook={useUpdateComponentCollections}
     />);
     const manageBtn = await screen.findByRole('button', { name: 'Add to Collection' });
     userEvent.click(manageBtn);
@@ -124,8 +128,8 @@ describe('<ManageCollections />', () => {
     userEvent.click(cancelBtn);
     await waitFor(() => {
       expect(axiosMock.history.patch.length).toEqual(0);
-      expect(mockShowToast).not.toHaveBeenCalled();
     });
+    expect(mockShowToast).not.toHaveBeenCalled();
     expect(screen.queryByRole('search')).not.toBeInTheDocument();
   });
 });