@rh-support/cases 2.4.10-beta.6 → 2.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"CaseListFilters.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/CaseListFilters.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,OAAO,EAAE,0BAA0B,EAAE,4BAA4B,EAAE,MAAM,mBAAmB,CAAC;AAK7F,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAWxD,UAAU,MAAM;IACZ,YAAY,EAAE,0BAA0B,CAAC,YAAY,CAAC,CAAC;IACvD,gBAAgB,EAAE,OAAO,CAAC;IAC1B,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,CAAC,CAAC;IAC5C,eAAe,EAAE,mBAAmB,CAAC,MAAM,EAAE,CAAC,CAAC;IAC/C,iBAAiB,EAAE,mBAAmB,CAAC,MAAM,EAAE,CAAC,CAAC;IACjD,WAAW,EAAE,mBAAmB,CAAC,4BAA4B,CAAC,CAAC;CAClE;AAID,eAAO,MAAM,eAAe,uGAOzB,MAAM,gBA2ER,CAAC"}
+{"version":3,"file":"CaseListFilters.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/CaseListFilters.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,OAAO,EAAE,0BAA0B,EAAE,4BAA4B,EAAE,MAAM,mBAAmB,CAAC;AAE7F,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAWxD,UAAU,MAAM;IACZ,YAAY,EAAE,0BAA0B,CAAC,YAAY,CAAC,CAAC;IACvD,gBAAgB,EAAE,OAAO,CAAC;IAC1B,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,CAAC,CAAC;IAC5C,eAAe,EAAE,mBAAmB,CAAC,MAAM,EAAE,CAAC,CAAC;IAC/C,iBAAiB,EAAE,mBAAmB,CAAC,MAAM,EAAE,CAAC,CAAC;IACjD,WAAW,EAAE,mBAAmB,CAAC,4BAA4B,CAAC,CAAC;CAClE;AAID,eAAO,MAAM,eAAe,uGAOzB,MAAM,sBA2ER,CAAC"}

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

@@ -1,2 +1,13 @@
-export declare function CreatorSsoNameFilter(): JSX.Element;
+import React from 'react';
+export declare const getFullName: (contact: any) => string;
+export declare const getFilterValues: (contactList: any, own: any) => {
+    firstName: string;
+    lastName: string;
+    firstNameCustom: string;
+    lastNameCustom: string;
+    value: string;
+    label: string;
+}[];
+export declare const getSelectedListObj: (contactsList: any, filterInfo: any, own: any, t: any) => any[];
+export declare function CreatorSsoNameFilter(): React.JSX.Element;
 //# sourceMappingURL=CreatorSsoNameFilter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CreatorSsoNameFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/CreatorSsoNameFilter.tsx"],"names":[],"mappings":"AAmDA,wBAAgB,oBAAoB,gBAwSnC"}
+{"version":3,"file":"CreatorSsoNameFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/CreatorSsoNameFilter.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAYhF,eAAO,MAAM,WAAW,0BAIvB,CAAC;AAYF,eAAO,MAAM,eAAe;;;;;;;GAA6E,CAAC;AAE1G,eAAO,MAAM,kBAAkB,iEAyC9B,CAAC;AAEF,wBAAgB,oBAAoB,sBA4PnC"}

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

@@ -7,21 +7,26 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { accounts, contacts } from '@cee-eng/hydrajs';
-import { AsyncMultiDropDownList, MultiSelectDropDownList, useFetch } from '@rh-support/components';
+import { accounts } from '@cee-eng/hydrajs';
+import { Button, MenuToggle, Select, SelectGroup, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Truncate, } from '@patternfly/react-core';
+import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
+import { LoadingIndicator, useFetch, useSelectKeyboardNavigator } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
-import { getDropdownBtnPlaceholder, toOptions } from '@rh-support/utils';
+import { getDropdownBtnPlaceholder } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 import uniqBy from 'lodash/uniqBy';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { SolrKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
-import { useCaseListDispatchContext, useCaseListStateContext } from '../CaseListContext';
+import { useCaseListDispatchContext } from '../CaseListContext';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilters } from '../CaseListFilterReducer';
 import { setChipsNameSsoMap } from '../CaseListReducer';
