@rh-support/cases 2.6.228 → 2.6.230

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

@@ -0,0 +1,241 @@
+import { useApolloClient } from '@apollo/client/react';
+import { Badge, Divider, DrilldownMenu, Flex, FlexItem, Menu, MenuContainer, MenuContent, MenuItem, MenuList, MenuToggle, SearchInput, Spinner, } from '@patternfly/react-core';
+import { GlobalMetadataStateContext } from '@rh-support/react-context';
+import { compareVersions, GET_PRODUCTS, handleGraphQLVersionsResponse } from '@rh-support/utils';
+import React, { useContext, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SolrKeys } from '../../../../enums/filters';
+const ROOT_MENU_ID = 'advance-search-product-version-root';
+export function ProductVersionDrilldownSelect({ products, onChange }) {
+    var _a;
+    const { t } = useTranslation();
+    const apolloClient = useApolloClient();
+    const { globalMetadataState: { allProducts }, } = useContext(GlobalMetadataStateContext);
+    const [isOpen, setIsOpen] = useState(false);
+    const [productSearch, setProductSearch] = useState('');
+    const [menuDrilledIn, setMenuDrilledIn] = useState([]);
+    const [drilldownPath, setDrilldownPath] = useState([]);
+    const [activeMenu, setActiveMenu] = useState(ROOT_MENU_ID);
+    const [menuHeights, setMenuHeights] = useState({});
+    const [versionsByProductId, setVersionsByProductId] = useState({});
+    const [loadingProductIds, setLoadingProductIds] = useState({});
+    const toggleRef = useRef(null);
+    const menuRef = useRef(null);
+    const productOptions = useMemo(() => {
+        var _a, _b;
+        return ((_b = (_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult) === null || _b === void 0 ? void 0 : _b.map((product) => ({
+            name: product.product || product.name || '',
+            productId: product.productId || '',
+        }))) || [];
+    }, [(_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult]);
+    const filteredProducts = useMemo(() => {
+        if (!productSearch.trim()) {
+            return productOptions;
+        }
+        const formattedValue = productSearch.replace(/\\/g, '');
+        const searchPattern = new RegExp(formattedValue, 'i');
+        return productOptions.filter((product) => searchPattern.test(product.name));
+    }, [productOptions, productSearch]);
+    const selectedFilterCount = useMemo(() => products.reduce((count, product) => {
+        const versions = product[SolrKeys.version] || [];
+        return count + (versions.length > 0 ? versions.length : 1);
+    }, 0), [products]);
+    const resetDrilldownState = () => {
+        setMenuDrilledIn([]);
+        setDrilldownPath([]);
+        setActiveMenu(ROOT_MENU_ID);
+        setProductSearch('');
+        setMenuHeights({});
+    };
+    const handleOpenChange = (open) => {
+        setIsOpen(open);
+        if (!open) {
+            resetDrilldownState();
+        }
+    };
+    const setHeight = (menuId, height) => {
+        setMenuHeights((previousHeights) => {
+            if (previousHeights[menuId] === undefined ||
+                (menuId !== ROOT_MENU_ID && previousHeights[menuId] !== height)) {
+                return Object.assign(Object.assign({}, previousHeights), { [menuId]: height });
+            }
+            return previousHeights;
+        });
+    };
+    const updateMenuHeight = (menuId) => {
+        requestAnimationFrame(() => {
+            var _a;
+            const menuContent = (_a = document.getElementById(menuId)) === null || _a === void 0 ? void 0 : _a.querySelector('.pf-v6-c-menu__content');
+            if (menuContent instanceof HTMLElement) {
+                setHeight(menuId, menuContent.clientHeight);
+            }
+        });
+    };
+    const drillIn = (_event, fromMenuId, toMenuId, pathId) => {
+        setMenuDrilledIn((previousMenus) => [...previousMenus, fromMenuId]);
+        setDrilldownPath((previousPath) => [...previousPath, pathId]);
+        setActiveMenu(toMenuId);
+        const productId = pathId.replace('product-', '');
+        const product = productOptions.find((item) => item.productId === productId);
+        if (product) {
+            fetchVersionsForProduct(product);
+        }
+    };
+    const drillOut = (_event, toMenuId) => {
+        setMenuDrilledIn((previousMenus) => previousMenus.slice(0, -1));
+        setDrilldownPath((previousPath) => previousPath.slice(0, -1));
+        setActiveMenu(toMenuId);
+    };
+    const fetchVersionsForProduct = (product) => {
+        if (!product.productId || versionsByProductId[product.productId] || loadingProductIds[product.productId]) {
+            return;
+        }
+        setLoadingProductIds((previousState) => (Object.assign(Object.assign({}, previousState), { [product.productId]: true })));
+        apolloClient
+            .query({
+            query: GET_PRODUCTS,
+            variables: {
+                where: { ParentProduct__c: { eq: product.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.redhat_support_uiapi) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.RedHatSupportProduct2) === null || _c === void 0 ? void 0 : _c.edges) !== null && _d !== void 0 ? _d : [];
+            const versionData = handleGraphQLVersionsResponse(edges, product.name);
+            const sortedVersions = [...versionData].sort((versionA, versionB) => compareVersions(versionA.name, versionB.name));
+            setVersionsByProductId((previousState) => (Object.assign(Object.assign({}, previousState), { [product.productId]: sortedVersions })));
+            updateMenuHeight(`versions-menu-${product.productId}`);
+        })
+            .catch((error) => {
+            console.error('[ProductVersionDrilldownSelect] Failed to fetch versions:', error);
+            setVersionsByProductId((previousState) => (Object.assign(Object.assign({}, previousState), { [product.productId]: [] })));
+            updateMenuHeight(`versions-menu-${product.productId}`);
+        })
+            .finally(() => {
+            setLoadingProductIds((previousState) => (Object.assign(Object.assign({}, previousState), { [product.productId]: false })));
+        });
+    };
+    const getProductAppliedFilterCount = (product) => {
+        const selectedProduct = products.find((item) => item.value === product.name);
+        if (!selectedProduct) {
+            return 0;
+        }
+        const versions = selectedProduct[SolrKeys.version] || [];
+        return versions.length > 0 ? versions.length : 1;
+    };
+    const isProductOnlySelected = (product) => {
+        var _a;
+        const selectedProduct = products.find((item) => item.value === product.name);
+        return !!selectedProduct && !((_a = selectedProduct[SolrKeys.version]) === null || _a === void 0 ? void 0 : _a.length);
+    };
+    const toggleProductOnlySelection = (product) => {
+        var _a;
+        const productIndex = products.findIndex((item) => item.value === product.name);
+        if (productIndex === -1) {
+            onChange([
+                ...products,
+                {
+                    field: SolrKeys.product,
+                    value: product.name,
+                    productId: product.productId,
+                    [SolrKeys.version]: [],
+                },
+            ]);
+            return;
+        }
+        const currentProduct = products[productIndex];
+        const hasVersions = (((_a = currentProduct[SolrKeys.version]) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
+        if (!hasVersions) {
+            onChange(products.filter((_, index) => index !== productIndex));
+            return;
+        }
+        const nextProducts = [...products];
+        nextProducts[productIndex] = Object.assign(Object.assign({}, currentProduct), { [SolrKeys.version]: [] });
+        onChange(nextProducts);
+    };
+    const isVersionSelected = (productName, versionName) => {
+        var _a, _b;
+        const selectedProduct = products.find((product) => product.value === productName);
+        return (_b = (_a = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct[SolrKeys.version]) === null || _a === void 0 ? void 0 : _a.some((version) => version.value === versionName)) !== null && _b !== void 0 ? _b : false;
+    };
+    const toggleVersionSelection = (product, version) => {
+        const nextProducts = [...products];
+        const productIndex = nextProducts.findIndex((item) => item.value === product.name);
+        if (productIndex === -1) {
+            onChange([
+                ...nextProducts,
+                {
+                    field: SolrKeys.product,
+                    value: product.name,
+                    productId: product.productId,
+                    [SolrKeys.version]: [
+                        {
+                            field: SolrKeys.version,
+                            value: version.name,
+                            productId: version.id,
+                        },
+                    ],
+                },
+            ]);
+            return;
+        }
+        const currentProduct = nextProducts[productIndex];
+        const currentVersions = currentProduct[SolrKeys.version] || [];
+        const versionIndex = currentVersions.findIndex((item) => item.value === version.name);
+        const nextVersions = versionIndex >= 0
+            ? currentVersions.filter((_, index) => index !== versionIndex)
+            : [
+                ...currentVersions,
+                {
+                    field: SolrKeys.version,
+                    value: version.name,
+                    productId: version.id,
+                },
+            ];
+        if (nextVersions.length === 0) {
+            onChange(nextProducts.filter((_, index) => index !== productIndex));
+            return;
+        }
+        nextProducts[productIndex] = Object.assign(Object.assign({}, currentProduct), { [SolrKeys.version]: nextVersions });
+        onChange(nextProducts);
+    };
+    const renderVersionItems = (product) => {
+        const versions = versionsByProductId[product.productId];
+        const isLoading = loadingProductIds[product.productId];
+        if (isLoading || versions === undefined) {
+            return (React.createElement(MenuItem, { itemId: `loading-${product.productId}`, isDisabled: true },
+                React.createElement(Spinner, { size: "sm", "aria-label": t('Loading versions') }),
+                " ",
+                t('Loading...')));
+        }
+        if (!versions.length) {
+            return (React.createElement(MenuItem, { itemId: `no-versions-${product.productId}`, isDisabled: true }, t('No versions found')));
+        }
+        return versions.map((version) => (React.createElement(MenuItem, { key: `${product.productId}-${version.name}`, itemId: `version-${product.productId}-${version.name}`, hasCheckbox: true, isSelected: isVersionSelected(product.name, version.name), onClick: () => toggleVersionSelection(product, version) }, version.name)));
+    };
+    const renderProductDrilldownMenu = (product) => (React.createElement(DrilldownMenu, { id: `versions-menu-${product.productId}` },
+        React.createElement(MenuItem, { itemId: `breadcrumb-${product.productId}`, direction: "up" }, product.name),
+        React.createElement(Divider, { component: "li" }),
+        React.createElement(MenuItem, { itemId: `product-only-${product.productId}`, hasCheckbox: true, isSelected: isProductOnlySelected(product), onClick: () => toggleProductOnlySelection(product) }, t('Entire product')),
+        React.createElement(Divider, { component: "li" }),
+        renderVersionItems(product)));
+    const toggleLabel = t('Select Product & version');
+    const isRootMenuActive = activeMenu === ROOT_MENU_ID;
+    return (React.createElement(MenuContainer, { isOpen: isOpen, onOpenChange: handleOpenChange, menuRef: menuRef, toggleRef: toggleRef, popperProps: { direction: 'down', enableFlip: false, width: 'trigger' }, toggle: React.createElement(MenuToggle, { ref: toggleRef, onClick: () => handleOpenChange(!isOpen), isExpanded: isOpen, isFullWidth: true, "aria-label": t('Select Product & version') },
+            React.createElement(Flex, { alignItems: { default: 'alignItemsCenter' }, justifyContent: { default: 'justifyContentSpaceBetween' }, className: "pf-v6-u-w-100 advance-search-dropdown-toggle-content" },
+                React.createElement(FlexItem, { className: "pf-v6-u-text-align-left" }, toggleLabel),
+                selectedFilterCount > 0 ? (React.createElement(FlexItem, { className: "advance-search-dropdown-toggle-badge-wrap" },
+                    React.createElement(Badge, { className: "advance-search-dropdown-toggle-badge" }, t('{{count}} selected', { count: selectedFilterCount })))) : null)), menu: React.createElement(Menu, { id: ROOT_MENU_ID, ref: menuRef, containsDrilldown: true, drilldownItemPath: drilldownPath, drilledInMenus: menuDrilledIn, activeMenu: activeMenu, onDrillIn: drillIn, onDrillOut: drillOut, onGetMenuHeight: setHeight, isScrollable: true, "data-tracking-id": "advance-search-product-version-drilldown" },
+            React.createElement(MenuContent, { menuHeight: `${menuHeights[activeMenu]}px` },
+                !isRootMenuActive ? null : (React.createElement("div", { className: "advance-search-product-version-search pf-v6-u-p-sm", onMouseDown: (event) => event.stopPropagation() },
+                    React.createElement(SearchInput, { placeholder: t('Find product by name'), value: productSearch, onChange: (_event, value) => setProductSearch(value), onClear: () => setProductSearch(''), "aria-label": t('Find product by name') }))),
+                React.createElement(MenuList, null, filteredProducts.length === 0 ? (React.createElement(MenuItem, { itemId: "no-products-found", isDisabled: true }, t('No results found'))) : (filteredProducts.map((product) => {
+                    const productAppliedCount = getProductAppliedFilterCount(product);
+                    return (React.createElement(MenuItem, { key: product.productId, itemId: `product-${product.productId}`, direction: "down", actions: productAppliedCount > 0 ? (React.createElement(Badge, { className: "advance-search-product-menu-item-badge pf-v6-u-mx-sm", "aria-label": t('{{count}} filters applied', {
+                                count: productAppliedCount,
+                            }) }, productAppliedCount)) : undefined, drilldownMenu: renderProductDrilldownMenu(product) }, product.name));
+                }))))) }));
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface IProps {
+    label: string;
+    options: string[];
+    selected: string[];
+    onChange: (selected: string[]) => void;
+    sectionId: string;
+}
+export declare function SelectableLabelFilter({ label, options, selected, onChange, sectionId }: IProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=SelectableLabelFilter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableLabelFilter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/case-list/case-search/advance-search-modal/SelectableLabelFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,MAAM;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,MAAM,qBAwD9F"}

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

@@ -0,0 +1,23 @@
+import { Button, Flex, Label } from '@patternfly/react-core';
+import CloseIcon from '@patternfly/react-icons/dist/esm/icons/close-icon';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { AdvanceSearchFieldBlock } from './AdvanceSearchFieldBlock';
+export function SelectableLabelFilter({ label, options, selected, onChange, sectionId }) {
+    const { t } = useTranslation();
+    const toggleOption = (option) => {
+        if (selected.includes(option)) {
+            onChange(selected.filter((value) => value !== option));
+            return;
+        }
+        onChange([...selected, option]);
+    };
+    const clearSelection = () => onChange([]);
+    return (React.createElement(AdvanceSearchFieldBlock, { label: React.createElement(React.Fragment, null,
+            label,
+            selected.length > 0 ? ` (${selected.length})` : ''), headerActions: selected.length > 0 ? (React.createElement(Button, { variant: "plain", onClick: clearSelection, "aria-label": t('Clear {{label}} selection', { label }), icon: React.createElement(CloseIcon, { "aria-hidden": true }), className: "pf-v6-u-p-0" })) : undefined },
+        React.createElement(Flex, { flexWrap: { default: 'wrap' }, spaceItems: { default: 'spaceItemsSm' }, rowGap: { default: 'rowGapSm' } }, options.map((option) => {
+            const isSelected = selected.includes(option);
+            return (React.createElement(Label, { key: option, color: isSelected ? 'blue' : 'grey', variant: isSelected ? 'filled' : 'outline', isCompact: true, onClick: () => toggleOption(option), id: `${sectionId}-${option.replace(/\s+/g, '-')}` }, option));
+        }))));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"useAdvanceSearchParser.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/useAdvanceSearchParser.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAAE,MAAM,EAAE;;CAAA;yBASzB,MAAM;6BAIF,MAAM;;EA+LzC"}
+{"version":3,"file":"useAdvanceSearchParser.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/useAdvanceSearchParser.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAAE,MAAM,EAAE;;CAAA;yBAUzB,MAAM;6BAIF,MAAM;;EA+LzC"}

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

@@ -5,7 +5,8 @@ import { useEffect, useRef } from 'react';
 import { SolrKeys } from '../../../enums/filters';
 import { useCaseListStateContext } from '../CaseListContext';
 export default function useAdvanceSearchParser({ onInit }) {
-    const { filterValuesFromFacetResponse } = useCaseListStateContext();
+    const caseListState = useCaseListStateContext();
+    const filterValuesFromFacetResponse = caseListState.filterValuesFromFacetResponse || {};
     const { globalMetadataState: { caseGroups, loggedInUsersAccount, bookmarkedGroupAccounts, allCaseTypes }, } = useGlobalStateContext();
     const parserRef = useRef(null);
     const parse = (stringQuery) => {

package/lib/esm/css/caseList.css

@@ -186,11 +186,17 @@
 .cases-main .case-search-table {
     -ms-flex: 1;
     flex-grow: 1;
-    display: block;
-    overflow-x: auto;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
     border-radius: 0 0 16px !important;
 }
 
+.cases-main .case-search-table > .pf-v6-c-scroll-inner-wrapper {
+    overflow-x: auto;
+    flex: 1;
+}
+
 .case-search-bottom .case-list-table-toolbar {
     -ms-flex-align: center;
     align-items: center;
@@ -200,6 +206,10 @@
     background-color: var(--pf-t--color--gray--10);
     border-top: 1px solid var(--pf-t--global--border--color--100);
     border-right: 1px solid var(--pf-t--global--border--color--100);
+    border-bottom: 1px solid var(--pf-t--global--border--color--100);
+    position: sticky;
+    top: 0;
+    z-index: 100;
 }
 
 .case-search-bottom .case-list-table-toolbar .toolbar-actions {
@@ -219,26 +229,105 @@
     color: #06c !important;
 }
 
-.case-search-bottom .case-list-table-toolbar .toolbar-pagination button[disabled] {
-    color: #999;
-}
-
 .case-search-bottom .case-list-table-toolbar button.pf-m-secondary:not([disabled]),
 .case-search-bottom .case-list-table-toolbar button.pf-m-tertiary:not([disabled]),
 .case-search-bottom .case-list-table-toolbar button.pf-m-control:not([disabled]) {
     background-color: #fff;
 }
 
+.case-count-indicator {
+    font-size: 14px !important;
+    line-height: 1.5em;
+    white-space: nowrap;
+    padding-right: 1rem;
+    color: var(--pf-t--global--text--color--regular, #151515);
+}
+
 .cases-main .case-search-table .case-list-table {
-    border-top: 1px solid var(--pf-t--global--border--color--100);
     border-right: 1px solid var(--pf-t--global--border--color--100);
     border-bottom: 1px solid var(--pf-t--global--border--color--100);
 }
 
-.case-list-table .pf-v6-c-label .pf-v6-c-label__content .pf-v6-c-label__icon {
+.case-list-table td[data-label='Case labels'] .pf-v6-c-label .pf-v6-c-label__content .pf-v6-c-label__icon {
     display: none;
 }
 
+.case-number-section .archived-case-label.pf-m-purple .pf-v6-c-label__icon {
+    color: #5e40be;
+}
+
+.case-list-table th#caseLabel,
+.case-list-table td[data-label='Case labels'] {
+    width: 20rem;
+    min-width: 20rem;
+    max-width: 20rem;
+}
+
+.case-list-label-cell {
+    --case-list-label-gap: 8px;
+    position: relative;
+    max-width: 100%;
+    width: 100%;
+}
+
+.case-list-label-cell__measure {
+    display: flex;
+    column-gap: var(--case-list-label-gap);
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+    height: 0;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.case-list-table td[data-label='Case labels'] .case-list-label-group,
+.case-list-table td[data-label='Case labels'] .case-list-label-group .pf-v6-c-label-group__main,
+.case-list-table td[data-label='Case labels'] .case-list-label-group .pf-v6-c-label-group__list {
+    max-width: 100%;
+    width: 100%;
+}
+
+.case-list-table td[data-label='Case labels'] .case-list-label-group .pf-v6-c-label-group__list {
+    column-gap: var(--case-list-label-gap);
+    flex-wrap: nowrap;
+}
+
+.case-list-table td[data-label='Case labels'] .case-list-label-group .pf-v6-c-label-group__list-item {
+    flex-shrink: 0;
+}
+
+.case-list-table td[data-label='Case labels'] .case-list-label-group .pf-v6-c-label__text {
+    white-space: nowrap;
+}
+
+.case-list-label-popover .pf-v6-c-label-group__list {
+    column-gap: var(--case-list-label-gap);
+    row-gap: var(--case-list-label-gap);
+    flex-wrap: wrap;
+}
+
+.case-list-label-popover-panel {
+    --case-list-label-gap: 8px;
+    --case-list-label-popover-offset-x: 0.9rem;
+    --case-list-label-popover-offset-y: 0.1rem;
+    --case-list-label-popover-close-offset-x: 0.5rem;
+    --pf-v6-c-popover__close--sibling--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+    --pf-v6-c-popover__close--InsetInlineEnd: calc(
+        var(--pf-v6-c-popover__content--PaddingInlineEnd, 1rem) - var(--case-list-label-popover-close-offset-x)
+    );
+    margin-inline-start: var(--case-list-label-popover-offset-x);
+    margin-block-start: var(--case-list-label-popover-offset-y);
+}
+
+.case-list-label-popover-panel .pf-v6-c-popover__close .pf-v6-c-button {
+    width: 21px;
+    height: 21px;
+    min-width: 21px;
+    min-height: 21px;
+    padding: 0;
+}
+
 .case-list-table td[data-label='Title'] {
     text-align: start !important;
 }
@@ -277,17 +366,6 @@
     text-transform: uppercase;
 }
 
-.case-search-bottom .case-search-table footer.toolbar-pagination {
-    margin-top: 0 !important;
-    border-right: 1px solid var(--pf-t--global--border--color--100);
-    border-bottom: 1px solid var(--pf-t--global--border--color--100);
-    border-radius: 16px !important;
-}
-
-.case-search-bottom .case-search-table footer.toolbar-pagination > :first-child {
-    padding: 1rem;
-}
-
 .case-search-bottom #case-filters-panel {
     -ms-flex: 100%;
     flex-basis: 100%;
@@ -300,11 +378,13 @@
     border-right: 1px solid var(--pf-t--global--border--color--100);
     border-bottom: 1px solid var(--pf-t--global--border--color--100);
     border-radius: 0 0 0 16px;
+    align-self: stretch;
 }
 
 .case-search-filters .filter-header {
     min-height: 4rem;
     margin: 0;
+    padding: 0;
 }
 
 .case-search-filters .filter-header .pf-v6-svg {
@@ -349,6 +429,10 @@
     font-size: 1rem;
     font-weight: 600;
     height: 4.3rem;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background-color: #f2f2f2;
 
     .pf-v6-c-button__icon.pf-m-end {
         margin-right: -4px !important;
@@ -359,6 +443,8 @@
 .filter-wrapper {
     padding: 24px;
     background-color: var(--pf-t--color--gray--10);
+    position: relative;
+    z-index: 0;
 }
 
 .filter-wrapper .filter-group > * {
@@ -413,10 +499,6 @@
     .case-search-bottom .case-list-table-toolbar .toolbar-actions > * {
         margin-bottom: 0;
     }
-
-    .case-search-bottom .case-list-table-toolbar .toolbar-pagination {
-        margin-top: 0;
-    }
 }
 
 @media (min-width: 768px) {
@@ -645,3 +727,86 @@ th#product.pf-v6-c-table__th {
 .case-list-table .pf-v6-c-table__button {
     margin-bottom: 0px !important;
 }
+
+.skeleton-loader-row {
+    height: 62px;
+}
+
+.skeleton-loader-row .skeleton-sentinel {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+.skeleton-loader-row .skeleton-bar {
+    display: block;
+    height: 24px;
+    border-radius: 4px;
+    background-color: #e0e0e0;
+    animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.skeleton-loader-row .skeleton-bar--checkbox {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border-radius: 3px;
+}
+
+@keyframes skeleton-pulse {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.4;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.infinite-scroll-footer-message {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 0;
+    position: sticky;
+    left: 0;
+    background-color: #fff;
+}
+
+.infinite-scroll-footer-text,
+.infinite-scroll-alert,
+.infinite-scroll-alert * {
+    font-size: 14px !important;
+}
+
+.infinite-scroll-footer-message .pf-v6-c-alert.pf-m-inline.pf-m-plain {
+    padding: 0;
+}
+
+.infinite-scroll-footer-message .pf-v6-c-button.pf-m-link.pf-m-inline {
+    text-decoration: none;
+}
+
+.infinite-scroll-retry-btn.pf-v6-c-button.pf-m-secondary {
+    border-radius: 999px;
+    padding: 8px 24px;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.5;
+    display: inline-flex;
+    align-items: center;
+}
+
+.infinite-scroll-retry-btn .pf-v6-c-button__icon {
+    display: inline-flex;
+    align-items: center;
+    line-height: 0;
+}
+
+.infinite-scroll-retry-btn .pf-v6-c-button__icon svg {
+    vertical-align: middle;
+}