@rh-support/cases 2.6.233 → 2.6.236

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

@@ -3,23 +3,16 @@ import { ISolrResponse } from '@rh-support/types/shared';
 import { UserAuth } from '@rh-support/user-permissions';
 import React from 'react';
 import { ICaseListResponse } from '../../../models/caseList';
-import { ISortInfo } from '../CaseListFilterReducer';
+import { IPaginationInfo, ISortInfo } from '../CaseListFilterReducer';
 interface IProps {
     caseList: ISolrResponse<ICaseListResponse>;
     caseGroups: ICaseGroup[];
     loggedInUserRights: UserAuth;
     sortInfo?: ISortInfo;
+    paginationInfo?: IPaginationInfo;
     isCaseListPageLoading: boolean;
     hasError: boolean;
-    hasNextPage: boolean;
-    isLoadingMore: boolean;
-    loadMoreError: boolean;
-    loadMoreRetryCount: number;
-    onRetryLoadMore: () => void;
-    onRetryFetch?: () => void;
-    caseLabelsFetchError?: Error | null;
-    onCasesCloseSuccess?: () => void;
-    sentinelRef?: (node?: Element | null) => void;
+    isSolrDown?: boolean;
 }
 export declare function CaseListTable(props: IProps): React.JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"CaseListTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-table/CaseListTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAsB3E,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAQxD,OAAO,KAAkD,MAAM,OAAO,CAAC;AAIvE,OAAO,EAAE,iBAAiB,EAAyB,MAAM,0BAA0B,CAAC;AAEpF,OAAO,EAAgB,SAAS,EAAc,MAAM,0BAA0B,CAAC;AA8B/E,UAAU,MAAM;IACZ,QAAQ,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3C,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,kBAAkB,EAAE,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,oBAAoB,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACpC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBAkkB1C"}
+{"version":3,"file":"CaseListTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-table/CaseListTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAqB3E,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAQxD,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,iBAAiB,EAAyB,MAAM,0BAA0B,CAAC;AAEpF,OAAO,EAEH,eAAe,EACf,SAAS,EAIZ,MAAM,0BAA0B,CAAC;AA4BlC,UAAU,MAAM;IACZ,QAAQ,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3C,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,kBAAkB,EAAE,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAsBD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBA6kB1C"}

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

@@ -1,9 +1,9 @@
-import { Alert, AlertVariant, Bullseye, Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateVariant, Spinner, } from '@patternfly/react-core';
+import { Bullseye, Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateVariant, PaginationVariant, Spinner, } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { Table, TableVariant, Tbody, Td, Th, Thead, Tr, Visibility } from '@patternfly/react-table';
-import { CaseLabelLoadErrorModal, TableComponent } from '@rh-support/components';
+import { TableComponent, TablePagination } from '@rh-support/components';
 import { GlobalMetadataDispatchContext, updateUserPreferences, useGlobalStateContext, UserPreferencesKeys, } from '@rh-support/react-context';
-import { formatDate, mapSfdcStatusToPortalStatus, toNewCaseTypeSwitcher } from '@rh-support/utils';
+import { dtmTrackEventCaseStepEncountered, formatDate, scrollIntoView, toNewCaseTypeSwitcher } from '@rh-support/utils';
 import find from 'lodash/find';
 import flatMap from 'lodash/flatMap';
 import includes from 'lodash/includes';
@@ -12,11 +12,11 @@ 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';
 import { CaseListColumnIds } from '../../../enums/case';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
-import { clearFilters, updateSort } from '../CaseListFilterReducer';
-import { CaseListTableRow } from './CaseListTableRow';
-import { CaseListTableSkeletonRow } from './CaseListTableSkeletonRow';
+import { clearFilters, resetFilterToDefaultState, updatePagination, updateSort, } from '../CaseListFilterReducer';
+import SeverityLabel from './SeverityLabel';
 import { TableColumnSelector } from './table-column-selector/TableColumnSelector';
 import { TableActionsDropdown } from './TableActionsDropdown';
 // initially selected columns
@@ -27,7 +27,6 @@ const initialSelectedColumns = [
     CaseListColumnIds.owner,
     CaseListColumnIds.modified,
     CaseListColumnIds.status,
-    CaseListColumnIds.caseLabel,
 ];
 const EMPTY_STATE_FILTER_APPLIED = 'Try removing filters or modifying your search query to broaden the results.';
 const EMPTY_STATE_NO_FILTERS = 'The table will be populated after creating your first support case.';
