@rh-support/cases 2.6.233 → 2.6.235

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 {};

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":"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"}
+{"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"}

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 { useSelectKeyboardNavigator } from '@rh-support/components';
+import { SingleSelectDropdown, useSelectKeyboardNavigator } from '@rh-support/components';
 import { getDropdownBtnPlaceholder } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import React, { useContext, useEffect, useState } from 'react';
@@ -9,38 +9,56 @@ 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.allCaseSeverities || []).map((severity) => ({
-        value: severity,
-        key: severity,
+    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 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) => {
-        const prevSelectedSeverities = Object.keys(selectedItems).filter((item) => selectedItems[item] && item);
-        if (selectedItems[option.value]) {
-            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: false })));
+        if (props.isSolrSearchDown) {
             updateFilter(dispatch, {
                 filterKey: SolrKeys.severity,
-                values: prevSelectedSeverities.filter((item) => item !== option.value),
+                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);
         }
         else {
             setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: true })));
-            updateFilter(dispatch, {
-                filterKey: SolrKeys.severity,
-                values: [...prevSelectedSeverities, option.value],
-            });
+            prevSelectedSeverities.push(option.value);
         }
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.severity,
+            values: prevSelectedSeverities,
+        });
     };
+    // Use the keyboard navigator hook
     const { focusedItemIndex, onInputKeyDown } = useSelectKeyboardNavigator({
         list,
         isOpen,
+        resetIndexOnClose: true,
         setIsOpen,
         onSelect,
     });
@@ -51,17 +69,25 @@ export function SeverityFilter(props) {
             values: [],
         });
     };
