@rh-support/cases 2.6.186 → 2.6.187

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

@@ -1,8 +1,8 @@
-import { Button, MenuFooter, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import { useApolloClient } from '@apollo/client/react';
+import { Badge, 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';
-import { getDropdownBtnPlaceholder } from '@rh-support/utils';
+import { GET_CASE_GROUP, getDropdownBtnPlaceholder, handleGraphQLCaseGroupsResponse, } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isUndefined from 'lodash/isUndefined';
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
@@ -12,83 +12,125 @@ import { SolrKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilter } from '../CaseListFilterReducer';
-export function GroupsFilter() {
+const EMPTY_GROUPS = [];
+export function GroupsFilter({ selectedGroups: controlledSelectedGroups, onGroupsChange, hideLabel = false, idPrefix = 'case-list-group-filter', showSelectionCountBadge = false, placeholder: placeholderProp, } = {}) {
+    var _a;
     const { t } = useTranslation();
-    const { globalMetadataState: { caseGroups }, } = useContext(GlobalMetadataStateContext);
+    const apolloClient = useApolloClient();
     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 [inputValue, setInputValue] = useState('');
+    const [caseGroups, setCaseGroups] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
     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 })) : []),
-    ];
+    useEffect(() => {
+        setIsLoading(true);
+        apolloClient
+            .query({
+            query: GET_CASE_GROUP,
+            fetchPolicy: 'cache-first',
+        })
+            .then(({ data }) => {
+            var _a, _b, _c, _d;
+            const edges = (_d = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.salesforce_support_uiapi) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.SalesforceSupportCaseGroup__c) === null || _c === void 0 ? void 0 : _c.edges) !== null && _d !== void 0 ? _d : [];
+            setCaseGroups(handleGraphQLCaseGroupsResponse(edges));
+        })
+            .catch((err) => {
+            console.error('[GroupsFilter] Failed to fetch case groups:', err);
+            setCaseGroups([]);
+        })
+            .finally(() => setIsLoading(false));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const list = useMemo(() => caseGroups.map((group) => ({ value: group.name, key: group.groupNum })), [caseGroups]);
     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 onToggleClick = (e) => {
+    const applyGroupSelection = (updatedFilterValues) => {
+        if (isControlled) {
+            onGroupsChange(updatedFilterValues);
+            return;
+        }
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.group,
+            values: updatedFilterValues,
+        });
+    };
+    const onToggleClick = () => {
         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[option.value]) {
-            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: !prevData[option.value] })));
-            const indexOfGroup = prevSelectedGroups.indexOf(option.value);
+        if (selectedItems[optionValue]) {
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [optionValue]: !prevData[optionValue] })));
+            const indexOfGroup = prevSelectedGroups.indexOf(optionValue);
             prevSelectedGroups.splice(indexOfGroup, 1);
         }
         else {
-            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: true })));
-            prevSelectedGroups.push(option.value);
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [optionValue]: true })));
+            prevSelectedGroups.push(optionValue);
         }
-        const mapValueToKey = (value) => {
+        const updatedFilterValues = prevSelectedGroups
+            .map((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,
-        });
+            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);
     };
     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 (!isOpen || !list.length) {
+            return;
+        }
+        let indexToFocus = 0;
+        if (key === 'ArrowUp') {
+            if (focusedItemIndex === null || focusedItemIndex === 0) {
+                indexToFocus = list.length - 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;
-                }
+            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(' ', '-')}`);
+        }
+        if (key === 'ArrowDown') {
+            if (focusedItemIndex === null || focusedItemIndex === 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(' ', '-')}`);
         }
     };
     const onInputKeyDown = (event) => {
-        const focusedItem = focusedItemIndex ? list[focusedItemIndex] : list[0];
+        const focusedItem = focusedItemIndex !== null ? 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);
+                    onSelect(focusedItem);
                 }
                 break;
             case 'Tab':
@@ -106,36 +148,37 @@ export function GroupsFilter() {
     const onTextInputChange = (_event, value) => {
         setInputValue(value);
     };
-    const placeholder = getDropdownBtnPlaceholder(t('Select a group'), filterInfo[SolrKeys.group], '', (caseGroups.data || []).length, t('All selected'));
+    const defaultEmptyPlaceholder = placeholderProp || t('Select a group');
+    const placeholder = showSelectionCountBadge
+        ? isLoading
+            ? t('Loading...')
+            : defaultEmptyPlaceholder
+        : getDropdownBtnPlaceholder(isLoading ? t('Loading...') : defaultEmptyPlaceholder, selectedGroups, '', caseGroups.length, t('All selected'));
+    const hasSelectedGroups = selectedGroups.length > 0;
     const onClick = () => {
         var _a;
         setInputValue('');
         setSelectedItems({});
-        updateFilter(dispatch, {
-            filterKey: SolrKeys.group,
-            values: [],
-        });
+        applyGroupSelection([]);
         (_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, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: onClick, "aria-label": "Clear input value" }))) : (''))));
