Require runtime type to be defined before adding the field to the tree.

elastic · Sep 15, 2020 · ef9e325 · ef9e325
1 parent 1e7b0fc
commit ef9e325
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 33 deletions.
diff --git a/...ts/mappings_editor/components/document_fields/field_parameters/runtime_type_parameter.tsx b/...ts/mappings_editor/components/document_fields/field_parameters/runtime_type_parameter.tsx
@@ -6,34 +6,43 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFormRow, EuiComboBox, EuiSpacer } from '@elastic/eui';
+import { EuiFormRow, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 
 import { UseField } from '../../../shared_imports';
-import { DataType, ComboBoxOption } from '../../../types';
+import { DataType } from '../../../types';
 import { getFieldConfig } from '../../../lib';
 import { RUNTIME_FIELD_OPTIONS, TYPE_DEFINITION } from '../../../constants';
-import { FieldDescriptionSection } from '../fields/edit_field';
+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 ComboBoxOption[])[0]!.value as DataType];
+        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.runtimeTyeField.placeholderLabel',
+                  'xpack.idxMgmt.mappingsEditor.runtimeType.placeholderLabel',
                   {
                     defaultMessage: 'Select a type',
                   }
                 )}
                 singleSelection={{ asPlainText: true }}
                 options={RUNTIME_FIELD_OPTIONS}
-                selectedOptions={value as ComboBoxOption[]}
+                selectedOptions={value as EuiComboBoxOptionOption[]}
                 onChange={setValue}
                 isClearable={false}
                 fullWidth
@@ -42,15 +51,11 @@ export const RuntimeTypeParameter = () => {
 
             {/* Field description */}
             {typeDefinition && (
-              <>
-                <FieldDescriptionSection isMultiField={false}>
-                  {typeDefinition.description?.() as JSX.Element}
-                </FieldDescriptionSection>
-
-                <EuiSpacer size="l" />
-              </>
+              <FieldDescriptionSection isMultiField={false}>
+                {typeDefinition.description?.() as JSX.Element}
+              </FieldDescriptionSection>
             )}
-          </>
+          </EditFieldFormRow>
         );
       }}
     </UseField>

diff --git a/...omponents/mappings_editor/components/document_fields/fields/create_field/create_field.tsx b/...omponents/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>
                 );
               }}

diff --git a/..._editor/components/document_fields/fields/create_field/required_parameters_forms/index.ts b/..._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 =>

diff --git a/...components/document_fields/fields/create_field/required_parameters_forms/runtime_type.tsx b/...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 />;
+};
diff --git a/...components/mappings_editor/components/document_fields/fields/field_types/runtime_type.tsx b/...components/mappings_editor/components/document_fields/fields/field_types/runtime_type.tsx
@@ -11,11 +11,9 @@ import { BasicParametersSection } from '../edit_field';
 
 export const RuntimeType = () => {
   return (
-    <>
-      <BasicParametersSection>
-        <RuntimeTypeParameter />
-        <PainlessScriptParameter />
-      </BasicParametersSection>
-    </>
+    <BasicParametersSection>
+      <RuntimeTypeParameter />
+      <PainlessScriptParameter />
+    </BasicParametersSection>
   );
 };
diff --git a/...agement/public/application/components/mappings_editor/constants/data_types_definition.tsx b/...agement/public/application/components/mappings_editor/constants/data_types_definition.tsx
@@ -18,9 +18,10 @@ export const TYPE_DEFINITION: { [key in DataType]: DataTypeDefinition } = {
     label: i18n.translate('xpack.idxMgmt.mappingsEditor.dataType.runtimeFieldDescription', {
       defaultMessage: 'Runtime',
     }),
-    documentation: {
-      main: '/runtime_field.html',
-    },
+    // TODO: Add this once the page exists.
+    // documentation: {
+    //   main: '/runtime_field.html',
+    // },
     description: () => (
       <p>
         <FormattedMessage

diff --git a/...agement/public/application/components/mappings_editor/constants/parameters_definition.tsx b/...agement/public/application/components/mappings_editor/constants/parameters_definition.tsx
@@ -191,7 +191,7 @@ export const PARAMETERS_DEFINITION: { [key in ParameterName]: ParameterDefinitio
     fieldConfig: {
       type: FIELD_TYPES.COMBO_BOX,
       label: i18n.translate('xpack.idxMgmt.mappingsEditor.parameters.runtimeTypeLabel', {
-        defaultMessage: 'Emitted type',
+        defaultMessage: 'Type',
       }),
       defaultValue: 'keyword',
       deserializer: (fieldType: RuntimeType | undefined) => {

diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.ts
@@ -78,12 +78,11 @@ const getTypeLabel = (type?: DataType): string => {
 };
 
 export const getTypeLabelFromField = (field: Field) => {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const { type, runtime_type } = field;
+  const { type, runtime_type: runtimeType } = field;
   const typeLabel = getTypeLabel(type);
 
   if (type === 'runtime') {
-    const runtimeTypeLabel = getTypeLabel(runtime_type);
+    const runtimeTypeLabel = getTypeLabel(runtimeType);
     return `${typeLabel} ${runtimeTypeLabel}`;
   }
 

diff --git a/x-pack/plugins/index_management/public/application/index.tsx b/x-pack/plugins/index_management/public/application/index.tsx
@@ -32,6 +32,7 @@ export const renderApp = (
   const { Context: I18nContext } = i18n;
   const { services, history, setBreadcrumbs, uiSettings } = dependencies;
 
+  // uiSettings is required by the CodeEditor component used to edit runtime field Painless scripts.
   const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
     uiSettings,
   });