diff --git a/packages/common/src/components/ActionServiceDropdown/ActionServiceDropdown.tsx b/packages/common/src/components/ActionServiceDropdown/ActionServiceDropdown.tsx index 91222d3c1..f14a05126 100644 --- a/packages/common/src/components/ActionServiceDropdown/ActionServiceDropdown.tsx +++ b/packages/common/src/components/ActionServiceDropdown/ActionServiceDropdown.tsx @@ -4,6 +4,8 @@ import { useHistory } from 'react-router'; import { ActionService, ActionServiceProvider } from '@openshift-console/dynamic-plugin-sdk'; import { Dropdown, DropdownItem, DropdownToggle, KebabToggle } from '@patternfly/react-core'; +import { ToggleEventType } from '../../utils'; + export interface ActionServiceDropdownProps { /** The contextId of the `console.action/provider` extension to use */ contextId: string; @@ -67,12 +69,18 @@ const ActionsAsDropdown = ({ const history = useHistory(); const [isActionMenuOpen, setIsActionMenuOpen] = useState(false); const isPlain = variant === 'kebab'; + + const onToggle: (isExpanded: boolean, event: ToggleEventType) => void = (isExpanded) => { + setIsActionMenuOpen(isExpanded); + }; + const toggle = variant === 'kebab' ? ( - + ) : ( - {dropdownToggleText} + {dropdownToggleText} ); + return ( void = (event, value, isPlaceholder) => { + if (isPlaceholder) { + return; + } + // behave as Console's AutocompleteInput used i.e. to filter pods by label + if (!hasFilter(value)) { + addFilter(value); + } + setExpanded(false); + }; + + const onToggle: (isExpanded: boolean, event: ToggleEventType) => void = (isExpanded) => { + setExpanded(isExpanded); + }; + return ( { - if (isPlaceholder) { - return; - } - // behave as Console's AutocompleteInput used i.e. to filter pods by label - if (!hasFilter(option)) { - addFilter(option); - } - setExpanded(false); - }} + onSelect={onSelect} // intentionally keep the selections list empty // the select should pretend to be stateless // the selection is stored outside in a new chip selections={[]} placeholderText={placeholderLabel} isOpen={isExpanded} - onToggle={setExpanded} + onToggle={onToggle} onFilter={onFilter} shouldResetOnSelect={true} > diff --git a/packages/common/src/components/Filter/EnumFilter.tsx b/packages/common/src/components/Filter/EnumFilter.tsx index 7e6ef6e6d..824d749e3 100644 --- a/packages/common/src/components/Filter/EnumFilter.tsx +++ b/packages/common/src/components/Filter/EnumFilter.tsx @@ -9,7 +9,7 @@ import { ToolbarFilter, } from '@patternfly/react-core'; -import { localeCompare } from '../../utils'; +import { localeCompare, SelectEventType, SelectValueType, ToggleEventType } from '../../utils'; import { FilterTypeProps } from './types'; @@ -138,6 +138,21 @@ export const EnumFilter = ({ } }; + const onSelect: ( + event: SelectEventType, + value: SelectValueType, + isPlaceholder?: boolean, + ) => void = (event, value, isPlaceholder) => { + if (isPlaceholder) { + return; + } + hasFilter(value) ? deleteFilter(value) : addFilter(value); + }; + + const onToggle: (isExpanded: boolean, event: ToggleEventType) => void = (isExpanded) => { + setExpanded(isExpanded); + }; + return ( { - if (isPlaceholder) { - return; - } - hasFilter(option) ? deleteFilter(option) : addFilter(option); - }} + onSelect={onSelect} selections={selectedUniqueEnumLabels} placeholderText={placeholderLabel} isOpen={isExpanded} - onToggle={setExpanded} + onToggle={onToggle} > {uniqueEnumLabels.map((label) => ( diff --git a/packages/common/src/components/Filter/GroupedEnumFilter.tsx b/packages/common/src/components/Filter/GroupedEnumFilter.tsx index 2d546564e..616ad142d 100644 --- a/packages/common/src/components/Filter/GroupedEnumFilter.tsx +++ b/packages/common/src/components/Filter/GroupedEnumFilter.tsx @@ -9,7 +9,7 @@ import { ToolbarFilter, } from '@patternfly/react-core'; -import { EnumValue } from '../../utils'; +import { EnumValue, SelectEventType, SelectValueType, ToggleEventType } from '../../utils'; import { FilterTypeProps, InlineFilter } from './types'; @@ -107,6 +107,22 @@ export const GroupedEnumFilter = ({ return filteredGroups; }; + const onSelect: ( + event: SelectEventType, + value: SelectValueType, + isPlaceholder?: boolean, + ) => void = (event, value, isPlaceholder) => { + if (isPlaceholder) { + return; + } + const id = typeof value === 'string' ? value : (value as EnumValue).id; + hasFilter(id) ? deleteFilter(id) : addFilter(id); + }; + + const onToggle: (isExpanded: boolean, event: ToggleEventType) => void = (isExpanded) => { + setExpanded(isExpanded); + }; + return ( <> {/** @@ -141,19 +157,13 @@ export const GroupedEnumFilter = ({ variant={SelectVariant.checkbox} isGrouped aria-label={placeholderLabel} - onSelect={(event, option, isPlaceholder) => { - if (isPlaceholder) { - return; - } - const id = typeof option === 'string' ? option : (option as EnumValue).id; - hasFilter(id) ? deleteFilter(id) : addFilter(id); - }} + onSelect={onSelect} selections={supportedEnumValues .filter(({ id }) => selectedEnumIds.includes(id)) .map(toSelectOption)} placeholderText={placeholderLabel} isOpen={isExpanded} - onToggle={setExpanded} + onToggle={onToggle} hasInlineFilter={hasInlineFilter} onFilter={onFilter} > diff --git a/packages/common/src/components/FilterGroup/AttributeValueFilter.tsx b/packages/common/src/components/FilterGroup/AttributeValueFilter.tsx index d8623b08d..bbd05941a 100644 --- a/packages/common/src/components/FilterGroup/AttributeValueFilter.tsx +++ b/packages/common/src/components/FilterGroup/AttributeValueFilter.tsx @@ -9,6 +9,8 @@ import { ToolbarItem, } from '@patternfly/react-core'; +import { SelectEventType, SelectValueType, ToggleEventType } from '../../utils'; + import { FilterFromDef } from './FilterFromDef'; import { MetaFilterProps } from './types'; @@ -44,19 +46,27 @@ export const AttributeValueFilter = ({ const selectOptionToFilter = (selectedId) => fieldFilters.find(({ resourceFieldId }) => resourceFieldId === selectedId) ?? currentFilter; - const onFilterTypeSelect = (event, value, isPlaceholder) => { + const onFilterTypeSelect: ( + event: SelectEventType, + value: SelectValueType, + isPlaceholder?: boolean, + ) => void = (_event, value: IdOption, isPlaceholder) => { if (!isPlaceholder) { setCurrentFilter(selectOptionToFilter(value?.id)); setExpanded(!expanded); } }; + const onToggle: (isExpanded: boolean, event: ToggleEventType) => void = (isExpanded) => { + setExpanded(isExpanded); + }; + return (