feat: "add to collection" menu item functionality (#1413)

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -89,11 +89,12 @@ describe('<LibraryAuthoringPage />', () => {
       // We have to replace the query (search keywords) in the mock results with the actual query,
       // because otherwise Instantsearch will update the UI and change the query,
       // leading to unexpected results in the test cases.
-      mockResult.results[0].query = query;
+      const newMockResult = { ...mockResult };
+      newMockResult.results[0].query = query;
       // And fake the required '_formatted' fields; it contains the highlighting <mark>...</mark> around matched words
       // eslint-disable-next-line no-underscore-dangle, no-param-reassign
-      mockResult.results[0]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
-      return mockResult;
+      newMockResult.results[0]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
+      return newMockResult;
     });
   });
 
@@ -458,7 +459,7 @@ describe('<LibraryAuthoringPage />', () => {
   });
 
   it('should open and close the component sidebar', async () => {
-    const mockResult0 = mockResult.results[0].hits[0];
+    const mockResult0 = { ...mockResult }.results[0].hits[0];
     const displayName = 'Introduction to Testing';
     expect(mockResult0.display_name).toStrictEqual(displayName);
     await renderLibraryPage();
@@ -478,6 +479,25 @@ describe('<LibraryAuthoringPage />', () => {
     await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
   });
 
+  it('should open component sidebar, showing manage tab on clicking add to collection menu item', async () => {
+    const mockResult0 = { ...mockResult }.results[0].hits[0];
+    const displayName = 'Introduction to Testing';
+    expect(mockResult0.display_name).toStrictEqual(displayName);
+    await renderLibraryPage();
+
+    // Open menu
+    fireEvent.click(screen.getAllByTestId('component-card-menu-toggle')[0]);
+    // Click add to collection
+    fireEvent.click(screen.getByRole('button', { name: 'Add to collection' }));
+
+    const sidebar = screen.getByTestId('library-sidebar');
+
+    const { getByRole, queryByText } = within(sidebar);
+
+    await waitFor(() => expect(queryByText(displayName)).toBeInTheDocument());
+    expect(getByRole('tab', { selected: true })).toHaveTextContent('Manage');
+  });
+
   it('should open and close the collection sidebar', async () => {
     await renderLibraryPage();
 

src/library-authoring/LibraryAuthoringPage.tsx

@@ -69,12 +69,12 @@ const HeaderActions = () => {
     openAddContentSidebar,
     openInfoSidebar,
     closeLibrarySidebar,
-    sidebarBodyComponent,
+    sidebarComponentInfo,
     readOnly,
   } = useLibraryContext();
 
   const infoSidebarIsOpen = () => (
-    sidebarBodyComponent === SidebarBodyComponentId.Info
+    sidebarComponentInfo?.type === SidebarBodyComponentId.Info
   );
 
   const handleOnClickInfoSidebar = () => {
@@ -148,7 +148,7 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
     libraryData,
     isLoadingLibraryData,
     componentPickerMode,
-    sidebarBodyComponent,
+    sidebarComponentInfo,
     openInfoSidebar,
   } = useLibraryContext();
 
@@ -261,7 +261,7 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
         </Container>
         {!componentPickerMode && <StudioFooter containerProps={{ size: undefined }} />}
       </div>
-      {!!sidebarBodyComponent && (
+      {!!sidebarComponentInfo?.type && (
         <div className="library-authoring-sidebar box-shadow-left-1 bg-white" data-testid="library-sidebar">
           <LibrarySidebar />
         </div>

src/library-authoring/collections/CollectionDetails.test.tsx

@@ -10,7 +10,7 @@ import {
   waitFor,
   within,
 } from '../../testUtils';
-import { LibraryProvider } from '../common/context';
+import { LibraryProvider, SidebarBodyComponentId } from '../common/context';
 import * as api from '../data/api';
 import { mockContentLibrary, mockGetCollectionMetadata } from '../data/api.mocks';
 import CollectionDetails from './CollectionDetails';
@@ -30,7 +30,13 @@ const library = mockContentLibrary.libraryData;
 
 const render = () => baseRender(<CollectionDetails />, {
   extraWrapper: ({ children }) => (
-    <LibraryProvider libraryId={library.id} initialSidebarCollectionId={collectionId}>
+    <LibraryProvider
+      libraryId={library.id}
+      initialSidebarComponentInfo={{
+        id: collectionId,
+        type: SidebarBodyComponentId.CollectionInfo,
+      }}
+    >
       { children }
     </LibraryProvider>
   ),

src/library-authoring/collections/CollectionDetails.tsx

@@ -37,7 +37,8 @@ const BlockCount = ({
 };
 
 const CollectionStatsWidget = () => {
-  const { libraryId, sidebarCollectionId: collectionId } = useLibraryContext();
+  const { libraryId, sidebarComponentInfo } = useLibraryContext();
+  const collectionId = sidebarComponentInfo?.id;
 
   const { data: blockTypes } = useGetBlockTypes([
     `context_key = "${libraryId}"`,
@@ -98,10 +99,11 @@ const CollectionDetails = () => {
   const { showToast } = useContext(ToastContext);
   const {
     libraryId,
-    sidebarCollectionId: collectionId,
+    sidebarComponentInfo,
     readOnly,
   } = useLibraryContext();
 
+  const collectionId = sidebarComponentInfo?.id;
   // istanbul ignore next: This should never happen
   if (!collectionId) {
     throw new Error('collectionId is required');

src/library-authoring/collections/CollectionInfo.tsx

@@ -22,20 +22,21 @@ const CollectionInfo = () => {
     libraryId,
     collectionId,
     setCollectionId,
-    sidebarCollectionId,
+    sidebarComponentInfo,
     componentPickerMode,
   } = useLibraryContext();
 
-  const url = `/library/${libraryId}/collection/${sidebarCollectionId}/`;
-  const urlMatch = useMatch(url);
-
-  const showOpenCollectionButton = !urlMatch && collectionId !== sidebarCollectionId;
-
+  const sidebarCollectionId = sidebarComponentInfo?.id;
   // istanbul ignore if: this should never happen
   if (!sidebarCollectionId) {
     throw new Error('sidebarCollectionId is required');
   }
 
+  const url = `/library/${libraryId}/collection/${sidebarCollectionId}/`;
+  const urlMatch = useMatch(url);
+
+  const showOpenCollectionButton = !urlMatch && collectionId !== sidebarCollectionId;
+
   const collectionUsageKey = buildCollectionUsageKey(libraryId, sidebarCollectionId);
 
   const handleOpenCollection = useCallback(() => {

src/library-authoring/collections/CollectionInfoHeader.test.tsx

@@ -8,7 +8,7 @@ import {
   screen,
   waitFor,
 } from '../../testUtils';
-import { LibraryProvider } from '../common/context';
+import { LibraryProvider, SidebarBodyComponentId } from '../common/context';
 import { mockContentLibrary, mockGetCollectionMetadata } from '../data/api.mocks';
 import * as api from '../data/api';
 import CollectionInfoHeader from './CollectionInfoHeader';
@@ -28,7 +28,13 @@ const { collectionId } = mockGetCollectionMetadata;
 
 const render = (libraryId: string = mockLibraryId) => baseRender(<CollectionInfoHeader />, {
   extraWrapper: ({ children }) => (
-    <LibraryProvider libraryId={libraryId} initialSidebarCollectionId={collectionId}>
+    <LibraryProvider
+      libraryId={libraryId}
+      initialSidebarComponentInfo={{
+        id: collectionId,
+        type: SidebarBodyComponentId.CollectionInfo,
+      }}
+    >
       { children }
     </LibraryProvider>
   ),

src/library-authoring/collections/CollectionInfoHeader.tsx

@@ -19,10 +19,11 @@ const CollectionInfoHeader = () => {
 
   const {
     libraryId,
-    sidebarCollectionId: collectionId,
+    sidebarComponentInfo,
     readOnly,
   } = useLibraryContext();
 
+  const collectionId = sidebarComponentInfo?.id;
   // istanbul ignore if: this should never happen
   if (!collectionId) {
     throw new Error('collectionId is required');

src/library-authoring/collections/LibraryCollectionPage.tsx

@@ -104,7 +104,7 @@ const LibraryCollectionPage = () => {
   }
 
   const {
-    sidebarBodyComponent,
+    sidebarComponentInfo,
     openCollectionInfoSidebar,
     componentPickerMode,
     setCollectionId,
@@ -215,7 +215,7 @@ const LibraryCollectionPage = () => {
         </Container>
         <StudioFooter />
       </div>
-      {!!sidebarBodyComponent && (
+      {!!sidebarComponentInfo?.type && (
         <div className="library-authoring-sidebar box-shadow-left-1 bg-white" data-testid="library-sidebar">
           <LibrarySidebar />
         </div>