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

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

@@ -0,0 +1,207 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { contacts } from '@cee-eng/hydrajs';
+import { Button, Flex, FlexItem, MenuToggle, Select, SelectGroup, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
+import { LoadingIndicator, useFetch, useSelectKeyboardNavigator } from '@rh-support/components';
+import { GlobalMetadataStateContext } from '@rh-support/react-context';
+import { getDropdownBtnPlaceholder } from '@rh-support/utils';
+import isEmpty from 'lodash/isEmpty';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { SolrKeys } from '../../../enums/filters';
+import { useCaseListDispatchContext, useCaseListStateContext } from '../CaseListContext';
+import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
+import { updateFilters } from '../CaseListFilterReducer';
+import { setChipsNameSsoMap } from '../CaseListReducer';
+import { getFilterValues, getSelectedListObj } from './CreatorSsoNameFilter';
+export default function InternalSsoNameFilter() {
+    const { t } = useTranslation();
+    const { filterInfo } = useContext(CaseListFilterStateContext);
+    const dispatch = useContext(CaseListFilterDispatchContext);
+    const { globalMetadataState: { loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
+    const { chipsNameSsoMap } = useCaseListStateContext();
+    const CaseListDispatch = useCaseListDispatchContext();
+    const own = loggedInUserRights.data.getSSOUsername();
+    const PER_PAGE = 200;
+    const ASYNC_DROPDOWN_PAGE_SIZE = 10000;
+    const { request: getInternalUserContactsList, isFetching: isFetchingInternalContacts } = useFetch(contacts.getSFDCContacts, { propgateErrors: true });
+    const abortControllerRef = useRef(undefined);
+    const internalInputRef = useRef();
+    const [internalContactList, setInternalContactList] = useState([]);
+    const [renderedList, setRenderedList] = useState([]);
+    const [isInternalOpen, setIsInternalOpen] = useState(false);
+    const [noResults, setNoResults] = useState(false);
+    const [internalQuery, setInternalQuery] = useState('');
+    const filteredOptions = getFilterValues(renderedList, own);
+    const dropdownHeader = [
+        {
+            label: `${t('Cases created by me')}`,
+            value: 'createdByMe',
+        },
+        {
+            label: `${t('Cases owned by me')}`,
+            value: 'ownedByMe',
+        },
+    ];
+    useEffect(() => {
+        setRenderedList(internalContactList.slice(0, PER_PAGE));
+    }, [internalContactList]);
+    const onSelectInternal = (contact) => {
+        if (isNull(contact) || isUndefined(contact) || contact === 'show-more')
+            return;
+        let list = [];
+        if (selectedInternalContacts.some((item) => item.value === contact.value)) {
+            list = selectedInternalContacts.filter((item) => item.value !== contact.value);
+        }
+        else {
+            list = [...selectedInternalContacts, contact];
+        }
+        onFilterChangeAsync(list);
+    };
+    const { onInputKeyDown, focusedItemIndex } = useSelectKeyboardNavigator({
+        list: [...dropdownHeader, ...filteredOptions],
+        isOpen: isInternalOpen,
+        setIsOpen: setIsInternalOpen,
+        onSelect: onSelectInternal,
+    });
+    const selectedInternalContacts = useMemo(() => getSelectedListObj(renderedList, filterInfo, own, t), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [renderedList, filterInfo, own]);
+    const onFilterChangeAsync = (items) => {
+        const selectedItems = items.map((item) => item.value);
+        const caseCreated = selectedItems
+            .filter((o) => o !== 'ownedByMe')
+            .map((o) => (o === 'createdByMe' ? own : o));
+        const caseOwnedBy = selectedItems
+            .filter((o) => o !== 'createdByMe')
+            .map((o) => (o === 'ownedByMe' ? own : o));
+        const caseOwner = loggedInUserRights.data.isInternal() && caseOwnedBy.indexOf(own) !== -1 ? [own] : [];
+        updateFilters(dispatch, [
+            {
+                filterKey: SolrKeys.createdBySsoUsername,
+                values: caseCreated,
+            },
+            {
+                filterKey: SolrKeys.caseContactSSO,
+                values: caseOwnedBy,
+            },
+            {
+                filterKey: SolrKeys.caseOwner,
+                values: caseOwner,
+            },
+        ]);
+        // set name/sso pairs on state to be used in filter chip component
+        if (loggedInUserRights.data.isInternal()) {
+            const chipsNameSsoPairs = {};
+            items.forEach((item) => {
+                var _a, _b, _c, _d;
+                const sso = item.value.value;
+                if (sso !== 'ownedByMe' && sso !== 'createdByMe' && !chipsNameSsoMap[sso]) {
+                    chipsNameSsoPairs[sso] = {
+                        firstName: ((_a = item.value) === null || _a === void 0 ? void 0 : _a.firstName) || '',
+                        lastName: ((_b = item.value) === null || _b === void 0 ? void 0 : _b.lastName) || '',
+                        firstNameCustom: ((_c = item.value) === null || _c === void 0 ? void 0 : _c.firstNameCustom) || '',
+                        lastNameCustom: ((_d = item.value) === null || _d === void 0 ? void 0 : _d.lastNameCustom) || '',
+                    };
+                }
+            });
+            setChipsNameSsoMap(CaseListDispatch, chipsNameSsoPairs);
+        }
+    };
+    const onSearchAsync = (query) => __awaiter(this, void 0, void 0, function* () {
+        if (query == null) {
+            return;
+        }
+        if (abortControllerRef.current !== undefined) {
+            // Cancel the previous request
+            abortControllerRef.current.abort();
+        }
+        // recreate a new AbortController for each call
+        let controller = new AbortController();
+        abortControllerRef.current = controller;
+        const queryParams = {
+            internal: false, // to get non-ldap contacts: false
+            limit: ASYNC_DROPDOWN_PAGE_SIZE,
+            nameLookup: query,
+        };
+        const response = yield getInternalUserContactsList(queryParams, controller.signal);
+        const contacts = response && response.items && response.items.length !== 0
+            ? response.items.filter((c) => !isEmpty(c.ssoUsername))
+            : [];
+        setNoResults(isEmpty(contacts));
+        setInternalContactList(contacts);
+    });
+    const onDisplayMoreClick = () => {
+        setRenderedList((pre) => internalContactList.slice(0, pre.length + PER_PAGE));
+        setIsInternalOpen(true);
+    };
+    const filteredInternalList = useMemo(() => {
+        return [
+            ...(isFetchingInternalContacts
+                ? [
+                    React.createElement("div", { key: "searching", className: "pf-v5-u-p-sm" },
+                        React.createElement(Trans, null, "Searching...")),
+                ]
+                : []),
+            ...(noResults && !isFetchingInternalContacts
+                ? [
+                    React.createElement("div", { key: "no-results", className: "pf-v5-u-p-sm" },
+                        React.createElement(Trans, null, "No results found")),
+                ]
+                : []),
+            ...dropdownHeader.map((contact, index) => (React.createElement(SelectOption, { key: contact.value, isFocused: focusedItemIndex === index, value: contact, hasCheckbox: true, isSelected: selectedInternalContacts.some((c) => c.value === contact.value) }, contact.label))),
+            ...(!isEmpty(filteredOptions)
+                ? [
+                    React.createElement("div", { className: "pf-v5-c-divider", role: "separator" }),
+                    React.createElement(SelectGroup, null,
+                        React.createElement("h6", { className: "pf-v5-u-pl-md" },
+                            React.createElement(Trans, null, "Created or owned by")),
+                        filteredOptions.map((contact, index) => (React.createElement(SelectOption, { key: contact.value, isFocused: focusedItemIndex === index + dropdownHeader.length, value: contact, hasCheckbox: true, isSelected: selectedInternalContacts.some((c) => c.value === contact.value) }, contact.label)))),
+                ]
+                : []),
+            ...(renderedList.length < internalContactList.length
+                ? [
+                    React.createElement("div", { className: "pf-v5-c-divider", role: "separator" }),
+                    React.createElement(SelectOption, { key: "show-more", value: 'show-more', onClick: onDisplayMoreClick },
+                        React.createElement(Flex, { justifyContent: { default: 'justifyContentCenter' } },
+                            React.createElement(FlexItem, null,
+                                React.createElement(Button, { variant: "link", isInline: true },
+                                    React.createElement(Trans, null, "Display additional results"))))),
+                ]
+                : []),
+        ];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        internalContactList,
+        own,
+        selectedInternalContacts,
+        renderedList,
+        focusedItemIndex,
+        isFetchingInternalContacts,
+        noResults,
+    ]);
+    const onInternalQueryChange = (_v, query) => {
+        setInternalQuery(query);
+        onSearchAsync(query);
+    };
+    const onInternalToggle = (e) => {
+        e.stopPropagation();
+        setIsInternalOpen((pre) => !pre);
+    };
+    const internalToggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "typeahead", onClick: onInternalToggle, innerRef: toggleRef, isExpanded: isInternalOpen, isFullWidth: true },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, { value: internalQuery, onClick: onInternalToggle, onKeyDown: onInputKeyDown, placeholder: getDropdownBtnPlaceholder(t('Search for a name'), selectedInternalContacts.map((i) => i.label), ' ', filteredInternalList.length, t('All selected')), onChange: onInternalQueryChange, isExpanded: isInternalOpen, innerRef: internalInputRef, "aria-controls": "internal-ssousername-filter", role: "combobox" }),
+            React.createElement(TextInputGroupUtilities, null, !isEmpty(internalQuery) && (React.createElement(Button, { variant: "plain", onClick: () => setInternalQuery(''), isDisabled: isFetchingInternalContacts, "aria-label": t('Clear') }, isFetchingInternalContacts ? (React.createElement(LoadingIndicator, { show: true, size: "sm" })) : (React.createElement(TimesCircleIcon, { "aria-hidden": true }))))))));
+    return (React.createElement(Select, { id: "internal-ssousername-filter", "data-tracking-id": "internal-ssousername-filter", isOpen: isInternalOpen, onOpenChange: () => setIsInternalOpen(false), toggle: internalToggle, popperProps: { direction: 'down', enableFlip: false }, isScrollable: true, onSelect: (_e, v) => onSelectInternal(v) },
+        React.createElement(SelectList, null, filteredInternalList)));
+}

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

