@rh-support/cases 2.6.228 → 2.6.230

package/lib/esm/components/case-list/CaseList.js

@@ -9,124 +9,273 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import '../../css/caseList.css';
 import '../../css/caseSearch.css';
+import { useApolloClient } from '@apollo/client/react';
 import { Alert, AlertActionCloseButton, AlertVariant, Button } from '@patternfly/react-core';
 import OpenDrawerRightIcon from '@patternfly/react-icons/dist/js/icons/open-drawer-right-icon';
-import { ErrorBoundary, ToastNotification, useBreakpoint, useDocumentTitle, useForceUpdate, usePrevious, } from '@rh-support/components';
-import { CSSUserModal, fetchAllStatuses, fetchCaseGroupsForAccount, fetchCaseGroupsForSSO, fetchCaseSeverities, fetchCaseTypes, fetchProducts, GlobalMetadataDispatchContext, GlobalMetadataStateContext, setUserPreferences, updateCaseListTraditionalSupportAgreed, updateUserPreferences, useGlobalDispatchContext, UserPreferencesKeys, } from '@rh-support/react-context';
-import { getStringifiedParams, getUrlParsedParams, haventLoadedMetadata, haventLoadedProductsMetadata, solrResponseToFacetFields, solrResponseToPivotFields, } from '@rh-support/utils';
-import get from 'lodash/get';
+import { ErrorBoundary, ToastNotification, useBreakpoint, useDocumentTitle, useForceUpdate, } from '@rh-support/components';
+import { CSSUserModal, fetchAllStatuses, fetchCaseGroupsForAccount, fetchCaseGroupsForSSO, fetchCaseSeverities, fetchCaseTypes, fetchProducts, GlobalMetadataDispatchContext, GlobalMetadataStateContext, setTraditionalSupportSessionAgreed, setUserPreferences, updateUserPreferences, useGlobalDispatchContext, UserPreferencesKeys, } from '@rh-support/react-context';
+import { getStringifiedParams, getUrlParsedParams, haventLoadedMetadata, haventLoadedProductsMetadata, pendoTrackEvent, } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
-import mapValues from 'lodash/mapValues';
+import isEqual from 'lodash/isEqual';
 import some from 'lodash/some';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { useInView } from 'react-intersection-observer';
 import { useLocation } from 'react-router-dom';
 import { CaseSearchQueryType } from '../../enums/caseSearch';
-import { SolrPivotKeys } from '../../enums/filters';
+import { SolrKeys } from '../../enums/filters';
 import { PageTitle } from '../../enums/pageTitle';
+import { useCaseLabels } from '../../hooks/useCaseLabels';
 import { useFilterStateOnLoad } from '../../hooks/useFilterStateOnLoad';
-import { getCaseList } from '../../utils/caseListUtils';
+import { getDefaultGroupFilterSelection, shouldApplyDefaultGroupFilter } from '../../utils/caseGroupDefaultFilterUtils';
+import { clearPageCursors, getCaseListFromGraphQL, loadMoreCases, } from '../../utils/caseListGraphQLUtils';
 import { createFilterStateFromUrlQuery, createURLQueryFromFilterState, FILTER_URL_CURRENT_PAGE_SEARCH_PARAM, FILTER_URL_PAGE_SIZE_SEARCH_PARAM, FILTER_URL_QUERY_SEARCH_PARAM, FILTER_URL_QUERY_TYPE, } from '../../utils/caseSearchUtils';
+import { UpdatedCaseDataEvent } from '../../utils/constants';
 import { NewCaseButton } from '../case/NewCaseButton';
 import { CaseListFilterChips } from './case-list-filters/CaseListFilterChips';
 import { CaseListFilters } from './case-list-filters/CaseListFilters';
 import { CaseListTable } from './case-list-table/CaseListTable';
 import { CaseSearch } from './case-search/CaseSearch';
 import { useCaseListDispatchContext, useCaseListStateContext } from './CaseListContext';
-import { CaseListFilterDispatchContext, CaseListFilterStateContext, initialCaseFilterState, } from './CaseListFilterContext';
-import { eligibleSFDCFiltersMultipleValues, isNoFilterApplied, isOnlyDefaultFilterApplied, } from './CaseListFilterHelpers';
+import { CaseListFilterDispatchContext, CaseListFilterStateContext } from './CaseListFilterContext';
+import { isNoFilterApplied, isOnlyDefaultFilterApplied, isOnlyGroupFilterApplied } from './CaseListFilterHelpers';
 import { updateFilterState } from './CaseListFilterReducer';
-import { setCaseList, setCurrentQuery, setFilterValuesFromFacetResponse, setIsFetching, setPivotValues, } from './CaseListReducer';
+import { appendCaseList, setCaseList, setCurrentQuery, setCursorInfo, setIsFetching, setIsLoadingMore, setLoadMoreError, } from './CaseListReducer';
 export function CaseList(props) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { t } = useTranslation();
     useDocumentTitle(PageTitle.CASE_LIST);
     const dispatchToGlobalMetadataReducer = useContext(GlobalMetadataDispatchContext);