+            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)));
     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]);
+    }, [selectedItems, caseGroups, 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);
             }
@@ -146,27 +189,29 @@ export function GroupsFilter() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputValue]);
     useEffect(() => {
-        var _a;
-        if (isEmpty(filterInfo[SolrKeys.group])) {
+        if (!inputValue) {
+            setSelectOptions(list);
+        }
+    }, [list, inputValue]);
+    useEffect(() => {
+        if (isEmpty(selectedGroups)) {
             setSelectedItems({});
         }
         else {
-            const selectedGroups = (_a = filterInfo[SolrKeys.group]) === null || _a === void 0 ? void 0 : _a.reduce((selection, group) => {
+            const nextSelectedItems = selectedGroups.reduce((selection, group) => {
                 selection[group === null || group === void 0 ? void 0 : group.value] = true;
                 return selection;
             }, {});
-            setSelectedItems(selectedGroups);
+            setSelectedItems(nextSelectedItems);
         }
-        // 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])),
+    }, [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]))),
         React.createElement("div", { className: "pf-v6-c-select" },
-            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(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(SelectList, null,
                     dropdownOptions,
-                    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"))))))))));
+                    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")))))))));
 }

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

@@ -1,10 +1,8 @@
 import React from 'react';
-import { IProductVersionPivotMap } from '../CaseList';
 import { IProductFilter } from '../CaseListFilterReducer';
 interface IProps {
     productList: IProductFilter[];
-    productVersionPivot: IProductVersionPivotMap[];
 }
-export declare function ProductFilterChip({ productList, productVersionPivot }: IProps): React.JSX.Element;
+export declare function ProductFilterChip({ productList }: 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;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"}
+{"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"}

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, productVersionPivot = [] }) {
+export function ProductFilterChip({ productList }) {
     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, productVersionPivot = [] }) {
     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, productVersionPivot: productVersionPivot }),
+            React.createElement(VersionsFilter, { productInfo: currentProduct }),
             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,9 +1,10 @@
-import { IFacetResponse } from '@rh-support/types/shared';
 import React from 'react';
+interface IProductOption {
+    name: string;
+    productId: string;
+}
 interface IProps {
-    filterValues: IFacetResponse[];
-    isSolrSearchDown: boolean;
-    allProducts: string[];
+    allProducts: IProductOption[];
 }
 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":"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"}
+{"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"}

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 { SingleSelectDropdown, useSelectKeyboardNavigator } from '@rh-support/components';
+import { 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, _b, _c, _d, _f;
+    var _a;
     const { t } = useTranslation();
     const dispatch = useContext(CaseListFilterDispatchContext);
     const { filterInfo } = useContext(CaseListFilterStateContext);
-    const { allProducts, filterValues, isSolrSearchDown } = props;
+    const { allProducts } = props;
     const [isOpen, setIsOpen] = useState(false);
     const [selectedItems, setSelectedItems] = useState({});
     const [activeItem, setActiveItem] = useState(null);
@@ -23,51 +23,24 @@ export function ProductsFilter(props) {
     const selectedProducts = !isUndefined(filterInfo) && !isUndefined(filterInfo[SolrPivotKeys.product_version])
         ? filterInfo[SolrPivotKeys.product_version]
         : [];
-    const productOptions = filterValues.map((product) => ({
+    const productOptions = allProducts.map((product) => ({
         field: SolrKeys.product,
-        value: product.value,
+        value: product.name,
+        productId: product.productId,
         [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, [SolrKeys.version]: [] },
+                { field: SolrKeys.product, value: option.value, productId, [SolrKeys.version]: [] },
             ];
             setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: true })));
         }
@@ -93,21 +66,12 @@ export function ProductsFilter(props) {
         resetIndexOnClose: true,
         isDisabled: false,
         setIsOpen,
-        onSelect: (item) => {
-            if (isSolrSearchDown) {
-                onFilterChangeSingleSelect(item);
-            }
-            else {
-                onSelect(item);
-            }
-        },
+        onSelect,
     });
     const onTextInputChange = (_event, value) => {
         setInputValue(value);
     };
-    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 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 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" })))));
@@ -129,9 +93,6 @@ 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({});
         }
@@ -142,13 +103,13 @@ export function ProductsFilter(props) {
             }, {});
             setSelectedItems(selectedProductItems || {});
         }
