feat: Show published components on content picker (#1420)

* feat: Show published components on content picker --------- Co-authored-by: Braden MacDonald <[email protected]>
openedx · Oct 22, 2024 · 21cbf80 · 21cbf80
1 parent 966e1c3
commit 21cbf80
Show file tree

Hide file tree

Showing 17 changed files with 179 additions and 39 deletions.
diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -148,6 +148,7 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
     libraryData,
     isLoadingLibraryData,
     componentPickerMode,
+    showOnlyPublished,
     sidebarComponentInfo,
     openInfoSidebar,
   } = useLibraryContext();
@@ -212,6 +213,11 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
     />
   ) : undefined;
 
+  const extraFilter = [`context_key = "${libraryId}"`];
+  if (showOnlyPublished) {
+    extraFilter.push('last_published IS NOT NULL');
+  }
+
   return (
     <div className="d-flex">
       <div className="flex-grow-1">
@@ -230,7 +236,7 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
         )}
         <Container className="px-4 mt-4 mb-5 library-authoring-page">
           <SearchContextProvider
-            extraFilter={`context_key = "${libraryId}"`}
+            extraFilter={extraFilter}
           >
             <SubHeader
               title={<SubHeaderTitle title={libraryData.title} />}

diff --git a/src/library-authoring/LibraryRecentlyModified.tsx b/src/library-authoring/LibraryRecentlyModified.tsx
@@ -56,11 +56,21 @@ const RecentlyModified: React.FC<Record<never, never>> = () => {
 };
 
 const LibraryRecentlyModified: React.FC<Record<never, never>> = () => {
-  const { libraryId } = useLibraryContext();
+  const { libraryId, showOnlyPublished } = useLibraryContext();
+
+  const extraFilter = [`context_key = "${libraryId}"`];
+  if (showOnlyPublished) {
+    extraFilter.push('last_published IS NOT NULL');
+  }
+
   return (
     <SearchContextProvider
-      extraFilter={`context_key = "${libraryId}"`}
-      overrideSearchSortOrder={SearchSortOption.RECENTLY_MODIFIED}
+      extraFilter={extraFilter}
+      overrideSearchSortOrder={
+        showOnlyPublished
+          ? SearchSortOption.RECENTLY_PUBLISHED
+          : SearchSortOption.RECENTLY_MODIFIED
+      }
     >
       <RecentlyModified />
     </SearchContextProvider>

diff --git a/src/library-authoring/__mocks__/collection-search.json b/src/library-authoring/__mocks__/collection-search.json
@@ -34,6 +34,10 @@
             "key": [
               "my-first-collection"
             ]
+          },
+          "published": {
+            "display_name": "Introduction to Testing",
+            "description": "Testing"
           }
         },
         {
@@ -64,6 +68,10 @@
             "key": [
               "my-first-collection"
             ]
+          },
+          "published": {
+            "display_name": "Second Text Component",
+            "description": "Second Testing"
           }
         },
         {
@@ -97,6 +105,10 @@
               "my-first-collection",
               "my-second-collection"
             ]
+          },
+          "published": {
+            "display_name": "Third Text component",
+            "description": "Third Testing"
           }
         },
         {
@@ -128,6 +140,10 @@
             "key": [
               "my-first-collection"
             ]
+          },
+          "published": {
+            "display_name": "Text 4",
+            "description": "Testing 4"
           }
         },
         {
@@ -159,6 +175,10 @@
             "key": [
               "my-first-collection"
             ]
+          },
+          "published": {
+            "display_name": "Blank Problem",
+            "description": "Problem"
           }
         }
       ],

diff --git a/src/library-authoring/__mocks__/library-search.json b/src/library-authoring/__mocks__/library-search.json
@@ -26,7 +26,11 @@
           "block_type": "html",
           "context_key": "lib:Axim:TEST",
           "org": "Axim",
