fixup! feat: improve collection sidebar

Author: rpenido

src/library-authoring/collections/CollectionInfo.tsx

@@ -1,13 +1,16 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
+  Button,
+  Stack,
   Tab,
   Tabs,
 } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
 
-import type { ContentLibrary } from '../data/api';
 import type { CollectionHit } from '../../search-manager';
-import messages from './messages';
+import type { ContentLibrary } from '../data/api';
 import CollectionDetails from './CollectionDetails';
+import messages from './messages';
 
 interface CollectionInfoProps {
   library: ContentLibrary,
@@ -18,22 +21,34 @@ const CollectionInfo = ({ library, collection }: CollectionInfoProps) => {
   const intl = useIntl();
 
   return (
-    <Tabs
-      variant="tabs"
-      className="my-3 d-flex justify-content-around"
-      defaultActiveKey="manage"
-    >
-      <Tab eventKey="manage" title={intl.formatMessage(messages.manageTabTitle)}>
-        Manage tab placeholder
-      </Tab>
-      <Tab eventKey="details" title={intl.formatMessage(messages.detailsTabTitle)}>
-        <CollectionDetails
-          key={collection.id} // This is necessary to force a re-render when the collection changes
-          library={library}
-          collection={collection}
-        />
-      </Tab>
-    </Tabs>
+    <Stack>
+      <div className="d-flex flex-wrap">
+        <Button
+          as={Link}
+          to={`/library/${library.id}/collection/${collection.blockId}/`}
+          variant="outline-primary"
+          className="m-1 text-nowrap flex-grow-1"
+        >
+          {intl.formatMessage(messages.openCollectionButton)}
+        </Button>
+      </div>
+      <Tabs
+        variant="tabs"
+        className="my-3 d-flex justify-content-around"
+        defaultActiveKey="manage"
+      >
+        <Tab eventKey="manage" title={intl.formatMessage(messages.manageTabTitle)}>
+          Manage tab placeholder
+        </Tab>
+        <Tab eventKey="details" title={intl.formatMessage(messages.detailsTabTitle)}>
+          <CollectionDetails
+            key={collection.id} // This is necessary to force a re-render when the collection changes
+            library={library}
+            collection={collection}
+          />
+        </Tab>
+      </Tabs>
+    </Stack>
   );
 };
 

src/library-authoring/collections/LibraryCollectionPage.tsx

@@ -102,8 +102,8 @@ const LibraryCollectionPageInner = ({ libraryId }: { libraryId: string }) => {
   const { collectionHits: [collectionData], isFetching } = useSearchContext();
 
   useEffect(() => {
-    openCollectionInfoSidebar();
-  }, []);
+    openCollectionInfoSidebar(collectionData);
+  }, [collectionData]);
 
   const { data: libraryData, isLoading: isLibLoading } = useContentLibrary(libraryId);
 
@@ -149,7 +149,7 @@ const LibraryCollectionPageInner = ({ libraryId }: { libraryId: string }) => {
               <SubHeaderTitle
                 title={collectionData.displayName}
                 canEditLibrary={libraryData.canEditLibrary}
-                infoClickHandler={openCollectionInfoSidebar}
+                infoClickHandler={() => openCollectionInfoSidebar(collectionData)}
               />
             )}
             breadcrumbs={(

src/library-authoring/collections/messages.ts

@@ -1,6 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  openCollectionButton: {
+    id: 'course-authoring.library-authoring.collections-sidebbar.open-button',
+    defaultMessage: 'Open',
+    description: 'Button text to open collection',
+  },
   manageTabTitle: {
     id: 'course-authoring.library-authoring.collections-sidebar.manage-tab.title',
     defaultMessage: 'Manage',

src/library-authoring/components/CollectionCard.tsx

@@ -33,7 +33,7 @@ export const CollectionMenu = ({ collectionHit }: { collectionHit: CollectionHit
           as={Link}
           to={`/library/${collectionHit.contextKey}/collection/${collectionHit.blockId}/`}
         >
-          <FormattedMessage {...messages.menuEdit} />
+          <FormattedMessage {...messages.menuOpen} />
         </Dropdown.Item>
       </Dropdown.Menu>
     </Dropdown>

src/library-authoring/components/messages.ts

@@ -21,10 +21,15 @@ const messages = defineMessages({
     defaultMessage: 'Collection ({numChildren})',
     description: 'Collection type text with children count',
   },
+  menuOpen: {
+    id: 'course-authoring.library-authoring.collection.menu.open',
+    defaultMessage: 'Open',
+    description: 'Menu item for open a collection.',
+  },
   menuEdit: {
-    id: 'course-authoring.library-authoring.component-collection.menu.edit',
+    id: 'course-authoring.library-authoring.component.menu.edit',
     defaultMessage: 'Edit',
-    description: 'Menu item for edit a component/collection.',
+    description: 'Menu item for edit a component.',
   },
   menuCopyToClipboard: {
     id: 'course-authoring.library-authoring.component.menu.copy',

src/library-authoring/generic/index.scss

@@ -1,3 +1,2 @@
 @import "./history-widget/HistoryWidget";
 @import "./status-widget/StatusWidget";
-@import "./history-widget/HistoryWidget";