fixup! feat: improve collection sidebar

rpenido · rpenido · commit 82aba727a5b7 · 2024-09-25T16:35:40.000-03:00
diff --git a/src/library-authoring/collections/CollectionDetails.tsx b/src/library-authoring/collections/CollectionDetails.tsx
@@ -115,7 +115,9 @@ const CollectionDetails = ({ library, collection }: CollectionDetailsProps) => {
   };
 
   return (
-    <Stack gap={3}>
+    <Stack
+      gap={3}
+    >
       <div>
         <h3 className="h5">
           {intl.formatMessage(messages.detailsTabDescriptionTitle)}
diff --git a/src/library-authoring/collections/CollectionInfo.tsx b/src/library-authoring/collections/CollectionInfo.tsx
@@ -27,7 +27,11 @@ const CollectionInfo = ({ library, collection }: CollectionInfoProps) => {
         Manage tab placeholder
       </Tab>
       <Tab eventKey="details" title={intl.formatMessage(messages.detailsTabTitle)}>
-        <CollectionDetails library={library} collection={collection} />
+        <CollectionDetails
+          key={collection.id} // This is necessary to force a re-render when the collection changes
+          library={library}
+          collection={collection}
+        />
       </Tab>
     </Tabs>
   );
diff --git a/src/library-authoring/collections/CollectionInfoHeader.tsx b/src/library-authoring/collections/CollectionInfoHeader.tsx
@@ -39,6 +39,8 @@ const CollectionInfoHeader = ({ library, collection } : CollectionInfoHeaderProp
         }).finally(() => {
           setIsActive(false);
         });
+      } else {
+        setIsActive(false);
       }
     },
     [collection, showToast, intl],
diff --git a/src/library-authoring/common/context.tsx b/src/library-authoring/common/context.tsx
@@ -1,5 +1,6 @@
 import { useToggle } from '@openedx/paragon';
 import React from 'react';
