@rh-support/cases 2.6.219 → 2.6.227

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

@@ -1,16 +1,19 @@
 import { AbilityContext, CaseListFields, resourceActions, resources } from '@rh-support/user-permissions';
+import get from 'lodash/get';
 import React, { useContext } from 'react';
+import { SolrKeys } from '../../../enums/filters';
 import { AccountsBookmarkedGroupFilter } from './AccountsBookmarkedGroupFilter';
 import { AccountsFilter } from './AccountsFilter';
 import { AdditionalFilters } from './AdditionalFilters';
-import { CaseLabelsFilter } from './CaseLabelsFilter';
 import { CreatorSsoNameFilter } from './CreatorSsoNameFilter';
 import { GroupsFilter } from './GroupsFilter';
 import { ProductsFilter } from './ProductsFilter';
 import { SeverityFilter } from './SeverityFilter';
 import { StatusFilter } from './StatusFilter';
 import { TypeFilter } from './TypeFilter';
-export const CaseListFilters = ({ allCaseTypes, allCaseSeverities, allCaseStatuses, allProducts }) => {
+// Adding a new filter here? Make sure you add in caseSearchUtils also so that
+// it get included in the solr search query fq parameter
+export const CaseListFilters = ({ filterValues, allCaseTypes, allCaseSeverities, allCaseStatuses, allProducts, isSolrSearchDown, }) => {
     var _a, _b;
     const ability = useContext(AbilityContext);
     const canReadAccountFilter = ability.can(resourceActions.READ, resources.ACCOUNTS_FILTER);
@@ -26,17 +29,13 @@ export const CaseListFilters = ({ allCaseTypes, allCaseSeverities, allCaseStatus
     const canAccessTypeFilter = ability.can(resourceActions.PATCH, resources.CASE_LIST, CaseListFields.TYPE_FILTER);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "filter-group" },
-            canReadAccountFilter && React.createElement(AccountsFilter, { canReadBookmarkAccounts: canReadAccountFilter }),
-            (canReadBookmarkAccounts || canAccessManagedAccounts) && (React.createElement(AccountsBookmarkedGroupFilter, { canManageBookmarkAccounts: canManageBookmarkAccounts, canReadBookmarkAccounts: canReadBookmarkAccounts, canAccessManagedAccounts: canAccessManagedAccounts })),
+            !isSolrSearchDown && canReadAccountFilter && (React.createElement(AccountsFilter, { canReadBookmarkAccounts: canReadAccountFilter })),
+            !isSolrSearchDown && (canReadBookmarkAccounts || canAccessManagedAccounts) && (React.createElement(AccountsBookmarkedGroupFilter, { canManageBookmarkAccounts: canManageBookmarkAccounts, canReadBookmarkAccounts: canReadBookmarkAccounts, canAccessManagedAccounts: canAccessManagedAccounts })),
             canAccessGroupsFilter && React.createElement(GroupsFilter, null),
-            React.createElement(CaseLabelsFilter, null),
-            canAccessProductsFilter && (React.createElement(ProductsFilter, { allProducts: ((_b = (_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult) === null || _b === void 0 ? void 0 : _b.map((p) => ({
-                    name: p.product,
-                    productId: p.productId,
-                }))) || [] })),
-            canAccessSeverityFilter && React.createElement(SeverityFilter, { allCaseSeverities: allCaseSeverities.data }),
-            canAccessStatusFilter && React.createElement(StatusFilter, { allCaseStatuses: allCaseStatuses.data }),
-            canAccessTypeFilter && React.createElement(TypeFilter, { allCaseTypes: allCaseTypes.data }),
-            canAccessCreatorFilter && React.createElement(CreatorSsoNameFilter, null),
-            canAccessAdditionalFilter && React.createElement(AdditionalFilters, null))));
+            canAccessProductsFilter && (React.createElement(ProductsFilter, { filterValues: get(filterValues, SolrKeys.product, []), isSolrSearchDown: isSolrSearchDown, allProducts: ((_b = (_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult) === null || _b === void 0 ? void 0 : _b.map((p) => p.product)) || [] })),
+            canAccessSeverityFilter && (React.createElement(SeverityFilter, { filterValues: get(filterValues, SolrKeys.severity, []), isSolrSearchDown: isSolrSearchDown, allCaseSeverities: allCaseSeverities.data })),
+            canAccessStatusFilter && (React.createElement(StatusFilter, { filterValues: get(filterValues, SolrKeys.status, []), allCaseStatuses: allCaseStatuses.data, isSolrSearchDown: isSolrSearchDown })),
+            !isSolrSearchDown && canAccessTypeFilter && React.createElement(TypeFilter, { allCaseTypes: allCaseTypes.data }),
+            !isSolrSearchDown && canAccessCreatorFilter && React.createElement(CreatorSsoNameFilter, null),
+            !isSolrSearchDown && canAccessAdditionalFilter && React.createElement(AdditionalFilters, null))));
 };

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":"AAuBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAYhF,eAAO,MAAM,WAAW,GAAI,YAAO,WAIlC,CAAC;AAYF,eAAO,MAAM,eAAe,GAAI,gBAAW,EAAE,QAAG;;;;;;;GAAyD,CAAC;AAE1G,eAAO,MAAM,kBAAkB,GAAI,iBAAY,EAAE,eAAU,EAAE,QAAG,EAAE,MAAC,UAyClE,CAAC;AAEF,wBAAgB,oBAAoB,sBAiQnC"}
+{"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,GAAI,YAAO,WAIlC,CAAC;AAYF,eAAO,MAAM,eAAe,GAAI,gBAAW,EAAE,QAAG;;;;;;;GAAyD,CAAC;AAE1G,eAAO,MAAM,kBAAkB,GAAI,iBAAY,EAAE,eAAU,EAAE,QAAG,EAAE,MAAC,UAyClE,CAAC;AAEF,wBAAgB,oBAAoB,sBA8PnC"}

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

