[EuiDataGrid] Row height switcher should override rowHeights + add reset button

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-docs/src/views/datagrid/datagrid_height_options_example.js

@@ -41,7 +41,6 @@ const lineHeightFullSnippet = `const rowHeightsOptions = useMemo(
   columns={columns}
   columnVisibility={{ visibleColumns, setVisibleColumns }}
   rowCount={rowCount}
-  height={400}
   renderCellValue={renderCellValue}
   rowHeightsOptions={rowHeightsOptions}
 />
@@ -61,29 +60,21 @@ const rowHeightsSnippet = `rowHeightsOptions = {
 const rowHeightsFullSnippet = `const rowHeightsOptions = useMemo(
   () => ({
     defaultHeight: 140,
+    rowHeights: {
+      0: 200,
+      1: 50,
+    },
   }),
   []
 );
 
 <EuiDataGrid
-  aria-label="Data grid with fixed height for rows"
+  aria-label="Data grid with row heights overrides"
   columns={columns}
   columnVisibility={{ visibleColumns, setVisibleColumns }}
   rowCount={rowCount}
-  height={400}
   renderCellValue={renderCellValue}
-  inMemory={{ level: 'sorting' }}
-  sorting={{ columns: sortingColumns, onSort }}
   rowHeightsOptions={rowHeightsOptions}
-  toolbarVisibility={{
-    showDisplaySelelector: { allowRowHeight: false },
-  }}
-  pagination={{
-    ...pagination,
-    pageSizeOptions: [50, 250, 1000],
-    onChangeItemsPerPage: onChangeItemsPerPage,
-    onChangePage: onChangePage,
-  }}
 />
 `;
 
@@ -113,17 +104,8 @@ const autoRowHeightsFullSnippet = `const rowHeightsOptions = useMemo(
   columns={columns}
   columnVisibility={{ visibleColumns, setVisibleColumns }}
   rowCount={rowCount}
-  height={400}
   renderCellValue={renderCellValue}
-  inMemory={{ level: 'sorting' }}
-  sorting={{ columns: sortingColumns, onSort }}
   rowHeightsOptions={rowHeightsOptions}
-  pagination={{
-    ...pagination,
-    pageSizeOptions: [50, 250, 1000],
-    onChangeItemsPerPage: onChangeItemsPerPage,
-    onChangePage: onChangePage,
-  }}
 />
 `;
 
@@ -248,15 +230,15 @@ export const DataGridRowHeightOptionsExample = {
           </EuiCodeBlock>
           <EuiCallOut
             color="warning"
-            title="Disable the row height toolbar control"
+            title="Disabling the row height toolbar control"
           >
-            When using <EuiCode>rowHeights</EuiCode> overrides, we recommend
-            setting{' '}
+            Individual row heights will be overridden by the toolbar display
+            controls. If you do not want users to be able to override specific
+            row heights, set{' '}
             <EuiCode>
               toolbarVisibility.showDisplaySelector.allowRowHeight
             </EuiCode>{' '}
-            to <EuiCode>false</EuiCode>, as users will otherwise be confused
-            when switching row heights does not affect specific overriden rows.
+            to <EuiCode>false</EuiCode>.
           </EuiCallOut>
         </Fragment>
       ),

src-docs/src/views/datagrid/row_height_fixed.tsx

@@ -215,9 +215,6 @@ export default () => {
         inMemory={{ level: 'sorting' }}
         sorting={{ columns: sortingColumns, onSort }}
         rowHeightsOptions={rowHeightsOptions}
-        toolbarVisibility={{
-          showDisplaySelector: { allowRowHeight: false },
-        }}
         virtualizationOptions={{
           // rough average of the cell heights in the example
           // accurately setting this smooths out the scrolling experience

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);
+        });
       });
     });
   });
@@ -349,42 +399,52 @@ describe('useDataGridDisplaySelector', () => {
       return JSON.parse(component.find('[data-test-subj="output"]').text());
     };
 
-    it('returns an object of rowHeightsOptions with user overrides', () => {
-      const component = shallow(
-        <MockComponent initialRowHeightsOptions={{ lineHeight: '2em' }} />
-      );
+    describe('returns an object of rowHeightsOptions with user overrides', () => {
+      it('overrides `rowHeights` and `defaultHeight`', () => {
+        const component = shallow(
+          <MockComponent
+            initialRowHeightsOptions={{
+              rowHeights: { 0: 100 },
+              defaultHeight: 50,
+            }}
+          />
+        );
 
-      setRowHeight(component, 'lineCount');
-      setLineCount(component, 5);
+        setRowHeight(component, 'undefined');
 
-      expect(getOutput(component)).toEqual({
-        lineHeight: '2em',
-        defaultHeight: { lineCount: 5 },
+        expect(getOutput(component)).toEqual({
+          rowHeights: {},
+          defaultHeight: undefined,
+        });
       });
-    });
 
-    it('handles undefined rowHeightsObjects (from the developer)', () => {
-      const component = shallow(
-        <MockComponent initialRowHeightsOptions={undefined} />
-      );
-      expect(getOutput(component)).toEqual({});
+      it('does not override other rowHeightsOptions properties', () => {
+        const component = shallow(
+          <MockComponent initialRowHeightsOptions={{ lineHeight: '2em' }} />
+        );
 
-      setRowHeight(component, 'auto');
+        setRowHeight(component, 'lineCount');
+        setLineCount(component, 5);
 
-      expect(getOutput(component)).toEqual({
-        defaultHeight: 'auto',
+        expect(getOutput(component)).toEqual({
+          lineHeight: '2em',
+          defaultHeight: { lineCount: 5 },
+          rowHeights: {},
+        });
       });
     });
 
-    it('handles undefined rowHeightsOptions (from the user)', () => {
+    it('handles undefined initialRowHeightsOptions', () => {
       const component = shallow(
-        <MockComponent initialRowHeightsOptions={{ lineHeight: '2em' }} />
+        <MockComponent initialRowHeightsOptions={undefined} />
       );
+      expect(getOutput(component)).toEqual({});
 
-      setRowHeight(component, 'undefined');
+      setRowHeight(component, 'auto');
 
       expect(getOutput(component)).toEqual({
-        lineHeight: '2em',
+        defaultHeight: 'auto',
+        rowHeights: {},
       });
     });
   });