Add aria-label attributes to indexed fields table, and use EuiIconTip (#17427) (#17436)

* Add aria-label attributes to indexed fields table, and use EuiIconTip
* Use EUI 0.0.35
* Add `Apache License, Version 2.0` to list

package.json

@@ -77,7 +77,7 @@
     "url": "https://github.com/elastic/kibana.git"
   },
   "dependencies": {
-    "@elastic/eui": "0.0.34",
+    "@elastic/eui": "0.0.35",
     "@elastic/filesaver": "1.1.2",
     "@elastic/numeral": "2.3.1",
     "@elastic/ui-ace": "0.2.3",

src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/indexed_fields_table/components/table/__tests__/__snapshots__/table.test.js.snap

@@ -5,16 +5,12 @@ exports[`Table should render conflicting type 1`] = `
   conflict
   <span>
      
-    <EuiToolTip
+    <EuiIconTip
+      aria-label="Multiple type field"
+      color="warning"
       content="The type of this field changes across indices. It is unavailable for many analysis functions."
-      position="top"
+      type="alert"
-    >
+    />
-      <EuiIcon
-        color="warning"
-        size="m"
-        type="alert"
-      />
-    </EuiToolTip>
   </span>
 </span>
 `;
@@ -135,6 +131,7 @@ exports[`Table should render the boolean template (false) 1`] = `<span />`;
 
 exports[`Table should render the boolean template (true) 1`] = `
 <dot
+  aria-label="Is searchable"
   className="euiIcon euiIcon--medium euiIcon--secondary"
   height="16"
   viewBox="0 0 16 16"
@@ -149,16 +146,12 @@ exports[`Table should render timestamp field name 1`] = `
   timestamp
   <span>
      
-    <EuiToolTip
+    <EuiIconTip
+      aria-label="Primary time field"
+      color="primary"
       content="This field represents the time that events occurred."
-      position="top"
+      type="clock"
-    >
+    />
-      <EuiIcon
-        color="primary"
-        size="m"
-        type="clock"
-      />
-    </EuiToolTip>
   </span>
 </span>
 `;

src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/indexed_fields_table/components/table/table.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import {
   EuiIcon,
   EuiInMemoryTable,
-  EuiToolTip,
+  EuiIconTip,
 } from '@elastic/eui';
 
 export class Table extends PureComponent {
@@ -14,8 +14,8 @@ export class Table extends PureComponent {
     editField: PropTypes.func.isRequired
   }
 
-  renderBooleanTemplate(value) {
+  renderBooleanTemplate(value, label) {
-    return value ? <EuiIcon type="dot" color="secondary" /> : <span/>;
+    return value ? <EuiIcon type="dot" color="secondary" aria-label={label}/> : <span/>;
   }
 
   renderFieldName(name, isTimeField) {
@@ -25,9 +25,12 @@ export class Table extends PureComponent {
         {isTimeField ? (
           <span>
             &nbsp;
-            <EuiToolTip content="This field represents the time that events occurred.">
+            <EuiIconTip
-              <EuiIcon type="clock" color="primary" />
+              type="clock"
-            </EuiToolTip>
+              color="primary"
+              aria-label="Primary time field"
+              content="This field represents the time that events occurred."
+            />
           </span>
         ) : ''}
       </span>
@@ -41,9 +44,12 @@ export class Table extends PureComponent {
         {isConflict ? (
           <span>
             &nbsp;
-            <EuiToolTip content="The type of this field changes across indices. It is unavailable for many analysis functions.">
+            <EuiIconTip
-              <EuiIcon type="alert" color="warning" />
+              type="alert"
-            </EuiToolTip>
+              color="warning"
+              aria-label="Multiple type field"
+              content="The type of this field changes across indices. It is unavailable for many analysis functions."
+            />
           </span>
         ) : ''}
       </span>
@@ -92,7 +98,7 @@ export class Table extends PureComponent {
         description: `These fields can be used in the filter bar`,
         dataType: 'boolean',
         sortable: true,
-        render: this.renderBooleanTemplate,
+        render: (value) => this.renderBooleanTemplate(value, 'Is searchable'),
       },
       {
         field: 'aggregatable',
@@ -100,7 +106,7 @@ export class Table extends PureComponent {
         description: `These fields can be used in visualization aggregations`,
         dataType: 'boolean',
         sortable: true,
-        render: this.renderBooleanTemplate,
+        render: (value) => this.renderBooleanTemplate(value, 'Is aggregatable'),
       },
       {
         field: 'excluded',
@@ -108,7 +114,7 @@ export class Table extends PureComponent {
         description: `Fields that are excluded from _source when it is fetched`,
         dataType: 'boolean',
         sortable: true,
-        render: this.renderBooleanTemplate,
+        render: (value) => this.renderBooleanTemplate(value, 'Is excluded'),
       },
       {
         name: '',

tasks/config/licenses.js

@@ -12,6 +12,7 @@ module.exports = function () {
         'AFLv2.1',
         'Apache 2.0',
         'Apache License, v2.0',
+        'Apache License, Version 2.0',
         'Apache',
         'Apache*',
         'Apache, Version 2.0',

yarn.lock

@@ -87,13 +87,15 @@
   version "0.0.0"
   uid ""
 
-"@elastic/eui@0.0.34":
+"@elastic/eui@0.0.35":
-  version "0.0.34"
+  version "0.0.35"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.34.tgz#75266fb39975903d842a7c877db27e1f4ea56a71"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.35.tgz#61dfebb8d1c0c652e9872aeecd270e7ca150b7e1"
   dependencies:
     brace "^0.10.0"
     classnames "^2.2.5"
     core-js "^2.5.1"
+    eslint-config-prettier "^2.9.0"
+    eslint-plugin-prettier "^2.6.0"
     focus-trap-react "^3.0.4"
     highlight.js "^9.12.0"
     html "^1.0.0"
@@ -101,6 +103,7 @@
     keymirror "^0.1.1"
     lodash "^3.10.1"
     numeral "^2.0.6"
+    prettier "^1.11.1"
     prop-types "^15.6.0"
     react-ace "^5.5.0"
     react-color "^2.13.8"