From ee1469d3feca1676e4426d28761364833bcdfb67 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 30 Nov 2021 14:22:34 -0800
Subject: [PATCH 01/11] Unset specific `rowHeights` when using the row height
 switcher

+ lineCount changes to also unset rowHeights overrides
---
 .../datagrid_height_options_example.js        | 10 ++--
 .../controls/display_selector.test.tsx        | 54 +++++++++++--------
 .../datagrid/controls/display_selector.tsx    | 15 ++++--
 3 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/src-docs/src/views/datagrid/datagrid_height_options_example.js b/src-docs/src/views/datagrid/datagrid_height_options_example.js
index fcaf9d43aa81..16334ff735f7 100644
--- a/src-docs/src/views/datagrid/datagrid_height_options_example.js
+++ b/src-docs/src/views/datagrid/datagrid_height_options_example.js
@@ -248,15 +248,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>
       ),
diff --git a/src/components/datagrid/controls/display_selector.test.tsx b/src/components/datagrid/controls/display_selector.test.tsx
index 88b699a8d014..2c9d2e2fb9ff 100644
--- a/src/components/datagrid/controls/display_selector.test.tsx
+++ b/src/components/datagrid/controls/display_selector.test.tsx
@@ -349,42 +349,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: {},
       });
     });
   });
diff --git a/src/components/datagrid/controls/display_selector.tsx b/src/components/datagrid/controls/display_selector.tsx
index bafc4591c460..f2002573046e 100644
--- a/src/components/datagrid/controls/display_selector.tsx
+++ b/src/components/datagrid/controls/display_selector.tsx
@@ -125,14 +125,16 @@ export const useDataGridDisplaySelector = (
   );
   const setRowHeight = useCallback(
     (option: string) => {
-      let rowHeightsOptions: EuiDataGridRowHeightsOptions | undefined;
+      const rowHeightsOptions: EuiDataGridRowHeightsOptions = {
+        rowHeights: {}, // Unset all row-specific heights
+      };
 
       if (option === 'auto') {
-        rowHeightsOptions = { defaultHeight: 'auto' };
+        rowHeightsOptions.defaultHeight = 'auto';
       } else if (option === 'lineCount') {
-        rowHeightsOptions = { defaultHeight: { lineCount } };
+        rowHeightsOptions.defaultHeight = { lineCount };
       } else {
-        rowHeightsOptions = { defaultHeight: undefined };
+        rowHeightsOptions.defaultHeight = undefined;
       }
 
       setRowHeightSelection(option);
@@ -145,7 +147,10 @@ export const useDataGridDisplaySelector = (
     if (newLineCount < 1) return; // Don't let users set a 0 or negative line count
 
     setLineCount(newLineCount);
-    setUserRowHeightsOptions({ defaultHeight: { lineCount: newLineCount } });
+    setUserRowHeightsOptions({
+      rowHeights: {}, // Unset all row-specific line counts
+      defaultHeight: { lineCount: newLineCount },
+    });
   }, []);
 
   // merge the developer-specified styles with any user overrides

From e5c1a6c81dd296677973fd83289c869a21ab225f Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 30 Nov 2021 14:23:23 -0800
Subject: [PATCH 02/11] Fix rowHeights snippet to actually include rowHeights

+ improve snippet label
---
 .../src/views/datagrid/datagrid_height_options_example.js   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/datagrid/datagrid_height_options_example.js b/src-docs/src/views/datagrid/datagrid_height_options_example.js
index 16334ff735f7..f7918d6b68c4 100644
--- a/src-docs/src/views/datagrid/datagrid_height_options_example.js
+++ b/src-docs/src/views/datagrid/datagrid_height_options_example.js
@@ -61,12 +61,16 @@ 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}

From 8630d407cd47c0739e0716ff711e984cfdee724a Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 30 Nov 2021 14:24:13 -0800
Subject: [PATCH 03/11] [??] Remove toolbarVisibility.showDisplaySelector
 configs

