@rh-support/cases 2.1.25 → 2.1.28

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

@@ -0,0 +1,183 @@
+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, 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 { isUndefined } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+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 [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 (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);
+        setInternalQuery('');
+    };
+    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,
+            limit: ASYNC_DROPDOWN_PAGE_SIZE,
+            nameLookup: query,
+        };
+        const response = yield getInternalUserContactsList(queryParams, controller.signal);
+        const contacts = response && response.items && response.items.length !== 0
+            ? response.items.filter((c) => !isEmpty(c.ssoUsername))
+            : [];
+        setInternalContactList(contacts);
+    });
+    const onDisplayMoreClick = () => {
+        setRenderedList((pre) => internalContactList.slice(0, pre.length + PER_PAGE));
+        setIsInternalOpen(true);
+    };
+    const filteredInternalList = useMemo(() => {
+        return [
+            ...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("h3", { className: "subheading subheading-sm 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]);
+    const onInternalQueryChange = (_v, query) => {
+        setInternalQuery(query);
+        onSearchAsync(query);
+    };
+    const onInternalToggle = () => {
+        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 contacts')), onChange: onInternalQueryChange, isExpanded: isInternalOpen, innerRef: internalInputRef }),
+            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) }, filteredInternalList));
+}

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.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;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"}

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 = [];
@@ -62,8 +63,8 @@ export function ProductsFilter(props) {
         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.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.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.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.js

@@ -1,4 +1,4 @@
-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 { useTranslation } from 'react-i18next';
@@ -33,5 +33,5 @@ export function VersionsFilter({ productInfo, productVersionPivot }) {
     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

@@ -12,6 +12,7 @@ interface IProps {
     isCaseListPageLoading: boolean;
     hasError: boolean;
     isSolrDown?: boolean;
+    isXXLScreen?: boolean;
 }
 export declare function CaseListTable(props: IProps): JSX.Element;
 export {};

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;AA8B3E,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;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,eA0X1C"}

package/lib/esm/components/case-list/case-list-table/CaseListTable.js

@@ -1,4 +1,4 @@
-import { Bullseye, Button, EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateVariant, PaginationVariant, Title, } from '@patternfly/react-core';
+import { Bullseye, Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, PaginationVariant, } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { PFTable, Table, TableColumnSelector, TablePagination, } from '@rh-support/components';
 import { GlobalMetadataDispatchContext, GlobalMetadataStateContext, updateUserPreferences, useGlobalStateContext, UserPreferencesKeys, } from '@rh-support/react-context';
@@ -75,7 +75,7 @@ export function CaseListTable(props) {
         },
         {
             id: CaseListColumnIds.summary,
-            cellWidth: 10,
+            cellWidth: props.isXXLScreen ? 30 : 10,
             title: t('Issue summary'),
             sortable: true,
             accessor: (data) => data.case_summary,
@@ -259,15 +259,14 @@ export function CaseListTable(props) {
                     props: { colSpan: 9 },
                     title: (React.createElement(Bullseye, null,
                         React.createElement(EmptyState, { variant: EmptyStateVariant.full },
-                            React.createElement(EmptyStateIcon, { icon: SearchIcon }),
-                            React.createElement(Title, { headingLevel: "h2", size: "lg" },
-                                React.createElement(Trans, null, isInternal && (!showingFilter || !hasSearchQuery)
-                                    ? 'No results found'
-                                    : 'No information to display')),
+                            React.createElement(EmptyStateHeader, { titleText: React.createElement(React.Fragment, null,
+                                    React.createElement(Trans, null, isInternal && (!showingFilter || !hasSearchQuery)
+                                        ? 'No results found'
+                                        : 'No information to display')), icon: React.createElement(EmptyStateIcon, { icon: SearchIcon }), headingLevel: "h2" }),
                             React.createElement(EmptyStateBody, null,
                                 React.createElement(Trans, null, getEmptyStateErrMessage())),
-                            (showingFilter || hasSearchQuery) && (React.createElement(Button, { variant: "link", onClick: clearAllFilters },
-                                React.createElement(Trans, null, "Clear all")))))),
+                            React.createElement(EmptyStateFooter, null, (showingFilter || hasSearchQuery) && (React.createElement(Button, { variant: "link", onClick: clearAllFilters },
+                                React.createElement(Trans, null, "Clear all"))))))),
                 },
             ],
         },
