Improve layout of create and edit forms.

elastic · Sep 24, 2020 · ca02afb · ca02afb
1 parent 4449800
commit ca02afb
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 18 deletions.
diff --git a/...mappings_editor/components/document_fields/field_parameters/painless_script_parameter.tsx b/...mappings_editor/components/document_fields/field_parameters/painless_script_parameter.tsx
@@ -5,19 +5,25 @@
  */
 
 import React from 'react';
-import { EuiFormRow } from '@elastic/eui';
+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';
 
-export const PainlessScriptParameter = () => {
+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;
 
-        return (
+        const field = (
           <EuiFormRow label={scriptField.label} error={error} isInvalid={isInvalid} fullWidth>
             <CodeEditor
               languageId="painless"
@@ -39,6 +45,35 @@ export const PainlessScriptParameter = () => {
             />
           </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>
   );

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,32 +6,33 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFormRow, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
+import {
+  EuiFormRow,
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiDescribedFormGroup,
+} 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';
 
-export const RuntimeTypeParameter = () => {
+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];
 
-        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}
-          >
+        const field = (
+          <>
             <EuiFormRow label={label} fullWidth>
               <EuiComboBox
                 placeholder={i18n.translate(
@@ -55,7 +56,36 @@ export const RuntimeTypeParameter = () => {
                 {typeDefinition.description?.() as JSX.Element}
               </FieldDescriptionSection>
             )}
-          </EditFieldFormRow>
+          </>
+        );
+
+        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>

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
@@ -12,8 +12,8 @@ import { BasicParametersSection } from '../edit_field';
 export const RuntimeType = () => {
   return (
     <BasicParametersSection>
-      <RuntimeTypeParameter />
-      <PainlessScriptParameter />
+      <RuntimeTypeParameter stack={true} />
+      <PainlessScriptParameter stack={true} />
     </BasicParametersSection>
   );
 };