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

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

@@ -0,0 +1,296 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import './DownloadCSVFileModal.scss';
+import { publicApi } from '@cee-eng/hydrajs';
+import { Button, Checkbox, Form, FormGroup, Grid, GridItem, InputGroup, Modal, 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, useFetch } from '@rh-support/components';
+import { downloadCSV, formatDateTime, toNewCaseTypeSwitcher } from '@rh-support/utils';
+import { isEmpty } from 'lodash';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+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',
+        key: 'case_link',
+    },
+    { 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, loggedInUserRights, loggedInUsersAccount, filterState, selectedCases, filteredCaseCount, } = props;
+    const { t } = useTranslation();
+    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,
+        modifiedBy: false,
+        severity: false,
+        status: false,
+        createdBy: false,
+        productVersion: false,
+        accountNumber: false,
+        alternateId: false,
+        type: false,
+        caseClosedDate: false,
+        group: false,
+    });
+    const [isSaveClicked, setIsSavedClicked] = useState(false);
+    function getKey(key, isSecureSupport) {
+        return isSecureSupport ? SFDCKeys[key] : SolrKeys[key];
+    }
+    const isSecureSupportUser = loggedInUsersAccount.data.secureSupport;
+    const headerDefinitions = useMemo(() => [
+        {
+            checkbox: checkboxes.ownerName,
+            key: getKey('ownerName', isSecureSupportUser),
+            label: 'Owner name',
+        },
+        {
+            checkbox: checkboxes.severity,
+            key: getKey('severity', isSecureSupportUser),
+            label: 'Severity',
+        },
+        {
+            checkbox: checkboxes.createdBy,
+            key: getKey('createdBy', isSecureSupportUser),
+            label: 'Created by',
+        },
+        {
+            checkbox: checkboxes.createdBy,
+            key: getKey('createdDate', isSecureSupportUser),
+            label: 'Created date',
+            transform: formatDateTime,
+        },
+        {
+            checkbox: checkboxes.accountNumber,
+            key: getKey('accountNumber', isSecureSupportUser),
+            label: 'Account number',
+        },
+        {
+            checkbox: checkboxes.type,
+            key: getKey(isSecureSupportUser ? 'caseType' : 'type', isSecureSupportUser),
+            label: 'Support type',
+        },
+        {
+            checkbox: checkboxes.modifiedBy,
+            key: getKey('modifiedBy', isSecureSupportUser),
+            label: 'Modified by',
+        },
+        {
+            checkbox: checkboxes.modifiedBy,
+            key: getKey('modifiedDate', isSecureSupportUser),
+            label: 'Modified date',
+            transform: formatDateTime,
+        },
+        {
+            checkbox: checkboxes.status,
+            key: getKey('status', isSecureSupportUser),
+            label: 'Status',
+        },
+        {
+            checkbox: checkboxes.productVersion,
+            key: getKey('product', isSecureSupportUser),
+            label: 'Product',
+        },
+        {
+            checkbox: checkboxes.productVersion,
+            key: getKey('version', isSecureSupportUser),
+            label: 'Version',
+        },
+        {
+            checkbox: checkboxes.alternateId,
+            key: getKey('alternateId', isSecureSupportUser),
+            label: 'Alternate ID',
+        },
+        {
+            checkbox: checkboxes.caseClosedDate,
+            key: getKey('caseClosedDate', isSecureSupportUser),
+            label: 'Closed date',
+            transform: formatDateTime,
+        },
+        {
+            checkbox: checkboxes.group,
+            key: getKey('groupName', isSecureSupportUser),
+            label: 'Group',
+        },
+    ], [checkboxes, isSecureSupportUser]);
+    const getHeaders = () => {
+        const updatedCsvHeaders = isSecureSupportUser ? csvHeadersSFDC : csvHeadersSolr;
+        headerDefinitions.forEach((headerDefinition) => {
+            const { checkbox, key, label, transform } = headerDefinition;
+            const index = updatedCsvHeaders.findIndex((header) => header.key === key);
+            if (checkbox) {
+                if (index === -1) {
+                    updatedCsvHeaders.push({ key, label, transform });
+                }
+            }
+            else {
+                if (index !== -1) {
+                    updatedCsvHeaders.splice(index, 1);
+                }
+            }
+        });
+        return updatedCsvHeaders;
+    };
+    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);
+        setDownloadCSVFileName('CaseList.csv');
+    };
+    const handleCSVFileNameChange = (value) => {
+        setDownloadCSVFileName(value);
+    };
+    const clearDownloadCSVFileName = () => {
+        setDownloadCSVFileName('');
+    };
+    const handleCheckboxChange = (key) => {
+        setCheckboxes((prevCheckboxes) => (Object.assign(Object.assign({}, prevCheckboxes), { [key]: !prevCheckboxes[key] })));
+    };
+    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)) {
+                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!'));
+                setIsSavedClicked(false);
+            }
+        }
+        catch (e) {
+            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 = {
+            ownerName: newSelectAllState,
+            modifiedBy: newSelectAllState,
+            severity: newSelectAllState,
+            status: newSelectAllState,
+            createdBy: newSelectAllState,
+            productVersion: newSelectAllState,
+            accountNumber: newSelectAllState,
+            alternateId: newSelectAllState,
+            type: newSelectAllState,
+            caseClosedDate: newSelectAllState,
+            group: newSelectAllState,
+        };
+        setCheckboxes((prevCheckboxes) => (Object.assign({ selectAll: !prevCheckboxes.selectAll }, updatedCheckboxes)));
+    };
+    const csvHeadersOne = [
+        { label: 'Owner', key: 'ownerName' },
+        { label: 'Severity', key: 'severity' },
+        { label: 'Created by', key: 'createdBy' },
+        { label: 'Account number', key: 'accountNumber' },
+        { label: 'Support type', key: 'type' },
+        { label: 'Group', key: 'group' },
+    ];
+    const csvHeadersTwo = [
+        { label: 'Modified by', key: 'modifiedBy' },
+        { label: 'Status', key: 'status' },
+        { label: 'Product and version', key: 'productVersion' },
+        { label: 'Personal reference number', key: 'alternateId' },
+        { label: 'Closed date', key: 'caseClosedDate' },
+    ];
+    const generateCheckboxes = (fieldDefinitions) => {
+        return fieldDefinitions.map((field) => (React.createElement(Checkbox, { key: field.key, className: "nested", label: t(field.label), isChecked: checkboxes[field.key], onChange: () => {
+                handleCheckboxChange(field.key);
+            }, id: field.key, name: field.key })));
+    };
+    // CSV Modal Body
+    const downloadCSVModalBody = () => {
+        return (React.createElement(Form, { className: "download-csv-modal-body" },
+            React.createElement(FormGroup, { label: t('File name'), fieldId: "download-csv-file-name", isRequired: true },
+                React.createElement(InputGroup, null,
+                    React.createElement(TextInput, { type: "text", id: "csv-file-name", name: "download-csv-file-name", value: downloadCSVFileName, onChange: (_event, value) => handleCSVFileNameChange(value), placeholder: t('Enter a file name'), validated: isSaveClicked && isEmpty(splitExtensionName)
+                            ? ValidatedOptions.error
+                            : ValidatedOptions.default, isRequired: true }),
+                    React.createElement(Button, { variant: "plain", onClick: clearDownloadCSVFileName, icon: React.createElement(TimesCircleIcon, null) }))),
+            React.createElement(FormGroup, { label: t('Please select the fields you want included in your download.'), fieldId: "download-csv-file-fields-select" },
+                React.createElement(Grid, null,
+                    React.createElement(Checkbox, { label: t('Select all'), isChecked: checkboxes.selectAll, onChange: handleSelectAll, id: "selectAll", name: "selectAll" }),
+                    React.createElement(GridItem, { span: 6 },
+                        React.createElement(Checkbox, { className: "nested", label: t('Case ID'), defaultChecked: true, isDisabled: true, id: "controlled-check-2", name: "check2" }),
+                        generateCheckboxes(csvHeadersOne)),
+                    React.createElement(GridItem, { span: 6 },
+                        React.createElement(Checkbox, { className: "nested", label: t('Title'), defaultChecked: true, isDisabled: true, id: "controlled-check-3", name: "check3" }),
+                        generateCheckboxes(csvHeadersTwo))))));
+    };
+    const downloadCSVModalDescription = (numberOfCases) => {
+        if (numberOfCases <= 1000)
+            return t('Your download will include {{count}} cases.', { count: numberOfCases });
+        return t('Only the first 1000 cases will be included in your download. Please note this may take a while.');
+    };
+    // Download CSV modal buttons
+    const modalActions = [
+        React.createElement(Button, { key: "submit", icon: isFetchingCSVData ? React.createElement(Spinner, { size: "md" }) : 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')),
+    ];
+    // To handle select all checkbox when any of the column checkbox is checked or unchecked
+    useEffect(() => {
+        allCheckBoxNotSelected
+            ? setCheckboxes((prevCheckboxes) => (Object.assign(Object.assign({}, prevCheckboxes), { selectAll: false })))
+            : setCheckboxes((prevCheckboxes) => (Object.assign({}, prevCheckboxes)));
+        if (!checkboxes.selectAll && !allCheckBoxNotSelected) {
+            handleSelectAll(); // To check select all checkbox
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [allCheckBoxNotSelected, checkboxes.selectAll]);
+    return (React.createElement(Modal, { title: t('Download CSV file'), description: downloadCSVModalDescription(selectedCases.length || filteredCaseCount), className: "download-csv-modal", variant: ModalVariant.large, isOpen: onModalshow, onClose: onCancel, actions: modalActions }, downloadCSVModalBody()));
+}

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

@@ -0,0 +1,27 @@
+.pf-c-form__group {
+    .pf-c-form__group-control {
+        .pf-l-grid {
+            .pf-c-check {
+                .pf-c-check__label {
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+}
+.pf-l-grid__item.pf-m-6-col {
+    .pf-c-check.nested {
+        margin-top: 8px;
+    }
+    margin-left: 21px;
+}
+
+.download-csv-select-all {
+    align-items: center;
+}
+
+.download-csv-modal {
+    .download-csv-modal-body {
+        overflow: hidden;
+    }
+}

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

@@ -1,9 +1,11 @@
 import { ISolrResponse } from '@rh-support/types/shared';
+import React from 'react';
 import { ICaseListResponse } from '../../../models/caseList';
 interface IProps {
     currentFilteredCaseList: ISolrResponse<ICaseListResponse>;
     isExportCsvDisabled?: boolean;
+    selectedCases: string[];
 }
-export declare function ExportCaseListCSV(props: IProps): JSX.Element;
+export declare function ExportCaseListCSV({ currentFilteredCaseList, selectedCases, isExportCsvDisabled }: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=ExportCaseListCSV.d.ts.map

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":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAgD7D,UAAU,MAAM;IACZ,uBAAuB,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC1D,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC;AAID,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,eAoG9C"}
+{"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"}

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

@@ -1,119 +1,42 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { publicApi } from '@cee-eng/hydrajs';
 import { Button, Spinner } from '@patternfly/react-core';
-import { ToastNotification, useFetch } from '@rh-support/components';
+import { useFetch } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
-import { downloadCSV, formatDateTime, toNewCaseTypeSwitcher } from '@rh-support/utils';
 import React, { useContext, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { SFDCKeys, SolrKeys } from '../../../enums/filters';
 import { getCaseListFromSolr } from '../../../utils/caseListUtils';
-import { createQueryForCSVDownload } from '../../../utils/caseSearchUtils';
 import { CaseListFilterStateContext } from '../CaseListFilterContext';
-const csvHeadersSolr = [
-    { label: 'Account number', key: SolrKeys.accountNumber },
-    { label: 'Case number', key: SolrKeys.caseNumber },
-    { label: 'Summary', key: SolrKeys.caseSummary },
-    { label: 'Status', key: SolrKeys.status },
-    { label: 'Severity', key: SolrKeys.severity },
-    { label: 'Escalated', key: SolrKeys.escalation },
-    { label: 'Owner', key: SolrKeys.contactName },
-    { label: 'Product', key: SolrKeys.product },
-    { label: 'Version', key: SolrKeys.version },
-    { label: 'Created by', key: SolrKeys.createdBy },
-    { label: 'Created date', key: SolrKeys.createdDate, transform: formatDateTime },
-    { label: 'Modified by', key: SolrKeys.modifiedBy },
-    { label: 'Modified date', key: SolrKeys.modifiedDate, transform: formatDateTime },
-    { label: 'Uri', key: SolrKeys.uri },
-    { label: 'Personal reference number', key: SolrKeys.alternateId },
-    { label: 'Support type', key: SolrKeys.type },
-    { label: 'Closed date', key: SolrKeys.caseClosedDate, transform: formatDateTime },
-];
-const csvHeadersSFDC = [
-    { label: 'Account number', key: SFDCKeys.accountNumber },
-    { label: 'Case number', key: SFDCKeys.caseNumber },
-    { label: 'Summary', key: SFDCKeys.caseSummary },
-    { label: 'Status', key: SFDCKeys.status },
-    { label: 'Severity', key: SFDCKeys.severity },
-    { label: 'Escalated', key: SFDCKeys.escalation },
-    { label: 'Owner', key: SFDCKeys.ownerName },
-    { label: 'Product', key: SFDCKeys.product },
-    { label: 'Version', key: SFDCKeys.version },
-    { label: 'Created by', key: SFDCKeys.createdBy },
-    { label: 'Created date', key: SFDCKeys.createdDate, transform: formatDateTime },
-    { label: 'Modified by', key: SFDCKeys.lastPublicUpdateDateBy },
-    { label: 'Modified date', key: SFDCKeys.lastPublicUpdateDate, transform: formatDateTime },
-    { label: 'Uri', key: SFDCKeys.uri },
-    { label: 'Personal reference number', key: SFDCKeys.alternateId },
-    { label: 'Support type', key: SFDCKeys.caseType },
-    { label: 'Closed date', key: SFDCKeys.caseClosedDate, transform: formatDateTime },
-];
-const groupHeaderSOLR = { label: 'Group', key: SolrKeys.groupName };
-const groupHeaderSFDC = { label: 'Group', key: SFDCKeys.groupName };
+import DownloadCSVFileModal from './DownloadCSVFileModal';
 const MAX_LIMIT = 1000;
-export function ExportCaseListCSV(props) {
-    var _a, _b;
+export function ExportCaseListCSV({ currentFilteredCaseList, selectedCases, isExportCsvDisabled }) {
+    var _a;
     const { t } = useTranslation();
     const btnToolTip = t('Export the current list of cases to CSV. Please note that exporting a large number of cases may take a while.');
     const maxLengthTooltip = t('Export the current list of cases to CSV. Please note that only the top {{limit}} cases will be exported and that it may take awhile.', { limit: MAX_LIMIT });
-    const currentFilteredCaseCount = (_b = (_a = props.currentFilteredCaseList) === null || _a === void 0 ? void 0 : _a.numFound) !== null && _b !== void 0 ? _b : 0;
-    const { isFetching, request } = useFetch(getCaseListFromSolr, { propgateErrors: true });
-    const [isFetchingSFDC, setIsFetchingSFDC] = useState(false);
-    const isFetchingCSVData = isFetching || isFetchingSFDC;
+    const currentFilteredCaseCount = (_a = currentFilteredCaseList === null || currentFilteredCaseList === void 0 ? void 0 : currentFilteredCaseList.numFound) !== null && _a !== void 0 ? _a : 0;
+    const { isFetching } = useFetch(getCaseListFromSolr, { propgateErrors: true });
+    const [openUpdateSeverityModal, setOpenUpdateSeverityModal] = useState(false);
+    const isFetchingCSVData = isFetching;
     const isBtnDisabled = isFetchingCSVData || currentFilteredCaseCount === 0;
     let btnTitle = currentFilteredCaseCount >= MAX_LIMIT ? maxLengthTooltip : btnToolTip;
     const filterState = useContext(CaseListFilterStateContext);
     const { globalMetadataState: { loggedInUserRights, loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
-    const isOrgAdmin = loggedInUserRights.data.isOrgAdmin();
-    // CSV For Secure Support Users
-    const onExportCSVClickSecureSupport = () => __awaiter(this, void 0, void 0, function* () {
-        try {
-            const sfdcFilter = createQueryForCSVDownload(filterState, loggedInUserRights.data, loggedInUsersAccount.data);
-            setIsFetchingSFDC(true);
-            const sfdcResponse = yield publicApi.caseList.getCaseListFromSFDC(sfdcFilter, false, true);
-            setIsFetchingSFDC(false);
-            const headers = isOrgAdmin ? [...csvHeadersSFDC, groupHeaderSFDC] : csvHeadersSFDC;
-            // 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) })));
-            downloadCSV(updatedCsvData, headers, 'CaseList.csv');
-        }
-        catch (e) {
-            setIsFetchingSFDC(false);
-            ToastNotification.addDangerMessage(t('Could not export CSV'));
-        }
-    });
-    const partnerSearch = loggedInUserRights.data.isPartner();
-    // CSV For Normal Users
-    const onExportCSVClick = () => __awaiter(this, void 0, void 0, function* () {
-        try {
-            const res = yield request(createQueryForCSVDownload(filterState, loggedInUserRights.data, loggedInUsersAccount.data), partnerSearch, null, loggedInUsersAccount.data.secureSupport);
-            const headers = isOrgAdmin ? [...csvHeadersSolr, groupHeaderSOLR] : csvHeadersSolr;
-            // 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) })));
-            downloadCSV(updatedCsvData, headers, 'CaseList.csv');
-        }
-        catch (e) {
-            ToastNotification.addDangerMessage(t('Could not export CSV'));
-        }
-    });
     // To show tooltip if export csv is disabled when SOLR is down
     const getTooltipContent = () => {
         let tooltipText = t('Export Cases');
-        if (props.isExportCsvDisabled) {
+        if (isExportCsvDisabled) {
             tooltipText = t('Unable to export while access to search is limited');
         }
         return tooltipText;
     };
-    return (React.createElement("span", { title: (props.isExportCsvDisabled && getTooltipContent()) || '' },
-        React.createElement(Button, { variant: "tertiary", isDisabled: isBtnDisabled || props.isExportCsvDisabled, onClick: loggedInUsersAccount.data.secureSupport ? onExportCSVClickSecureSupport : onExportCSVClick, title: btnTitle, "data-tracking-id": "case-list-toolbar-export-csv" }, isFetchingCSVData ? (React.createElement(React.Fragment, null,
+    // To check if export csv button is disabled
+    const isExportButtonDisabled = isBtnDisabled || isExportCsvDisabled;
+    // To toggle download csv modal
+    const toggleDownloadCSVModal = () => {
+        setOpenUpdateSeverityModal((openUpdateSeverityModal) => !openUpdateSeverityModal);
+    };
+    return (React.createElement("span", { title: (isExportCsvDisabled && getTooltipContent()) || '' },
+        React.createElement(Button, { variant: "tertiary", onClick: toggleDownloadCSVModal, title: btnTitle, "data-tracking-id": "case-list-toolbar-export-csv", isDisabled: isExportButtonDisabled }, isFetchingCSVData ? (React.createElement(React.Fragment, null,
             React.createElement(Trans, null, "Exporting CSV"),
-            React.createElement(Spinner, { isSVG: true, size: "md", "aria-label": "loading", className: "export-csv-loader pf-u-ml-xs" }))) : (React.createElement(Trans, null, "Export CSV")))));
+            React.createElement(Spinner, { size: "md", "aria-label": "loading", className: "export-csv-loader pf-v5-u-ml-xs" }))) : (React.createElement(Trans, null, "Export CSV"))),
+        React.createElement(DownloadCSVFileModal, { filterState: filterState, loggedInUserRights: loggedInUserRights, loggedInUsersAccount: loggedInUsersAccount, isDisabled: isExportButtonDisabled, onModalshow: openUpdateSeverityModal, onClose: toggleDownloadCSVModal, selectedCases: selectedCases, filteredCaseCount: currentFilteredCaseCount })));
 }

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

@@ -1,6 +1,7 @@
+import React from 'react';
 interface IProps {
     sevValue: string;
 }
-export default function SeverityLabel({ sevValue }: IProps): JSX.Element;
+export default function SeverityLabel({ sevValue }: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=SeverityLabel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SeverityLabel.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-table/SeverityLabel.tsx"],"names":[],"mappings":"AAIA,UAAU,MAAM;IACZ,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,MAAM,eAmBzD"}
+{"version":3,"file":"SeverityLabel.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-table/SeverityLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,MAAM;IACZ,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,MAAM,qBAmBzD"}

package/lib/esm/components/case-list/case-list-table/table-column-selector/TableColumnSelector.d.ts

@@ -0,0 +1,9 @@
+import './TableColumnSelector.scss';
+import React from 'react';
+interface IProps {
+    onColumnSelectorChange: (columns: string[]) => void;
+    cachedColumns: string[];
+}
+export declare function TableColumnSelector({ onColumnSelectorChange, cachedColumns }: IProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=TableColumnSelector.d.ts.map

package/lib/esm/components/case-list/case-list-table/table-column-selector/TableColumnSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableColumnSelector.d.ts","sourceRoot":"","sources":["../../../../../../src/components/case-list/case-list-table/table-column-selector/TableColumnSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AAWpC,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,UAAU,MAAM;IACZ,sBAAsB,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpD,aAAa,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,sBAAsB,EAAE,aAAa,EAAE,EAAE,MAAM,qBAgGpF"}

package/lib/esm/components/case-list/case-list-table/table-column-selector/TableColumnSelector.js

@@ -0,0 +1,53 @@
+import './TableColumnSelector.scss';
+import { Checkbox, Dropdown, DropdownList, Grid, GridItem, MenuToggle, } from '@patternfly/react-core';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+export function TableColumnSelector({ onColumnSelectorChange, cachedColumns }) {
+    const { t } = useTranslation();
+    const [isOpen, setIsOpen] = useState(false);
+    const handleCheckboxChange = (key) => {
+        const index = cachedColumns.indexOf(key);
+        if (index === -1) {
+            // selected column not found, add it to the array
+            onColumnSelectorChange([...cachedColumns, key]);
+        }
+        else {
+            // selected column found, remove it from the array
+            const selectedCols = [...cachedColumns];
+            selectedCols.splice(index, 1);
+            onColumnSelectorChange(selectedCols);
+        }
+    };
+    const onToggleClick = () => {
+        setIsOpen(!isOpen);
+    };
+    const caseListColumnHeaderOne = [
+        { label: 'Owner', key: 'contactName' },
+        { label: 'Severity', key: 'severity' },
+        { label: 'Created by', key: 'createdDate' },
+        { label: 'Account number', key: 'accountNumber' },
+        { label: 'Support type', key: 'type' },
+        { label: 'Group', key: 'folderName' },
+    ];
+    const caseListColumnHeaderTwo = [
+        { label: 'Modified by', key: 'lastModifiedDate' },
+        { label: 'Status', key: 'status' },
+        { label: 'Product and version', key: 'product' },
+        { label: 'Personal reference number', key: 'alternateCaseId' },
+        { label: 'Closed date', key: 'closedDate' },
+    ];
+    const generateCheckboxes = (fieldDefinitions) => {
+        return fieldDefinitions === null || fieldDefinitions === void 0 ? void 0 : fieldDefinitions.map((field) => (React.createElement(Checkbox, { key: field.key, className: "case-column-selector", label: t(field.label), isChecked: cachedColumns.includes(field.key), onChange: () => {
+                handleCheckboxChange(field.key);
+            }, id: field.key, name: field.key })));
+    };
+    return (React.createElement(Dropdown, { isOpen: isOpen, onOpenChange: (isOpen) => setIsOpen(isOpen), toggle: (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: onToggleClick, isExpanded: isOpen }, t('Columns'))), shouldFocusToggleOnSelect: true, id: "case-list-table-column-dropdown", "data-tracking-id": "case-list-table-column-dropdown", className: "column-selector" },
+        React.createElement(DropdownList, null,
+            React.createElement(Grid, { hasGutter: true },
+                React.createElement(GridItem, { span: 6 },
+                    React.createElement(Checkbox, { className: "case-column-selector", label: t('Case ID'), defaultChecked: true, isDisabled: true, id: "case-id-check", name: "caseIDCheck" }),
+                    generateCheckboxes(caseListColumnHeaderOne)),
+                React.createElement(GridItem, { span: 6 },
+                    React.createElement(Checkbox, { className: "case-column-selector", label: t('Title'), defaultChecked: true, isDisabled: true, id: "problem-statement-check", name: "problemStatementCheck" }),
+                    generateCheckboxes(caseListColumnHeaderTwo))))));
+}

package/lib/esm/components/case-list/case-list-table/table-column-selector/TableColumnSelector.scss

@@ -0,0 +1,7 @@
+#case-list-table-column-dropdown {
+    z-index: 9 !important;
+}
+
+.case-column-selector {
+    margin: 15px 4px 0px 18px !important;
+}

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { CaseSearchQueryType } from '../../../enums/caseSearch';
 interface IProps {
     onSearchValChange?: (newVal: string) => void;
@@ -7,6 +8,6 @@ interface IProps {
     onAdvancedSearchValidation: (validation: boolean) => void;
     isSearchDisabled?: boolean;
 }
-export declare function AdvanceSearch(props: IProps): JSX.Element;
+export declare function AdvanceSearch(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=AdvanceSearch.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AdvanceSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/AdvanceSearch.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAIhE,UAAU,MAAM;IACZ,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,0BAA0B,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,eA8S1C"}
+{"version":3,"file":"AdvanceSearch.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-search/AdvanceSearch.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAIhE,UAAU,MAAM;IACZ,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,0BAA0B,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBA6T1C"}