@@ -7,12 +7,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useApolloClient } from '@apollo/client/react';
+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, useSelectKeyboardNavigator } from '@rh-support/components';
+import { LoadingIndicator, useFetch, useSelectKeyboardNavigator } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
-import { fetchLoggedInUserAccountContactsFromGraphQL, getDropdownBtnPlaceholder } 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';
@@ -84,14 +84,13 @@ export const getSelectedListObj = (contactsList, filterInfo, own, t) => {
 };
 export function CreatorSsoNameFilter() {
     const { t } = useTranslation();
-    const apolloClient = useApolloClient();
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const dispatch = useContext(CaseListFilterDispatchContext);
     const { globalMetadataState: { loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
     const CaseListDispatch = useCaseListDispatchContext();
     const own = loggedInUserRights.data.getSSOUsername();
     const isExternalNonOrgAdmin = !loggedInUserRights.data.isInternal() && loggedInUserRights.data.isCustomerNonOrgAdmin();
-    const [isFetchingExternalContacts, setIsFetchingExternalContacts] = useState(false);
+    const { request: getExternalUserContactsList, isFetching: isFetchingExternalContacts } = useFetch(accounts.getAccountContacts, { propgateErrors: true });
     const externalInputRef = useRef();
     const [externalContactList, setExternalContactList] = useState([]);
     const [isExternalOpen, setIsExternalOpen] = useState(false);
@@ -164,25 +163,19 @@ export function CreatorSsoNameFilter() {
         if (loggedInUserRights.data.isInternal())
             return;
         const fetchStrataAccountUsers = () => __awaiter(this, void 0, void 0, function* () {
-            setIsFetchingExternalContacts(true);
-            try {
-                const externalContacts = isExternalNonOrgAdmin
-                    ? []
-                    : yield fetchLoggedInUserAccountContactsFromGraphQL(apolloClient);
-                const chipsNameSsoPairs = externalContacts.reduce((result, item) => {
-                    result[item.ssoUsername] = { firstName: item.firstName || '', lastName: item.lastName || '' };
-                    return result;
-                }, {});
-                setChipsNameSsoMap(CaseListDispatch, chipsNameSsoPairs);
-                setExternalContactList(externalContacts);
-            }
-            finally {
-                setIsFetchingExternalContacts(false);
-            }
+            const externalContacts = isExternalNonOrgAdmin
+                ? []
+                : yield getExternalUserContactsList(loggedInUserRights.data.getAccountNumber());
+            const chipsNameSsoPairs = externalContacts.reduce((result, item) => {
+                result[item.ssoUsername] = { firstName: item.firstName || '', lastName: item.lastName || '' };
+                return result;
+            }, {});
+            setChipsNameSsoMap(CaseListDispatch, chipsNameSsoPairs);
+            setExternalContactList(externalContacts);
         });
         fetchStrataAccountUsers();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dispatch, isExternalNonOrgAdmin, loggedInUserRights.data, apolloClient]);
+    }, [dispatch, isExternalNonOrgAdmin, loggedInUserRights.data]);
     const filteredExternalList = useMemo(() => {
         return [
             ...(noResults && !isExternalNonOrgAdmin

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":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAU/D,wBAAgB,wBAAwB,sBA0IvC"}
+{"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,sBAuIvC"}

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

@@ -69,9 +69,6 @@ export function CreatorSsoNameFilterChip() {
             }, []);
             setChips(valueLabelArray);
         };
-        // Advance search stores raw name/SSO text in filterInfo. Resolution uses ssoUsernameIn, so a
-        // short first name can match another contact's SSO and show the wrong chip label; filtering still
-        // works — users should enter full name or SSO when the label matters.
         const getInternalContactNames = (contacts) => __awaiter(this, void 0, void 0, function* () {
             const res = yield getInternalUserContactsList({
                 internal: false,

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

@@ -1,13 +1,3 @@
-import { IKeyValue } from '@rh-support/types/shared';
 import React from 'react';
-export interface GroupsFilterProps {
-    /** When set with onGroupsChange, the filter is controlled (e.g. advanced search). */
-    selectedGroups?: Array<IKeyValue<string>>;
-    onGroupsChange?: (groups: Array<IKeyValue<string>>) => void;
-    hideLabel?: boolean;
-    idPrefix?: string;
-    showSelectionCountBadge?: boolean;
-    placeholder?: string;
-}
-export declare function GroupsFilter({ selectedGroups: controlledSelectedGroups, onGroupsChange, hideLabel, idPrefix, showSelectionCountBadge, placeholder: placeholderProp, }?: GroupsFilterProps): React.JSX.Element;
+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":"AAgBA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAKrD,OAAO,KAA2D,MAAM,OAAO,CAAC;AAShF,MAAM,WAAW,iBAAiB;IAC9B,qFAAqF;IACrF,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAID,wBAAgB,YAAY,CAAC,EACzB,cAAc,EAAE,wBAAwB,EACxC,cAAc,EACd,SAAiB,EACjB,QAAmC,EACnC,uBAA+B,EAC/B,WAAW,EAAE,eAAe,GAC/B,GAAE,iBAAsB,qBA+RxB"}
+{"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,sBA+P3B"}

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

@@ -1,4 +1,4 @@
-import { Badge, Button, MenuFooter, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import { Button, MenuFooter, 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';
@@ -12,105 +12,83 @@ import { SolrKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilter } from '../CaseListFilterReducer';
-const EMPTY_GROUPS = [];
-export function GroupsFilter({ selectedGroups: controlledSelectedGroups, onGroupsChange, hideLabel = false, idPrefix = 'case-list-group-filter', showSelectionCountBadge = false, placeholder: placeholderProp, } = {}) {
-    var _a, _b;
+export function GroupsFilter() {
     const { t } = useTranslation();
+    const { globalMetadataState: { caseGroups }, } = useContext(GlobalMetadataStateContext);
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const dispatch = useContext(CaseListFilterDispatchContext);
-    const isControlled = typeof onGroupsChange === 'function';
-    // Prefer the filterInfo array reference in basic/uncontrolled mode so empty selection
-    // does not create a new [] each render and re-fire the selectedItems sync effect.
-    const selectedGroups = isControlled
-        ? controlledSelectedGroups || EMPTY_GROUPS
-        : (_a = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.group]) !== null && _a !== void 0 ? _a : EMPTY_GROUPS;
-    const { globalMetadataState: { caseGroups }, } = useContext(GlobalMetadataStateContext);
-    const isLoading = caseGroups.isFetching;
     const [inputValue, setInputValue] = useState('');
     const [focusedItemIndex, setFocusedItemIndex] = useState(null);
     const [activeItem, setActiveItem] = useState(null);
-    const list = useMemo(() => (caseGroups.data || []).map((group) => ({ value: group.name, key: group.groupNum })), [caseGroups.data]);
+    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 [isOpen, setIsOpen] = useState(false);
     const [selectedItems, setSelectedItems] = useState({});
     const textInputRef = useRef();
-    const applyGroupSelection = (updatedFilterValues) => {
-        if (isControlled) {
-            onGroupsChange(updatedFilterValues);
-            return;
-        }
-        updateFilter(dispatch, {
-            filterKey: SolrKeys.group,
-            values: updatedFilterValues,
-        });
-    };
-    const onToggleClick = () => {
+    const onToggleClick = (e) => {
         setIsOpen(!isOpen);
     };
     const onSelect = (option) => {
-        const optionValue = typeof option === 'string' ? option : option === null || option === void 0 ? void 0 : option.value;
-        if (!optionValue || optionValue === 'no results') {
-            return;
-        }
         const prevSelectedGroups = Object.keys(selectedItems).filter((item) => selectedItems[item] && item);
-        if (selectedItems[optionValue]) {
-            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [optionValue]: !prevData[optionValue] })));
-            const indexOfGroup = prevSelectedGroups.indexOf(optionValue);
+        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), { [optionValue]: true })));
-            prevSelectedGroups.push(optionValue);
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: true })));
+            prevSelectedGroups.push(option.value);
         }