-    }, [filterInfo, isSolrSearchDown]);
+    }, [filterInfo]);
     const renderOptions = () => {
         const filteredOptions = getFilteredOptions();
-        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 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 (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])),
-        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())))));
+        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,9 +1,6 @@
-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 {};

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

@@ -1 +1 @@
-{"version":3,"file":"SeverityFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/SeverityFilter.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG1D,OAAO,KAA0C,MAAM,OAAO,CAAC;AAQ/D,UAAU,MAAM;IACZ,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,qBAoL3C"}
+{"version":3,"file":"SeverityFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/SeverityFilter.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAQ/D,UAAU,MAAM;IACZ,iBAAiB,EAAE,MAAM,EAAE,CAAC;CAC/B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,qBA0I3C"}

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

@@ -1,5 +1,5 @@
 import { Button, MenuToggle, Select, SelectList, SelectOption, } from '@patternfly/react-core';
-import { SingleSelectDropdown, useSelectKeyboardNavigator } from '@rh-support/components';
+import { useSelectKeyboardNavigator } from '@rh-support/components';
 import { getDropdownBtnPlaceholder } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import React, { useContext, useEffect, useState } from 'react';
@@ -9,56 +9,38 @@ import { filterNamesMap } from '../../../utils/constants';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilter } from '../CaseListFilterReducer';
 export function SeverityFilter(props) {
-    var _a;
     const { t } = useTranslation();
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const dispatch = useContext(CaseListFilterDispatchContext);
     const [isOpen, setIsOpen] = useState(false);
     const [selectedItems, setSelectedItems] = useState({});
-    const list = props.isSolrSearchDown
-        ? props.allCaseSeverities.map((severity) => ({ value: severity, key: severity }))
-        : props.filterValues.map((filterValue) => ({ value: filterValue.value, key: filterValue.value }));
-    const singleSelectOptions = list.map((item) => ({
-        value: item.value,
-        label: item.value,
+    const list = (props.allCaseSeverities || []).map((severity) => ({
+        value: severity,
+        key: severity,
     }));
-    const selectedSeverity = ((_a = filterInfo[SolrKeys.severity]) === null || _a === void 0 ? void 0 : _a[0]) || '';
-    const selectedOption = {
-        value: selectedSeverity,
-        label: selectedSeverity,
-    };
     const onToggleClick = (e) => {
         setIsOpen(!isOpen);
     };
     const onSelect = (option) => {
-        if (props.isSolrSearchDown) {
-            updateFilter(dispatch, {
-                filterKey: SolrKeys.severity,
-                values: [option.value],
-            });
-            setIsOpen(false);
-            return;
-        }
         const prevSelectedSeverities = Object.keys(selectedItems).filter((item) => selectedItems[item] && item);
         if (selectedItems[option.value]) {
             setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: false })));
-            const index = prevSelectedSeverities.indexOf(option.value);
-            prevSelectedSeverities.splice(index, 1);
+            updateFilter(dispatch, {
+                filterKey: SolrKeys.severity,
+                values: prevSelectedSeverities.filter((item) => item !== option.value),
+            });
         }
         else {
             setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: true })));
-            prevSelectedSeverities.push(option.value);
+            updateFilter(dispatch, {
+                filterKey: SolrKeys.severity,
+                values: [...prevSelectedSeverities, option.value],
+            });
         }
-        updateFilter(dispatch, {
-            filterKey: SolrKeys.severity,
-            values: prevSelectedSeverities,
-        });
     };
-    // Use the keyboard navigator hook
     const { focusedItemIndex, onInputKeyDown } = useSelectKeyboardNavigator({
         list,
         isOpen,
-        resetIndexOnClose: true,
         setIsOpen,
         onSelect,
     });
@@ -69,25 +51,17 @@ export function SeverityFilter(props) {
             values: [],
         });
     };