-    const { caseList, pivotValues, isFetching, filterValuesFromFacetResponse, currentQuery } = useCaseListStateContext();
+    const { caseList, isFetching, isLoadingMore, hasNextPage, endCursor, currentQuery, loadMoreError, loadMoreRetryCount, } = useCaseListStateContext();
     const CaseListDispatch = useCaseListDispatchContext();
     const breakPoint = useBreakpoint();
-    const { globalMetadataState, globalMetadataState: { caseGroups, loggedInUserJwtToken, loggedInUserRights, loggedInUsersAccount, userPreferences, managedAccounts, bookmarkedAccounts, allCaseTypes, allCaseSeverities, allCaseStatuses, allProducts, caseListTraditionalSupportAgreed, }, } = useContext(GlobalMetadataStateContext);
+    const { globalMetadataState, globalMetadataState: { caseGroups, loggedInUser, loggedInUserRights, loggedInUsersAccount, userPreferences, managedAccounts, bookmarkedAccounts, allCaseTypes, allCaseSeverities, allCaseStatuses, allProducts, caseRecordTypes, caseListTraditionalSupportAgreed, hydraUserPreferences, }, } = useContext(GlobalMetadataStateContext);
     const globalDispatchContext = useGlobalDispatchContext();
+    const apolloClient = useApolloClient();
+    const includeSecureSupportCases = Boolean(loggedInUsersAccount.data.secureSupport);
     const location = useLocation();
     const searchParams = getUrlParsedParams(location.search);
     const queryFromUrl = searchParams[FILTER_URL_QUERY_SEARCH_PARAM];
-    const pageSizeFromUrl = parseInt(searchParams[FILTER_URL_PAGE_SIZE_SEARCH_PARAM]);
-    const currentPageFromUrl = parseInt(searchParams[FILTER_URL_CURRENT_PAGE_SEARCH_PARAM]);
     const searchType = searchParams[FILTER_URL_QUERY_TYPE];
     const abortControllerRef = useRef(undefined);
+    const lastPushedQueryRef = useRef('');
     const isXLScreen = breakPoint.xl;
     const isFirstMount = useRef(true);
+    const userDismissedDefaultGroupRef = useRef(false);
+    const prevGroupFilterRef = useRef(undefined);
     const filterSectionRef = useRef(null);
     const filterState = useContext(CaseListFilterStateContext);
     const filterDispatch = useContext(CaseListFilterDispatchContext);
     const forceUpdate = useForceUpdate();
     const isCaseListFilterPanelExanded = userPreferences.data.isCaseListFilterPanelExanded;
     const useFilterStateInit = useFilterStateOnLoad();
-    const isBasicSearchMode = filterState.filterQueryInfo.type === CaseSearchQueryType.BASIC ||
-        (filterState.filterQueryInfo.type === CaseSearchQueryType.ADVANCED && loggedInUserRights.data.isExternal());
-    const prevSearchType = usePrevious(filterState.filterQueryInfo.type);
-    let isSearchTypeChanged = filterState.filterQueryInfo.type !== prevSearchType;
     const [hasError, setHasError] = useState(null);
-    const [isSolrSearchDown, setSolrSearchDown] = useState(false);
     const [defaultSavedSearchName, setDefaultSavedSearchName] = useState('');
     const [RHCDValue, setRHCDValue] = useState('');
     const [isRHCDAlertShown, setIsRHCDAlertShown] = useState(true);
