@rh-support/cases 2.1.69 → 2.1.70

package/lib/esm/components/case-list/case-list-filters/AccountsBookmarkedGroupFilter.js

@@ -98,6 +98,6 @@ export function AccountsBookmarkedGroupFilter(props) {
         return null;
     }
     return (React.createElement("div", { className: "pf-v5-c-select" },
-        React.createElement("label", { htmlFor: "case-list-group-filter" }, canAccessManagedAccounts ? t('Accounts') : t(filterNamesMap[SolrKeys.accountNumber])),
-        React.createElement(Select, { variant: SelectVariant.typeaheadMulti, onToggle: (_event, open) => onBookmarksToggle(open), onSelect: onBookmarksSelect, onClear: onBookmarksClear, isOpen: isOpen, onFilter: onBookmarksFilter, placeholderText: getDropdownBtnPlaceholder(t(canAccessManagedAccounts ? 'Select an account' : 'Search for a bookmark'), canAccessManagedAccounts ? selectedAccounts : selectedBookmarks, '', dropdownOptions.length, canAccessManagedAccounts ? t('All accounts') : t('All bookmarks')), "data-tracking-id": "accounts-filter", id: "case-list-group-filter" }, getBookmarksOptions(dropdownOptions))));
+        React.createElement("label", { htmlFor: "case-list-account-filter", className: "case-list-account-filter-label" }, canAccessManagedAccounts ? t('Accounts') : t(filterNamesMap[SolrKeys.accountNumber])),
+        React.createElement(Select, { variant: SelectVariant.typeaheadMulti, onToggle: (_event, open) => onBookmarksToggle(open), onSelect: onBookmarksSelect, onClear: onBookmarksClear, isOpen: isOpen, onFilter: onBookmarksFilter, placeholderText: getDropdownBtnPlaceholder(t(canAccessManagedAccounts ? 'Select an account' : 'Search for a bookmark'), canAccessManagedAccounts ? selectedAccounts : selectedBookmarks, '', dropdownOptions.length, canAccessManagedAccounts ? t('All accounts') : t('All bookmarks')), "data-tracking-id": "accounts-filter", id: "case-list-account-filter" }, getBookmarksOptions(dropdownOptions))));
 }

package/lib/esm/components/case-list/case-list-filters/CreatorSsoNameFilter.js

