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

CHANGELOG.md

@@ -5,6 +5,7 @@
 - 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 `onChange` callbacks to `EuiDataGrid`'s `gridStyle` and `rowHeightOptions` settings ([#5424](https://github.com/elastic/eui/pull/5424))
+- 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

@@ -42,7 +42,6 @@ const lineHeightFullSnippet = `const rowHeightsOptions = useMemo(
   columns={columns}
   columnVisibility={{ visibleColumns, setVisibleColumns }}
   rowCount={rowCount}
-  height={400}
   renderCellValue={renderCellValue}
   rowHeightsOptions={rowHeightsOptions}
 />
@@ -62,29 +61,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,
-  }}
 />
 `;
 
@@ -114,17 +105,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,
-  }}
 />
 `;
 
@@ -267,15 +249,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/display_selector.test.tsx

@@ -154,6 +154,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', () => {
@@ -183,6 +199,7 @@ describe('useDataGridDisplaySelector', () => {
         component.find('[data-test-subj="auto"]').simulate('change');
 
         expect(onRowHeightChange).toHaveBeenCalledWith({
+          rowHeights: {},
           defaultHeight: 'auto',
           lineHeight: '3',
         });
@@ -243,6 +260,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
@@ -313,8 +346,47 @@ 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);
+        });
       });
     });
+
+    it('renders a reset button only when the user changes from the current settings', () => {
+      const component = mount(<MockComponent gridStyles={startingStyles} />);
+      openPopover(component);
+      expect(
+        component.find('[data-test-subj="resetDisplaySelector"]').exists()
+      ).toBe(false);
+
+      component.find('[data-test-subj="expanded"]').simulate('change');
+      component.find('[data-test-subj="auto"]').simulate('change');
+      expect(
+        component.find('[data-test-subj="resetDisplaySelector"]').exists()
+      ).toBe(true);
+
+      // Should hide the reset button again when changing back to the initial configuration
+      component.find('[data-test-subj="normal"]').simulate('change');
+      component.find('[data-test-subj="undefined"]').simulate('change');
+      expect(
+        component.find('[data-test-subj="resetDisplaySelector"]').exists()
+      ).toBe(false);
+    });
   });
 
   describe('gridStyles', () => {
@@ -384,42 +456,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: {},
       });
     });
   });