-        const updatedFilterValues = prevSelectedGroups
-            .map((value) => {
+        const mapValueToKey = (value) => {
             const selectedItem = list.find((item) => item.value === value);
-            if (!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)) {
-                return null;
-            }
-            return { key: String(selectedItem.key), value: String(selectedItem.value) };
-        })
-            .filter(Boolean);
-        applyGroupSelection(updatedFilterValues);
+            return selectedItem;
+        };
+        const updatedFilterValues = prevSelectedGroups.map((item) => mapValueToKey(item));
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.group,
+            values: updatedFilterValues,
+        });
     };
     const handleMenuArrowKeys = (key) => {
-        if (!isOpen || !list.length) {
-            return;
-        }
-        let indexToFocus = 0;
-        if (key === 'ArrowUp') {
-            if (focusedItemIndex === null || focusedItemIndex === 0) {
-                indexToFocus = list.length - 1;
-            }
-            else {
-                indexToFocus = focusedItemIndex - 1;
-            }
-        }
-        if (key === 'ArrowDown') {
-            if (focusedItemIndex === null || focusedItemIndex === list.length - 1) {
-                indexToFocus = 0;
+        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;
+                }
             }
-            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];
-        if (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value) {
-            setActiveItem(`select-multi-typeahead-checkbox-${String(focusedItem.value).replace(' ', '-')}`);
+            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 !== null ? list[focusedItemIndex] : list[0];
+        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);
+                    onSelect(focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value);
                 }
                 break;
             case 'Tab':