+    const loadMoreLockRef = useRef(false);
+    const loadMoreFnRef = useRef(() => { });
+    const loadMoreCooldownRef = useRef(false);
+    const loadMoreAbortRef = useRef(null);
+    const activeFilterStateRef = useRef(filterState);
+    const sentinelElRef = useRef(null);
+    const prefetchRef = useRef({
+        cursor: '',
+        data: null,
+        loading: false,
+    });
+    const { ref: inViewRef, inView } = useInView();
+    const sentinelRef = React.useCallback((node) => {
+        sentinelElRef.current = node || null;
+        inViewRef(node);
+    }, [inViewRef]);
+    function startPrefetch(cursor) {
+        if (!cursor || prefetchRef.current.cursor === cursor)
+            return;
+        prefetchRef.current = { cursor, data: null, loading: true };
+        loadMoreCases(activeFilterStateRef.current, apolloClient, cursor, undefined, includeSecureSupportCases)
+            .then((result) => {
+            if (prefetchRef.current.cursor === cursor) {
+                prefetchRef.current = { cursor, data: result, loading: false };
+            }
+        })
+            .catch(() => {
+            if (prefetchRef.current.cursor === cursor) {
+                prefetchRef.current = { cursor: '', data: null, loading: false };
+            }
+        });
+    }
+    useEffect(() => {
+        let ticking = false;
+        let triggered = false;
+        const onScroll = () => {
+            if (ticking)
+                return;
+            ticking = true;
+            requestAnimationFrame(() => {
+                ticking = false;
+                if (!sentinelElRef.current)
+                    return;
+                const rect = sentinelElRef.current.getBoundingClientRect();
+                const isNear = rect.top <= window.innerHeight + 600;
+                if (!isNear) {
+                    triggered = false;
+                    return;
+                }
+                if (!triggered && !loadMoreLockRef.current) {
+                    triggered = true;
+                    loadMoreFnRef.current();
+                }
+            });
+        };
+        window.addEventListener('scroll', onScroll, true);
+        return () => window.removeEventListener('scroll', onScroll, true);
+    }, []);
+    useEffect(() => {
+        if (inView && hasNextPage && !isLoadingMore && !loadMoreError) {
+            loadMore();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inView]);
+    useEffect(() => {
+        if (!isLoadingMore)
+            return;
+        const handleOffline = () => {
+            if (loadMoreAbortRef.current) {
+                loadMoreAbortRef.current.abort();
+                loadMoreAbortRef.current = null;
+            }
+            loadMoreLockRef.current = false;
+            setLoadMoreError(CaseListDispatch, true, loadMoreRetryCount + 1);
+        };
+        if (!navigator.onLine) {
+            handleOffline();
+            return;
+        }
+        window.addEventListener('offline', handleOffline);
+        return () => window.removeEventListener('offline', handleOffline);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isLoadingMore]);
+    useEffect(() => {
+        const onClick = (e) => {
+            const anchor = e.target.closest('a.btn_slideto[href="#masthead"]');
+            if (anchor) {
+                e.preventDefault();
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            }
+        };
+        document.addEventListener('click', onClick, true);
+        return () => document.removeEventListener('click', onClick, true);
+    }, []);
     function getCases(currentFilterState) {
         return __awaiter(this, void 0, void 0, function* () {
-            let showError;
+            var _a;
             try {
-                setIsFetching(CaseListDispatch, true);
-                setHasError(false);
-                if (abortControllerRef.current !== undefined) {
-                    // Cancel the previous request
+                if (abortControllerRef.current) {
                     abortControllerRef.current.abort();
                 }
-                // recreate a new AbortController for each call
-                let controller = new AbortController();
+                const controller = new AbortController();
                 abortControllerRef.current = controller;
-                const { caseListResponse, isSolrSearchDownSFDCUp, showErrorMessage } = yield getCaseList(currentFilterState, loggedInUserRights.data, loggedInUsersAccount.data, controller.signal);
-                showError = showErrorMessage;
-                setSolrSearchDown(isSolrSearchDownSFDCUp);
-                setFilterValuesFromFacetResponse(CaseListDispatch, solrResponseToFacetFields(caseListResponse));
-                setPivotValues(CaseListDispatch, solrResponseToPivotFields(caseListResponse));
-                setCaseList(CaseListDispatch, caseListResponse.response);
+                setIsFetching(CaseListDispatch, true);
+                setHasError(false);
+                prefetchRef.current = { cursor: '', data: null, loading: false };
+                loadMoreCooldownRef.current = true;
+                activeFilterStateRef.current = currentFilterState;
+                const result = yield getCaseListFromGraphQL(currentFilterState, apolloClient, undefined, controller.signal, undefined, includeSecureSupportCases);
+                if (controller.signal.aborted) {
+                    return;
+                }
+                setCaseList(CaseListDispatch, result.caseListResponse.response);
+                setCursorInfo(CaseListDispatch, result.hasNextPage, result.endCursor);
                 setIsFetching(CaseListDispatch, false);
+                setTimeout(() => {
+                    loadMoreCooldownRef.current = false;
+                }, 500);
+                if (result.hasNextPage && result.endCursor) {
+                    startPrefetch(result.endCursor);
+                }
+                if (result.showErrorMessage) {
+                    setHasError(true);
+                    ToastNotification.addDangerMessage(t('There was an error loading case data. Please try again.'));
+                }
             }
             catch (err) {
-                const isAbortError = err.message && err.message.toLowerCase().indexOf('abort') > -1;
-                if (!isAbortError) {
-                    setIsFetching(CaseListDispatch, false);
-                    setHasError(true);
-                    showError && ToastNotification.addXHRErrorMessage(err);
+                if ((err === null || err === void 0 ? void 0 : err.name) === 'AbortError' || ((_a = err === null || err === void 0 ? void 0 : err.message) === null || _a === void 0 ? void 0 : _a.includes('aborted'))) {
+                    return;
                 }
+                setIsFetching(CaseListDispatch, false);
+                setHasError(true);
+                ToastNotification.addXHRErrorMessage(err);
             }
         });
     }
+    function loadMore() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (loadMoreCooldownRef.current ||
+                loadMoreLockRef.current ||
+                isLoadingMore ||
+                !hasNextPage ||
+                !endCursor ||
+                loadMoreError)
+                return;
+            loadMoreLockRef.current = true;
+            if (loadMoreAbortRef.current) {
+                loadMoreAbortRef.current.abort();
+            }
+            const controller = new AbortController();
+            loadMoreAbortRef.current = controller;
+            setIsLoadingMore(CaseListDispatch, true);
+            try {
+                let result;
+                const pf = prefetchRef.current;
+                if (pf.cursor === endCursor && pf.data) {
+                    result = pf.data;
+                    prefetchRef.current = { cursor: '', data: null, loading: false };
+                }
+                else {
+                    prefetchRef.current = { cursor: '', data: null, loading: false };
+                    result = yield loadMoreCases(activeFilterStateRef.current, apolloClient, endCursor, controller.signal, includeSecureSupportCases);
+                }
+                if (controller.signal.aborted)
+                    return;
+                setLoadMoreError(CaseListDispatch, false, 0);
+                appendCaseList(CaseListDispatch, result.docs, result.hasNextPage, result.endCursor);
+                if (result.hasNextPage && result.endCursor) {
+                    startPrefetch(result.endCursor);
+                }
+            }
+            catch (err) {
+                if ((err === null || err === void 0 ? void 0 : err.name) === 'AbortError' || ((_a = err === null || err === void 0 ? void 0 : err.message) === null || _a === void 0 ? void 0 : _a.includes('aborted')) || controller.signal.aborted) {
+                    return;
+                }
+                const nextRetryCount = loadMoreRetryCount + 1;
+                setLoadMoreError(CaseListDispatch, true, nextRetryCount);
+                console.error('[CaseList] loadMore error:', err);
+            }
+            finally {
+                if (!controller.signal.aborted) {
+                    loadMoreLockRef.current = false;
+                }
+            }
+        });
+    }
+    loadMoreFnRef.current = loadMore;
+    function retryLoadMore() {
+        if (loadMoreAbortRef.current) {
+            loadMoreAbortRef.current.abort();
+            loadMoreAbortRef.current = null;
+        }
+        loadMoreLockRef.current = false;
+        setLoadMoreError(CaseListDispatch, false, loadMoreRetryCount);
+        setTimeout(() => loadMoreFnRef.current(), 0);
+    }
     const toggleFilterSection = (isExpanded) => {
         if (!filterSectionRef.current)
             return;
         filterSectionRef.current.expanded = isExpanded;
         forceUpdate();
     };
