feat: Update ContentTagsDrawer to use it in the MFE

src/content-tags-drawer/ContentTagsDrawer.jsx

@@ -1,5 +1,6 @@
 // @ts-check
 import React, { useMemo, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import {
   Container,
   CloseButton,
@@ -20,9 +21,14 @@ import Loading from '../generic/Loading';
 /** @typedef {import("../taxonomy/data/types.mjs").TaxonomyData} TaxonomyData */
 /** @typedef {import("./data/types.mjs").Tag} ContentTagData */
 
-const ContentTagsDrawer = () => {
+const ContentTagsDrawer = ({ id, onClose }) => {
   const intl = useIntl();
-  const { contentId } = /** @type {{contentId: string}} */(useParams());
+  const params = useParams();
+  let contentId = id;
+
+  if (contentId === undefined) {
+    contentId = params.contentId;
+  }
 
   const org = extractOrgFromContentId(contentId);
 
@@ -39,17 +45,20 @@ const ContentTagsDrawer = () => {
   } = useContentTaxonomyTagsData(contentId);
   const { taxonomyListData, isTaxonomyListLoaded } = useTaxonomyListData();
 
-  const closeContentTagsDrawer = () => {
-    // "*" allows communication with any origin
-    window.parent.postMessage('closeManageTagsDrawer', '*');
-  };
+  let onCloseDrawer = onClose;
+  if (onCloseDrawer === undefined) {
+    onCloseDrawer = () => {
+      // "*" allows communication with any origin
+      window.parent.postMessage('closeManageTagsDrawer', '*');
+    };
+  }
 
   useEffect(() => {
     const handleEsc = (event) => {
       /* Close drawer when ESC-key is pressed and selectable dropdown box not open */
       const selectableBoxOpen = document.querySelector('[data-selectable-box="taxonomy-tags"]');
       if (event.key === 'Escape' && !selectableBoxOpen) {
-        closeContentTagsDrawer();
+        onCloseDrawer();
       }
     };
     document.addEventListener('keydown', handleEsc);
@@ -86,7 +95,7 @@ const ContentTagsDrawer = () => {
 
     <div className="mt-1">
       <Container size="xl">
-        <CloseButton onClick={() => closeContentTagsDrawer()} data-testid="drawer-close-button" />
+        <CloseButton onClick={() => onCloseDrawer()} data-testid="drawer-close-button" />
         <span>{intl.formatMessage(messages.headerSubtitle)}</span>
         { isContentDataLoaded
           ? <h3>{ contentData.displayName }</h3>
@@ -116,4 +125,14 @@ const ContentTagsDrawer = () => {
   );
 };
 
+ContentTagsDrawer.propTypes = {
+  id: PropTypes.string,
+  onClose: PropTypes.func,
+};
+
+ContentTagsDrawer.defaultProps = {
+  id: undefined,
+  onClose: undefined,
+};
+
 export default ContentTagsDrawer;

src/content-tags-drawer/ContentTagsDrawer.test.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { act, render, fireEvent } from '@testing-library/react';
+import {
+  act, render, fireEvent, screen,
+} from '@testing-library/react';
 
 import ContentTagsDrawer from './ContentTagsDrawer';
 import {
@@ -9,10 +11,13 @@ import {
 } from './data/apiHooks';
 import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from '../taxonomy/data/apiHooks';
 
+const contentId = 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@7f47fe2dbcaf47c5a071671c741fe1ab';
+const mockOnClose = jest.fn();
+
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useParams: () => ({
-    contentId: 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@7f47fe2dbcaf47c5a071671c741fe1ab',
+    contentId,
   }),
 }));
 
@@ -35,9 +40,9 @@ jest.mock('../taxonomy/data/apiHooks', () => ({
   useIsTaxonomyListDataLoaded: jest.fn(),
 }));
 
-const RootWrapper = () => (
+const RootWrapper = (params) => (
   <IntlProvider locale="en" messages={{}}>
-    <ContentTagsDrawer />
+    <ContentTagsDrawer {...params} />
   </IntlProvider>
 );
 
@@ -77,6 +82,17 @@ describe('<ContentTagsDrawer />', () => {
     });
   });
 
+  it('shows content using params', async () => {
+    useContentData.mockReturnValue({
+      isSuccess: true,
+      data: {
+        displayName: 'Unit 1',
+      },
+    });
+    render(<RootWrapper id={contentId} />);
+    expect(screen.getByText('Unit 1')).toBeInTheDocument();
+  });
+
   it('shows the taxonomies data including tag numbers after the query is complete', async () => {
     useIsTaxonomyListDataLoaded.mockReturnValue(true);
     useContentTaxonomyTagsData.mockReturnValue({
@@ -138,7 +154,7 @@ describe('<ContentTagsDrawer />', () => {
     });
   });
 
-  it('should call closeContentTagsDrawer when CloseButton is clicked', async () => {
+  it('should call closeManageTagsDrawer when CloseButton is clicked', async () => {
     const postMessageSpy = jest.spyOn(window.parent, 'postMessage');
 
     const { getByTestId } = render(<RootWrapper />);
@@ -152,7 +168,17 @@ describe('<ContentTagsDrawer />', () => {
     postMessageSpy.mockRestore();
   });
 
-  it('should call closeContentTagsDrawer when Escape key is pressed and no selectable box is active', () => {
+  it('should call onClose param when CloseButton is clicked', async () => {
+    render(<RootWrapper onClose={mockOnClose} />);
+
+    // Find the CloseButton element by its test ID and trigger a click event
+    const closeButton = screen.getByTestId('drawer-close-button');
+    fireEvent.click(closeButton);
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('should call closeManageTagsDrawer when Escape key is pressed and no selectable box is active', () => {
     const postMessageSpy = jest.spyOn(window.parent, 'postMessage');
 
     const { container } = render(<RootWrapper />);
@@ -166,7 +192,7 @@ describe('<ContentTagsDrawer />', () => {
     postMessageSpy.mockRestore();
   });
 
-  it('should not call closeContentTagsDrawer when Escape key is pressed and a selectable box is active', () => {
+  it('should not call closeManageTagsDrawer when Escape key is pressed and a selectable box is active', () => {
     const postMessageSpy = jest.spyOn(window.parent, 'postMessage');
 
     const { container } = render(<RootWrapper />);