@@ -128,37 +106,36 @@ export function GroupsFilter({ selectedGroups: controlledSelectedGroups, onGroup
     const onTextInputChange = (_event, value) => {
         setInputValue(value);
     };
-    const defaultEmptyPlaceholder = placeholderProp || t('Select a group');
-    const placeholder = showSelectionCountBadge
-        ? isLoading
-            ? t('Loading...')
-            : defaultEmptyPlaceholder
-        : getDropdownBtnPlaceholder(isLoading ? t('Loading...') : defaultEmptyPlaceholder, selectedGroups, '', ((_b = caseGroups.data) === null || _b === void 0 ? void 0 : _b.length) || 0, t('All selected'));
-    const hasSelectedGroups = selectedGroups.length > 0;
+    const placeholder = getDropdownBtnPlaceholder(t('Select a group'), filterInfo[SolrKeys.group], '', (caseGroups.data || []).length, t('All selected'));
     const onClick = () => {
         var _a;
         setInputValue('');
         setSelectedItems({});
-        applyGroupSelection([]);
+        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: `${idPrefix}-input`, autoComplete: "off", innerRef: textInputRef, placeholder: placeholder }, (activeItem && { 'aria-activedescendant': activeItem }), { role: "combobox", isExpanded: isOpen, "aria-controls": `${idPrefix}-listbox` })),
-            hasSelectedGroups ? (React.createElement(TextInputGroupUtilities, null,
-                showSelectionCountBadge && (React.createElement(Badge, { className: "advance-search-dropdown-toggle-badge pf-v6-u-mr-sm" }, t('{{count}} selected', { count: selectedGroups.length }))),
-                React.createElement(Button, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: onClick, "aria-label": t('Clear input value') }))) : null)));
+            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, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: onClick, "aria-label": "Clear input value" }))) : (''))));
     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, selectOptions, focusedItemIndex]);
