admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: use react-hook-form for Field type config forms (#5326)

Browse Source 
Closes #4295

Note: for the sake of an easier code review, I did not rename/move some
files and added "todo" comments instead so Github is able to match those
files with their previous version.
This commit is contained in:
Thaïs
2024-05-07 21:07:56 +02:00
committed by GitHub
parent b7a2e72c32
commit bb995d5488
34 changed files with 714 additions and 1068 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
View File

@ -4,25 +4,27 @@ import { useNavigate, useParams } from 'react-router-dom';
import styled from '@emotion/styled';
import { zodResolver } from '@hookform/resolvers/zod';
import { isNonEmptyString } from '@sniptt/guards';
import omit from 'lodash.omit';
import pick from 'lodash.pick';
import { IconArchive, IconSettings } from 'twenty-ui';
import { v4 } from 'uuid';
import { z } from 'zod';
import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
import { useUpdateOneFieldMetadataItem } from '@/object-metadata/hooks/useUpdateOneFieldMetadataItem';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { formatFieldMetadataItemInput } from '@/object-metadata/utils/formatFieldMetadataItemInput';
import { getFieldSlug } from '@/object-metadata/utils/getFieldSlug';
import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsObjectFieldCurrencyFormValues } from '@/settings/data-model/components/SettingsObjectFieldCurrencyForm';
import { SettingsDataModelFieldAboutForm } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldAboutForm';
import { SettingsDataModelFieldSettingsFormCard } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard';
import { SettingsDataModelFieldTypeSelect } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect';
import { useFieldMetadataForm } from '@/settings/data-model/fields/forms/hooks/useFieldMetadataForm';
import { settingsFieldFormSchema } from '@/settings/data-model/fields/forms/validation-schemas/settingsFieldFormSchema';
import { isFieldTypeSupportedInSettings } from '@/settings/data-model/utils/isFieldTypeSupportedInSettings';
import { AppPath } from '@/types/AppPath';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
@ -30,10 +32,7 @@ import { Button } from '@/ui/input/button/components/Button';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import {
FieldMetadataType,
RelationMetadataType,
} from '~/generated-metadata/graphql';
import { FieldMetadataType } from '~/generated-metadata/graphql';
type SettingsDataModelFieldEditFormValues = z.infer<
typeof settingsFieldFormSchema
@ -66,117 +65,38 @@ export const SettingsObjectFieldEdit = () => {
const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
const { disableMetadataField, editMetadataField } = useFieldMetadataItem();
const { disableMetadataField } = useFieldMetadataItem();
const activeMetadataField = activeObjectMetadataItem?.fields.find(
(metadataField) =>
metadataField.isActive && getFieldSlug(metadataField) === fieldSlug,
);
const getRelationMetadata = useGetRelationMetadata();
const {
relationFieldMetadataItem,
relationObjectMetadataItem,
relationType,
} =
const { relationFieldMetadataItem } =
useMemo(
() =>
activeMetadataField
? getRelationMetadata({
fieldMetadataItem: activeMetadataField,
})
? getRelationMetadata({ fieldMetadataItem: activeMetadataField })
: null,
[activeMetadataField, getRelationMetadata],
) ?? {};
const { updateOneFieldMetadataItem } = useUpdateOneFieldMetadataItem();
const formConfig = useForm<SettingsDataModelFieldEditFormValues>({
mode: 'onTouched',
resolver: zodResolver(settingsFieldFormSchema),
});
const {
formValues,
handleFormChange,
hasFieldFormChanged,
hasDefaultValueChanged,
hasFormChanged,
hasRelationFormChanged,
hasSelectFormChanged,
hasMultiSelectFormChanged,
initForm,
isInitialized,
isValid,
validatedFormValues,
} = useFieldMetadataForm();
useEffect(() => {
if (!activeObjectMetadataItem || !activeMetadataField) {
navigate(AppPath.NotFound);
return;
}
}, [activeMetadataField, activeObjectMetadataItem, navigate]);
const { defaultValue } = activeMetadataField;
if (!activeObjectMetadataItem || !activeMetadataField) return null;
const currencyDefaultValue =
activeMetadataField.type === FieldMetadataType.Currency
? (defaultValue as SettingsObjectFieldCurrencyFormValues | undefined)
: undefined;
const selectOptions = activeMetadataField.options?.map((option) => ({
...option,
isDefault: defaultValue === `'${option.value}'`,
}));
selectOptions?.sort(
(optionA, optionB) => optionA.position - optionB.position,
);
const multiSelectOptions = activeMetadataField.options?.map((option) => ({
...option,
isDefault: defaultValue?.includes(`'${option.value}'`) || false,
}));
multiSelectOptions?.sort(
(optionA, optionB) => optionA.position - optionB.position,
);
const fieldType = activeMetadataField.type;
const isFieldTypeSupported = isFieldTypeSupportedInSettings(fieldType);
if (!isFieldTypeSupported) return;
initForm({
type: fieldType,
...(currencyDefaultValue ? { currency: currencyDefaultValue } : {}),
relation: {
field: {
icon: relationFieldMetadataItem?.icon,
label: relationFieldMetadataItem?.label || '',
},
objectMetadataId: relationObjectMetadataItem?.id || '',
type: relationType || RelationMetadataType.OneToMany,
},
defaultValue: activeMetadataField.defaultValue,
...(selectOptions?.length ? { select: selectOptions } : {}),
...(multiSelectOptions?.length
? { multiSelect: multiSelectOptions }
: {}),
});
}, [
activeMetadataField,
activeObjectMetadataItem,
initForm,
navigate,
relationFieldMetadataItem?.icon,
relationFieldMetadataItem?.label,
relationObjectMetadataItem?.id,
relationType,
]);
if (!isInitialized || !activeObjectMetadataItem || !activeMetadataField)
return null;
const canSave =
formConfig.formState.isValid &&
isValid &&
(formConfig.formState.isDirty || hasFormChanged);
const canSave = formConfig.formState.isValid && formConfig.formState.isDirty;
const isLabelIdentifier = isLabelIdentifierField({
fieldMetadataItem: activeMetadataField,
@ -184,43 +104,37 @@ export const SettingsObjectFieldEdit = () => {
});
const handleSave = async () => {
if (!validatedFormValues) return;
const formValues = formConfig.getValues();
const { dirtyFields } = formConfig.formState;
try {
if (
validatedFormValues.type === FieldMetadataType.Relation &&
formValues.type === FieldMetadataType.Relation &&
isNonEmptyString(relationFieldMetadataItem?.id) &&
hasRelationFormChanged
'relation' in dirtyFields
) {
await editMetadataField({
icon: validatedFormValues.relation.field.icon,
id: relationFieldMetadataItem?.id,
label: validatedFormValues.relation.field.label,
type: validatedFormValues.type,
await updateOneFieldMetadataItem({
fieldMetadataIdToUpdate: relationFieldMetadataItem.id,
updatePayload: formValues.relation.field,
});
}
if (
Object.keys(dirtyFields).length > 0 ||
hasFieldFormChanged ||
hasSelectFormChanged ||
hasMultiSelectFormChanged ||
hasDefaultValueChanged
) {
await editMetadataField({
...formValues,
id: activeMetadataField.id,
defaultValue: validatedFormValues.defaultValue,
type: validatedFormValues.type,
options:
validatedFormValues.type === FieldMetadataType.Select
? validatedFormValues.select
: validatedFormValues.type === FieldMetadataType.MultiSelect
? validatedFormValues.multiSelect
: undefined,
const otherDirtyFields = omit(dirtyFields, 'relation');
if (Object.keys(otherDirtyFields).length > 0) {
const formattedInput = pick(
formatFieldMetadataItemInput(formValues),
Object.keys(otherDirtyFields),
);
const options = formattedInput.options?.map((option) => ({
...option,
id: option.id ?? v4(),
}));
await updateOneFieldMetadataItem({
fieldMetadataIdToUpdate: activeMetadataField.id,
updatePayload: { ...formattedInput, options },
});
}
@ -281,28 +195,13 @@ export const SettingsObjectFieldEdit = () => {
/>
<StyledSettingsObjectFieldTypeSelect
disabled
onChange={handleFormChange}
value={formValues.type}
fieldMetadataItem={activeMetadataField}
/>
<SettingsDataModelFieldSettingsFormCard
disableCurrencyForm
fieldMetadataItem={{
icon: formConfig.watch('icon'),
id: activeMetadataField.id,
label: formConfig.watch('label'),
name: activeMetadataField.name,
type: formValues.type,
}}
fieldMetadataItem={activeMetadataField}
objectMetadataItem={activeObjectMetadataItem}
onChange={handleFormChange}
relationFieldMetadataItem={relationFieldMetadataItem}
values={{
currency: formValues.currency,
relation: formValues.relation,
select: formValues.select,
multiSelect: formValues.multiSelect,
defaultValue: formValues.defaultValue,
}}
/>
</Section>
{!isLabelIdentifier && (

103
packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
View File

@ -22,7 +22,6 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
import { SettingsDataModelFieldAboutForm } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldAboutForm';
import { SettingsDataModelFieldSettingsFormCard } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard';
import { SettingsDataModelFieldTypeSelect } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect';
import { useFieldMetadataForm } from '@/settings/data-model/fields/forms/hooks/useFieldMetadataForm';
import { settingsFieldFormSchema } from '@/settings/data-model/fields/forms/validation-schemas/settingsFieldFormSchema';
import { SettingsSupportedFieldType } from '@/settings/data-model/types/SettingsSupportedFieldType';
import { AppPath } from '@/types/AppPath';
@ -51,25 +50,14 @@ export const SettingsObjectNewFieldStep2 = () => {
const { objectSlug = '' } = useParams();
const { enqueueSnackBar } = useSnackBar();
const {
findActiveObjectMetadataItemBySlug,
findObjectMetadataItemById,
findObjectMetadataItemByNamePlural,
} = useFilteredObjectMetadataItems();
const { findActiveObjectMetadataItemBySlug, findObjectMetadataItemById } =
useFilteredObjectMetadataItems();
const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
const { createMetadataField } = useFieldMetadataItem();
const cache = useApolloClient().cache;
const {
formValues,
handleFormChange,
initForm,
isValid,
validatedFormValues,
} = useFieldMetadataForm();
const formConfig = useForm<SettingsDataModelNewFieldFormValues>({
mode: 'onTouched',
resolver: zodResolver(settingsFieldFormSchema),
@ -78,23 +66,8 @@ export const SettingsObjectNewFieldStep2 = () => {
useEffect(() => {
if (!activeObjectMetadataItem) {
navigate(AppPath.NotFound);
return;
}
initForm({
relation: {
field: { icon: activeObjectMetadataItem.icon },
objectMetadataId:
findObjectMetadataItemByNamePlural('people')?.id || '',
},
});
}, [
activeObjectMetadataItem,
findObjectMetadataItemByNamePlural,
initForm,
navigate,
]);
}, [activeObjectMetadataItem, navigate]);
const [objectViews, setObjectViews] = useState<View[]>([]);
const [relationObjectViews, setRelationObjectViews] = useState<View[]>([]);
@ -116,12 +89,16 @@ export const SettingsObjectNewFieldStep2 = () => {
},
});
const relationObjectMetadataId = formConfig.watch(
'relation.objectMetadataId',
);
useFindManyRecords<View>({
objectNameSingular: CoreObjectNameSingular.View,
skip: !formValues.relation?.objectMetadataId,
skip: !relationObjectMetadataId,
filter: {
type: { eq: ViewType.Table },
objectMetadataId: { eq: formValues.relation?.objectMetadataId },
objectMetadataId: { eq: relationObjectMetadataId },
},
onCompleted: async (views) => {
if (isUndefinedOrNull(views)) return;
@ -135,37 +112,40 @@ export const SettingsObjectNewFieldStep2 = () => {
if (!activeObjectMetadataItem) return null;
const canSave = formConfig.formState.isValid && isValid;
const canSave = formConfig.formState.isValid;
const handleSave = async () => {
if (!validatedFormValues) return;
const formValues = formConfig.getValues();
try {
if (validatedFormValues.type === FieldMetadataType.Relation) {
if (
formValues.type === FieldMetadataType.Relation &&
'relation' in formValues
) {
const { relation: relationFormValues, ...fieldFormValues } = formValues;
const createdRelation = await createOneRelationMetadata({
relationType: validatedFormValues.relation.type,
field: pick(formValues, ['icon', 'label', 'description']),
relationType: relationFormValues.type,
field: pick(fieldFormValues, ['icon', 'label', 'description']),
objectMetadataId: activeObjectMetadataItem.id,
connect: {
field: {
icon: validatedFormValues.relation.field.icon,
label: validatedFormValues.relation.field.label,
icon: relationFormValues.field.icon,
label: relationFormValues.field.label,
},
objectMetadataId: validatedFormValues.relation.objectMetadataId,
objectMetadataId: relationFormValues.objectMetadataId,
},
});
const relationObjectMetadataItem = findObjectMetadataItemById(
validatedFormValues.relation.objectMetadataId,
relationFormValues.objectMetadataId,
);
objectViews.map(async (view) => {
const viewFieldToCreate = {
viewId: view.id,
fieldMetadataId:
validatedFormValues.relation.type === 'MANY_TO_ONE'
relationFormValues.type === 'MANY_TO_ONE'
? createdRelation.data?.createOneRelation.toFieldMetadataId
: createdRelation.data?.createOneRelation.fromFieldMetadataId,
position: activeObjectMetadataItem.fields.length,
@ -198,7 +178,7 @@ export const SettingsObjectNewFieldStep2 = () => {
const viewFieldToCreate = {
viewId: view.id,
fieldMetadataId:
validatedFormValues.relation.type === 'MANY_TO_ONE'
relationFormValues.type === 'MANY_TO_ONE'
? createdRelation.data?.createOneRelation.fromFieldMetadataId
: createdRelation.data?.createOneRelation.toFieldMetadataId,
position: relationObjectMetadataItem?.fields.length,
@ -229,22 +209,17 @@ export const SettingsObjectNewFieldStep2 = () => {
});
} else {
const createdMetadataField = await createMetadataField({
defaultValue:
validatedFormValues.type === FieldMetadataType.Currency
? {
amountMicros: null,
currencyCode: validatedFormValues.currency.currencyCode,
}
: validatedFormValues.defaultValue,
...formValues,
objectMetadataId: activeObjectMetadataItem.id,
type: validatedFormValues.type,
options:
validatedFormValues.type === FieldMetadataType.Select
? validatedFormValues.select
: validatedFormValues.type === FieldMetadataType.MultiSelect
? validatedFormValues.multiSelect
defaultValue:
formValues.type === FieldMetadataType.Currency
? {
...formValues.defaultValue,
amountMicros: null,
}
: 'defaultValue' in formValues
? formValues.defaultValue
: undefined,
objectMetadataId: activeObjectMetadataItem.id,
});
objectViews.map(async (view) => {
@ -335,24 +310,14 @@ export const SettingsObjectNewFieldStep2 = () => {
/>
<StyledSettingsObjectFieldTypeSelect
excludedFieldTypes={excludedFieldTypes}
onChange={handleFormChange}
value={formValues.type}
/>
<SettingsDataModelFieldSettingsFormCard
fieldMetadataItem={{
icon: formConfig.watch('icon'),
label: formConfig.watch('label') || 'Employees',
type: formValues.type,
type: formConfig.watch('type'),
}}
objectMetadataItem={activeObjectMetadataItem}
onChange={handleFormChange}
values={{
currency: formValues.currency,
relation: formValues.relation,
select: formValues.select,
multiSelect: formValues.multiSelect,
defaultValue: formValues.defaultValue,
}}
/>
</Section>
</SettingsPageContainer>