@rh-support/cases 2.6.185 → 2.6.187

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

@@ -1,8 +1,8 @@
-import { Button, MenuFooter, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import { useApolloClient } from '@apollo/client/react';
+import { Badge, Button, MenuFooter, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
-import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { ability, resourceActions, resources } from '@rh-support/user-permissions';
-import { getDropdownBtnPlaceholder } from '@rh-support/utils';
+import { GET_CASE_GROUP, getDropdownBtnPlaceholder, handleGraphQLCaseGroupsResponse, } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isUndefined from 'lodash/isUndefined';
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
@@ -12,83 +12,125 @@ import { SolrKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilter } from '../CaseListFilterReducer';
-export function GroupsFilter() {
+const EMPTY_GROUPS = [];
+export function GroupsFilter({ selectedGroups: controlledSelectedGroups, onGroupsChange, hideLabel = false, idPrefix = 'case-list-group-filter', showSelectionCountBadge = false, placeholder: placeholderProp, } = {}) {
+    var _a;
     const { t } = useTranslation();
-    const { globalMetadataState: { caseGroups }, } = useContext(GlobalMetadataStateContext);
+    const apolloClient = useApolloClient();
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const dispatch = useContext(CaseListFilterDispatchContext);
+    const isControlled = typeof onGroupsChange === 'function';
+    // Prefer the filterInfo array reference in basic/uncontrolled mode so empty selection
+    // does not create a new [] each render and re-fire the selectedItems sync effect.
+    const selectedGroups = isControlled
+        ? controlledSelectedGroups || EMPTY_GROUPS
+        : (_a = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.group]) !== null && _a !== void 0 ? _a : EMPTY_GROUPS;
     const [inputValue, setInputValue] = useState('');
+    const [caseGroups, setCaseGroups] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
     const [focusedItemIndex, setFocusedItemIndex] = useState(null);
     const [activeItem, setActiveItem] = useState(null);
-    const list = [
-        ...(caseGroups.data ? caseGroups === null || caseGroups === void 0 ? void 0 : caseGroups.data.map((group) => ({ value: group.name, key: group.groupNum })) : []),
-    ];
+    useEffect(() => {
+        setIsLoading(true);
+        apolloClient
+            .query({
+            query: GET_CASE_GROUP,
+            fetchPolicy: 'cache-first',
+        })
+            .then(({ data }) => {
+            var _a, _b, _c, _d;
+            const edges = (_d = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.salesforce_support_uiapi) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.SalesforceSupportCaseGroup__c) === null || _c === void 0 ? void 0 : _c.edges) !== null && _d !== void 0 ? _d : [];
+            setCaseGroups(handleGraphQLCaseGroupsResponse(edges));
+        })
+            .catch((err) => {
+            console.error('[GroupsFilter] Failed to fetch case groups:', err);
+            setCaseGroups([]);
+        })
+            .finally(() => setIsLoading(false));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const list = useMemo(() => caseGroups.map((group) => ({ value: group.name, key: group.groupNum })), [caseGroups]);
     const [selectOptions, setSelectOptions] = useState(list);
     const canViewManageTab = ability.can(resourceActions.READ, resources.MANAGE);
     const canViewCaseGroups = ability.can(resourceActions.READ, resources.CASE_GROUPS) && canViewManageTab;
     const [isOpen, setIsOpen] = useState(false);
     const [selectedItems, setSelectedItems] = useState({});
     const textInputRef = useRef();
-    const onToggleClick = (e) => {
+    const applyGroupSelection = (updatedFilterValues) => {
+        if (isControlled) {
+            onGroupsChange(updatedFilterValues);
+            return;
+        }
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.group,
+            values: updatedFilterValues,
+        });
+    };
+    const onToggleClick = () => {
         setIsOpen(!isOpen);
     };
     const onSelect = (option) => {
+        const optionValue = typeof option === 'string' ? option : option === null || option === void 0 ? void 0 : option.value;
+        if (!optionValue || optionValue === 'no results') {
+            return;
+        }
         const prevSelectedGroups = Object.keys(selectedItems).filter((item) => selectedItems[item] && item);
-        if (selectedItems[option.value]) {
-            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: !prevData[option.value] })));
-            const indexOfGroup = prevSelectedGroups.indexOf(option.value);
+        if (selectedItems[optionValue]) {
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [optionValue]: !prevData[optionValue] })));
+            const indexOfGroup = prevSelectedGroups.indexOf(optionValue);
             prevSelectedGroups.splice(indexOfGroup, 1);
         }
         else {
-            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: true })));
-            prevSelectedGroups.push(option.value);
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [optionValue]: true })));
+            prevSelectedGroups.push(optionValue);
         }