@@ -291,14 +290,14 @@ export function CaseListTable(props) {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(Table, { columns: columns, data: caseListData, selectedColumns: selectedColumns },
-            React.createElement("div", { className: "case-list-table-toolbar pf-l-flex", ref: tableToolbarRef },
-                React.createElement("div", { className: "toolbar-actions pf-l-flex pf-m-space-items-sm" },
+            React.createElement("div", { className: "case-list-table-toolbar pf-v5-l-flex", ref: tableToolbarRef },
+                React.createElement("div", { className: "toolbar-actions pf-v5-l-flex pf-m-space-items-sm" },
                     React.createElement(TableColumnSelector, { onColumnSelectorChange: onColumnSelectorChange }),
                     React.createElement(ExportCaseListCSV, { currentFilteredCaseList: props.caseList, isExportCsvDisabled: props.isSolrDown }),
                     React.createElement(CloseCaseBtn, { selectedCases: selectedCases, caseList: caseListData, onCasesCloseSuccess: onCasesCloseSuccess })),
                 React.createElement("span", { className: "toolbar-pagination" },
                     React.createElement(TablePagination, { perPage: (_c = props.paginationInfo) === null || _c === void 0 ? void 0 : _c.pageSize, currentPage: (_d = props.paginationInfo) === null || _d === void 0 ? void 0 : _d.currentPage, onPerPageSelect: onPerPageSelect, onSetPage: onSetPage, variant: PaginationVariant.top, itemCount: getItemCount() }))),
-            React.createElement("div", { className: "pf-c-scroll-inner-wrapper" },
+            React.createElement("div", { className: "pf-v5-c-scroll-inner-wrapper" },
                 React.createElement(PFTable, { "aria-label": "case-list", className: "case-list-table", pagination: false, onRowClick: onRowClick, onSortChange: onSortChange, onSelect: onRowSelect, emptyStateRow: noResultFoundRow, sortInfo: props.sortInfo, isLoading: props.isCaseListPageLoading })),
             caseListData.length > 9 && (React.createElement("footer", { className: "toolbar-pagination" },
                 React.createElement(TablePagination, { perPage: (_e = props === null || props === void 0 ? void 0 : props.paginationInfo) === null || _e === void 0 ? void 0 : _e.pageSize, currentPage: (_f = props === null || props === void 0 ? void 0 : props.paginationInfo) === null || _f === void 0 ? void 0 : _f.currentPage, onPerPageSelect: onPerPageSelect, onSetPage: onBottomPaginationSetPage, variant: PaginationVariant.bottom, itemCount: getItemCount() }))))));

package/lib/esm/components/case-list/case-list-table/ExportCaseListCSV.js

@@ -115,5 +115,5 @@ export function ExportCaseListCSV(props) {
     return (React.createElement("span", { title: (props.isExportCsvDisabled && getTooltipContent()) || '' },
         React.createElement(Button, { variant: "tertiary", isDisabled: isBtnDisabled || props.isExportCsvDisabled, onClick: loggedInUsersAccount.data.secureSupport ? onExportCSVClickSecureSupport : onExportCSVClick, title: btnTitle, "data-tracking-id": "case-list-toolbar-export-csv" }, isFetchingCSVData ? (React.createElement(React.Fragment, null,
             React.createElement(Trans, null, "Exporting CSV"),
-            React.createElement(Spinner, { isSVG: true, size: "md", "aria-label": "loading", className: "export-csv-loader pf-u-ml-xs" }))) : (React.createElement(Trans, null, "Export CSV")))));
+            React.createElement(Spinner, { size: "md", "aria-label": "loading", className: "export-csv-loader pf-v5-u-ml-xs" }))) : (React.createElement(Trans, null, "Export CSV")))));
 }

