[PR feedback] Conditionally render reset button

elastic · Dec 2, 2021 · 9b70058 · 9b70058
1 parent 95d10c4
commit 9b70058
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 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
@@ -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
@@ -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
@@ -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;