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

@@ -73,6 +73,10 @@ export * from './meta_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,54 @@
+/*
+ * 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, EuiCallOut, EuiSpacer } 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) => {
+        const error = scriptField.getErrorsMessages();
+        const isInvalid = error ? Boolean(error.length) : false;
+
+        return (
+          <>
+            {isInvalid && (
+              <>
+                <EuiCallOut size="s" color="danger" title={error} />
+                <EuiSpacer />
+              </>
+            )}
+
+            <EuiFormRow label={scriptField.label} error={error} isInvalid={isInvalid} 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/path_parameter.tsx

@@ -93,17 +93,17 @@ export const PathParameter = ({ field, allFields }: Props) => {
             <>
               {!Boolean(suggestedFields.length) && (
                 <>
-                  <EuiCallOut color="warning">
-                    <p>
-                      {i18n.translate(
-                        'xpack.idxMgmt.mappingsEditor.aliasType.noFieldsAddedWarningMessage',
-                        {
-                          defaultMessage:
-                            'You need to add at least one field before creating an alias.',
-                        }
-                      )}
-                    </p>
-                  </EuiCallOut>
+                  <EuiCallOut
+                    size="s"
+                    color="warning"
+                    title={i18n.translate(
+                      'xpack.idxMgmt.mappingsEditor.aliasType.noFieldsAddedWarningMessage',
+                      {
+                        defaultMessage:
+                          'You need to add at least one field before creating an alias.',
+                      }
+                    )}
+                  />
                   <EuiSpacer />
                 </>
               )}

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

@@ -0,0 +1,63 @@
+/*
+ * 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, EuiComboBoxOptionOption } from '@elastic/eui';
+
+import { UseField } from '../../../shared_imports';
+import { DataType } from '../../../types';
+import { getFieldConfig } from '../../../lib';
+import { RUNTIME_FIELD_OPTIONS, TYPE_DEFINITION } from '../../../constants';
+import { EditFieldFormRow, 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 EuiComboBoxOptionOption[])[0]!.value as DataType];
+
+        return (
+          <EditFieldFormRow
+            title={i18n.translate('xpack.idxMgmt.mappingsEditor.runtimeType.title', {
+              defaultMessage: 'Emitted type',
+            })}
+            description={i18n.translate('xpack.idxMgmt.mappingsEditor.runtimeType.description', {
+              defaultMessage: 'Select the type of value emitted by the runtime field.',
+            })}
+            withToggle={false}
+          >
+            <EuiFormRow label={label} fullWidth>
+              <EuiComboBox
+                placeholder={i18n.translate(
+                  'xpack.idxMgmt.mappingsEditor.runtimeType.placeholderLabel',
+                  {
+                    defaultMessage: 'Select a type',
+                  }
+                )}
+                singleSelection={{ asPlainText: true }}
+                options={RUNTIME_FIELD_OPTIONS}
+                selectedOptions={value as EuiComboBoxOptionOption[]}
+                onChange={setValue}
+                isClearable={false}
+                fullWidth
+              />
+            </EuiFormRow>
+
+            {/* Field description */}
+            {typeDefinition && (
+              <FieldDescriptionSection isMultiField={false}>
+                {typeDefinition.description?.() as JSX.Element}
+              </FieldDescriptionSection>
+            )}
+          </EditFieldFormRow>
+        );
+      }}
+    </UseField>
+  );
+};

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