+import type { CollectionHit } from '../../search-manager';
 
 export enum SidebarBodyComponentId {
   AddContent = 'add-content',
@@ -18,7 +19,8 @@ export interface LibraryContextData {
   isCreateCollectionModalOpen: boolean;
   openCreateCollectionModal: () => void;
   closeCreateCollectionModal: () => void;
-  openCollectionInfoSidebar: () => void;
+  openCollectionInfoSidebar: (collectionHit: CollectionHit) => void
+  currentCollectionHit?: CollectionHit;
 }
 
 export const LibraryContext = React.createContext({
@@ -30,7 +32,8 @@ export const LibraryContext = React.createContext({
   isCreateCollectionModalOpen: false,
   openCreateCollectionModal: () => {},
   closeCreateCollectionModal: () => {},
-  openCollectionInfoSidebar: () => {},
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  openCollectionInfoSidebar: (_collectionHit: CollectionHit) => {},
 } as LibraryContextData);
 
 /**
@@ -39,29 +42,38 @@ export const LibraryContext = React.createContext({
 export const LibraryProvider = (props: { children?: React.ReactNode }) => {
   const [sidebarBodyComponent, setSidebarBodyComponent] = React.useState<SidebarBodyComponentId | null>(null);
   const [currentComponentUsageKey, setCurrentComponentUsageKey] = React.useState<string>();
+  const [currentCollectionHit, setcurrentCollectionHit] = React.useState<CollectionHit>();
   const [isCreateCollectionModalOpen, openCreateCollectionModal, closeCreateCollectionModal] = useToggle(false);
 
-  const closeLibrarySidebar = React.useCallback(() => {
+  const resetSidebar = React.useCallback(() => {
+    setCurrentComponentUsageKey(undefined);
+    setcurrentCollectionHit(undefined);
     setSidebarBodyComponent(null);
+  }, []);
+
+  const closeLibrarySidebar = React.useCallback(() => {
+    resetSidebar();
     setCurrentComponentUsageKey(undefined);
   }, []);
   const openAddContentSidebar = React.useCallback(() => {
-    setCurrentComponentUsageKey(undefined);
+    resetSidebar();
     setSidebarBodyComponent(SidebarBodyComponentId.AddContent);
   }, []);
   const openInfoSidebar = React.useCallback(() => {
-    setCurrentComponentUsageKey(undefined);
+    resetSidebar();
     setSidebarBodyComponent(SidebarBodyComponentId.Info);
   }, []);
   const openComponentInfoSidebar = React.useCallback(
     (usageKey: string) => {
+      resetSidebar();
       setCurrentComponentUsageKey(usageKey);
       setSidebarBodyComponent(SidebarBodyComponentId.ComponentInfo);
     },
     [],
   );
-  const openCollectionInfoSidebar = React.useCallback(() => {
-    setCurrentComponentUsageKey(undefined);
+  const openCollectionInfoSidebar = React.useCallback((collectionHit: CollectionHit) => {
+    resetSidebar();
+    setcurrentCollectionHit(collectionHit);
     setSidebarBodyComponent(SidebarBodyComponentId.CollectionInfo);
   }, []);
 
@@ -76,6 +88,7 @@ export const LibraryProvider = (props: { children?: React.ReactNode }) => {
     openCreateCollectionModal,
     closeCreateCollectionModal,
     openCollectionInfoSidebar,
+    currentCollectionHit,
   }), [
     sidebarBodyComponent,
     closeLibrarySidebar,
@@ -87,6 +100,7 @@ export const LibraryProvider = (props: { children?: React.ReactNode }) => {
     openCreateCollectionModal,
     closeCreateCollectionModal,
     openCollectionInfoSidebar,
+    currentCollectionHit,
   ]);
 
   return (
diff --git a/src/library-authoring/components/CollectionCard.tsx b/src/library-authoring/components/CollectionCard.tsx
@@ -1,23 +1,54 @@
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
+  Dropdown,
   Icon,
   IconButton,
 } from '@openedx/paragon';
 import { MoreVert } from '@openedx/paragon/icons';
-import { useNavigate } from 'react-router-dom';
+import { useContext } from 'react';
+import { Link } from 'react-router-dom';
 
 import { type CollectionHit } from '../../search-manager';
-import messages from './messages';
+import { LibraryContext } from '../common/context';
 import BaseComponentCard from './BaseComponentCard';
+import messages from './messages';
+
+export const CollectionMenu = ({ collectionHit }: { collectionHit: CollectionHit }) => {
+  const intl = useIntl();
+
+  return (
+    <Dropdown id="collection-card-dropdown" onClick={(e) => e.stopPropagation()}>
+      <Dropdown.Toggle
+        id="collection-card-menu-toggle"
+        as={IconButton}
+        src={MoreVert}
+        iconAs={Icon}
+        variant="primary"
+        alt={intl.formatMessage(messages.collectionCardMenuAlt)}
+        data-testid="collection-card-menu-toggle"
+      />
+      <Dropdown.Menu>
+        <Dropdown.Item
+          as={Link}
+          to={`/library/${collectionHit.contextKey}/collection/${collectionHit.blockId}/`}
+        >
+          <FormattedMessage {...messages.menuEdit} />
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
 
 type CollectionCardProps = {
   collectionHit: CollectionHit,
 };
 
 const CollectionCard = ({ collectionHit }: CollectionCardProps) => {
   const intl = useIntl();
-  const navigate = useNavigate();
+  const {
+    openCollectionInfoSidebar,
+  } = useContext(LibraryContext);
 
   const {
     type,
@@ -39,16 +70,11 @@ const CollectionCard = ({ collectionHit }: CollectionCardProps) => {
       tags={tags}
       actions={(
         <ActionRow>
-          <IconButton
-            src={MoreVert}
-            iconAs={Icon}
-            variant="primary"
-            alt={intl.formatMessage(messages.collectionCardMenuAlt)}
-          />
+          <CollectionMenu collectionHit={collectionHit} />
         </ActionRow>
       )}
       blockTypeDisplayName={blockTypeDisplayName}
-      openInfoSidebar={() => navigate(`/library/${collectionHit.contextKey}/collection/${collectionHit.blockId}`)}
+      openInfoSidebar={() => openCollectionInfoSidebar(collectionHit)}
     />
   );
 };
diff --git a/src/library-authoring/components/messages.ts b/src/library-authoring/components/messages.ts
@@ -22,9 +22,9 @@ const messages = defineMessages({
     description: 'Collection type text with children count',
   },
   menuEdit: {
-    id: 'course-authoring.library-authoring.component.menu.edit',
+    id: 'course-authoring.library-authoring.component-collection.menu.edit',
     defaultMessage: 'Edit',
-    description: 'Menu item for edit a component.',
+    description: 'Menu item for edit a component/collection.',
   },
   menuCopyToClipboard: {
     id: 'course-authoring.library-authoring.component.menu.copy',
diff --git a/src/library-authoring/library-sidebar/LibrarySidebar.tsx b/src/library-authoring/library-sidebar/LibrarySidebar.tsx
@@ -6,18 +6,21 @@ import {
 } from '@openedx/paragon';
 import { Close } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import messages from '../messages';
+import { SearchParams } from 'meilisearch';
+
+import {
+  SearchContextProvider,
+} from '../../search-manager';
 import { AddContentContainer, AddContentHeader } from '../add-content';
+import { CollectionInfo, CollectionInfoHeader } from '../collections';
+import { ContentLibrary } from '../data/api';
 import { LibraryContext, SidebarBodyComponentId } from '../common/context';
-import { LibraryInfo, LibraryInfoHeader } from '../library-info';
 import { ComponentInfo, ComponentInfoHeader } from '../component-info';
-import { ContentLibrary } from '../data/api';
-import { CollectionInfo, CollectionInfoHeader } from '../collections';
-import { type CollectionHit } from '../../search-manager/data/api';
+import { LibraryInfo, LibraryInfoHeader } from '../library-info';
+import messages from '../messages';
 
 type LibrarySidebarProps = {
   library: ContentLibrary,
-  collection?: CollectionHit,
 };
 
 /**
@@ -29,12 +32,13 @@ type LibrarySidebarProps = {
  * You can add more components in `bodyComponentMap`.
  * Use the returned actions to open and close this sidebar.
  */
-const LibrarySidebar = ({ library, collection }: LibrarySidebarProps) => {
+const LibrarySidebar = ({ library }: LibrarySidebarProps) => {
   const intl = useIntl();
   const {
     sidebarBodyComponent,
     closeLibrarySidebar,
     currentComponentUsageKey,
+    currentCollectionHit,
   } = useContext(LibraryContext);
 
   const bodyComponentMap = {
@@ -43,7 +47,9 @@ const LibrarySidebar = ({ library, collection }: LibrarySidebarProps) => {
     [SidebarBodyComponentId.ComponentInfo]: (
       currentComponentUsageKey && <ComponentInfo usageKey={currentComponentUsageKey} />
     ),
-    [SidebarBodyComponentId.CollectionInfo]: collection && <CollectionInfo library={library} collection={collection} />,
+    [SidebarBodyComponentId.CollectionInfo]: (
+      currentCollectionHit && <CollectionInfo library={library} collection={currentCollectionHit} />
+    ),
     unknown: null,
   };
 
@@ -54,31 +60,44 @@ const LibrarySidebar = ({ library, collection }: LibrarySidebarProps) => {
       currentComponentUsageKey && <ComponentInfoHeader library={library} usageKey={currentComponentUsageKey} />
     ),
     [SidebarBodyComponentId.CollectionInfo]: (
-      collection && <CollectionInfoHeader library={library} collection={collection} />
+      currentCollectionHit && <CollectionInfoHeader library={library} collection={currentCollectionHit} />
     ),
     unknown: null,
   };
 
   const buildBody = () : React.ReactNode => bodyComponentMap[sidebarBodyComponent || 'unknown'];
   const buildHeader = (): React.ReactNode => headerComponentMap[sidebarBodyComponent || 'unknown'];
 
+  const collectionQuery: SearchParams | undefined = currentCollectionHit ? {
+    filter: ['type = "collection"', `context_key = "${library.id}"`, `block_id = "${currentCollectionHit.blockId}"`],
+    limit: 1,
+  } : undefined;
+
   return (
-    <Stack gap={4} className="p-3 text-primary-700">
-      <Stack direction="horizontal" className="d-flex justify-content-between">
-        {buildHeader()}
-        <IconButton
-          className="mt-1"
-          src={Close}
-          iconAs={Icon}
-          alt={intl.formatMessage(messages.closeButtonAlt)}
-          onClick={closeLibrarySidebar}
-          size="inline"
-        />
+    <SearchContextProvider
+      extraFilter={[
+        `context_key = "${library.id}"`,
+        ...(currentCollectionHit ? [`collections.key = "${currentCollectionHit.blockId}"`] : []),
+      ]}
+      overrideQueries={{ ...(collectionQuery ? { collections: collectionQuery } : {}) }}
+    >
+      <Stack gap={4} className="p-3 text-primary-700">
+        <Stack direction="horizontal" className="d-flex justify-content-between">
+          {buildHeader()}
+          <IconButton
+            className="mt-1"
+            src={Close}
+            iconAs={Icon}
+            alt={intl.formatMessage(messages.closeButtonAlt)}
+            onClick={closeLibrarySidebar}
+            size="inline"
+          />
+        </Stack>
+        <div>
+          {buildBody()}
+        </div>
       </Stack>
-      <div>
-        {buildBody()}
-      </div>
-    </Stack>
+    </SearchContextProvider>
   );
 };
 

Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,8 @@ const CollectionInfoHeader = ({ library, collection } : CollectionInfoHeaderProp`
`39`	`39`	`}).finally(() => {`
`40`	`40`	`setIsActive(false);`
`41`	`41`	`});`
	`42`	`+ } else {`
	`43`	`+ setIsActive(false);`
`42`	`44`	`}`
`43`	`45`	`},`
`44`	`46`	`[collection, showToast, intl],`