[Runtime field editor] Add support for composite runtime fields

src/plugins/data/common/index.ts

@@ -103,6 +103,7 @@ export type {
   FieldFormatMap,
   RuntimeType,
   RuntimeField,
+  RuntimeFieldSpec,
   IIndexPattern,
   DataViewAttributes,
   IndexPatternAttributes,

src/plugins/data/public/index.ts

@@ -81,6 +81,7 @@ export type {
   IndexPatternLoadExpressionFunctionDefinition,
   GetFieldsOptions,
   AggregationRestrictions,
+  RuntimeType,
   DataViewListItem,
 } from '../common';
 export {

src/plugins/data_view_field_editor/__jest__/client_integration/field_editor.test.tsx

@@ -99,7 +99,7 @@ describe('<FieldEditor />', () => {
   test('should accept a defaultValue and onChange prop to forward the form state', async () => {
     const field = {
       name: 'foo',
-      type: 'date',
+      type: 'date' as const,
       script: { source: 'emit("hello")' },
     };
 
@@ -113,7 +113,7 @@ describe('<FieldEditor />', () => {
     expect(lastState.submit).toBeDefined();
 
     const { data: formData } = await submitFormAndGetData(lastState);
-    expect(formData).toEqual(field);
+    expect(formData).toEqual({ ...field, format: null });
 
     // Make sure that both isValid and isSubmitted state are now "true"
     lastState = getLastStateUpdate();
@@ -129,7 +129,10 @@ describe('<FieldEditor />', () => {
           onChange,
         },
         {
-          namesNotAllowed: existingFields,
+          namesNotAllowed: {
+            fields: existingFields,
+            runtimeComposites: [],
+          },
           existingConcreteFields: [],
           fieldTypeToProcess: 'runtime',
         }
@@ -166,7 +169,10 @@ describe('<FieldEditor />', () => {
           onChange,
         },
         {
-          namesNotAllowed: existingRuntimeFieldNames,
+          namesNotAllowed: {
+            fields: existingRuntimeFieldNames,
+            runtimeComposites: [],
+          },
           existingConcreteFields: [],
           fieldTypeToProcess: 'runtime',
         }

src/plugins/data_view_field_editor/__jest__/client_integration/field_editor_flyout_content.test.ts

@@ -40,7 +40,7 @@ describe('<FieldEditorFlyoutContent />', () => {
   test('should allow a field to be provided', async () => {
     const field = {
       name: 'foo',
-      type: 'ip',
+      type: 'ip' as const,
       script: {
         source: 'emit("hello world")',
       },
@@ -57,7 +57,7 @@ describe('<FieldEditorFlyoutContent />', () => {
   test('should accept an "onSave" prop', async () => {
     const field = {
       name: 'foo',
-      type: 'date',
+      type: 'date' as const,
       script: { source: 'test=123' },
     };
     const onSave: jest.Mock<Props['onSave']> = jest.fn();
@@ -72,7 +72,7 @@ describe('<FieldEditorFlyoutContent />', () => {
 
     expect(onSave).toHaveBeenCalled();
     const fieldReturned = onSave.mock.calls[onSave.mock.calls.length - 1][0];
-    expect(fieldReturned).toEqual(field);
+    expect(fieldReturned).toEqual({ ...field, format: null });
   });
 
   test('should accept an onCancel prop', async () => {
@@ -133,6 +133,7 @@ describe('<FieldEditorFlyoutContent />', () => {
         name: 'someName',
         type: 'keyword', // default to keyword
         script: { source: 'echo("hello")' },
+        format: null,
       });
 
       // Change the type and make sure it is forwarded
@@ -149,6 +150,7 @@ describe('<FieldEditorFlyoutContent />', () => {
         name: 'someName',
         type: 'date',
         script: { source: 'echo("hello")' },
+        format: null,
       });
     });
 
@@ -186,6 +188,7 @@ describe('<FieldEditorFlyoutContent />', () => {
         name: 'someName',
         type: 'keyword',
         script: { source: 'echo("hello")' },
+        format: null,
       });
     });
   });

src/plugins/data_view_field_editor/__jest__/client_integration/field_editor_flyout_preview.test.ts

@@ -220,7 +220,7 @@ describe('Field editor Preview panel', () => {
     test('should **not** display an empty prompt editing a document with a script', async () => {
       const field = {
         name: 'foo',
-        type: 'ip',
+        type: 'ip' as const,
         script: {
           source: 'emit("hello world")',
         },
@@ -241,7 +241,7 @@ describe('Field editor Preview panel', () => {
     test('should **not** display an empty prompt editing a document with format defined', async () => {
       const field = {
         name: 'foo',
-        type: 'ip',
+        type: 'ip' as const,
         format: {
           id: 'upper',
           params: {},

src/plugins/data_view_field_editor/__jest__/client_integration/helpers/setup_environment.tsx

@@ -127,7 +127,7 @@ export const WithFieldEditorDependencies =
       uiSettings: uiSettingsServiceMock.createStartContract(),
       fieldTypeToProcess: 'runtime',
       existingConcreteFields: [],
-      namesNotAllowed: [],
+      namesNotAllowed: { fields: [], runtimeComposites: [] },
       links: {
         runtimePainless: 'https://elastic.co',
       },

src/plugins/data_view_field_editor/public/components/field_editor/composite_editor.tsx

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+export const CompositeEditor = () => <>hi</>;

src/plugins/data_view_field_editor/public/components/field_editor/constants.ts

@@ -38,4 +38,8 @@ export const RUNTIME_FIELD_OPTIONS: Array<EuiComboBoxOptionOption<RuntimeType>>
     label: 'Geo point',
     value: 'geo_point',
   },
+  {
+    label: 'Composite',
+    value: 'composite',
+  },
 ];

src/plugins/data_view_field_editor/public/components/field_editor/field_detail.tsx

@@ -0,0 +1,117 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiCode } from '@elastic/eui';
+import { AdvancedParametersSection } from './advanced_parameters_section';
+import { FormRow } from './form_row';
+import { PopularityField, FormatField, ScriptField, CustomLabelField } from './form_fields';
+import { useFieldEditorContext } from '../field_editor_context';
+
+const geti18nTexts = (): {
+  [key: string]: { title: string; description: JSX.Element | string };
+} => ({
+  customLabel: {
+    title: i18n.translate('indexPatternFieldEditor.editor.form.customLabelTitle', {
+      defaultMessage: 'Set custom label',
+    }),
+    description: i18n.translate('indexPatternFieldEditor.editor.form.customLabelDescription', {
+      defaultMessage: `Create a label to display in place of the field name in Discover, Maps, and Visualize. Useful for shortening a long field name.  Queries and filters use the original field name.`,
+    }),
+  },
+  value: {
+    title: i18n.translate('indexPatternFieldEditor.editor.form.valueTitle', {
+      defaultMessage: 'Set value',
+    }),
+    description: (
+      <FormattedMessage
+        id="indexPatternFieldEditor.editor.form.valueDescription"
+        defaultMessage="Set a value for the field instead of retrieving it from the field with the same name in {source}."
+        values={{
+          source: <EuiCode>{'_source'}</EuiCode>,
+        }}
+      />
+    ),
+  },
+
+  format: {
+    title: i18n.translate('indexPatternFieldEditor.editor.form.formatTitle', {
+      defaultMessage: 'Set format',
+    }),
+    description: i18n.translate('indexPatternFieldEditor.editor.form.formatDescription', {
+      defaultMessage: `Set your preferred format for displaying the value. Changing the format can affect the value and prevent highlighting in Discover.`,
+    }),
+  },
+
+  popularity: {
+    title: i18n.translate('indexPatternFieldEditor.editor.form.popularityTitle', {
+      defaultMessage: 'Set popularity',
+    }),
+    description: i18n.translate('indexPatternFieldEditor.editor.form.popularityDescription', {
+      defaultMessage: `Adjust the popularity to make the field appear higher or lower in the fields list.  By default, Discover orders fields from most selected to least selected.`,
+    }),
+  },
+});
+
+export const FieldDetail = ({}) => {
+  const { links, existingConcreteFields, fieldTypeToProcess } = useFieldEditorContext();
+  const i18nTexts = geti18nTexts();
+  return (
+    <>
+      {/* Set custom label */}
+      <FormRow
+        title={i18nTexts.customLabel.title}
+        description={i18nTexts.customLabel.description}
+        formFieldPath="__meta__.isCustomLabelVisible"
+        data-test-subj="customLabelRow"
+        withDividerRule
+      >
+        <CustomLabelField />
+      </FormRow>
+
+      {/* Set value */}
+      {fieldTypeToProcess === 'runtime' && (
+        <FormRow
+          title={i18nTexts.value.title}
+          description={i18nTexts.value.description}
+          formFieldPath="__meta__.isValueVisible"
+          data-test-subj="valueRow"
+          withDividerRule
+        >
+          <ScriptField existingConcreteFields={existingConcreteFields} links={links} />
+        </FormRow>
+      )}
+
+      {/* Set custom format */}
+      <FormRow
+        title={i18nTexts.format.title}
+        description={i18nTexts.format.description}
+        formFieldPath="__meta__.isFormatVisible"
+        data-test-subj="formatRow"
+        withDividerRule
+      >
+        <FormatField />
+      </FormRow>
+
+      {/* Advanced settings */}
+      <AdvancedParametersSection>
+        <FormRow
+          title={i18nTexts.popularity.title}
+          description={i18nTexts.popularity.description}
+          formFieldPath="__meta__.isPopularityVisible"
+          data-test-subj="popularityRow"
+          withDividerRule
+        >
+          <PopularityField />
+        </FormRow>
+      </AdvancedParametersSection>
+    </>
+  );
+};