+    }, [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);
             }
@@ -167,26 +144,29 @@ export function GroupsFilter({ selectedGroups: controlledSelectedGroups, onGroup
         setFocusedItemIndex(null);
         setActiveItem(null);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [inputValue, list]);
+    }, [inputValue]);
     useEffect(() => {
-        if (isEmpty(selectedGroups)) {
+        var _a;
+        if (isEmpty(filterInfo[SolrKeys.group])) {
             setSelectedItems({});
         }
         else {
-            const nextSelectedItems = selectedGroups.reduce((selection, group) => {
+            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(nextSelectedItems);
+            setSelectedItems(selectedGroups);
         }
-    }, [selectedGroups]);
-    return (React.createElement("div", { className: "group-filter", "data-testid": "groups-filter" },
-        !hideLabel && (React.createElement("label", { htmlFor: idPrefix, className: "pf-v6-u-mb-sm group-filter-label" }, t(filterNamesMap[SolrKeys.group]))),
+        // 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-v6-u-mb-sm group-filter-label" }, t(filterNamesMap[SolrKeys.group])),
         React.createElement("div", { className: "pf-v6-c-select" },
-            React.createElement(Select, { shouldFocusToggleOnSelect: true, shouldPreventScrollOnItemFocus: true, "data-tracking-id": "groups-filter", id: idPrefix, 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(Select, { shouldFocusToggleOnSelect: true, shouldPreventScrollOnItemFocus: true, "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(MenuFooter, { className: "group-filter-manage-groups-footer" },
-                        React.createElement(Link, { className: "cta cta-link", to: "/manage/groups" },
-                            React.createElement(Trans, null, "Manage groups")))))))));
+                    canViewCaseGroups && (React.createElement(React.Fragment, null,
+                        React.createElement(MenuFooter, { className: "group-filter-manage-groups-footer" },
+                            React.createElement(Link, { className: "cta cta-link", to: "/manage/groups" },
+                                React.createElement(Trans, null, "Manage groups"))))))))));
 }

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

@@ -1,8 +1,10 @@
 import React from 'react';
+import { IProductVersionPivotMap } from '../CaseList';
 import { IProductFilter } from '../CaseListFilterReducer';
 interface IProps {
     productList: IProductFilter[];
+    productVersionPivot: IProductVersionPivotMap[];
 }
