@rh-support/cases 2.4.10-beta.6 → 2.5.0

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

@@ -1,12 +1,15 @@
-import { Bullseye, Button, EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateVariant, PaginationVariant, Title, } from '@patternfly/react-core';
+import { Bullseye, Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, PaginationVariant, Spinner, } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
-import { PFTable, Table, TableColumnSelector, TablePagination, } from '@rh-support/components';
-import { GlobalMetadataDispatchContext, GlobalMetadataStateContext, updateUserPreferences, useGlobalStateContext, UserPreferencesKeys, } from '@rh-support/react-context';
+import { Table, TableVariant, Tbody, Td, Th, Thead, Tr, Visibility } from '@patternfly/react-table';
+import { TableComponent, TablePagination } from '@rh-support/components';
+import { GlobalMetadataDispatchContext, updateUserPreferences, useGlobalStateContext, UserPreferencesKeys, } from '@rh-support/react-context';
 import { formatDate, scrollIntoView, toNewCaseTypeSwitcher } from '@rh-support/utils';
 import find from 'lodash/find';
 import flatMap from 'lodash/flatMap';
-import get from 'lodash/get';
 import includes from 'lodash/includes';
+import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
+import isUndefined from 'lodash/isUndefined';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -16,6 +19,8 @@ import { clearFilters, resetFilterToDefaultState, updatePagination, updateSort,
 import CloseCaseBtn from './CloseCaseBtn';
 import { ExportCaseListCSV } from './ExportCaseListCSV';
 import SeverityLabel from './SeverityLabel';
+import { TableColumnSelector } from './table-column-selector/TableColumnSelector';
+// initially selected columns
 const initialSelectedColumns = [
     CaseListColumnIds.caseId,
     CaseListColumnIds.summary,
@@ -29,163 +34,114 @@ const EMPTY_STATE_NO_FILTERS = 'The table will be populated after creating your
 const EMPTY_STATE_NO_FILTERS_INTERNALUSER = 'Try expanding your search to filter on cases for all Red Hat accounts.';
 const EMPTY_STATE_NO_FILTERS_ERROR = (React.createElement(React.Fragment, null,
     "Try refreshing or check the",
-    ' ',
     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;
-    const [selectedColumns, setSelectedColumns] = useState(initialSelectedColumns);
+    const [selectedColumns, setSelectedColumns] = useState([]);
     const { t } = useTranslation();
     const [selectedCases, setSelectedCases] = useState([]);
     const caseListData = props.isCaseListPageLoading ? [] : (_b = (_a = props.caseList) === null || _a === void 0 ? void 0 : _a.docs) !== null && _b !== void 0 ? _b : [];
     const isColumnVisible = (columnId) => {
         return includes(selectedColumns, columnId);
     };
-    const { globalMetadataState: { navBarRef, hydraUserPreferences }, } = useGlobalStateContext();
+    const mandatoryColumns = ['number', 'summary'];
+    const visibleColumns = mandatoryColumns.concat(selectedColumns);
+    const [activeSortIndex, setActiveSortIndex] = useState();
+    const [activeSortDirection, setActiveSortDirection] = useState();
+    const [sortedCaseListData, setSortedCaseListData] = useState(caseListData);
+    const { globalMetadataState: { navBarRef, hydraUserPreferences, loggedInUserRights }, } = useGlobalStateContext();
     const dispatch = useContext(CaseListFilterDispatchContext);
     const dispatchToGlobalMetadataReducer = useContext(GlobalMetadataDispatchContext);
-    const { filterInfo } = useContext(CaseListFilterStateContext);
+    const { filterInfo, filterQueryInfo } = useContext(CaseListFilterStateContext);
     const currentFilterLength = flatMap(filterInfo).length;
     const showingFilter = currentFilterLength > 0;
-    const filterState = useContext(CaseListFilterStateContext);
-    const { filterQueryInfo } = filterState;
-    const hasSearchQuery = !(filterQueryInfo.queryString === '');
-    const { globalMetadataState: { loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
+    const hasSearchQuery = !((filterQueryInfo === null || filterQueryInfo === void 0 ? void 0 : filterQueryInfo.queryString) === '');
     const isInternal = loggedInUserRights.data.isInternal();
     const tableToolbarRef = useRef(null);
-    const getCaseGroupName = (groupNum) => {
-        if (!groupNum || props.caseGroups.length < 1)
-            return '';
-        const group = props.caseGroups.find((group) => group.groupNum === groupNum);
-        return (group === null || group === void 0 ? void 0 : group.name) || '';
-    };
     const columns = [
         {
             id: CaseListColumnIds.caseId,
-            cellWidth: 10,
             title: t('Case ID'),
-            rowProps: (data) => ({ 'data-casenumber': data.case_number }),
             sortable: true,
-            cell: (data) => (React.createElement(React.Fragment, null,
-                React.createElement(Link, { to: `/case/${data.case_number}` },
-                    React.createElement("span", { className: "case-number" }, data.case_number)),
-                ' ',
-                data.case_customer_escalation ? (React.createElement("div", { className: "escalation-label" },
-                    React.createElement(Trans, null, "Escalated"))) : null)),
         },
         {
             id: CaseListColumnIds.summary,
-            cellWidth: 10,
-            title: t('Issue summary'),
+            title: t('Title'),
             sortable: true,
-            accessor: (data) => data.case_summary,
         },
         {
             id: CaseListColumnIds.owner,
-            cellWidth: 10,
             title: t('Owner'),
             sortable: true,
-            accessor: (data) => data.case_contactName,
             show: isColumnVisible(CaseListColumnIds.owner),
         },
         {
             id: CaseListColumnIds.modified,
-            cellWidth: 10,
             title: t('Modified by'),
             sortable: true,
-            cell: (data) => (React.createElement(React.Fragment, null,
-                React.createElement("span", { className: "modified-name" }, data.case_lastModifiedByName),
-                ' ',
-                data.case_lastModifiedDate ? formatDate(data.case_lastModifiedDate) : null)),
             show: isColumnVisible(CaseListColumnIds.modified),
         },
         {
             id: CaseListColumnIds.severity,
-            cellWidth: 10,
             title: t('Severity'),
             sortable: true,
-            cell: (data) => React.createElement(SeverityLabel, { sevValue: data.case_severity }),
             show: isColumnVisible(CaseListColumnIds.severity),
         },
         {
             id: CaseListColumnIds.status,
-            cellWidth: 10,
             title: t('Status'),
             sortable: true,
-            accessor: (data) => data.case_status,
             show: isColumnVisible(CaseListColumnIds.status),
         },
         {
             id: CaseListColumnIds.created,
-            cellWidth: 10,
             title: t('Created by'),
             sortable: true,
-            cell: (data) => (React.createElement(React.Fragment, null,
-                React.createElement("span", { className: "created-name" }, data.case_createdByName),
-                ' ',
-                data.case_createdDate ? formatDate(data.case_createdDate) : null)),
             show: isColumnVisible(CaseListColumnIds.created),
         },
         {
             id: CaseListColumnIds.productAndVersion,
             cellWidth: 15,
             title: t('Product and version'),
-            cell: (data) => (React.createElement(React.Fragment, null,
-                data.case_product,
-                " ",
-                React.createElement("span", { style: { display: 'block' } }, data.case_version))),
             show: isColumnVisible(CaseListColumnIds.productAndVersion),
         },
         {
             id: CaseListColumnIds.accountNumber,
-            cellWidth: 10,
             title: t('Account number'),
             sortable: true,
-            accessor: (data) => data.case_accountNumber,
             show: isColumnVisible(CaseListColumnIds.accountNumber),
         },
         {
             id: CaseListColumnIds.alternateCaseId,
-            cellWidth: 10,
             title: t('Personal reference number'),
             sortable: true,
-            accessor: (data) => data.case_alternate_id,
             show: isColumnVisible(CaseListColumnIds.alternateCaseId),
         },
         {
             id: CaseListColumnIds.type,
-            cellWidth: 10,
             title: t('Support type'),
             sortable: true,
-            accessor: (data) => toNewCaseTypeSwitcher(data.case_type),
             show: isColumnVisible(CaseListColumnIds.type),
         },
         {
             id: CaseListColumnIds.caseClosedDate,
-            cellWidth: 10,
             title: t('Closed date'),
             sortable: true,
-            accessor: (data) => formatDate(data.case_closedDate),
             show: isColumnVisible(CaseListColumnIds.caseClosedDate),
         },
         {
             id: CaseListColumnIds.group,
-            cellWidth: 10,
             title: t('Group'),
             sortable: true,
-            accessor: (data) => data.case_folderName || getCaseGroupName(data.case_folderNumber),
             show: isColumnVisible(CaseListColumnIds.group),
         },
     ];
-    const getSelectedColumnsListFromCache = () => {
-        const savedSelectedColumnsKey = UserPreferencesKeys.caseListSelectedColumns;
-        const savedSelectedColumns = find(hydraUserPreferences.data, (pref) => pref.key === savedSelectedColumnsKey);
-        (savedSelectedColumns === null || savedSelectedColumns === void 0 ? void 0 : savedSelectedColumns.value) && setSelectedColumns(JSON.parse(savedSelectedColumns.value));
+    const visibleCaseListColumns = columns.filter((column) => visibleColumns.includes(column.id));
+    const allRows = caseListData.map((row, index) => row.case_number);
+    const selectAllRows = () => {
+        !isEqual(selectedCases, allRows) ? setSelectedCases(allRows) : setSelectedCases([]);
     };
-    useEffect(() => {
-        getSelectedColumnsListFromCache();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     const onColumnSelectorChange = (selectedColumnsList) => {
         setSelectedColumns(selectedColumnsList);
         try {
@@ -200,9 +156,6 @@ export function CaseListTable(props) {
             console.error('Could not save selected columns in cache');
         }
     };
-    const onSortChange = (column, direction) => {
-        updateSort(dispatch, { direction, column: column.id });
-    };
     const onPerPageSelect = (paginationInfo) => {
         updatePagination(dispatch, paginationInfo);
     };
@@ -214,20 +167,12 @@ export function CaseListTable(props) {
         if (ev.target.tagName === 'INPUT') {
             return;
         }
-        // not used currently
-        // const caseId = get(row, 'case-id.props.data-casenumber');
-        // navigate to case details page here
     };
-    useEffect(() => {
-        setSelectedCases([]);
-    }, [props.caseList]);
-    const onRowSelect = (ev, isSelected, rowindex, rowdata, extradata) => {
-        if (rowindex === -1) {
-            isSelected ? setSelectedCases(caseListData.map((kase) => kase.case_number)) : setSelectedCases([]);
-        }
-        else {
-            const caseNumber = get(rowdata, 'cells[0].props.data-casenumber');
-            setSelectedCases((oldCases) => isSelected ? [...oldCases, caseNumber] : oldCases.filter((caseId) => caseId !== caseNumber));
+    const onRowSelect = (ev, caseNumber) => {
+        if (!isUndefined(caseNumber)) {
+            setSelectedCases((oldCases) => !selectedCases.includes(caseNumber)
+                ? [...oldCases, caseNumber]
+                : oldCases.filter((caseId) => caseId !== caseNumber));
         }
     };
     // Clear Filters
@@ -251,27 +196,23 @@ export function CaseListTable(props) {
             return EMPTY_STATE_FILTER_APPLIED;
         }
     };
-    const noResultFoundRow = [
-        {
-            heightAuto: true,
-            cells: [
-                {
-                    props: { colSpan: 9 },
-                    title: (React.createElement(Bullseye, null,
-                        React.createElement(EmptyState, { variant: EmptyStateVariant.full },
-                            React.createElement(EmptyStateIcon, { icon: SearchIcon }),
-                            React.createElement(Title, { headingLevel: "h2", size: "lg" },
-                                React.createElement(Trans, null, isInternal && (!showingFilter || !hasSearchQuery)
-                                    ? 'No results found'
-                                    : 'No information to display')),
-                            React.createElement(EmptyStateBody, null,
-                                React.createElement(Trans, null, getEmptyStateErrMessage())),
-                            (showingFilter || hasSearchQuery) && (React.createElement(Button, { variant: "link", onClick: clearAllFilters },
-                                React.createElement(Trans, null, "Clear all")))))),
-                },
-            ],
-        },
-    ];
+    const noResultFoundRow = (React.createElement(Tr, null,
+        React.createElement(Td, { colSpan: 8 },
+            React.createElement(Bullseye, { style: { minHeight: '350px' } },
+                React.createElement(EmptyState, { variant: EmptyStateVariant.full },
+                    React.createElement(EmptyStateHeader, { titleText: React.createElement(React.Fragment, null,
+                            React.createElement(Trans, null, isInternal && (!showingFilter || !hasSearchQuery)
+                                ? 'No results found'
+                                : 'No information to display')), icon: React.createElement(EmptyStateIcon, { icon: SearchIcon }), headingLevel: "h2" }),
+                    React.createElement(EmptyStateBody, null,
+                        React.createElement(Trans, null, getEmptyStateErrMessage())),
+                    React.createElement(EmptyStateFooter, null, (showingFilter || hasSearchQuery) && (React.createElement(Button, { variant: "link", onClick: clearAllFilters },
+                        React.createElement(Trans, null, "Clear all")))))))));
+    const loadingRowDefault = (React.createElement(Tr, null,
+        React.createElement(Td, { colSpan: 8 },
+            React.createElement(Bullseye, { style: { minHeight: '350px' } },
+                React.createElement(EmptyState, { variant: EmptyStateVariant.sm },
+                    React.createElement(Spinner, { size: "xl" }))))));
     const onCasesCloseSuccess = () => {
         resetFilterToDefaultState(dispatch);
     };
@@ -289,17 +230,174 @@ export function CaseListTable(props) {
         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 [
+            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,
+        ];
+    };
+    const onSort = (columnIndex) => ({
+        sortBy: {
+            index: activeSortIndex,
+            direction: activeSortDirection,
+        },
+        onSort: (_event, index, direction) => {
+            setActiveSortIndex(index);
+            setActiveSortDirection(direction);
+        },
+        columnIndex,
+    });
+    const getCaseGroupName = (groupNum) => {
+        var _a, _b;
+        if (!groupNum || ((_a = props.caseGroups) === null || _a === void 0 ? void 0 : _a.length) < 1)
+            return '';
+        const group = (_b = props.caseGroups) === null || _b === void 0 ? void 0 : _b.find((group) => group.groupNum === groupNum);
+        return (group === null || group === void 0 ? void 0 : group.name) || '';
+    };
+    const localRows = [
+        ...caseListData === null || caseListData === void 0 ? void 0 : caseListData.map((row, index) => ({
+            case_number: row.case_number,
+            case_summary: row.case_summary,
+            case_createdByName: row.case_createdByName,
+            case_lastModifiedDate: formatDate(row.case_lastModifiedDate) ? formatDate(row.case_lastModifiedDate) : '',
+            case_severity: row.case_severity ? row.case_severity : '',
+            case_status: 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 : '',
+            case_type: toNewCaseTypeSwitcher(row.case_type),
+            case_closedDate: formatDate(row.case_closedDate) ? formatDate(row.case_closedDate) : '',
+            case_folderName: row.case_folderName || getCaseGroupName(row.case_folderNumber) || '',
+            case_contactName: row.case_contactName,
+            case_lastModifiedByName: row.case_lastModifiedByName ? row.case_lastModifiedByName : '',
+            case_version: row.case_version,
+            id: row.id,
+            case_product: row.case_product,
+            case_customer_escalation: row.case_customer_escalation,
+        })),
+    ];
+    useEffect(() => {
+        var _a;
+        setSelectedCases([]);
+        !isEmpty(localRows) ? setSortedCaseListData(localRows) : setSortedCaseListData((_a = props.caseList) === null || _a === void 0 ? void 0 : _a.docs);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.caseList]);
+    useEffect(() => {
+        if (hydraUserPreferences.isFetching)
+            return;
+        const getSelectedColumnsListFromCache = () => {
+            const savedSelectedColumns = find(hydraUserPreferences === null || hydraUserPreferences === void 0 ? void 0 : hydraUserPreferences.data, (pref) => pref.key === UserPreferencesKeys.caseListSelectedColumns);
+            if (!isUndefined(savedSelectedColumns) && JSON.parse(savedSelectedColumns === null || savedSelectedColumns === void 0 ? void 0 : savedSelectedColumns.value)) {
+                setSelectedColumns(JSON.parse(savedSelectedColumns === null || savedSelectedColumns === void 0 ? void 0 : savedSelectedColumns.value));
+            }
+            else {
+                setSelectedColumns(initialSelectedColumns);
+            }
+        };
+        getSelectedColumnsListFromCache();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        let sortedRows = localRows;
+        if (activeSortIndex !== undefined && activeSortDirection !== undefined) {
+            updateSort(dispatch, {
+                direction: activeSortDirection,
+                column: visibleCaseListColumns[activeSortIndex].id,
+            });
+            sortedRows = localRows === null || localRows === void 0 ? void 0 : localRows.sort((a, b) => {
+                const aValue = getSortableRowValues(a)[activeSortIndex];
+                const bValue = getSortableRowValues(b)[activeSortIndex];
+                if (typeof aValue === 'number') {
+                    // Numeric sort
+                    if (activeSortDirection === 'asc') {
+                        return aValue - bValue;
+                    }
+                    return bValue - aValue;
+                }
+                else {
+                    // String sort
+                    if (activeSortDirection === 'asc') {
+                        return aValue === null || aValue === void 0 ? void 0 : aValue.localeCompare(bValue);
+                    }
+                    return bValue === null || bValue === void 0 ? void 0 : bValue.localeCompare(aValue);
+                }
+            });
+        }
+        setSortedCaseListData(sortedRows);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeSortDirection, activeSortIndex]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Table, { columns: columns, data: caseListData, selectedColumns: selectedColumns },
-            React.createElement("div", { className: "case-list-table-toolbar pf-l-flex", ref: tableToolbarRef },
-                React.createElement("div", { className: "toolbar-actions pf-l-flex pf-m-space-items-sm" },
-                    React.createElement(TableColumnSelector, { onColumnSelectorChange: onColumnSelectorChange }),
-                    React.createElement(ExportCaseListCSV, { currentFilteredCaseList: props.caseList, isExportCsvDisabled: props.isSolrDown }),
+        React.createElement(TableComponent, { columns: columns, data: caseListData, selectedColumns: selectedColumns },
+            React.createElement("div", { className: "case-list-table-toolbar pf-v5-l-flex", ref: tableToolbarRef },
+                React.createElement("div", { className: "toolbar-actions pf-v5-l-flex pf-m-space-items-sm" },
+                    React.createElement(TableColumnSelector, { onColumnSelectorChange: onColumnSelectorChange, cachedColumns: selectedColumns }),
+                    React.createElement(ExportCaseListCSV, { currentFilteredCaseList: props.caseList, isExportCsvDisabled: props.isSolrDown, selectedCases: selectedCases }),
                     React.createElement(CloseCaseBtn, { selectedCases: selectedCases, caseList: caseListData, onCasesCloseSuccess: onCasesCloseSuccess })),
                 React.createElement("span", { className: "toolbar-pagination" },
                     React.createElement(TablePagination, { perPage: (_c = props.paginationInfo) === null || _c === void 0 ? void 0 : _c.pageSize, currentPage: (_d = props.paginationInfo) === null || _d === void 0 ? void 0 : _d.currentPage, onPerPageSelect: onPerPageSelect, onSetPage: onSetPage, variant: PaginationVariant.top, itemCount: getItemCount() }))),
-            React.createElement("div", { className: "pf-c-scroll-inner-wrapper" },
-                React.createElement(PFTable, { "aria-label": "case-list", className: "case-list-table", pagination: false, onRowClick: onRowClick, onSortChange: onSortChange, onSelect: onRowSelect, emptyStateRow: noResultFoundRow, sortInfo: props.sortInfo, isLoading: props.isCaseListPageLoading })),
-            caseListData.length > 9 && (React.createElement("footer", { className: "toolbar-pagination" },
-                React.createElement(TablePagination, { perPage: (_e = props === null || props === void 0 ? void 0 : props.paginationInfo) === null || _e === void 0 ? void 0 : _e.pageSize, currentPage: (_f = props === null || props === void 0 ? void 0 : props.paginationInfo) === null || _f === void 0 ? void 0 : _f.currentPage, onPerPageSelect: onPerPageSelect, onSetPage: onBottomPaginationSetPage, variant: PaginationVariant.bottom, itemCount: getItemCount() }))))));
+            React.createElement("div", { className: "pf-v5-c-scroll-inner-wrapper" },
+                React.createElement(Table, { variant: TableVariant.compact, "aria-label": "case-list", className: "case-list-table" },
+                    React.createElement(Thead, null,
+                        React.createElement(Tr, { key: "tableHeaderRow" },
+                            React.createElement(Th, { select: {
+                                    onSelect: (_event, isSelecting) => selectAllRows(),
+                                    isSelected: isEqual(selectedCases, allRows),
+                                }, className: props.isCaseListPageLoading || (caseListData || []).length < 1
+                                    ? Visibility.hidden
+                                    : '', key: "selectAllRowsCheckBox" }),
+                            visibleCaseListColumns.map((column, index) => (React.createElement(Th, { 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, { 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(Th, { dataLabel: "Case ID", id: row.case_number, scope: "row" },
+                                    React.createElement("div", { className: "case-number-section" },
+                                        React.createElement(Link, { to: `/case/${row.case_number}` },
+                                            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() })))));
 }

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

@@ -1,9 +1,10 @@
+import React from 'react';
 import { ICaseListResponse } from '../../../models/caseList';
 interface IProps {
     selectedCases: string[];
     caseList: ICaseListResponse[];
     onCasesCloseSuccess?: () => void;
 }
-export default function CloseCaseBtn({ selectedCases, caseList, onCasesCloseSuccess }: IProps): JSX.Element;
+export default function CloseCaseBtn({ selectedCases, caseList, onCasesCloseSuccess }: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=CloseCaseBtn.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CloseCaseBtn.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-table/CloseCaseBtn.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,UAAU,MAAM;IACZ,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAUD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,mBAAmB,EAAE,EAAE,MAAM,eAiF5F"}
+{"version":3,"file":"CloseCaseBtn.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-table/CloseCaseBtn.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,UAAU,MAAM;IACZ,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAUD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,mBAAmB,EAAE,EAAE,MAAM,qBAsF5F"}

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

@@ -11,6 +11,7 @@ import { publicApi } from '@cee-eng/hydrajs';
 import { Button } from '@patternfly/react-core';
 import { ToastNotification, useFetch } from '@rh-support/components';
 import { CloseCaseModal, useCanCreateCase } from '@rh-support/react-context';
+import { dtmTrackEventCaseStepEncountered } from '@rh-support/utils';
 import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 const MAX_ALLOWED_CASES = 5;
@@ -42,7 +43,9 @@ export default function CloseCaseBtn({ selectedCases, caseList, onCasesCloseSucc
         const promiseArr = [];
         setIsModalOpen(false);
         const toastId = ToastNotification.addSuccessMessage(t(`Closing selected cases`));
-        selectedCases.forEach((caseNumber) => {
+        selectedCases.forEach((caseNumber, i) => {
+            const product = caseList[i].case_product[0];
+            const version = caseList[i].case_version;
             const p = request(caseNumber, { status: 'Closed' });
             promiseArr.push(p);
             p.then((res) => __awaiter(this, void 0, void 0, function* () {
@@ -54,9 +57,11 @@ export default function CloseCaseBtn({ selectedCases, caseList, onCasesCloseSucc
                 });
                 ToastNotification.clearToast(toastId);
                 ToastNotification.addSuccessMessage(t('Case {{caseNumber}} successfully closed', { caseNumber }));
+                // Only call dtm track event only when the case has been closed successfully.
+                dtmTrackEventCaseStepEncountered('close', caseNumber, product, version);
             }), (err) => {
                 ToastNotification.clearToast(toastId);
-                ToastNotification.addDangerMessage('Could not close case {{caseNumber}}', { caseNumber });
+                ToastNotification.addDangerMessage(t('Could not close case {{caseNumber}}', { caseNumber }));
             });
         });
         yield Promise.all(promiseArr.map(reflect));

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

@@ -0,0 +1,19 @@
+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;
+}
+export default function DownloadCSVFileModal(props: IProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=DownloadCSVFileModal.d.ts.map

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

@@ -0,0 +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;AAkBlE,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,qBAgazD"}