@rh-support/cases 2.6.186 → 2.6.187

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

@@ -1,43 +1,23 @@
 import { Button, MenuToggle, Select, SelectList, SelectOption, } from '@patternfly/react-core';
-import { SingleSelectDropdown, useSelectKeyboardNavigator } from '@rh-support/components';
+import { useSelectKeyboardNavigator } from '@rh-support/components';
 import isEmpty from 'lodash/isEmpty';
 import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SolrKeys } from '../../../enums/filters';
-import { filterNamesMap } from '../../../utils/constants';
+import { filterNamesMap, PORTAL_DISPLAY_STATUSES } from '../../../utils/constants';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilter } from '../CaseListFilterReducer';
 export function StatusFilter(props) {
-    var _a;
     const dispatch = useContext(CaseListFilterDispatchContext);
     const { t } = useTranslation();
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const [isOpen, setIsOpen] = useState(false);
     const [selectedItems, setSelectedItems] = useState({});
-    const list = props.isSolrSearchDown
-        ? props.allCaseStatuses.map((status) => ({ value: status, key: status }))
-        : props.filterValues.map((filterValue) => ({ value: filterValue.value, key: filterValue.value }));
-    const singleSelectOptions = list.map((item) => ({
-        value: item.value,
-        label: item.value,
-    }));
-    const selectedStatus = ((_a = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status]) === null || _a === void 0 ? void 0 : _a[0]) || '';
-    const selectedOption = {
-        value: selectedStatus,
-        label: selectedStatus,
-    };
+    const list = PORTAL_DISPLAY_STATUSES.map((status) => ({ value: status, key: status }));
     const onToggleClick = (e) => {
         setIsOpen(!isOpen);
     };
     const onSelect = (option) => {
-        if (props.isSolrSearchDown) {
-            updateFilter(dispatch, {
-                filterKey: SolrKeys.status,
-                values: [option.value],
-            });
-            setIsOpen(false);
-            return;
-        }
         const prevSelectedStatuses = Object.keys(selectedItems).filter((item) => selectedItems[item] && item);
         if (selectedItems[option.value]) {
             setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: false })));
@@ -75,42 +55,32 @@ export function StatusFilter(props) {
         else if (selectedValues && selectedValues.length === 1) {
             return selectedValues[0];
         }
-        else if (selectedValues && selectedValues.length === 3) {
+        else if (selectedValues && totalLength && selectedValues.length === totalLength) {
             return t('All cases');
         }
         else {
-            if (selectedValues &&
-                selectedValues.length === 2 &&
-                selectedValues.every((item) => item.includes('Waiting'))) {
+            const hasAllOpenSelected = selectedValues.includes('In Progress') &&
+                selectedValues.includes('Waiting on Customer') &&
+                !selectedValues.includes('Closed');
+            if (hasAllOpenSelected) {
                 return t('All open cases');
             }
-            else if (selectedValues && totalLength && selectedValues.length === totalLength) {
-                return totalLengthString || btnPlaceholder;
-            }
             else {
                 return `${selectedValues.length} ${type} selected`;
             }
         }
     };
-    const placeholder = props.isSolrSearchDown
-        ? t('Select a status')
-        : getBtnPlaceholder(t('Select a status'), (filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status]) || [], ' ', list.length, t('All selected'));
+    const placeholder = getBtnPlaceholder(t('Select a status'), (filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status]) || [], ' ', list.length, t('All selected'));
     const toggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "default", onClick: onToggleClick, innerRef: toggleRef, isExpanded: isOpen, isFullWidth: true, onKeyDown: onInputKeyDown },
         placeholder,
         Object.keys(selectedItems).filter((key) => selectedItems[key] === true).length > 0 && (React.createElement(Button, { icon: "", variant: "plain", onClick: onClick, "aria-label": "Clear selection", className: "pf-v6-c-select__toggle-clear" }))));
