add icon tip for runtime field (#94882)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/index_pattern_management/public/components/edit_index_pattern/indexed_fields_table/components/table/__snapshots__/table.test.tsx.snap

@@ -1,5 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Table render name 1`] = `
+<span>
+  customer
+</span>
+`;
+
+exports[`Table render name 2`] = `
+<span>
+  customer
+  <span>
+     
+    <EuiIconTip
+      content={
+        <span>
+          This field exists on the index pattern only.
+        </span>
+      }
+      title="Runtime field"
+      type="indexSettings"
+    />
+  </span>
+</span>
+`;
+
 exports[`Table should render conflicting type 1`] = `
 <span>
   conflict
@@ -142,6 +166,15 @@ exports[`Table should render normally 1`] = `
         "name": "conflictingField",
         "type": "text, long",
       },
+      Object {
+        "displayName": "customer",
+        "excluded": false,
+        "info": Array [],
+        "isMapped": false,
+        "kbnType": "text",
+        "name": "customer",
+        "type": "keyword",
+      },
     ]
   }
   pagination={

src/plugins/index_pattern_management/public/components/edit_index_pattern/indexed_fields_table/components/table/table.test.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { IIndexPattern } from 'src/plugins/data/public';
 import { IndexedFieldItem } from '../../types';
-import { Table } from './table';
+import { Table, renderFieldName } from './table';
 
 const indexPattern = {
   timeFieldName: 'timestamp',
@@ -48,6 +48,15 @@ const items: IndexedFieldItem[] = [
     format: '',
     isMapped: true,
   },
+  {
+    name: 'customer',
+    displayName: 'customer',
+    type: 'keyword',
+    kbnType: 'text',
+    info: [],
+    excluded: false,
+    isMapped: false,
+  },
 ];
 
 const renderTable = (
@@ -103,4 +112,28 @@ describe('Table', () => {
     renderTable({ editField }).prop('columns')[6].actions[0].onClick();
     expect(editField).toBeCalled();
   });
+
+  test('render name', () => {
+    const mappedField = {
+      name: 'customer',
+      info: [],
+      excluded: false,
+      kbnType: 'string',
+      type: 'keyword',
+      isMapped: true,
+    };
+
+    expect(renderFieldName(mappedField)).toMatchSnapshot();
+
+    const runtimeField = {
+      name: 'customer',
+      info: [],
+      excluded: false,
+      kbnType: 'string',
+      type: 'keyword',
+      isMapped: false,
+    };
+
+    expect(renderFieldName(runtimeField)).toMatchSnapshot();
+  });
 });

src/plugins/index_pattern_management/public/components/edit_index_pattern/indexed_fields_table/components/table/table.tsx

@@ -157,6 +157,16 @@ const labelDescription = i18n.translate(
   { defaultMessage: 'A custom label for the field.' }
 );
 
+const runtimeIconTipTitle = i18n.translate(
+  'indexPatternManagement.editIndexPattern.fields.table.runtimeIconTipTitle',
+  { defaultMessage: 'Runtime field' }
+);
+
+const runtimeIconTipText = i18n.translate(
+  'indexPatternManagement.editIndexPattern.fields.table.runtimeIconTipText',
+  { defaultMessage: 'This field exists on the index pattern only.' }
+);
+
 interface IndexedFieldProps {
   indexPattern: IIndexPattern;
   items: IndexedFieldItem[];
@@ -164,54 +174,60 @@ interface IndexedFieldProps {
   deleteField: (fieldName: string) => void;
 }
 
+export const renderFieldName = (field: IndexedFieldItem, timeFieldName?: string) => (
+  <span>
+    {field.name}
+    {field.info && field.info.length ? (
+      <span>
+        &nbsp;
+        <EuiIconTip
+          type="questionInCircle"
+          color="primary"
+          aria-label={additionalInfoAriaLabel}
+          content={field.info.map((info: string, i: number) => (
+            <div key={i}>{info}</div>
+          ))}
+        />
+      </span>
+    ) : null}
+    {timeFieldName === field.name ? (
+      <span>
+        &nbsp;
+        <EuiIconTip
+          type="clock"
+          color="primary"
+          aria-label={primaryTimeAriaLabel}
+          content={primaryTimeTooltip}
+        />
+      </span>
+    ) : null}
+    {!field.isMapped ? (
+      <span>
+        &nbsp;
+        <EuiIconTip
+          type="indexSettings"
+          title={runtimeIconTipTitle}
+          content={<span>{runtimeIconTipText}</span>}
+        />
+      </span>
+    ) : null}
+    {field.customLabel && field.customLabel !== field.name ? (
+      <div>
+        <EuiToolTip content={labelDescription}>
+          <EuiBadge iconType="flag" iconSide="left">
+            {field.customLabel}
+          </EuiBadge>
+        </EuiToolTip>
+      </div>
+    ) : null}
+  </span>
+);
+
 export class Table extends PureComponent<IndexedFieldProps> {
   renderBooleanTemplate(value: string, arialLabel: string) {
     return value ? <EuiIcon type="dot" color="secondary" aria-label={arialLabel} /> : <span />;
   }
 
-  renderFieldName(name: string, field: IndexedFieldItem) {
-    const { indexPattern } = this.props;
-
-    return (
-      <span>
-        {field.name}
-        {field.info && field.info.length ? (
-          <span>
-            &nbsp;
-            <EuiIconTip
-              type="questionInCircle"
-              color="primary"
-              aria-label={additionalInfoAriaLabel}
-              content={field.info.map((info: string, i: number) => (
-                <div key={i}>{info}</div>
-              ))}
-            />
-          </span>
-        ) : null}
-        {indexPattern.timeFieldName === name ? (
-          <span>
-            &nbsp;
-            <EuiIconTip
-              type="clock"
-              color="primary"
-              aria-label={primaryTimeAriaLabel}
-              content={primaryTimeTooltip}
-            />
-          </span>
-        ) : null}
-        {field.customLabel && field.customLabel !== field.name ? (
-          <div>
-            <EuiToolTip content={labelDescription}>
-              <EuiBadge iconType="flag" iconSide="left">
-                {field.customLabel}
-              </EuiBadge>
-            </EuiToolTip>
-          </div>
-        ) : null}
-      </span>
-    );
-  }
-
   renderFieldType(type: string, isConflict: boolean) {
     return (
       <span>
@@ -234,7 +250,7 @@ export class Table extends PureComponent<IndexedFieldProps> {
   }
 
   render() {
-    const { items, editField, deleteField } = this.props;
+    const { items, editField, deleteField, indexPattern } = this.props;
 
     const pagination = {
       initialPageSize: 10,
@@ -248,7 +264,7 @@ export class Table extends PureComponent<IndexedFieldProps> {
         dataType: 'string',
         sortable: true,
         render: (value: string, field: IndexedFieldItem) => {
-          return this.renderFieldName(value, field);
+          return renderFieldName(field, indexPattern.timeFieldName);
         },
         width: '38%',
         'data-test-subj': 'indexedFieldName',