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

* Specify widths on table columns to support long field names
2018-03-26 12:08:53 -07:00 · 2018-03-26 12:08:53 -07:00 · 1038070430
parent 9f803a6590
commit 1038070430
6 changed files with 76 additions and 146 deletions
--- 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",
--- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/indexed_fields_table/components/table/tests/snapshots/table.test.js.snap
+++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/indexed_fields_table/components/table/tests/snapshots/table.test.js.snap
@ -1,84 +1,34 @@
 // 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`] = `
@ -86,13 +36,16 @@ exports[`Table should render normally 1`] = `
  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}
+<span>
+  timestamp
+  <span>
+     
+    <EuiToolTip
+      content="This field represents the time that events occurred."
+      position="top"
    >
-      timestamp
-    </EuiFlexItem>
-    <EuiFlexItem
-      component="div"
-      grow={true}
-    >
-      <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>
 `;
--- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/indexed_fields_table/components/table/table.js
+++ b/src/core_plugins/kibana/public/management/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',
      }
    ];

--- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/tests/snapshots/table.test.js.snap
+++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_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",
      },
    ]
  }
--- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/table.js
+++ b/src/core_plugins/kibana/public/management/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 = {
--- 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"