Avanced Settings: Custom API names for Object and Fields

[Bonapara]

Desired Behavior

Introduce the following system:

1) An Advanced Settings option on the bottom of the API & Webhooks Settings page that allows to sync or unsync all labels and API names:

2) Behavior on an object detail page when this sync setting is activated:

• C) and D) are deactivated (Read-only)
• Changing A) always changes B) and D)
• C) reflects the value of B), regardless of whether B) is overridden or updated by A)
• C) and D) field Info button (i) should inform the user that he should deactivate the Sync settings in Advanced Developer settings to set a custom API name

Use a library like https://www.npmjs.com/package/pluralize to generate singular forms.

3) Behavior on an object detail page when this sync setting is deactivated:

• Changing A) updates B)
• C) & D) are not impacted when A) or B) are updated
• C) & D) are activated and their value can be updated
• C) & D) field info button (i) should explain the constraints of the API names

4) Behavior on the Developer advanced Setting activation and deactivation:

• Deactivating the toggle should stop the synchronization, the API names should stay what they are.
• When reactivating the toggle, a for-each loop should iterate over every object to set the API names to match the object labels. C) should be updated with B) and D) should be updated with A)

5) Object creation

When creating a new object, even if the Sync labels & API names setting is deactivated, the API names should match the labels.

[greptile-apps[bot]]

Implementation Steps

1. Add API Name Field to Object Edit Page

   • File: /packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
   • Steps:
     • Import the necessary components and hooks for the API Name field.
     • Add a new section for the API Name field in the SettingsObjectEdit component.
     • Update the form schema to include the API Name field.

   import { TextField } from '@/ui/input/text-field/components/TextField';
   
   const objectEditFormSchema = z
    .object({
      apiName: z.string().optional(),
    })
    .merge(settingsDataModelObjectAboutFormSchema)
    .merge(settingsDataModelObjectIdentifiersFormSchema);
   
   // Inside the SettingsObjectEdit component
   <Section>
    <H2Title title="API Name" description="Set a custom API name for this object." />
    <TextField name="apiName" label="API Name" />
   </Section>

2. Add API Name Field to Field Edit Page

   • File: /packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
   • Steps:
     • Import the necessary components and hooks for the API Name field.
     • Add a new section for the API Name field in the SettingsObjectFieldEdit component.
     • Update the form schema to include the API Name field.

   import { TextField } from '@/ui/input/text-field/components/TextField';
   
   const settingsFieldFormSchema = z
    .object({
      apiName: z.string().optional(),
    })
    .merge(existingSchema);
   
   // Inside the SettingsObjectFieldEdit component
   <Section>
    <H2Title title="API Name" description="Set a custom API name for this field." />
    <TextField name="apiName" label="API Name" />
   </Section>

3. Update Form Submission Logic

   • Ensure that the API Name field is included in the form submission logic for both object and field edit pages.
   • Update the handleSave functions in both SettingsObjectEdit and SettingsObjectFieldEdit components to handle the new API Name field.

   const handleSave = async (formValues) => {
    const { apiName, ...otherValues } = formValues;
    // Include apiName in the update payload
    await updateOneObjectMetadataItem({
      idToUpdate: activeObjectMetadataItem.id,
      updatePayload: { apiName, ...otherValues },
    });
   };

References

/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx /packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx /packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx /packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx /packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/twentyhq/twenty/main) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

[Faisal-imtiyaz123]

@Bonapara Can I work?

[Bonapara]

Sure @Faisal-imtiyaz123, thanks for contributing!

[Faisal-imtiyaz123]

@Bonapara Do I have to make this Text Field Component.

[Bonapara]

We should use the standard text field component but add a yellow border and a wrench icon component. This component will either have an absolute or relative position. The border's height should always match the height of the element it's applied to, and the wrench should always be positioned on top.

See #6146 for the "position: relative" of the yellow border and Wrench component.

[Faisal-imtiyaz123]

@Bonapara pardon me but there is no directorytext-input under @ui/input. If i import the snippet import { TextField } from '@/ui/input/text-field/components/TextField'; it's not recognized. Sorry for asking a lot. I am new to the project.

[Bonapara]

Are you talking about this? https://storybook.twenty.com/?path=/story/ui-input-textinput--default

[Faisal-imtiyaz123]

Got it ! Thanks

[charlesBochet]

I'm not fully convinced by this feature, left a comment on the main thread here: https://github.com/twentyhq/twenty/issues/5491#issuecomment-2226833596

[Bonapara]

Related to https://github.com/twentyhq/twenty/issues/5491

[Bonapara]

Hi @gitstart-twenty, since the sync API names setting will be on the API & Webhooks settings page in advanced mode, we won't need to make the Sync API names an advanced settings.

We can show it in blue as a result:

[charlesBochet]

@gitstart-twenty @ijreilly @Bonapara I'm not a big fan of:

• storing this at workspace level (we don't have a storage for it right now beside workspace table and keyValuePairs table but it feels off to put it in both table)
• having the for loop checking and updating all objects, this is a slow and risky operation and it can fail, it can be challenging to rollback in case of issues and display it properly to the user if we choose to go async

Could we instead keep this on the Object Edit / Field Edit page and keep it field or object level?

[ijreilly]

Merged this issue with other issue https://github.com/twentyhq/twenty/issues/5491