feat: Open Manage tags on click tag count in section/subsection page [FC-0090]

src/generic/tag-count/index.tsx

@@ -6,10 +6,16 @@ type TagCountProps = {
   count: number;
   onClick?: () => void;
   size?: Parameters<typeof Icon>[0]['size'];
+  dataTestId?: string;
 };
 
 // eslint-disable-next-line react/prop-types
-const TagCount: React.FC<TagCountProps> = ({ count, onClick, size }) => {
+const TagCount: React.FC<TagCountProps> = ({
+  count,
+  onClick,
+  size,
+  dataTestId,
+}: TagCountProps) => {
   const renderContent = () => (
     <Stack direction="horizontal" gap={1}>
       <Icon size={size} src={Tag} />
@@ -23,7 +29,7 @@ const TagCount: React.FC<TagCountProps> = ({ count, onClick, size }) => {
     }
     >
       { onClick ? (
-        <Button variant="tertiary" onClick={onClick}>
+        <Button variant="tertiary" onClick={onClick} data-testid={dataTestId}>
           {renderContent()}
         </Button>
       )

src/library-authoring/data/apiHooks.ts

@@ -678,7 +678,10 @@ export const useContainerChildren = (containerId?: string, published: boolean =
     enabled: !!containerId,
     queryKey: libraryAuthoringQueryKeys.containerChildren(containerId!),
     queryFn: () => api.getLibraryContainerChildren(containerId!, published),
-    structuralSharing: (oldData: api.LibraryBlockMetadata[], newData: api.LibraryBlockMetadata[]) => {
+    structuralSharing: (
+      oldData: api.LibraryBlockMetadata[] | api.Container[],
+      newData: api.LibraryBlockMetadata[] | api.Container[],
+    ) => {
       // This just sets `isNew` flag to new children components
       if (oldData) {
         const oldDataIds = oldData.map((obj) => obj.id);

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

@@ -23,7 +23,8 @@ import { ToastContext } from '../../generic/toast-context';
 import TagCount from '../../generic/tag-count';
 import { ContainerMenu } from '../components/ContainerCard';
 import { useLibraryRoutes } from '../routes';
-import { useSidebarContext } from '../common/context/SidebarContext';
+import { SidebarActions, useSidebarContext } from '../common/context/SidebarContext';
+import { useRunOnNextRender } from '../../utils';
 
 interface LibraryContainerChildrenProps {
   containerKey: string;
@@ -44,6 +45,8 @@ const ContainerRow = ({ container, readOnly }: ContainerRowProps) => {
   const { showToast } = useContext(ToastContext);
   const updateMutation = useUpdateContainer(container.originalId);
   const { showOnlyPublished } = useLibraryContext();
+  const { navigateTo } = useLibraryRoutes();
+  const { setSidebarAction } = useSidebarContext();
 
   const handleSaveDisplayName = async (newDisplayName: string) => {
     try {
@@ -56,6 +59,18 @@ const ContainerRow = ({ container, readOnly }: ContainerRowProps) => {
     }
   };
 
+  /* istanbul ignore next */
+  const scheduleJumpToTags = useRunOnNextRender(() => {
+    // TODO: Ugly hack to make sure sidebar shows manage tags section
+    // This needs to run after all changes to url takes place to avoid conflicts.
+    setTimeout(() => setSidebarAction(SidebarActions.JumpToManageTags), 250);
+  });
+
+  const jumpToManageTags = () => {
+    navigateTo({ selectedItemId: container.originalId });
+    scheduleJumpToTags();
+  };
+
   return (
     <>
       <InplaceTextEditor
@@ -83,7 +98,12 @@ const ContainerRow = ({ container, readOnly }: ContainerRowProps) => {
             </Stack>
           </Badge>
         )}
-        <TagCount size="sm" count={container.tagsCount} />
+        <TagCount
+          size="sm"
+          count={container.tagsCount}
+          onClick={readOnly ? undefined : jumpToManageTags}
+          dataTestId={`tag-count-${container.id}`}
+        />
         {!readOnly && (
           <ContainerMenu
             containerKey={container.originalId}

src/library-authoring/section-subsections/LibrarySectionSubsectionPage.test.tsx

@@ -345,5 +345,21 @@ describe('<LibrarySectionPage / LibrarySubsectionPage />', () => {
       expect((await screen.findAllByText(new RegExp(`Test ${childType}`, 'i')))[0]).toBeInTheDocument();
       expect(await screen.findByRole('button', { name: new RegExp(`${childType} Info`, 'i') })).toBeInTheDocument();
     });
+
+    it(`should open manage tags on click tag count in ${cType} page`, async () => {
+      const cId = cType === ContainerType.Section
+        ? mockGetContainerMetadata.sectionId
+        : mockGetContainerMetadata.subsectionId;
+      renderLibrarySectionPage(cId, undefined, cType);
+      // check all children components are rendered.
+      expect((await screen.findAllByText(`${childType} block 0`))[0]).toBeInTheDocument();
+      expect((await screen.findAllByText(`${childType} block 1`))[0]).toBeInTheDocument();
+      expect((await screen.findAllByText(`${childType} block 2`))[0]).toBeInTheDocument();
+
+      const tagCountButton = screen.getByTestId(`tag-count-lb:org1:Demo_course:${childType}:${childType}-0----0`);
+      fireEvent.click(tagCountButton);
+
+      expect(await screen.findByTestId('library-sidebar')).toBeInTheDocument();
+    });
   });
 });