@@ -56,14 +56,17 @@ export const TermVectorParameter = ({ field, defaultToggleValue }: Props) => {
             {formData.term_vector === 'with_positions_offsets' && (
               <>
                 <EuiSpacer size="s" />
-                <EuiCallOut color="warning">
-                  <p>
-                    {i18n.translate('xpack.idxMgmt.mappingsEditor.termVectorFieldWarningMessage', {
+                <EuiCallOut
+                  size="s"
+                  color="warning"
+                  title={i18n.translate(
+                    'xpack.idxMgmt.mappingsEditor.termVectorFieldWarningMessage',
+                    {
                       defaultMessage:
                         'Setting "With positions and offsets" will double the size of a field’s index.',
-                    })}
-                  </p>
-                </EuiCallOut>
+                    }
+                  )}
+                />
               </>
             )}
           </>

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

@@ -22,7 +22,7 @@ import { useDispatch } from '../../../../mappings_state_context';
 import { fieldSerializer } from '../../../../lib';
 import { Field, NormalizedFields } from '../../../../types';
 import { NameParameter, TypeParameter, SubTypeParameter } from '../../field_parameters';
-import { getParametersFormForType } from './required_parameters_forms';
+import { getRequiredParametersFormForType } from './required_parameters_forms';
 
 const formWrapper = (props: any) => <form {...props} />;
 
@@ -195,18 +195,18 @@ export const CreateField = React.memo(function CreateFieldComponent({
 
             <FormDataProvider pathsToWatch={['type', 'subType']}>
               {({ type, subType }) => {
-                const ParametersForm = getParametersFormForType(
+                const RequiredParametersForm = getRequiredParametersFormForType(
                   type?.[0].value,
                   subType?.[0].value
                 );
 
-                if (!ParametersForm) {
+                if (!RequiredParametersForm) {
                   return null;
                 }
 
                 return (
                   <div className="mappingsEditor__createFieldRequiredProps">
-                    <ParametersForm key={subType ?? type} allFields={allFields} />
+                    <RequiredParametersForm key={subType ?? type} allFields={allFields} />
                   </div>
                 );
               }}

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

@@ -11,6 +11,7 @@ import { AliasTypeRequiredParameters } from './alias_type';
 import { TokenCountTypeRequiredParameters } from './token_count_type';
 import { ScaledFloatTypeRequiredParameters } from './scaled_float_type';
 import { DenseVectorRequiredParameters } from './dense_vector_type';
+import { RuntimeTypeRequiredParameters } from './runtime_type';
 
 export interface ComponentProps {
   allFields: NormalizedFields['byId'];
@@ -21,9 +22,10 @@ const typeToParametersFormMap: { [key in DataType]?: ComponentType<any> } = {
   token_count: TokenCountTypeRequiredParameters,
   scaled_float: ScaledFloatTypeRequiredParameters,
   dense_vector: DenseVectorRequiredParameters,
+  runtime: RuntimeTypeRequiredParameters,
 };
 
-export const getParametersFormForType = (
+export const getRequiredParametersFormForType = (
   type: MainType,
   subType?: SubType
 ): ComponentType<ComponentProps> | undefined =>

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

@@ -0,0 +1,13 @@
+/*
+ * 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 } from '../../../field_parameters';
+
+export const RuntimeTypeRequiredParameters = () => {
+  return <RuntimeTypeParameter />;
+};

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

@@ -31,6 +31,7 @@ import { JoinType } from './join_type';
 import { HistogramType } from './histogram_type';
 import { ConstantKeywordType } from './constant_keyword_type';
 import { RankFeatureType } from './rank_feature_type';
+import { RuntimeType } from './runtime_type';
 import { WildcardType } from './wildcard_type';
 
 const typeToParametersFormMap: { [key in DataType]?: ComponentType<any> } = {
@@ -59,6 +60,7 @@ const typeToParametersFormMap: { [key in DataType]?: ComponentType<any> } = {
   histogram: HistogramType,
   constant_keyword: ConstantKeywordType,
   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,19 @@
+/*
+ * 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,24 @@ 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',
+    }),
+    // TODO: Add this once the page exists.
+    // 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', {
@@ -876,6 +894,7 @@ export const MAIN_TYPES: MainType[] = [
   'range',
   'rank_feature',
   'rank_features',
+  'runtime',
   'search_as_you_type',
   'shape',
   'text',