feat: Collections page (in libraries) (openedx#1281)

Author: navinkarkera

src/editors/EditorContainer.test.jsx

@@ -8,6 +8,7 @@ jest.mock('react-router', () => ({
     blockId: 'company-id1',
     blockType: 'html',
   }),
+  useLocation: () => {},
 }));
 
 const props = { learningContextId: 'cOuRsEId' };

src/editors/EditorContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
 
 import EditorPage from './EditorPage';
@@ -8,7 +8,7 @@ interface Props {
   /** Course ID or Library ID */
   learningContextId: string;
   /** Event handler sometimes called when user cancels out of the editor page */
-  onClose?: () => void;
+  onClose?: (prevPath?: string) => void;
   /**
    * Event handler called after when user saves their changes using an editor
    * and sometimes called when user cancels the editor, instead of onClose.
@@ -17,7 +17,7 @@ interface Props {
    * TODO: clean this up so there are separate onCancel and onSave callbacks,
    * and they are used consistently instead of this mess.
    */
-  returnFunction?: () => (newData: Record<string, any> | undefined) => void;
+  returnFunction?: (prevPath?: string) => (newData: Record<string, any> | undefined) => void;
 }
 
 const EditorContainer: React.FC<Props> = ({
@@ -26,6 +26,8 @@ const EditorContainer: React.FC<Props> = ({
   returnFunction,
 }) => {
   const { blockType, blockId } = useParams();
+  const location = useLocation();
+
   if (blockType === undefined || blockId === undefined) {
     // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
     return <div>Error: missing URL parameters</div>;
@@ -38,8 +40,8 @@ const EditorContainer: React.FC<Props> = ({
         blockId={blockId}
         studioEndpointUrl={getConfig().STUDIO_BASE_URL}
         lmsEndpointUrl={getConfig().LMS_BASE_URL}
-        onClose={onClose}
-        returnFunction={returnFunction}
+        onClose={onClose ? () => onClose(location.state?.from) : null}
+        returnFunction={returnFunction ? () => returnFunction(location.state?.from) : null}
       />
     </div>
   );

src/generic/block-type-utils/index.scss

@@ -4,6 +4,12 @@
   .pgn__icon {
     color: white;
   }
+
+  .btn-icon {
+    &:hover, &:active, &:focus {
+      background-color: darken(#005C9E, 15%);
+    }
+  }
 }
 
 .component-style-html {
@@ -12,6 +18,12 @@
   .pgn__icon {
     color: white;
   }
+
+  .btn-icon {
+    &:hover, &:active, &:focus {
+      background-color: darken(#9747FF, 15%);
+    }
+  }
 }
 
 .component-style-collection {
@@ -20,6 +32,12 @@
   .pgn__icon {
     color: black;
   }
+
+  .btn-icon {
+    &:hover, &:active, &:focus {
+      background-color: darken(#FFCD29, 15%);
+    }
+  }
 }
 
 .component-style-video {
@@ -28,6 +46,12 @@
   .pgn__icon {
     color: white;
   }
+
+  .btn-icon {
+    &:hover, &:active, &:focus {
+      background-color: darken(#358F0A, 15%);
+    }
+  }
 }
 
 .component-style-vertical {
@@ -36,6 +60,12 @@
   .pgn__icon {
     color: white;
   }
+
+  .btn-icon {
+    &:hover, &:active, &:focus {
+      background-color: darken(#0B8E77, 15%);
+    }
+  }
 }
 
 .component-style-other {
@@ -44,4 +74,10 @@
   .pgn__icon {
     color: white;
   }
+
+  .btn-icon {
+    &:hover, &:active, &:focus {
+      background-color: darken(#646464, 15%);
+    }
+  }
 }

src/library-authoring/EmptyStates.tsx

@@ -1,54 +1,46 @@
-import React, { useContext, useCallback } from 'react';
 import { useParams } from 'react-router';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import type { MessageDescriptor } from 'react-intl';
 import {
   Button, Stack,
 } from '@openedx/paragon';
 import { Add } from '@openedx/paragon/icons';
 import { ClearFiltersButton } from '../search-manager';
 import messages from './messages';
-import { LibraryContext } from './common/context';
 import { useContentLibrary } from './data/apiHooks';
 
-type NoSearchResultsProps = {
-  searchType?: 'collection' | 'component',
-};
-
-export const NoComponents = ({ searchType = 'component' }: NoSearchResultsProps) => {
-  const { openAddContentSidebar, openCreateCollectionModal } = useContext(LibraryContext);
+export const NoComponents = ({
+  infoText = messages.noComponents,
+  addBtnText = messages.addComponent,
+  handleBtnClick,
+}: {
+  infoText?: MessageDescriptor;
+  addBtnText?: MessageDescriptor;
+  handleBtnClick: () => void;
+}) => {
   const { libraryId } = useParams();
   const { data: libraryData } = useContentLibrary(libraryId);
   const canEditLibrary = libraryData?.canEditLibrary ?? false;
 
-  const handleOnClickButton = useCallback(() => {
-    if (searchType === 'collection') {
-      openCreateCollectionModal();
-    } else {
-      openAddContentSidebar();
-    }
-  }, [searchType]);
-
   return (
     <Stack direction="horizontal" gap={3} className="mt-6 justify-content-center">
-      {searchType === 'collection'
-        ? <FormattedMessage {...messages.noCollections} />
-        : <FormattedMessage {...messages.noComponents} />}
+      <FormattedMessage {...infoText} />
       {canEditLibrary && (
-        <Button iconBefore={Add} onClick={handleOnClickButton}>
-          {searchType === 'collection'
-            ? <FormattedMessage {...messages.addCollection} />
-            : <FormattedMessage {...messages.addComponent} />}
+        <Button iconBefore={Add} onClick={handleBtnClick}>
+          <FormattedMessage {...addBtnText} />
         </Button>
       )}
     </Stack>
   );
 };
 
-export const NoSearchResults = ({ searchType = 'component' }: NoSearchResultsProps) => (
+export const NoSearchResults = ({
+  infoText = messages.noSearchResults,
+}: {
+  infoText?: MessageDescriptor;
+}) => (
   <Stack direction="horizontal" gap={3} className="my-6 justify-content-center">
-    {searchType === 'collection'
-      ? <FormattedMessage {...messages.noSearchResultsCollections} />
-      : <FormattedMessage {...messages.noSearchResults} />}
+    <FormattedMessage {...infoText} />
     <ClearFiltersButton variant="primary" size="md" />
   </Stack>
 );

src/library-authoring/LibraryAuthoringPage.scss

@@ -20,3 +20,8 @@
   height: 100vh;
   overflow-y: auto;
 }
+
+// Reduce breadcrumb bottom margin
+ol.list-inline {
+  margin-bottom: 0;
+}

src/library-authoring/LibraryAuthoringPage.tsx

@@ -29,7 +29,7 @@ import {
   SearchSortWidget,
 } from '../search-manager';
 import LibraryComponents from './components/LibraryComponents';
-import LibraryCollections from './LibraryCollections';
+import LibraryCollections from './collections/LibraryCollections';
 import LibraryHome from './LibraryHome';
 import { useContentLibrary } from './data/apiHooks';
 import { LibrarySidebar } from './library-sidebar';

src/library-authoring/LibraryHome.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Stack } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { useSearchContext } from '../search-manager';
 import { NoComponents, NoSearchResults } from './EmptyStates';
-import LibraryCollections from './LibraryCollections';
+import LibraryCollections from './collections/LibraryCollections';
 import { LibraryComponents } from './components';
 import LibrarySection from './components/LibrarySection';
 import LibraryRecentlyModified from './LibraryRecentlyModified';
 import messages from './messages';
+import { LibraryContext } from './common/context';
 
 type LibraryHomeProps = {
   libraryId: string,
@@ -23,10 +24,11 @@ const LibraryHome = ({ libraryId, tabList, handleTabChange } : LibraryHomeProps)
     totalCollectionHits: collectionCount,
     isFiltered,
   } = useSearchContext();
+  const { openAddContentSidebar } = useContext(LibraryContext);
 
   const renderEmptyState = () => {
     if (componentCount === 0 && collectionCount === 0) {
-      return isFiltered ? <NoSearchResults /> : <NoComponents />;
+      return isFiltered ? <NoSearchResults /> : <NoComponents handleBtnClick={openAddContentSidebar} />;
     }
     return null;
   };

src/library-authoring/LibraryLayout.tsx

@@ -13,6 +13,7 @@ import LibraryAuthoringPage from './LibraryAuthoringPage';
 import { LibraryProvider } from './common/context';
 import { CreateCollectionModal } from './create-collection';
 import { invalidateComponentData } from './data/apiHooks';
+import LibraryCollectionPage from './collections/LibraryCollectionPage';
 
 const LibraryLayout = () => {
   const { libraryId } = useParams();
@@ -24,14 +25,20 @@ const LibraryLayout = () => {
   }
 
   const navigate = useNavigate();
-  const goBack = React.useCallback(() => {
-    // Go back to the library
-    navigate(`/library/${libraryId}`);
+  const goBack = React.useCallback((prevPath?: string) => {
+    if (prevPath) {
+      // Redirects back to the previous route like collection page or library page
+      navigate(prevPath);
+    } else {
+      // Go back to the library
+      navigate(`/library/${libraryId}`);
+    }
   }, []);
-  const returnFunction = React.useCallback(() => {
+
+  const returnFunction = React.useCallback((prevPath?: string) => {
     // When changes are cancelled, either onClose (goBack) or this returnFunction will be called.
     // When changes are saved, this returnFunction is called.
-    goBack();
+    goBack(prevPath);
     return (args) => {
       if (args === undefined) {
         return; // Do nothing - the user cancelled the changes
@@ -58,6 +65,10 @@ const LibraryLayout = () => {
             </PageWrap>
           )}
         />
+        <Route
+          path="collection/:collectionId"
+          element={<LibraryCollectionPage />}
+        />
         <Route
           path="*"
           element={<LibraryAuthoringPage />}