feat: collections bare bones page

Author: navinkarkera

src/library-authoring/LibraryAuthoringPage.scss

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

src/library-authoring/LibraryAuthoringPage.tsx

@@ -166,6 +166,7 @@ const LibraryAuthoringPage = () => {
         <Container size="xl" className="px-4 mt-4 mb-5 library-authoring-page">
           <SearchContextProvider
             extraFilter={`context_key = "${libraryId}"`}
+            fetchCollections={true}
           >
             <SubHeader
               title={<SubHeaderTitle title={libraryData.title} canEditLibrary={libraryData.canEditLibrary} />}

src/library-authoring/LibraryCollectionPage.tsx

@@ -0,0 +1,196 @@
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import { StudioFooter } from '@edx/frontend-component-footer';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Badge,
+  Button,
+  Breadcrumb,
+  Container,
+  Icon,
+  IconButton,
+  Stack,
+} from '@openedx/paragon';
+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 {
+  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';
+
+interface HeaderActionsProps {
+  canEditLibrary: boolean;
+}
+
+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}
+        variant="primary rounded-0"
+        onClick={openAddContentSidebar}
+        disabled={!canEditLibrary}
+      >
+        {intl.formatMessage(messages.newContentButton)}
+      </Button>
+    </div>
+  );
+};
+
+const SubHeaderTitle = ({ title, canEditLibrary }: { title: string, canEditLibrary: boolean }) => {
+  const intl = useIntl();
+
+  return (
+    <Stack direction="vertical">
+      <Stack direction="horizontal" gap={2}>
+        {title}
+        <IconButton
+          src={InfoOutline}
+          iconAs={Icon}
+          alt={intl.formatMessage(messages.collectionInfoButton)}
+          onClick={() => {}}
+          variant="primary"
+        />
+      </Stack>
+      { !canEditLibrary && (
+        <div>
+          <Badge variant="primary" style={{ fontSize: '50%' }}>
+            {intl.formatMessage(messages.readOnlyBadge)}
+          </Badge>
+        </div>
+      )}
+    </Stack>
+  );
+};
+
+const LibraryCollectionPage = ({ libraryId, collectionId }: { libraryId: string, collectionId: string }) => {
+  const intl = useIntl();
+
+  const { data: libraryData, isLoading: isLibLoading } = useContentLibrary(libraryId);
+  const { data: collectionData, isLoading: isCollectionLoading } = useCollection(libraryId, collectionId);
+
+  if (isLibLoading || isCollectionLoading) {
+    return <Loading />;
+  }
+
+  if (!libraryData || !collectionData) {
+    return <NotFoundAlert />;
+  }
+
+  const breadcrumbs = [
+    {
+      label: libraryData.title,
+      to: `/library/${libraryId}`,
+    },
+    {
+      label: intl.formatMessage(messages.allCollections),
+      to: `/library/${libraryId}/collections`,
+    },
+    // Adding empty breadcrumb to add the last `>` spacer.
+    {
+      label: '',
+      to: ``,
+    },
+  ];
+
+  return (
+    <div className="d-flex overflow-auto">
+      <div className="flex-grow-1 align-content-center">
+        <Header
+          number={libraryData.slug}
+          title={libraryData.title}
+          org={libraryData.org}
+          contextId={libraryId}
+          isLibrary
+        />
+        <Container size="xl" className="px-4 mt-4 mb-5 library-authoring-page">
+          <SubHeader
+            title={<SubHeaderTitle title={collectionData.title} canEditLibrary={libraryData.canEditLibrary} />}
+            breadcrumbs={(
+              <Breadcrumb
+                ariaLabel={intl.formatMessage(messages.allCollections)}
+                links={breadcrumbs}
+                linkAs={Link}
+              />
+            )}
+            headerActions={<HeaderActions canEditLibrary={libraryData.canEditLibrary} />}
+          />
+          <SearchKeywordsField className="w-50" />
+          <div className="d-flex mt-3 align-items-center">
+            <FilterByTags />
+            <FilterByBlockType />
+            <ClearFiltersButton />
+            <div className="flex-grow-1" />
+            <SearchSortWidget />
+          </div>
+        </Container>
+        <StudioFooter />
+      </div>
+    </div>
+  );
+};
+
+const LibraryCollectionPageWrapper = () => {
+  const { libraryId, collectionId } = useParams();
+  if (!collectionId || !libraryId) {
+    throw new Error('Rendered without collectionId or libraryId URL parameter');
+  }
+
+  return (
+    <SearchContextProvider
+      extraFilter={`context_key = "${libraryId}"`}
+    >
+      <LibraryCollectionPage libraryId={libraryId} collectionId={collectionId} />
+    </SearchContextProvider>
+  );
+}
+
+export default LibraryCollectionPageWrapper;

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 LibraryCollectionPageWrapper from './LibraryCollectionPage';
 
 const LibraryLayout = () => {
   const { libraryId } = useParams();
@@ -45,6 +46,10 @@ const LibraryLayout = () => {
             </PageWrap>
           )}
         />
+        <Route
+          path="collections/:collectionId"
+          element={<LibraryCollectionPageWrapper />}
+        />
         <Route
           path="*"
           element={<LibraryAuthoringPage />}

src/library-authoring/LibraryRecentlyModified.tsx

@@ -81,6 +81,7 @@ const LibraryRecentlyModified: React.FC<{ libraryId: string }> = ({ libraryId })
   <SearchContextProvider
     extraFilter={`context_key = "${libraryId}"`}
     overrideSearchSortOrder={SearchSortOption.RECENTLY_MODIFIED}
