From 253bba8d5ae1ad0b84edd393ed45620249d96599 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Thu, 19 Dec 2024 11:41:52 -0300
Subject: [PATCH 1/3] fix: disable filter by block on collections tab

---
 .../LibraryAuthoringPage.tsx                  |  2 +-
 src/search-manager/FilterByBlockType.tsx      | 35 ++++++++++++++-----
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
index 46dd1cd49..88b92eb1a 100644
--- 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
index 98410be18..f77a1cac6 100644
--- 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,
@@ -220,6 +224,23 @@ const FilterByBlockType: React.FC<Record<never, never>> = () => {
     setProblemTypesFilter,
   } = useSearchContext();
 
+  useEffect(() => {
+    if (disabled) {
+      // Clear filters when disabled
+      const selectedBlockTypesFilter = blockTypesFilter;
+      const selectedProblemTypesFilter = problemTypesFilter;
+      setBlockTypesFilter([]);
+      setProblemTypesFilter([]);
+
+      return () => {
+        // Restore filters when re-enabled
+        setBlockTypesFilter(selectedBlockTypesFilter);
+        setProblemTypesFilter(selectedProblemTypesFilter);
+      };
+    }
+    return () => {};
+  }, [disabled]);
+
   const clearFilters = useCallback(/* istanbul ignore next */ () => {
     setBlockTypesFilter([]);
     setProblemTypesFilter([]);
@@ -262,7 +283,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,10 +300,6 @@ 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} />
@@ -288,9 +307,9 @@ const FilterByBlockType: React.FC<Record<never, never>> = () => {
             }
             {
               // 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>

From e0d84a6db18f8b2492ab4c6af3052d8e14e0840c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo@opencraft.com>
Date: Fri, 20 Dec 2024 09:50:41 -0300
Subject: [PATCH 2/3] fix: reuse clearFilters function

Co-authored-by: Navin Karkera <navin@opencraft.com>
---
 src/search-manager/FilterByBlockType.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/search-manager/FilterByBlockType.tsx b/src/search-manager/FilterByBlockType.tsx
index f77a1cac6..9ad27bc45 100644
--- a/src/search-manager/FilterByBlockType.tsx
+++ b/src/search-manager/FilterByBlockType.tsx
@@ -229,8 +229,7 @@ const FilterByBlockType: React.FC<FilterByBlockTypeProps> = ({ disabled = false
       // Clear filters when disabled
       const selectedBlockTypesFilter = blockTypesFilter;
       const selectedProblemTypesFilter = problemTypesFilter;
-      setBlockTypesFilter([]);
-      setProblemTypesFilter([]);
+      clearFilters();
 
       return () => {
         // Restore filters when re-enabled

From ca971f55e5308dbed6a7d69be2f8c7e9a1253b29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Sat, 21 Dec 2024 01:01:33 -0300
Subject: [PATCH 3/3] fix: eslint

---
 src/search-manager/FilterByBlockType.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/search-manager/FilterByBlockType.tsx b/src/search-manager/FilterByBlockType.tsx
index 9ad27bc45..95c8ee756 100644
--- a/src/search-manager/FilterByBlockType.tsx
+++ b/src/search-manager/FilterByBlockType.tsx
@@ -224,6 +224,11 @@ const FilterByBlockType: React.FC<FilterByBlockTypeProps> = ({ disabled = false
     setProblemTypesFilter,
   } = useSearchContext();
 
+  const clearFilters = useCallback(/* istanbul ignore next */ () => {
+    setBlockTypesFilter([]);
+    setProblemTypesFilter([]);
+  }, []);
+
   useEffect(() => {
     if (disabled) {
       // Clear filters when disabled
@@ -240,11 +245,6 @@ const FilterByBlockType: React.FC<FilterByBlockTypeProps> = ({ disabled = false
     return () => {};
   }, [disabled]);
 
-  const clearFilters = useCallback(/* istanbul ignore next */ () => {
-    setBlockTypesFilter([]);
-    setProblemTypesFilter([]);
-  }, []);
-
   // Sort blocktypes in order of hierarchy followed by alphabetically for components
   const sortedBlockTypeKeys = Object.keys(blockTypes).sort((a, b) => {
     const order = {