Euification of Discover FieldNameIcon (#46485) (#46720)

* Migrate FieldNameIcon to use Eui icons

* Adapt colors, cleanup, add test

src/legacy/core_plugins/kibana/public/discover/_discover.scss

@@ -199,14 +199,6 @@ discover-app {
   color: $euiColorDarkShade;
 }
 
-.dscField__icon {
-  margin-right: $euiSizeS;
-  text-align: center;
-  display: inline-block;
-  width: $euiSizeM;
-  color: $euiColorDarkShade;
-}
-
 .dscResults {
 
   h3 {

src/legacy/core_plugins/kibana/public/discover/components/field_chooser/_field_chooser.scss

@@ -3,9 +3,15 @@
   margin-left: $euiSizeS !important;
 }
 
+.dscFieldName {
+  color: $euiColorDarkShade;
+  padding-left: $euiSizeS;
+}
+
+
 /*
   Fixes EUI known issue https://github.com/elastic/eui/issues/1749
 */
 .dscProgressBarTooltip__anchor {
   display: block;
-}
+}

src/legacy/ui/public/directives/field_name/__snapshots__/field_name.test.tsx.snap

@@ -5,9 +5,14 @@ exports[`FieldName renders a geo field, useShortDots is set to true 1`] = `
   class="dscField--noResults"
   title="Geo point field"
 >
-  <span
+  <svg
     aria-label="Geo point field"
-    class="dscField__icon kuiIcon fa-globe"
+    class="euiIcon euiIcon--small euiIcon-isLoading"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
   />
   <span
     class="dscFieldName"
@@ -22,16 +27,15 @@ exports[`FieldName renders a number field by providing a field record, useShortD
   class=""
   title="Number field"
 >
-  <span
+  <svg
     aria-label="Number field"
-    class="dscField__icon"
-  >
-    <strong
-      aria-hidden="true"
-    >
-      #
-    </strong>
-  </span>
+    class="euiIcon euiIcon--small euiIcon-isLoading"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  />
   <span
     class="dscFieldName"
   >
@@ -45,16 +49,15 @@ exports[`FieldName renders a string field by providing fieldType and fieldName 1
   class=""
   title="String field"
 >
-  <span
+  <svg
     aria-label="String field"
-    class="dscField__icon"
-  >
-    <strong
-      aria-hidden="true"
-    >
-      t
-    </strong>
-  </span>
+    class="euiIcon euiIcon--small euiIcon-isLoading"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  />
   <span
     class="dscFieldName"
   >

src/legacy/ui/public/directives/field_name/__snapshots__/field_name_icon.test.tsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FieldNameIcon renders a blackwhite icon for a string 1`] = `
+<EuiIcon
+  aria-label="test"
+  size="s"
+  type="string"
+/>
+`;
+
+exports[`FieldNameIcon renders a colored icon for a number 1`] = `
+<EuiIcon
+  aria-label="test"
+  color="#1EA593"
+  size="s"
+  type="number"
+/>
+`;
+
+exports[`FieldNameIcon renders an icon for an unknown type 1`] = `
+<EuiIcon
+  aria-label="test"
+  color="#1EA593"
+  size="s"
+  type="questionInCircle"
+/>
+`;

src/legacy/ui/public/directives/field_name/field_name_icon.test.tsx

@@ -0,0 +1,36 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { shallow } from 'enzyme';
+import { FieldNameIcon } from './field_name_icon';
+
+test('FieldNameIcon renders a blackwhite icon for a string', () => {
+  const component = shallow(<FieldNameIcon type="string" label="test" />);
+  expect(component).toMatchSnapshot();
+});
+
+test('FieldNameIcon renders a colored icon for a number', () => {
+  const component = shallow(<FieldNameIcon type="number" label="test" useColor />);
+  expect(component).toMatchSnapshot();
+});
+
+test('FieldNameIcon renders an icon for an unknown type', () => {
+  const component = shallow(<FieldNameIcon type="sdfsdf" label="test" useColor />);
+  expect(component).toMatchSnapshot();
+});

src/legacy/ui/public/directives/field_name/field_name_icon.tsx

@@ -17,62 +17,63 @@
  * under the License.
  */
 import React from 'react';
+import { palettes, EuiIcon } from '@elastic/eui';
+import { IconSize } from '@elastic/eui/src/components/icon/icon';
 
-interface Props {
-  type: string;
+interface IconMapEntry {
+  icon: string;
+  color: string;
+}
+interface FieldNameIconProps {
+  type:
+    | 'boolean'
+    | 'conflict'
+    | 'date'
+    | 'geo_point'
+    | 'geo_shape'
+    | 'ip'
+    | 'murmur3'
+    | 'number'
+    | '_source'
+    | 'string'
+    | string;
   label: string;
+  size?: IconSize;
+  useColor?: boolean;
 }
 
-export function FieldNameIcon({ type, label }: Props) {
-  switch (type) {
-    case 'boolean':
-      return <span aria-label={label} className="dscField__icon kuiIcon fa-adjust"></span>;
+const { colors } = palettes.euiPaletteColorBlind;
 
-    case 'conflict':
-      return <span aria-label={label} className="dscField__icon kuiIcon fa-warning"></span>;
+// defaultIcon => a unknown datatype
+const defaultIcon = { icon: 'questionInCircle', color: colors[0] };
 
-    case 'date':
-      return <span aria-label={label} className="dscField__icon kuiIcon fa-clock-o"></span>;
+const typeToEuiIconMap: Partial<Record<string, IconMapEntry>> = {
+  boolean: { icon: 'invert', color: colors[5] },
+  // icon for an index pattern mapping conflict in discover
+  conflict: { icon: 'alert', color: colors[8] },
+  date: { icon: 'calendar', color: colors[7] },
+  geo_point: { icon: 'globe', color: colors[2] },
+  geo_shape: { icon: 'globe', color: colors[2] },
+  ip: { icon: 'storage', color: colors[8] },
+  // is a plugin's data type https://www.elastic.co/guide/en/elasticsearch/plugins/current/mapper-murmur3-usage.html
+  murmur3: { icon: 'document', color: colors[1] },
+  number: { icon: 'number', color: colors[0] },
+  _source: { icon: 'editorCodeBlock', color: colors[3] },
+  string: { icon: 'string', color: colors[4] },
+};
 
-    case 'geo_point':
-      return <span aria-label={label} className="dscField__icon kuiIcon fa-globe"></span>;
+/**
+ * Field icon displayed in discover doc_viewer + side bar
+ */
+export function FieldNameIcon({ type, label, size = 's', useColor = false }: FieldNameIconProps) {
+  const euiIcon = typeToEuiIconMap[type] || defaultIcon;
 
-    case 'geo_shape':
-      return <span aria-label={label} className="dscField__icon kuiIcon fa-globe"></span>;
-
-    case 'ip':
-      return <span aria-label={label} className="dscField__icon kuiIcon fa-laptop"></span>;
-
-    case 'murmur3':
-      return (
-        <span aria-label={label} className="dscField__icon">
-          <strong aria-hidden="true">h</strong>
-        </span>
-      );
-
-    case 'number':
-      return (
-        <span aria-label={label} className="dscField__icon">
-          <strong aria-hidden="true">#</strong>
-        </span>
-      );
-
-    case 'source':
-      // Note that this type is currently not provided, type for _source is undefined
-      return <span aria-label={label} className="dscField__icon kuiIcon fa-file-text-o"></span>;
-
-    case 'string':
-      return (
-        <span aria-label={label} className="dscField__icon">
-          <strong aria-hidden="true">t</strong>
-        </span>
-      );
-
-    default:
-      return (
-        <span aria-label={label} className="dscField__icon">
-          <strong aria-hidden="true">?</strong>
-        </span>
-      );
-  }
+  return (
+    <EuiIcon
+      type={euiIcon.icon}
+      aria-label={label || type}
+      size={size as IconSize}
+      color={useColor || type === 'conflict' ? euiIcon.color : undefined}
+    />
+  );
 }