[Runtime fields] Editor phase 1

docs/developer/plugin-list.asciidoc

@@ -479,6 +479,10 @@ Elastic.
 |Welcome to the Kibana rollup plugin! This plugin provides Kibana support for Elasticsearch's rollup feature. Please refer to the Elasticsearch documentation to understand rollup indices and how to create rollup jobs.
 
 
+|{kib-repo}blob/{branch}/x-pack/plugins/runtime_fields/README.md[runtimeFields]
+|Welcome to the home of the runtime field editor and everything related to runtime fields!
+
+
 |{kib-repo}blob/{branch}/x-pack/plugins/saved_objects_tagging/README.md[savedObjectsTagging]
 |Add tagging capability to saved objects
 

packages/kbn-optimizer/limits.yml

@@ -102,4 +102,5 @@ pageLoadAssetSize:
   visualizations: 295025
   visualize: 57431
   watcher: 43598
+  runtimeFields: 41752
   stackAlerts: 29684

src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.tsx

@@ -31,7 +31,7 @@ export interface Props<T, FormType = FormData, I = T> {
   componentProps?: Record<string, any>;
   readDefaultValueOnForm?: boolean;
   onChange?: (value: I) => void;
-  children?: (field: FieldHook<T, I>) => JSX.Element;
+  children?: (field: FieldHook<T, I>) => JSX.Element | null;
   [key: string]: any;
 }
 

x-pack/.i18nrc.json

@@ -38,10 +38,11 @@
     "xpack.maps": ["plugins/maps"],
     "xpack.ml": ["plugins/ml"],
     "xpack.monitoring": ["plugins/monitoring"],
-    "xpack.remoteClusters": "plugins/remote_clusters",
     "xpack.painlessLab": "plugins/painless_lab",
+    "xpack.remoteClusters": "plugins/remote_clusters",
     "xpack.reporting": ["plugins/reporting"],
     "xpack.rollupJobs": ["plugins/rollup"],
+    "xpack.runtimeFields": "plugins/runtime_fields",
     "xpack.searchProfiler": "plugins/searchprofiler",
     "xpack.security": "plugins/security",
     "xpack.server": "legacy/server",

x-pack/plugins/index_management/kibana.json

@@ -18,6 +18,7 @@
   "configPath": ["xpack", "index_management"],
   "requiredBundles": [
     "kibanaReact",
-    "esUiShared"
+    "esUiShared",
+    "runtimeFields"
   ]
 }

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

@@ -6,6 +6,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { PainlessLang } from '@kbn/monaco';
 import { EuiFormRow, EuiDescribedFormGroup } from '@elastic/eui';
 
 import { CodeEditor, UseField } from '../../../shared_imports';
@@ -18,19 +19,18 @@ interface Props {
 
 export const PainlessScriptParameter = ({ stack }: Props) => {
   return (
-    <UseField path="script.source" config={getFieldConfig('script')}>
+    <UseField<string> 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%"
+              languageId={PainlessLang.ID}
+              width="100%"
               height="400px"
-              value={scriptField.value as string}
+              value={scriptField.value}
               onChange={scriptField.setValue}
               options={{
                 fontSize: 12,

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

@@ -14,10 +14,10 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-import { UseField } from '../../../shared_imports';
+import { UseField, RUNTIME_FIELD_OPTIONS } from '../../../shared_imports';
 import { DataType } from '../../../types';
 import { getFieldConfig } from '../../../lib';
-import { RUNTIME_FIELD_OPTIONS, TYPE_DEFINITION } from '../../../constants';
+import { TYPE_DEFINITION } from '../../../constants';
 import { EditFieldFormRow, FieldDescriptionSection } from '../fields/edit_field';
 
 interface Props {
@@ -26,7 +26,10 @@ interface Props {
 
 export const RuntimeTypeParameter = ({ stack }: Props) => {
   return (
-    <UseField path="runtime_type" config={getFieldConfig('runtime_type')}>
+    <UseField<EuiComboBoxOptionOption[]>
+      path="runtime_type"
+      config={getFieldConfig('runtime_type')}
+    >
       {(runtimeTypeField) => {
         const { label, value, setValue } = runtimeTypeField;
         const typeDefinition =
@@ -44,8 +47,14 @@ export const RuntimeTypeParameter = ({ stack }: Props) => {
                 )}
                 singleSelection={{ asPlainText: true }}
                 options={RUNTIME_FIELD_OPTIONS}
-                selectedOptions={value as EuiComboBoxOptionOption[]}
-                onChange={setValue}
+                selectedOptions={value}
+                onChange={(newValue) => {
+                  if (newValue.length === 0) {
+                    // Don't allow clearing the type. One must always be selected
+                    return;
+                  }
+                  setValue(newValue);
+                }}
                 isClearable={false}
                 fullWidth
               />

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

@@ -28,35 +28,6 @@ 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

@@ -16,19 +16,19 @@ import {
   ValidationFuncArg,
   fieldFormatters,
   FieldConfig,
+  RUNTIME_FIELD_OPTIONS,
+  RuntimeType,
 } from '../shared_imports';
 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, isJsonField } = fieldValidators;

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

@@ -53,3 +53,5 @@ export {
 } from '../../../../../../../src/plugins/es_ui_shared/public';
 
 export { CodeEditor } from '../../../../../../../src/plugins/kibana_react/public';
+
+export { RUNTIME_FIELD_OPTIONS, RuntimeType } from '../../../../../runtime_fields/public';

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

@@ -8,7 +8,7 @@ import { ReactNode } from 'react';
 import { GenericObject } from './mappings_editor';
 
 import { FieldConfig } from '../shared_imports';
-import { PARAMETERS_DEFINITION, RUNTIME_FIELD_TYPES } from '../constants';
+import { PARAMETERS_DEFINITION } from '../constants';
 
 export interface DataTypeDefinition {
   label: string;
@@ -76,8 +76,6 @@ export type SubType = NumericType | RangeType;
 
 export type DataType = MainType | SubType;
 
-export type RuntimeType = typeof RUNTIME_FIELD_TYPES[number];
-
 export type NumericType =
   | 'long'
   | 'integer'