-    const placeholder = getDropdownBtnPlaceholder(t('Select a severity'), filterInfo[SolrKeys.severity], ' ', list.length, t('All selected'));
+    const placeholder = props.isSolrSearchDown
+        ? t('Select a severity')
+        : 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: true, isSelected: selectedItems[option.value], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-severity-${option.value.replace(' ', '-')}` }, option.value)));
+    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],
+        });
+    };
     useEffect(() => {
         var _a;
         if (isEmpty(filterInfo[SolrKeys.severity])) {
             setSelectedItems({});
         }
-        else {
+        else if (!props.isSolrSearchDown) {
             const selectedSeverities = (_a = filterInfo[SolrKeys.severity]) === null || _a === void 0 ? void 0 : _a.reduce((selection, severity) => {
                 selection[severity] = true;
                 return selection;
@@ -69,9 +95,9 @@ export function SeverityFilter(props) {
             setSelectedItems(selectedSeverities);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filterInfo[SolrKeys.severity]]);
+    }, [filterInfo[SolrKeys.severity], props.isSolrSearchDown]);
     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])),
-        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))));
+        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)))));
 }

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

@@ -1,5 +1,8 @@
+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":"AAWA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAY/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,qBA8KzC"}
+{"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"}

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

@@ -1,28 +1,43 @@
 import { Button, MenuToggle, Select, SelectList, SelectOption, } from '@patternfly/react-core';
-import { useSelectKeyboardNavigator } from '@rh-support/components';
+import { SingleSelectDropdown, useSelectKeyboardNavigator } from '@rh-support/components';
 import isEmpty from 'lodash/isEmpty';
 import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ARCHIVED_STATUS, SolrKeys } from '../../../enums/filters';
-import { filterNamesMap, PORTAL_OPEN_DISPLAY_STATUSES, PORTAL_USER_SELECTABLE_STATUSES, } from '../../../utils/constants';
+import { SolrKeys } from '../../../enums/filters';
+import { filterNamesMap } from '../../../utils/constants';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilter } from '../CaseListFilterReducer';
 export function StatusFilter(props) {
+    var _a;
     const dispatch = useContext(CaseListFilterDispatchContext);
     const { t } = useTranslation();
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const [isOpen, setIsOpen] = useState(false);
     const [selectedItems, setSelectedItems] = useState({});
-    const list = PORTAL_USER_SELECTABLE_STATUSES.map((status) => ({
-        value: status,
-        key: status,
+    const list = props.isSolrSearchDown
+        ? props.allCaseStatuses.map((status) => ({ value: status, key: status }))
+        : props.filterValues.map((filterValue) => ({ value: filterValue.value, key: filterValue.value }));
+    const singleSelectOptions = list.map((item) => ({
+        value: item.value,
+        label: item.value,
     }));
-    const getArchivedStatuses = () => ((filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status]) || []).filter((status) => status === ARCHIVED_STATUS);
-    const getSelectableStatuses = () => ((filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status]) || []).filter((status) => status !== ARCHIVED_STATUS);
+    const selectedStatus = ((_a = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status]) === null || _a === void 0 ? void 0 : _a[0]) || '';
+    const selectedOption = {
+        value: selectedStatus,
+        label: selectedStatus,
+    };
     const onToggleClick = (e) => {
         setIsOpen(!isOpen);
     };
     const onSelect = (option) => {
+        if (props.isSolrSearchDown) {
+            updateFilter(dispatch, {
+                filterKey: SolrKeys.status,
+                values: [option.value],
+            });
+            setIsOpen(false);
+            return;
+        }
         const prevSelectedStatuses = Object.keys(selectedItems).filter((item) => selectedItems[item] && item);
         if (selectedItems[option.value]) {
             setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: false })));
@@ -35,7 +50,7 @@ export function StatusFilter(props) {
         }
         updateFilter(dispatch, {
             filterKey: SolrKeys.status,
-            values: [...getArchivedStatuses(), ...prevSelectedStatuses],
+            values: prevSelectedStatuses,
         });
     };
     // Use the keyboard navigator hook
@@ -50,7 +65,7 @@ export function StatusFilter(props) {
         setSelectedItems({});
         updateFilter(dispatch, {
             filterKey: SolrKeys.status,
-            values: getArchivedStatuses(),
+            values: [],
         });
     };
     const getBtnPlaceholder = (btnPlaceholder, selectedValues, type, totalLength, totalLengthString) => {
@@ -60,42 +75,53 @@ export function StatusFilter(props) {
         else if (selectedValues && selectedValues.length === 1) {
             return selectedValues[0];
         }
-        else if (selectedValues && totalLength && selectedValues.length === totalLength) {
+        else if (selectedValues && selectedValues.length === 3) {
             return t('All cases');
         }
         else {
-            const hasAllOpenSelected = PORTAL_OPEN_DISPLAY_STATUSES.every((status) => selectedValues.includes(status)) &&
-                !selectedValues.includes('Closed') &&
-                !selectedValues.includes('Archived');
-            if (hasAllOpenSelected) {
+            if (selectedValues &&
+                selectedValues.length === 2 &&
+                selectedValues.every((item) => item.includes('Waiting'))) {
                 return t('All open cases');
             }
+            else if (selectedValues && totalLength && selectedValues.length === totalLength) {
+                return totalLengthString || btnPlaceholder;
+            }
             else {
                 return `${selectedValues.length} ${type} selected`;
             }
         }
     };
-    const placeholder = getBtnPlaceholder(t('Select a status'), getSelectableStatuses(), ' ', list.length, t('All selected'));
+    const placeholder = props.isSolrSearchDown
+        ? t('Select a status')
+        : getBtnPlaceholder(t('Select a status'), (filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status]) || [], ' ', 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: true, isSelected: selectedItems[option.value], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-status-${option.value.replace(' ', '-')}` }, option.value)));
+    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-status-${option.value.replace(' ', '-')}` }, option.value)));
+    const onSingleSelectChange = (option) => {
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.status,
+            values: [option.value],
+        });
+    };
     useEffect(() => {
-        if (isEmpty(getSelectableStatuses())) {
+        var _a;
+        if (isEmpty(filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status])) {
             setSelectedItems({});
         }
-        else {
-            const selectedStatuses = getSelectableStatuses().reduce((selection, status) => {
+        else if (!props.isSolrSearchDown) {
+            const selectedStatuses = (_a = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status]) === null || _a === void 0 ? void 0 : _a.reduce((selection, status) => {
                 selection[status] = true;
                 return selection;
             }, {});
             setSelectedItems(selectedStatuses || {});
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status]]);
+    }, [filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status], props.isSolrSearchDown]);
     const titleId = 'case-list-status-filter';
     return (React.createElement("div", { className: "status-filter" },
         React.createElement("label", { htmlFor: titleId, className: "pf-v6-u-mb-sm status-filter-label" }, t(filterNamesMap[SolrKeys.status])),
-        React.createElement(Select, { shouldFocusToggleOnSelect: true, shouldPreventScrollOnItemFocus: true, id: titleId, "data-tracking-id": "status-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))));
+        props.isSolrSearchDown ? (React.createElement(SingleSelectDropdown, { id: titleId, selected: selectedOption, options: singleSelectOptions, placeholder: t('Select a status'), onSelect: onSingleSelectChange, dataTrackingId: "status-filter", isScrollable: true })) : (React.createElement(Select, { shouldFocusToggleOnSelect: true, shouldPreventScrollOnItemFocus: true, id: titleId, "data-tracking-id": "status-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/VersionsFilter.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"VersionsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/VersionsFilter.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAKhF,OAAO,EAAE,cAAc,EAAgB,MAAM,0BAA0B,CAAC;AAExE,UAAU,MAAM;IACZ,WAAW,EAAE,cAAc,CAAC;CAC/B;AAED,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,EAAE,MAAM,qBAiQrD"}
+{"version":3,"file":"VersionsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/VersionsFilter.tsx"],"names":[],"mappings":"AAeA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAIhF,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAgB,MAAM,0BAA0B,CAAC;AAoCxE,UAAU,MAAM;IACZ,WAAW,EAAE,cAAc,CAAC;IAC5B,mBAAmB,EAAE,uBAAuB,EAAE,CAAC;CAClD;AAED,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,mBAAmB,EAAE,EAAE,MAAM,qBAkO1E"}

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

@@ -1,66 +1,64 @@
-import { useApolloClient } from '@apollo/client/react';
 import { Button, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import { useSelectKeyboardNavigator } from '@rh-support/components';
-import { GlobalMetadataStateContext } from '@rh-support/react-context';
-import { compareVersions, GET_PRODUCTS, handleGraphQLVersionsResponse } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SolrKeys, SolrPivotKeys } from '../../../enums/filters';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilter } from '../CaseListFilterReducer';
-export function VersionsFilter({ productInfo }) {
+function getVersionValuesForProduct(productPivot = [], productName) {
+    return (productPivot.find((item) => item.value === productName) || {}).case_version;
+}
+//split version into parts
+function parseVersionIntoParts(version) {
+    //keep unknown version at last
+    if (version === 'Unknown')
+        return [Infinity];
+    //split dots and spaces
+    return version.split(/[.\s]/).map((p) => (isNaN(Number(p)) ? p : Number(p)));
+}
+function compareVersions(versionA, versionB) {
+    var _a, _b;
+    const pA = parseVersionIntoParts(versionA), pB = parseVersionIntoParts(versionB);
+    //compare each part
+    for (let i = 0; i < Math.max(pA.length, pB.length); i++) {
+        const a = (_a = pA[i]) !== null && _a !== void 0 ? _a : 0, b = (_b = pB[i]) !== null && _b !== void 0 ? _b : 0; //undefined as 0
+        if (a == b)
+            continue;
+        if (typeof a === 'number' && typeof b === 'number')
+            return a - b;
+        if (typeof a === 'string' && typeof b === 'string')
+            return a.localeCompare(b);
+        //one is string and other is number => string takes precendence
+        if (typeof a === 'string')
+            return -1;
+        if (typeof b == 'string')
+            return 1;
+    }
+    return 0;
+}
+export function VersionsFilter({ productInfo, productVersionPivot }) {
     const { t } = useTranslation();
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const dispatch = useContext(CaseListFilterDispatchContext);
-    const apolloClient = useApolloClient();
-    const { globalMetadataState: { allProducts }, } = useContext(GlobalMetadataStateContext);
     const [inputValue, setInputValue] = useState('');
     const [activeItem, setActiveItem] = useState(null);
     const [isOpen, setIsOpen] = useState(false);
     const [selectedItems, setSelectedItems] = useState({});
-    const [fetchedVersions, setFetchedVersions] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
     const textInputRef = useRef();
-    useEffect(() => {
-        const productObj = allProducts.data.productsResult.find((p) => p.name === productInfo.value || p.product === productInfo.value);
-        if (!(productObj === null || productObj === void 0 ? void 0 : productObj.productId))
-            return;
-        setIsLoading(true);
-        apolloClient
-            .query({
-            query: GET_PRODUCTS,
-            variables: {
-                where: { ParentProduct__c: { eq: productObj.productId }, IsActive: { eq: true } },
-                first: 200,
-                orderBy: { Name: { order: 'ASC' } },
-            },
-            fetchPolicy: 'cache-first',
-        })
-            .then(({ data }) => {
-            var _a, _b, _c, _d;
-            const edges = (_d = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.redhat_support_uiapi) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.RedHatSupportProduct2) === null || _c === void 0 ? void 0 : _c.edges) !== null && _d !== void 0 ? _d : [];
-            const versionData = handleGraphQLVersionsResponse(edges, productObj.name || productInfo.value);
-            setFetchedVersions(versionData);
-        })
-            .catch((err) => {
-            console.error('[VersionsFilter] Failed to fetch versions:', err);
-            setFetchedVersions([]);
-        })
-            .finally(() => setIsLoading(false));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [productInfo.value, allProducts.data]);
-    const list = useMemo(() => {
-        const sorted = [...fetchedVersions].sort((a, b) => compareVersions(a.name, b.name));
-        return sorted.map((version) => ({
-            value: version.name,
-            key: version.name,
-            id: version.id,
-        }));
-    }, [fetchedVersions]);
+    // Memoize versions to prevent unnecessary recalculations
+    const versions = useMemo(() => {
+        const versionValues = getVersionValuesForProduct(productVersionPivot, productInfo.value);
+        return versionValues === null || versionValues === void 0 ? void 0 : versionValues.sort((a, b) => compareVersions(a.value, b.value));
+    }, [productVersionPivot, productInfo.value]);
+    // Memoize list to prevent unnecessary recreations
+    const list = useMemo(() => (versions === null || versions === void 0 ? void 0 : versions.map((version) => ({
+        value: version.value,
+        key: version.value,
+    }))) || [], [versions]);
     const [selectOptions, setSelectOptions] = useState(list);
-    const onToggleClick = () => {
+    const onToggleClick = (e) => {
         setIsOpen(!isOpen);
     };
     const onSelect = (option) => {
@@ -74,17 +72,18 @@ export function VersionsFilter({ productInfo }) {
             setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: true })));
             prevSelectedVersions.push(option.value);
         }
-        const newVersionState = prevSelectedVersions.map((version) => {
-            const versionOption = list.find((item) => item.value === version);
-            return {
-                field: SolrKeys.version,
-                value: version,
-                productId: (versionOption === null || versionOption === void 0 ? void 0 : versionOption.id) || '',
-            };
-        });
-        const productNewState = [...((filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrPivotKeys.product_version]) || [])];
+        const newVersionState = prevSelectedVersions.map((version) => ({
+            field: SolrKeys.version,
+            value: version,
+        }));
+        const productNewState = [...filterInfo[SolrPivotKeys.product_version]];
         const objIndex = productNewState.findIndex((item) => item.value === productInfo.value);
-        productNewState[objIndex] = Object.assign(Object.assign({}, productNewState[objIndex]), { field: SolrKeys.product, value: productInfo.value, [SolrKeys.version]: newVersionState });
+        // replace product with updated versions
+        productNewState[objIndex] = {
+            field: SolrKeys.product,
+            value: productInfo.value,
+            [SolrKeys.version]: newVersionState,
+        };
         updateFilter(dispatch, { filterKey: SolrPivotKeys.product_version, values: productNewState });
     };
     // Use the keyboard navigator hook
@@ -104,7 +103,7 @@ export function VersionsFilter({ productInfo }) {
         var _a;
         setInputValue('');
         setSelectedItems({});
-        const productNewState = [...((filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrPivotKeys.product_version]) || [])];
+        const productNewState = [...filterInfo[SolrPivotKeys.product_version]];
         const objIndex = productNewState.findIndex((item) => item.value === productInfo.value);
         productNewState[objIndex] = {
             field: SolrKeys.product,
@@ -118,7 +117,7 @@ export function VersionsFilter({ productInfo }) {
     useEffect(() => {
         if (focusedItemIndex !== null && list[focusedItemIndex]) {
             const focusedItem = list[focusedItemIndex];
-            setActiveItem(`select-multi-typeahead-checkbox-${String(focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value).replace(' ', '-')}`);
+            setActiveItem(`select-multi-typeahead-checkbox-${focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value.replace(' ', '-')}`);
         }
         else {
             setActiveItem(null);
@@ -132,7 +131,7 @@ export function VersionsFilter({ productInfo }) {
     // Memoize dropdownOptions to prevent unnecessary rerenders
     const dropdownOptions = useMemo(() => {
         const optionsToRender = !isEmpty(selectOptions) ? selectOptions : list;
-        return optionsToRender.map((option, index) => option.value && (React.createElement(SelectOption, { key: option.key, value: option, hasCheckbox: true, isSelected: selectedItems[String(option.value)], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-multi-typeahead-${String(option.value).replace(' ', '-')}` }, option.value)));
+        return optionsToRender.map((option, index) => 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)));
     }, [selectOptions, list, selectedItems, focusedItemIndex]);
     // Update selectOptions when input value changes
     useEffect(() => {
@@ -157,9 +156,9 @@ export function VersionsFilter({ productInfo }) {
         setSelectedItems(selectedVersions);
     }, [productInfo.case_version]);
     const titleId = 'case-list-versions-filter';
-    return (React.createElement("div", { className: "version-filter-chip" },
+    return (React.createElement(React.Fragment, null, (!isEmpty(versions) || true) && (React.createElement("div", { className: "version-filter-chip" },
         React.createElement("label", { hidden: true, htmlFor: titleId }, t('Open versions dropdown')),
         React.createElement("div", { className: "pf-v6-c-select" },
             React.createElement(Select, { shouldFocusToggleOnSelect: true, shouldPreventScrollOnItemFocus: true, "data-tracking-id": "versions-filter", id: titleId, title: t('Version'), 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, isLoading ? React.createElement(SelectOption, { isDisabled: true }, t('Loading...')) : dropdownOptions)))));
+                React.createElement(SelectList, null, dropdownOptions)))))));
 }