- to allow for testing
- also since this is documented behavior, I don't know if need this in the actual example anymore - but if people prefer it, I can revert this commit
---
 src-docs/src/views/datagrid/datagrid_height_options_example.js | 3 ---
 src-docs/src/views/datagrid/row_height_fixed.tsx               | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/src-docs/src/views/datagrid/datagrid_height_options_example.js b/src-docs/src/views/datagrid/datagrid_height_options_example.js
index f7918d6b68c4..e368abb23b70 100644
--- a/src-docs/src/views/datagrid/datagrid_height_options_example.js
+++ b/src-docs/src/views/datagrid/datagrid_height_options_example.js
@@ -79,9 +79,6 @@ const rowHeightsFullSnippet = `const rowHeightsOptions = useMemo(
   inMemory={{ level: 'sorting' }}
   sorting={{ columns: sortingColumns, onSort }}
   rowHeightsOptions={rowHeightsOptions}
-  toolbarVisibility={{
-    showDisplaySelelector: { allowRowHeight: false },
-  }}
   pagination={{
     ...pagination,
     pageSizeOptions: [50, 250, 1000],
diff --git a/src-docs/src/views/datagrid/row_height_fixed.tsx b/src-docs/src/views/datagrid/row_height_fixed.tsx
index ff6230e1e6aa..91df500a1ca1 100644
--- a/src-docs/src/views/datagrid/row_height_fixed.tsx
+++ b/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

From e0e18dfe0c3bb32e12626e185732789a37c0d618 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 30 Nov 2021 14:27:36 -0800
Subject: [PATCH 04/11] [Misc documentation cleanup] Remove unrequired props
 from snippets

- to help focus more on rowHeightsOptions and more easily provide a bare minimum example
---
 .../datagrid_height_options_example.js        | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/src-docs/src/views/datagrid/datagrid_height_options_example.js b/src-docs/src/views/datagrid/datagrid_height_options_example.js
index e368abb23b70..76d5dfc2d410 100644
--- a/src-docs/src/views/datagrid/datagrid_height_options_example.js
+++ b/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}
 />
@@ -74,17 +73,8 @@ const rowHeightsFullSnippet = `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,
-  }}
 />
 `;
 
@@ -114,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,
-  }}
 />
 `;
 

From 9eca2e38fc5b2aef88d56014ae06aded4b3ae58b Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Wed, 1 Dec 2021 08:47:48 -0800
Subject: [PATCH 05/11] 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`] = `
 <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>
 `;
diff --git a/src/components/datagrid/controls/display_selector.test.tsx b/src/components/datagrid/controls/display_selector.test.tsx
index 2c9d2e2fb9ff..ef804befbad3 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(<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);
+        });
       });
     });
   });
diff --git a/src/components/datagrid/controls/display_selector.tsx b/src/components/datagrid/controls/display_selector.tsx
index f2002573046e..8c13e30907ac 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) => {
@@ -153,7 +163,7 @@ export const useDataGridDisplaySelector = (
     });
   }, []);
 
-  // merge the developer-specified styles with any user overrides
+  // Merge the developer-specified configurations with user overrides
   const gridStyles = useMemo(() => {
     return {
       ...initialStyles,
@@ -168,10 +178,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 ? (
@@ -311,6 +334,15 @@ export const useDataGridDisplaySelector = (
             )}
           </EuiI18n>
         )}
+        <EuiPopoverFooter>
+          <EuiButtonEmpty
+            size="xs"
+            onClick={resetToInitialState}
+            data-test-subj="resetDisplaySelector"
+          >
+            {resetButtonLabel}
+          </EuiButtonEmpty>
+        </EuiPopoverFooter>
       </EuiPopover>
     ) : null;
 

From 9b7005895c52a05c1d97c62dae59cf894116aafb Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 2 Dec 2021 09:57:05 -0800
Subject: [PATCH 06/11] [PR feedback] Conditionally render reset button

---
 .../display_selector.test.tsx.snap            | 11 +-----
 .../controls/display_selector.test.tsx        | 23 ++++++++++++-
 .../datagrid/controls/display_selector.tsx    | 34 ++++++++++++++-----
 3 files changed, 48 insertions(+), 20 deletions(-)

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 740b714c685b..ac16b5d0c76c 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 & reset display settings 1`] = `
+exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/popover allowing users to customize display settings 1`] = `
 <Fragment>
   <EuiPopover
     anchorPosition="downRight"
@@ -73,15 +73,6 @@ 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>
 `;
