Add reset to initial state button/logic

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

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`] = `
 <Fragment>
   <EuiPopover
     anchorPosition="downRight"
@@ -73,6 +73,15 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop
     >
       <Component />
     </EuiI18n>
+    <EuiPopoverFooter>
+      <EuiButtonEmpty
+        data-test-subj="resetDisplaySelector"
+        onClick={[Function]}
+        size="xs"
+      >
+        Reset to default
+      </EuiButtonEmpty>
+    </EuiPopoverFooter>
   </EuiPopover>
 </Fragment>
 `;

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(<MockComponent />);
       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(
+          <MockComponent gridStyles={{ fontSize: 'l', cellPadding: 'l' }} />
+        );
+        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(
+          <MockComponent rowHeightsOptions={{ defaultHeight: undefined }} />
+        );
+        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(
+            <MockComponent
+              rowHeightsOptions={{ defaultHeight: { lineCount: 3 } }}
+            />
+          );
+          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);
+        });
       });
     });
   });

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 = (
             )}
           </EuiI18n>
         )}
+        <EuiPopoverFooter>
+          <EuiButtonEmpty
+            size="xs"
+            onClick={resetToInitialState}
+            data-test-subj="resetDisplaySelector"
+          >
+            {resetButtonLabel}
+          </EuiButtonEmpty>
+        </EuiPopoverFooter>
       </EuiPopover>
     ) : null;