-const getFullName = (contact) => {
+import InternalSsoNameFilter from './InternalSsoNameFilter';
+export const getFullName = (contact) => {
     return contact.fullNameCustom
         ? `${contact.firstNameCustom} ${contact.lastNameCustom}`
         : `${contact.firstName} ${contact.lastName}`;
@@ -34,49 +39,103 @@ const mapToObj = (arr) => arr.map((item) => ({
     value: item.ssoUsername,
     label: `${getFullName(item)} <${item.ssoUsername}>`,
 }));
-const getFilterValues = (contactList, own) => mapToObj(contactList).filter((o) => o.value !== own);
+export const getFilterValues = (contactList, own) => mapToObj(contactList).filter((o) => o.value !== own);
+export const getSelectedListObj = (contactsList, filterInfo, own, t) => {
+    const created = [...filterInfo[SolrKeys.createdBySsoUsername]].reduce((result, sso) => {
+        if (sso === own) {
+            result.push({ value: 'createdByMe', label: t('Cases created by me') });
+        }
+        else {
+            const contact = contactsList.find((item) => (item === null || item === void 0 ? void 0 : item.ssoUsername) === sso);
+            contact &&
+                result.push({
+                    value: contact.ssoUsername,
+                    label: `${getFullName(contact)} <${contact.ssoUsername}>`,
+                });
+            !contact &&
+                result.push({
+                    value: sso,
+                    label: '',
+                });
+        }
+        return result;
+    }, []);
+    const owned = [...filterInfo[SolrKeys.caseContactSSO]].reduce((result, sso) => {
+        if (sso === own) {
+            result.push({ value: 'ownedByMe', label: t('Cases owned by me') });
+        }
+        else {
+            const contact = contactsList.find((item) => item.ssoUsername === sso);
+            contact &&
+                result.push({
+                    value: contact.ssoUsername,
+                    label: `${getFullName(contact)} <${contact.ssoUsername}>`,
+                });
+            !contact &&
+                result.push({
+                    value: sso,
+                    label: '',
+                });
+        }
+        return result;
+    }, []);
+    const selected = uniqBy([...created, ...owned], 'value');
+    return selected;
+};
 export function CreatorSsoNameFilter() {
     const { t } = useTranslation();
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const dispatch = useContext(CaseListFilterDispatchContext);
     const { globalMetadataState: { loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
-    const { chipsNameSsoMap } = useCaseListStateContext();
     const CaseListDispatch = useCaseListDispatchContext();
     const own = loggedInUserRights.data.getSSOUsername();
-    const PER_PAGE = 200;
     const isExternalNonOrgAdmin = !loggedInUserRights.data.isInternal() && loggedInUserRights.data.isCustomerNonOrgAdmin();
-    const ASYNC_DROPDOWN_PAGE_SIZE = 10000;
     const { request: getExternalUserContactsList, isFetching: isFetchingExternalContacts } = useFetch(accounts.getAccountContacts, { propgateErrors: true });
-    const { request: getInternalUserContactsList, isFetching: isFetchingInternalContacts } = useFetch(contacts.getSFDCContacts, { propgateErrors: true });
-    const abortControllerRef = useRef(undefined);
+    const externalInputRef = useRef();
     const [externalContactList, setExternalContactList] = useState([]);
-    const [internalContactList, setInternalContactList] = useState([]);
-    const onFilterChange = (items) => {
-        const selectedItems = items.map((item) => item.value.value);
-        const caseCreated = selectedItems
-            .filter((o) => o !== 'ownedByMe')
-            .map((o) => (o === 'createdByMe' ? own : o));
-        const caseOwnedBy = selectedItems
-            .filter((o) => o !== 'createdByMe')
-            .map((o) => (o === 'ownedByMe' ? own : o));
-        const caseOwner = loggedInUserRights.data.isInternal() && caseOwnedBy.indexOf(own) !== -1 ? [own] : [];
-        updateFilters(dispatch, [
-            {
-                filterKey: SolrKeys.createdBySsoUsername,
-                values: caseCreated,
-            },
-            {
-                filterKey: SolrKeys.caseContactSSO,
-                values: caseOwnedBy,
-            },
-            {
-                filterKey: SolrKeys.caseOwner,
-                values: caseOwner,
-            },
-        ]);
+    const [isExternalOpen, setIsExternalOpen] = useState(false);
+    const [noResults, setNoResults] = useState(false);
+    const [externalQuery, setExternalQuery] = useState('');
+    const onSelectExternal = (contact) => {
+        if (isNull(contact) || isUndefined(contact))
+            return;
+        let list = [];
+        if (selectedExternalContacts.some((item) => item.value === contact.value)) {
+            list = selectedExternalContacts.filter((item) => item.value !== contact.value);
+        }
+        else {
+            list = [...selectedExternalContacts, contact];
+        }
+        onFilterChange(list);
     };
-    const onFilterChangeAsync = (items) => {
-        const selectedItems = items.map((item) => item.value.value);
+    const dropdownHeader = [
+        {
+            label: `${t('Cases created by me')}`,
+            value: 'createdByMe',
+        },
+        {
+            label: `${t('Cases owned by me')}`,
+            value: 'ownedByMe',
+        },
+    ];
+    const filteredOptions = useMemo(() => {
+        const filteredValues = getFilterValues(externalContactList, own);
+        const input = new RegExp(externalQuery, 'i');
+        const newOptions = filteredValues.filter((v) => input.test(v.label || ''));
+        setNoResults(isEmpty(newOptions));
+        return newOptions;
+    }, [externalContactList, own, externalQuery]);
+    const { onInputKeyDown, focusedItemIndex } = useSelectKeyboardNavigator({
+        list: [...dropdownHeader, ...filteredOptions],
+        isOpen: isExternalOpen,
+        setIsOpen: setIsExternalOpen,
+        onSelect: onSelectExternal,
+    });
+    const selectedExternalContacts = useMemo(() => getSelectedListObj(externalContactList, filterInfo, own, t), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [externalContactList, filterInfo, own]);
+    const onFilterChange = (items) => {
+        const selectedItems = items.map((item) => item.value);
         const caseCreated = selectedItems
             .filter((o) => o !== 'ownedByMe')
             .map((o) => (o === 'createdByMe' ? own : o));
@@ -98,111 +157,7 @@ export function CreatorSsoNameFilter() {
                 values: caseOwner,
             },
         ]);
-        // set name/sso pairs on state to be used in filter chip component
-        if (loggedInUserRights.data.isInternal()) {
-            const chipsNameSsoPairs = {};
-            items.forEach((item) => {
-                var _a, _b, _c, _d;
-                const sso = item.value.value;
-                if (sso !== 'ownedByMe' && sso !== 'createdByMe' && !chipsNameSsoMap[sso]) {
-                    chipsNameSsoPairs[sso] = {
-                        firstName: ((_a = item.value) === null || _a === void 0 ? void 0 : _a.firstName) || '',
-                        lastName: ((_b = item.value) === null || _b === void 0 ? void 0 : _b.lastName) || '',
-                        firstNameCustom: ((_c = item.value) === null || _c === void 0 ? void 0 : _c.firstNameCustom) || '',
-                        lastNameCustom: ((_d = item.value) === null || _d === void 0 ? void 0 : _d.lastNameCustom) || '',
-                    };
-                }
-            });
-            setChipsNameSsoMap(CaseListDispatch, chipsNameSsoPairs);
-        }
     };
-    const dropdownHeader = [
-        {
-            isNotSearchable: true,
-            label: `${t('Cases created by me')}`,
-            value: 'createdByMe',
-        },
-        {
-            isNotSearchable: true,
-            label: `${t('Cases owned by me')}`,
-            value: 'ownedByMe',
-        },
-        {
-            children: isExternalNonOrgAdmin || (externalContactList.length === 0 && internalContactList.length === 0) ? (React.createElement(React.Fragment, null)) : (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "pf-c-divider", role: "separator" }),
-                React.createElement("h3", { className: "subheading subheading-sm pf-u-pl-md" },
-                    React.createElement(Trans, null, "Created or owned by")))),
-            isNotSearchable: true,
-            isNonActionable: true,
-            isNotSelectable: true,
-        },
-    ];
-    const getSelectedListObj = (contactsList) => {
-        const created = [...filterInfo[SolrKeys.createdBySsoUsername]].reduce((result, sso) => {
-            if (sso === own) {
-                result.push({ value: 'createdByMe', label: t('Cases created by me') });
-            }
-            else {
-                const contact = contactsList.find((item) => (item === null || item === void 0 ? void 0 : item.ssoUsername) === sso);
-                contact &&
-                    result.push({
-                        value: contact.ssoUsername,
-                        label: `${getFullName(contact)} <${contact.ssoUsername}>`,
-                    });
-                !contact &&
-                    result.push({
-                        value: sso,
-                        label: '',
-                    });
-            }
-            return result;
-        }, []);
-        const owned = [...filterInfo[SolrKeys.caseContactSSO]].reduce((result, sso) => {
-            if (sso === own) {
-                result.push({ value: 'ownedByMe', label: t('Cases owned by me') });
-            }
-            else {
-                const contact = contactsList.find((item) => item.ssoUsername === sso);
-                contact &&
-                    result.push({
-                        value: contact.ssoUsername,
-                        label: `${getFullName(contact)} <${contact.ssoUsername}>`,
-                    });
-                !contact &&
-                    result.push({
-                        value: sso,
-                        label: '',
-                    });
-            }
-            return result;
-        }, []);
-        const selected = uniqBy([...created, ...owned], 'value');
-        return toOptions(selected, {
-            labelKey: 'label',
-        });
-    };
-    const onSearchAsync = (query) => __awaiter(this, void 0, void 0, function* () {
-        if (query == null) {
-            return;
-        }
-        if (abortControllerRef.current !== undefined) {
-            // Cancel the previous request
-            abortControllerRef.current.abort();
-        }
-        // recreate a new AbortController for each call
-        let controller = new AbortController();
-        abortControllerRef.current = controller;
-        const queryParams = {
-            internal: false,
-            limit: ASYNC_DROPDOWN_PAGE_SIZE,
-            nameLookup: query,
-        };
-        const response = yield getInternalUserContactsList(queryParams, controller.signal);
-        const contacts = response && response.items && response.items.length !== 0
-            ? response.items.filter((c) => !isEmpty(c.ssoUsername))
-            : [];
-        setInternalContactList(contacts);
-    });
     // fetch data on load for external users
     useEffect(() => {
         if (loggedInUserRights.data.isInternal())
@@ -221,25 +176,46 @@ export function CreatorSsoNameFilter() {
         fetchStrataAccountUsers();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dispatch, isExternalNonOrgAdmin, loggedInUserRights.data]);
-    const asyncMultiDropDownList = [
-        ...dropdownHeader,
-        ...getFilterValues(internalContactList, own),
-    ];
-    const multiDropDownList = [
-        ...dropdownHeader,
-        ...getFilterValues(externalContactList, own),
-    ];
-    return (React.createElement(React.Fragment, null, !loggedInUserRights.data.isInternal() ? (React.createElement(MultiSelectDropDownList, { placeholder: getDropdownBtnPlaceholder(t('Search for a name'), getSelectedListObj(externalContactList).map((i) => i.label), ' ', multiDropDownList.length, t('All contacts')), id: "external-ssousername-filter", "data-tracking-id": "external-ssousername-filter", selectedItems: getSelectedListObj(externalContactList), list: toOptions(multiDropDownList, {
-            labelKey: 'label',
-            childrenKey: 'children',
-            nonSearchableItemKey: 'isNotSearchable',
-            nonActionableItemKey: 'isNonActionable',
-            nonSelectableItemKey: 'isNotSelectable',
-        }), title: t(filterNamesMap['usernameFilterTitle']), onChange: onFilterChange, emptyListLabel: isExternalNonOrgAdmin ? '' : t('No results found'), searchable: true, label: t(filterNamesMap['usernameFilterTitle']), isLoadingList: isFetchingExternalContacts })) : (React.createElement(AsyncMultiDropDownList, { placeholder: getDropdownBtnPlaceholder(t('Search for a name'), getSelectedListObj(internalContactList).map((i) => i.label), ' ', asyncMultiDropDownList.length, t('All contacts')), id: "internal-ssousername-async-filter", "data-tracking-id": "internal-ssousername-async-filter", selectedItems: getSelectedListObj(internalContactList), list: toOptions(asyncMultiDropDownList, {
-            labelKey: 'label',
-            childrenKey: 'children',
-            nonSearchableItemKey: 'isNotSearchable',
-            nonActionableItemKey: 'isNonActionable',
-            nonSelectableItemKey: 'isNotSelectable',
-        }), title: t(filterNamesMap['usernameFilterTitle']), onChange: onFilterChangeAsync, delay: 300, useCache: true, paginate: true, emptyListLabel: t('No results found'), maxResults: PER_PAGE, onSearch: onSearchAsync, minLength: 0, label: t(filterNamesMap['usernameFilterTitle']), isLoadingList: isFetchingInternalContacts }))));
+    const filteredExternalList = useMemo(() => {
+        return [
+            ...(noResults && !isExternalNonOrgAdmin
+                ? [
+                    React.createElement("div", { key: "no-results", className: "pf-v5-u-p-sm" },
+                        React.createElement(Trans, null, "No results found")),
+                ]
+                : []),
+            ...dropdownHeader.map((contact, index) => (React.createElement(SelectOption, { key: contact.value, isFocused: focusedItemIndex === index, value: contact, hasCheckbox: true, isSelected: selectedExternalContacts.some((c) => c.value === contact.value) },
+                React.createElement(Truncate, { content: contact.label })))),
+            ...(!isEmpty(filteredOptions)
+                ? [
+                    React.createElement("div", { className: "pf-v5-c-divider", role: "separator", key: "separator" }),
+                    React.createElement(SelectGroup, { key: "created-or-owned-by-accounts-group" },
+                        React.createElement("h6", { className: "pf-v5-u-pl-md" },
+                            React.createElement(Trans, null, "Created or owned by")),
+                        filteredOptions.map((contact, index) => (React.createElement(SelectOption, { key: contact.value, isFocused: focusedItemIndex === index + dropdownHeader.length, value: contact, hasCheckbox: true, isSelected: selectedExternalContacts.some((c) => c.value === contact.value) },
+                            React.createElement(Truncate, { content: contact.label }))))),
+                ]
+                : []),
+        ];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filteredOptions, selectedExternalContacts, focusedItemIndex, noResults]);
+    const onExternalQueryChange = (_v, query) => {
+        setExternalQuery(query);
+    };
+    const onExternalToggle = (e) => {
+        e.stopPropagation();
+        setIsExternalOpen((pre) => !pre);
+    };
+    const externalToggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "typeahead", onClick: onExternalToggle, innerRef: toggleRef, isExpanded: isExternalOpen, isFullWidth: true },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, { value: externalQuery, onClick: onExternalToggle, onKeyDown: onInputKeyDown, placeholder: isExternalNonOrgAdmin
+                    ? t('Username')
+                    : getDropdownBtnPlaceholder(t('Search for a name'), selectedExternalContacts.map((i) => i.label), ' ', filteredOptions.length + dropdownHeader.length, t('All selected')), 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 }))))))));
+    const customToggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: onExternalToggle, isExpanded: isExternalOpen, style: { width: '100%' } }, getDropdownBtnPlaceholder(t('Username'), selectedExternalContacts.map((i) => i.label), ' ', dropdownHeader.length, t('All selected'))));
+    return (React.createElement("div", null,
+        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: isExternalNonOrgAdmin ? customToggle : 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/CreatorSsoNameFilterChip.d.ts

@@ -1,2 +1,3 @@
-export declare function CreatorSsoNameFilterChip(): JSX.Element;
+import React from 'react';
+export declare function CreatorSsoNameFilterChip(): React.JSX.Element;
 //# sourceMappingURL=CreatorSsoNameFilterChip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CreatorSsoNameFilterChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/CreatorSsoNameFilterChip.tsx"],"names":[],"mappings":"AAeA,wBAAgB,wBAAwB,gBA2HvC"}
+{"version":3,"file":"CreatorSsoNameFilterChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/CreatorSsoNameFilterChip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAU/D,wBAAgB,wBAAwB,sBA2HvC"}

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

@@ -103,7 +103,7 @@ export function CreatorSsoNameFilterChip() {
     return (React.createElement("div", { className: "filter-chip" },
         React.createElement("span", { className: "filter-chip__heading" },
             React.createElement(Trans, null, filterNamesMap['usernameFilterTitle'])),
-        React.createElement(ChipGroup, { numChips: 7, className: "pf-c-chip-group" },
+        React.createElement(ChipGroup, { numChips: 7, className: "pf-v5-c-chip-group" },
             own &&
                 filterInfo &&
                 filterInfo[SolrKeys.createdBySsoUsername] &&

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

@@ -1,2 +1,3 @@
-export declare function GroupsFilter(): JSX.Element;
+import React from 'react';
+export declare function GroupsFilter(): React.JSX.Element;
 //# sourceMappingURL=GroupsFilter.d.ts.map

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":"AAwBA,wBAAgB,YAAY,gBA6D3B"}
+{"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,158 @@ 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 = (e) => {
+        e.stopPropagation();
+        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-c-divider", role: "separator" }),
-                React.createElement(Link, { className: "cta cta-link pf-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, { className: "case-group-filter" }),
+                    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/components/case-list/case-list-filters/InternalSsoNameFilter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export default function InternalSsoNameFilter(): React.JSX.Element;
+//# sourceMappingURL=InternalSsoNameFilter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalSsoNameFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/InternalSsoNameFilter.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAUhF,MAAM,CAAC,OAAO,UAAU,qBAAqB,sBA+R5C"}