package/lib/esm/components/case-list/case-search/AdvanceSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdvanceSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/AdvanceSearch.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAIhE,UAAU,MAAM;IACZ,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,0BAA0B,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,eA8S1C"}
+{"version":3,"file":"AdvanceSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/AdvanceSearch.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAIhE,UAAU,MAAM;IACZ,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,0BAA0B,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,eAkT1C"}

package/lib/esm/components/case-list/case-search/AdvanceSearch.js

@@ -211,18 +211,18 @@ export function AdvanceSearch(props) {
     };
     const isQueryInValid = inputString && !isParsingSuccessful;
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "pf-c-select pf-m-expanded", ref: dropdownWrapperRef },
-            React.createElement("div", { className: "pf-c-select__toggle pf-m-typeahead" },
-                React.createElement("div", { className: "pf-c-select__toggle-wrapper" },
-                    React.createElement("input", { value: inputString, onChange: onQueryStringChange, onFocus: onInputFocus, ref: searchInputRef, onKeyDown: onKeyDown, placeholder: t('i18nEnterSolrQuery', 'Enter SOLR query, for example:  severity:"1 (Urgent)" and status:"Waiting on Customer"'), className: `pf-c-form-control pf-c-select__toggle-typeahead ${inputString && isParsingSuccessful ? 'pf-m-success' : ''}`, type: "text", "aria-invalid": isQueryInValid ? true : false, autoComplete: "off", id: "advance-search-typeahead", "aria-label": t('Enter search query'), "aria-describedby": "advance-query-error-helper" })),
-                inputString && (React.createElement(Button, { onClick: onClear, className: "pf-c-button pf-m-plain pf-c-select__toggle-clear", variant: "plain", "data-tracking-id": "clear-search", "aria-label": t('Clear this search') },
+        React.createElement("div", { className: "pf-v5-c-select pf-m-expanded", ref: dropdownWrapperRef },
+            React.createElement("div", { className: "pf-v5-c-select__toggle pf-m-typeahead" },
+                React.createElement("div", { className: "pf-v5-c-select__toggle-wrapper" },
+                    React.createElement("input", { value: inputString, onChange: onQueryStringChange, onFocus: onInputFocus, ref: searchInputRef, onKeyDown: onKeyDown, placeholder: t('i18nEnterSolrQuery', 'Enter SOLR query, for example:  severity:"1 (Urgent)" and status:"Waiting on Customer"'), className: `pf-v5-c-form-control pf-v5-c-select__toggle-typeahead ${inputString && isParsingSuccessful ? 'pf-m-success' : ''}`, type: "text", "aria-invalid": isQueryInValid ? true : false, autoComplete: "off", id: "advance-search-typeahead", "aria-label": t('Enter search query'), "aria-describedby": "advance-query-error-helper" })),
+                inputString && (React.createElement(Button, { onClick: onClear, className: "pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear", variant: "plain", "data-tracking-id": "clear-search", "aria-label": t('Clear this search') },
                     React.createElement(TimesCircleIcon, null)))),
-            isAutoCompleteListVisible && (React.createElement("ul", { className: "pf-c-select__menu", "aria-labelledby": "advance-search-typeahead-label", role: "listbox" }, autoCompleteList.map((item, index) => (React.createElement("li", { key: index, role: "presentation", className: `pf-c-select__menu-wrapper ${selectedItemIndex === index ? 'pf-m-focus' : ''}` },
-                React.createElement("button", { type: "button", onClick: (e) => onItemClick(item.value), className: "pf-c-select__menu-item", "aria-selected": selectedItemIndex === index ? true : false, role: "option" }, item.display))))))),
-        React.createElement(Button, { type: "button", variant: "primary", "data-tracking-id": "case-list-adv-search-button", className: "pf-u-ml-sm", onClick: onSearchSubmit, isDisabled: isAdvancedSearchButtonDisabled },
+            isAutoCompleteListVisible && (React.createElement("ul", { className: "pf-v5-c-select__menu", "aria-labelledby": "advance-search-typeahead-label", role: "listbox" }, autoCompleteList.map((item, index) => (React.createElement("li", { key: index, role: "presentation", className: `pf-v5-c-select__menu-wrapper ${selectedItemIndex === index ? 'pf-m-focus' : ''}` },
+                React.createElement("button", { type: "button", onClick: (e) => onItemClick(item.value), className: "pf-v5-c-select__menu-item", "aria-selected": selectedItemIndex === index ? true : false, role: "option" }, item.display))))))),
+        React.createElement(Button, { type: "button", variant: "primary", "data-tracking-id": "case-list-adv-search-button", className: "pf-v5-u-ml-sm", onClick: onSearchSubmit, isDisabled: isAdvancedSearchButtonDisabled },
             React.createElement(Trans, null, "Search")),
         React.createElement(Button, { variant: "link", onClick: onBasicClick, "data-tracking-id": "case-list-basic-toggle-button" },
             React.createElement(Trans, null, "Basic")),
-        React.createElement(Button, { variant: "link", className: "pf-u-px-0", component: "a", rel: "noopener noreferrer", target: "_blank", href: "https://source.redhat.com/communitiesatredhat/applications/integration-community-of-practice/all/testallin/all_in_blog/advanced_search_in_the_customer_support_tool", "data-tracking-id": "advance-search-guide" },
+        React.createElement(Button, { variant: "link", className: "pf-v5-u-px-0", component: "a", rel: "noopener noreferrer", target: "_blank", href: "https://source.redhat.com/communitiesatredhat/applications/integration-community-of-practice/all/testallin/all_in_blog/advanced_search_in_the_customer_support_tool", "data-tracking-id": "advance-search-guide" },
             React.createElement(InfoIcon, null))));
 }

package/lib/esm/components/case-list/case-search/BookmarkedSearchesSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BookmarkedSearchesSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/BookmarkedSearchesSelector.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAahE,UAAU,MAAM;IACZ,uBAAuB,EAAE,MAAM,CAAC;IAChC,iBAAiB,EAAE,mBAAmB,CAAC;IACvC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,sBAAsB,EAAE,MAAM,CAAC;CAClC;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,eAgTvD"}
+{"version":3,"file":"BookmarkedSearchesSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/BookmarkedSearchesSelector.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAahE,UAAU,MAAM;IACZ,uBAAuB,EAAE,MAAM,CAAC;IAChC,iBAAiB,EAAE,mBAAmB,CAAC;IACvC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,sBAAsB,EAAE,MAAM,CAAC;CAClC;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,eAgTvD"}

package/lib/esm/components/case-list/case-search/BookmarkedSearchesSelector.js

@@ -7,7 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Button, ButtonVariant, Dropdown, DropdownItem, DropdownSeparator, DropdownToggle, DropdownToggleAction, Split, SplitItem, } from '@patternfly/react-core';
+import { Button, ButtonVariant, Split, SplitItem } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownSeparator, DropdownToggle, DropdownToggleAction, } from '@patternfly/react-core/deprecated';
 import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
 import StarIcon from '@patternfly/react-icons/dist/js/icons/star-icon';
 import { ConfirmationServiceProvider } from '@rh-support/components';