@@ -37,11 +36,10 @@ const EMPTY_STATE_NO_FILTERS_ERROR = (React.createElement(React.Fragment, null,
     React.createElement("a", { href: "https://status.redhat.com/", target: "_blank", rel: "noopener noreferrer" }, "status page"),
     "to see if there are any known issues"));
 export function CaseListTable(props) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const [selectedColumns, setSelectedColumns] = useState([]);
     const { t } = useTranslation();
     const [selectedCases, setSelectedCases] = useState([]);
-    const [isCaseLabelErrorModalDismissed, setIsCaseLabelErrorModalDismissed] = useState(false);
     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);
@@ -51,10 +49,10 @@ export function CaseListTable(props) {
     const [activeSortIndex, setActiveSortIndex] = useState();
     const [activeSortDirection, setActiveSortDirection] = useState();
     const [sortedCaseListData, setSortedCaseListData] = useState(caseListData);
-    const { globalMetadataState: { hydraUserPreferences, loggedInUserRights }, } = useGlobalStateContext();
+    const { globalMetadataState: { navBarRef, hydraUserPreferences, loggedInUserRights }, } = useGlobalStateContext();
     const dispatch = useContext(CaseListFilterDispatchContext);
     const dispatchToGlobalMetadataReducer = useContext(GlobalMetadataDispatchContext);
-    const { filterInfo, filterQueryInfo, paginationInfo } = useContext(CaseListFilterStateContext);
+    const { filterInfo, filterQueryInfo } = useContext(CaseListFilterStateContext);
     const currentFilterLength = flatMap(filterInfo).length;
     const showingFilter = currentFilterLength > 0;
     const hasSearchQuery = !((filterQueryInfo === null || filterQueryInfo === void 0 ? void 0 : filterQueryInfo.queryString) === '');
@@ -137,11 +135,6 @@ export function CaseListTable(props) {
             sortable: true,
             show: isColumnVisible(CaseListColumnIds.group),
         },
-        {
-            id: CaseListColumnIds.caseLabel,
-            title: t('Case labels'),
-            show: isColumnVisible(CaseListColumnIds.caseLabel),
-        },
     ];
     const visibleCaseListColumns = columns.filter((column) => visibleColumns.includes(column.id));
     const allRows = caseListData.map((row, index) => row.case_number);
@@ -162,6 +155,12 @@ export function CaseListTable(props) {
             console.error('Could not save selected columns in cache');
         }
     };
+    const onPerPageSelect = (paginationInfo) => {
+        updatePagination(dispatch, paginationInfo);
+    };
+    const onSetPage = (paginationInfo) => {
+        updatePagination(dispatch, paginationInfo);
+    };
     const onRowClick = (ev, row) => {
         // we dont want to call onRowClick if user changes the checkbox value
         if (ev.target.tagName === 'INPUT') {
@@ -213,18 +212,22 @@ export function CaseListTable(props) {
                 React.createElement(EmptyState, { variant: EmptyStateVariant.sm },
                     React.createElement(Spinner, { size: "xl" }))))));
     const onCasesCloseSuccess = () => {
-        props.onCasesCloseSuccess && props.onCasesCloseSuccess();
+        resetFilterToDefaultState(dispatch);
     };
     const getItemCount = () => {
         var _a, _b;
         if (props.isCaseListPageLoading)
             return 0;
         let paginationCount = (_b = (_a = props.caseList) === null || _a === void 0 ? void 0 : _a.numFound) !== null && _b !== void 0 ? _b : 0;
-        // Salesforce has a limit of 4000 cases per page
-        // So we need to limit the number of cases returned to 4000
-        paginationCount = paginationCount > 4000 ? 4000 : paginationCount;
+        // solr return 400 if we fetch the elements after 10000 limit
+        // so we need to restrict the user from FE too
+        paginationCount = paginationCount > 10000 ? 10000 : paginationCount;
         return paginationCount;
     };
