Specify widths on table columns to support long field names (#17344) (#…

…17395) * Specify widths on table columns to support long field names
elastic · Mar 26, 2018 · 1038070 · 1038070
1 parent 9f803a6
commit 1038070
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 146 deletions.
diff --git a/package.json b/package.json
@@ -77,7 +77,7 @@
     "url": "https://github.com/elastic/kibana.git"
   },
   "dependencies": {
-    "@elastic/eui": "0.0.33",
+    "@elastic/eui": "0.0.34",
     "@elastic/filesaver": "1.1.2",
     "@elastic/numeral": "2.3.1",
     "@elastic/ui-ace": "0.2.3",

diff --git a/..._pattern/indexed_fields_table/components/table/__tests__/__snapshots__/table.test.js.snap b/..._pattern/indexed_fields_table/components/table/__tests__/__snapshots__/table.test.js.snap
@@ -1,98 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Table should render conflicting type 1`] = `
-<div
-  data-test-subj="indexedFieldType"
->
-  <EuiFlexGroup
-    alignItems="center"
-    component="div"
-    gutterSize="s"
-    justifyContent="flexStart"
-    responsive={true}
-    wrap={false}
-  >
-    <EuiFlexItem
-      component="div"
-      grow={false}
+<span>
+  conflict
+  <span>
+     
+    <EuiToolTip
+      content="The type of this field changes across indices. It is unavailable for many analysis functions."
+      position="top"
     >
-      conflict
-    </EuiFlexItem>
-    <EuiFlexItem
-      component="div"
-      grow={true}
-    >
-      <EuiToolTip
-        content="The type of this field changes across indices. It is unavailable for many analysis functions."
-        position="top"
-      >
-        <EuiIcon
-          color="warning"
-          size="m"
-          type="alert"
-        />
-      </EuiToolTip>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-</div>
+      <EuiIcon
+        color="warning"
+        size="m"
+        type="alert"
+      />
+    </EuiToolTip>
+  </span>
+</span>
 `;
 
 exports[`Table should render normal field name 1`] = `
-<div
-  data-test-subj="indexedFieldName"
->
-  <EuiFlexGroup
-    alignItems="center"
-    component="div"
-    gutterSize="s"
-    justifyContent="flexStart"
-    responsive={true}
-    wrap={false}
-  >
-    <EuiFlexItem
-      component="div"
-      grow={false}
-    >
-      Elastic
-    </EuiFlexItem>
-  </EuiFlexGroup>
-</div>
+<span>
+  Elastic
+</span>
 `;
 
 exports[`Table should render normal type 1`] = `
-<div
-  data-test-subj="indexedFieldType"
->
-  <EuiFlexGroup
-    alignItems="center"
-    component="div"
-    gutterSize="s"
-    justifyContent="flexStart"
-    responsive={true}
-    wrap={false}
-  >
-    <EuiFlexItem
-      component="div"
-      grow={false}
-    >
-      string
-    </EuiFlexItem>
-  </EuiFlexGroup>
-</div>
+<span>
+  string
+</span>
 `;
 
 exports[`Table should render normally 1`] = `
 <EuiInMemoryTable
   columns={
     Array [
       Object {
+        "data-test-subj": "indexedFieldName",
         "dataType": "string",
         "field": "displayName",
         "name": "Name",
         "render": [Function],
         "sortable": true,
+        "width": "38%",
       },
       Object {
+        "data-test-subj": "indexedFieldType",
         "dataType": "string",
         "field": "type",
         "name": "Type",
@@ -140,6 +93,7 @@ exports[`Table should render normally 1`] = `
           },
         ],
         "name": "",
+        "width": "40px",
       },
     ]
   }
@@ -191,38 +145,20 @@ exports[`Table should render the boolean template (true) 1`] = `
 `;
 
 exports[`Table should render timestamp field name 1`] = `
-<div
-  data-test-subj="indexedFieldName"
->
-  <EuiFlexGroup
-    alignItems="center"
-    component="div"
-    gutterSize="s"
-    justifyContent="flexStart"
-    responsive={true}
-    wrap={false}
-  >
-    <EuiFlexItem
-      component="div"
-      grow={false}
-    >
-      timestamp
-    </EuiFlexItem>
-    <EuiFlexItem
-      component="div"
-      grow={true}
+<span>
+  timestamp
+  <span>
+     
+    <EuiToolTip
+      content="This field represents the time that events occurred."
+      position="top"
     >
-      <EuiToolTip
-        content="This field represents the time that events occurred."
-        position="top"
-      >
-        <EuiIcon
-          color="primary"
-          size="m"
-          type="clock"
-        />
-      </EuiToolTip>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-</div>
+      <EuiIcon
+        color="primary"
+        size="m"
+        type="clock"
+      />
+    </EuiToolTip>
+  </span>
+</span>
 `;
diff --git a/...gement/sections/indices/edit_index_pattern/indexed_fields_table/components/table/table.js b/...gement/sections/indices/edit_index_pattern/indexed_fields_table/components/table/table.js
@@ -2,8 +2,6 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiIcon,
   EuiInMemoryTable,
   EuiToolTip,
@@ -22,39 +20,33 @@ export class Table extends PureComponent {
 
   renderFieldName(name, isTimeField) {
     return (
-      <div data-test-subj="indexedFieldName">
-        <EuiFlexGroup alignItems="center" gutterSize="s">
-          <EuiFlexItem grow={false}>
-            {name}
-          </EuiFlexItem>
-          {isTimeField ? (
-            <EuiFlexItem>
-              <EuiToolTip content="This field represents the time that events occurred.">
-                <EuiIcon type="clock" color="primary" />
-              </EuiToolTip>
-            </EuiFlexItem>
-          ) : ''}
-        </EuiFlexGroup>
-      </div>
+      <span>
+        {name}
+        {isTimeField ? (
+          <span>
+            &nbsp;
+            <EuiToolTip content="This field represents the time that events occurred.">
+              <EuiIcon type="clock" color="primary" />
+            </EuiToolTip>
+          </span>
+        ) : ''}
+      </span>
     );
   }
 
   renderFieldType(type, isConflict) {
     return (
-      <div data-test-subj="indexedFieldType">
-        <EuiFlexGroup alignItems="center" gutterSize="s">
-          <EuiFlexItem grow={false}>
-            {type}
-          </EuiFlexItem>
-          {isConflict ? (
-            <EuiFlexItem>
-              <EuiToolTip content="The type of this field changes across indices. It is unavailable for many analysis functions.">
-                <EuiIcon type="alert" color="warning" />
-              </EuiToolTip>
-            </EuiFlexItem>
-          ) : ''}
-        </EuiFlexGroup>
-      </div>
+      <span>
+        {type}
+        {isConflict ? (
+          <span>
+            &nbsp;
+            <EuiToolTip content="The type of this field changes across indices. It is unavailable for many analysis functions.">
+              <EuiIcon type="alert" color="warning" />
+            </EuiToolTip>
+          </span>
+        ) : ''}
+      </span>
     );
   }
 
@@ -75,6 +67,8 @@ export class Table extends PureComponent {
         render: (value) => {
           return this.renderFieldName(value, indexPattern.timeFieldName === value);
         },
+        width: '38%',
+        'data-test-subj': 'indexedFieldName',
       },
       {
         field: 'type',
@@ -84,6 +78,7 @@ export class Table extends PureComponent {
         render: (value) => {
           return this.renderFieldType(value, value === 'conflict');
         },
+        'data-test-subj': 'indexedFieldType',
       },
       {
         field: 'format',
@@ -126,6 +121,7 @@ export class Table extends PureComponent {
             type: 'icon',
           },
         ],
+        width: '40px',
       }
     ];
 

diff --git a/...pattern/scripted_fields_table/components/table/__tests__/__snapshots__/table.test.js.snap b/...pattern/scripted_fields_table/components/table/__tests__/__snapshots__/table.test.js.snap
@@ -10,13 +10,14 @@ exports[`Table should render normally 1`] = `
         "field": "displayName",
         "name": "Name",
         "sortable": true,
+        "width": "38%",
       },
       Object {
+        "data-test-subj": "scriptedFieldLang",
         "dataType": "string",
         "description": "Language used for the field",
         "field": "lang",
         "name": "Lang",
-        "render": [Function],
         "sortable": true,
       },
       Object {
@@ -50,6 +51,7 @@ exports[`Table should render normally 1`] = `
           },
         ],
         "name": "",
+        "width": "40px",
       },
     ]
   }

diff --git a/...ement/sections/indices/edit_index_pattern/scripted_fields_table/components/table/table.js b/...ement/sections/indices/edit_index_pattern/scripted_fields_table/components/table/table.js
@@ -38,19 +38,14 @@ export class Table extends PureComponent {
       description: `Name of the field`,
       dataType: 'string',
       sortable: true,
+      width: '38%',
     }, {
       field: 'lang',
       name: 'Lang',
       description: `Language used for the field`,
       dataType: 'string',
       sortable: true,
-      render: value => {
-        return (
-          <span data-test-subj="scriptedFieldLang">
-            {value}
-          </span>
-        );
-      }
+      'data-test-subj': 'scriptedFieldLang',
     }, {
       field: 'script',
       name: 'Script',
@@ -77,6 +72,7 @@ export class Table extends PureComponent {
         color: 'danger',
         onClick: deleteField,
       }],
+      width: '40px',
     }];
 
     const pagination = {

diff --git a/yarn.lock b/yarn.lock
@@ -87,9 +87,9 @@
   version "0.0.0"
   uid ""
 
-"@elastic/eui@0.0.33":
-  version "0.0.33"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.33.tgz#de30a9301d48644a94e3cec02dd77332a16cd2a9"
+"@elastic/eui@0.0.34":
+  version "0.0.34"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.34.tgz#75266fb39975903d842a7c877db27e1f4ea56a71"
   dependencies:
     brace "^0.10.0"
     classnames "^2.2.5"