feat: add collections query to search results

Author: navinkarkera

src/library-authoring/LibraryCollections.tsx

@@ -1,14 +1,36 @@
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
+import { useSearchContext } from '../search-manager';
 
-const LibraryCollections = () => (
-  <div className="d-flex my-6 justify-content-center">
-    <FormattedMessage
-      {...messages.collectionsTempPlaceholder}
-    />
+type LibraryCollectionsProps = {
+  libraryId: string,
+  variant: 'full' | 'preview',
+};
+
+/**
+ * Library Collections to show collections grid
+ *
+ * Use style to:
+ *   - 'full': Show all collections with Infinite scroll pagination.
+ *   - 'preview': Show first 4 collections without pagination.
+ */
+const LibraryCollections = ({ libraryId, variant }: LibraryCollectionsProps) => {
+  const {
+    collectionHits,
+    totalCollectionHits,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+    isFiltered,
+    setExtraFilter,
+  } = useSearchContext();
+
+    // __AUTO_GENERATED_PRINT_VAR_START__
+    console.log("LibraryCollections collectionHits: ", collectionHits); // __AUTO_GENERATED_PRINT_VAR_END__
+  return <div className="d-flex my-6 justify-content-center">
   </div>
-);
+};
 
 export default LibraryCollections;

src/search-manager/SearchManager.ts

@@ -9,7 +9,7 @@ import React from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { MeiliSearch, type Filter } from 'meilisearch';
 
-import { ContentHit, SearchSortOption, forceArray } from './data/api';
+import { CollectionHit, ContentHit, SearchSortOption, forceArray } from './data/api';
 import { useContentSearchConnection, useContentSearchResults } from './data/apiHooks';
 
 export interface SearchContextData {
@@ -40,6 +40,8 @@ export interface SearchContextData {
   fetchNextPage: () => void;
   closeSearchModal: () => void;
   hasError: boolean;
+  collectionHits: CollectionHit[];
+  totalCollectionHits: number;
 }
 
 const SearchContext = React.createContext<SearchContextData | undefined>(undefined);

src/search-manager/data/api.ts

@@ -121,6 +121,31 @@ export interface ContentHit {
   lastPublished: number | null;
 }
 
+/**
+ * Information about a single collection returned in the search results
+ * Defined in edx-platform/openedx/core/djangoapps/content/search/documents.py
+ */
+export interface CollectionHit {
+  id: string;
+  type: 'collection';
+  displayName: string;
+  description: string;
+  /** The course or library ID */
+  contextKey: string;
+  org: string;
+  /**
+   * Breadcrumbs:
+   * - First one is the name of the course/library itself.
+   * - After that is the name and usage key of any parent Section/Subsection/Unit/etc.
+   */
+  breadcrumbs: Array<{ displayName: string }>;
+  // tags: ContentHitTags;
+  /** Same fields with <mark>...</mark> highlights */
+  created: number;
+  modified: number;
+  accessId: number;
+}
+
 /**
  * Convert search hits to camelCase
  * @param hit A search result directly from Meilisearch
@@ -185,13 +210,16 @@ export async function fetchSearchResults({
     ...problemTypesFilterFormatted,
   ].flat()];
 
+  const collectionsFilter = 'type = "collection"'
+
   // First query is always to get the hits, with all the filters applied.
   queries.push({
     indexUid: indexName,
     q: searchKeywords,
     filter: [
       // top-level entries in the array are AND conditions and must all match
       // Inner arrays are OR conditions, where only one needs to match.
+      `NOT ${collectionsFilter}`,  // exclude collections
       ...typeFilters,
       ...extraFilterFormatted,
       ...tagsFilterFormatted,
@@ -219,13 +247,37 @@ export async function fetchSearchResults({
     limit: 0, // We don't need any "hits" for this - just the facetDistribution
   });
 
+  // Third query is to get the hits for collections, with all the filters applied.
+  queries.push({
+    indexUid: indexName,
+    q: searchKeywords,
+    filter: [
+      // 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,
+      ...tagsFilterFormatted,
+    ],
+    attributesToHighlight: ['display_name', 'content'],
+    highlightPreTag: HIGHLIGHT_PRE_TAG,
+    highlightPostTag: HIGHLIGHT_POST_TAG,
+    attributesToCrop: ['content'],
+    cropLength: 20,
+    sort,
+    offset,
+    limit,
+  });
+
   const { results } = await client.multiSearch(({ queries }));
   return {
     hits: results[0].hits.map(formatSearchHit),
     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,
+    collectionHits: results[2].hits.map(formatSearchHit),
+    totalCollectionHits: results[2].totalHits ?? results[2].estimatedTotalHits ?? results[2].hits.length,
   };
 }
 

src/search-manager/data/apiHooks.ts

@@ -103,8 +103,14 @@ export const useContentSearchResults = ({
     [pages],
   );
 
+  const collectionHits = React.useMemo(
+    () => pages?.reduce((allHits, page) => [...allHits, ...page.collectionHits], []) ?? [],
+    [pages],
+  );
+
   return {
     hits,
+    collectionHits,
     // The distribution of block type filter options
     blockTypes: pages?.[0]?.blockTypes ?? {},
     problemTypes: pages?.[0]?.problemTypes ?? {},
@@ -119,6 +125,8 @@ export const useContentSearchResults = ({
     hasNextPage: query.hasNextPage,
     // The last page has the most accurate count of total hits
     totalHits: pages?.[pages.length - 1]?.totalHits ?? 0,
+    // The last page has the most accurate count of total hits
+    totalCollectionHits: pages?.[pages.length - 1]?.totalCollectionHits ?? 0,
   };
 };