+    const onBottomPaginationSetPage = (paginationInfo) => {
+        onSetPage(paginationInfo);
+        scrollIntoView(tableToolbarRef, { navBarRef, timeout: 0, onlyIfNotInViewport: true, offset: 30 });
+    };
     const getSortableRowValues = (row) => {
         const { case_number, case_summary, case_contactName, case_lastModifiedDate, case_severity, case_status, case_createdDate, case_accountNumber, case_alternate_id, case_type, case_closedDate, case_folderName, case_lastModifiedByName, case_createdByName, case_version, id, case_customer_escalation, case_product, } = row;
         return [
@@ -267,32 +270,28 @@ export function CaseListTable(props) {
         return (group === null || group === void 0 ? void 0 : group.name) || '';
     };
     const localRows = [
-        ...caseListData === null || caseListData === void 0 ? void 0 : caseListData.map((row, index) => {
-            var _a;
-            return ({
-                case_number: row.case_number,
-                case_summary: row.case_summary,
-                case_createdByName: row.case_createdByName,
-                case_lastModifiedDate: formatDate(row.case_last_public_update_date)
-                    ? formatDate(row.case_last_public_update_date)
-                    : '',
-                case_severity: row.case_severity ? row.case_severity : '',
-                case_status: mapSfdcStatusToPortalStatus(row.case_status),
-                case_createdDate: formatDate(row.case_createdDate),
-                case_accountNumber: row.case_accountNumber,
-                case_alternate_id: row.case_alternate_id ? row.case_alternate_id : '',
-                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_last_public_update_by ? row.case_last_public_update_by : '',
-                case_version: row.case_version,
-                id: row.id,
-                case_product: row.case_product,
-                case_customer_escalation: row.case_customer_escalation,
-                case_label: (_a = row.case_label) !== null && _a !== void 0 ? _a : [],
-            });
-        }),
+        ...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_last_public_update_date)
+                ? formatDate(row.case_last_public_update_date)
+                : '',
+            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_last_public_update_by ? row.case_last_public_update_by : '',
+            case_version: row.case_version,
+            id: row.id,
+            case_product: row.case_product,
+            case_customer_escalation: row.case_customer_escalation,
+        })),
     ];
     useEffect(() => {
         var _a;
@@ -344,45 +343,14 @@ export function CaseListTable(props) {
         setSortedCaseListData(sortedRows);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeSortDirection, activeSortIndex]);
-    const showCaseLabelColumn = isColumnVisible(CaseListColumnIds.caseLabel);
-    const showCaseLabelLoadError = showCaseLabelColumn && Boolean(props.caseLabelsFetchError) && !isCaseLabelErrorModalDismissed;
-    const handleRetryCaseLabels = () => {
-        var _a;
-        setIsCaseLabelErrorModalDismissed(false);
-        (_a = props.onRetryFetch) === null || _a === void 0 ? void 0 : _a.call(props);
-    };
-    const initialLoadingSkeletonRows = Array.from({ length: 5 }).map((_, index) => (React.createElement(CaseListTableSkeletonRow, { key: `initial-skeleton-${index}`, visibleCaseListColumns: visibleCaseListColumns })));
-    const loadingTableContent = showCaseLabelColumn ? React.createElement(React.Fragment, null, initialLoadingSkeletonRows) : loadingRowDefault;
-    const showSkeletonLoaderRow = props.hasNextPage || props.isLoadingMore || props.loadMoreError;
-    const hasNoCaseListData = (caseListData || []).length < 1;
-    const renderCaseListRows = () => (React.createElement(React.Fragment, null, sortedCaseListData === null || sortedCaseListData === void 0 ? void 0 :
-        sortedCaseListData.map((row, rowIndex) => (React.createElement(CaseListTableRow, { key: row.case_number, row: row, rowIndex: rowIndex, isColumnVisible: isColumnVisible, isSelected: selectedCases.includes(row.case_number), onRowClick: onRowClick, onRowSelect: onRowSelect }))),
-        showSkeletonLoaderRow && (React.createElement(CaseListTableSkeletonRow, { visibleCaseListColumns: visibleCaseListColumns, sentinelRef: props.sentinelRef }))));
-    const renderTableBodyContent = () => {
-        if (!props.isCaseListPageLoading && hasNoCaseListData) {
-            return noResultFoundRow;
-        }
-        if (props.isCaseListPageLoading) {
-            return loadingTableContent;
-        }
-        return renderCaseListRows();
-    };
     return (React.createElement(React.Fragment, null,
-        React.createElement(CaseLabelLoadErrorModal, { isOpen: showCaseLabelLoadError, onRetry: handleRetryCaseLabels, onClose: () => setIsCaseLabelErrorModalDismissed(true) }),
         React.createElement(TableComponent, { columns: columns, data: caseListData, selectedColumns: selectedColumns },
             React.createElement("div", { className: "case-list-table-toolbar pf-v6-l-flex", ref: tableToolbarRef },
                 React.createElement("div", { className: "toolbar-actions pf-v6-l-flex" },
                     React.createElement(TableColumnSelector, { onColumnSelectorChange: onColumnSelectorChange, cachedColumns: selectedColumns }),
                     React.createElement(TableActionsDropdown, { caseList: caseListData, selectedCases: selectedCases, onCasesCloseSuccess: onCasesCloseSuccess, currentFilteredCaseList: props.caseList })),
-                !props.isCaseListPageLoading && caseListData.length > 0 && (React.createElement("span", { className: "case-count-indicator" },
-                    React.createElement("strong", null, caseListData.length),
-                    " ",
-                    React.createElement(Trans, null, "of"),
-                    ' ',
-                    React.createElement("strong", null,
-                        getItemCount(),
-                        " ",
-                        React.createElement(Trans, null, "loaded"))))),
+                React.createElement("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-v6-c-scroll-inner-wrapper" },
                 React.createElement(Table, { variant: TableVariant.compact, "aria-label": "case-list", className: "case-list-table" },
                     React.createElement(Thead, null,
@@ -399,23 +367,41 @@ export function CaseListTable(props) {
                                         ? '0px'
                                         : undefined,
                                 }, id: column.id, sort: column.sortable ? onSort(index) : undefined, key: column.id }, column.title))))),
