Avanced Settings: Custom API names for Select & Multi-Select Keys

[Bonapara]

Current behavior

Users cannot edit the API Keys of Select and Multi-Select

Desired Behavior

Enabling the Advanced Mode in Settings for new Select fields should display a column that allows users to edit the Select API keys.

Figma

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=34851-536975&t=H5hfHOgNoulsToAq-11

[greptile-apps[bot]]

To enable editing API keys for Select and Multi-Select fields in Advanced Mode, follow these steps:

1. Add API Key Field in Form:

   • Modify SettingsDataModelFieldSelectFormOptionRow.tsx to include an input for the API key.

     import { TextInput } from '@/ui/input/components/TextInput';
     // Inside the component
     <StyledOptionInput
     ref={inputRef}
     disableHotkeys
     value={option.label}
     onChange={(label) =>
     onChange({
      ...option,
      label,
      value: getOptionValueFromLabel(label),
     })
     }
     RightIcon={isDefault ? IconCheck : undefined}
     maxLength={OPTION_VALUE_MAXIMUM_LENGTH}
     />
     <TextInput
     value={option.apiKey}
     onChange={(apiKey) =>
     onChange({
      ...option,
      apiKey,
     })
     }
     placeholder="API Key"
     />

2. Update Form Schema:

   • Update settingsDataModelFieldSelectFormSchema in SettingsDataModelFieldSelectForm.tsx to include apiKey.

     export const settingsDataModelFieldSelectFormSchema = z.object({
     defaultValue: selectFieldDefaultValueSchema(),
     options: selectOptionsSchema.extend({
     apiKey: z.string().optional(),
     }),
     });

3. Conditional Rendering for Advanced Mode:

   • Add a prop to SettingsDataModelFieldSelectForm to check if Advanced Mode is enabled and conditionally render the API key input.

     type SettingsDataModelFieldSelectFormProps = {
     fieldMetadataItem: Pick<FieldMetadataItem, 'defaultValue' | 'options' | 'type'>;
     isAdvancedMode: boolean;
     };
     // Inside the component
     {isAdvancedMode && (
     <TextInput
     value={option.apiKey}
     onChange={(apiKey) =>
      onChange({
        ...option,
        apiKey,
      })
     }
     placeholder="API Key"
     />
     )}

4. Pass Advanced Mode Prop:

   • Ensure isAdvancedMode is passed down from the parent component, likely SettingsDataModelFieldSelectSettingsFormCard.tsx.

     <SettingsDataModelFieldSelectForm
     fieldMetadataItem={fieldMetadataItem}
     isAdvancedMode={isAdvancedMode}
     />

References

/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx /packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx /packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx /packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectSettingsFormCard.tsx /packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components /packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField

#### 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)