-          "access_id": 15
+          "access_id": 15,
+          "published": {
+            "display_name": "Introduction to Testing",
+            "description": "Testing"
+          }
         },
         {
           "id": "lbaximtesthtml73a22298-bcd9-4f4c-ae34-0bc2b0612480-46b4a7f2",
@@ -48,7 +52,11 @@
           "block_type": "html",
           "context_key": "lib:Axim:TEST",
           "org": "Axim",
-          "access_id": 15
+          "access_id": 15,
+          "published": {
+            "display_name": "Second Text Component",
+            "description": "Second Testing"
+          }
         },
         {
           "id": "lbaximtesthtmlbe5b5db9-26ba-4fac-86af-654538c70b5e-73dbaa95",
@@ -71,7 +79,11 @@
           "block_type": "html",
           "context_key": "lib:Axim:TEST",
           "org": "Axim",
-          "access_id": 15
+          "access_id": 15,
+          "published": {
+            "display_name": "Third Text component",
+            "description": "Third Testing"
+          }
         },
         {
           "id": "lbaximtesthtmle59e8c73-4056-4894-bca4-062781fb3f68-46a404b2",
@@ -94,7 +106,11 @@
           "block_type": "html",
           "context_key": "lib:Axim:TEST",
           "org": "Axim",
-          "access_id": 15
+          "access_id": 15,
+          "published": {
+            "display_name": "Text 4",
+            "description": "Testing 4"
+          }
         },
         {
           "id": "lbaximtestproblemf16116c9-516e-4bb9-b99e-103599f62417-f2798115",
@@ -117,7 +133,11 @@
           "block_type": "problem",
           "context_key": "lib:Axim:TEST",
           "org": "Axim",
-          "access_id": 15
+          "access_id": 15,
+          "published": {
+            "display_name": "Blank Problem",
+            "description": "Problem"
+          }
         },
         {
           "id": "lbaximtestproblem2ace6b9b-6620-413c-a66f-19c797527f34-3a7973b7",
@@ -143,7 +163,11 @@
           "block_type": "problem",
           "context_key": "lib:Axim:TEST",
           "org": "Axim",
-          "access_id": 15
+          "access_id": 15,
+          "published": {
+            "display_name": "Multiple Choice Problem",
+            "description": "Problem"
+          }
         },
         {
           "id": "lbaximtestproblem7d7e98ba-3ac9-4aa8-8946-159129b39a28-3a7973b7",
@@ -169,7 +193,11 @@
           "block_type": "problem",
           "context_key": "lib:Axim:TEST",
           "org": "Axim",
-          "access_id": 15
+          "access_id": 15,
+          "published": {
+            "display_name": "Single Choice Problem",
+            "description": "Problem"
+          }
         },
         {
           "id": "lbaximtestproblem4e1a72f9-ac93-42aa-a61c-ab5f9698c398-3a7973b7",
@@ -195,7 +223,11 @@
           "block_type": "problem",
           "context_key": "lib:Axim:TEST",
           "org": "Axim",
-          "access_id": 15
+          "access_id": 15,
+          "published": {
+            "display_name": "Numerical Response Problem",
+            "description": "Problem"
+          }
         },
         {
           "id": "lbaximtestproblemad483625-ade2-4712-88d8-c9743abbd291-3a7973b7",
@@ -221,7 +253,11 @@
           "block_type": "problem",
           "context_key": "lib:Axim:TEST",
           "org": "Axim",
-          "access_id": 15
+          "access_id": 15,
+          "published": {
+            "display_name": "Option Response Problem",
+            "description": "Problem"
+          }
         },
         {
           "id": "lbaximtestproblemb4c859cb-de70-421a-917b-e6e01ce44bd8-3a7973b7",
@@ -247,7 +283,11 @@
           "block_type": "problem",
           "context_key": "lib:Axim:TEST",
           "org": "Axim",
-          "access_id": 15
+          "access_id": 15,
+          "published": {
+            "display_name": "String Response Problem",
+            "description": "Problem"
+          }
         }
       ],
       "query": "",

