Addressing PR comments

src/plugins/kibana_react/public/icon/field_icon.tsx → src/plugins/kibana_react/public/field_icon/field_icon.tsx

@@ -48,7 +48,7 @@ const { colors } = palettes.euiPaletteColorBlind;
 // defaultIcon => a unknown datatype
 const defaultIcon = { icon: 'questionInCircle', color: colors[0] };
 
-const typeToEuiIconMap: Partial<Record<string, IconMapEntry>> = {
+export 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] },

src/plugins/kibana_react/public/index.ts

@@ -22,4 +22,4 @@ export * from './exit_full_screen_button';
 export * from './context';
 export * from './overlays';
 export * from './ui_settings';
-export * from './icon';
+export * from './field_icon';

x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx

@@ -215,7 +215,7 @@ export function FieldEditor({
                       const { type, label } = option;
                       return (
                         <span className={contentClassName}>
-                          <FieldIcon type={type!} size={'m'} useColor />{' '}
+                          <FieldIcon type={type!} size="m" useColor />{' '}
                           <EuiHighlight search={searchValue}>{label}</EuiHighlight>
                         </span>
                       );

x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx

@@ -120,7 +120,7 @@ function toOptions(
 ): Array<{ label: string; checked?: 'on' | 'off'; prepend?: ReactNode }> {
   return fields.map(field => ({
     label: field.name,
-    prepend: <FieldIcon type={field.type} size={'m'} useColor />,
+    prepend: <FieldIcon type={field.type} size="m" useColor />,
     checked: field.selected ? 'on' : undefined,
   }));
 }

x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.test.tsx

@@ -11,9 +11,19 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { LensFieldIcon } from './lens_field_icon';
+import { LensFieldIcon, getColorForDataType } from './lens_field_icon';
 
 test('LensFieldIcon renders properly', () => {
   const component = shallow(<LensFieldIcon type={'date'} />);
   expect(component).toMatchSnapshot();
 });
+
+test('LensFieldIcon getColorForDataType for a valid type', () => {
+  const color = getColorForDataType('date');
+  expect(color).toEqual('#B0916F');
+});
+
+test('LensFieldIcon getColorForDataType for an invalid type', () => {
+  const color = getColorForDataType('invalid');
+  expect(color).toEqual('#1EA593');
+});

x-pack/legacy/plugins/lens/public/indexpattern_plugin/lens_field_icon.tsx

@@ -5,39 +5,18 @@
  */
 
 import React from 'react';
-import { ICON_TYPES, palettes } from '@elastic/eui';
-import classNames from 'classnames';
-import { FieldIcon } from '../../../../../../src/plugins/kibana_react/public';
+import { palettes } from '@elastic/eui';
+import { FieldIcon, typeToEuiIconMap } from '../../../../../../src/plugins/kibana_react/public';
 import { DataType } from '../types';
 
-function stringToNum(s: string) {
-  return Array.from(s).reduce((acc, ch) => acc + ch.charCodeAt(0), 1);
-}
-
-function getIconForDataType(dataType: string) {
-  const icons: Partial<Record<string, UnwrapArray<typeof ICON_TYPES>>> = {
-    boolean: 'invert',
-    date: 'calendar',
-    geo_point: 'globe',
-    ip: 'storage',
-  };
-  return icons[dataType] || ICON_TYPES.find(t => t === dataType) || 'document';
-}
-
 export function getColorForDataType(type: string) {
-  const iconType = getIconForDataType(type);
-  const { colors } = palettes.euiPaletteColorBlind;
-  const colorIndex = stringToNum(iconType) % colors.length;
-  return colors[colorIndex];
+  const iconMap = typeToEuiIconMap[type];
+  if (iconMap) {
+    return iconMap.color;
+  }
+  return palettes.euiPaletteColorBlind.colors[0];
 }
 
-export type UnwrapArray<T> = T extends Array<infer P> ? P : T;
-
 export function LensFieldIcon({ type }: { type: DataType }) {
-  const classes = classNames(
-    'lnsFieldListPanel__fieldIcon',
-    `lnsFieldListPanel__fieldIcon--${type}`
-  );
-
-  return <FieldIcon type={type} className={classes} size={'m'} useColor />;
+  return <FieldIcon type={type} className="lnsFieldListPanel__fieldIcon" size="m" useColor />;
 }