diff --git a/src/components/datagrid/controls/display_selector.test.tsx b/src/components/datagrid/controls/display_selector.test.tsx
index 1b10de267628..a4d3f5d66ac3 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 & reset display settings', () => {
+    it('renders a toolbar button/popover allowing users to customize display settings', () => {
       const component = shallow(<MockComponent />);
       expect(component).toMatchSnapshot();
     });
@@ -366,6 +366,27 @@ describe('useDataGridDisplaySelector', () => {
         });
       });
     });
+
+    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', () => {
diff --git a/src/components/datagrid/controls/display_selector.tsx b/src/components/datagrid/controls/display_selector.tsx
index 270d58fb2966..f8bf15a944bd 100644
--- a/src/components/datagrid/controls/display_selector.tsx
+++ b/src/components/datagrid/controls/display_selector.tsx
@@ -199,6 +199,20 @@ export const useDataGridDisplaySelector = (
     setLineCount(initialLineCount);
   }, [initialDensity, initialRowHeight, initialLineCount]);
 
+  const showResetButton = useMemo(() => {
+    if (initialDensity !== gridDensity) return true;
+    if (initialRowHeight !== rowHeightSelection) return true;
+    if (initialLineCount !== lineCount) return true;
+    return false;
+  }, [
+    initialDensity,
+    gridDensity,
+    initialRowHeight,
+    rowHeightSelection,
+    initialLineCount,
+    lineCount,
+  ]);
+
   const buttonLabel = useEuiI18n(
     'euiDisplaySelector.buttonText',
     'Display options'
@@ -346,15 +360,17 @@ export const useDataGridDisplaySelector = (
             )}
           </EuiI18n>
         )}
-        <EuiPopoverFooter>
-          <EuiButtonEmpty
-            size="xs"
-            onClick={resetToInitialState}
-            data-test-subj="resetDisplaySelector"
-          >
-            {resetButtonLabel}
-          </EuiButtonEmpty>
-        </EuiPopoverFooter>
+        {showResetButton && (
+          <EuiPopoverFooter>
+            <EuiButtonEmpty
+              size="xs"
+              onClick={resetToInitialState}
+              data-test-subj="resetDisplaySelector"
+            >
+              {resetButtonLabel}
+            </EuiButtonEmpty>
+          </EuiPopoverFooter>
+        )}
       </EuiPopover>
     ) : null;
 

From 875444db6cab7150214c5c0a7392327aab1ed040 Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Thu, 2 Dec 2021 12:46:37 -0800
Subject: [PATCH 07/11] [PR feedback] Right align button

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 .../datagrid/controls/display_selector.tsx    | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/datagrid/controls/display_selector.tsx b/src/components/datagrid/controls/display_selector.tsx
index f8bf15a944bd..a8f9b5c1c455 100644
--- a/src/components/datagrid/controls/display_selector.tsx
+++ b/src/components/datagrid/controls/display_selector.tsx
@@ -362,13 +362,18 @@ export const useDataGridDisplaySelector = (
         )}
         {showResetButton && (
           <EuiPopoverFooter>
-            <EuiButtonEmpty
-              size="xs"
-              onClick={resetToInitialState}
-              data-test-subj="resetDisplaySelector"
-            >
-              {resetButtonLabel}
-            </EuiButtonEmpty>
+            <EuiFlexGroup justifyContent="flexEnd" responsive={false}>
+              <EuiFlexItem>
+                <EuiButtonEmpty
+                  flush="both"
+                  size="xs"
+                  onClick={resetToInitialState}
+                  data-test-subj="resetDisplaySelector"
+                >
+                  {resetButtonLabel}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            <EuiFlexGroup>
           </EuiPopoverFooter>
         )}
       </EuiPopover>

