Fix Saved Objects item count and table filtering (#21574) (#21620)

* Remove implementation detail assertion from objects table test. * Reset selection state when table state or query state changes. * Remove total count from title.
elastic · Aug 3, 2018 · 7aa7511 · 7aa7511
1 parent 0f12ecf
commit 7aa7511
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 101 deletions.
diff --git a/...tions/objects/components/objects_table/__tests__/__snapshots__/objects_table.test.js.snap b/...tions/objects/components/objects_table/__tests__/__snapshots__/objects_table.test.js.snap
@@ -55,7 +55,7 @@ exports[`ObjectsTable export should allow the user to choose when exporting all
   defaultFocusedButton="confirm"
   onCancel={[Function]}
   onConfirm={[Function]}
-  title="Export All"
+  title="Export 4 objects"
 >
   <p>
     Select which types to export. The number in parentheses indicates how many of this type are available to export.
@@ -142,10 +142,10 @@ exports[`ObjectsTable should render normally 1`] = `
       verticalPosition="center"
     >
       <Header
+        filteredCount={4}
         onExportAll={[Function]}
         onImport={[Function]}
         onRefresh={[Function]}
-        totalCount={4}
       />
       <EuiSpacer
         size="xs"

diff --git a/...blic/management/sections/objects/components/objects_table/__tests__/objects_table.test.js b/...blic/management/sections/objects/components/objects_table/__tests__/objects_table.test.js
@@ -425,7 +425,6 @@ describe('ObjectsTable', () => {
       expect(mockSavedObjectsClient.delete).toHaveBeenCalledWith(mockSavedObjects[0].type, mockSavedObjects[0].id);
       expect(mockSavedObjectsClient.delete).toHaveBeenCalledWith(mockSavedObjects[1].type, mockSavedObjects[1].id);
       expect(component.state('selectedSavedObjects').length).toBe(0);
-      expect(defaultProps.savedObjectsClient.find.mock.calls.length).toBe(2);
     });
   });
 });
diff --git a/...ts/components/objects_table/components/header/__tests__/__snapshots__/header.test.js.snap b/...ts/components/objects_table/components/header/__tests__/__snapshots__/header.test.js.snap
@@ -15,42 +15,13 @@ exports[`Header should render normally 1`] = `
       component="div"
       grow={false}
     >
-      <EuiFlexGroup
-        alignItems="baseline"
-        component="div"
-        direction="row"
-        gutterSize="m"
-        justifyContent="flexStart"
-        responsive={false}
-        wrap={false}
+      <EuiTitle
+        size="m"
       >
-        <EuiFlexItem
-          component="div"
-          grow={false}
-        >
-          <EuiTitle
-            size="m"
-          >
-            <h1>
-              Saved Objects
-            </h1>
-          </EuiTitle>
-        </EuiFlexItem>
-        <EuiFlexItem
-          component="div"
-          grow={true}
-        >
-          <EuiTextColor
-            color="subdued"
-            component="span"
-          >
-            <p>
-              4
-               in total
-            </p>
-          </EuiTextColor>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+        <h1>
+          Saved Objects
+        </h1>
+      </EuiTitle>
     </EuiFlexItem>
     <EuiFlexItem
       component="div"
@@ -78,7 +49,10 @@ exports[`Header should render normally 1`] = `
             size="s"
             type="button"
           >
-            Export Everything
+            Export 
+            2
+             
+            objects
           </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem

diff --git a/...ment/sections/objects/components/objects_table/components/header/__tests__/header.test.js b/...ment/sections/objects/components/objects_table/components/header/__tests__/header.test.js
@@ -29,6 +29,7 @@ describe('Header', () => {
       onImport: () => {},
       onRefresh: () => {},
       totalCount: 4,
+      filteredCount: 2,
     };
 
     const component = shallow(

diff --git a/...a/public/management/sections/objects/components/objects_table/components/header/header.js b/...a/public/management/sections/objects/components/objects_table/components/header/header.js
@@ -18,6 +18,7 @@
  */
 
 import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
 
 import {
   EuiSpacer,
@@ -33,24 +34,16 @@ export const Header = ({
   onExportAll,
   onImport,
   onRefresh,
-  totalCount,
+  filteredCount,
 }) => (
   <Fragment>
     <EuiFlexGroup justifyContent="spaceBetween" alignItems="baseline">
       <EuiFlexItem grow={false}>
-        <EuiFlexGroup alignItems="baseline" gutterSize="m" responsive={false}>
-          <EuiFlexItem grow={false}>
-            <EuiTitle>
-              <h1>Saved Objects</h1>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiTextColor color="subdued">
-              <p>{totalCount} in total</p>
-            </EuiTextColor>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <EuiTitle>
+          <h1>Saved Objects</h1>
+        </EuiTitle>
       </EuiFlexItem>
+
       <EuiFlexItem grow={false}>
         <EuiFlexGroup alignItems="baseline" gutterSize="m" responsive={false}>
           <EuiFlexItem grow={false}>
@@ -60,7 +53,7 @@ export const Header = ({
               data-test-subj="exportAllObjects"
               onClick={onExportAll}
             >
-              Export Everything
+              Export {filteredCount} {filteredCount === 1 ? 'object' : 'objects'}
             </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
@@ -99,3 +92,10 @@ export const Header = ({
     <EuiSpacer size="m"/>
   </Fragment>
 );
+
+Header.propTypes = {
+  onExportAll: PropTypes.func.isRequired,
+  onImport: PropTypes.func.isRequired,
+  onRefresh: PropTypes.func.isRequired,
+  filteredCount: PropTypes.number.isRequired,
+};