-    function saveFilterQueryInUserPreferences() {
-        if (isNoFilterApplied(filterState))
-            return;
-        const type = filterState.filterQueryInfo.type;
-        const recentSerach = {
-            filterState: type === CaseSearchQueryType.BASIC ? filterState.filterInfo : {},
-            sortState: filterState.sortInfo,
-            queryString: type === CaseSearchQueryType.BASIC
-                ? filterState.filterQueryInfo.queryString
-                : filterState.filterQueryInfo.parsedQuery,
-            type,
-        };
-        try {
-            updateUserPreferences(dispatchToGlobalMetadataReducer, loggedInUserRights.data.getSSOUsername(), [{ key: UserPreferencesKeys.mostRecentSearch, value: JSON.stringify(recentSerach) }], 'add');
-        }
-        catch (e) {
-            console.error('Could not save filter query in user preferences');
-        }
-    }
     const onToggleFilterBtnClick = () => {
         var _a, _b;
         toggleFilterSection(!((_a = filterSectionRef.current) === null || _a === void 0 ? void 0 : _a.expanded));
@@ -136,8 +285,7 @@ export function CaseList(props) {
     };
     const checkNewCases = () => __awaiter(this, void 0, void 0, function* () {
         try {
-            const { caseListResponse, isSolrSearchDownSFDCUp } = yield getCaseList(filterState, loggedInUserRights.data, loggedInUsersAccount.data, null);
-            setSolrSearchDown(isSolrSearchDownSFDCUp);
+            const { caseListResponse } = yield getCaseListFromGraphQL(filterState, apolloClient, undefined, undefined, undefined, includeSecureSupportCases);
             let changed = false;
             if (caseListResponse.response.numFound <= filterState.paginationInfo.pageSize &&
                 caseListResponse.response.numFound !== caseList.numFound) {
@@ -159,6 +307,7 @@ export function CaseList(props) {
             }
             if (changed && location.pathname === '/case/list') {
                 setCaseList(CaseListDispatch, caseListResponse.response);
+                pendoTrackEvent(UpdatedCaseDataEvent);
                 ToastNotification.addSuccessMessage(t('Case data has been updated'));
             }
         }
@@ -166,79 +315,150 @@ export function CaseList(props) {
             console.log(err);
         }
     });
+    const salesforceAccountId = (_a = loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.salesforceAccountId;
+    const { error: caseLabelsFetchError, refetch: refetchCaseLabels } = useCaseLabels(salesforceAccountId);
+    const retryCaseListFetch = () => {
+        refetchCaseLabels();
+        getCases(filterState);
+    };
+    const loggedInContactId = (_b = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data) === null || _b === void 0 ? void 0 : _b.id;
+    const loggedInIsOrgAdmin = (_c = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data) === null || _c === void 0 ? void 0 : _c.isOrgAdmin;
+    const defaultCaseGroupId = (_e = (_d = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data) === null || _d === void 0 ? void 0 : _d.defaultCaseGroup) !== null && _e !== void 0 ? _e : null;
+    const prevDefaultCaseGroupIdRef = useRef(defaultCaseGroupId);
     useEffect(() => {
         var _a;
-        if (haventLoadedMetadata(caseGroups, (data) => data === undefined)) {
-            if ((_a = loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.isInternal) {
-                fetchCaseGroupsForAccount(dispatchToGlobalMetadataReducer, loggedInUsersAccount.data.accountNumber);
-            }
-            else {
-                fetchCaseGroupsForSSO(dispatchToGlobalMetadataReducer, loggedInUserJwtToken.preferred_username);
-            }
+        if (prevDefaultCaseGroupIdRef.current !== defaultCaseGroupId) {
+            userDismissedDefaultGroupRef.current = false;
         }
-    }, [caseGroups, dispatchToGlobalMetadataReducer, loggedInUserJwtToken, loggedInUsersAccount.data]);
+        prevDefaultCaseGroupIdRef.current = defaultCaseGroupId;
+        const currentGroupFilter = ((_a = filterState.filterInfo) === null || _a === void 0 ? void 0 : _a[SolrKeys.group]) || [];
+        if (prevGroupFilterRef.current !== undefined &&
+            prevGroupFilterRef.current.length > 0 &&
+            currentGroupFilter.length === 0) {
+            userDismissedDefaultGroupRef.current = true;
+        }
+        prevGroupFilterRef.current = currentGroupFilter;
+    }, [filterState.filterInfo, defaultCaseGroupId]);
     useEffect(() => {
-        if (haventLoadedMetadata(allCaseTypes)) {
-            fetchCaseTypes(dispatchToGlobalMetadataReducer, loggedInUsersAccount.data.secureSupport);
+        var _a;
+        if (!salesforceAccountId || loggedInUser.isFetching)
+            return;
+        if (!haventLoadedMetadata(caseGroups, (data) => data === undefined))
+            return;
+        if ((_a = loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.isInternal) {
+            fetchCaseGroupsForAccount(dispatchToGlobalMetadataReducer, apolloClient, salesforceAccountId, defaultCaseGroupId, loggedInContactId, loggedInIsOrgAdmin);
         }
-        // when solr is down, we use hydra metadata api to populated filter dropdowns
-        if (isSolrSearchDown) {
+        else {
+            fetchCaseGroupsForSSO(dispatchToGlobalMetadataReducer, apolloClient, salesforceAccountId, defaultCaseGroupId, loggedInContactId, loggedInIsOrgAdmin);
+        }
+    }, [
+        apolloClient,
+        caseGroups,
+        dispatchToGlobalMetadataReducer,
+        defaultCaseGroupId,
+        loggedInContactId,
+        loggedInIsOrgAdmin,
+        loggedInUser.isFetching,
+        (_f = loggedInUsersAccount.data) === null || _f === void 0 ? void 0 : _f.isInternal,
+        salesforceAccountId,
+    ]);
+    useEffect(() => {
+        if (location.pathname !== '/case/list')
+            return;
+        if (loggedInUser.isFetching || caseGroups.isFetching || caseGroups.data === undefined)
+            return;
+        if (!shouldApplyDefaultGroupFilter(queryFromUrl, hydraUserPreferences.data))
+            return;
+        const canAutoSync = isNoFilterApplied(filterState) ||
+            isOnlyDefaultFilterApplied(filterState) ||
+            isOnlyGroupFilterApplied(filterState.filterInfo);
+        if (!canAutoSync)
+            return;
+        const nextGroupFilter = getDefaultGroupFilterSelection(caseGroups.data, loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.data);
+        const currentGroupFilter = filterState.filterInfo[SolrKeys.group] || [];
+        if (userDismissedDefaultGroupRef.current && currentGroupFilter.length === 0) {
+            return;
+        }
+        if (isEqual(currentGroupFilter, nextGroupFilter))
+            return;
+        updateFilterState(filterDispatch, Object.assign(Object.assign({}, filterState), { filterInfo: Object.assign(Object.assign({}, filterState.filterInfo), { [SolrKeys.group]: nextGroupFilter }) }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        defaultCaseGroupId,
+        caseGroups.data,
+        caseGroups.isFetching,
+        loggedInUser.isFetching,
+        location.pathname,
+        queryFromUrl,
+    ]);
+    useEffect(() => {
+        const loadMetadata = () => __awaiter(this, void 0, void 0, function* () {
+            if (haventLoadedMetadata(allCaseTypes)) {
+                fetchCaseTypes(dispatchToGlobalMetadataReducer, apolloClient);
+            }
             if (haventLoadedMetadata(allCaseSeverities)) {
-                fetchCaseSeverities(dispatchToGlobalMetadataReducer, loggedInUsersAccount.data.secureSupport);
+                fetchCaseSeverities(dispatchToGlobalMetadataReducer, apolloClient);
             }
             if (haventLoadedMetadata(allCaseStatuses)) {
-                fetchAllStatuses(dispatchToGlobalMetadataReducer, loggedInUsersAccount.data.secureSupport);
+                fetchAllStatuses(dispatchToGlobalMetadataReducer, apolloClient);
             }
             if (haventLoadedProductsMetadata(allProducts)) {
-                fetchProducts(dispatchToGlobalMetadataReducer);
+                fetchProducts(dispatchToGlobalMetadataReducer, apolloClient);
             }
-            // on sfdc fields that only one value is allowed, set filter to first item
-            const sfdcFilterState = mapValues(filterState.filterInfo, (value, key) => {
-                //@ts-ignore
-                if (eligibleSFDCFiltersMultipleValues.includes(key))
-                    return value;
-                return value[0] ? [value[0]] : [];
-            });
-            updateFilterState(filterDispatch, {
-                //@ts-ignore
-                filterInfo: Object.assign(Object.assign({}, initialCaseFilterState.filterInfo), sfdcFilterState),
-            });
-        }
+        });
+        loadMetadata();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        allCaseTypes,
-        allCaseSeverities,
-        allCaseStatuses,
-        allProducts,
-        dispatchToGlobalMetadataReducer,
-        loggedInUsersAccount.data.secureSupport,
-        isSolrSearchDown,
-    ]);
+    }, [allCaseTypes, allCaseSeverities, allCaseStatuses, allProducts, dispatchToGlobalMetadataReducer, apolloClient]);
+    function saveFilterQueryInUserPreferences() {
+        if (isNoFilterApplied(filterState))
+            return;
+        const type = filterState.filterQueryInfo.type;
+        const recentSearch = {
+            filterState: type === CaseSearchQueryType.BASIC ? filterState.filterInfo : {},
+            sortState: filterState.sortInfo,
+            queryString: type === CaseSearchQueryType.BASIC
+                ? filterState.filterQueryInfo.queryString
+                : filterState.filterQueryInfo.parsedQuery,
+            type,
+        };
+        try {
+            updateUserPreferences(dispatchToGlobalMetadataReducer, loggedInUserRights.data.getSSOUsername(), [{ key: UserPreferencesKeys.mostRecentSearch, value: JSON.stringify(recentSearch) }], 'add');
+        }
+        catch (e) {
+            console.error('Could not save filter query in user preferences');
+        }
+    }
     // effect to update url query and call get case api whenever filter state changes
     useEffect(() => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!isFirstMount.current) {
             const urlQuery = (isNoFilterApplied(filterState) || isOnlyDefaultFilterApplied(filterState)) &&
                 !((_a = filterState.filterQueryInfo) === null || _a === void 0 ? void 0 : _a.queryString) &&
                 !filterState.sortInfo.column
                 ? ''
                 : createURLQueryFromFilterState(filterState);
+            const paginationKey = `p${(_b = filterState.paginationInfo) === null || _b === void 0 ? void 0 : _b.currentPage}_s${(_c = filterState.paginationInfo) === null || _c === void 0 ? void 0 : _c.pageSize}`;
+            const advanceSearchKey = [
+                ((_d = filterState.filterQueryInfo) === null || _d === void 0 ? void 0 : _d.parsedQuery) || '',
+                JSON.stringify(filterState.advanceSearchDateRanges || null),
+            ].join('|');
+            const fullQueryKey = `${urlQuery}_${paginationKey}_${advanceSearchKey}`;
+            if (fullQueryKey === lastPushedQueryRef.current) {
+                return;
+            }
+            if (urlQuery !== lastPushedQueryRef.current) {
+                clearPageCursors();
+            }
             setCurrentQuery(CaseListDispatch, urlQuery);
+            lastPushedQueryRef.current = urlQuery;
             searchParams[FILTER_URL_QUERY_SEARCH_PARAM] = encodeURIComponent(urlQuery);
-            searchParams[FILTER_URL_CURRENT_PAGE_SEARCH_PARAM] = (_b = filterState.paginationInfo) === null || _b === void 0 ? void 0 : _b.currentPage.toString();
-            searchParams[FILTER_URL_PAGE_SIZE_SEARCH_PARAM] = (_c = filterState.paginationInfo) === null || _c === void 0 ? void 0 : _c.pageSize.toString();
             searchParams[FILTER_URL_QUERY_TYPE] = filterState.filterQueryInfo.type;
+            delete searchParams[FILTER_URL_CURRENT_PAGE_SEARCH_PARAM];
+            delete searchParams[FILTER_URL_PAGE_SIZE_SEARCH_PARAM];
             props.routeProps.history.push({
                 search: getStringifiedParams(searchParams),
             });
             saveFilterQueryInUserPreferences();
-            // so that we don't call get cases every time user switches between basic and advanced without any filters applied
-            if (isSearchTypeChanged &&
-                !filterState.filterQueryInfo.queryString &&
-                isNoFilterApplied(filterState) &&
-                filterValuesFromFacetResponse // if this is null, it means it is the first page load so get cases anyway
-            )
-                return;
             getCases(filterState);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -248,17 +468,46 @@ export function CaseList(props) {
         if (bookmarkedAccounts.isFetching ||
             managedAccounts.isFetching ||
             caseGroups.isFetching ||
-            caseGroups.data === undefined)
+            caseGroups.data === undefined ||
+            caseRecordTypes.isFetching ||
+            isEmpty(caseRecordTypes.data))
             return;
+        const decodedQueryFromUrl = (() => {
+            if (!queryFromUrl || queryFromUrl === 'undefined') {
+                return '';
+            }
+            try {
+                return decodeURIComponent(queryFromUrl);
+            }
+            catch (_a) {
+                return queryFromUrl;
+            }
+        })();
         // when user manually changes url and hit enter, new result is fetched without refreshing the page
         if (!isFirstMount.current) {
-            if (queryFromUrl !== currentQuery) {
-                const filterStateFromQueryUrl = createFilterStateFromUrlQuery(queryFromUrl, globalMetadataState, pageSizeFromUrl, currentPageFromUrl, searchType);
+            if (decodedQueryFromUrl &&
+                decodedQueryFromUrl !== currentQuery &&
+                decodedQueryFromUrl !== lastPushedQueryRef.current) {
+                const filterStateFromQueryUrl = createFilterStateFromUrlQuery(decodedQueryFromUrl, globalMetadataState, undefined, 1, searchType);
                 updateFilterState(filterDispatch, filterStateFromQueryUrl);
             }
             return;
         }
         if (isFirstMount.current) {
+            if (searchParams.rhcd) {
+                // this is to check if rhcd is passed on first load
+                setRHCDValue(searchParams.rhcd);
+            }
+            const hasExplicitUrlQuery = Boolean(decodedQueryFromUrl.trim());
+            if (hasExplicitUrlQuery && decodedQueryFromUrl !== currentQuery) {
+                const { initFilterState, defaultSearchName } = useFilterStateInit.set(decodedQueryFromUrl, undefined, 1, searchType);
+                setDefaultSavedSearchName(defaultSearchName);
+                setCurrentQuery(CaseListDispatch, decodedQueryFromUrl);
+                lastPushedQueryRef.current = decodedQueryFromUrl;
+                isFirstMount.current = false;
+                updateFilterState(filterDispatch, initFilterState);
+                return;
+            }
             // user came to page from another tab - second time on page as currentQuery is set
             // - keep state and show the result that we already have in state
             // - update url to reflect filter state
@@ -266,8 +515,6 @@ export function CaseList(props) {
             if (currentQuery) {
                 const navObj = {
                     [FILTER_URL_QUERY_SEARCH_PARAM]: encodeURIComponent(currentQuery),
-                    [FILTER_URL_PAGE_SIZE_SEARCH_PARAM]: filterState.paginationInfo.pageSize,
-                    [FILTER_URL_CURRENT_PAGE_SEARCH_PARAM]: filterState.paginationInfo.currentPage,
                     [FILTER_URL_QUERY_TYPE]: filterState.filterQueryInfo.type,
                 };
                 props.routeProps.history.replace({ search: getStringifiedParams(navObj) });
@@ -275,35 +522,31 @@ export function CaseList(props) {
                 isFirstMount.current = false;
                 return;
             }
-            /*** user comes to this point on first time app load landing on case list ***/
-            if (searchParams.rhcd) {
-                // this is to check if rhcd is passed on first load
-                setRHCDValue(searchParams.rhcd);
-            }
             // set filter state based on url or default saved search
-            const { initFilterState, defaultSearchName } = useFilterStateInit.set(decodeURIComponent(queryFromUrl), pageSizeFromUrl, currentPageFromUrl, searchType);
+            // Remove when we get OFFSET field from SCT
+            // Always reset to page 1 on fresh load — cursor-based pagination
+            // has no stored cursors after refresh, so page > 1 would cause a mismatch
+            const { initFilterState, defaultSearchName } = useFilterStateInit.set(decodedQueryFromUrl, undefined, 1, searchType);
             // to set default saved search name
             setDefaultSavedSearchName(defaultSearchName);
             // set default params when they are empty
-            if (!queryFromUrl) {
+            if (!decodedQueryFromUrl) {
                 searchParams[FILTER_URL_QUERY_SEARCH_PARAM] = ' orderBy lastModifiedDate desc';
             }
-            setCurrentQuery(CaseListDispatch, queryFromUrl);
+            setCurrentQuery(CaseListDispatch, decodedQueryFromUrl);
             isFirstMount.current = false;
             // we only update the state without api call as we fetch result in another useEffect that observes the state
             updateFilterState(filterDispatch, initFilterState);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [managedAccounts, bookmarkedAccounts, caseGroups, queryFromUrl, pageSizeFromUrl, currentPageFromUrl]);
-    // effect to initially set the filter state to expanded and when we switch from advanced to basic mode
+    }, [managedAccounts, bookmarkedAccounts, caseGroups, caseRecordTypes, queryFromUrl]);
+    // effect to initially set the filter state to expanded on load
     useEffect(() => {
-        // currently there is no easy way to set the panel as expanded on initial load
-        // also we only use the standalone panel and manually change the panel state on toggle btn click
-        isCaseListFilterPanelExanded && isXLScreen && isBasicSearchMode && toggleFilterSection(true);
+        isCaseListFilterPanelExanded && isXLScreen && toggleFilterSection(true);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isBasicSearchMode]);
+    }, []);
     const onConfirmTraditionalSupportAgreement = () => {
-        updateCaseListTraditionalSupportAgreed(globalDispatchContext, true);
+        setTraditionalSupportSessionAgreed(globalDispatchContext, true);
     };
     const displayRHCDAlert = () => {
         const openClosedCopy = `Only showing cases that were ${RHCDValue} during the selected time range specified in
@@ -327,12 +570,6 @@ export function CaseList(props) {
     return (React.createElement(React.Fragment, null,
         React.createElement(CSSUserModal, { onConfirmTraditionalSupportAgreement: onConfirmTraditionalSupportAgreement, display: !caseListTraditionalSupportAgreed }),
         React.createElement("article", { id: "rh-support-cases", className: "cases-main" },
-            isSolrSearchDown && (React.createElement(Alert, { isInline: true, variant: AlertVariant.warning, component: "p", title: React.createElement(Trans, null,
-                    "Case search is working with limited functionality. Please check",
-                    ' ',
-                    React.createElement("a", { href: "https://status.redhat.com", target: "_blank", rel: "noreferrer", "data-tracking-id": "caselist-redirect-status-page" }, "status page"),
-                    ' ',
-                    "for details.") })),
             React.createElement("section", { className: "case-search-top" },
                 !isEmpty(RHCDValue) && isRHCDAlertShown && React.createElement("div", { className: "push-bottom" }, displayRHCDAlert()),
                 React.createElement("div", { className: "search-wrapper" },
@@ -340,17 +577,17 @@ export function CaseList(props) {
                         React.createElement(NewCaseButton, { routeProps: props.routeProps })),
                     React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading case search input') } },
                         React.createElement(CaseSearch, { defaultSavedSearchName: defaultSavedSearchName }))),
-                isBasicSearchMode && (React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading filter chips') } },
-                    React.createElement(CaseListFilterChips, { productVersionPivotValues: get(pivotValues, SolrPivotKeys.product_version, []), isSolrSearchDown: isSolrSearchDown })))),
+                React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading filter chips') } },
+                    React.createElement(CaseListFilterChips, null))),
             React.createElement("section", { className: "case-search-bottom" },
-                isBasicSearchMode && (React.createElement("aside", { className: `case-search-filters ${((_a = filterSectionRef.current) === null || _a === void 0 ? void 0 : _a.expanded) ? '' : 'collapsed'}` },
-                    React.createElement("h2", { className: "filter-header pf-v6-u-display-flex" }, ((_b = filterSectionRef.current) === null || _b === void 0 ? void 0 : _b.expanded) ? (React.createElement(React.Fragment, null,
+                React.createElement("aside", { className: `case-search-filters ${((_g = filterSectionRef.current) === null || _g === void 0 ? void 0 : _g.expanded) ? '' : 'collapsed'}` },
+                    React.createElement("h2", { className: "filter-header pf-v6-u-display-flex" }, ((_h = filterSectionRef.current) === null || _h === void 0 ? void 0 : _h.expanded) ? (React.createElement(React.Fragment, null,
                         React.createElement(Button, { isInline: true, className: "pf-v6-u-flex-shrink-0 pf-v6-u-flex-none case-search-filter-text-button", variant: "link", title: t('Collapse filter section'), "data-tracking-id": "collapse-case-list-filter", onClick: onToggleFilterBtnClick, iconPosition: "right", icon: React.createElement(OpenDrawerRightIcon, { className: "mirrored" }) },
                             React.createElement(Trans, null, "Filters")))) : (React.createElement(Button, { isInline: true, className: "pf-v6-c-button pf-m-link pf-m-inline pf-v6-u-flex-shrink-0 pf-v6-u-flex-none pf-v6-u-display-flex pf-v6-u-align-items-center pf-v6-u-justify-content-center pf-v6-u-px-lg", variant: "link", title: t('Expand filter section'), "data-tracking-id": "expand-case-list-filter", onClick: onToggleFilterBtnClick, iconPosition: "right", icon: React.createElement(OpenDrawerRightIcon, null) }, isXLScreen ? null : React.createElement(Trans, null, "Filters")))),
                     React.createElement("div", { className: "filter-wrapper" },
                         React.createElement("pfe-collapse-panel", { id: "case-filters-panel", "pfe-animation": "false", ref: filterSectionRef },
                             React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading filters') } },
-                                React.createElement(CaseListFilters, { filterValues: filterValuesFromFacetResponse, allCaseTypes: allCaseTypes, allCaseStatuses: allCaseStatuses, allCaseSeverities: allCaseSeverities, allProducts: allProducts, isSolrSearchDown: isSolrSearchDown })))))),
+                                React.createElement(CaseListFilters, { allCaseTypes: allCaseTypes, allCaseStatuses: allCaseStatuses, allCaseSeverities: allCaseSeverities, allProducts: allProducts }))))),
                 React.createElement("section", { className: "case-search-table pf-v6-u-display-flex pf-v6-u-flex-direction-column" },
-                    React.createElement(CaseListTable, { caseList: caseList, caseGroups: caseGroups.data || [], loggedInUserRights: loggedInUserRights.data, sortInfo: filterState.sortInfo, paginationInfo: filterState.paginationInfo, isCaseListPageLoading: isFetching, hasError: hasError, isSolrDown: isSolrSearchDown }))))));
+                    React.createElement(CaseListTable, { caseList: caseList, caseGroups: caseGroups.data || [], loggedInUserRights: loggedInUserRights.data, sortInfo: filterState.sortInfo, isCaseListPageLoading: isFetching, hasError: hasError, hasNextPage: hasNextPage, isLoadingMore: isLoadingMore, loadMoreError: loadMoreError, loadMoreRetryCount: loadMoreRetryCount, onRetryLoadMore: retryLoadMore, onRetryFetch: retryCaseListFetch, caseLabelsFetchError: caseLabelsFetchError, onCasesCloseSuccess: () => getCases(filterState), sentinelRef: sentinelRef }))))));
 }