diff --git a/src/library-authoring/__mocks__/libraryComponentsMock.ts b/src/library-authoring/__mocks__/libraryComponentsMock.ts
@@ -3,11 +3,13 @@ export default [
     id: '1',
     usageKey: 'lb:org:lib:html:1',
     displayName: 'Text Component 1',
+    description: 'This is a text: ID=1',
     formatted: {
       displayName: 'Text Component 1',
       content: {
         htmlContent: 'This is a text: ID=1',
       },
+      description: 'This is a text: ID=1',
     },
     tags: {
       level0: ['1', '2', '3'],
@@ -18,11 +20,13 @@ export default [
     id: '2',
     usageKey: 'lb:org:lib:html:2',
     displayName: 'Text Component 2',
+    description: 'This is a text: ID=2',
     formatted: {
       displayName: 'Text Component 2',
       content: {
         htmlContent: 'This is a text: ID=2',
       },
+      description: 'This is a text: ID=2',
     },
     tags: {
       level0: ['1', '2', '3'],
@@ -60,23 +64,27 @@ export default [
     id: '5',
     usageKey: 'lb:org:lib:problem:5',
     displayName: 'Problem',
+    description: 'This is a problem: ID=5',
     formatted: {
       displayName: 'Problem',
       content: {
         capaContent: 'This is a problem: ID=5',
       },
+      description: 'This is a problem: ID=5',
     },
     blockType: 'problem',
   },
   {
     id: '6',
     usageKey: 'lb:org:lib:problem:6',
     displayName: 'Problem',
+    description: 'This is a problem: ID=6',
     formatted: {
       displayName: 'Problem',
       content: {
         capaContent: 'This is a problem: ID=6',
       },
+      description: 'This is a problem: ID=6',
     },
     blockType: 'problem',
   },

diff --git a/src/library-authoring/collections/LibraryCollectionPage.tsx b/src/library-authoring/collections/LibraryCollectionPage.tsx
@@ -107,6 +107,7 @@ const LibraryCollectionPage = () => {
     sidebarComponentInfo,
     openCollectionInfoSidebar,
     componentPickerMode,
+    showOnlyPublished,
     setCollectionId,
   } = useLibraryContext();
 
@@ -175,6 +176,11 @@ const LibraryCollectionPage = () => {
     />
   );
 
+  const extraFilter = [`context_key = "${libraryId}"`, `collections.key = "${collectionId}"`];
+  if (showOnlyPublished) {
+    extraFilter.push('last_published IS NOT NULL');
+  }
+
   return (
     <div className="d-flex">
       <div className="flex-grow-1">
@@ -189,7 +195,7 @@ const LibraryCollectionPage = () => {
         )}
         <Container size="xl" className="px-4 mt-4 mb-5 library-authoring-page">
           <SearchContextProvider
-            extraFilter={[`context_key = "${libraryId}"`, `collections.key = "${collectionId}"`]}
+            extraFilter={extraFilter}
             overrideQueries={{ collections: { limit: 0 } }}
           >
             <SubHeader

diff --git a/src/library-authoring/common/context.tsx b/src/library-authoring/common/context.tsx
@@ -37,6 +37,8 @@ export interface LibraryContextData {
   setCollectionId: (collectionId?: string) => void;
   // Whether we're in "component picker" mode
   componentPickerMode: boolean;
+  // Only show published components
+  showOnlyPublished: boolean;
   // Sidebar stuff - only one sidebar is active at any given time:
   closeLibrarySidebar: () => void;
   openAddContentSidebar: () => void;
@@ -79,6 +81,7 @@ interface LibraryProviderProps {
   /** The component picker mode is a special mode where the user is selecting a component to add to a Unit (or another
    *  XBlock) */
   componentPickerMode?: boolean;
+  showOnlyPublished?: boolean;
   /** Only used for testing */
   initialSidebarComponentInfo?: SidebarComponentInfo;
 }
@@ -91,6 +94,7 @@ export const LibraryProvider = ({
   libraryId,
   collectionId: collectionIdProp,
   componentPickerMode = false,
+  showOnlyPublished = false,
   initialSidebarComponentInfo,
 }: LibraryProviderProps) => {
   const [collectionId, setCollectionId] = useState(collectionIdProp);
@@ -148,6 +152,7 @@ export const LibraryProvider = ({
     readOnly,
     isLoadingLibraryData,
     componentPickerMode,
+    showOnlyPublished,
     closeLibrarySidebar,
     openAddContentSidebar,
     openInfoSidebar,
@@ -172,6 +177,7 @@ export const LibraryProvider = ({
     readOnly,
     isLoadingLibraryData,
     componentPickerMode,
+    showOnlyPublished,
     closeLibrarySidebar,
     openAddContentSidebar,
     openInfoSidebar,

diff --git a/src/library-authoring/component-info/ComponentInfoHeader.test.tsx b/src/library-authoring/component-info/ComponentInfoHeader.test.tsx
@@ -8,7 +8,7 @@ import {
   initializeMocks,
 } from '../../testUtils';
 import { mockContentLibrary } from '../data/api.mocks';
-import { getXBlockFieldsApiUrl } from '../data/api';
+import { getXBlockFieldsVersionApiUrl, getXBlockFieldsApiUrl } from '../data/api';
 import { LibraryProvider, SidebarBodyComponentId } from '../common/context';
 import ComponentInfoHeader from './ComponentInfoHeader';
 
@@ -45,7 +45,7 @@ describe('<ComponentInfoHeader />', () => {
   beforeEach(() => {
     const mocks = initializeMocks();
     axiosMock = mocks.axiosMock;
-    axiosMock.onGet(getXBlockFieldsApiUrl(usageKey)).reply(200, xBlockFields);
+    axiosMock.onGet(getXBlockFieldsVersionApiUrl(usageKey, 'draft')).reply(200, xBlockFields);
     mockShowToast = mocks.mockShowToast;
   });
 
@@ -97,7 +97,7 @@ describe('<ComponentInfoHeader />', () => {
   });
 
   it('should close edit library title on press Escape', async () => {
-    const url = getXBlockFieldsApiUrl(usageKey);
+    const url = getXBlockFieldsVersionApiUrl(usageKey, 'draft');
     axiosMock.onPost(url).reply(200);
     render();