Allow filtering library by publish status [FC-0062]

src/library-authoring/LibraryAuthoringPage.tsx

@@ -29,6 +29,7 @@ import {
   ClearFiltersButton,
   FilterByBlockType,
   FilterByTags,
+  FilterByPublished,
   SearchContextProvider,
   SearchKeywordsField,
   SearchSortWidget,
@@ -242,6 +243,7 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
             <div className="d-flex mt-3 align-items-center">
               <FilterByTags />
               <FilterByBlockType />
+              <FilterByPublished />
               <ClearFiltersButton />
               <div className="flex-grow-1" />
               <SearchSortWidget />

src/library-authoring/components/BaseComponentCard.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import {
+  Badge,
   Card,
   Container,
   Icon,
@@ -11,12 +12,14 @@ import TagCount from '../../generic/tag-count';
 import { BlockTypeLabel, type ContentHitTags, Highlight } from '../../search-manager';
 
 type BaseComponentCardProps = {
-  componentType: string,
-  displayName: string, description: string,
-  numChildren?: number,
-  tags: ContentHitTags,
-  actions: React.ReactNode,
-  openInfoSidebar: () => void
+  componentType: string;
+  displayName: string;
+  description: string;
+  numChildren?: number;
+  tags: ContentHitTags;
+  actions: React.ReactNode;
+  openInfoSidebar: () => void;
+  hasUnpublishedChanges?: boolean;
 };
 
 const BaseComponentCard = ({
@@ -27,6 +30,7 @@ const BaseComponentCard = ({
   tags,
   actions,
   openInfoSidebar,
+  ...props
 } : BaseComponentCardProps) => {
   const tagCount = useMemo(() => {
     if (!tags) {
@@ -75,7 +79,8 @@ const BaseComponentCard = ({
             <div className="text-truncate h3 mt-2">
               <Highlight text={displayName} />
             </div>
-            <Highlight text={description} />
+            <Highlight text={description} /><br />
+            {props.hasUnpublishedChanges ? <Badge variant="warning">Unpublished changes</Badge> : null}
           </Card.Section>
         </Card.Body>
       </Card>

src/library-authoring/components/ComponentCard.tsx

@@ -104,6 +104,8 @@ const ComponentCard = ({ contentHit }: ComponentCardProps) => {
     formatted,
     tags,
     usageKey,
+    modified,
+    lastPublished,
   } = contentHit;
   const description: string = (/* eslint-disable */
     blockType === 'html' ? formatted?.content?.htmlContent :
@@ -150,6 +152,7 @@ const ComponentCard = ({ contentHit }: ComponentCardProps) => {
         </ActionRow>
       )}
       openInfoSidebar={() => openComponentInfoSidebar(usageKey)}
+      hasUnpublishedChanges={modified >= (lastPublished ?? 0)}
     />
   );
 };

src/search-manager/FilterByPublished.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  Badge,
+  Form,
+  Menu,
+  MenuItem,
+} 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';
+
+/**
+ * A button with a dropdown that allows filtering the current search by publish status
+ */
+const FilterByPublished: React.FC<Record<never, never>> = () => {
+  const {
+    publishedFilter,
+    setPublishedFilter,
+  } = useSearchContext();
+
+  const clearFilters = React.useCallback(() => {
+    setPublishedFilter([]);
+  }, []);
+
+  const toggleFilterMode = React.useCallback((mode: PublishStatus) => {
+    setPublishedFilter(oldList => {
+      if (oldList.includes(mode)) {
+        return oldList.filter(m => m !== mode);
+      }
+      return [...oldList, mode];
+    });
+  }, []);
+
+  return (
+    <SearchFilterWidget
+      appliedFilters={[]}
+      label="Publish Status"
+      clearFilter={clearFilters}
+      icon={FilterList}
+    >
+      <Form.Group className="mb-0">
+        <Form.CheckboxSet
+          name="block-type-filter"
+          value={publishedFilter}
+        >
+          <Menu className="block-type-refinement-menu" style={{ boxShadow: 'none' }}>
+            <MenuItem
+              as={Form.Checkbox}
+              value={PublishStatus.Published}
+              onChange={() => { toggleFilterMode(PublishStatus.Published); }}
+            >
+              <div>
+                Published
+                {' '}<Badge variant="light" pill>15</Badge>
+              </div>
+            </MenuItem>
+            <MenuItem
+              as={Form.Checkbox}
+              value={PublishStatus.Modified}
+              onChange={() => { toggleFilterMode(PublishStatus.Modified); }}
+            >
+              <div>
+                Modified since publish
+                {' '}<Badge variant="light" pill>5</Badge>
+              </div>
+            </MenuItem>
+            <MenuItem
+              as={Form.Checkbox}
+              value={PublishStatus.NeverPublished}
+              onChange={() => { toggleFilterMode(PublishStatus.NeverPublished); }}
+            >
+              <div>
+                Never published
+                {' '}<Badge variant="light" pill>2</Badge>
+              </div>
+            </MenuItem>
+          </Menu>
+        </Form.CheckboxSet>
+      </Form.Group>
+    </SearchFilterWidget>
+  );
+};
+
+export default FilterByPublished;

src/search-manager/SearchManager.ts

@@ -10,7 +10,12 @@ import { MeiliSearch, type Filter } from 'meilisearch';
 import { union } from 'lodash';
 
 import {
-  CollectionHit, ContentHit, SearchSortOption, forceArray, OverrideQueries,
+  CollectionHit,
+  ContentHit,
+  SearchSortOption,
+  forceArray,
+  OverrideQueries,
+  type PublishStatus,
 } from './data/api';
 import { useContentSearchConnection, useContentSearchResults } from './data/apiHooks';
 
@@ -23,6 +28,8 @@ 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[]>>;
   tagsFilter: string[];
   setTagsFilter: React.Dispatch<React.SetStateAction<string[]>>;
   blockTypes: Record<string, number>;
@@ -100,6 +107,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 [tagsFilter, setTagsFilter] = React.useState<string[]>([]);
   let extraFilter: string[] = forceArray(props.extraFilter);
 
@@ -150,6 +158,7 @@ export const SearchContextProvider: React.FC<{
     searchKeywords,
     blockTypesFilter,
     problemTypesFilter,
+    publishedFilter,
     tagsFilter,
     sort,
     overrideQueries,
@@ -165,6 +174,8 @@ export const SearchContextProvider: React.FC<{
       setBlockTypesFilter,
       problemTypesFilter,
       setProblemTypesFilter,
+      publishedFilter,
+      setPublishedFilter,
       tagsFilter,
       setTagsFilter,
       extraFilter,

src/search-manager/data/api.ts

@@ -25,6 +25,12 @@ export enum SearchSortOption {
   RECENTLY_MODIFIED = 'modified:desc',
 }
 
+export enum PublishStatus {
+  Published = 'published',
+  Modified = 'modified',
+  NeverPublished = 'never',
+}
+
 /**
  * Get the content search configuration from the CMS.
  */
@@ -185,6 +191,7 @@ interface FetchSearchParams {
   searchKeywords: string,
   blockTypesFilter?: string[],
   problemTypesFilter?: string[],
+  publishedFilter?: PublishStatus[],
   /** The full path of tags that each result MUST have, e.g. ["Difficulty > Hard", "Subject > Math"] */
   tagsFilter?: string[],
   extraFilter?: Filter,
@@ -200,6 +207,7 @@ export async function fetchSearchResults({
   searchKeywords,
   blockTypesFilter,
   problemTypesFilter,
+  publishedFilter,
   tagsFilter,
   extraFilter,
   sort,
@@ -223,6 +231,16 @@ 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 tagsFilterFormatted = formatTagsFilter(tagsFilter);
 
   const limit = 20; // How many results to retrieve per page.
@@ -246,6 +264,7 @@ export async function fetchSearchResults({
       ...typeFilters,
       ...extraFilterFormatted,
       ...tagsFilterFormatted,
+      ...publishStatusFilterFormatted,
     ],
     attributesToHighlight: ['display_name', 'content'],
     highlightPreTag: HIGHLIGHT_PRE_TAG,

src/search-manager/data/apiHooks.ts

@@ -12,6 +12,7 @@ import {
   fetchDocumentById,
   fetchBlockTypes,
   OverrideQueries,
+  type PublishStatus,
 } from './api';
 
 /**
@@ -55,6 +56,7 @@ export const useContentSearchResults = ({
   searchKeywords,
   blockTypesFilter = [],
   problemTypesFilter = [],
+  publishedFilter = [],
   tagsFilter = [],
   sort = [],
   overrideQueries,
@@ -71,6 +73,7 @@ export const useContentSearchResults = ({
   blockTypesFilter?: string[];
   /** Only search for these problem types (e.g. `["choiceresponse", "multiplechoiceresponse"]`) */
   problemTypesFilter?: string[];
+  publishedFilter?: PublishStatus[];
   /** Required tags (all must match), e.g. `["Difficulty > Hard", "Subject > Math"]` */
   tagsFilter?: string[];
   /** Sort search results using these options */
@@ -90,6 +93,7 @@ export const useContentSearchResults = ({
       searchKeywords,
       blockTypesFilter,
       problemTypesFilter,
+      publishedFilter,
       tagsFilter,
       sort,
       overrideQueries,
@@ -105,6 +109,7 @@ export const useContentSearchResults = ({
         searchKeywords,
         blockTypesFilter,
         problemTypesFilter,
+        publishedFilter,
         tagsFilter,
         sort,
         // For infinite pagination of results, we can retrieve additional pages if requested.

src/search-manager/index.ts

@@ -3,6 +3,7 @@ export { default as BlockTypeLabel } from './BlockTypeLabel';
 export { default as ClearFiltersButton } from './ClearFiltersButton';
 export { default as FilterByBlockType } from './FilterByBlockType';
 export { default as FilterByTags } from './FilterByTags';
+export { default as FilterByPublished } from './FilterByPublished';
 export { default as Highlight } from './Highlight';
 export { default as SearchKeywordsField } from './SearchKeywordsField';
 export { default as SearchSortWidget } from './SearchSortWidget';