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 - + diff --git a/src/search-manager/FilterByBlockType.tsx b/src/search-manager/FilterByBlockType.tsx index 98410be18..95c8ee756 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> = () => { +const FilterByBlockType: React.FC = ({ disabled = false }) => { const { blockTypes, blockTypesFilter, @@ -225,6 +229,22 @@ const FilterByBlockType: React.FC> = () => { 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> = () => { blockType => ({ label: }), ); - const hiddenBlockTypes = blockTypesFilter.filter(blockType => !Object.keys(blockTypes).includes(blockType)); + if (disabled) { + return null; + } return ( > = () => { value={blockTypesFilter} > - { - // Show applied filter items for block types that are not in the current search results - hiddenBlockTypes.map(blockType => ) - } { Object.entries(sortedBlockTypes).map(([blockType, count]) => ( @@ -288,9 +306,9 @@ const FilterByBlockType: React.FC> = () => { } { // 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 && ( - ) : null + ) }