diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx index d1412a126..4e291c5f4 100644 --- a/src/library-authoring/LibraryAuthoringPage.tsx +++ b/src/library-authoring/LibraryAuthoringPage.tsx @@ -267,7 +267,7 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage - + diff --git a/src/search-manager/FilterByBlockType.tsx b/src/search-manager/FilterByBlockType.tsx index fd8364678..16c0b1de1 100644 --- 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> = () => { +const FilterByBlockType: React.FC = ({ disabled = false }) => { const { blockTypes, typesFilter, @@ -205,7 +209,7 @@ const FilterByBlockType: React.FC> = () => { 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> = () => { blockType => ({ label: }), ); - const hiddenBlockTypes = [...typesFilter.blocks].filter(blockType => !Object.keys(blockTypes).includes(blockType)); + if (disabled) { + return null; + } return ( > = () => { value={[...typesFilter.blocks]} > - { - // Show applied filter items for block types that are not in the current search results - hiddenBlockTypes.map(blockType => ) - } { Object.entries(sortedBlockTypes).map(([blockType, count]) => ( @@ -270,9 +272,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 + ) }