-        const mapValueToKey = (value) => {
+        const updatedFilterValues = prevSelectedGroups
+            .map((value) => {
             const selectedItem = list.find((item) => item.value === value);
-            return selectedItem;
-        };
-        const updatedFilterValues = prevSelectedGroups.map((item) => mapValueToKey(item));
-        updateFilter(dispatch, {
-            filterKey: SolrKeys.group,
-            values: updatedFilterValues,
-        });
+            if (!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)) {
+                return null;
+            }
+            return { key: String(selectedItem.key), value: String(selectedItem.value) };
+        })
+            .filter(Boolean);
+        applyGroupSelection(updatedFilterValues);
     };
     const handleMenuArrowKeys = (key) => {
-        let indexToFocus;
-        if (isOpen) {
-            if (key === 'ArrowUp') {
-                // When no index is set or at the first index, focus to the last, otherwise decrement focus index
-                if (focusedItemIndex === null || focusedItemIndex === 0) {
-                    indexToFocus = (list === null || list === void 0 ? void 0 : list.length) - 1;
-                }
-                else {
-                    indexToFocus = focusedItemIndex - 1;
-                }
+        if (!isOpen || !list.length) {
+            return;
+        }
+        let indexToFocus = 0;
+        if (key === 'ArrowUp') {
+            if (focusedItemIndex === null || focusedItemIndex === 0) {
+                indexToFocus = list.length - 1;
             }
-            if (key === 'ArrowDown') {
-                // When no index is set or at the last index, focus to the first, otherwise increment focus index
-                if (focusedItemIndex === null || focusedItemIndex === (list === null || list === void 0 ? void 0 : list.length) - 1) {
-                    indexToFocus = 0;
-                }
-                else {
-                    indexToFocus = focusedItemIndex + 1;
-                }
+            else {
+                indexToFocus = focusedItemIndex - 1;
             }
-            setFocusedItemIndex(indexToFocus);
-            const focusedItem = list[indexToFocus];
-            setActiveItem(`select-multi-typeahead-checkbox-${focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value.replace(' ', '-')}`);
+        }
+        if (key === 'ArrowDown') {
+            if (focusedItemIndex === null || focusedItemIndex === list.length - 1) {
+                indexToFocus = 0;
+            }
+            else {
+                indexToFocus = focusedItemIndex + 1;
+            }
+        }
+        setFocusedItemIndex(indexToFocus);
+        const focusedItem = list[indexToFocus];
+        if (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value) {
+            setActiveItem(`select-multi-typeahead-checkbox-${String(focusedItem.value).replace(' ', '-')}`);
         }
     };
     const onInputKeyDown = (event) => {
-        const focusedItem = focusedItemIndex ? list[focusedItemIndex] : list[0];
+        const focusedItem = focusedItemIndex !== null ? list[focusedItemIndex] : list[0];
         switch (event.key) {
-            // Select the first available option
             case 'Enter':
                 if (!isOpen) {
                     setIsOpen((prevIsOpen) => !prevIsOpen);
                 }
                 else if (isOpen && (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value) !== 'no results') {
-                    onSelect(focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value);
+                    onSelect(focusedItem);
                 }
                 break;
             case 'Tab':
@@ -106,36 +148,37 @@ export function GroupsFilter() {
     const onTextInputChange = (_event, value) => {
         setInputValue(value);
     };
-    const placeholder = getDropdownBtnPlaceholder(t('Select a group'), filterInfo[SolrKeys.group], '', (caseGroups.data || []).length, t('All selected'));
+    const defaultEmptyPlaceholder = placeholderProp || t('Select a group');
+    const placeholder = showSelectionCountBadge
+        ? isLoading
+            ? t('Loading...')
+            : defaultEmptyPlaceholder
+        : getDropdownBtnPlaceholder(isLoading ? t('Loading...') : defaultEmptyPlaceholder, selectedGroups, '', caseGroups.length, t('All selected'));
+    const hasSelectedGroups = selectedGroups.length > 0;
     const onClick = () => {
         var _a;
         setInputValue('');
         setSelectedItems({});
-        updateFilter(dispatch, {
-            filterKey: SolrKeys.group,
-            values: [],
-        });
+        applyGroupSelection([]);
         (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const toggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "typeahead", onClick: onToggleClick, innerRef: toggleRef, isExpanded: isOpen, isFullWidth: true },
         React.createElement(TextInputGroup, { isPlain: true },
-            React.createElement(TextInputGroupMain, Object.assign({ value: inputValue, onClick: onToggleClick, onChange: onTextInputChange, onKeyDown: onInputKeyDown, id: "multi-typeahead-select-checkbox-input", autoComplete: "off", innerRef: textInputRef, placeholder: placeholder }, (activeItem && { 'aria-activedescendant': activeItem }), { role: "combobox", isExpanded: isOpen, "aria-controls": "select-multi-typeahead-checkbox-listbox" })),
-            Object.keys(selectedItems).filter((key) => selectedItems[key] === true).length ? (React.createElement(TextInputGroupUtilities, null,
-                React.createElement(Button, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: onClick, "aria-label": "Clear input value" }))) : (''))));
+            React.createElement(TextInputGroupMain, Object.assign({ value: inputValue, onClick: onToggleClick, onChange: onTextInputChange, onKeyDown: onInputKeyDown, id: `${idPrefix}-input`, autoComplete: "off", innerRef: textInputRef, placeholder: placeholder }, (activeItem && { 'aria-activedescendant': activeItem }), { role: "combobox", isExpanded: isOpen, "aria-controls": `${idPrefix}-listbox` })),
+            hasSelectedGroups ? (React.createElement(TextInputGroupUtilities, null,
+                showSelectionCountBadge && (React.createElement(Badge, { className: "advance-search-dropdown-toggle-badge pf-v6-u-mr-sm" }, t('{{count}} selected', { count: selectedGroups.length }))),
+                React.createElement(Button, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: onClick, "aria-label": t('Clear input value') }))) : null)));
     const dropdownOptions = useMemo(() => {
         return (!isEmpty(selectOptions) ? selectOptions : list).map((option, index) => !isUndefined(option.value) && (React.createElement(SelectOption, { key: option.key, value: option, hasCheckbox: true, isSelected: selectedItems[option.value], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-multi-typeahead-${option.value.replace(' ', '-')}` }, option.value)));
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedItems, caseGroups === null || caseGroups === void 0 ? void 0 : caseGroups.data, selectOptions, focusedItemIndex]);
+    }, [selectedItems, caseGroups, selectOptions, focusedItemIndex]);
     useEffect(() => {
         let newSelectOptions = list;
-        // Filter menu items based on the text input value when one exists
         if (inputValue) {
             newSelectOptions = list.filter((option) => String(option === null || option === void 0 ? void 0 : option.value).toLowerCase().startsWith(inputValue.toLowerCase()));
-            // When no options are found after filtering, display 'No results found'
             if (!newSelectOptions.length) {
                 newSelectOptions = [{ isDisabled: false, children: `No results found` }];
             }
-            // Open the menu when the input value changes and the new value is not empty
             if (!isOpen) {
                 setIsOpen(true);
             }
@@ -146,27 +189,29 @@ export function GroupsFilter() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputValue]);
     useEffect(() => {
-        var _a;
-        if (isEmpty(filterInfo[SolrKeys.group])) {
+        if (!inputValue) {
+            setSelectOptions(list);
+        }
+    }, [list, inputValue]);
+    useEffect(() => {
+        if (isEmpty(selectedGroups)) {
             setSelectedItems({});
         }
         else {
-            const selectedGroups = (_a = filterInfo[SolrKeys.group]) === null || _a === void 0 ? void 0 : _a.reduce((selection, group) => {
+            const nextSelectedItems = selectedGroups.reduce((selection, group) => {
                 selection[group === null || group === void 0 ? void 0 : group.value] = true;
                 return selection;
             }, {});
-            setSelectedItems(selectedGroups);
+            setSelectedItems(nextSelectedItems);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filterInfo[SolrKeys.group]]);
-    return (React.createElement("div", { className: "group-filter" },
-        React.createElement("label", { htmlFor: "case-list-group-filter", className: "pf-v6-u-mb-sm group-filter-label" }, t(filterNamesMap[SolrKeys.group])),
+    }, [selectedGroups]);
+    return (React.createElement("div", { className: "group-filter", "data-testid": "groups-filter" },
+        !hideLabel && (React.createElement("label", { htmlFor: idPrefix, className: "pf-v6-u-mb-sm group-filter-label" }, t(filterNamesMap[SolrKeys.group]))),
         React.createElement("div", { className: "pf-v6-c-select" },
-            React.createElement(Select, { shouldFocusToggleOnSelect: true, shouldPreventScrollOnItemFocus: true, "data-tracking-id": "groups-filter", id: "case-list-group-filter", title: t(filterNamesMap[SolrKeys.group]), isOpen: isOpen, selected: selectedItems, onSelect: (_e, v) => onSelect(v), onOpenChange: (nextOpen) => setIsOpen(nextOpen), popperProps: { direction: 'down', enableFlip: false }, toggle: toggle, isScrollable: true },
+            React.createElement(Select, { shouldFocusToggleOnSelect: true, shouldPreventScrollOnItemFocus: true, "data-tracking-id": "groups-filter", id: idPrefix, title: t(filterNamesMap[SolrKeys.group]), isOpen: isOpen, selected: selectedItems, onSelect: (_e, v) => onSelect(v), onOpenChange: (nextOpen) => setIsOpen(nextOpen), popperProps: { direction: 'down', enableFlip: false }, toggle: toggle, isScrollable: true },
                 React.createElement(SelectList, null,
                     dropdownOptions,
-                    canViewCaseGroups && (React.createElement(React.Fragment, null,
-                        React.createElement(MenuFooter, { className: "group-filter-manage-groups-footer" },
-                            React.createElement(Link, { className: "cta cta-link", to: "/manage/groups" },
-                                React.createElement(Trans, null, "Manage groups"))))))))));
+                    canViewCaseGroups && (React.createElement(MenuFooter, { className: "group-filter-manage-groups-footer" },
+                        React.createElement(Link, { className: "cta cta-link", to: "/manage/groups" },
+                            React.createElement(Trans, null, "Manage groups")))))))));
 }

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

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

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

@@ -3,41 +3,13 @@ import { Button, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, T
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import { useSelectKeyboardNavigator } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
-import { GET_PRODUCTS, handleGraphQLVersionsResponse } from '@rh-support/utils';
+import { compareVersions, GET_PRODUCTS, handleGraphQLVersionsResponse } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SolrKeys, SolrPivotKeys } from '../../../enums/filters';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilter } from '../CaseListFilterReducer';
-//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 }) {
     const { t } = useTranslation();
     const { filterInfo } = useContext(CaseListFilterStateContext);

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;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,EAAgB,SAAS,EAAyC,MAAM,0BAA0B,CAAC;AA4B1G,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,qBAAqB,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD;AAsBD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBAunB1C"}
+{"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;AAsB3E,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;AAGpF,OAAO,EAAgB,SAAS,EAAyC,MAAM,0BAA0B,CAAC;AA4B1G,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,qBAAqB,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD;AAsBD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBA0oB1C"}

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

@@ -1,5 +1,4 @@
 import { Alert, AlertVariant, Bullseye, Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateVariant, Spinner, } from '@patternfly/react-core';
-import RedoAltIcon from '@patternfly/react-icons/dist/js/icons/redo-alt-icon';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { Table, TableVariant, Tbody, Td, Th, Thead, Tr, Visibility } from '@patternfly/react-table';
 import { TableComponent } from '@rh-support/components';
@@ -15,6 +14,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { CaseListColumnIds } from '../../../enums/case';
+import { mapSfdcStatusToPortalStatus } from '../../../utils/statusUtils';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { clearFilters, resetFilterToDefaultState, updateSort } from '../CaseListFilterReducer';
 import SeverityLabel from './SeverityLabel';
@@ -53,7 +53,7 @@ export function CaseListTable(props) {
     const { globalMetadataState: { hydraUserPreferences, loggedInUserRights }, } = useGlobalStateContext();
     const dispatch = useContext(CaseListFilterDispatchContext);
     const dispatchToGlobalMetadataReducer = useContext(GlobalMetadataDispatchContext);
-    const { filterInfo, filterQueryInfo } = useContext(CaseListFilterStateContext);
+    const { filterInfo, filterQueryInfo, paginationInfo } = useContext(CaseListFilterStateContext);
     const currentFilterLength = flatMap(filterInfo).length;
     const showingFilter = currentFilterLength > 0;
     const hasSearchQuery = !((filterQueryInfo === null || filterQueryInfo === void 0 ? void 0 : filterQueryInfo.queryString) === '');
@@ -269,7 +269,7 @@ export function CaseListTable(props) {
                 ? formatDate(row.case_last_public_update_date)
                 : '',
             case_severity: row.case_severity ? row.case_severity : '',
-            case_status: row.case_status,
+            case_status: mapSfdcStatusToPortalStatus(row.case_status),
             case_createdDate: formatDate(row.case_createdDate),
             case_accountNumber: row.case_accountNumber,
             case_alternate_id: row.case_alternate_id ? row.case_alternate_id : '',
@@ -404,7 +404,9 @@ export function CaseListTable(props) {
                             visibleCaseListColumns.map((col) => (React.createElement(Td, { key: `skeleton-${col.id}` },
                                 React.createElement("span", { className: "skeleton-bar" }))))))))))),
             props.loadMoreError && props.loadMoreRetryCount <= 1 && (React.createElement("div", { className: "infinite-scroll-footer-message" },
-                React.createElement(Button, { className: "infinite-scroll-retry-btn", variant: "secondary", onClick: props.onRetryLoadMore, icon: React.createElement(RedoAltIcon, null) },
+                React.createElement(Button, { className: "infinite-scroll-retry-btn", variant: "secondary", onClick: props.onRetryLoadMore, icon: React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" },
+                        React.createElement("polyline", { points: "23 4 23 10 17 10" }),
+                        React.createElement("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })) },
                     React.createElement(Trans, null, "try loading again")))),
             props.loadMoreError && props.loadMoreRetryCount > 1 && (React.createElement("div", { className: "infinite-scroll-footer-message" },
                 React.createElement(Alert, { className: "infinite-scroll-alert pf-v6-u-font-weight-bold", variant: AlertVariant.danger, isInline: true, isPlain: true, title: React.createElement("span", null,
@@ -413,6 +415,10 @@ export function CaseListTable(props) {
                         React.createElement(Button, { variant: "link", isInline: true, onClick: props.onRetryLoadMore },
                             React.createElement(Trans, null, "try again")),
                         ".") }))),
-            !props.hasNextPage && !props.isLoadingMore && !props.loadMoreError && caseListData.length > 0 && (React.createElement("div", { className: "infinite-scroll-footer-message infinite-scroll-footer-text pf-v6-u-font-weight-bold pf-v6-u-color-200" },
+            !props.hasNextPage &&
+                !props.isLoadingMore &&
+                !props.loadMoreError &&
+                caseListData.length > 0 &&
+                getItemCount() > ((paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.pageSize) || 10) && (React.createElement("div", { className: "infinite-scroll-footer-message infinite-scroll-footer-text pf-v6-u-font-weight-bold pf-v6-u-color-200" },
                 React.createElement(Trans, null, "No more cases to load"))))));
 }

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":"AAoBA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,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;AAOD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBA2S1C"}
+{"version":3,"file":"AdvanceSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/AdvanceSearch.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,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;AAOD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBA0S1C"}

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

@@ -176,7 +176,7 @@ export function AdvanceSearch(props) {
     });
     const toggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "typeahead", onClick: () => setIsOpen((open) => !open), onKeyDown: onInputKeyDown, innerRef: toggleRef, isExpanded: isOpen, isFullWidth: true },
         React.createElement(TextInputGroup, { isPlain: true },
-            React.createElement(TextInputGroupMain, { value: inputString, onChange: (event, value) => onQueryStringChange(value), onClick: () => setIsOpen((open) => !open), onFocus: () => setIsOpen(true), ref: searchInputRef, placeholder: t('i18nEnterSolrQuery', 'Enter SOLR query, for example: severity:"1 (Urgent)" and status:"Waiting on Customer"'), className: "pf-v6-u-pr-2xl", 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" }),
+            React.createElement(TextInputGroupMain, { value: inputString, onChange: (event, value) => onQueryStringChange(value), onClick: () => setIsOpen((open) => !open), ref: searchInputRef, placeholder: t('i18nEnterSolrQuery', 'Enter SOLR query, for example: severity:"1 (Urgent)" and status:"Waiting on Customer"'), className: "pf-v6-u-pr-2xl", 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(TextInputGroupUtilities, null,
                 React.createElement(Button, { icon: inputString && isParsingSuccessful ? (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
                         React.createElement(FlexItem, null,

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IProps {
+    appliedFilterCount: number;
+    onClick: () => void;
+}
+export declare function AdvanceSearchToggleButton({ appliedFilterCount, onClick }: IProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=AdvanceSearchToggleButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdvanceSearchToggleButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/AdvanceSearchToggleButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,MAAM;IACZ,kBAAkB,EAAE,MAAM,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,yBAAyB,CAAC,EAAE,kBAAkB,EAAE,OAAO,EAAE,EAAE,MAAM,qBAehF"}

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

@@ -0,0 +1,8 @@
+import { Button } from '@patternfly/react-core';
+import AngleDownIcon from '@patternfly/react-icons/dist/js/icons/angle-down-icon';
+import React from 'react';
+import { Trans } from 'react-i18next';
+export function AdvanceSearchToggleButton({ appliedFilterCount, onClick }) {
+    return (React.createElement(Button, { type: "button", variant: "secondary", onClick: onClick, className: "advance-search-toggle-btn secondary-button-pill", icon: React.createElement(AngleDownIcon, { "aria-hidden": true }), iconPosition: "end", countOptions: appliedFilterCount > 0 ? { count: appliedFilterCount } : undefined, "data-tracking-id": "case-list-adv-toggle-button" },
+        React.createElement(Trans, null, "Advanced Search")));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"CaseSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/CaseSearch.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAkB5E,UAAU,MAAM;IACZ,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACnC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,qBAmMvC"}
+{"version":3,"file":"CaseSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/CaseSearch.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAgE,MAAM,OAAO,CAAC;AA8BrF,UAAU,MAAM;IACZ,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACnC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,qBA4OvC"}

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

@@ -2,14 +2,18 @@ import { Button, SearchInput } from '@patternfly/react-core';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { AbilityContext, CaseListFields, resourceActions, resources } from '@rh-support/user-permissions';
 import isEmpty from 'lodash/isEmpty';
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { CaseSearchQueryType } from '../../../enums/caseSearch';
+import { createCaseListFilterStateFromAdvanceSearchForm, deriveSearchQueryType, } from '../../../utils/advanceSearchFormMapper';
+import { getAdvanceSearchAppliedFilterCount } from '../../../utils/advanceSearchUtils';
 import { createFilterStateFromAdvancedQuery, createUserFriendlyQueryFromFilterStateAdvancedSearch, } from '../../../utils/caseSearchUtils';
 // import { useCaseListStateContext } from '../CaseListContext';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext, initialPaginationInfo, } from '../CaseListFilterContext';
-import { initialFilterInfo, updateFilterQuery, updateFilterState } from '../CaseListFilterReducer';
+import { initialFilterInfo, updateFilterQuery, updateFilterState, } from '../CaseListFilterReducer';
+import { AdvanceSearchModal } from './advance-search-modal/AdvanceSearchModal';
 import { AdvanceSearch } from './AdvanceSearch';
+import { AdvanceSearchToggleButton } from './AdvanceSearchToggleButton';
 import { BookmarkedSearchesSelector } from './BookmarkedSearchesSelector';
 export function CaseSearch(props) {
     const { globalMetadataState } = useContext(GlobalMetadataStateContext);
@@ -20,26 +24,29 @@ export function CaseSearch(props) {
     const { filterQueryInfo } = filterState;
     const [searchVal, setSearchVal] = useState(filterQueryInfo.queryString);
     const [isAdvancedSearchValid, setIsAdvancedSearchValid] = useState(true);
+    const [isAdvanceSearchModalOpen, setIsAdvanceSearchModalOpen] = useState(false);
     const dispatch = useContext(CaseListFilterDispatchContext);
     // const { isFetching } = useCaseListStateContext();
     const getType = useCallback(() => (filterQueryInfo === null || filterQueryInfo === void 0 ? void 0 : filterQueryInfo.type) || CaseSearchQueryType.BASIC, [filterQueryInfo === null || filterQueryInfo === void 0 ? void 0 : filterQueryInfo.type]);
-    // on queryString and parsedQuery change need to update search
+    // Keep the keyword search input in sync with queryString only (not modal filter parsedQuery).
     useEffect(() => {
-        if (getType() === CaseSearchQueryType.ADVANCED) {
-            setSearchVal(filterQueryInfo === null || filterQueryInfo === void 0 ? void 0 : filterQueryInfo.parsedQuery);
-        }
-        else {
-            const query = filterQueryInfo.queryString;
-            setSearchVal(query.endsWith('*') ? query.slice(0, -1) : query);
-        }
-    }, [filterQueryInfo, getType]);
+        const query = filterQueryInfo.queryString;
+        setSearchVal(query.endsWith('*') ? query.slice(0, -1) : query);
+    }, [filterQueryInfo === null || filterQueryInfo === void 0 ? void 0 : filterQueryInfo.queryString]);
     const onSearchValChange = (value) => {
         setSearchVal(value === null || value === void 0 ? void 0 : value.trim());
     };
     const clearSearchVal = () => {
         setSearchVal('');
-        (filterQueryInfo === null || filterQueryInfo === void 0 ? void 0 : filterQueryInfo.queryString) &&
-            updateFilterQuery(dispatch, { type: getType(), queryString: '', parsedQuery: '' });
+        if (!(filterQueryInfo === null || filterQueryInfo === void 0 ? void 0 : filterQueryInfo.queryString)) {
+            return;
+        }
+        const nextFilterQueryInfo = {
+            queryString: '',
+            parsedQuery: filterQueryInfo.parsedQuery || '',
+            type: deriveSearchQueryType(Object.assign(Object.assign({}, filterState), { filterQueryInfo: Object.assign(Object.assign({}, filterQueryInfo), { queryString: '' }) })),
+        };
+        updateFilterQuery(dispatch, nextFilterQueryInfo);
     };
     const clearAdvancedSearchVal = () => {
         setSearchVal('');
@@ -48,11 +55,21 @@ export function CaseSearch(props) {
                 queryString: '',
                 parsedQuery: '',
                 type: CaseSearchQueryType.ADVANCED,
-            }, paginationInfo: initialPaginationInfo }));
+            }, paginationInfo: initialPaginationInfo, advanceSearchDateRanges: undefined }));
     };
-    const onCaseSearch = (parsedQuery = '', queryString = searchVal) => {
-        const finalQueryString = `${queryString.trim()}*`;
-        updateFilterQuery(dispatch, { type: getType(), queryString: finalQueryString, parsedQuery });
+    const onCaseSearch = (parsedQuery = filterQueryInfo.parsedQuery || '', queryString = searchVal) => {
+        const trimmedQuery = queryString.trim();
+        const finalQueryString = trimmedQuery ? `${trimmedQuery}*` : '';
+        const nextFilterState = Object.assign(Object.assign({}, filterState), { filterQueryInfo: {
+                queryString: finalQueryString,
+                parsedQuery,
+                type: filterQueryInfo.type,
+            } });
+        updateFilterQuery(dispatch, {
+            queryString: finalQueryString,
+            parsedQuery,
+            type: deriveSearchQueryType(nextFilterState),
+        });
     };
     const onCaseSearchAdvanced = (type, parsedQuery = '', queryStringInputBox = searchVal) => {
         const newFilterState = createFilterStateFromAdvancedQuery(parsedQuery.replace(/ and /g, ' AND ').replace(/ or /g, ' OR ').replace('Bug OR defect', 'Bug or defect'), globalMetadataState, filterState, queryStringInputBox, type);
@@ -90,15 +107,29 @@ export function CaseSearch(props) {
     };
     const handleSubmit = (ev) => {
         ev.preventDefault();
-        // For advance search submit should only happen on btn click or ctrl+enter which will be handled manually
-        getType() === CaseSearchQueryType.BASIC && onCaseSearch();
+        onCaseSearch();
+    };
+    const openAdvanceSearchModal = () => {
+        setIsAdvanceSearchModalOpen(true);
+    };
+    const closeAdvanceSearchModal = () => {
+        setIsAdvanceSearchModalOpen(false);
+    };
+    const onAdvanceSearchModalSubmit = (formState) => {
+        const newFilterState = createCaseListFilterStateFromAdvanceSearchForm(formState, filterState);
+        updateFilterState(dispatch, newFilterState);
+        closeAdvanceSearchModal();
     };
+    const appliedAdvanceSearchFilterCount = useMemo(() => getAdvanceSearchAppliedFilterCount(filterState), [filterState]);
     const renderBasicSearch = () => {
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: "case-search-input-container" },
                 React.createElement(SearchInput, { className: "pf-v6-u-w-100 case-search-input", 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")))));
+                    React.createElement(Trans, null, "Search")),
+                canUseAdvancedSearch && (React.createElement("div", { className: "advance-search-panel-container" },
+                    React.createElement(AdvanceSearchToggleButton, { appliedFilterCount: appliedAdvanceSearchFilterCount, onClick: openAdvanceSearchModal }),
+                    React.createElement(AdvanceSearchModal, { isOpen: isAdvanceSearchModalOpen, onClose: closeAdvanceSearchModal, onSearch: onAdvanceSearchModalSubmit }))))));
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const renderAdvanceSearch = () => {

package/lib/esm/components/case-list/case-search/advance-search-modal/AdvanceSearchAccountSection.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IAdvanceSearchFormState } from '../../CaseListFilterReducer';
+interface IProps {
+    formState: IAdvanceSearchFormState;
+    onChange: (updates: Partial<IAdvanceSearchFormState>) => void;
+    canReadAccounts: boolean;
+}
+export declare function AdvanceSearchAccountSection({ formState, onChange, canReadAccounts }: IProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=AdvanceSearchAccountSection.d.ts.map

package/lib/esm/components/case-list/case-search/advance-search-modal/AdvanceSearchAccountSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvanceSearchAccountSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/case-list/case-search/advance-search-modal/AdvanceSearchAccountSection.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAGtE,UAAU,MAAM;IACZ,SAAS,EAAE,uBAAuB,CAAC;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;IAC9D,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,2BAA2B,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE,MAAM,qBAkE3F"}

package/lib/esm/components/case-list/case-search/advance-search-modal/AdvanceSearchAccountSection.js

@@ -0,0 +1,29 @@
+import { Button, Stack, TextInput } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { AccountSelectorInternal } from '@rh-support/react-context';
+import React, { useMemo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { AdvanceSearchFieldBlock } from './AdvanceSearchFieldBlock';
+export function AdvanceSearchAccountSection({ formState, onChange, canReadAccounts }) {
+    const { t } = useTranslation();
+    const selectedAccounts = useMemo(() => formState.accountNumbers
+        .filter((item) => !Array.isArray(item.key))
+        .map((item) => ({
+        name: item.value,
+        accountNumber: item.key,
+    })), [formState.accountNumbers]);
+    const onAccountsChange = (selected) => {
+        onChange({
+            accountNumbers: selected.map((account) => ({
+                key: account.accountNumber,
+                value: account.name,
+            })),
+        });
+    };
+    return (React.createElement(Stack, null,
+        canReadAccounts && (React.createElement(AdvanceSearchFieldBlock, { label: React.createElement(Trans, null, "Select account number or name"), headerActions: selectedAccounts.length > 0 ? (React.createElement(Button, { variant: "plain", icon: React.createElement(TimesIcon, { "aria-hidden": true }), "aria-label": t('Clear account selection'), onClick: () => onChange({ accountNumbers: [] }), "data-tracking-id": "advance-search-accounts-clear", className: "pf-v6-u-p-0" })) : undefined },
+            React.createElement("div", { "data-tracking-id": "advance-search-accounts-filter" },
+                React.createElement(AccountSelectorInternal, { label: t('Account number or name'), selectedAccounts: selectedAccounts, multiple: true, suggestBookmarkAccounts: false, showSelectionCountBadge: true, placeholder: t('Account number or name'), onSelect: onAccountsChange })))),
+        React.createElement(AdvanceSearchFieldBlock, { label: React.createElement(Trans, null, "Personal reference number") },
+            React.createElement(TextInput, { id: "advance-search-personal-ref", type: "text", value: formState.personalReferenceNumber, onChange: (_event, value) => onChange({ personalReferenceNumber: value }), "aria-label": t('Personal reference number'), placeholder: t('Personal reference number') }))));
+}