feat: add collection card

also fix inifinite scroll for collections

Author: navinkarkera

src/generic/block-type-utils/constants.ts

@@ -51,6 +51,7 @@ export const STRUCTURAL_TYPE_ICONS: Record<string, React.ComponentType> = {
   vertical: UNIT_TYPE_ICONS_MAP.vertical,
   sequential: Folder,
   chapter: Folder,
+  collection: Folder,
 };
 
 export const COMPONENT_TYPE_STYLE_COLOR_MAP = {

src/library-authoring/LibraryCollections.tsx

@@ -5,7 +5,7 @@ import { CardGrid } from '@openedx/paragon';
 import messages from './messages';
 import { useSearchContext } from '../search-manager';
 import { NoComponents, NoSearchResults } from './EmptyStates';
-import ComponentCard from './components/ComponentCard';
+import CollectionCard from './components/CollectionCard';
 import { LIBRARY_SECTION_PREVIEW_LIMIT } from './components/LibrarySection';
 
 type LibraryCollectionsProps = {
@@ -68,11 +68,10 @@ const LibraryCollections = ({ libraryId, variant }: LibraryCollectionsProps) =>
       }}
       hasEqualColumnHeights
     >
-      { collectionList.map((contentHit) => (
-        <ComponentCard
-          key={contentHit.id}
-          contentHit={contentHit}
-          blockTypeDisplayName={'Collection'}
+      { collectionList.map((collectionHit) => (
+        <CollectionCard
+          key={collectionHit.id}
+          collectionHit={collectionHit}
         />
       )) }
     </CardGrid>

src/library-authoring/components/CollectionCard.tsx

@@ -0,0 +1,86 @@
+import React, { useContext, useMemo, useState } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Card,
+  Container,
+  Icon,
+  IconButton,
+  Dropdown,
+  Stack,
+} from '@openedx/paragon';
+import { MoreVert } from '@openedx/paragon/icons';
+
+import { getItemIcon, getComponentStyleColor } from '../../generic/block-type-utils';
+import { updateClipboard } from '../../generic/data/api';
+import TagCount from '../../generic/tag-count';
+import { ToastContext } from '../../generic/toast-context';
+import { type CollectionHit, Highlight } from '../../search-manager';
+import { LibraryContext } from '../common/context';
+import messages from './messages';
+import { STUDIO_CLIPBOARD_CHANNEL } from '../../constants';
+
+type CollectionCardProps = {
+  collectionHit: CollectionHit,
+};
+
+const CollectionCard = ({ collectionHit } : CollectionCardProps) => {
+  const intl = useIntl();
+
+  const {
+    type,
+    formatted,
+    tags,
+  } = collectionHit;
+  const { displayName = '', description = '' } = formatted;
+
+  const tagCount = useMemo(() => {
+    if (!tags) {
+      return 0;
+    }
+    return (tags.level0?.length || 0) + (tags.level1?.length || 0)
+            + (tags.level2?.length || 0) + (tags.level3?.length || 0);
+  }, [tags]);
+
+  const componentIcon = getItemIcon(type);
+
+  return (
+    <Container className="library-component-card">
+      <Card>
+        <Card.Header
+          className={`library-component-header ${getComponentStyleColor(type)}`}
+          title={
+            <Icon src={componentIcon} className="library-component-header-icon" />
+          }
+          actions={(
+            <ActionRow>
+              <IconButton
+                src={MoreVert}
+                iconAs={Icon}
+                variant="primary"
+                alt={intl.formatMessage(messages.collectionCardMenuAlt)}
+              />
+            </ActionRow>
+          )}
+        />
+        <Card.Body>
+          <Card.Section>
+            <Stack direction="horizontal" className="d-flex justify-content-between">
+              <Stack direction="horizontal" gap={1}>
+                <Icon src={componentIcon} size="sm" />
+                <span className="small">{intl.formatMessage(messages.collectionType)}</span>
+              </Stack>
+              <TagCount count={tagCount} />
+            </Stack>
+            <div className="text-truncate h3 mt-2">
+              <Highlight text={displayName} />
+            </div>
+            <Highlight text={description} />
+          </Card.Section>
+        </Card.Body>
+      </Card>
+    </Container>
+  );
+};
+
+export default CollectionCard;

src/library-authoring/components/messages.ts

@@ -11,6 +11,16 @@ const messages = defineMessages({
     defaultMessage: 'Component actions menu',
     description: 'Alt/title text for the component card menu button.',
   },
+  collectionCardMenuAlt: {
+    id: 'course-authoring.library-authoring.collection.menu',
+    defaultMessage: 'Collection actions menu',
+    description: 'Alt/title text for the collection card menu button.',
+  },
+  collectionType: {
+    id: 'course-authoring.library-authoring.collection.type',
+    defaultMessage: 'Collection',
+    description: 'Collection type text',
+  },
   menuEdit: {
     id: 'course-authoring.library-authoring.component.menu.edit',
     defaultMessage: 'Edit',

src/search-manager/data/api.ts

@@ -144,18 +144,21 @@ export interface CollectionHit {
   created: number;
   modified: number;
   accessId: number;
+  /** Same fields with <mark>...</mark> highlights */
+  formatted: { displayName: string, description: string };
 }
 
 /**
  * Convert search hits to camelCase
  * @param hit A search result directly from Meilisearch
  */
-function formatSearchHit(hit: Record<string, any>): ContentHit {
+function formatSearchHit(hit: Record<string, any>): ContentHit | CollectionHit {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const { _formatted, ...newHit } = hit;
   newHit.formatted = {
     displayName: _formatted.display_name,
     content: _formatted.content ?? {},
+    description: _formatted.description,
   };
   return camelCaseObject(newHit);
 }
@@ -255,15 +258,15 @@ export async function fetchSearchResults({
       // top-level entries in the array are AND conditions and must all match
       // Inner arrays are OR conditions, where only one needs to match.
       collectionsFilter,  // include only collections
-      ...typeFilters,
       ...extraFilterFormatted,
+      // We exclude the block type filter as collections are only of 1 type i.e. collection.
       ...tagsFilterFormatted,
     ],
-    attributesToHighlight: ['display_name', 'content'],
+    attributesToHighlight: ['display_name', 'description'],
     highlightPreTag: HIGHLIGHT_PRE_TAG,
     highlightPostTag: HIGHLIGHT_POST_TAG,
-    attributesToCrop: ['content'],
-    cropLength: 20,
+    attributesToCrop: ['description'],
+    cropLength: 15,
     sort,
     offset,
     limit,
@@ -275,7 +278,7 @@ export async function fetchSearchResults({
     totalHits: results[0].totalHits ?? results[0].estimatedTotalHits ?? results[0].hits.length,
     blockTypes: results[1].facetDistribution?.block_type ?? {},
     problemTypes: results[1].facetDistribution?.['content.problem_types'] ?? {},
-    nextOffset: results[0].hits.length === limit ? offset + limit : undefined,
+    nextOffset: results[0].hits.length === limit || results[2].hits.length === limit ? offset + limit : undefined,
     collectionHits: results[2].hits.map(formatSearchHit),
     totalCollectionHits: results[2].totalHits ?? results[2].estimatedTotalHits ?? results[2].hits.length,
   };