From 3de8f6b79f7f1535e18d100cbab34670baa308e3 Mon Sep 17 00:00:00 2001 From: Ian Bolton Date: Wed, 21 Feb 2024 14:28:05 -0500 Subject: [PATCH] :ghost: Convert single/multi filter toolbar controls to use pf5 select (#1669) - Resolves: - https://issues.redhat.com/browse/MTA-1872 - https://issues.redhat.com/browse/MTA-467 - Upgrade our usage of the PF select component to the pf 5 supported version. --------- Signed-off-by: ibolton336 Signed-off-by: Ian Bolton --- .../MultiselectFilterControl.tsx | 342 ++++++++++++++---- .../FilterToolbar/SelectFilterControl.tsx | 110 +++--- 2 files changed, 332 insertions(+), 120 deletions(-) diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx index 627faa55f..f88511099 100644 --- a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx +++ b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx @@ -1,19 +1,27 @@ import * as React from "react"; -import { ToolbarChip, ToolbarFilter, Tooltip } from "@patternfly/react-core"; import { + Badge, + Button, + MenuToggle, + MenuToggleElement, Select, - SelectOption, - SelectOptionObject, - SelectVariant, - SelectProps, SelectGroup, -} from "@patternfly/react-core/deprecated"; + SelectList, + SelectOption, + TextInputGroup, + TextInputGroupMain, + TextInputGroupUtilities, + ToolbarChip, + ToolbarFilter, + Tooltip, +} from "@patternfly/react-core"; import { IFilterControlProps } from "./FilterControl"; import { IMultiselectFilterCategory, FilterSelectOptionProps, } from "./FilterToolbar"; import { css } from "@patternfly/react-styles"; +import { TimesIcon } from "@patternfly/react-icons"; import "./select-overrides.css"; @@ -37,58 +45,54 @@ export const MultiselectFilterControl = ({ >): JSX.Element | null => { const [isFilterDropdownOpen, setIsFilterDropdownOpen] = React.useState(false); - const { selectOptions } = category; + const [selectOptions, setSelectOptions] = React.useState< + FilterSelectOptionProps[] + >(Array.isArray(category.selectOptions) ? category.selectOptions : []); + const hasGroupings = !Array.isArray(selectOptions); - const flatOptions = !hasGroupings - ? selectOptions - : Object.values(selectOptions).flatMap((i) => i); - const getOptionKeyFromOptionValue = ( - optionValue: string | SelectOptionObject - ) => flatOptions.find(({ value }) => value === optionValue)?.key; + const flatOptions: FilterSelectOptionProps[] = !hasGroupings + ? selectOptions + : (Object.values(selectOptions).flatMap( + (i) => i + ) as FilterSelectOptionProps[]); - const getOptionKeyFromChip = (chip: string) => - flatOptions.find(({ value }) => value.toString() === chip)?.key; + const getOptionKeyFromOptionValue = (optionValue: string) => + flatOptions.find(({ value }) => value === optionValue)?.key; const getOptionValueFromOptionKey = (optionKey: string) => flatOptions.find(({ key }) => key === optionKey)?.value; - const onFilterSelect = (value: string | SelectOptionObject) => { - const optionKey = getOptionKeyFromOptionValue(value); - if (optionKey && filterValue?.includes(optionKey)) { - const updatedValues = filterValue.filter( - (item: string) => item !== optionKey - ); - setFilterValue(updatedValues); - } else { - if (filterValue) { - const updatedValues = [...filterValue, optionKey]; - setFilterValue(updatedValues as string[]); - } else { - setFilterValue([optionKey || ""]); - } - } + const getOptionKeyFromChip = (chipDisplayValue: string) => { + return flatOptions.find(({ value }) => value === chipDisplayValue)?.key; }; + const [focusedItemIndex, setFocusedItemIndex] = React.useState( + null + ); + + const [activeItem, setActiveItem] = React.useState(null); + const textInputRef = React.useRef(); + const [inputValue, setInputValue] = React.useState(""); + const onFilterClear = (chip: string | ToolbarChip) => { - const chipKey = typeof chip === "string" ? chip : chip.key; - const optionKey = getOptionKeyFromChip(chipKey); - const newValue = filterValue - ? filterValue.filter((val) => val !== optionKey) - : []; - setFilterValue(newValue.length > 0 ? newValue : null); - }; + const displayValue = typeof chip === "string" ? chip : chip.key; + const optionKey = getOptionKeyFromChip(displayValue); - // Select expects "selections" to be an array of the "value" props from the relevant optionProps - const selections = filterValue?.map(getOptionValueFromOptionKey) ?? []; + if (optionKey) { + const newValue = filterValue?.filter((val) => val !== optionKey) ?? []; + setFilterValue(newValue.length > 0 ? newValue : null); + } + }; /* * Note: Chips can be a `ToolbarChip` or a plain `string`. Use a hack to split a * selected option in 2 parts. Assuming the option is in the format "Group / Item" * break the text and show a chip with the Item and the Group as a tooltip. */ - const chips = selections.map((s, index) => { - const chip: string = s?.toString() ?? ""; + const chips = filterValue?.map((s, index) => { + const displayValue = getOptionValueFromOptionKey(s); + const chip: string = displayValue?.toString() ?? ""; const idx = chip.indexOf(CHIP_BREAK_DELINEATOR); if (idx > 0) { @@ -110,43 +114,238 @@ export const MultiselectFilterControl = ({ filter: (option: FilterSelectOptionProps, groupName?: string) => boolean ) => hasGroupings - ? Object.entries(selectOptions) + ? Object.entries( + selectOptions as Record + ) .sort(([groupA], [groupB]) => groupA.localeCompare(groupB)) .map(([group, options], index) => { const groupFiltered = options?.filter((o) => filter(o, group)) ?? []; - return groupFiltered.length == 0 ? undefined : ( + return groupFiltered.length === 0 ? undefined : ( - {groupFiltered.map((optionProps) => ( - - ))} + {groupFiltered.map((optionProps) => { + const optionKey = getOptionKeyFromOptionValue( + optionProps.value + ); + if (!optionKey) return null; + return ( + + ); + })} ); }) .filter(Boolean) : flatOptions .filter((o) => filter(o)) - .map((optionProps) => ( - - )); + .map((optionProps, index) => { + const optionKey = getOptionKeyFromOptionValue(optionProps.value); + if (!optionKey) return null; + return ( + + {optionProps.value} + + ); + }); - /** - * Render options (with categories if available) where the option value OR key includes - * the filterInput. - */ - const onOptionsFilter: SelectProps["onFilter"] = (_event, textInput) => { - const input = textInput?.toLowerCase(); - - return renderSelectOptions((optionProps, groupName) => { - // TODO: Checking for a filter match against the key or the value may not be desirable. - return ( - groupName?.toLowerCase().includes(input) || - optionProps?.key?.toLowerCase().includes(input) || - optionProps?.value?.toString().toLowerCase().includes(input) + const onSelect = (value: string | undefined) => { + if (value && value !== "No results") { + const optionKey = getOptionKeyFromOptionValue(value); + + if (optionKey) { + let newFilterValue: string[]; + + if (filterValue && filterValue.includes(optionKey)) { + newFilterValue = filterValue.filter((item) => item !== optionKey); + } else { + newFilterValue = filterValue + ? [...filterValue, optionKey] + : [optionKey]; + } + + setFilterValue(newFilterValue); + } + } + textInputRef.current?.focus(); + }; + + const handleMenuArrowKeys = (key: string) => { + let indexToFocus = 0; + + if (isFilterDropdownOpen) { + if (key === "ArrowUp") { + if (focusedItemIndex === null || focusedItemIndex === 0) { + indexToFocus = selectOptions.length - 1; + } else { + indexToFocus = focusedItemIndex - 1; + } + } + + if (key === "ArrowDown") { + if ( + focusedItemIndex === null || + focusedItemIndex === selectOptions.length - 1 + ) { + indexToFocus = 0; + } else { + indexToFocus = focusedItemIndex + 1; + } + } + + setFocusedItemIndex(indexToFocus); + const focusedItem = selectOptions.filter((option) => !option.isDisabled)[ + indexToFocus + ]; + setActiveItem( + `select-multi-typeahead-checkbox-${focusedItem.value.replace(" ", "-")}` ); - }); + } }; + React.useEffect(() => { + let newSelectOptions = Array.isArray(category.selectOptions) + ? category.selectOptions + : []; + + if (inputValue) { + newSelectOptions = Array.isArray(category.selectOptions) + ? category.selectOptions?.filter((menuItem) => + String(menuItem.value) + .toLowerCase() + .includes(inputValue.trim().toLowerCase()) + ) + : []; + + if (!newSelectOptions.length) { + newSelectOptions = [ + { + key: "no-results", + isDisabled: false, + children: `No results found for "${inputValue}"`, + value: "No results", + }, + ]; + } + + if (!isFilterDropdownOpen) { + setIsFilterDropdownOpen(true); + } + } + + setSelectOptions(newSelectOptions); + setFocusedItemIndex(null); + setActiveItem(null); + }, [inputValue]); + + const onInputKeyDown = (event: React.KeyboardEvent) => { + const enabledMenuItems = Array.isArray(selectOptions) + ? selectOptions.filter((option) => !option.isDisabled) + : []; + const [firstMenuItem] = enabledMenuItems; + const focusedItem = focusedItemIndex + ? enabledMenuItems[focusedItemIndex] + : firstMenuItem; + + const newSelectOptions = flatOptions.filter((menuItem) => + menuItem.value.toLowerCase().includes(inputValue.toLowerCase()) + ); + const selectedItem = + newSelectOptions.find( + (option) => option.value.toLowerCase() === inputValue.toLowerCase() + ) || focusedItem; + + switch (event.key) { + case "Enter": + if (!isFilterDropdownOpen) { + setIsFilterDropdownOpen((prev) => !prev); + } else if (selectedItem && selectedItem.value !== "No results") { + onSelect(selectedItem.value); + } + break; + case "Tab": + case "Escape": + setIsFilterDropdownOpen(false); + setActiveItem(null); + break; + case "ArrowUp": + case "ArrowDown": + event.preventDefault(); + handleMenuArrowKeys(event.key); + break; + default: + break; + } + }; + + const onTextInputChange = ( + _event: React.FormEvent, + value: string + ) => { + setInputValue(value); + }; + + const toggle = (toggleRef: React.Ref) => ( + { + setIsFilterDropdownOpen(!isFilterDropdownOpen); + }} + isExpanded={isFilterDropdownOpen} + isDisabled={isDisabled || !category.selectOptions.length} + isFullWidth + > + + { + setIsFilterDropdownOpen(!isFilterDropdownOpen); + }} + onChange={onTextInputChange} + onKeyDown={onInputKeyDown} + id="typeahead-select-input" + autoComplete="off" + innerRef={textInputRef} + placeholder={category.placeholderText} + {...(activeItem && { "aria-activedescendant": activeItem })} + role="combobox" + isExpanded={isFilterDropdownOpen} + aria-controls="select-typeahead-listbox" + /> + + + {!!inputValue && ( + + )} + {filterValue?.length ? ( + {filterValue.length} + ) : null} + + + + ); + return ( ({ ); diff --git a/client/src/app/components/FilterToolbar/SelectFilterControl.tsx b/client/src/app/components/FilterToolbar/SelectFilterControl.tsx index 3e0ed1abb..55d077205 100644 --- a/client/src/app/components/FilterToolbar/SelectFilterControl.tsx +++ b/client/src/app/components/FilterToolbar/SelectFilterControl.tsx @@ -1,15 +1,14 @@ import * as React from "react"; -import { ToolbarFilter } from "@patternfly/react-core"; import { + MenuToggle, + MenuToggleElement, Select, + SelectList, SelectOption, - SelectOptionObject, -} from "@patternfly/react-core/deprecated"; + ToolbarFilter, +} from "@patternfly/react-core"; import { IFilterControlProps } from "./FilterControl"; -import { - ISelectFilterCategory, - FilterSelectOptionProps, -} from "./FilterToolbar"; +import { ISelectFilterCategory } from "./FilterToolbar"; import { css } from "@patternfly/react-styles"; import "./select-overrides.css"; @@ -34,51 +33,52 @@ export const SelectFilterControl = ({ >): JSX.Element | null => { const [isFilterDropdownOpen, setIsFilterDropdownOpen] = React.useState(false); - const getOptionKeyFromOptionValue = ( - optionValue: string | SelectOptionObject - ) => - 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 getOptionKeyFromOptionValue = (optionValue: string) => + category.selectOptions.find(({ value }) => value === optionValue)?.key; const getOptionValueFromOptionKey = (optionKey: string) => - category.selectOptions.find((optionProps) => optionProps.key === optionKey) - ?.value; + category.selectOptions.find(({ key }) => key === optionKey)?.value; - const onFilterSelect = (value: string | SelectOptionObject) => { + const chips = filterValue?.map((key) => { + const displayValue = getOptionValueFromOptionKey(key); + return displayValue ? displayValue : key; + }); + + const onFilterSelect = (value: string) => { const optionKey = getOptionKeyFromOptionValue(value); setFilterValue(optionKey ? [optionKey] : null); setIsFilterDropdownOpen(false); }; const onFilterClear = (chip: string) => { - const optionKey = getOptionKeyFromChip(chip); - const newValue = filterValue - ? filterValue.filter((val) => val !== optionKey) - : []; - setFilterValue(newValue.length > 0 ? newValue : null); + const newValue = filterValue?.filter((val) => val !== chip); + setFilterValue(newValue?.length ? newValue : null); }; - // Select expects "selections" to be an array of the "value" props from the relevant optionProps - const selections = filterValue - ? filterValue.map(getOptionValueFromOptionKey) - : null; - - const chips = selections ? selections.map(getChipFromOptionValue) : []; + const toggle = (toggleRef: React.Ref) => { + let displayText = "Any"; + if (filterValue && filterValue.length > 0) { + const selectedKey = filterValue[0]; + const selectedDisplayValue = getOptionValueFromOptionKey(selectedKey); + displayText = selectedDisplayValue ? selectedDisplayValue : selectedKey; + } - const renderSelectOptions = (options: FilterSelectOptionProps[]) => - options.map((optionProps) => ( - - )); + return ( + { + setIsFilterDropdownOpen(!isFilterDropdownOpen); + }} + isExpanded={isFilterDropdownOpen} + isDisabled={isDisabled || category.selectOptions.length === 0} + > + {displayText} + + ); + }; return ( ({ );