[Index Management] Fix error in rendering createField required parameters (#192834)

This commit is contained in:
Jusheng Huang 2024-09-20 17:44:40 +08:00 committed by GitHub
parent 04c3486878
commit d22ff1fbbe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 51 additions and 48 deletions

View file

@ -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} />

View file

@ -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];
};