From d22ff1fbbe00a64e3ae0cf64fba948dd830d56c1 Mon Sep 17 00:00:00 2001
From: Jusheng Huang <117657272+viajes7@users.noreply.github.com>
Date: Fri, 20 Sep 2024 17:44:40 +0800
Subject: [PATCH] [Index Management] Fix error in rendering createField
 required parameters (#192834)

---
 .../fields/create_field/create_field.tsx      | 85 +++++++++----------
 .../required_parameters_forms/index.ts        | 14 ++-
 2 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx
index 23f54382f36b9..1daa437356546 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx
@@ -22,7 +22,7 @@ import { EUI_SIZE, TYPE_DEFINITION } from '../../../../constants';
 import { fieldSerializer } from '../../../../lib';
 import { isSemanticTextField } from '../../../../lib/utils';
 import { useDispatch } from '../../../../mappings_state_context';
-import { Form, FormDataProvider, useForm, useFormData } from '../../../../shared_imports';
+import { Form, useForm, useFormData } from '../../../../shared_imports';
 import { Field, MainType, NormalizedFields } from '../../../../types';
 import { NameParameter, SubTypeParameter, TypeParameter } from '../../field_parameters';
 import { ReferenceFieldSelects } from '../../field_parameters/reference_field_selects';
@@ -84,7 +84,7 @@ export const CreateField = React.memo(function CreateFieldComponent({
     id: 'create-field',
   });
 
-  useFormData({ form });
+  const [{ type, subType }] = useFormData({ form, watch: ['type', 'subType'] });
 
   const { subscribe } = form;
 
@@ -161,23 +161,14 @@ export const CreateField = React.memo(function CreateFieldComponent({
       </EuiFlexItem>
 
       {/* Field subType (if any) */}
-      <FormDataProvider pathsToWatch="type">
-        {({ type }) => {
-          if (type === undefined) {
-            return null;
-          }
-
-          const [fieldType] = type;
-          return (
-            <SubTypeParameter
-              key={fieldType?.value}
-              type={fieldType?.value}
-              isMultiField={isMultiField ?? false}
-              isRootLevelField={isRootLevelField}
-            />
-          );
-        }}
-      </FormDataProvider>
+      {type !== undefined && (
+        <SubTypeParameter
+          key={type?.[0]?.value}
+          type={type?.[0]?.value}
+          isMultiField={isMultiField ?? false}
+          isRootLevelField={isRootLevelField}
+        />
+      )}
 
       {/* Field reference_field for semantic_text field type */}
       {isSemanticText && (
@@ -193,6 +184,34 @@ export const CreateField = React.memo(function CreateFieldComponent({
     </EuiFlexGroup>
   );
 
+  const renderRequiredParametersForm = () => {
+    if (!type) return null;
+
+    const RequiredParametersForm = getRequiredParametersFormForType(
+      type?.[0]?.value,
+      subType?.[0]?.value
+    );
+
+    if (!RequiredParametersForm) {
+      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>
+    );
+  };
+
   const renderFormActions = () => (
     <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
       {(isCancelable !== false || isAddingFields) && (
@@ -251,33 +270,7 @@ export const CreateField = React.memo(function CreateFieldComponent({
             <div className="mappingsEditor__createFieldContent">
               {renderFormFields()}
 
-              <FormDataProvider pathsToWatch={['type', 'subType']}>
-                {({ type, subType }) => {
-                  const RequiredParametersForm = getRequiredParametersFormForType(
-                    type?.[0]?.value,
-                    subType?.[0]?.value
-                  );
-
-                  if (!RequiredParametersForm) {
-                    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>
-                  );
-                }}
-              </FormDataProvider>
+              {renderRequiredParametersForm()}
 
               {isSemanticText && (
                 <SelectInferenceId createInferenceEndpoint={createInferenceEndpoint} />
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/index.ts
index 1379b7db68404..2462db8fdf875 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/index.ts
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/index.ts
@@ -6,6 +6,7 @@
  */
 
 import { ComponentType } from 'react';
+import { TYPE_DEFINITION } from '../../../../../constants';
 import { MainType, SubType, DataType, NormalizedFields } from '../../../../../types';
 
 import { AliasTypeRequiredParameters } from './alias_type';
@@ -27,5 +28,14 @@ const typeToParametersFormMap: { [key in DataType]?: ComponentType<any> } = {
 export const getRequiredParametersFormForType = (
   type: MainType,
   subType?: SubType
-): ComponentType<ComponentProps> | undefined =>
-  typeToParametersFormMap[subType as DataType] || typeToParametersFormMap[type];
+): ComponentType<ComponentProps> | undefined => {
+  if (subType) {
+    const typeDefinition = TYPE_DEFINITION[type];
+
+    return typeDefinition.subTypes?.types.includes(subType)
+      ? typeToParametersFormMap[subType]
+      : undefined;
+  }
+
+  return typeToParametersFormMap[type];
+};