Fix field forms (#7595)

@lucasbordeau forms are broken! revert - #7363 used useRelationSettingsFormInitialValues hook from that commit. TODO - figure out a way to change the relation name label from singular to plural and vice versa, until it is edited. related issue - #7355 --------- Co-authored-by: Lucas Bordeau <[email protected]>
twentyhq · Oct 11, 2024 · d350143 · d350143
1 parent 7e7784f
commit d350143
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 66 deletions.
diff --git a/...dules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx b/...dules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx
@@ -3,14 +3,10 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { z } from 'zod';
 
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fieldMetadataItemSchema';
 import { getErrorMessageFromError } from '@/settings/data-model/fields/forms/utils/errorMessages';
-import { RelationType } from '@/settings/data-model/types/RelationType';
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { TextInput } from '@/ui/input/components/TextInput';
-import { useEffect, useState } from 'react';
-import { RelationDefinitionType } from '~/generated-metadata/graphql';
 
 export const settingsDataModelFieldIconLabelFormSchema = (
   existingOtherLabels: string[] = [],
@@ -36,47 +32,19 @@ type SettingsDataModelFieldIconLabelFormProps = {
   disabled?: boolean;
   fieldMetadataItem?: FieldMetadataItem;
   maxLength?: number;
-  relationObjectMetadataItem?: ObjectMetadataItem;
-  relationType?: RelationType;
 };
 
 export const SettingsDataModelFieldIconLabelForm = ({
   disabled,
   fieldMetadataItem,
   maxLength,
-  relationObjectMetadataItem,
-  relationType,
 }: SettingsDataModelFieldIconLabelFormProps) => {
   const {
     control,
     trigger,
     formState: { errors },
-    setValue,
   } = useFormContext<SettingsDataModelFieldIconLabelFormValues>();
 
-  const [labelEditedManually, setLabelEditedManually] = useState(false);
-  const [iconEditedManually, setIconEditedManually] = useState(false);
-
-  useEffect(() => {
-    if (labelEditedManually || !relationType) return;
-    const label = [
-      RelationDefinitionType.ManyToOne,
-      RelationDefinitionType.ManyToMany,
-    ].includes(relationType ?? RelationDefinitionType.OneToMany)
-      ? relationObjectMetadataItem?.labelPlural
-      : relationObjectMetadataItem?.labelSingular;
-    setValue('label', label ?? '');
-
-    if (iconEditedManually) return;
-    setValue('icon', relationObjectMetadataItem?.icon ?? 'IconUsers');
-  }, [
-    labelEditedManually,
-    iconEditedManually,
-    relationObjectMetadataItem,
-    setValue,
-    relationType,
-  ]);
-
   return (
     <StyledInputsContainer>
       <Controller
@@ -87,10 +55,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
           <IconPicker
             disabled={disabled}
             selectedIconKey={value ?? ''}
-            onChange={({ iconKey }) => {
-              setIconEditedManually(true);
-              onChange(iconKey);
-            }}
+            onChange={({ iconKey }) => onChange(iconKey)}
             variant="primary"
           />
         )}
@@ -104,7 +69,6 @@ export const SettingsDataModelFieldIconLabelForm = ({
             placeholder="Employees"
             value={value}
             onChange={(e) => {
-              setLabelEditedManually(true);
               onChange(e);
               trigger('label');
             }}

diff --git a/...ttings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx b/...ttings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx
@@ -5,18 +5,17 @@ import { z } from 'zod';
 
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation';
 import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fieldMetadataItemSchema';
 import { FIELD_NAME_MAXIMUM_LENGTH } from '@/settings/data-model/constants/FieldNameMaximumLength';
 import { RELATION_TYPES } from '@/settings/data-model/constants/RelationTypes';
 import { useRelationSettingsFormInitialValues } from '@/settings/data-model/fields/forms/relation/hooks/useRelationSettingsFormInitialValues';
-import { SettingsDataModelFieldPreviewCardProps } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
 import { RelationType } from '@/settings/data-model/types/RelationType';
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { Select } from '@/ui/input/components/Select';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { useEffect, useState } from 'react';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
 
 export const settingsDataModelFieldRelationFormSchema = z.object({
@@ -41,7 +40,7 @@ export type SettingsDataModelFieldRelationFormValues = z.infer<
 
 type SettingsDataModelFieldRelationFormProps = {
   fieldMetadataItem: Pick<FieldMetadataItem, 'type'>;
-  objectMetadataItem: SettingsDataModelFieldPreviewCardProps['objectMetadataItem'];
+  objectMetadataItem: ObjectMetadataItem;
 };
 
 const StyledContainer = styled.div`
@@ -84,17 +83,12 @@ export const SettingsDataModelFieldRelationForm = ({
   fieldMetadataItem,
   objectMetadataItem,
 }: SettingsDataModelFieldRelationFormProps) => {
-  const {
-    control,
-    watch: watchFormValue,
-    setValue,
-  } = useFormContext<SettingsDataModelFieldRelationFormValues>();
+  const { control, watch: watchFormValue } =
+    useFormContext<SettingsDataModelFieldRelationFormValues>();
   const { getIcon } = useIcons();
   const { objectMetadataItems, findObjectMetadataItemById } =
     useFilteredObjectMetadataItems();
 
-  const [labelEditedManually, setLabelEditedManually] = useState(false);
-
   const {
     disableFieldEdition,
     disableRelationEdition,
@@ -111,20 +105,6 @@ export const SettingsDataModelFieldRelationForm = ({
   );
 
   const isMobile = useIsMobile();
-  const relationType = watchFormValue('relation.type');
-
-  useEffect(() => {
-    if (labelEditedManually) return;
-    setValue(
-      'relation.field.label',
-      [
-        RelationDefinitionType.ManyToMany,
-        RelationDefinitionType.ManyToOne,
-      ].includes(relationType)
-        ? objectMetadataItem.labelPlural
-        : objectMetadataItem.labelSingular,
-    );
-  }, [labelEditedManually, objectMetadataItem, relationType, setValue]);
 
   return (
     <StyledContainer>
@@ -195,10 +175,7 @@ export const SettingsDataModelFieldRelationForm = ({
               disabled={disableFieldEdition}
               placeholder="Field name"
               value={value}
-              onChange={(newValue) => {
-                setLabelEditedManually(true);
-                onChange(newValue);
-              }}
+              onChange={onChange}
               fullWidth
               maxLength={FIELD_NAME_MAXIMUM_LENGTH}
             />

diff --git a/...model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx b/...model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx
@@ -60,7 +60,10 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({
     initialRelationObjectMetadataItem,
     initialRelationType,
     initialRelationFieldMetadataItem,
-  } = useRelationSettingsFormInitialValues({ fieldMetadataItem });
+  } = useRelationSettingsFormInitialValues({
+    fieldMetadataItem,
+    objectMetadataItem,
+  });
 
   const relationObjectMetadataId = watchFormValue(
     'relation.objectMetadataId',