-    const dropdownOptions = list.map((option, index) => !isEmpty(option.value) && (React.createElement(SelectOption, { key: option.key, value: option, hasCheckbox: !props.isSolrSearchDown, isSelected: selectedItems[option.value], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-status-${option.value.replace(' ', '-')}` }, option.value)));
-    const onSingleSelectChange = (option) => {
-        updateFilter(dispatch, {
-            filterKey: SolrKeys.status,
-            values: [option.value],
-        });
-    };
+    const dropdownOptions = list.map((option, index) => !isEmpty(option.value) && (React.createElement(SelectOption, { key: option.key, value: option, hasCheckbox: true, isSelected: selectedItems[option.value], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-status-${option.value.replace(' ', '-')}` }, option.value)));
     useEffect(() => {
         var _a;
         if (isEmpty(filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status])) {
             setSelectedItems({});
         }
-        else if (!props.isSolrSearchDown) {
+        else {
             const selectedStatuses = (_a = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status]) === null || _a === void 0 ? void 0 : _a.reduce((selection, status) => {
                 selection[status] = true;
                 return selection;
@@ -118,10 +88,10 @@ export function StatusFilter(props) {
             setSelectedItems(selectedStatuses || {});
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status], props.isSolrSearchDown]);
+    }, [filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status]]);
     const titleId = 'case-list-status-filter';
     return (React.createElement("div", { className: "status-filter" },
         React.createElement("label", { htmlFor: titleId, className: "pf-v6-u-mb-sm status-filter-label" }, t(filterNamesMap[SolrKeys.status])),
-        props.isSolrSearchDown ? (React.createElement(SingleSelectDropdown, { id: titleId, selected: selectedOption, options: singleSelectOptions, placeholder: t('Select a status'), onSelect: onSingleSelectChange, dataTrackingId: "status-filter", isScrollable: true })) : (React.createElement(Select, { shouldFocusToggleOnSelect: true, shouldPreventScrollOnItemFocus: true, id: titleId, "data-tracking-id": "status-filter", isOpen: isOpen, selected: selectedItems, onSelect: (_e, v) => onSelect(v), onOpenChange: (nextOpen) => setIsOpen(nextOpen), toggle: toggle, isScrollable: true, popperProps: { direction: 'down', enableFlip: false } },
-            React.createElement(SelectList, null, dropdownOptions)))));
+        React.createElement(Select, { shouldFocusToggleOnSelect: true, shouldPreventScrollOnItemFocus: true, id: titleId, "data-tracking-id": "status-filter", isOpen: isOpen, selected: selectedItems, onSelect: (_e, v) => onSelect(v), onOpenChange: (nextOpen) => setIsOpen(nextOpen), toggle: toggle, isScrollable: true, popperProps: { direction: 'down', enableFlip: false } },
+            React.createElement(SelectList, null, dropdownOptions))));
 }

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

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

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

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

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

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

@@ -3,16 +3,20 @@ import { ISolrResponse } from '@rh-support/types/shared';
 import { UserAuth } from '@rh-support/user-permissions';
 import React from 'react';
 import { ICaseListResponse } from '../../../models/caseList';
-import { IPaginationInfo, ISortInfo } from '../CaseListFilterReducer';
+import { ISortInfo } from '../CaseListFilterReducer';
 interface IProps {
     caseList: ISolrResponse<ICaseListResponse>;
     caseGroups: ICaseGroup[];
     loggedInUserRights: UserAuth;
     sortInfo?: ISortInfo;
-    paginationInfo?: IPaginationInfo;
     isCaseListPageLoading: boolean;
     hasError: boolean;
-    isSolrDown?: boolean;
+    hasNextPage: boolean;
+    isLoadingMore: boolean;
+    loadMoreError: boolean;
+    loadMoreRetryCount: number;
+    onRetryLoadMore: () => void;
+    sentinelRef?: (node?: Element | null) => void;
 }
 export declare function CaseListTable(props: IProps): React.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;AAqB3E,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAQxD,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,iBAAiB,EAAyB,MAAM,0BAA0B,CAAC;AAEpF,OAAO,EAEH,eAAe,EACf,SAAS,EAIZ,MAAM,0BAA0B,CAAC;AA4BlC,UAAU,MAAM;IACZ,QAAQ,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3C,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,kBAAkB,EAAE,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAsBD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBA6kB1C"}