-export declare function ProductFilterChip({ productList }: IProps): React.JSX.Element;
+export declare function ProductFilterChip({ productList, productVersionPivot }: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=ProductFilterChip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProductFilterChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/ProductFilterChip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,cAAc,EAAgB,MAAM,0BAA0B,CAAC;AAGxE,UAAU,MAAM;IACZ,WAAW,EAAE,cAAc,EAAE,CAAC;CACjC;AAED,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,EAAE,MAAM,qBAsExD"}
+{"version":3,"file":"ProductFilterChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/ProductFilterChip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAgB,MAAM,0BAA0B,CAAC;AAGxE,UAAU,MAAM;IACZ,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,mBAAmB,EAAE,uBAAuB,EAAE,CAAC;CAClD;AAED,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,mBAAwB,EAAE,EAAE,MAAM,qBAsElF"}

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

@@ -7,7 +7,7 @@ import { filterNamesMap } from '../../../utils/constants';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilter } from '../CaseListFilterReducer';
 import { VersionsFilter } from './VersionsFilter';
-export function ProductFilterChip({ productList }) {
+export function ProductFilterChip({ productList, productVersionPivot = [] }) {
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const dispatch = useContext(CaseListFilterDispatchContext);
     const canAccessVersionsFilter = ability.can(resourceActions.PATCH, resources.CASE_LIST, CaseListFields.VERSIONS_FILTER);
@@ -26,7 +26,7 @@ export function ProductFilterChip({ productList }) {
     return (React.createElement("div", { className: "filter-chip" },
         React.createElement("span", { className: "filter-chip__heading" }, filterNamesMap[SolrKeys.product]),
         canAccessVersionsFilter ? (React.createElement(React.Fragment, null, productList.map((currentProduct, index) => (React.createElement(LabelGroup, { numLabels: 10, key: `${currentProduct.value}-${index}`, categoryName: currentProduct.value },
-            React.createElement(VersionsFilter, { productInfo: currentProduct }),
+            React.createElement(VersionsFilter, { productInfo: currentProduct, productVersionPivot: productVersionPivot }),
             currentProduct[SolrKeys.version].map((chip) => (React.createElement(Label, { variant: "outline", key: chip.value, onClose: () => deleteVersion(currentProduct, chip) }, chip.value))),
             React.createElement(Button, { icon: React.createElement(TimesCircleIcon, { "aria-hidden": "true" }), className: "pf-v6-c-button__icon", variant: ButtonVariant.plain, "aria-label": "Remove product", onClick: () => deleteProduct(currentProduct) })))))) : (React.createElement(LabelGroup, { numLabels: 10, categoryName: "Product", key: "products" }, productList.map((currentProduct, index) => (React.createElement(Label, { variant: "outline", key: `${currentProduct.value}-${index}`, onClose: () => deleteProduct(currentProduct) }, currentProduct.value)))))));
 }

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

@@ -1,10 +1,9 @@
+import { IFacetResponse } from '@rh-support/types/shared';
 import React from 'react';
-interface IProductOption {
-    name: string;
-    productId: string;
-}
 interface IProps {
-    allProducts: IProductOption[];
+    filterValues: IFacetResponse[];
+    isSolrSearchDown: boolean;
+    allProducts: string[];
 }
 export declare function ProductsFilter(props: IProps): React.JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"ProductsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/ProductsFilter.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAQvE,UAAU,cAAc;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,MAAM;IACZ,WAAW,EAAE,cAAc,EAAE,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,qBAoL3C"}
+{"version":3,"file":"ProductsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/ProductsFilter.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAI1D,OAAO,KAAkD,MAAM,OAAO,CAAC;AAQvE,UAAU,MAAM;IACZ,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,qBA+O3C"}

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

@@ -1,5 +1,5 @@
 import { MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, } from '@patternfly/react-core';
-import { useSelectKeyboardNavigator } from '@rh-support/components';
+import { SingleSelectDropdown, useSelectKeyboardNavigator } from '@rh-support/components';
 import { getDropdownBtnPlaceholder } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isUndefined from 'lodash/isUndefined';
@@ -10,11 +10,11 @@ import { filterNamesMap } from '../../../utils/constants';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilter } from '../CaseListFilterReducer';
 export function ProductsFilter(props) {
-    var _a;
+    var _a, _b, _c, _d, _f;
     const { t } = useTranslation();
     const dispatch = useContext(CaseListFilterDispatchContext);
     const { filterInfo } = useContext(CaseListFilterStateContext);
-    const { allProducts } = props;
+    const { allProducts, filterValues, isSolrSearchDown } = props;
     const [isOpen, setIsOpen] = useState(false);
     const [selectedItems, setSelectedItems] = useState({});
     const [activeItem, setActiveItem] = useState(null);
@@ -23,24 +23,51 @@ export function ProductsFilter(props) {
     const selectedProducts = !isUndefined(filterInfo) && !isUndefined(filterInfo[SolrPivotKeys.product_version])
         ? filterInfo[SolrPivotKeys.product_version]
         : [];
-    const productOptions = allProducts.map((product) => ({
+    const productOptions = filterValues.map((product) => ({
         field: SolrKeys.product,
-        value: product.name,
-        productId: product.productId,
+        value: product.value,
         [SolrKeys.version]: [],
     }));
+    const singleSelectOptions = allProducts.length > 0
+        ? allProducts.map((product) => ({
+            value: product,
+            label: product,
+        }))
+        : [{ value: '', label: t('No products available') }];
+    const selectedProduct = ((_b = (_a = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrPivotKeys.product_version]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value) || '';
+    const selectedOption = {
+        value: selectedProduct,
+        label: selectedProduct,
+    };
+    // Single select mode for when Solr is down
+    const onFilterChangeSingleSelect = (selection) => {
+        updateFilter(dispatch, {
+            filterKey: SolrPivotKeys.product_version,
+            values: [{ field: SolrKeys.product, value: selection.value, [SolrKeys.version]: [] }],
+        });
+        setIsOpen(false);
+    };
+    const onSingleSelectChange = (option) => {
+        // Don't update filter if no products are available
+        if (allProducts.length === 0 || option.value === '') {
+            return;
+        }
+        updateFilter(dispatch, {
+            filterKey: SolrPivotKeys.product_version,
+            values: [{ field: SolrKeys.product, value: option.value, [SolrKeys.version]: [] }],
+        });
+    };
+    // Multi-select mode
     const onSelect = (option) => {
-        var _a;
         let newSelectedProducts = [];
         if (selectedProducts === null || selectedProducts === void 0 ? void 0 : selectedProducts.some((product) => option.value === product.value)) {
             newSelectedProducts = selectedProducts.filter((product) => option.value !== product.value);
             setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: false })));
         }
         else {
-            const productId = option.productId || ((_a = allProducts.find((p) => p.name === option.value)) === null || _a === void 0 ? void 0 : _a.productId) || '';
             newSelectedProducts = [
                 ...selectedProducts,
-                { field: SolrKeys.product, value: option.value, productId, [SolrKeys.version]: [] },
+                { field: SolrKeys.product, value: option.value, [SolrKeys.version]: [] },
             ];
             setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: true })));
         }
