Add support for runtime field types to mappings editor.

x-pack/plugins/index_management/public/application/app_context.tsx

@@ -8,7 +8,7 @@ import React, { createContext, useContext } from 'react';
 import { ScopedHistory } from 'kibana/public';
 import { ManagementAppMountParams } from 'src/plugins/management/public';
 import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
-import { CoreStart } from '../../../../../src/core/public';
+import { CoreSetup, CoreStart } from '../../../../../src/core/public';
 
 import { IngestManagerSetup } from '../../../ingest_manager/public';
 import { IndexMgmtMetricsType } from '../types';
@@ -34,6 +34,7 @@ export interface AppDependencies {
   };
   history: ScopedHistory;
   setBreadcrumbs: ManagementAppMountParams['setBreadcrumbs'];
+  uiSettings: CoreSetup['uiSettings'];
 }
 
 export const AppContextProvider = ({

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/index.ts

@@ -71,6 +71,10 @@ export * from './other_type_json_parameter';
 
 export * from './ignore_above_parameter';
 
+export { RuntimeTypeParameter } from './runtime_type_parameter';
+
+export { PainlessScriptParameter } from './painless_script_parameter';
+
 export const PARAMETER_SERIALIZERS = [relationsSerializer, dynamicSerializer];
 
 export const PARAMETER_DESERIALIZERS = [relationsDeserializer, dynamicDeserializer];

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/painless_script_parameter.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiFormRow } from '@elastic/eui';
+
+import { CodeEditor, UseField } from '../../../shared_imports';
+import { getFieldConfig } from '../../../lib';
+
+export const PainlessScriptParameter = () => {
+  return (
+    <UseField path="script.source" config={getFieldConfig('script')}>
+      {(scriptField) => {
+        return (
+          <EuiFormRow label={scriptField.label} fullWidth>
+            <CodeEditor
+              languageId="painless"
+              // 99% width allows the editor to resize horizontally. 100% prevents it from resizing.
+              width="99%"
+              height="800px"
+              value={scriptField.value as string}
+              onChange={scriptField.setValue}
+              options={{
+                fontSize: 12,
+                minimap: {
+                  enabled: false,
+                },
+                scrollBeyondLastLine: false,
+                wordWrap: 'on',
+                wrappingIndent: 'indent',
+                automaticLayout: true,
+              }}
+            />
+          </EuiFormRow>
+        );
+      }}
+    </UseField>
+  );
+};

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/runtime_type_parameter.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiFormRow, EuiComboBox, EuiSpacer } from '@elastic/eui';
+
+import { UseField } from '../../../shared_imports';
+import { DataType, ComboBoxOption } from '../../../types';
+import { getFieldConfig } from '../../../lib';
+import { RUNTIME_FIELD_OPTIONS, TYPE_DEFINITION } from '../../../constants';
+import { FieldDescriptionSection } from '../fields/edit_field';
+
+export const RuntimeTypeParameter = () => {
+  return (
+    <UseField path="runtime_type" config={getFieldConfig('runtime_type')}>
+      {(runtimeTypeField) => {
+        const { label, value, setValue } = runtimeTypeField;
+        const typeDefinition = TYPE_DEFINITION[(value as ComboBoxOption[])[0]!.value as DataType];
+
+        return (
+          <>
+            <EuiFormRow label={label} fullWidth>
+              <EuiComboBox
+                placeholder={i18n.translate(
+                  'xpack.idxMgmt.mappingsEditor.runtimeTyeField.placeholderLabel',
+                  {
+                    defaultMessage: 'Select a type',
+                  }
+                )}
+                singleSelection={{ asPlainText: true }}
+                options={RUNTIME_FIELD_OPTIONS}
+                selectedOptions={value as ComboBoxOption[]}
+                onChange={setValue}
+                isClearable={false}
+                fullWidth
+              />
+            </EuiFormRow>
+
+            {/* Field description */}
+            {typeDefinition && (
+              <>
+                <FieldDescriptionSection isMultiField={false}>
+                  {typeDefinition.description?.() as JSX.Element}
+                </FieldDescriptionSection>
+
+                <EuiSpacer size="l" />
+              </>
+            )}
+          </>
+        );
+      }}
+    </UseField>
+  );
+};

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/index.ts

@@ -29,6 +29,7 @@ import { OtherType } from './other_type';
 import { NestedType } from './nested_type';
 import { JoinType } from './join_type';
 import { RankFeatureType } from './rank_feature_type';
