Convert EuiTableOfRecords to simpler table component in scripted fiel…

…ds table. (elastic#16901) * Convert EuiTableOfRecords to EuiBasicTable in scripted fields table. * Convert from EuiBasicTable to EuiInMemoryTable. * Fix bug with filtering and show 'no items' message when the filter doens't match any scripted fields.
cjcenizal · Mar 9, 2018 · 95524e7 · 95524e7
1 parent 03d9c42
commit 95524e7
Show file tree

Hide file tree

Showing 13 changed files with 314 additions and 564 deletions.
diff --git a/...x_pattern/scripted_fields_table/__tests__/__snapshots__/scripted_field_table.test.js.snap b/...x_pattern/scripted_fields_table/__tests__/__snapshots__/scripted_field_table.test.js.snap
@@ -2,7 +2,9 @@
 
 exports[`ScriptedFieldsTable should filter based on the lang filter 1`] = `
 <div>
-  <header />
+  <header
+    addScriptedFieldUrl="#"
+  />
   <call-outs
     deprecatedLangsInUse={
       Array [
@@ -11,11 +13,6 @@ exports[`ScriptedFieldsTable should filter based on the lang filter 1`] = `
     }
     painlessDocLink="painlessDocs"
   />
-  <eui-button
-    data-test-subj="addScriptedFieldLink"
-  >
-    Add scripted field
-  </eui-button>
   <eui-spacer
     size="l"
   />
@@ -27,52 +24,33 @@ exports[`ScriptedFieldsTable should filter based on the lang filter 1`] = `
         "getScriptedFields": [Function],
       }
     }
-    model={
-      Object {
-        "criteria": Object {
-          "page": Object {
-            "index": 0,
-            "size": 10,
-          },
-          "sort": Object {
-            "direction": "asc",
-            "field": "name",
-          },
+    items={
+      Array [
+        Object {
+          "lang": "painless",
+          "name": "ScriptedField",
+          "script": "x++",
         },
-        "data": Object {
-          "records": Array [
-            Object {
-              "lang": "painless",
-              "name": "ScriptedField",
-              "script": "x++",
-            },
-            Object {
-              "lang": "painless",
-              "name": "JustATest",
-              "script": "z++",
-            },
-          ],
-          "totalRecordCount": 2,
+        Object {
+          "lang": "painless",
+          "name": "JustATest",
+          "script": "z++",
         },
-      }
+      ]
     }
-    onDataCriteriaChange={[Function]}
   />
 </div>
 `;
 
 exports[`ScriptedFieldsTable should filter based on the query bar 1`] = `
 <div>
-  <header />
+  <header
+    addScriptedFieldUrl="#"
+  />
   <call-outs
     deprecatedLangsInUse={Array []}
     painlessDocLink="painlessDocs"
   />
-  <eui-button
-    data-test-subj="addScriptedFieldLink"
-  >
-    Add scripted field
-  </eui-button>
   <eui-spacer
     size="l"
   />
@@ -84,65 +62,53 @@ exports[`ScriptedFieldsTable should filter based on the query bar 1`] = `
         "getScriptedFields": [Function],
       }
     }
-    model={
-      Object {
-        "criteria": Object {
-          "page": Object {
-            "index": 0,
-            "size": 10,
-          },
-          "sort": Object {
-            "direction": "asc",
-            "field": "name",
-          },
-        },
-        "data": Object {
-          "records": Array [
-            Object {
-              "lang": "painless",
-              "name": "JustATest",
-              "script": "z++",
-            },
-          ],
-          "totalRecordCount": 1,
+    items={
+      Array [
+        Object {
+          "lang": "painless",
+          "name": "JustATest",
+          "script": "z++",
         },
-      }
+      ]
     }
-    onDataCriteriaChange={[Function]}
   />
 </div>
 `;
 
 exports[`ScriptedFieldsTable should hide the table if there are no scripted fields 1`] = `
 <div>
-  <header />
+  <header
+    addScriptedFieldUrl="#"
+  />
   <call-outs
     deprecatedLangsInUse={Array []}
     painlessDocLink="painlessDocs"
   />
-  <eui-button
-    data-test-subj="addScriptedFieldLink"
-  >
-    Add scripted field
-  </eui-button>
   <eui-spacer
     size="l"
   />
+  <Table
+    deleteField={[Function]}
+    editField={[Function]}
+    indexPattern={
+      Object {
+        "getScriptedFields": [Function],
+      }
+    }
+    items={Array []}
+  />
 </div>
 `;
 
 exports[`ScriptedFieldsTable should render normally 1`] = `
 <div>
-  <header />
+  <header
+    addScriptedFieldUrl="#"
+  />
   <call-outs
     deprecatedLangsInUse={Array []}
     painlessDocLink="painlessDocs"
   />
-  <eui-button
-    data-test-subj="addScriptedFieldLink"
-  >
-    Add scripted field
-  </eui-button>
   <eui-spacer
     size="l"
   />
@@ -154,52 +120,33 @@ exports[`ScriptedFieldsTable should render normally 1`] = `
         "getScriptedFields": [Function],
       }
     }
-    model={
-      Object {
-        "criteria": Object {
-          "page": Object {
-            "index": 0,
-            "size": 10,
-          },
-          "sort": Object {
-            "direction": "asc",
-            "field": "name",
-          },
+    items={
+      Array [
+        Object {
+          "lang": "painless",
+          "name": "ScriptedField",
+          "script": "x++",
         },
-        "data": Object {
-          "records": Array [
-            Object {
-              "lang": "painless",
-              "name": "ScriptedField",
-              "script": "x++",
-            },
-            Object {
-              "lang": "painless",
-              "name": "JustATest",
-              "script": "z++",
-            },
-          ],
-          "totalRecordCount": 2,
+        Object {
+          "lang": "painless",
+          "name": "JustATest",
+          "script": "z++",
         },
-      }
+      ]
     }
-    onDataCriteriaChange={[Function]}
   />
 </div>
 `;
 
 exports[`ScriptedFieldsTable should show a delete modal 1`] = `
 <div>
-  <header />
+  <header
+    addScriptedFieldUrl="#"
+  />
   <call-outs
     deprecatedLangsInUse={Array []}
     painlessDocLink="painlessDocs"
   />
-  <eui-button
-    data-test-subj="addScriptedFieldLink"
-  >
-    Add scripted field
-  </eui-button>
   <eui-spacer
     size="l"
   />
@@ -211,36 +158,20 @@ exports[`ScriptedFieldsTable should show a delete modal 1`] = `
         "getScriptedFields": [Function],
       }
     }