+{"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,9 +1,9 @@
-import { Bullseye, Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateVariant, PaginationVariant, Spinner, } from '@patternfly/react-core';
+import { Alert, AlertVariant, Bullseye, Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateVariant, Spinner, } from '@patternfly/react-core';
 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, TablePagination } from '@rh-support/components';
+import { TableComponent } from '@rh-support/components';
 import { GlobalMetadataDispatchContext, updateUserPreferences, useGlobalStateContext, UserPreferencesKeys, } from '@rh-support/react-context';
-import { dtmTrackEventCaseStepEncountered, formatDate, scrollIntoView, toNewCaseTypeSwitcher } from '@rh-support/utils';
+import { dtmTrackEventCaseStepEncountered, formatDate, toNewCaseTypeSwitcher } from '@rh-support/utils';
 import find from 'lodash/find';
 import flatMap from 'lodash/flatMap';
 import includes from 'lodash/includes';
@@ -14,8 +14,9 @@ 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, updatePagination, updateSort, } from '../CaseListFilterReducer';
+import { clearFilters, resetFilterToDefaultState, updateSort } from '../CaseListFilterReducer';
 import SeverityLabel from './SeverityLabel';
 import { TableColumnSelector } from './table-column-selector/TableColumnSelector';
 import { TableActionsDropdown } from './TableActionsDropdown';
@@ -36,7 +37,7 @@ const EMPTY_STATE_NO_FILTERS_ERROR = (React.createElement(React.Fragment, null,
     React.createElement("a", { href: "https://status.redhat.com/", target: "_blank", rel: "noopener noreferrer" }, "status page"),
     "to see if there are any known issues"));
 export function CaseListTable(props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     const [selectedColumns, setSelectedColumns] = useState([]);
     const { t } = useTranslation();
     const [selectedCases, setSelectedCases] = useState([]);
@@ -49,10 +50,10 @@ export function CaseListTable(props) {
     const [activeSortIndex, setActiveSortIndex] = useState();
     const [activeSortDirection, setActiveSortDirection] = useState();
     const [sortedCaseListData, setSortedCaseListData] = useState(caseListData);
-    const { globalMetadataState: { navBarRef, hydraUserPreferences, loggedInUserRights }, } = useGlobalStateContext();
+    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) === '');
@@ -155,12 +156,6 @@ export function CaseListTable(props) {
             console.error('Could not save selected columns in cache');
         }
     };
