diff --git a/client/src/app/shared/components/FilterToolbar/FilterControl.tsx b/client/src/app/shared/components/FilterToolbar/FilterControl.tsx index 1e428d780f..52a0f73b44 100644 --- a/client/src/app/shared/components/FilterToolbar/FilterControl.tsx +++ b/client/src/app/shared/components/FilterToolbar/FilterControl.tsx @@ -29,6 +29,7 @@ export const FilterControl = ({ if (category.type === FilterType.select) { return ( } {...props} /> @@ -49,6 +50,7 @@ export const FilterControl = ({ if (category.type === FilterType.multiselect) { return ( } diff --git a/client/src/app/shared/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/shared/components/FilterToolbar/MultiselectFilterControl.tsx index 3a1aedf43a..87cfe141e5 100644 --- a/client/src/app/shared/components/FilterToolbar/MultiselectFilterControl.tsx +++ b/client/src/app/shared/components/FilterToolbar/MultiselectFilterControl.tsx @@ -13,12 +13,16 @@ import { IMultiselectFilterCategory, OptionPropsWithKey, } from "./FilterToolbar"; +import { css } from "@patternfly/react-styles"; + +import "./select-overrides.css"; export interface IMultiselectFilterControlProps< TItem, TFilterCategoryKey extends string > extends IFilterControlProps { category: IMultiselectFilterCategory; + isScrollable?: boolean; } export const MultiselectFilterControl = < @@ -30,6 +34,7 @@ export const MultiselectFilterControl = < setFilterValue, showToolbarItem, isDisabled = false, + isScrollable = false, }: React.PropsWithChildren< IMultiselectFilterControlProps >): JSX.Element | null => { @@ -47,10 +52,12 @@ export const MultiselectFilterControl = < const getChipFromOptionValue = ( optionValue: string | SelectOptionObject | undefined ) => (optionValue ? optionValue.toString() : ""); + const getOptionKeyFromChip = (chip: string) => category.selectOptions.find( (optionProps) => optionProps.value.toString() === chip )?.key; + const getOptionValueFromOptionKey = (optionKey: string) => category.selectOptions.find((optionProps) => optionProps.key === optionKey) ?.value; @@ -71,6 +78,7 @@ export const MultiselectFilterControl = < } } }; + const onFilterClear = (chip: string) => { const optionKey = getOptionKeyFromChip(chip); const newValue = filterValue @@ -83,6 +91,7 @@ export const MultiselectFilterControl = < const selections = filterValue ? filterValue.map(getOptionValueFromOptionKey) : null; + const chips = selections ? selections.map(getChipFromOptionValue) : []; const renderSelectOptions = (options: OptionPropsWithKey[]) => @@ -111,13 +120,14 @@ export const MultiselectFilterControl = < return ( onFilterClear(chip as string)} categoryName={category.title} showToolbarItem={showToolbarItem} > diff --git a/client/src/app/shared/components/FilterToolbar/SelectFilterControl.tsx b/client/src/app/shared/components/FilterToolbar/SelectFilterControl.tsx index de1d1b436a..9efb60d687 100644 --- a/client/src/app/shared/components/FilterToolbar/SelectFilterControl.tsx +++ b/client/src/app/shared/components/FilterToolbar/SelectFilterControl.tsx @@ -6,13 +6,17 @@ import { SelectOptionObject, } from "@patternfly/react-core"; import { IFilterControlProps } from "./FilterControl"; -import { ISelectFilterCategory } from "./FilterToolbar"; +import { ISelectFilterCategory, OptionPropsWithKey } from "./FilterToolbar"; +import { css } from "@patternfly/react-styles"; + +import "./select-overrides.css"; export interface ISelectFilterControlProps< TItem, TFilterCategoryKey extends string > extends IFilterControlProps { category: ISelectFilterCategory; + isScrollable?: boolean; } export const SelectFilterControl = ({ @@ -21,6 +25,7 @@ export const SelectFilterControl = ({ setFilterValue, showToolbarItem, isDisabled = false, + isScrollable = false, }: React.PropsWithChildren< ISelectFilterControlProps >): JSX.Element | null => { @@ -32,13 +37,16 @@ export const SelectFilterControl = ({ category.selectOptions.find( (optionProps) => optionProps.value === optionValue )?.key; + const getChipFromOptionValue = ( optionValue: string | SelectOptionObject | undefined ) => (optionValue ? optionValue.toString() : ""); + const getOptionKeyFromChip = (chip: string) => category.selectOptions.find( (optionProps) => optionProps.value.toString() === chip )?.key; + const getOptionValueFromOptionKey = (optionKey: string) => category.selectOptions.find((optionProps) => optionProps.key === optionKey) ?.value; @@ -48,6 +56,7 @@ export const SelectFilterControl = ({ setFilterValue(optionKey ? [optionKey] : null); setIsFilterDropdownOpen(false); }; + const onFilterClear = (chip: string) => { const optionKey = getOptionKeyFromChip(chip); const newValue = filterValue @@ -60,8 +69,14 @@ export const SelectFilterControl = ({ const selections = filterValue ? filterValue.map(getOptionValueFromOptionKey) : null; + const chips = selections ? selections.map(getChipFromOptionValue) : []; + const renderSelectOptions = (options: OptionPropsWithKey[]) => + options.map((optionProps) => ( + + )); + return ( ({ showToolbarItem={showToolbarItem} > ); diff --git a/client/src/app/shared/components/FilterToolbar/select-overrides.css b/client/src/app/shared/components/FilterToolbar/select-overrides.css new file mode 100644 index 0000000000..282961300b --- /dev/null +++ b/client/src/app/shared/components/FilterToolbar/select-overrides.css @@ -0,0 +1,4 @@ +.pf-c-select.isScrollable .pf-c-select__menu { + max-height: 60vh; + overflow-y: auto; +}