+    fetchCollections={true}
   >
     <RecentlyModified libraryId={libraryId} />
   </SearchContextProvider>

src/library-authoring/data/api.ts

@@ -36,6 +36,10 @@ export const getXBlockOLXApiUrl = (usageKey: string) => `${getApiBaseUrl()}/api/
  * Get the URL for the Library Collections API.
  */
 export const getLibraryCollectionsApiUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/collections/`;
+/**
+ * Get the URL for the collection API.
+ */
+export const getLibraryCollectionApiUrl = (libraryId: string, collectionId: string) => `${getLibraryCollectionsApiUrl(libraryId)}${collectionId}/`;
 
 export interface ContentLibrary {
   id: string;
@@ -61,6 +65,20 @@ export interface ContentLibrary {
   updated: string | null;
 }
 
+export interface Collection {
+  id: number;
+  key: string;
+  title: string;
+  description: string;
+  enabled: boolean;
+  createdBy: string | null;
+  created: string;
+  modified: string;
+  // TODO: Update the type below once entities are properly linked
+  entities: Array<any>;
+  learningPackage: number;
+}
+
 export interface LibraryBlockType {
   blockType: string;
   displayName: string;
@@ -267,3 +285,12 @@ export async function getXBlockOLX(usageKey: string): Promise<string> {
   const { data } = await getAuthenticatedHttpClient().get(getXBlockOLXApiUrl(usageKey));
   return data.olx;
 }
+
+/**
+ * Fetch a collection by its ID.
+ */
+export async function getCollection(libraryId: string, collectionId: string): Promise<Collection> {
+  const { data } = await getAuthenticatedHttpClient().get(getLibraryCollectionApiUrl(libraryId, collectionId));
+  return camelCaseObject(data);
+}
+

src/library-authoring/data/apiHooks.ts

@@ -26,6 +26,7 @@ import {
   createCollection,
   getXBlockOLX,
   type CreateLibraryCollectionDataRequest,
+  getCollection,
 } from './api';
 
 const libraryQueryPredicate = (query: Query, libraryId: string): boolean => {
@@ -60,6 +61,7 @@ export const libraryAuthoringQueryKeys = {
     'content',
     'libraryBlockTypes',
   ],
+  collection: (collectionId?: string) => [...libraryAuthoringQueryKeys.all, collectionId],
 };
 
 export const xblockQueryKeys = {
@@ -261,3 +263,15 @@ export const useXBlockOLX = (usageKey: string) => (
     enabled: !!usageKey,
   })
 );
+
+/**
+ * Hook to fetch a collection by its ID.
+ */
+export const useCollection = (libraryId: string | undefined, collectionId: string | undefined) => (
+  useQuery({
+    queryKey: libraryAuthoringQueryKeys.contentLibrary(collectionId),
+    queryFn: () => getCollection(libraryId!, collectionId!),
+    enabled: collectionId !== undefined && libraryId !== undefined,
+  })
+);
+

src/library-authoring/messages.ts

@@ -6,6 +6,11 @@ const messages = defineMessages({
     defaultMessage: 'Content library',
     description: 'The page heading for the library page.',
   },
+  allCollections: {
+    id: 'course-authoring.library-authoring.all-collections',
+    defaultMessage: 'All Collections',
+    description: 'Breadcrumbs text to navigate back to all collections',
+  },
   headingInfoAlt: {
     id: 'course-authoring.library-authoring.heading-info-alt',
     defaultMessage: 'Info',
@@ -116,6 +121,11 @@ const messages = defineMessages({
     defaultMessage: 'Library Info',
     description: 'Text of button to open "Library Info sidebar"',
   },
+  collectionInfoButton: {
+    id: 'course-authoring.library-authoring.buttons.collection-info.alt-text',
+    defaultMessage: 'Collection Info',
+    description: 'Alt text for collection info button besides the collection title',
+  },
   readOnlyBadge: {
     id: 'course-authoring.library-authoring.badge.read-only',
     defaultMessage: 'Read Only',

src/search-manager/SearchManager.ts

@@ -91,7 +91,8 @@ export const SearchContextProvider: React.FC<{
   overrideSearchSortOrder?: SearchSortOption
   children: React.ReactNode,
   closeSearchModal?: () => void,
-}> = ({ overrideSearchSortOrder, ...props }) => {
+  fetchCollections?: boolean,
+}> = ({ overrideSearchSortOrder, fetchCollections, ...props }) => {
   const [searchKeywords, setSearchKeywords] = React.useState('');
   const [blockTypesFilter, setBlockTypesFilter] = React.useState<string[]>([]);
   const [problemTypesFilter, setProblemTypesFilter] = React.useState<string[]>([]);
@@ -130,14 +131,7 @@ export const SearchContextProvider: React.FC<{
   }, []);
 
   // Initialize a connection to Meilisearch:
-  const { data: connectionDetails, isError: hasConnectionError } = useContentSearchConnection();
-  const indexName = connectionDetails?.indexName;
-  const client = React.useMemo(() => {
-    if (connectionDetails?.apiKey === undefined || connectionDetails?.url === undefined) {
-      return undefined;
-    }
-    return new MeiliSearch({ host: connectionDetails.url, apiKey: connectionDetails.apiKey });
-  }, [connectionDetails?.apiKey, connectionDetails?.url]);
+  const { client, indexName, hasConnectionError } = useContentSearchConnection();
 
   // Run the search
   const result = useContentSearchResults({
@@ -149,6 +143,7 @@ export const SearchContextProvider: React.FC<{
     problemTypesFilter,
     tagsFilter,
     sort,
+    fetchCollections,
   });
 
   return React.createElement(SearchContext.Provider, {