From a1441d8e63203fbc6ccacf41e7763b325d010cf5 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Fri, 3 Dec 2021 09:26:34 -0500
Subject: [PATCH 08/11] Fix closing tag

---
 src/components/datagrid/controls/display_selector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/datagrid/controls/display_selector.tsx b/src/components/datagrid/controls/display_selector.tsx
index a8f9b5c1c455..18f87b0f9e8a 100644
--- a/src/components/datagrid/controls/display_selector.tsx
+++ b/src/components/datagrid/controls/display_selector.tsx
@@ -373,7 +373,7 @@ export const useDataGridDisplaySelector = (
                   {resetButtonLabel}
                 </EuiButtonEmpty>
               </EuiFlexItem>
-            <EuiFlexGroup>
+            </EuiFlexGroup>
           </EuiPopoverFooter>
         )}
       </EuiPopover>

From ee576d09636409e673b2611bd03631e3585c0359 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 3 Dec 2021 09:03:25 -0800
Subject: [PATCH 09/11] fix imports

---
 src/components/datagrid/controls/display_selector.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/datagrid/controls/display_selector.tsx b/src/components/datagrid/controls/display_selector.tsx
index 18f87b0f9e8a..4da514133372 100644
--- a/src/components/datagrid/controls/display_selector.tsx
+++ b/src/components/datagrid/controls/display_selector.tsx
@@ -13,6 +13,7 @@ import { EuiI18n, useEuiI18n } from '../../i18n';
 import { EuiPopover, EuiPopoverFooter } from '../../popover';
 import { EuiButtonIcon, EuiButtonGroup, EuiButtonEmpty } from '../../button';
 import { EuiFormRow, EuiRange } from '../../form';
+import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiToolTip } from '../../tool_tip';
 
 import {

From f7b3a922f26051e1b00f882362b193a15aedc9ed Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Fri, 3 Dec 2021 11:16:00 -0800
Subject: [PATCH 10/11] Update
 src/components/datagrid/controls/display_selector.tsx

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 .../datagrid/controls/display_selector.tsx     | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/datagrid/controls/display_selector.tsx b/src/components/datagrid/controls/display_selector.tsx
index 4da514133372..177841dc22c8 100644
--- a/src/components/datagrid/controls/display_selector.tsx
+++ b/src/components/datagrid/controls/display_selector.tsx
@@ -365,14 +365,16 @@ export const useDataGridDisplaySelector = (
           <EuiPopoverFooter>
             <EuiFlexGroup justifyContent="flexEnd" responsive={false}>
               <EuiFlexItem>
-                <EuiButtonEmpty
-                  flush="both"
-                  size="xs"
-                  onClick={resetToInitialState}
-                  data-test-subj="resetDisplaySelector"
-                >
-                  {resetButtonLabel}
-                </EuiButtonEmpty>
+                <div>
+                  <EuiButtonEmpty
+                    flush="both"
+                    size="xs"
+                    onClick={resetToInitialState}
+                    data-test-subj="resetDisplaySelector"
+                  >
+                    {resetButtonLabel}
+                  </EuiButtonEmpty>
+                </div>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiPopoverFooter>

From 9b954769af0981cfc0d3560d0d07e1ed71b06bc4 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 3 Dec 2021 15:42:20 -0500
Subject: [PATCH 11/11] No `grow`

---
 src/components/datagrid/controls/display_selector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/datagrid/controls/display_selector.tsx b/src/components/datagrid/controls/display_selector.tsx
index 177841dc22c8..d7be1d2d0af5 100644
--- a/src/components/datagrid/controls/display_selector.tsx
+++ b/src/components/datagrid/controls/display_selector.tsx
@@ -364,7 +364,7 @@ export const useDataGridDisplaySelector = (
         {showResetButton && (
           <EuiPopoverFooter>
             <EuiFlexGroup justifyContent="flexEnd" responsive={false}>
-              <EuiFlexItem>
+              <EuiFlexItem grow={false}>
                 <div>
                   <EuiButtonEmpty
                     flush="both"