diff --git a/web/src/components/modals/__tests__/columns-modal.spec.tsx b/web/src/components/modals/__tests__/columns-modal.spec.tsx index 8accc3024..375573210 100644 --- a/web/src/components/modals/__tests__/columns-modal.spec.tsx +++ b/web/src/components/modals/__tests__/columns-modal.spec.tsx @@ -10,6 +10,7 @@ describe('', () => { setModalOpen: jest.fn(), columns: ShuffledDefaultColumns, setColumns: jest.fn(), + setColumnSizes: jest.fn(), id: 'columns-modal' }; it('should render component', async () => { diff --git a/web/src/components/modals/columns-modal.tsx b/web/src/components/modals/columns-modal.tsx index a6a022dfb..96f8f7c49 100644 --- a/web/src/components/modals/columns-modal.tsx +++ b/web/src/components/modals/columns-modal.tsx @@ -1,35 +1,37 @@ -import * as React from 'react'; import { Button, DataList, + DataListCell, + DataListCheck, DataListControl, + DataListDragButton, DataListItem, + DataListItemCells, DataListItemRow, - DataListDragButton, - DataListCheck, - DataListCell, DragDrop, Draggable, Droppable, - DataListItemCells, Text, TextContent, TextVariants, Tooltip } from '@patternfly/react-core'; -import Modal from './modal'; -import { useTranslation } from 'react-i18next'; -import { Column, getDefaultColumns, getFullColumnName } from '../../utils/columns'; import * as _ from 'lodash'; +import * as React from 'react'; +import { useTranslation } from 'react-i18next'; +import { Column, ColumnSizeMap, getDefaultColumns, getFullColumnName } from '../../utils/columns'; import './columns-modal.css'; +import Modal from './modal'; export const ColumnsModal: React.FC<{ isModalOpen: boolean; setModalOpen: (v: boolean) => void; columns: Column[]; setColumns: (v: Column[]) => void; + setColumnSizes: (v: ColumnSizeMap) => void; id?: string; -}> = ({ id, isModalOpen, setModalOpen, columns, setColumns }) => { +}> = ({ id, isModalOpen, setModalOpen, columns, setColumns, setColumnSizes }) => { + const [resetClicked, setResetClicked] = React.useState(false); const [updatedColumns, setUpdatedColumns] = React.useState([]); const [isSaveDisabled, setSaveDisabled] = React.useState(true); const [isAllSelected, setAllSelected] = React.useState(false); @@ -80,8 +82,9 @@ export const ColumnsModal: React.FC<{ ); const onReset = React.useCallback(() => { + setResetClicked(true); setUpdatedColumns(getDefaultColumns(t)); - }, [setUpdatedColumns, t]); + }, [setResetClicked, setUpdatedColumns, t]); const onSelectAll = React.useCallback(() => { const result = [...updatedColumns]; @@ -91,10 +94,18 @@ export const ColumnsModal: React.FC<{ setUpdatedColumns(result); }, [updatedColumns, setUpdatedColumns, isAllSelected]); + const onClose = React.useCallback(() => { + setResetClicked(false); + setModalOpen(false); + }, [setModalOpen]); + const onSave = React.useCallback(() => { + if (resetClicked) { + setColumnSizes({}); + } setColumns(updatedColumns); - setModalOpen(false); - }, [updatedColumns, setColumns, setModalOpen]); + onClose(); + }, [resetClicked, setColumns, updatedColumns, onClose, setColumnSizes]); const draggableItems = updatedColumns.map((column, i) => ( @@ -134,7 +145,7 @@ export const ColumnsModal: React.FC<{ title={t('Manage columns')} isOpen={isModalOpen} scrollable={true} - onClose={() => setModalOpen(false)} + onClose={onClose} description={ @@ -151,10 +162,10 @@ export const ColumnsModal: React.FC<{ - - +