From fe81de37318e84837e41dc94bb632b594bcdfc8d Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 1 Dec 2021 08:47:48 -0800 Subject: [PATCH] Add reset to initial state button/logic --- CHANGELOG.md | 1 + .../display_selector.test.tsx.snap | 11 +++- .../controls/display_selector.test.tsx | 52 ++++++++++++++++- .../datagrid/controls/display_selector.tsx | 58 ++++++++++++++----- 4 files changed, 107 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d061a393bfad..aa32455a998c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - Updated `EuiDataGrid`'s full screen mode to use the `fullScreenExit` icon ([#5415](https://github.com/elastic/eui/pull/5415)) - Added `left.append` and `left.prepend` to `EuiDataGrid`'s `toolbarVisibility.additionalControls` prop [#5394](https://github.com/elastic/eui/pull/5394)) - Added a row height control to `EuiDataGrid`'s toolbar ([#5372](https://github.com/elastic/eui/pull/5372)) +- Added a reset button to `EuiDataGrid`'s display controls ([#5428](https://github.com/elastic/eui/pull/5428)) **Bug fixes** diff --git a/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap index ac16b5d0c76c..740b714c685b 100644 --- a/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/popover allowing users to customize display settings 1`] = ` +exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/popover allowing users to customize & reset display settings 1`] = ` + + + Reset to default + + `; diff --git a/src/components/datagrid/controls/display_selector.test.tsx b/src/components/datagrid/controls/display_selector.test.tsx index 5d574306330b..6b712cb1eda6 100644 --- a/src/components/datagrid/controls/display_selector.test.tsx +++ b/src/components/datagrid/controls/display_selector.test.tsx @@ -47,7 +47,7 @@ describe('useDataGridDisplaySelector', () => { }); }; - it('renders a toolbar button/popover allowing users to customize display settings', () => { + it('renders a toolbar button/popover allowing users to customize & reset display settings', () => { const component = shallow(); expect(component).toMatchSnapshot(); }); @@ -136,6 +136,22 @@ describe('useDataGridDisplaySelector', () => { expect(getSelection(component)).toEqual(''); }); }); + + it('correctly resets density to initial developer-passed state', () => { + const component = mount( + + ); + openPopover(component); + expect(getSelection(component)).toEqual('expanded'); + + component.find('[data-test-subj="compact"]').simulate('change'); + expect(getSelection(component)).toEqual('compact'); + + component + .find('button[data-test-subj="resetDisplaySelector"]') + .simulate('click'); + expect(getSelection(component)).toEqual('expanded'); + }); }); describe('row height', () => { @@ -208,6 +224,22 @@ describe('useDataGridDisplaySelector', () => { }); }); + it('correctly resets row height to initial developer-passed state', () => { + const component = mount( + + ); + openPopover(component); + expect(getSelection(component)).toEqual('undefined'); + + component.find('[data-test-subj="auto"]').simulate('change'); + expect(getSelection(component)).toEqual('auto'); + + component + .find('button[data-test-subj="resetDisplaySelector"]') + .simulate('click'); + expect(getSelection(component)).toEqual('undefined'); + }); + describe('lineCount', () => { const getLineCountNumber = (component: ReactWrapper) => component @@ -278,6 +310,24 @@ describe('useDataGridDisplaySelector', () => { setLineCountNumber(component, -50); expect(getLineCountNumber(component)).toEqual(2); }); + + it('correctly resets lineCount to initial developer-passed state', () => { + const component = mount( + + ); + openPopover(component); + expect(getLineCountNumber(component)).toEqual(3); + + setLineCountNumber(component, 5); + expect(getLineCountNumber(component)).toEqual(5); + + component + .find('button[data-test-subj="resetDisplaySelector"]') + .simulate('click'); + expect(getLineCountNumber(component)).toEqual(3); + }); }); }); }); diff --git a/src/components/datagrid/controls/display_selector.tsx b/src/components/datagrid/controls/display_selector.tsx index 9e8b001a5514..5f5c3fc8f723 100644 --- a/src/components/datagrid/controls/display_selector.tsx +++ b/src/components/datagrid/controls/display_selector.tsx @@ -9,8 +9,8 @@ import React, { ReactNode, useState, useMemo, useCallback } from 'react'; import { EuiI18n, useEuiI18n } from '../../i18n'; -import { EuiPopover } from '../../popover'; -import { EuiButtonIcon, EuiButtonGroup } from '../../button'; +import { EuiPopover, EuiPopoverFooter } from '../../popover'; +import { EuiButtonIcon, EuiButtonGroup, EuiButtonEmpty } from '../../button'; import { EuiFormRow, EuiRange } from '../../form'; import { EuiToolTip } from '../../tool_tip'; @@ -102,26 +102,36 @@ export const useDataGridDisplaySelector = ( 'allowRowHeight' ); - // track styles specified by the user at run time + // Get initial state (also used when resetting) + const initialDensity = useMemo( + () => convertGridStylesToSelection(initialStyles), + [initialStyles] + ); + const initialRowHeight = useMemo( + () => convertRowHeightsOptionsToSelection(initialRowHeightsOptions), + [initialRowHeightsOptions] + ); + const initialLineCount = useMemo( + // @ts-ignore - optional chaining operator handles types & cases that aren't lineCount + () => initialRowHeightsOptions?.defaultHeight?.lineCount || 2, + [initialRowHeightsOptions?.defaultHeight] + ); + + // Track styles specified by the user at run time const [userGridStyles, setUserGridStyles] = useState({}); const [userRowHeightsOptions, setUserRowHeightsOptions] = useState({}); - // Normal is the default density - const [gridDensity, _setGridDensity] = useState( - convertGridStylesToSelection(initialStyles) - ); + // Density state + const [gridDensity, _setGridDensity] = useState(initialDensity); const setGridDensity = (density: string) => { _setGridDensity(density); setUserGridStyles(densityStyles[density]); }; // Row height state - const [lineCount, setLineCount] = useState( - // @ts-ignore - optional chaining operator handles types & cases that aren't lineCount - initialRowHeightsOptions?.defaultHeight?.lineCount || 2 - ); + const [lineCount, setLineCount] = useState(initialLineCount); const [rowHeightSelection, setRowHeightSelection] = useState( - convertRowHeightsOptionsToSelection(initialRowHeightsOptions) + initialRowHeight ); const setRowHeight = useCallback( (option: string) => { @@ -150,7 +160,7 @@ export const useDataGridDisplaySelector = ( setUserRowHeightsOptions({ defaultHeight: { lineCount: newLineCount } }); }, []); - // merge the developer-specified styles with any user overrides + // Merge the developer-specified configurations with user overrides const gridStyles = useMemo(() => { return { ...initialStyles, @@ -165,10 +175,23 @@ export const useDataGridDisplaySelector = ( }; }, [initialRowHeightsOptions, userRowHeightsOptions]); + // Allow resetting to initial developer-specified configurations + const resetToInitialState = useCallback(() => { + setGridDensity(initialDensity); + setUserGridStyles({}); + setRowHeightSelection(initialRowHeight); + setUserRowHeightsOptions({}); + setLineCount(initialLineCount); + }, [initialDensity, initialRowHeight, initialLineCount]); + const buttonLabel = useEuiI18n( 'euiDisplaySelector.buttonText', 'Display options' ); + const resetButtonLabel = useEuiI18n( + 'euiDisplaySelector.resetButtonText', + 'Reset to default' + ); const displaySelector = showDensityControls || showRowHeightControls ? ( @@ -308,6 +331,15 @@ export const useDataGridDisplaySelector = ( )} )} + + + {resetButtonLabel} + + ) : null;