feat: allow filtering library by publish status

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,77 @@
+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';
+
+/**
+ * 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(undefined);
+  }, []);
+
+  return (
+    <SearchFilterWidget
+      appliedFilters={[]}
+      label="Publish Status"
+      clearFilter={clearFilters}
+      icon={FilterList}
+    >
+      <Form.Group className="mb-0">
+        <Form.CheckboxSet
+          name="block-type-filter"
+          value={[]}
+        >
+          <Menu className="block-type-refinement-menu" style={{ boxShadow: 'none' }}>
+            <MenuItem
+              as={Form.Checkbox}
+              value={1}
+              onChange={() => {}}
+            >
+              <div>
+                Published
+                <Badge variant="light" pill>15</Badge>
+              </div>
+            </MenuItem>
+            <MenuItem
+              as={Form.Checkbox}
+              value={2}
+              onChange={() => {}}
+            >
+              <div>
+                Modified since publish
+                <Badge variant="light" pill>5</Badge>
+              </div>
+            </MenuItem>
+            <MenuItem
+              as={Form.Checkbox}
+              value={3}
+              onChange={() => {}}
+            >
+              <div>
+                Never published
+                <Badge variant="light" pill>2</Badge>
+              </div>
+            </MenuItem>
+          </Menu>
+        </Form.CheckboxSet>
+      </Form.Group>
+    </SearchFilterWidget>
+  );
+};
+
+export default FilterByPublished;

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';