feat: allow filtering library by publish status

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -532,7 +532,7 @@ describe('<LibraryAuthoringPage />', () => {
     expect(submenu).toBeInTheDocument();
     fireEvent.click(submenu);
 
-    const clearFitlersButton = screen.getByRole('button', { name: /clear filters/i });
+    const clearFitlersButton = screen.getByText('Clear Filters');
     fireEvent.click(clearFitlersButton);
     await waitFor(() => {
       expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
@@ -706,6 +706,72 @@ describe('<LibraryAuthoringPage />', () => {
     });
   });
 
+  it('filters by publish status', async () => {
+    await renderLibraryPage();
+
+    // Open the publish status filter dropdown
+    const filterButton = screen.getByRole('button', { name: /publish status/i });
+    fireEvent.click(filterButton);
+
+    // Test each publish status filter option
+    const publishedCheckbox = screen.getByRole('checkbox', { name: /^published \d+$/i });
+    const modifiedCheckbox = screen.getByRole('checkbox', { name: /^modified since publish \d+$/i });
+    const neverPublishedCheckbox = screen.getByRole('checkbox', { name: /^never published \d+$/i });
+
+    // Verify initial state - no clear filters button
+    expect(screen.queryByRole('button', { name: /clear filters/i })).not.toBeInTheDocument();
+
+    // Test Published filter
+    fireEvent.click(publishedCheckbox);
+
+    // Wait for both the API call and the UI update
+    await waitFor(() => {
+      // Check that the API was called with the correct filter
+      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+        body: expect.stringContaining('"publish_status = published"'),
+        method: 'POST',
+        headers: expect.anything(),
+      });
+    });
+
+    // Wait for the clear filters button to appear
+    await waitFor(() => {
+      const clearFiltersButton = screen.getByText('Clear Filters');
+      expect(clearFiltersButton).toBeInTheDocument();
+    });
+
+    // Test Modified filter
+    fireEvent.click(modifiedCheckbox);
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+        body: expect.stringContaining('"publish_status = modified"'),
+        method: 'POST',
+        headers: expect.anything(),
+      });
+    });
+
+    // Test Never Published filter
+    fireEvent.click(neverPublishedCheckbox);
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+        body: expect.stringContaining('"publish_status = never"'),
+        method: 'POST',
+        headers: expect.anything(),
+      });
+    });
+
+    // Test clearing filters
+    const clearFiltersButton = screen.getByText('Clear Filters');
+    fireEvent.click(clearFiltersButton);
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+        body: expect.stringContaining('"filter":[[],'), // Empty filter array
+        method: 'POST',
+        headers: expect.anything(),
+      });
+    });
+  });
+
   it('Shows an error if libraries V2 is disabled', async () => {
     const { axiosMock } = initializeMocks();
     axiosMock.onGet(getStudioHomeApiUrl()).reply(200, {

src/library-authoring/LibraryAuthoringPage.tsx

@@ -31,6 +31,7 @@ import {
   ClearFiltersButton,
   FilterByBlockType,
   FilterByTags,
+  FilterByPublished,
   SearchContextProvider,
   SearchKeywordsField,
   SearchSortWidget,
@@ -254,6 +255,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,22 +1,26 @@
 import React, { useMemo } from 'react';
 import {
+  Badge,
   Card,
   Container,
   Icon,
   Stack,
 } from '@openedx/paragon';
-
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
 import { getItemIcon, getComponentStyleColor } from '../../generic/block-type-utils';
 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 +31,7 @@ const BaseComponentCard = ({
   tags,
   actions,
   openInfoSidebar,
+  ...props
 } : BaseComponentCardProps) => {
   const tagCount = useMemo(() => {
     if (!tags) {
@@ -37,6 +42,7 @@ const BaseComponentCard = ({
   }, [tags]);
 
   const componentIcon = getItemIcon(componentType);
+  const intl = useIntl();
 
   return (
     <Container className="library-component-card">
@@ -75,7 +81,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">{intl.formatMessage(messages.unpublishedChanges)}</Badge> : null}
           </Card.Section>
         </Card.Body>
       </Card>

src/library-authoring/components/ComponentCard.tsx

@@ -192,6 +192,8 @@ const ComponentCard = ({ contentHit }: ComponentCardProps) => {
     formatted,
     tags,
     usageKey,
+    modified,
+    lastPublished,
   } = contentHit;
   const componentDescription: string = (
     showOnlyPublished ? formatted.published?.description : formatted.description
@@ -216,6 +218,7 @@ const ComponentCard = ({ contentHit }: ComponentCardProps) => {
         </ActionRow>
       )}
       openInfoSidebar={() => openComponentInfoSidebar(usageKey)}
+      hasUnpublishedChanges={modified >= (lastPublished ?? 0)}
     />
   );
 };

src/library-authoring/components/messages.ts

@@ -151,6 +151,10 @@ const messages = defineMessages({
     defaultMessage: 'Select',
     description: 'Button title for selecting multiple components',
   },
+  unpublishedChanges: {
+    id: 'course-authoring.library-authoring.component.unpublished-changes',
+    defaultMessage: 'Unpublished changes',
+    description: 'Badge text shown when a component has unpublished changes',
+  },
 });
-
 export default messages;

src/search-manager/ClearFiltersButton.tsx

@@ -17,14 +17,16 @@ const ClearFiltersButton = ({
   size = 'sm',
 }: ClearFiltersButtonProps) => {
   const { canClearFilters, clearFilters } = useSearchContext();
-  if (canClearFilters) {
-    return (
-      <Button variant={variant} size={size} onClick={clearFilters}>
-        <FormattedMessage {...messages.clearFilters} />
-      </Button>
-    );
-  }
-  return null;
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={clearFilters}
+      className={canClearFilters ? '' : 'd-none'}
+    >
+      <FormattedMessage {...messages.clearFilters} />
+    </Button>
+  );
 };
 
 export default ClearFiltersButton;

src/search-manager/FilterByPublished.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import {
+  Badge,
+  Form,
+  Menu,
+  MenuItem,
+} from '@openedx/paragon';
+import { FilterList } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+import SearchFilterWidget from './SearchFilterWidget';
+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 intl = useIntl();
+  const {
+    publishStatus,
+    publishStatusFilter,
+    setPublishStatusFilter,
+  } = useSearchContext();
+
+  const clearFilters = React.useCallback(() => {
+    setPublishStatusFilter([]);
+  }, []);
+
+  const toggleFilterMode = React.useCallback((mode: PublishStatus) => {
+    setPublishStatusFilter(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="publish-status-filter"
+          value={publishStatusFilter}
+        >
+          <Menu className="block-type-refinement-menu" style={{ boxShadow: 'none' }}>
+            <MenuItem
+              as={Form.Checkbox}
+              value={PublishStatus.Published}
+              onChange={() => { toggleFilterMode(PublishStatus.Published); }}
+            >
+              <div>
+                {intl.formatMessage(messages.publishStatusPublished)}
+                <Badge variant="light" pill>{publishStatus[PublishStatus.Published] ?? 0}</Badge>
+              </div>
+            </MenuItem>
+            <MenuItem
+              as={Form.Checkbox}
+              value={PublishStatus.Modified}
+              onChange={() => { toggleFilterMode(PublishStatus.Modified); }}
+            >
+              <div>
+                {intl.formatMessage(messages.publishStatusModified)}
+                <Badge variant="light" pill>{publishStatus[PublishStatus.Modified] ?? 0}</Badge>
+              </div>
+            </MenuItem>
+            <MenuItem
+              as={Form.Checkbox}
+              value={PublishStatus.NeverPublished}
+              onChange={() => { toggleFilterMode(PublishStatus.NeverPublished); }}
+            >
+              <div>
+                {intl.formatMessage(messages.publishStatusNeverPublished)}
+                <Badge variant="light" pill>{publishStatus[PublishStatus.NeverPublished] ?? 0}</Badge>
+              </div>
+            </MenuItem>
+          </Menu>
+        </Form.CheckboxSet>
+      </Form.Group>
+    </SearchFilterWidget>
+  );
+};
+
+export default FilterByPublished;

src/search-manager/SearchManager.ts

@@ -10,7 +10,11 @@ import { MeiliSearch, type Filter } from 'meilisearch';
 import { union } from 'lodash';
 
 import {
-  CollectionHit, ContentHit, SearchSortOption, forceArray,
+  CollectionHit,
+  ContentHit,
+  SearchSortOption,
+  forceArray,
+  type PublishStatus,
 } from './data/api';
 import { useContentSearchConnection, useContentSearchResults } from './data/apiHooks';
 
@@ -23,10 +27,13 @@ export interface SearchContextData {
   setBlockTypesFilter: React.Dispatch<React.SetStateAction<string[]>>;
   problemTypesFilter: string[];
   setProblemTypesFilter: React.Dispatch<React.SetStateAction<string[]>>;
+  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;
@@ -99,6 +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 [publishStatusFilter, setPublishStatusFilter] = React.useState<PublishStatus[]>([]);
   const [tagsFilter, setTagsFilter] = React.useState<string[]>([]);
   const [usageKey, setUsageKey] = useStateWithUrlSearchParam(
     '',
@@ -140,13 +148,15 @@ export const SearchContextProvider: React.FC<{
     blockTypesFilter.length > 0
     || problemTypesFilter.length > 0
     || tagsFilter.length > 0
+    || publishStatusFilter.length > 0
     || !!usageKey
   );
   const isFiltered = canClearFilters || (searchKeywords !== '');
   const clearFilters = React.useCallback(() => {
     setBlockTypesFilter([]);
     setTagsFilter([]);
     setProblemTypesFilter([]);
+    setPublishStatusFilter([]);
     if (usageKey !== '') {
       setUsageKey('');
     }
@@ -163,6 +173,7 @@ export const SearchContextProvider: React.FC<{
     searchKeywords,
     blockTypesFilter,
     problemTypesFilter,
+    publishStatusFilter,
     tagsFilter,
     sort,
     skipBlockTypeFetch,
@@ -178,6 +189,8 @@ export const SearchContextProvider: React.FC<{
       setBlockTypesFilter,
       problemTypesFilter,
       setProblemTypesFilter,
+      publishStatusFilter,
+      setPublishStatusFilter,
       tagsFilter,
       setTagsFilter,
       extraFilter,