Add beta badge.

elastic · Sep 25, 2020 · 1b01e7e · 1b01e7e
1 parent ca02afb
commit 1b01e7e
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 26 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
@@ -11,6 +11,7 @@ import {
   EuiComboBox,
   EuiComboBoxOptionOption,
   EuiDescribedFormGroup,
+  EuiSpacer,
 } from '@elastic/eui';
 
 import { UseField } from '../../../shared_imports';
@@ -50,6 +51,8 @@ export const RuntimeTypeParameter = ({ stack }: Props) => {
               />
             </EuiFormRow>
 
+            <EuiSpacer size="m" />
+
             {/* Field description */}
             {typeDefinition && (
               <FieldDescriptionSection isMultiField={false}>

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
@@ -14,14 +14,16 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiOutsideClickDetector,
+  EuiSpacer,
 } from '@elastic/eui';
 
 import { useForm, Form, FormDataProvider } from '../../../../shared_imports';
-import { EUI_SIZE } from '../../../../constants';
+import { EUI_SIZE, TYPE_DEFINITION } from '../../../../constants';
 import { useDispatch } from '../../../../mappings_state_context';
 import { fieldSerializer } from '../../../../lib';
-import { Field, NormalizedFields } from '../../../../types';
+import { Field, NormalizedFields, MainType } from '../../../../types';
 import { NameParameter, TypeParameter, SubTypeParameter } from '../../field_parameters';
+import { FieldBetaBadge } from '../field_beta_badge';
 import { getRequiredParametersFormForType } from './required_parameters_forms';
 
 const formWrapper = (props: any) => <form {...props} />;
@@ -204,8 +206,17 @@ export const CreateField = React.memo(function CreateFieldComponent({
                   return null;
                 }
 
+                const typeDefinition = TYPE_DEFINITION[type?.[0].value as MainType];
+
                 return (
                   <div className="mappingsEditor__createFieldRequiredProps">
+                    {typeDefinition.isBeta ? (
+                      <>
+                        <FieldBetaBadge />
+                        <EuiSpacer size="m" />
+                      </>
+                    ) : null}
+
                     <RequiredParametersForm key={subType ?? type} allFields={allFields} />
                   </div>
                 );

diff --git a/...s/mappings_editor/components/document_fields/fields/edit_field/edit_field_header_form.tsx b/...s/mappings_editor/components/document_fields/fields/edit_field/edit_field_header_form.tsx
@@ -5,12 +5,13 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { FormDataProvider } from '../../../../shared_imports';
-import { MainType, SubType, Field } from '../../../../types';
+import { MainType, SubType, Field, DataTypeDefinition } from '../../../../types';
 import { TYPE_DEFINITION } from '../../../../constants';
 import { NameParameter, TypeParameter, SubTypeParameter } from '../../field_parameters';
+import { FieldBetaBadge } from '../field_beta_badge';
 import { FieldDescriptionSection } from './field_description_section';
 
 interface Props {
@@ -19,6 +20,25 @@ interface Props {
   isMultiField: boolean;
 }
 
+const getTypeDefinition = (type: MainType, subType: SubType): DataTypeDefinition | undefined => {
+  if (!type) {
+    return;
+  }
+
+  const typeDefinition = TYPE_DEFINITION[type];
+  const hasSubType = typeDefinition.subTypes !== undefined;
+
+  if (hasSubType) {
+    if (subType) {
+      return TYPE_DEFINITION[subType];
+    }
+
+    return;
+  }
+
+  return typeDefinition;
+};
+
 export const EditFieldHeaderForm = React.memo(
   ({ defaultValue, isRootLevelField, isMultiField }: Props) => {
     return (
@@ -56,27 +76,29 @@ export const EditFieldHeaderForm = React.memo(
         </EuiFlexGroup>
 
         {/* Field description */}
-        <FieldDescriptionSection isMultiField={isMultiField}>
-          <FormDataProvider pathsToWatch={['type', 'subType']}>
-            {({ type, subType }) => {
-              if (!type) {
-                return null;
-              }
-              const typeDefinition = TYPE_DEFINITION[type[0].value as MainType];
-              const hasSubType = typeDefinition.subTypes !== undefined;
-
-              if (hasSubType) {
-                if (subType) {
-                  const subTypeDefinition = TYPE_DEFINITION[subType as SubType];
-                  return (subTypeDefinition?.description?.() as JSX.Element) ?? null;
-                }
-                return null;
-              }
+        <FormDataProvider pathsToWatch={['type', 'subType']}>
+          {({ type, subType }) => {
+            const typeDefinition = getTypeDefinition(
+              type[0].value as MainType,
+              subType && (subType[0].value as SubType)
+            );
+            const description = (typeDefinition?.description?.() as JSX.Element) ?? null;
 
-              return typeDefinition.description?.() as JSX.Element;
-            }}
-          </FormDataProvider>
-        </FieldDescriptionSection>
+            return (
+              <>
+                <EuiSpacer size="l" />
+
+                {typeDefinition?.isBeta && <FieldBetaBadge />}
+
+                <EuiSpacer size="s" />
+
+                <FieldDescriptionSection isMultiField={isMultiField}>
+                  {description}
+                </FieldDescriptionSection>
+              </>
+            );
+          }}
+        </FormDataProvider>
       </>
     );
   }

diff --git a/...appings_editor/components/document_fields/fields/edit_field/field_description_section.tsx b/...appings_editor/components/document_fields/fields/edit_field/field_description_section.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-import { EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 interface Props {
@@ -19,7 +19,6 @@ export const FieldDescriptionSection = ({ children, isMultiField }: Props) => {
 
   return (
     <section>
-      <EuiSpacer size="l" />
       <EuiText size="s" color="subdued">
         {children}
 

diff --git a/...ication/components/mappings_editor/components/document_fields/fields/field_beta_badge.tsx b/...ication/components/mappings_editor/components/document_fields/fields/field_beta_badge.tsx
@@ -0,0 +1,21 @@
+/*
+ * 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 { EuiBetaBadge } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export const FieldBetaBadge = () => {
+  const betaText = i18n.translate('xpack.idxMgmt.mappingsEditor.fieldBetaBadgeLabel', {
+    defaultMessage: 'Beta',
+  });
+
+  const tooltipText = i18n.translate('xpack.idxMgmt.mappingsEditor.fieldBetaBadgeTooltip', {
+    defaultMessage: 'This field type is not GA. Please help us by reporting any bugs.',
+  });
+
+  return <EuiBetaBadge label={betaText} tooltipContent={tooltipText} />;
+};
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
@@ -15,6 +15,7 @@ import { MainType, SubType, DataType, DataTypeDefinition } from '../types';
 export const TYPE_DEFINITION: { [key in DataType]: DataTypeDefinition } = {
   runtime: {
     value: 'runtime',
+    isBeta: true,
     label: i18n.translate('xpack.idxMgmt.mappingsEditor.dataType.runtimeFieldDescription', {
       defaultMessage: 'Runtime',
     }),

diff --git a/...s/index_management/public/application/components/mappings_editor/types/document_fields.ts b/...s/index_management/public/application/components/mappings_editor/types/document_fields.ts
@@ -19,6 +19,7 @@ export interface DataTypeDefinition {
   };
   subTypes?: { label: string; types: SubType[] };
   description?: () => ReactNode;
+  isBeta?: boolean;
 }
 
 export interface ParameterDefinition {