Fix isLabelSyncedWithName toggle at object creation (#8646)

+ remove useless disableNameEdit prop (always has same value as disabled prop)
twentyhq · Nov 21, 2024 · cf73e32 · cf73e32
1 parent 3f98c2d
commit cf73e32
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/...y-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx b/...y-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx
@@ -186,8 +186,7 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
               description="Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms."
             />
             <SettingsDataModelObjectAboutForm
-              disabled={!objectMetadataItem.isCustom}
-              disableNameEdit={!objectMetadataItem.isCustom}
+              disableEdition={!objectMetadataItem.isCustom}
               objectMetadataItem={objectMetadataItem}
               onBlur={() => {
                 formConfig.handleSubmit(handleSave)();

diff --git a/...modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx b/...modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
@@ -43,8 +43,7 @@ type SettingsDataModelObjectAboutFormValues = z.infer<
 >;
 
 type SettingsDataModelObjectAboutFormProps = {
-  disabled?: boolean;
-  disableNameEdit?: boolean;
+  disableEdition?: boolean;
   objectMetadataItem?: ObjectMetadataItem;
   onBlur?: () => void;
 };
@@ -92,16 +91,19 @@ const infoCircleElementId = 'info-circle-id';
 export const IS_LABEL_SYNCED_WITH_NAME_LABEL = 'isLabelSyncedWithName';
 
 export const SettingsDataModelObjectAboutForm = ({
-  disabled,
-  disableNameEdit,
+  disableEdition,
   objectMetadataItem,
   onBlur,
 }: SettingsDataModelObjectAboutFormProps) => {
   const { control, watch, setValue } =
     useFormContext<SettingsDataModelObjectAboutFormValues>();
   const theme = useTheme();
 
-  const isLabelSyncedWithName = watch(IS_LABEL_SYNCED_WITH_NAME_LABEL);
+  const isLabelSyncedWithName =
+    watch(IS_LABEL_SYNCED_WITH_NAME_LABEL) ??
+    (isDefined(objectMetadataItem)
+      ? objectMetadataItem.isLabelSyncedWithName
+      : true);
   const labelSingular = watch('labelSingular');
   const labelPlural = watch('labelPlural');
   watch('nameSingular');
@@ -148,7 +150,7 @@ export const SettingsDataModelObjectAboutForm = ({
             defaultValue={objectMetadataItem?.icon ?? 'IconListNumbers'}
             render={({ field: { onChange, value } }) => (
               <IconPicker
-                disabled={disabled}
+                disabled={disableEdition}
                 selectedIconKey={value}
                 onChange={({ iconKey }) => onChange(iconKey)}
               />
@@ -173,7 +175,7 @@ export const SettingsDataModelObjectAboutForm = ({
                 }
               }}
               onBlur={onBlur}
-              disabled={disabled || disableNameEdit}
+              disabled={disableEdition}
               fullWidth
               maxLength={OBJECT_NAME_MAXIMUM_LENGTH}
             />
@@ -195,7 +197,7 @@ export const SettingsDataModelObjectAboutForm = ({
                   fillNamePluralFromLabelPlural(value);
                 }
               }}
-              disabled={disabled || disableNameEdit}
+              disabled={disableEdition}
               fullWidth
               maxLength={OBJECT_NAME_MAXIMUM_LENGTH}
             />
@@ -212,7 +214,7 @@ export const SettingsDataModelObjectAboutForm = ({
             minRows={4}
             value={value ?? undefined}
             onChange={(nextValue) => onChange(nextValue ?? null)}
-            disabled={disabled}
+            disabled={disableEdition}
           />
         )}
       />
@@ -226,17 +228,15 @@ export const SettingsDataModelObjectAboutForm = ({
                   fieldName: 'nameSingular' as const,
                   placeholder: 'listing',
                   defaultValue: objectMetadataItem?.nameSingular,
-                  disabled:
-                    disabled || disableNameEdit || isLabelSyncedWithName,
+                  disableEdition: disableEdition || isLabelSyncedWithName,
                   tooltip: apiNameTooltipText,
                 },
                 {
                   label: 'API Name (Plural)',
                   fieldName: 'namePlural' as const,
                   placeholder: 'listings',
                   defaultValue: objectMetadataItem?.namePlural,
-                  disabled:
-                    disabled || disableNameEdit || isLabelSyncedWithName,
+                  disableEdition: disableEdition || isLabelSyncedWithName,
                   tooltip: apiNameTooltipText,
                 },
               ].map(
@@ -245,7 +245,7 @@ export const SettingsDataModelObjectAboutForm = ({
                   fieldName,
                   label,
                   placeholder,
-                  disabled,
+                  disableEdition,
                   tooltip,
                 }) => (
                   <StyledInputContainer key={`object-${fieldName}-text-input`}>
@@ -260,7 +260,7 @@ export const SettingsDataModelObjectAboutForm = ({
                             placeholder={placeholder}
                             value={value}
                             onChange={onChange}
-                            disabled={disabled}
+                            disabled={disableEdition}
                             fullWidth
                             maxLength={OBJECT_NAME_MAXIMUM_LENGTH}
                             onBlur={onBlur}
@@ -303,7 +303,10 @@ export const SettingsDataModelObjectAboutForm = ({
                       title="Synchronize Objects Labels and API Names"
                       description="Should changing an object's label also change the API?"
                       checked={value ?? true}
-                      disabled={!objectMetadataItem?.isCustom}
+                      disabled={
+                        isDefined(objectMetadataItem) &&
+                        !objectMetadataItem.isCustom
+                      }
                       advancedMode
                       onChange={(value) => {
                         onChange(value);