@rh-support/cases 2.1.35 → 2.1.36

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

@@ -0,0 +1,273 @@
+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, } 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 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: 'Summary', key: SolrKeys.caseSummary },
+];
+const csvHeadersSFDC = [
+    { label: 'Case number', key: SFDCKeys.caseNumber },
+    { label: 'Summary', key: SFDCKeys.caseSummary },
+];
+export default function DownloadCSVFileModal(props) {
+    const { onClose, onModalshow, isDisabled, loggedInUserRights, loggedInUsersAccount, filterState } = props;
+    const { t } = useTranslation();
+    const { isFetching, request } = useFetch(getCaseListFromSolr, { propgateErrors: true });
+    const [downloadCSVFileName, setDownloadCSVFileName] = useState('');
+    const [isFetchingSFDC, setIsFetchingSFDC] = useState(false);
+    const [generatedCsvHeaders, setGeneratedCsvHeaders] = useState([]);
+    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,
+    });
+    function getKey(key, isSecureSupport) {
+        return isSecureSupport ? SFDCKeys[key] : SolrKeys[key];
+    }
+    const headerDefinitions = useMemo(() => [
+        {
+            checkbox: checkboxes.ownerName,
+            key: getKey('ownerName', loggedInUsersAccount.data.secureSupport),
+            label: 'Owner name',
+        },
+        {
+            checkbox: checkboxes.severity,
+            key: getKey('severity', loggedInUsersAccount.data.secureSupport),
+            label: 'Severity',
+        },
+        {
+            checkbox: checkboxes.createdBy,
+            key: getKey('createdBy', loggedInUsersAccount.data.secureSupport),
+            label: 'Created by',
+        },
+        {
+            checkbox: checkboxes.createdBy,
+            key: getKey('createdDate', loggedInUsersAccount.data.secureSupport),
+            label: 'Created date',
+            transform: formatDateTime,
+        },
+        {
+            checkbox: checkboxes.accountNumber,
+            key: getKey('accountNumber', loggedInUsersAccount.data.secureSupport),
+            label: 'Account number',
+        },
+        {
+            checkbox: checkboxes.type,
+            key: getKey('type', loggedInUsersAccount.data.secureSupport),
+            label: 'Case type',
+        },
+        {
+            checkbox: checkboxes.modifiedBy,
+            key: getKey('modifiedBy', loggedInUsersAccount.data.secureSupport),
+            label: 'Modified by',
+        },
+        {
+            checkbox: checkboxes.modifiedBy,
+            key: getKey('modifiedDate', loggedInUsersAccount.data.secureSupport),
+            label: 'Modified date',
+            transform: formatDateTime,
+        },
+        {
+            checkbox: checkboxes.status,
+            key: getKey('status', loggedInUsersAccount.data.secureSupport),
+            label: 'Status',
+        },
+        {
+            checkbox: checkboxes.productVersion,
+            key: getKey('product', loggedInUsersAccount.data.secureSupport),
+            label: 'Product',
+        },
+        {
+            checkbox: checkboxes.productVersion,
+            key: getKey('version', loggedInUsersAccount.data.secureSupport),
+            label: 'Version',
+        },
+        {
+            checkbox: checkboxes.alternateId,
+            key: getKey('alternateId', loggedInUsersAccount.data.secureSupport),
+            label: 'Alternate ID',
+        },
+        {
+            checkbox: checkboxes.caseClosedDate,
+            key: getKey('caseClosedDate', loggedInUsersAccount.data.secureSupport),
+            label: 'Closed date',
+            transform: formatDateTime,
+        },
+    ], [checkboxes, loggedInUsersAccount.data.secureSupport]);
+    useEffect(() => {
+        const updatedCsvHeaders = loggedInUsersAccount.data.secureSupport
+            ? 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);
+                }
+            }
+        });
+        setGeneratedCsvHeaders(updatedCsvHeaders);
+    }, [loggedInUsersAccount.data.secureSupport, checkboxes, headerDefinitions]);
+    const isFetchingCSVData = isFetching || isFetchingSFDC;
+    const isOrgAdmin = loggedInUserRights.data.isOrgAdmin();
+    const partnerSearch = loggedInUserRights.data.hasManagedAccounts();
+    const splitExtensionName = downloadCSVFileName.split('.')[0];
+    const onCancel = () => {
+        onClose && onClose();
+    };
+    const handleCSVFileNameChange = (value) => {
+        setDownloadCSVFileName(value);
+    };
+    const clearDownloadCSVFileName = () => {
+        setDownloadCSVFileName('');
+    };
+    const handleCheckboxChange = (key) => {
+        setCheckboxes((prevCheckboxes) => (Object.assign(Object.assign({}, prevCheckboxes), { [key]: !prevCheckboxes[key] })));
+    };
+    // Group header for SOLR
+    const groupHeaderSOLR = { label: 'Group', key: SolrKeys.groupName };
+    // For SOLR
+    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] : generatedCsvHeaders;
+            // 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, splitExtensionName ? `${splitExtensionName}.csv` : 'CaseList.csv');
+            onCancel();
+            ToastNotification.addSuccessMessage(t('File downloaded successfully!'));
+        }
+        catch (e) {
+            onCancel();
+            ToastNotification.addDangerMessage(t('File could not be downloaded. Please try again!  '));
+        }
+    });
+    // Group header for SFDC
+    const groupHeaderSFDC = { label: 'Group', key: SFDCKeys.groupName };
+    // For SFDC
+    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, splitExtensionName ? `${splitExtensionName}.csv` : 'CaseList.csv');
+            onCancel();
+            ToastNotification.addSuccessMessage(t('File downloaded successfully!'));
+        }
+        catch (e) {
+            setIsFetchingSFDC(false);
+            onCancel();
+            ToastNotification.addDangerMessage(t('Could not export CSV'));
+        }
+    });
+    useEffect(() => {
+        const commonState = checkboxes.selectAll;
+        const updatedCheckboxes = {
+            ownerName: commonState,
+            modifiedBy: commonState,
+            severity: commonState,
+            status: commonState,
+            createdBy: commonState,
+            productVersion: commonState,
+            accountNumber: commonState,
+            alternateId: commonState,
+            type: commonState,
+            caseClosedDate: commonState,
+        };
+        setCheckboxes((prevCheckboxes) => (Object.assign(Object.assign({}, prevCheckboxes), updatedCheckboxes)));
+    }, [checkboxes.selectAll]);
+    const handleSelectAll = () => {
+        setCheckboxes((prevCheckboxes) => (Object.assign(Object.assign({}, prevCheckboxes), { selectAll: !prevCheckboxes.selectAll })));
+    };
+    const csvHeadersOne = [
+        { label: 'Owner', key: 'ownerName' },
+        { label: 'Severity', key: 'severity' },
+        { label: 'Created by', key: 'createdBy' },
+        { label: 'Account number', key: 'accountNumber' },
+        { label: 'Case type', key: 'type' },
+    ];
+    const csvHeadersTwo = [
+        { label: 'Modified by', key: 'modifiedBy' },
+        { label: 'Status', key: 'status' },
+        { label: 'Product and version', key: 'productVersion' },
+        { label: 'Alternate case ID', 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" },
+                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) }),
+                    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('Issue summary'), defaultChecked: true, isDisabled: true, id: "controlled-check-3", name: "check3" }),
+                        generateCheckboxes(csvHeadersTwo))))));
+    };
+    const downloadCSVModalDescription = () => {
+        const numberOfCases = 1 | 2 | 3;
+        switch (numberOfCases) {
+            case 1:
+                return t('Your download will include 100 cases. ');
+            case 2:
+                return t('Your download will include 512 cases.');
+            case 3:
+                return t('Only the first 1000 cases will be included in your download. Please note this may take a while. ');
+            default:
+                return '';
+        }
+    };
+    // 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: loggedInUsersAccount.data.secureSupport ? onExportCSVClickSecureSupport : onExportCSVClick, isDisabled: 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')),
+    ];
+    return (React.createElement(Modal, { title: t('Download CSV file'), description: downloadCSVModalDescription(), 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.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;AAIzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAK7D,UAAU,MAAM;IACZ,uBAAuB,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC1D,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC;AAID,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,eAmE9C"}

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

@@ -1,63 +1,11 @@
-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;
@@ -65,45 +13,13 @@ export function ExportCaseListCSV(props) {
     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 { 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');
@@ -112,8 +28,15 @@ export function ExportCaseListCSV(props) {
         }
         return tooltipText;
     };
+    // To check if export csv button is disabled
+    const isExportButtonDisabled = isBtnDisabled || props.isExportCsvDisabled;
+    // To toggle download csv modal
+    const toggleDownloadCSVModal = () => {
+        setOpenUpdateSeverityModal((openUpdateSeverityModal) => !openUpdateSeverityModal);
+    };
     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,
+        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, { size: "md", "aria-label": "loading", className: "export-csv-loader pf-v5-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 })));
 }

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

@@ -202,5 +202,5 @@ export function SaveCaseSearchModal({ isModalOpen, modalToggle, isAdding, select
                         ? 'error'
                         : 'default' })),
             React.createElement(FormGroup, { label: React.createElement("span", { className: "save-for-later-label-query" }, t('Search and filter query')), isRequired: true, fieldId: "filter-query", className: "form-group pf-v5-u-mt-lg save-for-later-query" },
-                React.createElement(TextArea, { isRequired: true, validated: saveButtonIsClicked ? 'error' : 'default', type: "text", id: "filter-query", name: "filter-query", "aria-describedby": "filter-query-helper", value: getQueryStr(), isDisabled: true, resizeOrientation: "vertical" })))));
+                React.createElement(TextArea, { isRequired: true, validated: saveButtonIsClicked && isEmpty(getQueryStr()) ? 'error' : 'default', type: "text", id: "filter-query", name: "filter-query", "aria-describedby": "filter-query-helper", value: getQueryStr(), isDisabled: true, resizeOrientation: "vertical" })))));
 }

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export default function useAdvanceSearchParser({ onInit }: {
     onInit: any;
 }): {

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

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

package/lib/esm/components/index.d.ts

@@ -1,4 +1,3 @@
-import { IPfeCollapse } from '@rh-support/types/pfe/pfe-collapse';
 import { RouteComponentProps } from 'react-router-dom';
 export interface ICasesRouteURLParams {
 }
@@ -10,19 +9,13 @@ declare global {
     interface Window {
         sessionjs: any;
         MSInputMethodContext: any;
-        chrometwo_require: (component: string[], callback: (...params: any[]) => any) => any;
         portal: any;
         Raven: any;
-        chrometwo_ready: any;
         seVersionInfo: {
             packageVersion: string;
             hydrajs: string;
         };
     }
-    namespace JSX {
-        interface IntrinsicElements extends IPfeCollapse {
-        }
-    }
     interface Document {
         documentMode: any;
     }

package/lib/esm/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAGlE,OAAO,EAAmB,mBAAmB,EAAU,MAAM,kBAAkB,CAAC;AAMhF,MAAM,WAAW,oBAAoB;CAAG;AACxC,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IACtD,QAAQ,EAAE,MAAM,CAAC;CACpB;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,SAAS,EAAE,GAAG,CAAC;QACf,oBAAoB,EAAE,GAAG,CAAC;QAC1B,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,MAAM,OAAA,KAAK,GAAG,KAAK,GAAG,CAAC;QAC9E,MAAM,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,GAAG,CAAC;QACX,eAAe,EAAE,GAAG,CAAC;QACrB,aAAa,EAAE;YACX,cAAc,EAAE,MAAM,CAAC;YACvB,OAAO,EAAE,MAAM,CAAC;SACnB,CAAC;KACL;IAED,UAAU,GAAG,CAAC;QACV,UAAU,iBAAkB,SAAQ,YAAY;SAAG;KACtD;IAED,UAAU,QAAQ;QACd,YAAY,EAAE,GAAG,CAAC;KACrB;CACJ;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,eAiBlC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,mBAAmB,EAAU,MAAM,kBAAkB,CAAC;AAMhF,MAAM,WAAW,oBAAoB;CAAG;AACxC,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IACtD,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,SAAS,EAAE,GAAG,CAAC;QACf,oBAAoB,EAAE,GAAG,CAAC;QAC1B,MAAM,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,GAAG,CAAC;QACX,aAAa,EAAE;YACX,cAAc,EAAE,MAAM,CAAC;YACvB,OAAO,EAAE,MAAM,CAAC;SACnB,CAAC;KACL;IAED,UAAU,QAAQ;QACd,YAAY,EAAE,GAAG,CAAC;KACrB;CACJ;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,eAiBlC"}

package/lib/esm/components/index.js

@@ -1,15 +1,8 @@
-import { CustomElements, requireCustomElement } from '@rh-support/utils';
 import React, { useEffect } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import RouteUtils from '../utils/routeUtils';
 import { CaseList } from './case-list/CaseList';
 import { PartnerEscalation } from './escalations/PartnerEscalation';
-requireCustomElement([
-    {
-        element: CustomElements.pfeCollapse,
-        requireCb: () => require('@patternfly/pfe-collapse'),
-    },
-]);
 export function Cases(props) {
     RouteUtils.casesBasePath = props.basePath || '';
     // Loading app metadata

package/lib/esm/css/caseList.css

@@ -112,10 +112,6 @@
     margin: 0.4rem 1rem 0.4rem 0;
 }
 
-/* .cases-main .case-search-top .filter-chip-wrapper .filter-chip:last-of-type {
-    margin-right: 0 !important;
-} */
-
 .cases-main .case-search-top .filter-chip-wrapper .filter-chip .filter-chip__heading {
     font-size: 14px;
     font-weight: 500;
@@ -235,10 +231,6 @@
     min-width: 80px;
 }
 
-/* .case-search-bottom .case-list-table tr td.pf-v5-c-table__check {
-    padding: 2rem 1rem 1.5rem 2rem !important;
-} */
-
 .case-search-bottom .case-list-table .case-number,
 .case-search-bottom .case-list-table .modified-name,
 .case-search-bottom .case-list-table .created-name,
@@ -246,6 +238,13 @@
     font-weight: 500;
 }
 
+.case-search-bottom .case-list-table th.pf-v5-c-table__th {
+    padding: 16px 24px !important;
+    word-break: inherit;
+    vertical-align: middle;
+}
+
+.case-search-bottom .case-list-table .case-number,
 .case-search-bottom .case-list-table .modified-name,
 .case-search-bottom .case-list-table .created-name {
     display: block;
@@ -337,11 +336,6 @@
     margin-right: 0;
 }
 
-/* .filter-wrapper .filter-group > .pf-v5-c-select .pf-v5-c-select__toggle,
-.filter-wrapper .filter-group > .pf-v5-c-select .pf-v5-c-select__toggle .pf-v5-c-select__toggle-typeahead {
-    font-size: 15px;
-} */
-
 #rh-support-cases .pf-v5-c-select .pf-v5-c-select__menu li label,
 .filter-wrapper .filter-group > .additional-filters label {
     margin-bottom: 0;
@@ -483,23 +477,23 @@
     .case-list-table tbody > tr > :nth-child(2) {
         position: sticky;
         background-color: white;
-        left: 87px;
+        left: 50px;
         z-index: 1;
         background-clip: padding-box;
     }
 
     /*  Case ID Header */
-    th.pf-v5-c-table__sort[data-label='Case ID'] {
+    th#number.pf-v5-c-table__th {
         position: sticky;
         background-color: white;
-        left: 87px;
+        left: 50px;
         z-index: 1;
         background-clip: padding-box;
     }
 
     /* Vertical border to divide sticky columns and other columns*/
     .case-list-table tbody > tr > :nth-child(2):before,
-    th.pf-v5-c-table__sort[data-label='Case ID']:before {
+    th#number.pf-v5-c-table__th:before {
         position: absolute;
         content: '';
         top: 0px;
@@ -509,51 +503,51 @@
     }
 
     /*  Issue Summary Header */
-    th.pf-v5-c-table__sort[data-label='Issue summary'],
+    th#summary.pf-v5-c-table__th,
     .case-list-table tbody > tr > :nth-child(3) {
-        min-width: 270px;
+        min-width: 270px !important;
     }
 
-    th.pf-v5-c-table__sort[data-label='Owner'],
-    th.pf-v5-c-table__sort[data-label='Status'],
-    th.pf-v5-c-table__sort[data-label='Group'] {
-        min-width: 140px;
+    th#contactName.pf-v5-c-table__th,
+    th#status.pf-v5-c-table__th,
+    th#folderName.pf-v5-c-table__th {
+        min-width: 140px !important;
     }
 
-    th.pf-v5-c-table__sort[data-label='Severity'],
-    th.pf-v5-c-table__sort[data-label='Case ID'] {
-        min-width: 150px;
+    th#severity.pf-v5-c-table__th,
+    th#number.pf-v5-c-table__th {
+        min-width: 150px !important;
     }
 
-    th.pf-v5-c-table__sort[data-label='Modified by'],
-    th.pf-v5-c-table__sort[data-label='Created by'] {
-        min-width: 170px;
+    th#lastModifiedDate.pf-v5-c-table__th,
+    th#createdDate.pf-v5-c-table__th {
+        min-width: 180px !important;
     }
 
-    th.pf-m-width-15[data-label='Product and version'],
-    th.pf-v5-c-table__sort[data-label='Support type'] {
-        min-width: 180px;
+    th#product.pf-v5-c-table__th,
+    th#type.pf-v5-c-table__th {
+        min-width: 190px !important;
     }
 
-    th.pf-v5-c-table__sort[data-label='Account number'] {
+    th#accountNumber.pf-v5-c-table__th {
         min-width: 205px;
     }
 
-    th.pf-v5-c-table__sort[data-label='Personal reference number'] {
-        min-width: 232px;
+    th#alternateCaseId.pf-v5-c-table__th {
+        min-width: 242px !important;
     }
 
     /*  Closed Date Header  */
-    th.pf-v5-c-table__sort.pf-m-width-10[data-label='Closed date'],
+    th#closedDate.pf-v5-c-table__th,
     th.pf-v5-c-table__sort[data-label='Case type'] {
-        min-width: 200px;
+        min-width: 200px !important;
     }
 }
 
 @media (min-width: 1800px) {
     /*  Issue Summary */
-    th.pf-v5-c-table__sort[data-label='Issue summary'],
+    th#summary.pf-v5-c-table__th,
     .case-list-table tbody > tr > :nth-child(3) {
-        min-width: 450px;
+        min-width: 450px !important;
     }
 }