fix: remove interactivity from section/subsection preview in sidebar (#2362)

Removes interactivity from section/subsection preview in sidebar. Also fixes an issue with unit sidebar, where users could press enter after clicking on any component and it would select it.

Author: navinkarkera

src/library-authoring/containers/ContainerInfo.test.tsx

@@ -4,17 +4,17 @@ import type MockAdapter from 'axios-mock-adapter';
 import {
   initializeMocks, render as baseRender, screen, waitFor,
   fireEvent,
-} from '../../testUtils';
+  within,
+} from '@src/testUtils';
+import { ContainerType } from '@src/generic/key-utils';
+import { mockContentSearchConfig, mockSearchResult } from '@src/search-manager/data/api.mock';
+import type { ToastActionData } from '@src/generic/toast-context';
 import { mockContentLibrary, mockGetContainerChildren, mockGetContainerMetadata } from '../data/api.mocks';
 import { LibraryProvider } from '../common/context/LibraryContext';
 import ContainerInfo from './ContainerInfo';
 import { getLibraryContainerApiUrl, getLibraryContainerPublishApiUrl } from '../data/api';
 import { SidebarBodyItemId, SidebarProvider } from '../common/context/SidebarContext';
-import { ContainerType } from '../../generic/key-utils';
-import { mockContentSearchConfig, mockSearchResult } from '../../search-manager/data/api.mock';
-import type { ToastActionData } from '../../generic/toast-context';
 
-mockGetContainerMetadata.applyMock();
 mockContentLibrary.applyMock();
 mockContentSearchConfig.applyMock();
 mockGetContainerMetadata.applyMock();
@@ -23,6 +23,12 @@ mockGetContainerChildren.applyMock();
 const { libraryId } = mockContentLibrary;
 const { unitId, subsectionId, sectionId } = mockGetContainerMetadata;
 
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
 const render = (containerId: string, showOnlyPublished: boolean = false) => {
   const params: { libraryId: string, selectedItemId?: string } = { libraryId, selectedItemId: containerId };
   return baseRender(<ContainerInfo />, {
@@ -141,6 +147,7 @@ let mockShowToast: { (message: string, action?: ToastActionData | undefined): vo
     });
 
     it(`shows the ${containerType} Preview tab by default and the children are readonly`, async () => {
+      const user = userEvent.setup();
       render(containerId);
       const previewTab = await screen.findByText('Preview');
       expect(previewTab).toBeInTheDocument();
@@ -149,11 +156,36 @@ let mockShowToast: { (message: string, action?: ToastActionData | undefined): vo
       // Check that there are no edit buttons for components titles
       expect(screen.queryAllByRole('button', { name: /edit/i }).length).toBe(0);
 
-      // Check that there are no drag handle for components
+      // Check that there are no drag handle for components/containers
       expect(screen.queryAllByRole('button', { name: 'Drag to reorder' }).length).toBe(0);
 
       // Check that there are no menu buttons for components
       expect(screen.queryAllByRole('button', { name: /component actions menu/i }).length).toBe(0);
+
+      let childType: string;
+      switch (containerType) {
+        case ContainerType.Section:
+          childType = ContainerType.Subsection;
+          break;
+        case ContainerType.Subsection:
+          childType = ContainerType.Unit;
+          break;
+        case ContainerType.Unit:
+          childType = 'text';
+          break;
+        default:
+          break;
+      }
+      const child = await screen.findByText(`${childType!} block 0`);
+      screen.debug(child.parentElement!.parentElement!.parentElement!);
+      // Check that there are no menu buttons for containers
+      expect(within(
+        child.parentElement!.parentElement!.parentElement!,
+      ).queryAllByRole('button', { name: /container actions menu/i }).length).toBe(0);
+      // Trigger double click. Find the child card as the parent element
+      await user.dblClick(child.parentElement!.parentElement!.parentElement!);
+      // Click should not do anything in preview
+      expect(mockNavigate).not.toHaveBeenCalled();
     });
   });
 });

src/library-authoring/section-subsections/LibraryContainerChildren.tsx

@@ -166,13 +166,17 @@ export const LibraryContainerChildren = ({ containerKey, readOnly }: LibraryCont
   }, [children, setOrderedChildren]);
 
   const handleChildClick = useCallback((child: LibraryContainerMetadataWithUniqueId, numberOfClicks: number) => {
+    if (readOnly) {
+      // don't allow interaction if rendered as preview
+      return;
+    }
     const doubleClicked = numberOfClicks > 1;
     if (!doubleClicked) {
       openItemSidebar(child.originalId, SidebarBodyItemId.ContainerInfo);
     } else {
       navigateTo({ containerId: child.originalId });
     }
-  }, [openItemSidebar, navigateTo]);
+  }, [openItemSidebar, navigateTo, readOnly]);
 
   const getComponentStyle = useCallback((childId: string) => {
     const style: { marginBottom: string, borderRadius: string, outline?: string } = {
@@ -225,7 +229,7 @@ export const LibraryContainerChildren = ({ containerKey, readOnly }: LibraryCont
               borderRadius: '8px',
               borderLeft: '8px solid #E1DDDB',
             }}
-            isClickable
+            isClickable={!readOnly}
             onClick={(e) => handleChildClick(child, e.detail)}
             onKeyDown={(e) => {
               if (e.key === 'Enter') {

src/library-authoring/units/LibraryUnitBlocks.tsx

@@ -135,13 +135,17 @@ const ComponentBlock = ({ block, readOnly, isDragging }: ComponentBlockProps) =>
   const { sidebarItemInfo, openItemSidebar } = useSidebarContext();
 
   const handleComponentSelection = useCallback((numberOfClicks: number) => {
+    if (readOnly) {
+      // don't allow interaction if rendered as preview
+      return;
+    }
     openItemSidebar(block.originalId, SidebarBodyItemId.ComponentInfo);
     const canEdit = canEditComponent(block.originalId);
     if (numberOfClicks > 1 && canEdit) {
       // Open editor on double click.
       openComponentEditor(block.originalId);
     }
-  }, [block, openItemSidebar, canEditComponent, openComponentEditor]);
+  }, [block, openItemSidebar, canEditComponent, openComponentEditor, readOnly]);
 
   useEffect(() => {
     if (block.isNew) {
@@ -181,7 +185,7 @@ const ComponentBlock = ({ block, readOnly, isDragging }: ComponentBlockProps) =>
           borderBottom: 'solid 1px #E1DDDB',
         }}
         isClickable={!readOnly}
-        onClick={(e) => !readOnly && handleComponentSelection(e.detail)}
+        onClick={(e) => handleComponentSelection(e.detail)}
         onKeyDown={(e) => {
           if (e.key === 'Enter') {
             handleComponentSelection(e.detail);