From f345edb4b57135512273c80a009d676e00b9fe77 Mon Sep 17 00:00:00 2001 From: ibolton336 Date: Fri, 19 Jan 2024 16:01:15 -0500 Subject: [PATCH] :ghost: Convert filter toolbar controls to pf-5 select menu style Signed-off-by: ibolton336 --- .../MultiselectFilterControl.tsx | 315 ++++++++++++++---- .../FilterToolbar/SelectFilterControl.tsx | 98 ++++-- 2 files changed, 313 insertions(+), 100 deletions(-) diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx index 627faa55fc..9e82e336a5 100644 --- a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx +++ b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx @@ -1,19 +1,28 @@ 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, + SelectOptionProps, + 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,46 +46,44 @@ 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 + const flatOptions: FilterSelectOptionProps[] = !hasGroupings ? selectOptions - : Object.values(selectOptions).flatMap((i) => i); + : (Object.values(selectOptions).flatMap( + (i) => i + ) as FilterSelectOptionProps[]); - const getOptionKeyFromOptionValue = ( - optionValue: string | SelectOptionObject - ) => flatOptions.find(({ value }) => value === optionValue)?.key; + React.useEffect(() => { + if (Array.isArray(category.selectOptions)) { + setSelectOptions(category.selectOptions); + } + }, [category.selectOptions]); - const getOptionKeyFromChip = (chip: string) => - flatOptions.find(({ value }) => value.toString() === chip)?.key; + const [focusedItemIndex, setFocusedItemIndex] = React.useState( + null + ); + + const [activeItem, setActiveItem] = React.useState(null); + const textInputRef = React.useRef(); + const [inputValue, setInputValue] = React.useState(""); + + const getOptionKeyFromOptionValue = ( + optionValue: string | SelectOptionProps + ) => flatOptions.find((option) => option?.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 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 newFilterValue = filterValue + ? filterValue.filter((selection) => selection !== chipKey) + : filterValue; + + setFilterValue(newFilterValue); }; // Select expects "selections" to be an array of the "value" props from the relevant optionProps @@ -110,7 +117,9 @@ 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 = @@ -126,26 +135,207 @@ export const MultiselectFilterControl = ({ .filter(Boolean) : flatOptions .filter((o) => filter(o)) - .map((optionProps) => ( - + .map((optionProps, index) => ( + + {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 newFilterValue = filterValue ? [...filterValue, value] : [value]; + setFilterValue(newFilterValue); + } + + textInputRef.current?.focus(); + }; + + const handleMenuArrowKeys = (key: string) => { + if (isFilterDropdownOpen && Array.isArray(selectOptions)) { + let indexToFocus: number = focusedItemIndex ?? -1; + + if (key === "ArrowUp") { + indexToFocus = + indexToFocus <= 0 ? selectOptions.length - 1 : indexToFocus - 1; + } else if (key === "ArrowDown") { + indexToFocus = + indexToFocus >= selectOptions.length - 1 ? 0 : indexToFocus + 1; + } + + while (selectOptions[indexToFocus].isDisabled) { + indexToFocus = key === "ArrowUp" ? indexToFocus - 1 : indexToFocus + 1; + if (indexToFocus < 0) { + indexToFocus = selectOptions.length - 1; + } else if (indexToFocus >= selectOptions.length) { + indexToFocus = 0; + } + } + + setFocusedItemIndex(indexToFocus); + const focusedItem = selectOptions[indexToFocus]; + setActiveItem(`select-typeahead-${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.toLowerCase()) + ) + : []; + + if (!newSelectOptions.length) { + newSelectOptions = [ + { + key: "no-results", + isDisabled: true, + children: `No results found for "${inputValue}"`, + value: "No results", + }, + ]; + } + + if (!isFilterDropdownOpen) { + setIsFilterDropdownOpen(true); + } + } + + setSelectOptions(newSelectOptions); + setFocusedItemIndex(null); + setActiveItem(null); + }, [inputValue, isFilterDropdownOpen, category.selectOptions]); + + 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": + event.preventDefault(); + setSelectOptions(newSelectOptions); + setIsFilterDropdownOpen(true); + + if ( + isFilterDropdownOpen && + selectedItem && + selectedItem.value !== "no results" + ) { + setInputValue(""); + + const newFilterValue = [...(filterValue || [])]; + const optionValue = getOptionValueFromOptionKey(selectedItem.value); + + if (newFilterValue.includes(optionValue)) { + const indexToRemove = newFilterValue.indexOf(optionValue); + newFilterValue.splice(indexToRemove, 1); + } else { + newFilterValue.push(optionValue); + } + + setFilterValue(newFilterValue); + setIsFilterDropdownOpen(false); + } + + break; + case "Tab": + case "Escape": + setIsFilterDropdownOpen(false); + setActiveItem(null); + break; + case "ArrowUp": + case "ArrowDown": + event.preventDefault(); + handleMenuArrowKeys(event.key); + break; + } + }; + + const onTextInputChange = ( + _event: React.FormEvent, + value: string + ) => { + setInputValue(value); + }; + + const toggle = (toggleRef: React.Ref) => ( + { + setIsFilterDropdownOpen(!isFilterDropdownOpen); + }} + isExpanded={isFilterDropdownOpen} + 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 3e0ed1abb1..e8b6479dda 100644 --- a/client/src/app/components/FilterToolbar/SelectFilterControl.tsx +++ b/client/src/app/components/FilterToolbar/SelectFilterControl.tsx @@ -1,15 +1,15 @@ import * as React from "react"; -import { ToolbarFilter } from "@patternfly/react-core"; import { + MenuToggle, + MenuToggleElement, Select, + SelectList, SelectOption, - SelectOptionObject, -} from "@patternfly/react-core/deprecated"; + SelectOptionProps, + 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,29 +34,29 @@ 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() : ""); + optionValue: SelectOptionProps | undefined + ) => { + return optionValue ? optionValue.value : ""; + }; 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; + const getOptionValueFromOptionKey = ( + optionKey: string + ): SelectOptionProps => { + return ( + category.selectOptions.find((optionProps) => { + return optionProps.value === optionKey; + }) || { value: "", children: "", key: "" } + ); + }; - const onFilterSelect = (value: string | SelectOptionObject) => { - const optionKey = getOptionKeyFromOptionValue(value); - setFilterValue(optionKey ? [optionKey] : null); + const onFilterSelect = (value: string) => { + setFilterValue(value ? [value] : null); setIsFilterDropdownOpen(false); }; @@ -68,17 +68,29 @@ export const SelectFilterControl = ({ setFilterValue(newValue.length > 0 ? newValue : null); }; - // Select expects "selections" to be an array of the "value" props from the relevant optionProps - const selections = filterValue + const selections: SelectOptionProps[] = filterValue ? filterValue.map(getOptionValueFromOptionKey) - : null; + : []; const chips = selections ? selections.map(getChipFromOptionValue) : []; - const renderSelectOptions = (options: FilterSelectOptionProps[]) => - options.map((optionProps) => ( - - )); + const toggle = (toggleRef: React.Ref) => { + return ( + { + setIsFilterDropdownOpen(!isFilterDropdownOpen); + }} + isExpanded={isFilterDropdownOpen} + isDisabled={isDisabled || category.selectOptions.length === 0} + > + {filterValue || "Any"} + + ); + }; return ( ({ );