feat: Add column management modal

Author: leSamo

locales/en.json

@@ -15,6 +15,9 @@
   "businessRiskModal.info": "Business risk can be used to identify, track, and address CVEs that have meaningful impact to your organization.",
   "businessRiskModal.title": "Edit business risk",
   "cancel": "Cancel",
+  "columnManagementModal.description": "Selected categories will be displayed in the table.",
+  "columnManagementModal.selectAll": "Select all",
+  "columnManagementModal.title": "Manage columns",
   "configModalExportReport": "Export report",
   "configModalTitle": "Report by CVEs",
   "count": "Num. systems",

src/Components/SmartComponents/Modals/ColumnManagementModal.js

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import propTypes from 'prop-types';
+import {
+    Modal,
+    Button,
+    TextContent,
+    Text,
+    TextVariants,
+    DataListItem,
+    DataList,
+    DataListItemRow,
+    DataListCheck,
+    DataListCell,
+    DataListItemCells
+} from '@patternfly/react-core';
+import messages from '../../../Messages';
+import { intl } from '../../../Utilities/IntlProvider';
+
+const ColumnManagementModal = ({ appliedColumns, applyColumns, isModalOpen, setModalOpen }) => {
+    const [currentColumns, setCurrentColumns] = useState(appliedColumns);
+
+    const handleChange = index => {
+        let newColumns = [...currentColumns];
+        let changedColumn = { ...newColumns[index] };
+
+        changedColumn.isShown = !changedColumn.isShown;
+        newColumns[index] = changedColumn;
+
+        setCurrentColumns(newColumns);
+    };
+
+    const selectAll = () => {
+        let newColumns = [...currentColumns];
+        newColumns = newColumns.map(column => ({ ...column, isShown: true }));
+
+        setCurrentColumns(newColumns);
+    };
+
+    const handleSave = () => {
+        setModalOpen(false);
+        applyColumns(currentColumns);
+    };
+
+    const handleCancel = () => {
+        setModalOpen(false);
+        setCurrentColumns(appliedColumns);
+    };
+
+    return (
+        <Modal
+            title={intl.formatMessage(messages.columnManagementModalTitle)}
+            onClose={() => setModalOpen(false)}
+            isOpen={isModalOpen}
+            variant="small"
+            description={
+                <TextContent>
+                    <Text component={TextVariants.p}>{intl.formatMessage(messages.columnManagementModalDescription)}</Text>
+                    <Button isInline onClick={selectAll} variant="link">
+                        {intl.formatMessage(messages.columnManagementModalSelectAll)}
+                    </Button>
+                </TextContent>
+            }
+            actions={[
+                <Button key="save" variant="primary" onClick={handleSave}>
+                    {intl.formatMessage(messages.save)}
+                </Button>,
+                <Button key="cancel" variant="secondary" onClick={handleCancel}>
+                    {intl.formatMessage(messages.cancel)}
+                </Button>
+            ]}
+        >
+            <DataList aria-label="Table column management" id="table-column-management" isCompact>
+                {currentColumns.map((column, index) =>
+                    <DataListItem key={column.key}>
+                        <DataListItemRow>
+                            <DataListCheck
+                                checked={column.isShown}
+                                id={'checkbox-' + index}
+                                onChange={() => handleChange(index)}
+                            />
+                            <DataListItemCells
+                                dataListCells={[
+                                    <DataListCell key={'table-column-management-item' + index}>
+                                        <label htmlFor={'checkbox-' + index}>
+                                            {column.title}
+                                        </label>
+                                    </DataListCell>
+                                ]}
+                            />
+                        </DataListItemRow>
+                    </DataListItem>
+                )}
+            </DataList>
+        </Modal>
+    );
+};
+
+ColumnManagementModal.propTypes = {
+    appliedColumns: propTypes.arrayOf(propTypes.object),
+    applyColumns: propTypes.func,
+    isModalOpen: propTypes.bool,
+    setModalOpen: propTypes.func
+};
+
+export default ColumnManagementModal;

src/Messages.js

@@ -1542,5 +1542,21 @@ export default defineMessages({
         id: 'notificationDetailIncludeFailureBody',
         description: 'Notification body text when a system fails to get included into vulnerability analysis using kebab action in system detail page',
         defaultMessage: 'Select the resume action to try again.'
+    },
+
+    columnManagementModalTitle: {
+        id: 'columnManagementModal.title',
+        description: 'Title text of the column management modal',
+        defaultMessage: 'Manage columns'
+    },
+    columnManagementModalDescription: {
+        id: 'columnManagementModal.description',
+        description: 'Description text of the column management modal',
+        defaultMessage: 'Selected categories will be displayed in the table.'
+    },
+    columnManagementModalSelectAll: {
+        id: 'columnManagementModal.selectAll',
+        description: 'Button inside the column management modal, which will select all items',
+        defaultMessage: 'Select all'
     }
 });