Open Bonapara opened 2 months ago
To enable editing API keys for Select and Multi-Select fields in Advanced Mode, follow these steps:
Add API Key Field in Form:
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"
/>
Update Form Schema:
settingsDataModelFieldSelectFormSchema
in SettingsDataModelFieldSelectForm.tsx
to include apiKey
.
export const settingsDataModelFieldSelectFormSchema = z.object({
defaultValue: selectFieldDefaultValueSchema(),
options: selectOptionsSchema.extend({
apiKey: z.string().optional(),
}),
});
Conditional Rendering for Advanced Mode:
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"
/>
)}
Pass Advanced Mode Prop:
isAdvancedMode
is passed down from the parent component, likely SettingsDataModelFieldSelectSettingsFormCard.tsx
.
<SettingsDataModelFieldSelectForm
fieldMetadataItem={fieldMetadataItem}
isAdvancedMode={isAdvancedMode}
/>
/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
Current behavior
Users cannot edit the API Keys of
Select
andMulti-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