@@ -66,12 +93,21 @@ export function ProductsFilter(props) {
         resetIndexOnClose: true,
         isDisabled: false,
         setIsOpen,
-        onSelect,
+        onSelect: (item) => {
+            if (isSolrSearchDown) {
+                onFilterChangeSingleSelect(item);
+            }
+            else {
+                onSelect(item);
+            }
+        },
     });
     const onTextInputChange = (_event, value) => {
         setInputValue(value);
     };
-    const placeholder = getDropdownBtnPlaceholder(t('Select a product'), ((_a = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrPivotKeys.product_version]) === null || _a === void 0 ? void 0 : _a.map((i) => i.value)) || [], '', (allProducts === null || allProducts === void 0 ? void 0 : allProducts.length) || 0, t('All selected'));
+    const placeholder = isSolrSearchDown
+        ? ((_d = (_c = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrPivotKeys.product_version]) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.value) || t('Select a product')
+        : getDropdownBtnPlaceholder(t('Select a product'), ((_f = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrPivotKeys.product_version]) === null || _f === void 0 ? void 0 : _f.map((i) => i.value)) || [], '', props.filterValues.length, t('All selected'));
     const toggleForMultiSelect = (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-product-filter-input", autoComplete: "off", innerRef: textInputRef, placeholder: placeholder }, (activeItem && { 'aria-activedescendant': activeItem }), { role: "combobox", isExpanded: isOpen, "aria-controls": "select-multi-typeahead-product-listbox" })))));
@@ -93,6 +129,9 @@ export function ProductsFilter(props) {
     }, [inputValue]);
     useEffect(() => {
         var _a;
+        if (isSolrSearchDown) {
+            return;
+        }
         if (isEmpty(filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrPivotKeys.product_version])) {
             setSelectedItems({});
         }
@@ -103,13 +142,13 @@ export function ProductsFilter(props) {
             }, {});
             setSelectedItems(selectedProductItems || {});
         }
