fix: disable filter by block on collections tab [FC-0076] (#1576)

Adds the disabled prop for `FilterByBlockType` component and uses it on the Library Collection tab.
openedx · Dec 21, 2024 · dc0ba6a · dc0ba6a
1 parent 230960b
commit dc0ba6a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -258,7 +258,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
@@ -206,12 +206,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,
     blockTypesFilter,
@@ -225,6 +229,22 @@ const FilterByBlockType: React.FC<Record<never, never>> = () => {
     setProblemTypesFilter([]);
   }, []);
 
+  useEffect(() => {
+    if (disabled) {
+      // Clear filters when disabled
+      const selectedBlockTypesFilter = blockTypesFilter;
+      const selectedProblemTypesFilter = problemTypesFilter;
+      clearFilters();
+
+      return () => {
+        // Restore filters when re-enabled
+        setBlockTypesFilter(selectedBlockTypesFilter);
+        setProblemTypesFilter(selectedProblemTypesFilter);
+      };
+    }
+    return () => {};
+  }, [disabled]);
+
   // Sort blocktypes in order of hierarchy followed by alphabetically for components
   const sortedBlockTypeKeys = Object.keys(blockTypes).sort((a, b) => {
     const order = {
@@ -262,7 +282,9 @@ const FilterByBlockType: React.FC<Record<never, never>> = () => {
     blockType => ({ label: <BlockTypeLabel blockType={blockType} /> }),
   );
 
-  const hiddenBlockTypes = blockTypesFilter.filter(blockType => !Object.keys(blockTypes).includes(blockType));
+  if (disabled) {
+    return null;
+  }
 
   return (
     <SearchFilterWidget
@@ -277,20 +299,16 @@ const FilterByBlockType: React.FC<Record<never, never>> = () => {
           value={blockTypesFilter}
         >
           <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>