+import { RuntimeType } from './runtime_type';
 import { WildcardType } from './wildcard_type';
 
 const typeToParametersFormMap: { [key in DataType]?: ComponentType<any> } = {
@@ -55,6 +56,7 @@ const typeToParametersFormMap: { [key in DataType]?: ComponentType<any> } = {
   nested: NestedType,
   join: JoinType,
   rank_feature: RankFeatureType,
+  runtime: RuntimeType,
   wildcard: WildcardType,
 };
 

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/runtime_type.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+import { RuntimeTypeParameter, PainlessScriptParameter } from '../../field_parameters';
+import { BasicParametersSection } from '../edit_field';
+
+export const RuntimeType = () => {
+  return (
+    <>
+      <BasicParametersSection>
+        <RuntimeTypeParameter />
+        <PainlessScriptParameter />
+      </BasicParametersSection>
+    </>
+  );
+};

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx

@@ -16,7 +16,7 @@ import {
 import { i18n } from '@kbn/i18n';
 
 import { NormalizedField, NormalizedFields } from '../../../types';
-import { getTypeLabelFromType } from '../../../lib';
+import { getTypeLabelFromField } from '../../../lib';
 import { CHILD_FIELD_INDENT_SIZE, LEFT_PADDING_SIZE_FIELD_ITEM_WRAPPER } from '../../../constants';
 
 import { FieldsList } from './fields_list';
@@ -67,6 +67,7 @@ function FieldListItemComponent(
     isExpanded,
     path,
   } = field;
+
   // When there aren't any "child" fields (the maxNestedDepth === 0), there is no toggle icon on the left of any field.
   // For that reason, we need to compensate and substract some indent to left align on the page.
   const substractIndentAmount = maxNestedDepth === 0 ? CHILD_FIELD_INDENT_SIZE * 0.5 : 0;
@@ -280,10 +281,10 @@ function FieldListItemComponent(
                   ? i18n.translate('xpack.idxMgmt.mappingsEditor.multiFieldBadgeLabel', {
                       defaultMessage: '{dataType} multi-field',
                       values: {
-                        dataType: getTypeLabelFromType(source.type),
+                        dataType: getTypeLabelFromField(source),
                       },
                     })
-                  : getTypeLabelFromType(source.type)}
+                  : getTypeLabelFromField(source)}
               </EuiBadge>
             </EuiFlexItem>
 

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/search_fields/search_result_item.tsx

@@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n';
 import { SearchResult } from '../../../types';
 import { TYPE_DEFINITION } from '../../../constants';
 import { useDispatch } from '../../../mappings_state_context';
-import { getTypeLabelFromType } from '../../../lib';
+import { getTypeLabelFromField } from '../../../lib';
 import { DeleteFieldProvider } from '../fields/delete_field_provider';
 
 interface Props {
@@ -121,7 +121,7 @@ export const SearchResultItem = React.memo(function FieldListItemFlatComponent({
                         dataType: TYPE_DEFINITION[source.type].label,
                       },
                     })
-                  : getTypeLabelFromType(source.type)}
+                  : getTypeLabelFromField(source)}
               </EuiBadge>
             </EuiFlexItem>
 

x-pack/plugins/index_management/public/application/components/mappings_editor/constants/data_types_definition.tsx

