feat: collection sidebar

Author: navinkarkera

src/library-authoring/LibraryAuthoringPage.tsx

@@ -28,7 +28,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

@@ -4,7 +4,7 @@ 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';

src/library-authoring/LibraryLayout.tsx

@@ -14,6 +14,7 @@ import { LibraryProvider } from './common/context';
 import { CreateCollectionModal } from './create-collection';
 import { invalidateComponentData } from './data/apiHooks';
 import LibraryCollectionPageWrapper from './LibraryCollectionPage';
+import LibraryCollectionPageWrapper from './collections/LibraryCollectionPage';
 
 const LibraryLayout = () => {
   const { libraryId } = useParams();

src/library-authoring/collections/CollectionInfo.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Tab,
+  Tabs,
+  Stack,
+} from '@openedx/paragon';
+
+import messages from './messages';
+import { useCollection } from '../data/apiHooks';
+import Loading from '../../generic/Loading';
+
+interface CollectionInfoProps {
+  collectionId: string;
+  libraryId: string;
+}
+
+const CollectionInfo = ({ libraryId, collectionId } : CollectionInfoProps) => {
+  const intl = useIntl();
+  const { data: collectionData, isLoading: isCollectionLoading } = useCollection(libraryId, collectionId);
+
+  if (isCollectionLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <Stack>
+      <div className="d-flex flex-wrap">
+        {collectionData?.title}
+      </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)}>
+          Details tab placeholder
+        </Tab>
+      </Tabs>
+    </Stack>
+  );
+};
+
+export default CollectionInfo;

src/library-authoring/LibraryCollectionPage.tsx renamed to src/library-authoring/collections/LibraryCollectionPage.tsx

@@ -1,5 +1,4 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
+import React, { useContext, useEffect } from 'react';
 import { StudioFooter } from '@edx/frontend-component-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