-                    React.createElement(Tbody, null, renderTableBodyContent()))),
-            props.loadMoreError && props.loadMoreRetryCount <= 1 && (React.createElement("div", { className: "infinite-scroll-footer-message" },
-                React.createElement(Button, { className: "infinite-scroll-retry-btn", variant: "secondary", onClick: props.onRetryLoadMore, icon: React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" },
-                        React.createElement("polyline", { points: "23 4 23 10 17 10" }),
-                        React.createElement("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })) },
-                    React.createElement(Trans, null, "try loading again")))),
-            props.loadMoreError && props.loadMoreRetryCount > 1 && (React.createElement("div", { className: "infinite-scroll-footer-message" },
-                React.createElement(Alert, { className: "infinite-scroll-alert pf-v6-u-font-weight-bold", variant: AlertVariant.danger, isInline: true, isPlain: true, title: React.createElement("span", null,
-                        React.createElement(Trans, null, "We're having trouble loading your cases. Please refresh or"),
-                        ' ',
-                        React.createElement(Button, { variant: "link", isInline: true, onClick: props.onRetryLoadMore },
-                            React.createElement(Trans, null, "try again")),
-                        ".") }))),
-            !props.hasNextPage &&
-                !props.isLoadingMore &&
-                !props.loadMoreError &&
-                caseListData.length > 0 &&
-                getItemCount() > ((paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.pageSize) || 10) && (React.createElement("div", { className: "infinite-scroll-footer-message infinite-scroll-footer-text pf-v6-u-font-weight-bold pf-v6-u-color-200" },
-                React.createElement(Trans, null, "No more cases to load"))))));
+                    React.createElement(Tbody, null, !props.isCaseListPageLoading && (caseListData || []).length < 1
+                        ? noResultFoundRow
+                        : props.isCaseListPageLoading
+                            ? loadingRowDefault
+                            : sortedCaseListData === null || sortedCaseListData === void 0 ? void 0 : sortedCaseListData.map((row, index) => (React.createElement(Tr, { onRowClick: (event) => (onRowClick ? onRowClick(event, row) : ''), key: row === null || row === void 0 ? void 0 : row.case_number },
+                                React.createElement(Td, { className: "pf-v6-u-pl-md", select: {
+                                        rowIndex: index,
+                                        onSelect: (_event, index) => onRowSelect(_event, row === null || row === void 0 ? void 0 : row.case_number),
+                                        isSelected: selectedCases.includes(row === null || row === void 0 ? void 0 : row.case_number),
+                                    } }),
+                                React.createElement(Td, { dataLabel: "Case ID", id: row.case_number, scope: "row" },
+                                    React.createElement("div", { className: "case-number-section" },
+                                        React.createElement(Link, { to: `/case/${row.case_number}`, onClick: () => dtmTrackEventCaseStepEncountered('review', row.case_number, row.case_product, row.case_version) },
+                                            React.createElement("span", { className: "case-number" }, row.case_number)),
+                                        row.case_customer_escalation ? (React.createElement("div", { className: "escalation-label" },
+                                            React.createElement(Trans, null, "Escalated"))) : (''))),
+                                React.createElement(Td, { dataLabel: "Title" }, row.case_summary),
+                                React.createElement(Td, { className: !isColumnVisible('contactName') ? Visibility.hidden : '', dataLabel: "Owner" }, row.case_contactName),
+                                React.createElement(Td, { className: !isColumnVisible('lastModifiedDate') ? Visibility.hidden : '', dataLabel: "Modified by" },
+                                    React.createElement("span", { className: "modified-name" }, row.case_lastModifiedByName),
+                                    row.case_lastModifiedDate ? formatDate(row.case_lastModifiedDate) : ''),
+                                React.createElement(Td, { className: !isColumnVisible('severity') ? Visibility.hidden : '', dataLabel: "Severity" },
+                                    React.createElement(SeverityLabel, { sevValue: row.case_severity })),
+                                React.createElement(Td, { className: !isColumnVisible('status') ? Visibility.hidden : '', dataLabel: "Status" }, row.case_status),
+                                React.createElement(Td, { className: !isColumnVisible('createdDate') ? Visibility.hidden : '', dataLabel: "Created by" },
+                                    React.createElement("span", { className: "created-name" }, row.case_createdByName),
+                                    row.case_createdDate ? formatDate(row.case_createdDate) : ''),
+                                React.createElement(Td, { className: !isColumnVisible('product') ? Visibility.hidden : '', dataLabel: "Product and Version" },
+                                    row.case_product,
+                                    React.createElement("span", { style: { display: 'block' } }, row.case_version)),
+                                React.createElement(Td, { className: !isColumnVisible('accountNumber') ? Visibility.hidden : '', dataLabel: "Account number" }, row.case_accountNumber),
+                                React.createElement(Td, { className: !isColumnVisible('alternateCaseId') ? Visibility.hidden : '', "data-label": "Personal reference number" }, row.case_alternate_id ? row.case_alternate_id : ''),
+                                React.createElement(Td, { className: !isColumnVisible('type') ? Visibility.hidden : '', "data-label": "Support type" }, row.case_type),
+                                React.createElement(Td, { className: !isColumnVisible('closedDate') ? Visibility.hidden : '', "data-label": "Closed date" }, row.case_closedDate ? formatDate(row.case_closedDate) : ''),
+                                React.createElement(Td, { className: !isColumnVisible('folderName') ? Visibility.hidden : '', "data-label": "Group" }, row.case_folderName ? row.case_folderName : ''))))))),
+            React.createElement("footer", { className: "toolbar-pagination", "data-tracking-id": "case-list-table-pagination" },
+                React.createElement(TablePagination, { perPage: (_e = props === null || props === void 0 ? void 0 : props.paginationInfo) === null || _e === void 0 ? void 0 : _e.pageSize, currentPage: (_f = props === null || props === void 0 ? void 0 : props.paginationInfo) === null || _f === void 0 ? void 0 : _f.currentPage, onPerPageSelect: onPerPageSelect, onSetPage: onBottomPaginationSetPage, variant: PaginationVariant.bottom, itemCount: getItemCount() })))));
 }

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

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

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

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

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

