admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix field metadata creation page (#11285)

Browse Source 
in this pr 
1. fixing error helper was no longer showing. unfortunately had to
resort to `formConfig.trigger`...
2. closes https://github.com/twentyhq/twenty/issues/11262
3. closes https://github.com/twentyhq/twenty/issues/11263


https://github.com/user-attachments/assets/11f763bb-3098-4b0e-bc96-8a0de3cb3c19
This commit is contained in:
Marie
2025-04-01 14:09:24 +02:00
committed by GitHub
parent 9cbc2e3df0
commit 366106bb2b
5 changed files with 99 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx
View File

@ -4,6 +4,7 @@ import { z } from 'zod';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fieldMetadataItemSchema';
import { AdvancedSettingsContentWrapperWithDot } from '@/settings/components/AdvancedSettingsContentWrapperWithDot';
import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper';
import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
import { DATABASE_IDENTIFIER_MAXIMUM_LENGTH } from '@/settings/data-model/constants/DatabaseIdentifierMaximumLength';
@ -47,7 +48,7 @@ type SettingsDataModelFieldIconLabelFormValues = z.infer<
const StyledInputsContainer = styled.div`
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
margin-bottom: ${({ theme }) => theme.spacing(2)};
margin-bottom: ${({ theme }) => theme.spacing(1)};
width: 100%;
`;
@ -86,6 +87,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
setValue,
watch,
formState: { errors },
trigger,
} = useFormContext<SettingsDataModelFieldIconLabelFormValues>();
const theme = useTheme();
@ -135,6 +137,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
value={value}
onChange={(value) => {
onChange(value);
trigger('label');
if (isLabelSyncedWithName === true) {
fillNameFromLabel(value);
}
@ -152,8 +155,8 @@ export const SettingsDataModelFieldIconLabelForm = ({
/>
</StyledInputsContainer>
{canToggleSyncLabelWithName && (
<StyledAdvancedSettingsOuterContainer>
<AdvancedSettingsWrapper>
<AdvancedSettingsWrapper hideDot>
<StyledAdvancedSettingsOuterContainer>
<StyledAdvancedSettingsContainer>
<StyledAdvancedSettingsSectionInputWrapper>
<StyledInputsContainer>
@ -207,27 +210,32 @@ export const SettingsDataModelFieldIconLabelForm = ({
fieldMetadataItem?.isLabelSyncedWithName ?? true
}
render={({ field: { onChange, value } }) => (
<Card rounded>
<SettingsOptionCardContentToggle
Icon={IconRefresh}
title={t`Synchronize Field Label and API Name`}
description={t`Should changing a field's label also change the API name?`}
checked={value ?? true}
advancedMode
onChange={(value) => {
onChange(value);
if (value === true) {
fillNameFromLabel(label);
}
}}
/>
</Card>
<AdvancedSettingsContentWrapperWithDot
hideDot={false}
dotPosition="centered"
>
<Card rounded>
<SettingsOptionCardContentToggle
Icon={IconRefresh}
title={t`Synchronize Field Label and API Name`}
description={t`Should changing a field's label also change the API name?`}
checked={value ?? true}
advancedMode
onChange={(value) => {
onChange(value);
if (value === true) {
fillNameFromLabel(label);
}
}}
/>
</Card>
</AdvancedSettingsContentWrapperWithDot>
)}
/>
</StyledAdvancedSettingsSectionInputWrapper>
</StyledAdvancedSettingsContainer>
</AdvancedSettingsWrapper>
</StyledAdvancedSettingsOuterContainer>
</StyledAdvancedSettingsOuterContainer>
</AdvancedSettingsWrapper>
)}
</>
);