@@ -14,21 +13,22 @@ import {
 import { Add, InfoOutline } from '@openedx/paragon/icons';
 import { Link, useParams } from 'react-router-dom';
 
-import Loading from '../generic/Loading';
-import SubHeader from '../generic/sub-header/SubHeader';
-import Header from '../header';
-import NotFoundAlert from '../generic/NotFoundAlert';
+import Loading from '../../generic/Loading';
+import SubHeader from '../../generic/sub-header/SubHeader';
+import Header from '../../header';
+import NotFoundAlert from '../../generic/NotFoundAlert';
 import {
   ClearFiltersButton,
   FilterByBlockType,
   FilterByTags,
   SearchContextProvider,
   SearchKeywordsField,
   SearchSortWidget,
-} from '../search-manager';
-import { useCollection, useContentLibrary } from './data/apiHooks';
-import { LibraryContext, SidebarBodyComponentId } from './common/context';
-import messages from './messages';
+} from '../../search-manager';
+import { useCollection, useContentLibrary } from '../data/apiHooks';
+import { LibraryContext } from '../common/context';
+import messages from '../messages';
+import { LibrarySidebar } from '../library-sidebar';
 
 interface HeaderActionsProps {
   canEditLibrary: boolean;
@@ -38,40 +38,14 @@ const HeaderActions = ({ canEditLibrary }: HeaderActionsProps) => {
   const intl = useIntl();
   const {
     openAddContentSidebar,
-    openInfoSidebar,
-    closeLibrarySidebar,
-    sidebarBodyComponent,
   } = useContext(LibraryContext);
 
   if (!canEditLibrary) {
     return null;
   }
 
-  const infoSidebarIsOpen = () => (
-    sidebarBodyComponent === SidebarBodyComponentId.Info
-  );
-
-  const handleOnClickInfoSidebar = () => {
-    if (infoSidebarIsOpen()) {
-      closeLibrarySidebar();
-    } else {
-      openInfoSidebar();
-    }
-  };
-
   return (
     <div className="header-actions">
-      <Button
-        className={classNames('mr-1', {
-          'normal-border': !infoSidebarIsOpen(),
-          'open-border': infoSidebarIsOpen(),
-        })}
-        iconBefore={InfoOutline}
-        variant="outline-primary rounded-0"
-        onClick={handleOnClickInfoSidebar}
-      >
-        {intl.formatMessage(messages.libraryInfoButton)}
-      </Button>
       <Button
         className="ml-1"
         iconBefore={Add}
@@ -85,7 +59,7 @@ const HeaderActions = ({ canEditLibrary }: HeaderActionsProps) => {
   );
 };
 
-const SubHeaderTitle = ({ title, canEditLibrary }: { title: string, canEditLibrary: boolean }) => {
+const SubHeaderTitle = ({ title, canEditLibrary, infoClickHandler }: { title: string, canEditLibrary: boolean, infoClickHandler: () => void }) => {
   const intl = useIntl();
 
   return (
@@ -96,7 +70,7 @@ const SubHeaderTitle = ({ title, canEditLibrary }: { title: string, canEditLibra
           src={InfoOutline}
           iconAs={Icon}
           alt={intl.formatMessage(messages.collectionInfoButton)}
-          onClick={() => {}}
+          onClick={infoClickHandler}
           variant="primary"
         />
       </Stack>
@@ -114,6 +88,15 @@ const SubHeaderTitle = ({ title, canEditLibrary }: { title: string, canEditLibra
 const LibraryCollectionPage = ({ libraryId, collectionId }: { libraryId: string, collectionId: string }) => {
   const intl = useIntl();
 
+  const {
+    sidebarBodyComponent,
+    openCollectionInfoSidebar,
+  } = useContext(LibraryContext);
+
+  useEffect(() => {
+    openCollectionInfoSidebar(collectionId);
+  }, []);
+
   const { data: libraryData, isLoading: isLibLoading } = useContentLibrary(libraryId);
   const { data: collectionData, isLoading: isCollectionLoading } = useCollection(libraryId, collectionId);
 
@@ -153,7 +136,11 @@ const LibraryCollectionPage = ({ libraryId, collectionId }: { libraryId: string,
         />
         <Container size="xl" className="px-4 mt-4 mb-5 library-authoring-page">
           <SubHeader
-            title={<SubHeaderTitle title={collectionData.title} canEditLibrary={libraryData.canEditLibrary} />}
+            title={<SubHeaderTitle
+              title={collectionData.title}
+              canEditLibrary={libraryData.canEditLibrary}
+              infoClickHandler={() => openCollectionInfoSidebar(collectionId)}
+            />}
             breadcrumbs={(
               <Breadcrumb
                 ariaLabel={intl.formatMessage(messages.allCollections)}
@@ -174,6 +161,11 @@ const LibraryCollectionPage = ({ libraryId, collectionId }: { libraryId: string,
         </Container>
         <StudioFooter />
       </div>
+      { !!sidebarBodyComponent && (
+        <div className="library-authoring-sidebar box-shadow-left-1 bg-white" data-testid="library-sidebar">
+          <LibrarySidebar library={libraryData} />
+        </div>
+      )}
     </div>
   );
 };

src/library-authoring/LibraryCollections.tsx renamed to src/library-authoring/collections/LibraryCollections.tsx

@@ -1,10 +1,10 @@
 import { CardGrid } from '@openedx/paragon';
 
-import { useLoadOnScroll } from '../hooks';
-import { useSearchContext } from '../search-manager';
-import { NoComponents, NoSearchResults } from './EmptyStates';
-import CollectionCard from './components/CollectionCard';
-import { LIBRARY_SECTION_PREVIEW_LIMIT } from './components/LibrarySection';
+import { useLoadOnScroll } from '../../hooks';
+import { useSearchContext } from '../../search-manager';
+import { NoComponents, NoSearchResults } from '../EmptyStates';
+import CollectionCard from '../components/CollectionCard';
+import { LIBRARY_SECTION_PREVIEW_LIMIT } from '../components/LibrarySection';
 
 type LibraryCollectionsProps = {
   variant: 'full' | 'preview',

src/library-authoring/collections/index.tsx

@@ -0,0 +1 @@
+export { default as CollectionInfo } from './CollectionInfo';

src/library-authoring/collections/messages.ts

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  manageTabTitle: {
+    id: 'course-authoring.library-authoring.collections-sidebar.manage-tab.title',
+    defaultMessage: 'Manage',
+    description: 'Title for manage tab',
+  },
+  detailsTabTitle: {
+    id: 'course-authoring.library-authoring.collections-sidebar.details-tab.title',
+    defaultMessage: 'Details',
+    description: 'Title for details tab',
+  },
+});
+
+export default messages;

src/library-authoring/common/context.tsx

@@ -5,6 +5,7 @@ export enum SidebarBodyComponentId {
   AddContent = 'add-content',
   Info = 'info',
   ComponentInfo = 'component-info',
+  CollectionInfo = 'collection-info',
 }
 
 export interface LibraryContextData {
@@ -17,6 +18,7 @@ export interface LibraryContextData {
   isCreateCollectionModalOpen: boolean;
   openCreateCollectionModal: () => void;
   closeCreateCollectionModal: () => void;
+  openCollectionInfoSidebar: (collectionId: string) => void;
 }
 
 export const LibraryContext = React.createContext({
@@ -28,6 +30,7 @@ export const LibraryContext = React.createContext({
   isCreateCollectionModalOpen: false,
   openCreateCollectionModal: () => {},
   closeCreateCollectionModal: () => {},
+  openCollectionInfoSidebar: (_collectionId: string) => {}, // eslint-disable-line @typescript-eslint/no-unused-vars
 } as LibraryContextData);
 
 /**
@@ -37,6 +40,7 @@ export const LibraryProvider = (props: { children?: React.ReactNode }) => {
   const [sidebarBodyComponent, setSidebarBodyComponent] = React.useState<SidebarBodyComponentId | null>(null);
   const [currentComponentUsageKey, setCurrentComponentUsageKey] = React.useState<string>();
   const [isCreateCollectionModalOpen, openCreateCollectionModal, closeCreateCollectionModal] = useToggle(false);
+  const [currentComponentKey, setCurrentComponentKey] = React.useState<string>();
 
   const closeLibrarySidebar = React.useCallback(() => {
     setSidebarBodyComponent(null);
@@ -57,6 +61,13 @@ export const LibraryProvider = (props: { children?: React.ReactNode }) => {
     },
     [],
   );
+  const openCollectionInfoSidebar = React.useCallback(
+    (collectionId: string) => {
+      setCurrentComponentKey(collectionId);
+      setSidebarBodyComponent(SidebarBodyComponentId.CollectionInfo);
+    },
+    [],
+  );
 
   const context = React.useMemo(() => ({
     sidebarBodyComponent,
@@ -68,6 +79,7 @@ export const LibraryProvider = (props: { children?: React.ReactNode }) => {
     isCreateCollectionModalOpen,
     openCreateCollectionModal,
     closeCreateCollectionModal,
+    openCollectionInfoSidebar,
   }), [
     sidebarBodyComponent,
     closeLibrarySidebar,
@@ -78,6 +90,7 @@ export const LibraryProvider = (props: { children?: React.ReactNode }) => {
     isCreateCollectionModalOpen,
     openCreateCollectionModal,
     closeCreateCollectionModal,
+    openCollectionInfoSidebar,
   ]);
 
   return (

src/library-authoring/library-sidebar/LibrarySidebar.tsx

@@ -12,6 +12,7 @@ import { LibraryContext, SidebarBodyComponentId } from '../common/context';
 import { LibraryInfo, LibraryInfoHeader } from '../library-info';
 import { ComponentInfo, ComponentInfoHeader } from '../component-info';
 import { ContentLibrary } from '../data/api';
+import { CollectionInfo } from '../collections';
 
 type LibrarySidebarProps = {
   library: ContentLibrary,
@@ -31,14 +32,17 @@ const LibrarySidebar = ({ library }: LibrarySidebarProps) => {
   const {
     sidebarBodyComponent,
     closeLibrarySidebar,
-    currentComponentUsageKey,
+    currentComponentKey,
   } = useContext(LibraryContext);
 
   const bodyComponentMap = {
     [SidebarBodyComponentId.AddContent]: <AddContentContainer />,
     [SidebarBodyComponentId.Info]: <LibraryInfo library={library} />,
     [SidebarBodyComponentId.ComponentInfo]: (
-      currentComponentUsageKey && <ComponentInfo usageKey={currentComponentUsageKey} />
+      currentComponentKey && <ComponentInfo usageKey={currentComponentKey} />
+    ),
+    [SidebarBodyComponentId.CollectionInfo]: (
+      currentComponentKey && <CollectionInfo libraryId={library.id} collectionId={currentComponentKey} />
     ),
     unknown: null,
   };
@@ -47,8 +51,11 @@ const LibrarySidebar = ({ library }: LibrarySidebarProps) => {
     [SidebarBodyComponentId.AddContent]: <AddContentHeader />,
     [SidebarBodyComponentId.Info]: <LibraryInfoHeader library={library} />,
     [SidebarBodyComponentId.ComponentInfo]: (
-      currentComponentUsageKey && <ComponentInfoHeader library={library} usageKey={currentComponentUsageKey} />
+      currentComponentKey && <ComponentInfoHeader library={library} usageKey={currentComponentKey} />
     ),
+    //[SidebarBodyComponentId.CollectionInfo]: (
+    //  currentComponentKey && <CollectionInfoHeader library={library} collectionId={currentComponentKey} />
+    //),
     unknown: null,
   };