perf: use Library search results to populate container card preview [FC-0083] [TEAK] (openedx#1889)

* fix: several library unit page UX bugs (openedx#1868)

* fix: rename "Organize" tab to "Manage"

* fix: duplicate key warnings

* fix: uniform messages while adding to collection

* fix: do not allow units be added to a unit

(cherry picked from commit 0fdc460)

* perf: use Library search results to populate container card preview (openedx#1820)

* fix: use Library search results to populate container card preview

* feat: show published children when showing only published Unit content

* fix: nits

(cherry picked from commit 24e4695)

---------

Co-authored-by: Rômulo Penido <romulo.penido@gmail.com>

Author: 2 people

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -55,10 +55,6 @@ const path = '/library/:libraryId/*';
 const libraryTitle = mockContentLibrary.libraryData.title;
 
 describe('<LibraryAuthoringPage />', () => {
-  beforeAll(() => {
-    jest.useFakeTimers();
-  });
-
   beforeEach(async () => {
     const mocks = initializeMocks();
     axiosMock = mocks.axiosMock;
@@ -82,10 +78,6 @@ describe('<LibraryAuthoringPage />', () => {
     });
   });
 
-  afterAll(() => {
-    jest.useRealTimers();
-  });
-
   const renderLibraryPage = async () => {
     render(<LibraryLayout />, { path, params: { libraryId: mockContentLibrary.libraryId } });
 
@@ -370,7 +362,7 @@ describe('<LibraryAuthoringPage />', () => {
     fireEvent.change(searchBox, { target: { value: 'words to find' } });
 
     // Default sort option changes to "Most Relevant"
-    expect((await screen.findAllByText('Most Relevant')).length).toEqual(2);
+    expect(screen.getAllByText('Most Relevant').length).toEqual(2);
     await waitFor(() => {
       expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
         body: expect.stringContaining('"sort":[]'),
@@ -400,7 +392,7 @@ 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 - component', async () => {
+  it('should open component sidebar, showing manage tab on clicking add to collection menu item (component)', async () => {
     const mockResult0 = { ...mockResult }.results[0].hits[0];
     const displayName = 'Introduction to Testing';
     expect(mockResult0.display_name).toStrictEqual(displayName);
@@ -415,18 +407,17 @@ describe('<LibraryAuthoringPage />', () => {
 
     const sidebar = screen.getByTestId('library-sidebar');
 
-    const { getByRole, findByText } = within(sidebar);
+    const { getByRole, queryByText } = within(sidebar);
 
-    expect(await findByText(displayName)).toBeInTheDocument();
-    jest.advanceTimersByTime(300);
+    await waitFor(() => expect(queryByText(displayName)).toBeInTheDocument());
     expect(getByRole('tab', { selected: true })).toHaveTextContent('Manage');
     const closeButton = getByRole('button', { name: /close/i });
     fireEvent.click(closeButton);
 
     await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
   });
 
-  it('should open component sidebar, showing manage tab on clicking add to collection menu item - unit', async () => {
+  it('should open component sidebar, showing manage tab on clicking add to collection menu item (unit)', async () => {
     const displayName = 'Test Unit';
     await renderLibraryPage();
 
@@ -439,10 +430,9 @@ describe('<LibraryAuthoringPage />', () => {
 
     const sidebar = screen.getByTestId('library-sidebar');
 
-    const { getByRole, findByText } = within(sidebar);
+    const { getByRole, queryByText } = within(sidebar);
 
-    expect(await findByText(displayName)).toBeInTheDocument();
-    jest.advanceTimersByTime(300);
+    await waitFor(() => expect(queryByText(displayName)).toBeInTheDocument());
     expect(getByRole('tab', { selected: true })).toHaveTextContent('Manage');
     const closeButton = getByRole('button', { name: /close/i });
     fireEvent.click(closeButton);

src/library-authoring/components/ContainerCard.tsx

@@ -17,14 +17,13 @@ import { ToastContext } from '../../generic/toast-context';
 import { type ContainerHit, PublishStatus } from '../../search-manager';
 import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
 import { useLibraryContext } from '../common/context/LibraryContext';
-import { SidebarActions, SidebarBodyComponentId, useSidebarContext } from '../common/context/SidebarContext';
+import { SidebarActions, useSidebarContext } from '../common/context/SidebarContext';
 import { useRemoveItemsFromCollection } from '../data/apiHooks';
 import { useLibraryRoutes } from '../routes';
 import AddComponentWidget from './AddComponentWidget';
 import BaseCard from './BaseCard';
 import messages from './messages';
 import ContainerDeleter from './ContainerDeleter';
-import { useRunOnNextRender } from '../../utils';
 
 type ContainerMenuProps = {
   hit: ContainerHit,
@@ -46,7 +45,6 @@ const ContainerMenu = ({ hit } : ContainerMenuProps) => {
   } = useSidebarContext();
   const { showToast } = useContext(ToastContext);
   const [isConfirmingDelete, confirmDelete, cancelDelete] = useToggle(false);
-  const { navigateTo } = useLibraryRoutes();
 
   const removeComponentsMutation = useRemoveItemsFromCollection(libraryId, collectionId);
 
@@ -62,17 +60,10 @@ const ContainerMenu = ({ hit } : ContainerMenuProps) => {
     });
   };
 
-  const scheduleJumpToCollection = useRunOnNextRender(() => {
-    // TODO: Ugly hack to make sure sidebar shows add to collection section
-    // This needs to run after all changes to url takes place to avoid conflicts.
-    setTimeout(() => setSidebarAction(SidebarActions.JumpToManageCollections));
-  });
-
   const showManageCollections = useCallback(() => {
-    navigateTo({ unitId: containerId });
+    setSidebarAction(SidebarActions.JumpToAddCollections);
     openUnitInfoSidebar(containerId);
-    scheduleJumpToCollection();
-  }, [scheduleJumpToCollection, navigateTo, openUnitInfoSidebar, containerId]);
+  }, [setSidebarAction, openUnitInfoSidebar, containerId]);
 
   return (
     <>
@@ -174,7 +165,7 @@ type ContainerCardProps = {
 const ContainerCard = ({ hit } : ContainerCardProps) => {
   const { componentPickerMode } = useComponentPickerContext();
   const { setUnitId, showOnlyPublished } = useLibraryContext();
-  const { openUnitInfoSidebar, sidebarComponentInfo } = useSidebarContext();
+  const { openUnitInfoSidebar } = useSidebarContext();
 
   const {
     blockType: itemType,
@@ -199,18 +190,13 @@ const ContainerCard = ({ hit } : ContainerCardProps) => {
     showOnlyPublished ? published?.content?.childUsageKeys : content?.childUsageKeys
   ) ?? [];
 
-  const selected = sidebarComponentInfo?.type === SidebarBodyComponentId.UnitInfo
-    && sidebarComponentInfo.id === unitId;
-
   const { navigateTo } = useLibraryRoutes();
 
-  const openContainer = useCallback((e?: React.MouseEvent) => {
+  const openContainer = useCallback(() => {
     if (itemType === 'unit') {
       openUnitInfoSidebar(unitId);
       setUnitId(unitId);
-      if (!componentPickerMode) {
-        navigateTo({ unitId, doubleClicked: (e?.detail || 0) > 1 });
-      }
+      navigateTo({ unitId });
     }
   }, [unitId, itemType, openUnitInfoSidebar, navigateTo]);
 
@@ -232,7 +218,6 @@ const ContainerCard = ({ hit } : ContainerCardProps) => {
       )}
       hasUnpublishedChanges={publishStatus !== PublishStatus.Published}
       onSelect={openContainer}
-      selected={selected}
     />
   );
 };

src/library-authoring/containers/UnitInfo.tsx

@@ -9,14 +9,15 @@ import {
   IconButton,
   useToggle,
 } from '@openedx/paragon';
-import React, { useCallback } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { MoreVert } from '@openedx/paragon/icons';
 
 import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
 import { useLibraryContext } from '../common/context/LibraryContext';
 import {
   type UnitInfoTab,
+  SidebarActions,
   UNIT_INFO_TABS,
   isUnitInfoTab,
   useSidebarContext,
@@ -80,8 +81,9 @@ const UnitInfo = () => {
     sidebarTab,
     setSidebarTab,
     sidebarComponentInfo,
-    resetSidebarAction,
+    sidebarAction,
   } = useSidebarContext();
+  const jumpToCollections = sidebarAction === SidebarActions.JumpToAddCollections;
   const { insideUnit } = useLibraryRoutes();
 
   const tab: UnitInfoTab = (
@@ -94,12 +96,6 @@ const UnitInfo = () => {
 
   const showOpenUnitButton = !insideUnit && !componentPickerMode;
 
-  /* istanbul ignore next */
-  const handleTabChange = (newTab: UnitInfoTab) => {
-    resetSidebarAction();
-    setSidebarTab(newTab);
-  };
-
   const renderTab = useCallback((infoTab: UnitInfoTab, component: React.ReactNode, title: string) => {
     if (hiddenTabs.includes(infoTab)) {
       // For some reason, returning anything other than empty list breaks the tab style
@@ -121,6 +117,13 @@ const UnitInfo = () => {
     }
   }, [publishContainer]);
 
+  useEffect(() => {
+    // Show Organize tab if JumpToAddCollections action is set in sidebarComponentInfo
+    if (jumpToCollections) {
+      setSidebarTab(UNIT_INFO_TABS.Manage);
+    }
+  }, [jumpToCollections, setSidebarTab]);
+
   if (!container || !unitId) {
     return null;
   }
@@ -160,13 +163,9 @@ const UnitInfo = () => {
         className="my-3 d-flex justify-content-around"
         defaultActiveKey={defaultTab.unit}
         activeKey={tab}
-        onSelect={handleTabChange}
+        onSelect={setSidebarTab}
       >
-        {renderTab(
-          UNIT_INFO_TABS.Preview,
-          <LibraryUnitBlocks readOnly />,
-          intl.formatMessage(messages.previewTabTitle),
-        )}
+        {renderTab(UNIT_INFO_TABS.Preview, <LibraryUnitBlocks preview />, intl.formatMessage(messages.previewTabTitle))}
         {renderTab(UNIT_INFO_TABS.Manage, <ContainerOrganize />, intl.formatMessage(messages.manageTabTitle))}
         {renderTab(UNIT_INFO_TABS.Settings, 'Unit Settings', intl.formatMessage(messages.settingsTabTitle))}
       </Tabs>