-    model={
-      Object {
-        "criteria": Object {
-          "page": Object {
-            "index": 0,
-            "size": 10,
-          },
-          "sort": Object {
-            "direction": "asc",
-            "field": "name",
-          },
+    items={
+      Array [
+        Object {
+          "lang": "painless",
+          "name": "ScriptedField",
+          "script": "x++",
         },
-        "data": Object {
-          "records": Array [
-            Object {
-              "lang": "painless",
-              "name": "ScriptedField",
-              "script": "x++",
-            },
-            Object {
-              "lang": "painless",
-              "name": "JustATest",
-              "script": "z++",
-            },
-          ],
-          "totalRecordCount": 2,
+        Object {
+          "lang": "painless",
+          "name": "JustATest",
+          "script": "z++",
         },
-      }
+      ]
     }
-    onDataCriteriaChange={[Function]}
   />
   <eui-overlay-mask>
     <eui-confirm-modal

diff --git a/...s/indices/edit_index_pattern/scripted_fields_table/__tests__/scripted_field_table.test.js b/...s/indices/edit_index_pattern/scripted_fields_table/__tests__/scripted_field_table.test.js
@@ -4,11 +4,8 @@ import { shallow } from 'enzyme';
 import { ScriptedFieldsTable } from '../scripted_fields_table';
 
 jest.mock('@elastic/eui', () => ({
-  EuiButton: 'eui-button',
-  EuiTableOfRecords: 'eui-table-of-records',
   EuiTitle: 'eui-title',
   EuiText: 'eui-text',
-  EuiButton: 'eui-button',
   EuiHorizontalRule: 'eui-horizontal-rule',
   EuiSpacer: 'eui-spacer',
   EuiCallOut: 'eui-call-out',
@@ -42,7 +39,7 @@ jest.mock('ui/documentation_links', () => ({
 
 const helpers = {
   redirectToRoute: () => {},
-  getRouteHref: () => {},
+  getRouteHref: () => '#',
 };
 
 const indexPattern = {

diff --git a/...ttern/scripted_fields_table/components/header/__tests__/__snapshots__/header.test.js.snap b/...ttern/scripted_fields_table/components/header/__tests__/__snapshots__/header.test.js.snap
@@ -1,21 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Header should render normally 1`] = `
-<div>
-  <EuiTitle
-    size="s"
+<EuiFlexGroup
+  alignItems="center"
+  component="div"
+  gutterSize="l"
+  justifyContent="flexStart"
+  responsive={true}
+  wrap={false}
+>
+  <EuiFlexItem
+    component="div"
+    grow={true}
   >
-    <h3>
-      Scripted fields
-    </h3>
-  </EuiTitle>
-  <EuiText>
-    <p>
-      You can use scripted fields in visualizations and display them in your documents. However, you cannot search scripted fields.
-    </p>
-  </EuiText>
-  <EuiSpacer
-    size="s"
-  />
-</div>
+    <EuiTitle
+      size="s"
+    >
+      <h3>
+        Scripted fields
+      </h3>
+    </EuiTitle>
+    <EuiText>
+      <p>
+        You can use scripted fields in visualizations and display them in your documents. However, you cannot search scripted fields.
+      </p>
+    </EuiText>
+  </EuiFlexItem>
+  <EuiFlexItem
+    component="div"
+    grow={false}
+  >
+    <EuiButton
+      color="primary"
+      data-test-subj="addScriptedFieldLink"
+      fill={false}
+      href=""
+      iconSide="left"
+      type="button"
+    >
+      Add scripted field
+    </EuiButton>
+  </EuiFlexItem>
+</EuiFlexGroup>
 `;
diff --git a/...dices/edit_index_pattern/scripted_fields_table/components/header/__tests__/header.test.js b/...dices/edit_index_pattern/scripted_fields_table/components/header/__tests__/header.test.js
@@ -6,7 +6,7 @@ import { Header } from '../header';
 describe('Header', () => {
   it('should render normally', async () => {
     const component = shallow(
-      <Header/>
+      <Header addScriptedFieldUrl="" />
     );
 
     expect(component).toMatchSnapshot();