Revert "Revert "Add support for runtime field types to mappings edito…

…r. (#77420)" (#79611)" (#79940)

This reverts commit e01d538.

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

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,80 @@
+/*
+ * 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, EuiDescribedFormGroup } from '@elastic/eui';
+
+import { CodeEditor, UseField } from '../../../shared_imports';
+import { getFieldConfig } from '../../../lib';
+import { EditFieldFormRow } from '../fields/edit_field';
+
+interface Props {
+  stack?: boolean;
+}
+
+export const PainlessScriptParameter = ({ stack }: Props) => {
+  return (
+    <UseField path="script.source" config={getFieldConfig('script')}>
+      {(scriptField) => {
+        const error = scriptField.getErrorsMessages();
+        const isInvalid = error ? Boolean(error.length) : false;
+
+        const field = (
+          <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="400px"
+              value={scriptField.value as string}
+              onChange={scriptField.setValue}
+              options={{
+                fontSize: 12,
+                minimap: {
+                  enabled: false,
+                },
+                scrollBeyondLastLine: false,
+                wordWrap: 'on',
+                wrappingIndent: 'indent',
+                automaticLayout: true,
+              }}
+            />
+          </EuiFormRow>
+        );
+
+        const fieldTitle = i18n.translate('xpack.idxMgmt.mappingsEditor.painlessScript.title', {
+          defaultMessage: 'Emitted value',
+        });
+
+        const fieldDescription = i18n.translate(
+          'xpack.idxMgmt.mappingsEditor.painlessScript.description',
+          {
+            defaultMessage: 'Use emit() to define the value of this runtime field.',
+          }
+        );
+
+        if (stack) {
+          return (
+            <EditFieldFormRow title={fieldTitle} description={fieldDescription} withToggle={false}>
+              {field}
+            </EditFieldFormRow>
+          );
+        }
+
+        return (
+          <EuiDescribedFormGroup
+            title={<h3>{fieldTitle}</h3>}
+            description={fieldDescription}
+            fullWidth={true}
+          >
+            {field}
+          </EuiDescribedFormGroup>
+        );
+      }}
+    </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,96 @@
+/*
+ * 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,
+  EuiDescribedFormGroup,
+  EuiSpacer,
+} 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';
+
+interface Props {
+  stack?: boolean;
+}
+
+export const RuntimeTypeParameter = ({ stack }: Props) => {
+  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];
+
+        const field = (
+          <>
+            <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>
+
+            <EuiSpacer size="m" />
+
+            {/* Field description */}
+            {typeDefinition && (
+              <FieldDescriptionSection isMultiField={false}>
+                {typeDefinition.description?.() as JSX.Element}
+              </FieldDescriptionSection>
+            )}
+          </>
+        );
+
+        const fieldTitle = i18n.translate('xpack.idxMgmt.mappingsEditor.runtimeType.title', {
+          defaultMessage: 'Emitted type',
+        });
+
+        const fieldDescription = i18n.translate(
+          'xpack.idxMgmt.mappingsEditor.runtimeType.description',
+          {
+            defaultMessage: 'Select the type of value emitted by the runtime field.',
+          }
+        );
+
+        if (stack) {
+          return (
+            <EditFieldFormRow title={fieldTitle} description={fieldDescription} withToggle={false}>
+              {field}
+            </EditFieldFormRow>
+          );
+        }
+
+        return (
+          <EuiDescribedFormGroup
+            title={<h3>{fieldTitle}</h3>}
+            description={fieldDescription}
+            fullWidth={true}
+          >
+            {field}
+          </EuiDescribedFormGroup>
+        );
+      }}
+    </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

@@ -14,15 +14,17 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiOutsideClickDetector,
+  EuiSpacer,
 } from '@elastic/eui';
 
 import { useForm, Form, FormDataProvider } from '../../../../shared_imports';
-import { EUI_SIZE } from '../../../../constants';
+import { EUI_SIZE, TYPE_DEFINITION } from '../../../../constants';
 import { useDispatch } from '../../../../mappings_state_context';
 import { fieldSerializer } from '../../../../lib';
-import { Field, NormalizedFields } from '../../../../types';
+import { Field, NormalizedFields, MainType } from '../../../../types';
 import { NameParameter, TypeParameter, SubTypeParameter } from '../../field_parameters';
-import { getParametersFormForType } from './required_parameters_forms';
+import { FieldBetaBadge } from '../field_beta_badge';
+import { getRequiredParametersFormForType } from './required_parameters_forms';
 
 const formWrapper = (props: any) => <form {...props} />;
 
@@ -195,18 +197,27 @@ 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;
                 }
 
+                const typeDefinition = TYPE_DEFINITION[type?.[0].value as MainType];
+
                 return (
                   <div className="mappingsEditor__createFieldRequiredProps">
-                    <ParametersForm key={subType ?? type} allFields={allFields} />
+                    {typeDefinition.isBeta ? (
+                      <>
+                        <FieldBetaBadge />
+                        <EuiSpacer size="m" />
+                      </>
+                    ) : null}
+
+                    <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,18 @@
+/*
+ * 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';
+
+export const RuntimeTypeRequiredParameters = () => {
+  return (
+    <>
+      <RuntimeTypeParameter />
+      <PainlessScriptParameter />
+    </>
+  );
+};