feat: improve collection sidebar (#1320)

* feat: improve collection sidebar

* feat: add comments to splice blockTypesArray code

Co-authored-by: Jillian <jill@opencraft.com>
---------

Co-authored-by: Jillian <jill@opencraft.com>
Co-authored-by: Chris Chávez <xnpiochv@gmail.com>

src/library-authoring/components/CollectionCard.test.tsx

@@ -1,4 +1,9 @@
-import { initializeMocks, render, screen } from '../../testUtils';
+import {
+  initializeMocks,
+  fireEvent,
+  render,
+  screen,
+} from '../../testUtils';
 
 import { type CollectionHit } from '../../search-manager';
 import CollectionCard from './CollectionCard';
@@ -7,6 +12,8 @@ const CollectionHitSample: CollectionHit = {
   id: '1',
   type: 'collection',
   contextKey: 'lb:org1:Demo_Course',
+  usageKey: 'lb:org1:Demo_Course:collection1',
+  blockId: 'collection1',
   org: 'org1',
   breadcrumbs: [{ displayName: 'Demo Lib' }],
   displayName: 'Collection Display Name',
@@ -37,4 +44,18 @@ describe('<CollectionCard />', () => {
     expect(screen.queryByText('Collection description')).toBeInTheDocument();
     expect(screen.queryByText('Collection (2)')).toBeInTheDocument();
   });
+
+  it('should navigate to the collection if the open menu clicked', async () => {
+    render(<CollectionCard collectionHit={CollectionHitSample} />);
+
+    // Open menu
+    expect(screen.getByTestId('collection-card-menu-toggle')).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId('collection-card-menu-toggle'));
+
+    // Open menu item
+    const openMenuItem = screen.getByRole('link', { name: 'Open' });
+    expect(openMenuItem).toBeInTheDocument();
+
+    expect(openMenuItem).toHaveAttribute('href', '/library/lb:org1:Demo_Course/collection/collection1/');
+  });
 });

src/library-authoring/components/CollectionCard.tsx

@@ -1,21 +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 { 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.menuOpen} />
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
 
 type CollectionCardProps = {
   collectionHit: CollectionHit,
 };
 
-const CollectionCard = ({ collectionHit } : CollectionCardProps) => {
+const CollectionCard = ({ collectionHit }: CollectionCardProps) => {
   const intl = useIntl();
+  const {
+    openCollectionInfoSidebar,
+  } = useContext(LibraryContext);
 
   const {
     type,
@@ -37,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={() => {}}
+      openInfoSidebar={() => openCollectionInfoSidebar(collectionHit.blockId)}
     />
   );
 };

src/library-authoring/components/messages.ts

@@ -21,6 +21,11 @@ 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.menu.edit',
     defaultMessage: 'Edit',