@@ -8,19 +8,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import './DownloadCSVFileModal.scss';
-import { useApolloClient } from '@apollo/client/react';
+import { publicApi } from '@cee-eng/hydrajs';
 import { Button, Checkbox, Form, FormGroup, Grid, GridItem, InputGroup, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, Spinner, TextInput, ValidatedOptions, } from '@patternfly/react-core';
 import DownloadIcon from '@patternfly/react-icons/dist/js/icons/download-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
-import { ToastNotification } from '@rh-support/components';
-import { GlobalMetadataStateContext } from '@rh-support/react-context';
-import { downloadCSV, formatDateTime, mapSfdcStatusToPortalStatus, toNewCaseTypeSwitcher, } from '@rh-support/utils';
+import { ToastNotification, useFetch } from '@rh-support/components';
+import { downloadCSV, formatDateTime, toNewCaseTypeSwitcher } from '@rh-support/utils';
 import { isEmpty } from 'lodash';
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { SolrKeys } from '../../../enums/filters';
-import { getCaseListFromGraphQL } from '../../../utils/caseListGraphQLUtils';
-const csvHeaders = [
+import { SFDCKeys, SolrKeys } from '../../../enums/filters';
+import { getCaseListFromSolr } from '../../../utils/caseListUtils';
+import { createQueryForCSVDownload } from '../../../utils/caseSearchUtils';
+const csvHeadersSolr = [
     { label: 'Case number', key: SolrKeys.caseNumber },
     {
         label: 'Case link',
@@ -28,14 +28,20 @@ const csvHeaders = [
     },
     { label: 'Title', key: SolrKeys.caseSummary },
 ];
+const csvHeadersSFDC = [
+    { label: 'Case number', key: SFDCKeys.caseNumber },
+    {
+        label: 'Case link',
+        key: 'case_link',
+    },
+    { label: 'Title', key: SFDCKeys.caseSummary },
+];
 export default function DownloadCSVFileModal(props) {
-    const { onClose, onModalshow, isDisabled, filterState, selectedCases, filteredCaseCount } = props;
+    const { onClose, onModalshow, isDisabled, loggedInUserRights, loggedInUsersAccount, filterState, selectedCases, filteredCaseCount, } = props;
     const { t } = useTranslation();
-    const apolloClient = useApolloClient();
-    const { globalMetadataState: { loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
-    const includeSecureSupportCases = Boolean(loggedInUsersAccount.data.secureSupport);
-    const [isFetching, setIsFetching] = useState(false);
+    const { isFetching, request } = useFetch(getCaseListFromSolr, { propgateErrors: true });
     const [downloadCSVFileName, setDownloadCSVFileName] = useState('CaseList.csv');
+    const [isFetchingSFDC, setIsFetchingSFDC] = useState(false);
     const [checkboxes, setCheckboxes] = useState({
         selectAll: false,
         ownerName: false,
@@ -49,96 +55,89 @@ export default function DownloadCSVFileModal(props) {
         type: false,
         caseClosedDate: false,
         group: false,
-        caseLabel: false,
     });
     const [isSaveClicked, setIsSavedClicked] = useState(false);
-    function getKey(key) {
-        return SolrKeys[key];
+    function getKey(key, isSecureSupport) {
+        return isSecureSupport ? SFDCKeys[key] : SolrKeys[key];
     }
+    const isSecureSupportUser = loggedInUsersAccount.data.secureSupport;
     const headerDefinitions = useMemo(() => [
         {
             checkbox: checkboxes.ownerName,
-            key: getKey('ownerName'),
+            key: getKey('ownerName', isSecureSupportUser),
             label: 'Owner name',
         },
         {
             checkbox: checkboxes.severity,
-            key: getKey('severity'),
+            key: getKey('severity', isSecureSupportUser),
             label: 'Severity',
         },
         {
             checkbox: checkboxes.createdBy,
-            key: getKey('createdBy'),
+            key: getKey('createdBy', isSecureSupportUser),
             label: 'Created by',
         },
         {
             checkbox: checkboxes.createdBy,
-            key: getKey('createdDate'),
+            key: getKey('createdDate', isSecureSupportUser),
             label: 'Created date',
             transform: formatDateTime,
         },
         {
             checkbox: checkboxes.accountNumber,
-            key: getKey('accountNumber'),
+            key: getKey('accountNumber', isSecureSupportUser),
             label: 'Account number',
         },
         {
             checkbox: checkboxes.type,
-            key: getKey('type'),
+            key: getKey(isSecureSupportUser ? 'caseType' : 'type', isSecureSupportUser),
             label: 'Support type',
         },
         {
             checkbox: checkboxes.modifiedBy,
-            key: getKey('modifiedBy'),
+            key: getKey('modifiedBy', isSecureSupportUser),
             label: 'Modified by',
         },
         {
             checkbox: checkboxes.modifiedBy,
-            key: getKey('modifiedDate'),
+            key: getKey('modifiedDate', isSecureSupportUser),
             label: 'Modified date',
             transform: formatDateTime,
         },
         {
             checkbox: checkboxes.status,
-            key: getKey('status'),
+            key: getKey('status', isSecureSupportUser),
             label: 'Status',
-            transform: mapSfdcStatusToPortalStatus,
         },
         {
             checkbox: checkboxes.productVersion,
-            key: getKey('product'),
+            key: getKey('product', isSecureSupportUser),
             label: 'Product',
         },
         {
             checkbox: checkboxes.productVersion,
-            key: getKey('version'),
+            key: getKey('version', isSecureSupportUser),
             label: 'Version',
         },
         {
             checkbox: checkboxes.alternateId,
-            key: getKey('alternateId'),
+            key: getKey('alternateId', isSecureSupportUser),
             label: 'Alternate ID',
         },
         {
             checkbox: checkboxes.caseClosedDate,
-            key: getKey('caseClosedDate'),
+            key: getKey('caseClosedDate', isSecureSupportUser),
             label: 'Closed date',
             transform: formatDateTime,
         },
         {
             checkbox: checkboxes.group,
-            key: getKey('groupName'),
+            key: getKey('groupName', isSecureSupportUser),
             label: 'Group',
         },
-        {
-            checkbox: checkboxes.caseLabel,
-            key: getKey('caseLabel'),
-            label: 'Case labels',
-            transform: (labels) => (Array.isArray(labels) ? labels.join(', ') : labels || ''),
-        },
-    ], [checkboxes]);
+    ], [checkboxes, isSecureSupportUser]);
     const getHeaders = () => {
-        const updatedCsvHeaders = [...csvHeaders];
+        const updatedCsvHeaders = isSecureSupportUser ? csvHeadersSFDC : csvHeadersSolr;
         headerDefinitions.forEach((headerDefinition) => {
             const { checkbox, key, label, transform } = headerDefinition;
             const index = updatedCsvHeaders.findIndex((header) => header.key === key);
@@ -155,8 +154,9 @@ export default function DownloadCSVFileModal(props) {
         });
         return updatedCsvHeaders;
     };
-    const isFetchingCSVData = isFetching;
-    const splitExtensionName = downloadCSVFileName.split('.')[0].replace(/ +/g, '');
+    const isFetchingCSVData = isFetching || isFetchingSFDC;
+    const partnerSearch = loggedInUserRights.data.hasManagedAccounts();
+    const splitExtensionName = downloadCSVFileName.split('.')[0].replace(/ +/g, ''); // To split and trim value before saving PDF
     const onCancel = () => {
         onClose && onClose();
         setIsSavedClicked(false);
@@ -173,16 +173,15 @@ export default function DownloadCSVFileModal(props) {
     };
     const checkboxValues = Object.values(checkboxes).slice(1); // as we don't want selectAll value
     const allCheckBoxNotSelected = checkboxValues.includes(false);
+    // For SOLR
     const onExportCSVClick = () => __awaiter(this, void 0, void 0, function* () {
         try {
             setIsSavedClicked(true);
             if (!isEmpty(splitExtensionName)) {
-                setIsFetching(true);
-                const hasSelectedCases = selectedCases.length > 0;
-                const csvLimit = hasSelectedCases ? selectedCases.length : 1000;
-                const result = yield getCaseListFromGraphQL(filterState, apolloClient, csvLimit, undefined, hasSelectedCases ? selectedCases : undefined, includeSecureSupportCases);
-                setIsFetching(false);
-                const updatedCsvData = result.caseListResponse.response.docs.map((row) => (Object.assign(Object.assign({}, row), { case_type: toNewCaseTypeSwitcher(row.case_type), case_link: `https://${window.location.host}${window.location.pathname}/#/case/${row.case_number}` })));
+                const query = createQueryForCSVDownload(filterState, loggedInUserRights.data, loggedInUsersAccount.data, selectedCases);
+                const res = yield request(query, partnerSearch, null, isSecureSupportUser);
+                // To map the values in csv to new support type
+                const updatedCsvData = res.response.docs.map((row) => (Object.assign(Object.assign({}, row), { case_type: toNewCaseTypeSwitcher(row.case_type), case_link: `https://${window.location.host}${window.location.pathname}/#/case/${row.case_number}` })));
                 downloadCSV(updatedCsvData, getHeaders(), splitExtensionName ? `${splitExtensionName}.csv` : 'CaseList.csv');
                 onCancel();
                 ToastNotification.addSuccessMessage(t('File downloaded successfully!'));
@@ -190,11 +189,33 @@ export default function DownloadCSVFileModal(props) {
             }
         }
         catch (e) {
-            setIsFetching(false);
             onCancel();
             ToastNotification.addDangerMessage(t('File could not be downloaded. Please try again!  '));
         }
     });
+    // For SFDC
+    const onExportCSVClickSecureSupport = () => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setIsSavedClicked(true);
+            if (!isEmpty(splitExtensionName)) {
+                const sfdcFilter = createQueryForCSVDownload(filterState, loggedInUserRights.data, loggedInUsersAccount.data, selectedCases);
+                setIsFetchingSFDC(true);
+                const sfdcResponse = yield publicApi.caseList.getCaseListFromSFDC(sfdcFilter, false, true);
+                setIsFetchingSFDC(false);
+                // To map the values in csv to new support type
+                const updatedCsvData = sfdcResponse.cases.map((row) => (Object.assign(Object.assign({}, row), { caseType: toNewCaseTypeSwitcher(row.caseType), case_link: `https://${window.location.host}${window.location.pathname}/#/case/${row.caseNumber}` })));
+                downloadCSV(updatedCsvData, getHeaders(), splitExtensionName ? `${splitExtensionName}.csv` : 'CaseList.csv');
+                onCancel();
+                ToastNotification.addSuccessMessage(t('File downloaded successfully!'));
+                setIsSavedClicked(false);
+            }
+        }
+        catch (e) {
+            setIsFetchingSFDC(false);
+            onCancel();
+            ToastNotification.addDangerMessage(t('Could not export CSV'));
+        }
+    });
     const handleSelectAll = () => {
         const newSelectAllState = !checkboxes.selectAll;
         const updatedCheckboxes = {
@@ -209,7 +230,6 @@ export default function DownloadCSVFileModal(props) {
             type: newSelectAllState,
             caseClosedDate: newSelectAllState,
             group: newSelectAllState,
-            caseLabel: newSelectAllState,
         };
         setCheckboxes((prevCheckboxes) => (Object.assign({ selectAll: !prevCheckboxes.selectAll }, updatedCheckboxes)));
     };
@@ -227,7 +247,6 @@ export default function DownloadCSVFileModal(props) {
         { label: 'Product and version', key: 'productVersion' },
         { label: 'Personal reference number', key: 'alternateId' },
         { label: 'Closed date', key: 'caseClosedDate' },
-        { label: 'Case labels', key: 'caseLabel' },
     ];
     const generateCheckboxes = (fieldDefinitions) => {
         return fieldDefinitions.map((field) => (React.createElement(Checkbox, { key: field.key, className: "nested", label: t(field.label), isChecked: checkboxes[field.key], onChange: () => {
@@ -275,6 +294,6 @@ export default function DownloadCSVFileModal(props) {
             React.createElement("p", null, downloadCSVModalDescription(selectedCases.length || filteredCaseCount)),
             downloadCSVModalBody()),
         React.createElement(ModalFooter, null,
-            React.createElement(Button, { key: "submit", icon: isFetchingCSVData ? React.createElement(Spinner, { size: "md", "aria-label": "loading" }) : React.createElement(DownloadIcon, null), variant: "primary", "data-tracking-id": "download-csv-modal-submit", onClick: onExportCSVClick, isDisabled: (isSaveClicked && isEmpty(splitExtensionName)) || isDisabled || isFetchingCSVData }, t('Download')),
+            React.createElement(Button, { key: "submit", icon: isFetchingCSVData ? React.createElement(Spinner, { size: "md", "aria-label": "loading" }) : React.createElement(DownloadIcon, null), variant: "primary", "data-tracking-id": "download-csv-modal-submit", onClick: isSecureSupportUser ? onExportCSVClickSecureSupport : onExportCSVClick, isDisabled: (isSaveClicked && isEmpty(splitExtensionName)) || isDisabled || isFetchingCSVData }, t('Download')),
             React.createElement(Button, { key: "back", variant: "secondary", onClick: onCancel, isDisabled: isDisabled || isFetchingCSVData, "data-tracking-id": "download-csv-modal-cancel" }, t('Cancel')))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ExportCaseListCSV.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-table/ExportCaseListCSV.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAI7D,UAAU,MAAM;IACZ,uBAAuB,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC1D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,EAAE,MAAM,EAAE,CAAC;CAC3B;AAID,wBAAgB,iBAAiB,CAAC,EAAE,uBAAuB,EAAE,aAAa,EAAE,mBAAmB,EAAE,EAAE,MAAM,qBAoDxG"}
+{"version":3,"file":"ExportCaseListCSV.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-table/ExportCaseListCSV.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAK7D,UAAU,MAAM;IACZ,uBAAuB,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC1D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,EAAE,MAAM,EAAE,CAAC;CAC3B;AAID,wBAAgB,iBAAiB,CAAC,EAAE,uBAAuB,EAAE,aAAa,EAAE,mBAAmB,EAAE,EAAE,MAAM,qBAqExG"}