-    const placeholder = props.isSolrSearchDown
-        ? t('Select a severity')
-        : getDropdownBtnPlaceholder(t('Select a severity'), filterInfo[SolrKeys.severity], ' ', list.length, t('All selected'));
+    const placeholder = getDropdownBtnPlaceholder(t('Select a severity'), filterInfo[SolrKeys.severity], ' ', list.length, t('All selected'));
     const toggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "default", onClick: onToggleClick, innerRef: toggleRef, isExpanded: isOpen, isFullWidth: true, onKeyDown: onInputKeyDown },
         placeholder,
         Object.keys(selectedItems).filter((key) => selectedItems[key] === true).length > 0 && (React.createElement(Button, { icon: "", variant: "plain", onClick: onClick, "aria-label": "Clear selection", className: "pf-v6-c-select__toggle-clear" }))));
-    const dropdownOptions = list.map((option, index) => !isEmpty(option.value) && (React.createElement(SelectOption, { key: option.key, value: option, hasCheckbox: !props.isSolrSearchDown, isSelected: selectedItems[option.value], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-severity-${option.value.replace(' ', '-')}` }, option.value)));
-    const onSingleSelectChange = (option) => {
-        updateFilter(dispatch, {
-            filterKey: SolrKeys.severity,
-            values: [option.value],
-        });
-    };
+    const dropdownOptions = list.map((option, index) => !isEmpty(option.value) && (React.createElement(SelectOption, { key: option.key, value: option, hasCheckbox: true, isSelected: selectedItems[option.value], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-severity-${option.value.replace(' ', '-')}` }, option.value)));
     useEffect(() => {
         var _a;
         if (isEmpty(filterInfo[SolrKeys.severity])) {
             setSelectedItems({});
         }
-        else if (!props.isSolrSearchDown) {
+        else {
             const selectedSeverities = (_a = filterInfo[SolrKeys.severity]) === null || _a === void 0 ? void 0 : _a.reduce((selection, severity) => {
                 selection[severity] = true;
                 return selection;
@@ -95,9 +69,9 @@ export function SeverityFilter(props) {
             setSelectedItems(selectedSeverities);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filterInfo[SolrKeys.severity], props.isSolrSearchDown]);
+    }, [filterInfo[SolrKeys.severity]]);
     return (React.createElement("div", { className: "severity-filter" },
         React.createElement("label", { htmlFor: "case-list-severity-filter", className: "pf-v6-u-mb-sm severity-filter-label" }, t(filterNamesMap[SolrKeys.severity])),
-        props.isSolrSearchDown ? (React.createElement(SingleSelectDropdown, { id: "case-list-severity-filter", selected: selectedOption, options: singleSelectOptions, placeholder: t('Select a severity'), onSelect: onSingleSelectChange, dataTrackingId: "severity-filter", isScrollable: true })) : (React.createElement(Select, { shouldFocusToggleOnSelect: true, shouldPreventScrollOnItemFocus: true, id: "case-list-severity-filter", "data-tracking-id": "severity-filter", isOpen: isOpen, selected: selectedItems, onSelect: (_e, v) => onSelect(v), onOpenChange: (nextOpen) => setIsOpen(nextOpen), toggle: toggle, isScrollable: true, popperProps: { direction: 'down', enableFlip: false } },
-            React.createElement(SelectList, null, dropdownOptions)))));
+        React.createElement(Select, { shouldFocusToggleOnSelect: true, shouldPreventScrollOnItemFocus: true, id: "case-list-severity-filter", "data-tracking-id": "severity-filter", isOpen: isOpen, selected: selectedItems, onSelect: (_e, v) => onSelect(v), onOpenChange: (nextOpen) => setIsOpen(nextOpen), toggle: toggle, isScrollable: true, popperProps: { direction: 'down', enableFlip: false } },
+            React.createElement(SelectList, null, dropdownOptions))));
 }

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

@@ -1,8 +1,5 @@
-import { IFacetResponse } from '@rh-support/types/shared';
 import React from 'react';
 interface IProps {
-    filterValues: IFacetResponse[];
-    isSolrSearchDown: boolean;
     allCaseStatuses: string[];
 }
 export interface IStatusFilterOptions {

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

@@ -1 +1 @@
-{"version":3,"file":"StatusFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/StatusFilter.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,OAAO,KAA0C,MAAM,OAAO,CAAC;AAO/D,UAAU,MAAM;IACZ,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,qBAkNzC"}
+{"version":3,"file":"StatusFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/StatusFilter.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAQ/D,UAAU,MAAM;IACZ,eAAe,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,qBAqKzC"}