@@ -209,7 +209,7 @@ export function CreatorSsoNameFilter() {
             React.createElement(TextInputGroupMain, { value: externalQuery, onClick: onExternalToggle, onKeyDown: onInputKeyDown, placeholder: getDropdownBtnPlaceholder(t('Search for a name'), selectedExternalContacts.map((i) => i.label), ' ', filteredOptions.length + dropdownHeader.length, t('All contacts')), onChange: onExternalQueryChange, isExpanded: isExternalOpen, innerRef: externalInputRef, "aria-controls": "external-ssousername-filter", role: "combobox" }),
             React.createElement(TextInputGroupUtilities, null, !isEmpty(externalQuery) && (React.createElement(Button, { variant: "plain", onClick: () => setExternalQuery(''), isDisabled: isFetchingExternalContacts, "aria-label": t('Clear') }, isFetchingExternalContacts ? (React.createElement(LoadingIndicator, { show: true, size: "sm" })) : (React.createElement(TimesCircleIcon, { "aria-hidden": true }))))))));
     return (React.createElement("div", null,
-        React.createElement("label", { htmlFor: "case-list-username-filter" },
+        React.createElement("label", { htmlFor: "case-list-username-filter", className: "case-list-username-filter-label" },
             React.createElement(Trans, null, filterNamesMap['usernameFilterTitle'])),
         !loggedInUserRights.data.isInternal() ? (React.createElement(Select, { id: "external-ssousername-filter", "data-tracking-id": "external-ssousername-filter", isOpen: isExternalOpen, onOpenChange: () => setIsExternalOpen(false), toggle: externalToggle, popperProps: { direction: 'down', enableFlip: false }, isScrollable: true, onSelect: (_e, v) => onSelectExternal(v) },
             React.createElement(SelectList, null, filteredExternalList))) : (React.createElement(InternalSsoNameFilter, null))));

package/lib/esm/components/case-list/case-list-filters/GroupsFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/GroupsFilter.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAmB1C,wBAAgB,YAAY,sBA6D3B"}
+{"version":3,"file":"GroupsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/GroupsFilter.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAShF,wBAAgB,YAAY,sBA2P3B"}

package/lib/esm/components/case-list/case-list-filters/GroupsFilter.js

@@ -1,11 +1,13 @@
-import { MultiSelectDropDownList } from '@rh-support/components';
+import { Button, Divider, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { ability, resourceActions, resources } from '@rh-support/user-permissions';
-import { getDropdownBtnPlaceholder, toOptions } from '@rh-support/utils';
-import React, { useContext } from 'react';
+import { getDropdownBtnPlaceholder } from '@rh-support/utils';
+import isEmpty from 'lodash/isEmpty';
+import isUndefined from 'lodash/isUndefined';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { FILTER_SEARCHABLE_MODE_LIMIT } from '../../../enums/caseSearch';
 import { SolrKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
@@ -15,30 +17,157 @@ export function GroupsFilter() {
     const { globalMetadataState: { caseGroups }, } = useContext(GlobalMetadataStateContext);
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const dispatch = useContext(CaseListFilterDispatchContext);
+    const [inputValue, setInputValue] = useState('');
+    const [focusedItemIndex, setFocusedItemIndex] = useState(null);
+    const [activeItem, setActiveItem] = useState(null);
+    const list = [
+        ...(caseGroups.data ? caseGroups === null || caseGroups === void 0 ? void 0 : caseGroups.data.map((group) => ({ value: group.name, key: group.groupNum })) : []),
+    ];
+    const [selectOptions, setSelectOptions] = useState(list);
     const canViewManageTab = ability.can(resourceActions.READ, resources.MANAGE);
     const canViewCaseGroups = ability.can(resourceActions.READ, resources.CASE_GROUPS) && canViewManageTab;
-    const onGroupFilterChange = (selectedGroups) => {
-        selectedGroups = selectedGroups.map((i) => i.value);
-        updateFilter(dispatch, { filterKey: SolrKeys.group, values: selectedGroups });
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedItems, setSelectedItems] = useState({});
+    const textInputRef = useRef();
+    const onToggleClick = () => {
+        setIsOpen(!isOpen);
     };
-    const isFilterSearchable = caseGroups.data && caseGroups.data.length > FILTER_SEARCHABLE_MODE_LIMIT;
-    const list = [
-        ...(caseGroups.data ? caseGroups.data.map((group) => ({ value: group.name, key: group.groupNum })) : []),
-        {
-            children: canViewCaseGroups ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "pf-v5-c-divider", role: "separator" }),
-                React.createElement(Link, { className: "cta cta-link pf-v5-c-select__menu-item", to: "/manage/groups" },
-                    React.createElement(Trans, null, "Manage groups")))) : (React.createElement(React.Fragment, null)),
-            isNotSearchable: true,
-            isNonActionable: true,
-            isNotSelectable: true,
-        },
-    ];
-    return (React.createElement(MultiSelectDropDownList, { placeholder: getDropdownBtnPlaceholder(t('Select a group'), filterInfo[SolrKeys.group], ' ', (caseGroups.data || []).length, t('All selected')), "data-tracking-id": "groups-filter", id: "case-list-group-filter", title: t(filterNamesMap[SolrKeys.group]), label: t(filterNamesMap[SolrKeys.group]), searchable: isFilterSearchable, onChange: onGroupFilterChange, selectedItems: toOptions(filterInfo[SolrKeys.group], { labelKey: 'value' }), list: toOptions(list, {
-            labelKey: 'value',
-            childrenKey: 'children',
-            nonSearchableItemKey: 'isNotSearchable',
-            nonActionableItemKey: 'isNonActionable',
-            nonSelectableItemKey: 'isNotSelectable',
-        }) }));
+    const onSelect = (option) => {
+        const prevSelectedGroups = Object.keys(selectedItems).filter((item) => selectedItems[item] && item);
+        if (selectedItems[option.value]) {
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: !prevData[option.value] })));
+            const indexOfGroup = prevSelectedGroups.indexOf(option.value);
+            prevSelectedGroups.splice(indexOfGroup, 1);
+        }
+        else {
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: true })));
+            prevSelectedGroups.push(option.value);
+        }
+        const mapValueToKey = (value) => {
+            const selectedItem = list.find((item) => item.value === value);
+            return selectedItem;
+        };
+        const updatedFilterValues = prevSelectedGroups.map((item) => mapValueToKey(item));
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.group,
+            values: updatedFilterValues,
+        });
+    };
+    const handleMenuArrowKeys = (key) => {
+        let indexToFocus;
+        if (isOpen) {
+            if (key === 'ArrowUp') {
+                // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+                if (focusedItemIndex === null || focusedItemIndex === 0) {
+                    indexToFocus = (list === null || list === void 0 ? void 0 : list.length) - 1;
+                }
+                else {
+                    indexToFocus = focusedItemIndex - 1;
+                }
+            }
+            if (key === 'ArrowDown') {
+                // When no index is set or at the last index, focus to the first, otherwise increment focus index
+                if (focusedItemIndex === null || focusedItemIndex === (list === null || list === void 0 ? void 0 : list.length) - 1) {
+                    indexToFocus = 0;
+                }
+                else {
+                    indexToFocus = focusedItemIndex + 1;
+                }
+            }
+            setFocusedItemIndex(indexToFocus);
+            const focusedItem = list[indexToFocus];
+            setActiveItem(`select-multi-typeahead-checkbox-${focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value.replace(' ', '-')}`);
+        }
+    };
+    const onInputKeyDown = (event) => {
+        const focusedItem = focusedItemIndex ? list[focusedItemIndex] : list[0];
+        switch (event.key) {
+            // Select the first available option
+            case 'Enter':
+                if (!isOpen) {
+                    setIsOpen((prevIsOpen) => !prevIsOpen);
+                }
+                else if (isOpen && (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value) !== 'no results') {
+                    onSelect(focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value);
+                }
+                break;
+            case 'Tab':
+            case 'Escape':
+                setIsOpen(false);
+                setActiveItem(null);
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                event.preventDefault();
+                handleMenuArrowKeys(event.key);
+                break;
+        }
+    };
+    const onTextInputChange = (_event, value) => {
+        setInputValue(value);
+    };
+    const placeholder = getDropdownBtnPlaceholder(t('Select a group'), filterInfo[SolrKeys.group], '', (caseGroups.data || []).length, t('All selected'));
+    const onClick = () => {
+        var _a;
+        setInputValue('');
+        setSelectedItems({});
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.group,
+            values: [],
+        });
+        (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "typeahead", onClick: onToggleClick, innerRef: toggleRef, isExpanded: isOpen, isFullWidth: true },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, Object.assign({ value: inputValue, onClick: onToggleClick, onChange: onTextInputChange, onKeyDown: onInputKeyDown, id: "multi-typeahead-select-checkbox-input", autoComplete: "off", innerRef: textInputRef, placeholder: placeholder }, (activeItem && { 'aria-activedescendant': activeItem }), { role: "combobox", isExpanded: isOpen, "aria-controls": "select-multi-typeahead-checkbox-listbox" })),
+            Object.keys(selectedItems).filter((key) => selectedItems[key] === true).length ? (React.createElement(TextInputGroupUtilities, null,
+                React.createElement(Button, { variant: "plain", onClick: onClick, "aria-label": "Clear input value" },
+                    React.createElement(TimesIcon, { "aria-hidden": true })))) : (''))));
+    const dropdownOptions = useMemo(() => {
+        return (!isEmpty(selectOptions) ? selectOptions : list).map((option, index) => !isUndefined(option.value) && (React.createElement(SelectOption, { key: option.key, value: option, hasCheckbox: true, isSelected: selectedItems[option.value], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-multi-typeahead-${option.value.replace(' ', '-')}` }, option.value)));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedItems, caseGroups === null || caseGroups === void 0 ? void 0 : caseGroups.data, selectOptions, focusedItemIndex]);
+    useEffect(() => {
+        let newSelectOptions = list;
+        // Filter menu items based on the text input value when one exists
+        if (inputValue) {
+            newSelectOptions = list.filter((option) => String(option === null || option === void 0 ? void 0 : option.value).toLowerCase().startsWith(inputValue.toLowerCase()));
+            // When no options are found after filtering, display 'No results found'
+            if (!newSelectOptions.length) {
+                newSelectOptions = [{ isDisabled: false, children: `No results found` }];
+            }
+            // Open the menu when the input value changes and the new value is not empty
+            if (!isOpen) {
+                setIsOpen(true);
+            }
+        }
+        setSelectOptions(newSelectOptions);
+        setFocusedItemIndex(null);
+        setActiveItem(null);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputValue]);
+    useEffect(() => {
+        var _a;
+        if (isEmpty(filterInfo[SolrKeys.group])) {
+            setSelectedItems({});
+        }
+        else {
+            const selectedGroups = (_a = filterInfo[SolrKeys.group]) === null || _a === void 0 ? void 0 : _a.reduce((selection, group) => {
+                selection[group === null || group === void 0 ? void 0 : group.value] = true;
+                return selection;
+            }, {});
+            setSelectedItems(selectedGroups);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterInfo[SolrKeys.group]]);
+    return (React.createElement("div", { className: "group-filter" },
+        React.createElement("label", { htmlFor: "case-list-group-filter", className: "pf-v5-u-mb-sm group-filter-label" }, t(filterNamesMap[SolrKeys.group])),
+        React.createElement("div", { className: "pf-v5-c-select" },
+            React.createElement(Select, { role: "menu", "data-tracking-id": "groups-filter", id: "case-list-group-filter", title: t(filterNamesMap[SolrKeys.group]), isOpen: isOpen, selected: selectedItems, onSelect: (_e, v) => onSelect(v), onOpenChange: (nextOpen) => setIsOpen(nextOpen), popperProps: { direction: 'down', enableFlip: false }, toggle: toggle, isScrollable: true },
+                React.createElement(SelectList, null, dropdownOptions),
+                canViewCaseGroups && (React.createElement(React.Fragment, null,
+                    React.createElement(Divider, null),
+                    React.createElement(SelectList, null,
+                        React.createElement(Link, { className: "cta cta-link pf-v5-c-select__menu-item", to: "/manage/groups" },
+                            React.createElement(Trans, null, "Manage groups")))))))));
 }

package/lib/esm/scss/_pf-overrides.scss

@@ -9,9 +9,28 @@
     .pf-v5-c-select__menu {
         z-index: 1;
     }
+    li.pf-v5-c-menu__list-item {
+        font-size: 16px;
+        font-weight: 400;
+    }
 }
 
 .pf-v5-c-menu__group-title {
     margin: 0;
     padding: 0;
 }
+
+label.pf-v5-u-mb-sm.group-filter-label,
+.case-list-account-filter-label,
+.case-list-username-filter-label {
+    font-size: 14px !important;
+}
+
+.group-filter {
+    span.pf-v5-c-menu-toggle__text {
+        color: var(--pf-v5-global--palette--black-600);
+    }
+    #case-list-group-filter {
+        z-index: 9 !important;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/cases",
-    "version": "2.1.69",
+    "version": "2.1.70",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -43,8 +43,8 @@
         "@patternfly/patternfly": "5.1.0",
         "@patternfly/react-core": "5.1.1",
         "@patternfly/react-table": "5.1.1",
-        "@rh-support/components": "2.1.53",
-        "@rh-support/react-context": "2.1.59",
+        "@rh-support/components": "2.1.54",
+        "@rh-support/react-context": "2.1.60",
         "@rh-support/types": "2.0.3",
         "@rh-support/user-permissions": "2.1.39",
         "@rh-support/utils": "2.1.29",
@@ -96,5 +96,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "d579286a00d09356cd07729b5750176ad8e3c090"
+    "gitHead": "acb84e1dd7cb6d68a81c0a0871e5a203b6d7a67b"
 }