-    const onPerPageSelect = (paginationInfo) => {
-        updatePagination(dispatch, paginationInfo);
-    };
-    const onSetPage = (paginationInfo) => {
-        updatePagination(dispatch, paginationInfo);
-    };
     const onRowClick = (ev, row) => {
         // we dont want to call onRowClick if user changes the checkbox value
         if (ev.target.tagName === 'INPUT') {
@@ -219,15 +214,11 @@ export function CaseListTable(props) {
         if (props.isCaseListPageLoading)
             return 0;
         let paginationCount = (_b = (_a = props.caseList) === null || _a === void 0 ? void 0 : _a.numFound) !== null && _b !== void 0 ? _b : 0;
-        // solr return 400 if we fetch the elements after 10000 limit
-        // so we need to restrict the user from FE too
-        paginationCount = paginationCount > 10000 ? 10000 : paginationCount;
+        // Salesforce has a limit of 4000 cases per page
+        // So we need to limit the number of cases returned to 4000
+        paginationCount = paginationCount > 4000 ? 4000 : paginationCount;
         return paginationCount;
     };
-    const onBottomPaginationSetPage = (paginationInfo) => {
-        onSetPage(paginationInfo);
-        scrollIntoView(tableToolbarRef, { navBarRef, timeout: 0, onlyIfNotInViewport: true, offset: 30 });
-    };
     const getSortableRowValues = (row) => {
         const { case_number, case_summary, case_contactName, case_lastModifiedDate, case_severity, case_status, case_createdDate, case_accountNumber, case_alternate_id, case_type, case_closedDate, case_folderName, case_lastModifiedByName, case_createdByName, case_version, id, case_customer_escalation, case_product, } = row;
         return [
@@ -278,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 : '',
@@ -349,8 +340,15 @@ export function CaseListTable(props) {
                 React.createElement("div", { className: "toolbar-actions pf-v6-l-flex" },
                     React.createElement(TableColumnSelector, { onColumnSelectorChange: onColumnSelectorChange, cachedColumns: selectedColumns }),
                     React.createElement(TableActionsDropdown, { caseList: caseListData, selectedCases: selectedCases, onCasesCloseSuccess: onCasesCloseSuccess, currentFilteredCaseList: props.caseList })),
-                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() }))),
+                !props.isCaseListPageLoading && caseListData.length > 0 && (React.createElement("span", { className: "case-count-indicator" },
+                    React.createElement("strong", null, caseListData.length),
+                    " ",
+                    React.createElement(Trans, null, "of"),
+                    ' ',
+                    React.createElement("strong", null,
+                        getItemCount(),
+                        " ",
+                        React.createElement(Trans, null, "loaded"))))),
             React.createElement("div", { className: "pf-v6-c-scroll-inner-wrapper" },
                 React.createElement(Table, { variant: TableVariant.compact, "aria-label": "case-list", className: "case-list-table" },
                     React.createElement(Thead, null,
@@ -367,41 +365,60 @@ export function CaseListTable(props) {
                                         ? '0px'
                                         : undefined,
                                 }, id: column.id, sort: column.sortable ? onSort(index) : undefined, key: column.id }, column.title))))),
