feat: implement pills and filter

src/search-manager/FilterByPublished.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import {
   Badge,
   Form,
@@ -8,7 +7,6 @@ import {
 } from '@openedx/paragon';
 import { FilterList } from '@openedx/paragon/icons';
 import SearchFilterWidget from './SearchFilterWidget';
-import messages from './messages';
 import { useSearchContext } from './SearchManager';
 import { PublishStatus } from './data/api';
 
@@ -17,16 +15,17 @@ import { PublishStatus } from './data/api';
  */
 const FilterByPublished: React.FC<Record<never, never>> = () => {
   const {
-    publishedFilter,
-    setPublishedFilter,
+    publishStatus,
+    publishStatusFilter,
+    setPublishStatusFilter,
   } = useSearchContext();
 
   const clearFilters = React.useCallback(() => {
-    setPublishedFilter([]);
+    setPublishStatusFilter([]);
   }, []);
 
   const toggleFilterMode = React.useCallback((mode: PublishStatus) => {
-    setPublishedFilter(oldList => {
+    setPublishStatusFilter(oldList => {
       if (oldList.includes(mode)) {
         return oldList.filter(m => m !== mode);
       }
@@ -44,7 +43,7 @@ const FilterByPublished: React.FC<Record<never, never>> = () => {
       <Form.Group className="mb-0">
         <Form.CheckboxSet
           name="block-type-filter"
-          value={publishedFilter}
+          value={publishStatusFilter}
         >
           <Menu className="block-type-refinement-menu" style={{ boxShadow: 'none' }}>
             <MenuItem
@@ -54,7 +53,7 @@ const FilterByPublished: React.FC<Record<never, never>> = () => {
             >
               <div>
                 Published
-                {' '}<Badge variant="light" pill>15</Badge>
+                {' '}<Badge variant="light" pill>{publishStatus[PublishStatus.Published] ?? 0}</Badge>
               </div>
             </MenuItem>
             <MenuItem
@@ -64,7 +63,7 @@ const FilterByPublished: React.FC<Record<never, never>> = () => {
             >
               <div>
                 Modified since publish
-                {' '}<Badge variant="light" pill>5</Badge>
+                {' '}<Badge variant="light" pill>{publishStatus[PublishStatus.Modified] ?? 0}</Badge>
               </div>
             </MenuItem>
             <MenuItem
@@ -74,7 +73,7 @@ const FilterByPublished: React.FC<Record<never, never>> = () => {
             >
               <div>
                 Never published
-                {' '}<Badge variant="light" pill>2</Badge>
+                {' '}<Badge variant="light" pill>{publishStatus[PublishStatus.NeverPublished] ?? 0}</Badge>
               </div>
             </MenuItem>
           </Menu>

src/search-manager/SearchManager.ts

@@ -27,12 +27,13 @@ export interface SearchContextData {
   setBlockTypesFilter: React.Dispatch<React.SetStateAction<string[]>>;
   problemTypesFilter: string[];
   setProblemTypesFilter: React.Dispatch<React.SetStateAction<string[]>>;
-  publishedFilter: PublishStatus[];
-  setPublishedFilter: React.Dispatch<React.SetStateAction<PublishStatus[]>>;
+  publishStatusFilter: PublishStatus[];
+  setPublishStatusFilter: React.Dispatch<React.SetStateAction<PublishStatus[]>>;
   tagsFilter: string[];
   setTagsFilter: React.Dispatch<React.SetStateAction<string[]>>;
   blockTypes: Record<string, number>;
   problemTypes: Record<string, number>;
+  publishStatus: Record<string, number>;
   extraFilter?: Filter;
   canClearFilters: boolean;
   clearFilters: () => void;
@@ -105,7 +106,7 @@ export const SearchContextProvider: React.FC<{
   const [searchKeywords, setSearchKeywords] = React.useState('');
   const [blockTypesFilter, setBlockTypesFilter] = React.useState<string[]>([]);
   const [problemTypesFilter, setProblemTypesFilter] = React.useState<string[]>([]);
-  const [publishedFilter, setPublishedFilter] = React.useState<PublishStatus[]>([]);
+  const [publishStatusFilter, setPublishStatusFilter] = React.useState<PublishStatus[]>([]);
   const [tagsFilter, setTagsFilter] = React.useState<string[]>([]);
   const [usageKey, setUsageKey] = useStateWithUrlSearchParam(
     '',
@@ -170,7 +171,7 @@ export const SearchContextProvider: React.FC<{
     searchKeywords,
     blockTypesFilter,
     problemTypesFilter,
-    publishedFilter,
+    publishStatusFilter,
     tagsFilter,
     sort,
     skipBlockTypeFetch,
@@ -186,8 +187,8 @@ export const SearchContextProvider: React.FC<{
       setBlockTypesFilter,
       problemTypesFilter,
       setProblemTypesFilter,
-      publishedFilter,
-      setPublishedFilter,
+      publishStatusFilter,
+      setPublishStatusFilter,
       tagsFilter,
       setTagsFilter,
       extraFilter,

src/search-manager/data/api.ts

@@ -185,7 +185,7 @@ interface FetchSearchParams {
   searchKeywords: string,
   blockTypesFilter?: string[],
   problemTypesFilter?: string[],
-  publishedFilter?: PublishStatus[],
+  publishStatusFilter?: PublishStatus[],
   /** The full path of tags that each result MUST have, e.g. ["Difficulty > Hard", "Subject > Math"] */
   tagsFilter?: string[],
   extraFilter?: Filter,
@@ -201,7 +201,7 @@ export async function fetchSearchResults({
   searchKeywords,
   blockTypesFilter,
   problemTypesFilter,
-  publishedFilter,
+  publishStatusFilter,
   tagsFilter,
   extraFilter,
   sort,
@@ -213,6 +213,7 @@ export async function fetchSearchResults({
     totalHits: number,
     blockTypes: Record<string, number>,
     problemTypes: Record<string, number>,
+    publishStatus: Record<string, number>,
   }> {
   const queries: MultiSearchQuery[] = [];
 
@@ -223,15 +224,7 @@ export async function fetchSearchResults({
 
   const problemTypesFilterFormatted = problemTypesFilter?.length ? [problemTypesFilter.map(pt => `content.problem_types = ${pt}`)] : [];
 
-  /* eslint-disable */
-  const publishStatusFilterFormatted = publishedFilter?.length ? publishedFilter.map(pt => (
-    pt === PublishStatus.Published ? 'modified = last_published' :
-    pt === PublishStatus.Modified ? 'modified > last_published' :
-    pt === PublishStatus.NeverPublished ? 'last_published IS NULL' :
-    'false'
-  )) : [];
-  console.log(publishStatusFilterFormatted)
-  /* eslint-enable */
+  const publishStatusFilterFormatted = publishStatusFilter?.length ? [publishStatusFilter.map(ps => `publish_status = ${ps}`)] : [];
 
   const tagsFilterFormatted = formatTagsFilter(tagsFilter);
 
@@ -268,7 +261,7 @@ export async function fetchSearchResults({
   if (!skipBlockTypeFetch) {
     queries.push({
       indexUid: indexName,
-      facets: ['block_type', 'content.problem_types'],
+      facets: ['block_type', 'content.problem_types', 'publish_status'],
       filter: [
         ...extraFilterFormatted,
         // We exclude the block type filter here so we get all the other available options for it.
@@ -285,6 +278,7 @@ export async function fetchSearchResults({
     totalHits: results[0].totalHits ?? results[0].estimatedTotalHits ?? hitLength,
     blockTypes: results[1]?.facetDistribution?.block_type ?? {},
     problemTypes: results[1]?.facetDistribution?.['content.problem_types'] ?? {},
+    publishStatus: results[1]?.facetDistribution?.publish_status ?? {},
     nextOffset: hitLength === limit ? offset + limit : undefined,
   };
 }

src/search-manager/data/apiHooks.ts

@@ -54,7 +54,7 @@ export const useContentSearchResults = ({
   searchKeywords,
   blockTypesFilter = [],
   problemTypesFilter = [],
-  publishedFilter = [],
+  publishStatusFilter = [],
   tagsFilter = [],
   sort = [],
   skipBlockTypeFetch = false,
@@ -71,7 +71,7 @@ export const useContentSearchResults = ({
   blockTypesFilter?: string[];
   /** Only search for these problem types (e.g. `["choiceresponse", "multiplechoiceresponse"]`) */
   problemTypesFilter?: string[];
-  publishedFilter?: PublishStatus[];
+  publishStatusFilter?: PublishStatus[];
   /** Required tags (all must match), e.g. `["Difficulty > Hard", "Subject > Math"]` */
   tagsFilter?: string[];
   /** Sort search results using these options */
@@ -91,7 +91,7 @@ export const useContentSearchResults = ({
       searchKeywords,
       blockTypesFilter,
       problemTypesFilter,
-      publishedFilter,
+      publishStatusFilter,
       tagsFilter,
       sort,
     ],
@@ -107,7 +107,7 @@ export const useContentSearchResults = ({
         searchKeywords,
         blockTypesFilter,
         problemTypesFilter,
-        publishedFilter,
+        publishStatusFilter,
         tagsFilter,
         sort,
         // For infinite pagination of results, we can retrieve additional pages if requested.
@@ -133,6 +133,7 @@ export const useContentSearchResults = ({
     // The distribution of block type filter options
     blockTypes: pages?.[0]?.blockTypes ?? {},
     problemTypes: pages?.[0]?.problemTypes ?? {},
+    publishStatus: pages?.[0]?.publishStatus ?? {},
     status: query.status,
     isLoading: query.isLoading,
     isError: query.isError,