@@ -1,9 +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, productVersionPivot }: IProps): 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":"AASA,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,eAgElF"}
+{"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,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,qBAgElF"}

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

@@ -30,6 +30,6 @@ export function ProductFilterChip({ productList, productVersionPivot = [] }) {
         canAccessVersionsFilter ? (React.createElement(React.Fragment, null, productList.map((currentProduct, index) => (React.createElement(ChipGroup, { numChips: 10, key: `${currentProduct.value}-${index}`, categoryName: currentProduct.value },
             React.createElement(VersionsFilter, { productInfo: currentProduct, productVersionPivot: productVersionPivot }),
             currentProduct[SolrKeys.version].map((chip) => (React.createElement(Chip, { key: chip.value, onClick: () => deleteVersion(currentProduct, chip) }, chip.value))),
-            React.createElement(Button, { className: "pf-c-button__icon", variant: ButtonVariant.plain, "aria-label": "Remove product", onClick: () => deleteProduct(currentProduct) },
+            React.createElement(Button, { className: "pf-v5-c-button__icon", variant: ButtonVariant.plain, "aria-label": "Remove product", onClick: () => deleteProduct(currentProduct) },
                 React.createElement(TimesCircleIcon, { "aria-hidden": "true" }))))))) : (React.createElement(ChipGroup, { numChips: 10, categoryName: "Product", key: "products" }, productList.map((currentProduct, index) => (React.createElement(Chip, { key: `${currentProduct.value}-${index}`, onClick: () => 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 IProps {
     filterValues: IFacetResponse[];
     isSolrSearchDown: boolean;
     allProducts: string[];
 }
-export declare function ProductsFilter(props: IProps): JSX.Element;
+export declare function ProductsFilter(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=ProductsFilter.d.ts.map

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":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAW1D,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,eA8G3C"}
+{"version":3,"file":"ProductsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/ProductsFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG1D,OAAO,KAA+B,MAAM,OAAO,CAAC;AAQpD,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,qBAgH3C"}

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

@@ -1,4 +1,5 @@
-import { Checkbox, Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Checkbox } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { getDropdownBtnPlaceholder } from '@rh-support/utils';
 import isUndefined from 'lodash/isUndefined';
 import React, { useContext, useState } from 'react';
@@ -34,7 +35,7 @@ export function ProductsFilter(props) {
     // we get filter values from hydra metadata api
     const singleSelectSolrIsDown = () => {
         var _a, _b;
-        return (React.createElement(Select, { variant: SelectVariant.single, "aria-label": t('Select Input'), onToggle: toggleIsOpen, onSelect: onFilterChangeSingleSelect, selections: (_b = (_a = filterInfo[SolrPivotKeys.product_version]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value, isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Select a product'), "data-tracking-id": "products-filter", id: "products-filter" }, allProducts.map((product) => (React.createElement(SelectOption, { key: product, value: product })))));
+        return (React.createElement(Select, { variant: SelectVariant.single, "aria-label": t('Select Input'), onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onFilterChangeSingleSelect, selections: (_b = (_a = filterInfo[SolrPivotKeys.product_version]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value, isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Select a product'), "data-tracking-id": "products-filter", id: "products-filter" }, allProducts.map((product) => (React.createElement(SelectOption, { key: product, value: product })))));
     };
     const onSelect = (e, selection) => {
         let newSelectedProducts = [];
@@ -58,12 +59,13 @@ export function ProductsFilter(props) {
     const onFilter = (_, value) => {
         if (!value)
             return getProductSelectOptions(productOptions);
-        const input = new RegExp(value, 'i');
+        const formattedValue = value === null || value === void 0 ? void 0 : value.replace(/\\/g, ''); // Removes '\' from search query as it creates SyntaxError for RegEx
+        const input = new RegExp(formattedValue, 'i');
         const newOptions = productOptions.filter((product) => input.test(product.value));
         return getProductSelectOptions(newOptions);
     };
-    const multiSelectNew = () => (React.createElement(Select, { "aria-label": t('Select Input'), id: titleId, variant: SelectVariant.typeaheadMulti, onToggle: toggleIsOpen, onSelect: onSelect, isOpen: isOpen, placeholderText: getDropdownBtnPlaceholder(t('Select a product'), filterInfo[SolrPivotKeys.product_version].map((i) => i.value), '', props.filterValues.length, t('All selected')), onFilter: onFilter }, getProductSelectOptions(productOptions)));
-    return (React.createElement("div", { className: "pf-c-select" },
+    const multiSelectNew = () => (React.createElement(Select, { "aria-label": t('Select Input'), id: titleId, variant: SelectVariant.typeaheadMulti, onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onSelect, isOpen: isOpen, placeholderText: getDropdownBtnPlaceholder(t('Select a product'), filterInfo[SolrPivotKeys.product_version].map((i) => i.value), '', props.filterValues.length, t('All selected')), onFilter: onFilter }, getProductSelectOptions(productOptions)));
+    return (React.createElement("div", { className: "pf-v5-c-select" },
         React.createElement("label", { htmlFor: titleId }, t(filterNamesMap[SolrKeys.product])),
         isSolrSearchDown ? singleSelectSolrIsDown() : multiSelectNew()));
 }

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

@@ -1,9 +1,10 @@
 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): JSX.Element;
+export declare function SeverityFilter(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=SeverityFilter.d.ts.map

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":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAU1D,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,eA8E3C"}
+{"version":3,"file":"SeverityFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/SeverityFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,OAAO,KAA+B,MAAM,OAAO,CAAC;AAQpD,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,qBA8E3C"}

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

@@ -1,4 +1,4 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { getDropdownBtnPlaceholder } from '@rh-support/utils';
 import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -25,9 +25,9 @@ export function SeverityFilter(props) {
     const titleId = 'case-list-severity-filter';
     // solr is down and solr filter values are not available
     // we get filter values from hydra metadata api
-    const singleSelectSolrIsDown = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.single, "aria-label": "Select Input", onToggle: toggleIsOpen, onSelect: onFilterChangeSingleSelect, selections: filterInfo[SolrKeys.severity][0], isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Select a severity'), "data-tracking-id": "severity-filter", hasPlaceholderStyle: true }, props.allCaseSeverities.map((severity) => (React.createElement(SelectOption, { key: severity, value: severity })))));
-    const multiSelect = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.checkbox, "aria-label": t('Select a severity'), onToggle: toggleIsOpen, onSelect: onFilterChangeMultipleSelect, selections: filterInfo[SolrKeys.severity], isOpen: isOpen, placeholderText: getDropdownBtnPlaceholder(t('Select a severity'), filterInfo[SolrKeys.severity], ' ', props.filterValues.length, t('All selected')), isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "severity-filter", hasPlaceholderStyle: true }, props.filterValues.map((filterValue) => (React.createElement(SelectOption, { key: filterValue.value, value: filterValue.value })))));
-    return (React.createElement("div", { className: "pf-c-select" },
+    const singleSelectSolrIsDown = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.single, "aria-label": "Select Input", onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onFilterChangeSingleSelect, selections: filterInfo[SolrKeys.severity][0], isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Select a severity'), "data-tracking-id": "severity-filter", hasPlaceholderStyle: true }, props.allCaseSeverities.map((severity) => (React.createElement(SelectOption, { key: severity, value: severity })))));
+    const multiSelect = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.checkbox, "aria-label": t('Select a severity'), onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onFilterChangeMultipleSelect, selections: filterInfo[SolrKeys.severity], isOpen: isOpen, placeholderText: getDropdownBtnPlaceholder(t('Select a severity'), filterInfo[SolrKeys.severity], ' ', props.filterValues.length, t('All selected')), isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "severity-filter", hasPlaceholderStyle: true }, props.filterValues.map((filterValue) => (React.createElement(SelectOption, { key: filterValue.value, value: filterValue.value })))));
+    return (React.createElement("div", { className: "pf-v5-c-select" },
         React.createElement("label", { htmlFor: titleId }, t(filterNamesMap[SolrKeys.severity])),
         props.isSolrSearchDown ? singleSelectSolrIsDown() : multiSelect()));
 }

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

@@ -1,4 +1,5 @@
 import { IFacetResponse } from '@rh-support/types/shared';
+import React from 'react';
 interface IProps {
     filterValues: IFacetResponse[];
     isSolrSearchDown: boolean;
@@ -8,6 +9,6 @@ export interface IStatusFilterOptions {
     key: string;
     value: string;
 }
-export declare function StatusFilter(props: IProps): JSX.Element;
+export declare function StatusFilter(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=StatusFilter.d.ts.map

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":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAQ1D,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,eA4GzC"}
+{"version":3,"file":"StatusFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/StatusFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,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,qBA4GzC"}

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

@@ -1,4 +1,4 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SolrKeys } from '../../../enums/filters';
@@ -48,9 +48,9 @@ export function StatusFilter(props) {
     const titleId = 'case-list-status-filter';
     // solr is down and solr filter values are not available
     // we get filter values from hydra metadata api
-    const singleSelectSolrIsDown = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.single, "aria-label": "Select Input", onToggle: toggleIsOpen, onSelect: onFilterChangeSingleSelect, selections: filterInfo[SolrKeys.status][0], isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Select a status'), "data-tracking-id": "status-filter", hasPlaceholderStyle: true }, props.allCaseStatuses.map((status) => (React.createElement(SelectOption, { key: status, value: status })))));
-    const multiSelect = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.checkbox, "aria-label": t('Select a status'), onToggle: toggleIsOpen, onSelect: onFilterChange, selections: filterInfo[SolrKeys.status], isOpen: isOpen, placeholderText: getBtnPlaceholder(t('Select a status'), filterInfo[SolrKeys.status], ' ', props.filterValues.length, t('All selected')), isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "status-filter", hasPlaceholderStyle: true }, props.filterValues.map((filterValue) => (React.createElement(SelectOption, { key: filterValue.value, value: filterValue.value })))));
-    return (React.createElement("div", { className: "pf-c-select" },
+    const singleSelectSolrIsDown = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.single, "aria-label": "Select Input", onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onFilterChangeSingleSelect, selections: filterInfo[SolrKeys.status][0], isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Select a status'), "data-tracking-id": "status-filter", hasPlaceholderStyle: true }, props.allCaseStatuses.map((status) => (React.createElement(SelectOption, { key: status, value: status })))));
+    const multiSelect = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.checkbox, "aria-label": t('Select a status'), onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onFilterChange, selections: filterInfo[SolrKeys.status], isOpen: isOpen, placeholderText: getBtnPlaceholder(t('Select a status'), filterInfo[SolrKeys.status], ' ', props.filterValues.length, t('All selected')), isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "status-filter", hasPlaceholderStyle: true }, props.filterValues.map((filterValue) => (React.createElement(SelectOption, { key: filterValue.value, value: filterValue.value })))));
+    return (React.createElement("div", { className: "pf-v5-c-select" },
         React.createElement("label", { htmlFor: titleId }, t(filterNamesMap[SolrKeys.status])),
         props.isSolrSearchDown ? singleSelectSolrIsDown() : multiSelect()));
 }

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

@@ -1,6 +1,7 @@
+import React from 'react';
 interface IProps {
     allCaseTypes: string[];
 }
-export declare function TypeFilter(props: IProps): JSX.Element;
+export declare function TypeFilter(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=TypeFilter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TypeFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/TypeFilter.tsx"],"names":[],"mappings":"AAUA,UAAU,MAAM;IACZ,YAAY,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAyDvC"}
+{"version":3,"file":"TypeFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/TypeFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAQpD,UAAU,MAAM;IACZ,YAAY,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,qBAyDvC"}

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

@@ -1,4 +1,4 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { getDropdownBtnPlaceholder, toNewCaseTypeMapper, toOldCaseTypeSwitcher } from '@rh-support/utils';
 import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,7 +27,7 @@ export function TypeFilter(props) {
     // To switch from old case type to new support type
     const newCaseTypesArray = toNewCaseTypeMapper(props.allCaseTypes).sort();
     const toNewCaseTypesFilter = toNewCaseTypeMapper(filterInfo[SolrKeys.type]);
-    return (React.createElement("div", { className: "pf-c-select" },
+    return (React.createElement("div", { className: "pf-v5-c-select" },
         React.createElement("label", { htmlFor: titleId }, t(filterNamesMap[SolrKeys.type])),
-        React.createElement(Select, { id: titleId, variant: SelectVariant.checkbox, "aria-label": t('Select a support type'), onToggle: toggleIsOpen, onSelect: onFilterChangeMultipleSelect, selections: toNewCaseTypesFilter, isOpen: isOpen, placeholderText: getDropdownBtnPlaceholder(t('Select a support type'), toNewCaseTypesFilter, ' ', props.allCaseTypes.length, t('All selected')), isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "type-filter", hasPlaceholderStyle: true }, newCaseTypesArray.map((filterValue) => (React.createElement(SelectOption, { key: filterValue, value: filterValue }))))));
+        React.createElement(Select, { id: titleId, variant: SelectVariant.checkbox, "aria-label": t('Select a support type'), onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onFilterChangeMultipleSelect, selections: toNewCaseTypesFilter, isOpen: isOpen, placeholderText: getDropdownBtnPlaceholder(t('Select a support type'), toNewCaseTypesFilter, ' ', props.allCaseTypes.length, t('All selected')), isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "type-filter", hasPlaceholderStyle: true }, newCaseTypesArray.map((filterValue) => (React.createElement(SelectOption, { key: filterValue, value: filterValue }))))));
 }

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

@@ -1,9 +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, productVersionPivot }: IProps): 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":"AAMA,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAgB,MAAM,0BAA0B,CAAC;AAMxE,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,eA4D1E"}
+{"version":3,"file":"VersionsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/VersionsFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAI7D,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,qBA+D1E"}

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

@@ -1,6 +1,6 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import isEmpty from 'lodash/isEmpty';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SolrKeys, SolrPivotKeys } from '../../../enums/filters';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
@@ -8,6 +8,34 @@ import { updateFilter } from '../CaseListFilterReducer';
 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);
@@ -29,9 +57,12 @@ export function VersionsFilter({ productInfo, productVersionPivot }) {
         };
         updateFilter(dispatch, { filterKey: SolrPivotKeys.product_version, values: productNewState });
     };
-    const versions = getVersionValuesForProduct(productVersionPivot, productInfo.value);
+    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]);
     const titleId = 'case-list-versions-filter';
     return (React.createElement(React.Fragment, null, !isEmpty(versions) && (React.createElement(React.Fragment, null,
         React.createElement("label", { hidden: true, htmlFor: titleId }, t('Open versions dropdown')),
-        React.createElement(Select, { className: "version-filter-chip", variant: SelectVariant.checkbox, "aria-label": t('Version'), onToggle: toggleIsOpen, onSelect: onFilterChange, selections: productInfo.case_version.map((ver) => ver.value), isOpen: isOpen, placeholderText: 'Version', isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "versions-filter", hasPlaceholderStyle: true }, (versions || []).map((filterValue) => (React.createElement(SelectOption, { key: filterValue.value, value: filterValue.value, component: "div" }))))))));
+        React.createElement(Select, { className: "version-filter-chip", variant: SelectVariant.checkbox, "aria-label": t('Version'), onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onFilterChange, selections: productInfo.case_version.map((ver) => ver.value), isOpen: isOpen, placeholderText: 'Version', isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "versions-filter", hasPlaceholderStyle: true }, (versions || []).map((filterValue) => (React.createElement(SelectOption, { key: filterValue.value, value: filterValue.value, component: "div" }))))))));
 }

package/lib/esm/components/case-list/case-list-table/CaseListTable.d.ts

@@ -1,6 +1,7 @@
 import { ICaseGroup } from '@cee-eng/hydrajs/@types/api/public/caseGroups';
 import { ISolrResponse } from '@rh-support/types/shared';
 import { UserAuth } from '@rh-support/user-permissions';
+import React from 'react';
 import { ICaseListResponse } from '../../../models/caseList';
 import { IPaginationInfo, ISortInfo } from '../CaseListFilterReducer';
 interface IProps {
@@ -13,6 +14,6 @@ interface IProps {
     hasError: boolean;
     isSolrDown?: boolean;
 }
-export declare function CaseListTable(props: IProps): JSX.Element;
+export declare function CaseListTable(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=CaseListTable.d.ts.map

package/lib/esm/components/case-list/case-list-table/CaseListTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseListTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-table/CaseListTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AA6B3E,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAWxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAEH,eAAe,EACf,SAAS,EAIZ,MAAM,0BAA0B,CAAC;AA2BlC,UAAU,MAAM;IACZ,QAAQ,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3C,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,kBAAkB,EAAE,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,eAmX1C"}
+{"version":3,"file":"CaseListTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-table/CaseListTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAuB3E,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAQxD,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,iBAAiB,EAAyB,MAAM,0BAA0B,CAAC;AAEpF,OAAO,EAEH,eAAe,EACf,SAAS,EAIZ,MAAM,0BAA0B,CAAC;AA6BlC,UAAU,MAAM;IACZ,QAAQ,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3C,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,kBAAkB,EAAE,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAsBD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBA4jB1C"}