-                    React.createElement(Tbody, null, !props.isCaseListPageLoading && (caseListData || []).length < 1
-                        ? noResultFoundRow
-                        : props.isCaseListPageLoading
-                            ? loadingRowDefault
-                            : sortedCaseListData === null || sortedCaseListData === void 0 ? void 0 : sortedCaseListData.map((row, index) => (React.createElement(Tr, { onRowClick: (event) => (onRowClick ? onRowClick(event, row) : ''), key: row === null || row === void 0 ? void 0 : row.case_number },
-                                React.createElement(Td, { className: "pf-v6-u-pl-md", select: {
-                                        rowIndex: index,
-                                        onSelect: (_event, index) => onRowSelect(_event, row === null || row === void 0 ? void 0 : row.case_number),
-                                        isSelected: selectedCases.includes(row === null || row === void 0 ? void 0 : row.case_number),
-                                    } }),
-                                React.createElement(Td, { dataLabel: "Case ID", id: row.case_number, scope: "row" },
-                                    React.createElement("div", { className: "case-number-section" },
-                                        React.createElement(Link, { to: `/case/${row.case_number}`, onClick: () => dtmTrackEventCaseStepEncountered('review', row.case_number, row.case_product, row.case_version) },
-                                            React.createElement("span", { className: "case-number" }, row.case_number)),
-                                        row.case_customer_escalation ? (React.createElement("div", { className: "escalation-label" },
-                                            React.createElement(Trans, null, "Escalated"))) : (''))),
-                                React.createElement(Td, { dataLabel: "Title" }, row.case_summary),
-                                React.createElement(Td, { className: !isColumnVisible('contactName') ? Visibility.hidden : '', dataLabel: "Owner" }, row.case_contactName),
-                                React.createElement(Td, { className: !isColumnVisible('lastModifiedDate') ? Visibility.hidden : '', dataLabel: "Modified by" },
-                                    React.createElement("span", { className: "modified-name" }, row.case_lastModifiedByName),
-                                    row.case_lastModifiedDate ? formatDate(row.case_lastModifiedDate) : ''),
-                                React.createElement(Td, { className: !isColumnVisible('severity') ? Visibility.hidden : '', dataLabel: "Severity" },
-                                    React.createElement(SeverityLabel, { sevValue: row.case_severity })),
-                                React.createElement(Td, { className: !isColumnVisible('status') ? Visibility.hidden : '', dataLabel: "Status" }, row.case_status),
-                                React.createElement(Td, { className: !isColumnVisible('createdDate') ? Visibility.hidden : '', dataLabel: "Created by" },
-                                    React.createElement("span", { className: "created-name" }, row.case_createdByName),
-                                    row.case_createdDate ? formatDate(row.case_createdDate) : ''),
-                                React.createElement(Td, { className: !isColumnVisible('product') ? Visibility.hidden : '', dataLabel: "Product and Version" },
-                                    row.case_product,
-                                    React.createElement("span", { style: { display: 'block' } }, row.case_version)),
-                                React.createElement(Td, { className: !isColumnVisible('accountNumber') ? Visibility.hidden : '', dataLabel: "Account number" }, row.case_accountNumber),
-                                React.createElement(Td, { className: !isColumnVisible('alternateCaseId') ? Visibility.hidden : '', "data-label": "Personal reference number" }, row.case_alternate_id ? row.case_alternate_id : ''),
-                                React.createElement(Td, { className: !isColumnVisible('type') ? Visibility.hidden : '', "data-label": "Support type" }, row.case_type),
-                                React.createElement(Td, { className: !isColumnVisible('closedDate') ? Visibility.hidden : '', "data-label": "Closed date" }, row.case_closedDate ? formatDate(row.case_closedDate) : ''),
-                                React.createElement(Td, { className: !isColumnVisible('folderName') ? Visibility.hidden : '', "data-label": "Group" }, row.case_folderName ? row.case_folderName : ''))))))),
-            React.createElement("footer", { className: "toolbar-pagination", "data-tracking-id": "case-list-table-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() })))));
+                    React.createElement(Tbody, null, !props.isCaseListPageLoading && (caseListData || []).length < 1 ? (noResultFoundRow) : props.isCaseListPageLoading ? (loadingRowDefault) : (React.createElement(React.Fragment, null, sortedCaseListData === null || sortedCaseListData === void 0 ? void 0 :
+                        sortedCaseListData.map((row, rowIndex) => (React.createElement(Tr, { onRowClick: (event) => (onRowClick ? onRowClick(event, row) : ''), key: row === null || row === void 0 ? void 0 : row.case_number },
+                            React.createElement(Td, { className: "pf-v6-u-pl-md", select: {
+                                    rowIndex: rowIndex,
+                                    onSelect: (_event, _idx) => onRowSelect(_event, row === null || row === void 0 ? void 0 : row.case_number),
+                                    isSelected: selectedCases.includes(row === null || row === void 0 ? void 0 : row.case_number),
+                                } }),
+                            React.createElement(Td, { dataLabel: "Case ID", id: row.case_number, scope: "row" },
+                                React.createElement("div", { className: "case-number-section" },
+                                    React.createElement(Link, { to: `/case/${row.case_number}`, onClick: () => dtmTrackEventCaseStepEncountered('review', row.case_number, row.case_product, row.case_version) },
+                                        React.createElement("span", { className: "case-number" }, row.case_number)),
+                                    row.case_customer_escalation ? (React.createElement("div", { className: "escalation-label" },
+                                        React.createElement(Trans, null, "Escalated"))) : (''))),
+                            React.createElement(Td, { dataLabel: "Title" }, row.case_summary),
+                            React.createElement(Td, { className: !isColumnVisible('contactName') ? Visibility.hidden : '', dataLabel: "Owner" }, row.case_contactName),
+                            React.createElement(Td, { className: !isColumnVisible('lastModifiedDate') ? Visibility.hidden : '', dataLabel: "Modified by" },
+                                React.createElement("span", { className: "modified-name" }, row.case_lastModifiedByName),
+                                row.case_lastModifiedDate ? formatDate(row.case_lastModifiedDate) : ''),
+                            React.createElement(Td, { className: !isColumnVisible('severity') ? Visibility.hidden : '', dataLabel: "Severity" },
+                                React.createElement(SeverityLabel, { sevValue: row.case_severity })),
+                            React.createElement(Td, { className: !isColumnVisible('status') ? Visibility.hidden : '', dataLabel: "Status" }, row.case_status),
+                            React.createElement(Td, { className: !isColumnVisible('createdDate') ? Visibility.hidden : '', dataLabel: "Created by" },
+                                React.createElement("span", { className: "created-name" }, row.case_createdByName),
+                                row.case_createdDate ? formatDate(row.case_createdDate) : ''),
+                            React.createElement(Td, { className: !isColumnVisible('product') ? Visibility.hidden : '', dataLabel: "Product and Version" },
+                                row.case_product,
+                                React.createElement("span", { style: { display: 'block' } }, row.case_version)),
+                            React.createElement(Td, { className: !isColumnVisible('accountNumber') ? Visibility.hidden : '', dataLabel: "Account number" }, row.case_accountNumber),
+                            React.createElement(Td, { className: !isColumnVisible('alternateCaseId') ? Visibility.hidden : '', "data-label": "Personal reference number" }, row.case_alternate_id ? row.case_alternate_id : ''),
+                            React.createElement(Td, { className: !isColumnVisible('type') ? Visibility.hidden : '', "data-label": "Support type" }, row.case_type),
+                            React.createElement(Td, { className: !isColumnVisible('closedDate') ? Visibility.hidden : '', "data-label": "Closed date" }, row.case_closedDate ? formatDate(row.case_closedDate) : ''),
+                            React.createElement(Td, { className: !isColumnVisible('folderName') ? Visibility.hidden : '', "data-label": "Group" }, row.case_folderName ? row.case_folderName : '')))),
+                        (props.hasNextPage || props.isLoadingMore || props.loadMoreError) && (React.createElement(Tr, { key: "skeleton-loader-row", className: "skeleton-loader-row" },
+                            React.createElement(Td, { className: "pf-v6-u-pl-md" },
+                                React.createElement("div", { ref: props.sentinelRef, className: "skeleton-sentinel" },
+                                    React.createElement("span", { className: "skeleton-bar skeleton-bar--checkbox" }))),
+                            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("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,
+                        React.createElement(Trans, null, "We're having trouble loading your cases. Please refresh or"),
+                        ' ',
+                        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 &&
+                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-list-table/DownloadCSVFileModal.d.ts

@@ -1,15 +1,10 @@
 import './DownloadCSVFileModal.scss';
-import { IAccount } from '@cee-eng/hydrajs/@types/models/account';
-import { IApiResponseDetails } from '@rh-support/types/shared';
-import { UserAuth } from '@rh-support/user-permissions';
 import React from 'react';
 import { ICaseListFilterState } from '../CaseListFilterReducer';
 interface IProps {
     isDisabled?: boolean;
     onModalshow: boolean;
     onClose: () => void;
-    loggedInUserRights: IApiResponseDetails<UserAuth>;
-    loggedInUsersAccount: IApiResponseDetails<Partial<IAccount>>;
     filterState: ICaseListFilterState;
     selectedCases: string[];
     filteredCaseCount: number;

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

@@ -1 +1 @@
-{"version":3,"file":"DownloadCSVFileModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-table/DownloadCSVFileModal.tsx"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AAGrC,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAqBlE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAGxD,OAAO,KAAuC,MAAM,OAAO,CAAC;AAM5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,UAAU,MAAM;IACZ,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAClD,oBAAoB,EAAE,mBAAmB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC7D,WAAW,EAAE,oBAAoB,CAAC;IAClC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC7B;AAoBD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,MAAM,qBA4ZzD"}
+{"version":3,"file":"DownloadCSVFileModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-table/DownloadCSVFileModal.tsx"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AAyBrC,OAAO,KAAuC,MAAM,OAAO,CAAC;AAM5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,UAAU,MAAM;IACZ,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,oBAAoB,CAAC;IAClC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC7B;AAWD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,MAAM,qBA8WzD"}