Merge remote-tracking branch 'origin/master' into jill/fal-3984-shara…

…ble-urls
openedx · Dec 30, 2024 · 9d3e049 · 9d3e049
2 parents a3ee610 + dc0ba6a
commit 9d3e049
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -267,7 +267,7 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
             <ActionRow className="my-3">
               <SearchKeywordsField className="mr-3" />
               <FilterByTags />
-              <FilterByBlockType />
+              <FilterByBlockType disabled={activeKey === ContentType.collections} />
               <ClearFiltersButton />
               <ActionRow.Spacer />
               <SearchSortWidget />

diff --git a/src/search-manager/FilterByBlockType.tsx b/src/search-manager/FilterByBlockType.tsx
@@ -191,12 +191,16 @@ const FilterItem = ({ blockType, count } : FilterItemProps) => {
   );
 };
 
+interface FilterByBlockTypeProps {
+  disabled?: boolean,
+}
 /**
  * A button with a dropdown that allows filtering the current search by component type (XBlock type)
  * e.g. Limit results to "Text" (html) and "Problem" (problem) components.
  * The button displays the first type selected, and a count of how many other types are selected, if more than one.
+ * @param disabled - If true, the filter is disabled and hidden.
  */
-const FilterByBlockType: React.FC<Record<never, never>> = () => {
+const FilterByBlockType: React.FC<FilterByBlockTypeProps> = ({ disabled = false }) => {
   const {
     blockTypes,
     typesFilter,
@@ -205,7 +209,7 @@ const FilterByBlockType: React.FC<Record<never, never>> = () => {
 
   const clearFilters = useCallback(/* istanbul ignore next */ () => {
     setTypesFilter((types) => types.clear());
-  }, []);
+  }, [setTypesFilter]);
 
   // Sort blocktypes in order of hierarchy followed by alphabetically for components
   const sortedBlockTypeKeys = Object.keys(blockTypes).sort((a, b) => {
@@ -244,7 +248,9 @@ const FilterByBlockType: React.FC<Record<never, never>> = () => {
     blockType => ({ label: <BlockTypeLabel blockType={blockType} /> }),
   );
 
-  const hiddenBlockTypes = [...typesFilter.blocks].filter(blockType => !Object.keys(blockTypes).includes(blockType));
+  if (disabled) {
+    return null;
+  }
 
   return (
     <SearchFilterWidget
@@ -259,20 +265,16 @@ const FilterByBlockType: React.FC<Record<never, never>> = () => {
           value={[...typesFilter.blocks]}
         >
           <Menu className="block-type-refinement-menu" style={{ boxShadow: 'none' }}>
-            {
-              // Show applied filter items for block types that are not in the current search results
-              hiddenBlockTypes.map(blockType => <FilterItem key={blockType} blockType={blockType} count={0} />)
-            }
             {
               Object.entries(sortedBlockTypes).map(([blockType, count]) => (
                 <FilterItem key={blockType} blockType={blockType} count={count} />
               ))
             }
             {
               // Show a message if there are no options at all to avoid the impression that the dropdown isn't working
-              Object.keys(sortedBlockTypes).length === 0 && hiddenBlockTypes.length === 0 ? (
+              Object.keys(sortedBlockTypes).length === 0 && (
                 <MenuItem disabled><FormattedMessage {...messages['blockTypeFilter.empty']} /></MenuItem>
-              ) : null
+              )
             }
           </Menu>
         </Form.CheckboxSet>