@@ -13,6 +13,23 @@ import { documentationService } from '../../../services/documentation';
 import { MainType, SubType, DataType, DataTypeDefinition } from '../types';
 
 export const TYPE_DEFINITION: { [key in DataType]: DataTypeDefinition } = {
+  runtime: {
+    value: 'runtime',
+    label: i18n.translate('xpack.idxMgmt.mappingsEditor.dataType.runtimeFieldDescription', {
+      defaultMessage: 'Runtime',
+    }),
+    documentation: {
+      main: '/runtime_field.html',
+    },
+    description: () => (
+      <p>
+        <FormattedMessage
+          id="xpack.idxMgmt.mappingsEditor.dataType.runtimeFieldLongDescription"
+          defaultMessage="Runtime fields define scripts that calculate field values at runtime."
+        />
+      </p>
+    ),
+  },
   text: {
     value: 'text',
     label: i18n.translate('xpack.idxMgmt.mappingsEditor.dataType.textDescription', {
@@ -838,6 +855,7 @@ export const MAIN_TYPES: MainType[] = [
   'range',
   'rank_feature',
   'rank_features',
+  'runtime',
   'search_as_you_type',
   'shape',
   'text',

x-pack/plugins/index_management/public/application/components/mappings_editor/constants/field_options.tsx

@@ -18,6 +18,7 @@ export const TYPE_NOT_ALLOWED_MULTIFIELD: DataType[] = [
   'object',
   'nested',
   'alias',
+  'runtime',
 ];
 
 export const FIELD_TYPES_OPTIONS = Object.entries(MAIN_DATA_TYPE_DEFINITION).map(
@@ -27,6 +28,35 @@ export const FIELD_TYPES_OPTIONS = Object.entries(MAIN_DATA_TYPE_DEFINITION).map
   })
 ) as ComboBoxOption[];
 
+export const RUNTIME_FIELD_OPTIONS = [
+  {
+    label: 'Keyword',
+    value: 'keyword',
+  },
+  {
+    label: 'Long',
+    value: 'long',
+  },
+  {
+    label: 'Double',
+    value: 'double',
+  },
+  {
+    label: 'Date',
+    value: 'date',
+  },
+  {
+    label: 'IP',
+    value: 'ip',
+  },
+  {
+    label: 'Boolean',
+    value: 'boolean',
+  },
+] as ComboBoxOption[];
+
+export const RUNTIME_FIELD_TYPES = ['keyword', 'long', 'double', 'date', 'ip', 'boolean'] as const;
+
 interface SuperSelectOptionConfig {
   inputDisplay: string;
   dropdownDisplay: JSX.Element;

x-pack/plugins/index_management/public/application/components/mappings_editor/constants/parameters_definition.tsx

@@ -20,13 +20,15 @@ import {
 import {
   AliasOption,
   DataType,
+  RuntimeType,
   ComboBoxOption,
   ParameterName,
   ParameterDefinition,
 } from '../types';
 import { documentationService } from '../../../services/documentation';
 import { INDEX_DEFAULT } from './default_values';
 import { TYPE_DEFINITION } from './data_types_definition';
+import { RUNTIME_FIELD_OPTIONS } from './field_options';
 
 const { toInt } = fieldFormatters;
 const { emptyField, containsCharsField, numberGreaterThanField } = fieldValidators;
@@ -185,6 +187,40 @@ export const PARAMETERS_DEFINITION: { [key in ParameterName]: ParameterDefinitio
     },
     schema: t.string,
   },
+  runtime_type: {
+    fieldConfig: {
+      type: FIELD_TYPES.COMBO_BOX,
+      label: i18n.translate('xpack.idxMgmt.mappingsEditor.parameters.runtimeTypeLabel', {
+        defaultMessage: 'Emitted type',
+      }),
+      defaultValue: 'keyword',
+      deserializer: (fieldType: RuntimeType | undefined) => {
+        if (typeof fieldType === 'string' && Boolean(fieldType)) {
+          const label =
+            RUNTIME_FIELD_OPTIONS.find(({ value }) => value === fieldType)?.label ?? fieldType;
+          return [
+            {
+              label,
+              value: fieldType,
+            },
+          ];
+        }
+        return [];
+      },
+      serializer: (value: ComboBoxOption[]) => (value.length === 0 ? '' : value[0].value),
+    },
+    schema: t.string,
+  },
+  script: {
+    fieldConfig: {
+      defaultValue: '',
+      type: FIELD_TYPES.TEXT,
+      label: i18n.translate('xpack.idxMgmt.mappingsEditor.parameters.painlessScriptLabel', {
+        defaultMessage: 'Script',
+      }),
+    },
+    schema: t.string,
+  },
   store: {
     fieldConfig: {
       type: FIELD_TYPES.CHECKBOX,

x-pack/plugins/index_management/public/application/components/mappings_editor/lib/index.ts

@@ -4,7 +4,27 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export * from './utils';
+export {
+  getUniqueId,
+  getChildFieldsName,
+  getFieldMeta,
+  getTypeLabelFromField,
+  getFieldConfig,
+  getTypeMetaFromSource,
+  normalize,
+  deNormalize,
+  updateFieldsPathAfterFieldNameChange,
+  getAllChildFields,
+  getAllDescendantAliases,
+  getFieldAncestors,
+  filterTypesForMultiField,
+  filterTypesForNonRootFields,
+  getMaxNestedDepth,
+  buildFieldTreeFromIds,
+  shouldDeleteChildFieldsAfterTypeChange,
+  canUseMappingsEditor,
+  stripUndefinedValues,
+} from './utils';
 
 export * from './serializers';