-    }, [filterInfo]);
+    }, [filterInfo, isSolrSearchDown]);
     const renderOptions = () => {
         const filteredOptions = getFilteredOptions();
-        return filteredOptions.map((option, index) => (React.createElement(SelectOption, { key: `product-option-${index}`, value: option, hasCheckbox: true, isSelected: selectedItems[option.value], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-product-${String(option.value).replace(/\s/g, '-')}` }, option.value)));
+        return filteredOptions.map((option, index) => (React.createElement(SelectOption, { key: `product-option-${index}`, value: option, hasCheckbox: !isSolrSearchDown, isSelected: selectedItems[option.value], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-product-${String(option.value).replace(/\s/g, '-')}` }, option.value)));
     };
     return (React.createElement("div", { className: "product-filter" },
         React.createElement("label", { htmlFor: "case-list-products-filter", className: "pf-v6-u-mb-sm products-filter-label" }, t(filterNamesMap[SolrKeys.product])),
-        React.createElement(Select, { shouldFocusToggleOnSelect: true, shouldPreventScrollOnItemFocus: true, id: "case-list-products-filter", "data-tracking-id": "products-filter", isOpen: isOpen, selected: selectedItems, onSelect: (_e, v) => onSelect(v), onOpenChange: (nextOpen) => setIsOpen(nextOpen), toggle: toggleForMultiSelect, isScrollable: true, popperProps: { direction: 'down', enableFlip: false, maxWidth: '30rem' } },
-            React.createElement(SelectList, null, renderOptions()))));
+        isSolrSearchDown ? (React.createElement(SingleSelectDropdown, { id: "case-list-products-filter", selected: selectedOption, options: singleSelectOptions, placeholder: allProducts.length > 0 ? t('Select a product') : t('No products available'), onSelect: (options) => onSingleSelectChange(options[0]), dataTrackingId: "products-filter", isScrollable: true, isDisabled: allProducts.length === 0 })) : (React.createElement(Select, { shouldFocusToggleOnSelect: true, shouldPreventScrollOnItemFocus: true, id: "case-list-products-filter", "data-tracking-id": "products-filter", isOpen: isOpen, selected: selectedItems, onSelect: (_e, v) => onSelect(v), onOpenChange: (nextOpen) => setIsOpen(nextOpen), toggle: toggleForMultiSelect, isScrollable: true, popperProps: { direction: 'down', enableFlip: false, maxWidth: '30rem' } },
+            React.createElement(SelectList, null, renderOptions())))));
 }

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

@@ -1,6 +1,9 @@
+import { IFacetResponse } from '@rh-support/types/shared';
 import React from 'react';
 interface IProps {
+    filterValues: IFacetResponse[];
     allCaseSeverities: string[];
+    isSolrSearchDown: boolean;
 }
 export declare function SeverityFilter(props: IProps): React.JSX.Element;
 export {};