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<{
-