@@ -166,16 +167,16 @@ export function BookmarkedSearchesSelector(props) {
         .sort()
         .map((bookmarkedSearch) => {
         var _a;
-        return (React.createElement("li", { className: "pf-c-dropdown__menu-item pf-u-p-xs", key: bookmarkedSearch },
+        return (React.createElement("li", { className: "pf-v5-c-dropdown__menu-item pf-v5-u-p-xs", key: bookmarkedSearch },
             React.createElement(Split, { key: `split-parent-${bookmarkedSearch}` },
                 React.createElement(SplitItem, { isFilled: true, key: `split-left-${bookmarkedSearch}` },
-                    React.createElement(Button, { variant: ButtonVariant.plain, isBlock: true, className: "pf-u-text-align-left", onClick: onBookmarkSelectorChange(bookmarkedSearch, bookmarkedSearches[bookmarkedSearch], true) },
-                        ((_a = bookmarkedSearches[bookmarkedSearch]) === null || _a === void 0 ? void 0 : _a.defaultChecked) && (React.createElement(StarIcon, { title: "{t('Default search')}", color: "#F0AB00", className: "pf-u-mr-sm", "aria-label": t('Default search') })),
+                    React.createElement(Button, { variant: ButtonVariant.plain, isBlock: true, className: "pf-v5-u-text-align-left", onClick: onBookmarkSelectorChange(bookmarkedSearch, bookmarkedSearches[bookmarkedSearch], true) },
+                        ((_a = bookmarkedSearches[bookmarkedSearch]) === null || _a === void 0 ? void 0 : _a.defaultChecked) && (React.createElement(StarIcon, { title: "{t('Default search')}", color: "#F0AB00", className: "pf-v5-u-mr-sm", "aria-label": t('Default search') })),
                         ' ',
                         bookmarkedSearch)),
                 React.createElement(SplitItem, { key: `split-right-${bookmarkedSearch}` },
                     ' ',
-                    React.createElement(Button, { "aria-label": t('Edit or delete saved search'), className: "pf-u-pr-sm", onClick: onEditSavedSearchClick(bookmarkedSearch), variant: ButtonVariant.link, icon: React.createElement(PencilAltIcon, null) })))));
+                    React.createElement(Button, { "aria-label": t('Edit or delete saved search'), className: "pf-v5-u-pr-sm", onClick: onEditSavedSearchClick(bookmarkedSearch), variant: ButtonVariant.link, icon: React.createElement(PencilAltIcon, null) })))));
     });
     const renderMostRecentSearch = [
         React.createElement(DropdownItem, { key: "most-recent-search", component: "button", onClick: onBookmarkSelectorChange('', mostRecentSearch, true) },

package/lib/esm/components/case-list/case-search/CaseSearch.js

@@ -94,7 +94,7 @@ export function CaseSearch(props) {
     const renderBasicSearch = () => {
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: "case-search-input-container" },
-                React.createElement(SearchInput, { className: "pf-u-w-100", placeholder: t('Search by keyword or case ID'), value: searchVal === null || searchVal === void 0 ? void 0 : searchVal.trim(), "data-tracking-id": "search-cases-text-input", id: "case-search-basic", "aria-label": t('Search by keyword or case ID'), onChange: onSearchValChange, onClear: clearSearchVal }),
+                React.createElement(SearchInput, { className: "pf-v5-u-w-100", placeholder: t('Search by keyword or case ID'), value: searchVal === null || searchVal === void 0 ? void 0 : searchVal.trim(), "data-tracking-id": "search-cases-text-input", id: "case-search-basic", "aria-label": t('Search by keyword or case ID'), onChange: (_event, val) => onSearchValChange(val), onClear: clearSearchVal }),
                 React.createElement(Button, { variant: "primary", type: "submit", className: "search-btn", "data-tracking-id": "case-list-search-button", isDisabled: isSearchButtonDisabled },
                     React.createElement(Trans, null, "Search")),
                 canUseAdvancedSearch && (React.createElement(Button, { variant: "link", onClick: () => onSearchTypeChange(CaseSearchQueryType.ADVANCED), isDisabled: isFetching, "data-tracking-id": "case-list-adv-toggle-button" },

package/lib/esm/components/case-list/case-search/SaveCaseSearchModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SaveCaseSearchModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/SaveCaseSearchModal.tsx"],"names":[],"mappings":"AA6BA,UAAU,MAAM;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,wBAAwB,EAAE,MAAM,CAAC;IACjC,uBAAuB,EAAE,MAAM,CAAC;IAChC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;CAC/B;AAOD,wBAAgB,mBAAmB,CAAC,EAChC,WAAW,EACX,WAAW,EACX,QAAQ,EACR,wBAAwB,EACxB,uBAAuB,EACvB,iBAAiB,EACjB,eAAe,GAClB,EAAE,MAAM,eAiSR"}
+{"version":3,"file":"SaveCaseSearchModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/SaveCaseSearchModal.tsx"],"names":[],"mappings":"AAgCA,UAAU,MAAM;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,wBAAwB,EAAE,MAAM,CAAC;IACjC,uBAAuB,EAAE,MAAM,CAAC;IAChC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;CAC/B;AAOD,wBAAgB,mBAAmB,CAAC,EAChC,WAAW,EACX,WAAW,EACX,QAAQ,EACR,wBAAwB,EACxB,uBAAuB,EACvB,iBAAiB,EACjB,eAAe,GAClB,EAAE,MAAM,eAmSR"}

package/lib/esm/components/case-list/case-search/SaveCaseSearchModal.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Button, ButtonVariant, Checkbox, Form, FormGroup, Modal, ModalVariant, TextArea, TextInput, } from '@patternfly/react-core';
+import { Button, ButtonVariant, Checkbox, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, Modal, ModalVariant, TextArea, TextInput, } from '@patternfly/react-core';
 import { ToastNotification, useConfirmation } from '@rh-support/components';
 import { GlobalMetadataDispatchContext, GlobalMetadataStateContext, updateUserPreferences, UserPreferencesKeys, } from '@rh-support/react-context';
 import find from 'lodash/find';
@@ -183,7 +183,7 @@ export function SaveCaseSearchModal({ isModalOpen, modalToggle, isAdding, select
             React.createElement(Button, { key: "cancel", variant: ButtonVariant.secondary, "data-tracking-id": "case-list-bookmark-search-canceled", onClick: closeModal },
                 React.createElement(Trans, null, "Cancel")),
             React.createElement(React.Fragment, null,
-                React.createElement(Checkbox, { className: "pf-u-ml-md save-search-set-default", key: "set-as-default", "aria-label": t('Set as default'), id: "case-list-bookmark-search-set-as-default", "data-tracking-id": "case-list-bookmark-search-set-as-default", isChecked: localDefaultChecked, onChange: (checkbox, e) => {
+                React.createElement(Checkbox, { className: "pf-v5-u-ml-md save-search-set-default", key: "set-as-default", "aria-label": t('Set as default'), id: "case-list-bookmark-search-set-as-default", "data-tracking-id": "case-list-bookmark-search-set-as-default", isChecked: localDefaultChecked, onChange: (e, checkbox) => {
                         e.stopPropagation();
                         setLocalDefaultChecked(!localDefaultChecked);
                     } }),
@@ -193,12 +193,14 @@ export function SaveCaseSearchModal({ isModalOpen, modalToggle, isAdding, select
                 React.createElement(Trans, null, "Remove")))),
         ] },
         React.createElement(Form, { className: "save-search-form" },
-            React.createElement(FormGroup, { label: React.createElement("span", { className: "save-for-later-label-name" }, t('Name')), isRequired: true, fieldId: "save-search-name", validated: saveButtonIsClicked && isDuplicateNameError ? 'error' : 'default', helperTextInvalid: t('Filter with same name already exists. Please enter a unique name.'), className: "form-group pull-bottom-narrow save-for-later-name" },
-                React.createElement(TextInput, { isRequired: true, type: "text", placeholder: t('Enter a unique name to reference in the future'), id: "save-search-name", name: "save-search-name", "aria-describedby": "save-search-name-helper", value: localSavedSearchName, onChange: handleSaveSearchNameChange, className: `form-control${saveButtonIsClicked && (isDuplicateNameError || isEmpty(localSavedSearchName.trim()))
-                        ? ' form-invalid'
-                        : ''}`, validated: saveButtonIsClicked && (isDuplicateNameError || isEmpty(localSavedSearchName.trim()))
+            React.createElement(FormGroup, { label: React.createElement("span", { className: "save-for-later-label-name" }, t('Name')), isRequired: true, fieldId: "save-search-name", className: "form-group pull-bottom-narrow save-for-later-name" },
+                saveButtonIsClicked && isDuplicateNameError && (React.createElement(FormHelperText, null,
+                    React.createElement(HelperText, null,
+                        React.createElement(HelperTextItem, null,
+                            React.createElement(Trans, null, "Filter with same name already exists. Please enter a unique name."))))),
+                React.createElement(TextInput, { isRequired: true, type: "text", placeholder: t('Enter a unique name to reference in the future'), id: "save-search-name", name: "save-search-name", "aria-describedby": "save-search-name-helper", value: localSavedSearchName, onChange: (_event, value) => handleSaveSearchNameChange(value), validated: saveButtonIsClicked && (isDuplicateNameError || isEmpty(localSavedSearchName.trim()))
                         ? 'error'
                         : 'default' })),
-            React.createElement(FormGroup, { label: React.createElement("span", { className: "save-for-later-label-query" }, t('Search and filter query')), isRequired: true, fieldId: "filter-query", className: "form-group pf-u-mt-lg save-for-later-query", validated: saveButtonIsClicked ? 'error' : 'default' },
-                React.createElement(TextArea, { isRequired: true, type: "text", id: "filter-query", name: "filter-query", "aria-describedby": "filter-query-helper", value: getQueryStr(), className: "form-control", isDisabled: true })))));
+            React.createElement(FormGroup, { label: React.createElement("span", { className: "save-for-later-label-query" }, t('Search and filter query')), isRequired: true, fieldId: "filter-query", className: "form-group pf-v5-u-mt-lg save-for-later-query" },
+                React.createElement(TextArea, { isRequired: true, validated: saveButtonIsClicked ? 'error' : 'default', type: "text", id: "filter-query", name: "filter-query", "aria-describedby": "filter-query-helper", value: getQueryStr(), isDisabled: true, resizeOrientation: "vertical" })))));
 }

package/lib/esm/components/escalations/EscalationForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EscalationForm.d.ts","sourceRoot":"","sources":["../../../../src/components/escalations/EscalationForm.tsx"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAiBlC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAIzE,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAKxD,MAAM,WAAW,UAAW,SAAQ,gBAAgB;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;IACxD,IAAI,CAAC,EACC,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,CAAC;IACZ,OAAO,CAAC,EAAE,WAAW,EAAE,GAAG,MAAM,EAAE,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACxC;AAED,MAAM,WAAW,YAAY;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,UAAU,EAAE,CAAC;CAC/B;AAED,UAAU,MAAM;IACZ,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,gBAAgB,EAAE,GAAG,CAAC;IACtB,IAAI,EAAE,cAAc,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAKD,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,eA8O3C"}
+{"version":3,"file":"EscalationForm.d.ts","sourceRoot":"","sources":["../../../../src/components/escalations/EscalationForm.tsx"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAoBlC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAIzE,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAKxD,MAAM,WAAW,UAAW,SAAQ,gBAAgB;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;IACxD,IAAI,CAAC,EACC,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,CAAC;IACZ,OAAO,CAAC,EAAE,WAAW,EAAE,GAAG,MAAM,EAAE,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACxC;AAED,MAAM,WAAW,YAAY;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,UAAU,EAAE,CAAC;CAC/B;AAED,UAAU,MAAM;IACZ,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,gBAAgB,EAAE,GAAG,CAAC;IACtB,IAAI,EAAE,cAAc,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAKD,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,eAwP3C"}