feat: move library props to context (WIP)

openedx · Oct 4, 2024 · 785a830 · 785a830
1 parent 6b64bb4
commit 785a830
Show file tree

Hide file tree

Showing 30 changed files with 601 additions and 567 deletions.
diff --git a/src/content-tags-drawer/ContentTagsDrawer.tsx b/src/content-tags-drawer/ContentTagsDrawer.tsx
@@ -154,7 +154,11 @@ const ContentTagsDrawerVariantFooter = ({ onClose }: ContentTagsDrawerVariantFoo
   );
 };
 
-const ContentTagsComponentVariantFooter = () => {
+interface ContentTagsComponentVariantFooterProps {
+  readOnly?: boolean;
+}
+
+const ContentTagsComponentVariantFooter = ({ readOnly = false }: ContentTagsComponentVariantFooterProps) => {
   const intl = useIntl();
   const {
     commitGlobalStagedTagsStatus,
@@ -195,7 +199,7 @@ const ContentTagsComponentVariantFooter = () => {
             </div>
           )}
         </div>
-      ) : (
+      ) : !readOnly && (
         <Button
           variant="outline-primary"
           onClick={toEditMode}
@@ -212,6 +216,7 @@ interface ContentTagsDrawerProps {
   id?: string;
   onClose?: () => void;
   variant?: 'drawer' | 'component';
+  readOnly?: boolean;
 }
 
 /**
@@ -227,6 +232,7 @@ const ContentTagsDrawer = ({
   id,
   onClose,
   variant = 'drawer',
+  readOnly = false,
 }: ContentTagsDrawerProps) => {
   const intl = useIntl();
   // TODO: We can delete 'params' when the iframe is no longer used on edx-platform
@@ -303,7 +309,7 @@ const ContentTagsDrawer = ({
         case 'drawer':
           return <ContentTagsDrawerVariantFooter onClose={onCloseDrawer} />;
         case 'component':
-          return <ContentTagsComponentVariantFooter />;
+          return <ContentTagsComponentVariantFooter readOnly={readOnly} />;
         default:
           return null;
       }

diff --git a/src/library-authoring/LibraryAuthoringPage.test.tsx b/src/library-authoring/LibraryAuthoringPage.test.tsx
@@ -213,6 +213,7 @@ describe('<LibraryAuthoringPage />', () => {
     await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
 
     expect(await screen.findByText('Content library')).toBeInTheDocument();
+    screen.logTestingPlaygroundURL();
     expect(screen.getByText('You have not added any content to this library yet.')).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /add component/i })).not.toBeInTheDocument();
     expect(screen.getByText('Read Only')).toBeInTheDocument();
@@ -505,7 +506,7 @@ describe('<LibraryAuthoringPage />', () => {
     expect(showProbTypesSubmenuBtn).not.toBeNull();
     fireEvent.click(showProbTypesSubmenuBtn!);
 
-    const validateSubmenu = async (submenuText : string) => {
+    const validateSubmenu = async (submenuText: string) => {
       const submenu = screen.getByText(submenuText);
       expect(submenu).toBeInTheDocument();
       fireEvent.click(submenu);

diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import classNames from 'classnames';
 import { StudioFooter } from '@edx/frontend-component-footer';
@@ -33,7 +33,6 @@ import {
 import LibraryComponents from './components/LibraryComponents';
 import LibraryCollections from './collections/LibraryCollections';
 import LibraryHome from './LibraryHome';
-import { useContentLibrary } from './data/apiHooks';
 import { LibrarySidebar } from './library-sidebar';
 import { SidebarBodyComponentId, useLibraryContext } from './common/context';
 import messages from './messages';
@@ -119,27 +118,23 @@ const SubHeaderTitle = ({ title, showReadOnlyBadge }: { title: string, showReadO
   );
 };
 
-interface LibraryAuthoringPageProps {
-  libraryId?: string;
-  componentPicker?: boolean;
-}
-
-const LibraryAuthoringPage = (props: LibraryAuthoringPageProps) => {
+const LibraryAuthoringPage = () => {
   const intl = useIntl();
   const location = useLocation();
   const navigate = useNavigate();
 
   const {
     libraryId,
+    libraryData,
+    isLoadingLibraryData,
     componentPickerMode,
     sidebarBodyComponent,
     openInfoSidebar,
   } = useLibraryContext();
-  const { data: libraryData, isLoading } = useContentLibrary(libraryId);
 
   const currentPath = location.pathname.split('/').pop();
   let initialActiveKey: string | undefined;
-  if (componentPickerMode || currentPath === libraryId) {
+  if (componentPickerMode || currentPath === libraryId || currentPath === '') {
     initialActiveKey = TabList.home;
   } else if (currentPath && currentPath in TabList) {
     initialActiveKey = TabList[currentPath];
@@ -155,7 +150,7 @@ const LibraryAuthoringPage = (props: LibraryAuthoringPageProps) => {
 
   const [searchParams] = useSearchParams();
 
-  if (isLoading) {
+  if (isLoadingLibraryData) {
     return <Loading />;
   }
 
@@ -168,14 +163,13 @@ const LibraryAuthoringPage = (props: LibraryAuthoringPageProps) => {
   }
 
   const handleTabChange = (key: string) => {
-    if (componentPickerMode) {
-      setActiveKey(key);
-      return;
+    setActiveKey(key);
+    if (!componentPickerMode) {
+      navigate({
+        pathname: key,
+        search: searchParams.toString(),
+      });
     }
-    navigate({
-      pathname: key,
-      search: searchParams.toString(),
-    });
   };
 
   return (
@@ -247,7 +241,7 @@ const LibraryAuthoringPage = (props: LibraryAuthoringPageProps) => {
       </div>
       {!!sidebarBodyComponent && (
         <div className="library-authoring-sidebar box-shadow-left-1 bg-white" data-testid="library-sidebar">
-          <LibrarySidebar library={libraryData} />
+          <LibrarySidebar />
         </div>
       )}
     </div>

diff --git a/src/library-authoring/collections/CollectionDetails.test.tsx b/src/library-authoring/collections/CollectionDetails.test.tsx
@@ -5,18 +5,20 @@ import { mockContentSearchConfig, mockGetBlockTypes } from '../../search-manager
 import {
   initializeMocks,
   fireEvent,
-  render,
+  render as baseRender,
   screen,
   waitFor,
   within,
 } from '../../testUtils';
+import { LibraryProvider } from '../common/context';
 import * as api from '../data/api';
 import { mockContentLibrary, mockGetCollectionMetadata } from '../data/api.mocks';
 import CollectionDetails from './CollectionDetails';
 
 let axiosMock: MockAdapter;
 let mockShowToast: (message: string) => void;
 
+mockContentLibrary.applyMock();
 mockGetCollectionMetadata.applyMock();
 mockContentSearchConfig.applyMock();
 mockGetBlockTypes.applyMock();
@@ -26,6 +28,14 @@ const { description: originalDescription } = mockGetCollectionMetadata.collectio
 
 const library = mockContentLibrary.libraryData;
 
+const render = () => baseRender(<CollectionDetails />, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider libraryId={library.id} collectionId={collectionId}>
+      { children }
+    </LibraryProvider>
+  ),
+});
+
 describe('<CollectionDetails />', () => {
   beforeEach(() => {
     const mocks = initializeMocks();
@@ -35,12 +45,11 @@ describe('<CollectionDetails />', () => {
 
   afterEach(() => {
     jest.clearAllMocks();
-    axiosMock.restore();
     fetchMock.mockReset();
   });
 
   it('should render Collection Details', async () => {
-    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    render();
 
     // Collection Description
     expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
@@ -55,7 +64,7 @@ describe('<CollectionDetails />', () => {
   });
 
   it('should allow modifying the description', async () => {
-    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    render();
     expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
 
     expect(screen.getByText(originalDescription)).toBeInTheDocument();
@@ -89,7 +98,7 @@ describe('<CollectionDetails />', () => {
   });
 
   it('should show error while modifing the description', async () => {
-    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    render();
     expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
 
     expect(screen.getByText(originalDescription)).toBeInTheDocument();
@@ -114,7 +123,7 @@ describe('<CollectionDetails />', () => {
 
   it('should render Collection stats', async () => {
     mockGetBlockTypes('someBlocks');
-    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    render();
     expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
 
     expect(screen.getByText('Collection Stats')).toBeInTheDocument();
@@ -132,7 +141,7 @@ describe('<CollectionDetails />', () => {
 
   it('should render Collection stats for empty collection', async () => {
     mockGetBlockTypes('noBlocks');
-    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    render();
     expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
 
     expect(screen.getByText('Collection Stats')).toBeInTheDocument();
@@ -141,7 +150,7 @@ describe('<CollectionDetails />', () => {
 
   it('should render Collection stats for big collection', async () => {
     mockGetBlockTypes('moreBlocks');
-    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    render();
     expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
 
     expect(screen.getByText('Collection Stats')).toBeInTheDocument();

diff --git a/src/library-authoring/collections/CollectionDetails.tsx b/src/library-authoring/collections/CollectionDetails.tsx
@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { getItemIcon } from '../../generic/block-type-utils';
 import { ToastContext } from '../../generic/toast-context';
 import { BlockTypeLabel, useGetBlockTypes } from '../../search-manager';
-import type { ContentLibrary } from '../data/api';
+import { useLibraryContext } from '../common/context';
 import { useCollection, useUpdateCollection } from '../data/apiHooks';
 import HistoryWidget from '../generic/history-widget';
 import messages from './messages';
@@ -36,12 +36,9 @@ const BlockCount = ({
   );
 };
 
-interface CollectionStatsWidgetProps {
-  libraryId: string,
-  collectionId: string,
-}
+const CollectionStatsWidget = () => {
+  const { libraryId, currentCollectionId: collectionId } = useLibraryContext();
 
-const CollectionStatsWidget = ({ libraryId, collectionId }: CollectionStatsWidgetProps) => {
   const { data: blockTypes } = useGetBlockTypes([
     `context_key = "${libraryId}"`,
     `collections.key = "${collectionId}"`,
@@ -99,17 +96,22 @@ const CollectionStatsWidget = ({ libraryId, collectionId }: CollectionStatsWidge
   );
 };
 
-interface CollectionDetailsProps {
-  library: ContentLibrary,
-  collectionId: string,
-}
-
-const CollectionDetails = ({ library, collectionId }: CollectionDetailsProps) => {
+const CollectionDetails = () => {
   const intl = useIntl();
   const { showToast } = useContext(ToastContext);
+  const {
+    libraryId,
+    currentCollectionId: collectionId,
+    readOnly,
+  } = useLibraryContext();
+
+  // istanbul ignore next: This should never happen
+  if (!collectionId) {
+    throw new Error('collectionId is required');
+  }
 
-  const updateMutation = useUpdateCollection(library.id, collectionId);
-  const { data: collection } = useCollection(library.id, collectionId);
+  const updateMutation = useUpdateCollection(libraryId, collectionId);
+  const { data: collection } = useCollection(libraryId, collectionId);
 
   const [description, setDescription] = useState(collection?.description || '');
 
@@ -145,7 +147,7 @@ const CollectionDetails = ({ library, collectionId }: CollectionDetailsProps) =>
         <h3 className="h5">
           {intl.formatMessage(messages.detailsTabDescriptionTitle)}
         </h3>
-        {library.canEditLibrary ? (
+        {!readOnly ? (
           <textarea
             className="form-control"
             value={description}
@@ -158,7 +160,7 @@ const CollectionDetails = ({ library, collectionId }: CollectionDetailsProps) =>
         <h3 className="h5">
           {intl.formatMessage(messages.detailsTabStatsTitle)}
         </h3>
-        <CollectionStatsWidget libraryId={library.id} collectionId={collectionId} />
+        <CollectionStatsWidget />
       </div>
       <hr className="w-100" />
       <div>

diff --git a/src/library-authoring/collections/CollectionInfo.tsx b/src/library-authoring/collections/CollectionInfo.tsx
@@ -7,20 +7,22 @@ import {
 } from '@openedx/paragon';
 import { Link, useMatch } from 'react-router-dom';
 
-import type { ContentLibrary } from '../data/api';
+import { useLibraryContext } from '../common/context';
 import CollectionDetails from './CollectionDetails';
 import messages from './messages';
 
-interface CollectionInfoProps {
-  library: ContentLibrary,
-  collectionId: string,
-}
-
-const CollectionInfo = ({ library, collectionId }: CollectionInfoProps) => {
+const CollectionInfo = () => {
   const intl = useIntl();
-  const url = `/library/${library.id}/collection/${collectionId}/`;
+
+  const { libraryId, currentCollectionId: collectionId } = useLibraryContext();
+
+  const url = `/library/${libraryId}/collection/${collectionId}/`;
   const urlMatch = useMatch(url);
 
+  if (!collectionId) {
+    return null;
+  }
+
   return (
     <Stack>
       {!urlMatch && (
@@ -45,10 +47,7 @@ const CollectionInfo = ({ library, collectionId }: CollectionInfoProps) => {
           Manage tab placeholder
         </Tab>
         <Tab eventKey="details" title={intl.formatMessage(messages.detailsTabTitle)}>
-          <CollectionDetails
-            library={library}
-            collectionId={collectionId}
-          />
+          <CollectionDetails />
         </Tab>
       </Tabs>
     </Stack>