[Runtime fields editor] Form UI

docs/developer/plugin-list.asciidoc

@@ -460,6 +460,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[runtimeFields]
+|WARNING: Missing README.
+
+
 |{kib-repo}blob/{branch}/x-pack/plugins/searchprofiler[searchprofiler]
 |WARNING: Missing README.
 

packages/kbn-optimizer/limits.yml

@@ -98,3 +98,4 @@ pageLoadAssetSize:
   visualizations: 295025
   visualize: 57431
   watcher: 43598
+  runtimeFields: 26275

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

@@ -36,11 +36,12 @@
     "xpack.main": "legacy/plugins/xpack_main",
     "xpack.maps": ["plugins/maps"],
     "xpack.ml": ["plugins/ml"],
+    "xpack.painlessLab": "plugins/painless_lab",
     "xpack.monitoring": ["plugins/monitoring"],
     "xpack.remoteClusters": "plugins/remote_clusters",
-    "xpack.painlessLab": "plugins/painless_lab",
     "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

@@ -17,6 +17,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/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'

x-pack/plugins/runtime_fields/kibana.json

@@ -9,6 +9,7 @@
   ],
   "configPath": ["xpack", "runtime_fields"],
   "requiredBundles": [
+    "kibanaReact",
     "esUiShared"
   ]
 }

x-pack/plugins/runtime_fields/public/__jest__/setup_environment.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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';
+
+jest.mock('../../../../../src/plugins/kibana_react/public', () => {
+  const original = jest.requireActual('../../../../../src/plugins/kibana_react/public');
+
+  const CodeEditorMock = (props: any) => (
+    <input
+      data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
+      data-value={props.value}
+      value={props.value}
+      onChange={(syntheticEvent: any) => {
+        props.onChange([syntheticEvent['0']]);
+      }}
+    />
+  );
+
+  return {
+    ...original,
+    CodeEditor: CodeEditorMock,
+  };
+});
+
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+
+  return {
+    ...original,
+    EuiComboBox: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockComboBox'}
+        data-currentvalue={props.selectedOptions}
+        value={props.selectedOptions[0]?.value}
+        onChange={async (syntheticEvent: any) => {
+          props.onChange([syntheticEvent['0']]);
+        }}
+      />
+    ),
+  };
+});

x-pack/plugins/runtime_fields/public/components/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { RuntimeFieldForm } from './runtime_field_form';

x-pack/plugins/runtime_fields/public/components/runtime_field_form/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { RuntimeFieldForm } from './runtime_field_form';

x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.test.tsx

@@ -0,0 +1,89 @@
+/*
+ * 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 { act } from 'react-dom/test-utils';
+
+import '../../__jest__/setup_environment';
+import { registerTestBed, TestBed } from '../../test_utils';
+import { RuntimeField } from '../../types';
+import { RuntimeFieldForm, Props, FormState } from './runtime_field_form';
+
+const setup = (props?: Props) =>
+  registerTestBed(RuntimeFieldForm, {
+    memoryRouter: {
+      wrapComponent: false,
+    },
+  })(props) as TestBed;
+
+const docsBaseUri = 'https://jestTest.elastic.co';
+
+describe('Runtime field form', () => {
+  let testBed: TestBed;
+  let onChange: jest.Mock<Props['onChange']> = jest.fn();
+
+  const lastOnChangeCall = (): FormState[] => onChange.mock.calls[onChange.mock.calls.length - 1];
+
+  beforeEach(() => {
+    onChange = jest.fn();
+  });
+
+  test('should render expected 3 fields (name, returnType, script)', () => {
+    testBed = setup({ docsBaseUri });
+    const { exists } = testBed;
+
+    expect(exists('nameField')).toBe(true);
+    expect(exists('typeField')).toBe(true);
+    expect(exists('scriptField')).toBe(true);
+  });
+
+  test('should have a link to learn more about painless syntax', () => {
+    testBed = setup({ docsBaseUri });
+    const { exists, find } = testBed;
+
+    expect(exists('painlessSyntaxLearnMoreLink')).toBe(true);
+    expect(find('painlessSyntaxLearnMoreLink').props().href).toContain(docsBaseUri);
+  });
+
+  test('should accept a "defaultValue" prop', () => {
+    const defaultValue: RuntimeField = {
+      name: 'foo',
+      type: 'date',
+      script: 'test=123',
+    };
+    testBed = setup({ defaultValue, docsBaseUri });
+    const { find } = testBed;
+
+    expect(find('nameField.input').props().value).toBe(defaultValue.name);
+    expect(find('typeField').props().value).toBe(defaultValue.type);
+    expect(find('scriptField').props().value).toBe(defaultValue.script);
+  });
+
+  test('should accept an "onChange" prop to forward the form state', async () => {
+    const defaultValue: RuntimeField = {
+      name: 'foo',
+      type: 'date',
+      script: 'test=123',
+    };
+    testBed = setup({ onChange, defaultValue, docsBaseUri });
+
+    expect(onChange).toHaveBeenCalled();
+
+    let lastState = lastOnChangeCall()[0];
+    expect(lastState.isValid).toBe(undefined);
+    expect(lastState.isSubmitted).toBe(false);
+    expect(lastState.submit).toBeDefined();
+
+    let data;
+    await act(async () => {
+      ({ data } = await lastState.submit());
+    });
+    expect(data).toEqual(defaultValue);
+
+    // Make sure that both isValid and isSubmitted state are now "true"
+    lastState = lastOnChangeCall()[0];
+    expect(lastState.isValid).toBe(true);
+    expect(lastState.isSubmitted).toBe(true);
+  });
+});