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

Rename onPersist to onChange for form fields (#11047)

Browse Source 
We are about to build forms where fields will not be persisted
immediately. It will have to be submitted.
Renaming the prop to reflect it.
This commit is contained in:
Thomas Trompette
2025-03-20 10:58:02 +01:00
committed by GitHub
parent e666506ea3
commit 369abfe424
39 changed files with 238 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx
View File

@ -45,7 +45,7 @@ import { JsonValue } from 'type-fest';
type FormFieldInputProps = { type FormFieldInputProps = {
field: FieldDefinition<FieldMetadata>; field: FieldDefinition<FieldMetadata>;
defaultValue: JsonValue; defaultValue: JsonValue;
onPersist: (value: JsonValue) => void; onChange: (value: JsonValue) => void;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
readonly?: boolean; readonly?: boolean;
}; };
@ -53,7 +53,7 @@ type FormFieldInputProps = {
export const FormFieldInput = ({ export const FormFieldInput = ({
field, field,
defaultValue, defaultValue,
onPersist, onChange,
VariablePicker, VariablePicker,
readonly, readonly,
}: FormFieldInputProps) => { }: FormFieldInputProps) => {
@ -61,7 +61,7 @@ export const FormFieldInput = ({
<FormNumberFieldInput <FormNumberFieldInput
label={field.label} label={field.label}
defaultValue={defaultValue as string | number | undefined} defaultValue={defaultValue as string | number | undefined}
onPersist={onPersist} onChange={onChange}
placeholder={field.label} placeholder={field.label}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
readonly={readonly} readonly={readonly}
@ -70,7 +70,7 @@ export const FormFieldInput = ({
<FormBooleanFieldInput <FormBooleanFieldInput
label={field.label} label={field.label}
defaultValue={defaultValue as string | boolean | undefined} defaultValue={defaultValue as string | boolean | undefined}
onPersist={onPersist} onChange={onChange}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
readonly={readonly} readonly={readonly}
/> />
@ -78,7 +78,7 @@ export const FormFieldInput = ({
<FormTextFieldInput <FormTextFieldInput
label={field.label} label={field.label}
defaultValue={defaultValue as string | undefined} defaultValue={defaultValue as string | undefined}
onPersist={onPersist} onChange={onChange}
placeholder={field.label} placeholder={field.label}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
readonly={readonly} readonly={readonly}
@ -87,7 +87,7 @@ export const FormFieldInput = ({
<FormSelectFieldInput <FormSelectFieldInput
label={field.label} label={field.label}
defaultValue={defaultValue as string | undefined} defaultValue={defaultValue as string | undefined}
onPersist={onPersist} onChange={onChange}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
options={field.metadata.options} options={field.metadata.options}
clearLabel={field.label} clearLabel={field.label}
@ -98,7 +98,7 @@ export const FormFieldInput = ({
<FormFullNameFieldInput <FormFullNameFieldInput
label={field.label} label={field.label}
defaultValue={defaultValue as FieldFullNameValue | undefined} defaultValue={defaultValue as FieldFullNameValue | undefined}
onPersist={onPersist} onChange={onChange}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
readonly={readonly} readonly={readonly}
/> />
@ -106,7 +106,7 @@ export const FormFieldInput = ({
<FormAddressFieldInput <FormAddressFieldInput
label={field.label} label={field.label}
defaultValue={defaultValue as FieldAddressValue | undefined} defaultValue={defaultValue as FieldAddressValue | undefined}
onPersist={onPersist} onChange={onChange}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
readonly={readonly} readonly={readonly}
/> />
@ -114,7 +114,7 @@ export const FormFieldInput = ({
<FormLinksFieldInput <FormLinksFieldInput
label={field.label} label={field.label}
defaultValue={defaultValue as FieldLinksValue | undefined} defaultValue={defaultValue as FieldLinksValue | undefined}
onPersist={onPersist} onChange={onChange}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
readonly={readonly} readonly={readonly}
/> />
@ -122,7 +122,7 @@ export const FormFieldInput = ({
<FormEmailsFieldInput <FormEmailsFieldInput
label={field.label} label={field.label}
defaultValue={defaultValue as FieldEmailsValue | undefined} defaultValue={defaultValue as FieldEmailsValue | undefined}
onPersist={onPersist} onChange={onChange}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
readonly={readonly} readonly={readonly}
/> />
@ -130,7 +130,7 @@ export const FormFieldInput = ({
<FormPhoneFieldInput <FormPhoneFieldInput
label={field.label} label={field.label}
defaultValue={defaultValue as FieldPhonesValue | undefined} defaultValue={defaultValue as FieldPhonesValue | undefined}
onPersist={onPersist} onChange={onChange}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
readonly={readonly} readonly={readonly}
/> />
@ -138,7 +138,7 @@ export const FormFieldInput = ({
<FormDateFieldInput <FormDateFieldInput
label={field.label} label={field.label}
defaultValue={defaultValue as string | undefined} defaultValue={defaultValue as string | undefined}
onPersist={onPersist} onChange={onChange}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
readonly={readonly} readonly={readonly}
/> />
@ -146,7 +146,7 @@ export const FormFieldInput = ({
<FormDateTimeFieldInput <FormDateTimeFieldInput
label={field.label} label={field.label}
defaultValue={defaultValue as string | undefined} defaultValue={defaultValue as string | undefined}
onPersist={onPersist} onChange={onChange}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
readonly={readonly} readonly={readonly}
/> />
@ -154,7 +154,7 @@ export const FormFieldInput = ({
<FormMultiSelectFieldInput <FormMultiSelectFieldInput
label={field.label} label={field.label}
defaultValue={defaultValue as FieldMultiSelectValue | string | undefined} defaultValue={defaultValue as FieldMultiSelectValue | string | undefined}
onPersist={onPersist} onChange={onChange}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
options={field.metadata.options} options={field.metadata.options}
readonly={readonly} readonly={readonly}
@ -164,7 +164,7 @@ export const FormFieldInput = ({
<FormRawJsonFieldInput <FormRawJsonFieldInput
label={field.label} label={field.label}
defaultValue={defaultValue as string | undefined} defaultValue={defaultValue as string | undefined}
onPersist={onPersist} onChange={onChange}
placeholder={field.label} placeholder={field.label}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
readonly={readonly} readonly={readonly}
@ -173,7 +173,7 @@ export const FormFieldInput = ({
<FormUuidFieldInput <FormUuidFieldInput
label={field.label} label={field.label}
defaultValue={defaultValue as string | null | undefined} defaultValue={defaultValue as string | null | undefined}
onPersist={onPersist} onChange={onChange}
placeholder={field.label} placeholder={field.label}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
readonly={readonly} readonly={readonly}
@ -182,7 +182,7 @@ export const FormFieldInput = ({
<FormCurrencyFieldInput <FormCurrencyFieldInput
label={field.label} label={field.label}
defaultValue={defaultValue as FormFieldCurrencyValue | null} defaultValue={defaultValue as FormFieldCurrencyValue | null}
onPersist={onPersist} onChange={onChange}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
readonly={readonly} readonly={readonly}
/> />

18
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormAddressFieldInput.tsx
View File

@ -10,7 +10,7 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
type FormAddressFieldInputProps = { type FormAddressFieldInputProps = {
label?: string; label?: string;
defaultValue?: FieldAddressDraftValue | null; defaultValue?: FieldAddressDraftValue | null;
onPersist: (value: FieldAddressValue) => void; onChange: (value: FieldAddressValue) => void;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
readonly?: boolean; readonly?: boolean;
}; };
@ -18,7 +18,7 @@ type FormAddressFieldInputProps = {
export const FormAddressFieldInput = ({ export const FormAddressFieldInput = ({
label, label,
defaultValue, defaultValue,
onPersist, onChange,
readonly, readonly,
VariablePicker, VariablePicker,
}: FormAddressFieldInputProps) => { }: FormAddressFieldInputProps) => {
@ -35,7 +35,7 @@ export const FormAddressFieldInput = ({
addressLng: defaultValue?.addressLng ?? null, addressLng: defaultValue?.addressLng ?? null,
[field]: updatedAddressPart, [field]: updatedAddressPart,
}; };
onPersist(updatedAddress); onChange(updatedAddress);
}; };
return ( return (
@ -45,7 +45,7 @@ export const FormAddressFieldInput = ({
<FormTextFieldInput <FormTextFieldInput
label="Address 1" label="Address 1"
defaultValue={defaultValue?.addressStreet1 ?? ''} defaultValue={defaultValue?.addressStreet1 ?? ''}
onPersist={handleChange('addressStreet1')} onChange={handleChange('addressStreet1')}
readonly={readonly} readonly={readonly}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
placeholder="Street address" placeholder="Street address"
@ -53,7 +53,7 @@ export const FormAddressFieldInput = ({
<FormTextFieldInput <FormTextFieldInput
label="Address 2" label="Address 2"
defaultValue={defaultValue?.addressStreet2 ?? ''} defaultValue={defaultValue?.addressStreet2 ?? ''}
onPersist={handleChange('addressStreet2')} onChange={handleChange('addressStreet2')}
readonly={readonly} readonly={readonly}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
placeholder="Street address 2" placeholder="Street address 2"
@ -61,7 +61,7 @@ export const FormAddressFieldInput = ({
<FormTextFieldInput <FormTextFieldInput
label="City" label="City"
defaultValue={defaultValue?.addressCity ?? ''} defaultValue={defaultValue?.addressCity ?? ''}
onPersist={handleChange('addressCity')} onChange={handleChange('addressCity')}
readonly={readonly} readonly={readonly}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
placeholder="City" placeholder="City"
@ -69,7 +69,7 @@ export const FormAddressFieldInput = ({
<FormTextFieldInput <FormTextFieldInput
label="State" label="State"
defaultValue={defaultValue?.addressState ?? ''} defaultValue={defaultValue?.addressState ?? ''}
onPersist={handleChange('addressState')} onChange={handleChange('addressState')}
readonly={readonly} readonly={readonly}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
placeholder="State" placeholder="State"
@ -77,14 +77,14 @@ export const FormAddressFieldInput = ({
<FormTextFieldInput <FormTextFieldInput
label="Post Code" label="Post Code"
defaultValue={defaultValue?.addressPostcode ?? ''} defaultValue={defaultValue?.addressPostcode ?? ''}
onPersist={handleChange('addressPostcode')} onChange={handleChange('addressPostcode')}
readonly={readonly} readonly={readonly}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
placeholder="Post Code" placeholder="Post Code"
/> />
<FormCountrySelectInput <FormCountrySelectInput
selectedCountryName={defaultValue?.addressCountry ?? ''} selectedCountryName={defaultValue?.addressCountry ?? ''}
onPersist={handleChange('addressCountry')} onChange={handleChange('addressCountry')}
readonly={readonly} readonly={readonly}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
/> />

10
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormBooleanFieldInput.tsx
View File

@ -17,7 +17,7 @@ const StyledBooleanInputContainer = styled.div`
type FormBooleanFieldInputProps = { type FormBooleanFieldInputProps = {
label?: string; label?: string;
defaultValue: boolean | string | undefined; defaultValue: boolean | string | undefined;
onPersist: (value: boolean | null | string) => void; onChange: (value: boolean | null | string) => void;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
readonly?: boolean; readonly?: boolean;
}; };
@ -25,7 +25,7 @@ type FormBooleanFieldInputProps = {
export const FormBooleanFieldInput = ({ export const FormBooleanFieldInput = ({
label, label,
defaultValue, defaultValue,
onPersist, onChange,
readonly, readonly,
VariablePicker, VariablePicker,
}: FormBooleanFieldInputProps) => { }: FormBooleanFieldInputProps) => {
@ -58,7 +58,7 @@ export const FormBooleanFieldInput = ({
value: newValue, value: newValue,
}); });
onPersist(newValue); onChange(newValue);
}; };
const handleVariableTagInsert = (variableName: string) => { const handleVariableTagInsert = (variableName: string) => {
@ -67,7 +67,7 @@ export const FormBooleanFieldInput = ({
value: variableName, value: variableName,
}); });
onPersist(variableName); onChange(variableName);
}; };
const handleUnlinkVariable = () => { const handleUnlinkVariable = () => {
@ -76,7 +76,7 @@ export const FormBooleanFieldInput = ({
value: false, value: false,
}); });
onPersist(false); onChange(false);
}; };
return ( return (

12
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCountryCodeSelectInput.tsx
View File

@ -11,12 +11,12 @@ export type FormCountryCodeSelectInputUpdatedValue = CountryCode | '';
export const FormCountryCodeSelectInput = ({ export const FormCountryCodeSelectInput = ({
selectedCountryCode, selectedCountryCode,
onPersist, onChange,
readonly = false, readonly = false,
VariablePicker, VariablePicker,
}: { }: {
selectedCountryCode: string; selectedCountryCode: string;
onPersist: (countryCode: FormCountryCodeSelectInputUpdatedValue) => void; onChange: (countryCode: FormCountryCodeSelectInputUpdatedValue) => void;
readonly?: boolean; readonly?: boolean;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
}) => { }) => {
@ -42,22 +42,22 @@ export const FormCountryCodeSelectInput = ({
]; ];
}, [countries]); }, [countries]);
const onChange = (countryCode: string | null) => { const onCountryCodeChange = (countryCode: string | null) => {
if (readonly) { if (readonly) {
return; return;
} }
if (countryCode === null) { if (countryCode === null) {
onPersist(''); onChange('');
} else { } else {
onPersist(countryCode as CountryCode); onChange(countryCode as CountryCode);
} }
}; };
return ( return (
<FormSelectFieldInput <FormSelectFieldInput
label="Country Code" label="Country Code"
onPersist={onChange} onChange={onCountryCodeChange}
options={options} options={options}
defaultValue={selectedCountryCode} defaultValue={selectedCountryCode}
readonly={readonly} readonly={readonly}

12
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCountrySelectInput.tsx
View File

@ -8,12 +8,12 @@ import { useCountries } from '@/ui/input/components/internal/hooks/useCountries'
export const FormCountrySelectInput = ({ export const FormCountrySelectInput = ({
selectedCountryName, selectedCountryName,
onPersist, onChange,
readonly = false, readonly = false,
VariablePicker, VariablePicker,
}: { }: {
selectedCountryName: string; selectedCountryName: string;
onPersist: (country: string) => void; onChange: (country: string) => void;
readonly?: boolean; readonly?: boolean;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
}) => { }) => {
@ -39,22 +39,22 @@ export const FormCountrySelectInput = ({
]; ];
}, [countries]); }, [countries]);
const onChange = (country: string | null) => { const onCountryChange = (country: string | null) => {
if (readonly) { if (readonly) {
return; return;
} }
if (country === null) { if (country === null) {
onPersist(''); onChange('');
} else { } else {
onPersist(country); onChange(country);
} }
}; };
return ( return (
<FormSelectFieldInput <FormSelectFieldInput
label="Country" label="Country"
onPersist={onChange} onChange={onCountryChange}
options={options} options={options}
defaultValue={selectedCountryName} defaultValue={selectedCountryName}
readonly={readonly} readonly={readonly}

14
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCurrencyFieldInput.tsx
View File

@ -12,7 +12,7 @@ import { useMemo } from 'react';
type FormCurrencyFieldInputProps = { type FormCurrencyFieldInputProps = {
label?: string; label?: string;
defaultValue?: FormFieldCurrencyValue | null; defaultValue?: FormFieldCurrencyValue | null;
onPersist: (value: FormFieldCurrencyValue) => void; onChange: (value: FormFieldCurrencyValue) => void;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
readonly?: boolean; readonly?: boolean;
}; };
@ -20,7 +20,7 @@ type FormCurrencyFieldInputProps = {
export const FormCurrencyFieldInput = ({ export const FormCurrencyFieldInput = ({
label, label,
defaultValue, defaultValue,
onPersist, onChange,
VariablePicker, VariablePicker,
readonly, readonly,
}: FormCurrencyFieldInputProps) => { }: FormCurrencyFieldInputProps) => {
@ -37,14 +37,14 @@ export const FormCurrencyFieldInput = ({
const handleAmountMicrosChange = ( const handleAmountMicrosChange = (
newAmountMicros: string | number | null, newAmountMicros: string | number | null,
) => { ) => {
onPersist({ onChange({
currencyCode: defaultValue?.currencyCode ?? null, currencyCode: defaultValue?.currencyCode ?? null,
amountMicros: newAmountMicros ?? null, amountMicros: newAmountMicros ?? null,
}); });
}; };
const handleCurrencyCodeChange = (newCurrencyCode: string | null) => { const handleCurrencyCodeChange = (newCurrencyCode: string | null) => {
onPersist({ onChange({
currencyCode: (newCurrencyCode as CurrencyCode) ?? null, currencyCode: (newCurrencyCode as CurrencyCode) ?? null,
amountMicros: defaultValue?.amountMicros ?? null, amountMicros: defaultValue?.amountMicros ?? null,
}); });
@ -57,7 +57,7 @@ export const FormCurrencyFieldInput = ({
<FormSelectFieldInput <FormSelectFieldInput
label="Currency Code" label="Currency Code"
defaultValue={defaultValue?.currencyCode ?? ''} defaultValue={defaultValue?.currencyCode ?? ''}
onPersist={handleCurrencyCodeChange} onChange={handleCurrencyCodeChange}
options={currencies} options={currencies}
clearLabel={'Currency Code'} clearLabel={'Currency Code'}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
@ -68,9 +68,9 @@ export const FormCurrencyFieldInput = ({
<FormNumberFieldInput <FormNumberFieldInput
label="Amount Micros" label="Amount Micros"
defaultValue={defaultValue?.amountMicros ?? ''} defaultValue={defaultValue?.amountMicros ?? ''}
onPersist={handleAmountMicrosChange} onChange={handleAmountMicrosChange}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
placeholder="Set 3210000 for 3.21$" placeholder="Set 3210000 for $3.21"
readonly={readonly} readonly={readonly}
/> />
</FormNestedFieldInputContainer> </FormNestedFieldInputContainer>

6
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateFieldInput.tsx
View File

@ -4,7 +4,7 @@ import { VariablePickerComponent } from '@/object-record/record-field/form-types
type FormDateFieldInputProps = { type FormDateFieldInputProps = {
label?: string; label?: string;
defaultValue: string | undefined; defaultValue: string | undefined;
onPersist: (value: string | null) => void; onChange: (value: string | null) => void;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
readonly?: boolean; readonly?: boolean;
}; };
@ -12,7 +12,7 @@ type FormDateFieldInputProps = {
export const FormDateFieldInput = ({ export const FormDateFieldInput = ({
label, label,
defaultValue, defaultValue,
onPersist, onChange,
VariablePicker, VariablePicker,
readonly, readonly,
}: FormDateFieldInputProps) => { }: FormDateFieldInputProps) => {
@ -21,7 +21,7 @@ export const FormDateFieldInput = ({
dateOnly dateOnly
label={label} label={label}
defaultValue={defaultValue} defaultValue={defaultValue}
onPersist={onPersist} onChange={onChange}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
readonly={readonly} readonly={readonly}
/> />

12
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx
View File

@ -79,7 +79,7 @@ type FormDateTimeFieldInputProps = {
label?: string; label?: string;
placeholder?: string; placeholder?: string;
defaultValue: string | undefined; defaultValue: string | undefined;
onPersist: (value: string | null) => void; onChange: (value: string | null) => void;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
readonly?: boolean; readonly?: boolean;
}; };
@ -88,7 +88,7 @@ export const FormDateTimeFieldInput = ({
dateOnly, dateOnly,
label, label,
defaultValue, defaultValue,
onPersist, onChange,
VariablePicker, VariablePicker,
readonly, readonly,
}: FormDateTimeFieldInputProps) => { }: FormDateTimeFieldInputProps) => {
@ -130,11 +130,11 @@ export const FormDateTimeFieldInput = ({
const persistDate = (newDate: Nullable<Date>) => { const persistDate = (newDate: Nullable<Date>) => {
if (!isDefined(newDate)) { if (!isDefined(newDate)) {
onPersist(null); onChange(null);
} else { } else {
const newDateISO = newDate.toISOString(); const newDateISO = newDate.toISOString();
onPersist(newDateISO); onChange(newDateISO);
} }
}; };
@ -312,7 +312,7 @@ export const FormDateTimeFieldInput = ({
setInputDateTime(''); setInputDateTime('');
onPersist(variableName); onChange(variableName);
}; };
const handleUnlinkVariable = () => { const handleUnlinkVariable = () => {
@ -324,7 +324,7 @@ export const FormDateTimeFieldInput = ({
setPickerDate(null); setPickerDate(null);
onPersist(null); onChange(null);
}; };
return ( return (

8
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormEmailsFieldInput.tsx
View File

@ -8,7 +8,7 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
type FormEmailsFieldInputProps = { type FormEmailsFieldInputProps = {
label?: string; label?: string;
defaultValue?: FieldEmailsValue; defaultValue?: FieldEmailsValue;
onPersist: (value: FieldEmailsValue) => void; onChange: (value: FieldEmailsValue) => void;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
readonly?: boolean; readonly?: boolean;
}; };
@ -16,12 +16,12 @@ type FormEmailsFieldInputProps = {
export const FormEmailsFieldInput = ({ export const FormEmailsFieldInput = ({
label, label,
defaultValue, defaultValue,
onPersist, onChange,
readonly, readonly,
VariablePicker, VariablePicker,
}: FormEmailsFieldInputProps) => { }: FormEmailsFieldInputProps) => {
const handleChange = (email: string) => { const handleChange = (email: string) => {
onPersist({ onChange({
primaryEmail: email, primaryEmail: email,
additionalEmails: [], additionalEmails: [],
}); });
@ -34,7 +34,7 @@ export const FormEmailsFieldInput = ({
<FormTextFieldInput <FormTextFieldInput
label="Primary Email" label="Primary Email"
defaultValue={defaultValue?.primaryEmail} defaultValue={defaultValue?.primaryEmail}
onPersist={handleChange} onChange={handleChange}
placeholder={'Primary Email'} placeholder={'Primary Email'}
readonly={readonly} readonly={readonly}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}

16
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFullNameFieldInput.tsx
View File

@ -1,6 +1,6 @@
import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
import { FormNestedFieldInputContainer } from '@/object-record/record-field/form-types/components/FormNestedFieldInputContainer';
import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer'; import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
import { FormNestedFieldInputContainer } from '@/object-record/record-field/form-types/components/FormNestedFieldInputContainer';
import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent'; import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS } from '@/object-record/record-field/meta-types/input/constants/FirstNamePlaceholder'; import { FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS } from '@/object-record/record-field/meta-types/input/constants/FirstNamePlaceholder';
import { LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS } from '@/object-record/record-field/meta-types/input/constants/LastNamePlaceholder'; import { LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS } from '@/object-record/record-field/meta-types/input/constants/LastNamePlaceholder';
@ -10,7 +10,7 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
type FormFullNameFieldInputProps = { type FormFullNameFieldInputProps = {
label?: string; label?: string;
defaultValue: FieldFullNameValue | undefined; defaultValue: FieldFullNameValue | undefined;
onPersist: (value: FieldFullNameValue) => void; onChange: (value: FieldFullNameValue) => void;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
readonly?: boolean; readonly?: boolean;
}; };
@ -18,19 +18,19 @@ type FormFullNameFieldInputProps = {
export const FormFullNameFieldInput = ({ export const FormFullNameFieldInput = ({
label, label,
defaultValue, defaultValue,
onPersist, onChange,
readonly, readonly,
VariablePicker, VariablePicker,
}: FormFullNameFieldInputProps) => { }: FormFullNameFieldInputProps) => {
const handleFirstNameChange = (newText: string) => { const handleFirstNameChange = (newText: string) => {
onPersist({ onChange({
lastName: defaultValue?.lastName ?? '', lastName: defaultValue?.lastName ?? '',
firstName: newText, firstName: newText,
}); });
}; };
const handleLastNameChange = (newText: string) => { const handleLastNameChange = (newText: string) => {
onPersist({ onChange({
firstName: defaultValue?.firstName ?? '', firstName: defaultValue?.firstName ?? '',
lastName: newText, lastName: newText,
}); });
@ -43,7 +43,7 @@ export const FormFullNameFieldInput = ({
<FormTextFieldInput <FormTextFieldInput
label="First Name" label="First Name"
defaultValue={defaultValue?.firstName} defaultValue={defaultValue?.firstName}
onPersist={handleFirstNameChange} onChange={handleFirstNameChange}
placeholder={ placeholder={
FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
} }
@ -53,7 +53,7 @@ export const FormFullNameFieldInput = ({
<FormTextFieldInput <FormTextFieldInput
label="Last Name" label="Last Name"
defaultValue={defaultValue?.lastName} defaultValue={defaultValue?.lastName}
onPersist={handleLastNameChange} onChange={handleLastNameChange}
placeholder={ placeholder={
LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
} }

10
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormLinksFieldInput.tsx
View File

@ -9,7 +9,7 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
type FormLinksFieldInputProps = { type FormLinksFieldInputProps = {
label?: string; label?: string;
defaultValue?: FieldLinksValue; defaultValue?: FieldLinksValue;
onPersist: (value: FieldLinksValue) => void; onChange: (value: FieldLinksValue) => void;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
readonly?: boolean; readonly?: boolean;
}; };
@ -17,7 +17,7 @@ type FormLinksFieldInputProps = {
export const FormLinksFieldInput = ({ export const FormLinksFieldInput = ({
label, label,
defaultValue, defaultValue,
onPersist, onChange,
readonly, readonly,
VariablePicker, VariablePicker,
}: FormLinksFieldInputProps) => { }: FormLinksFieldInputProps) => {
@ -29,7 +29,7 @@ export const FormLinksFieldInput = ({
[field]: updatedLinksPart, [field]: updatedLinksPart,
}; };
// We need to validate the links and display an error message if the links are not valid // We need to validate the links and display an error message if the links are not valid
onPersist(updatedLinks); onChange(updatedLinks);
}; };
return ( return (
@ -39,7 +39,7 @@ export const FormLinksFieldInput = ({
<FormTextFieldInput <FormTextFieldInput
label="Primary Link Label" label="Primary Link Label"
defaultValue={defaultValue?.primaryLinkLabel} defaultValue={defaultValue?.primaryLinkLabel}
onPersist={handleChange('primaryLinkLabel')} onChange={handleChange('primaryLinkLabel')}
placeholder={'Primary Link Label'} placeholder={'Primary Link Label'}
readonly={readonly} readonly={readonly}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
@ -47,7 +47,7 @@ export const FormLinksFieldInput = ({
<FormTextFieldInput <FormTextFieldInput
label="Primary Link URL" label="Primary Link URL"
defaultValue={defaultValue?.primaryLinkUrl} defaultValue={defaultValue?.primaryLinkUrl}
onPersist={handleChange('primaryLinkUrl')} onChange={handleChange('primaryLinkUrl')}
placeholder={'Primary Link URL'} placeholder={'Primary Link URL'}
readonly={readonly} readonly={readonly}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}

10
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx
View File

@ -24,7 +24,7 @@ type FormMultiSelectFieldInputProps = {
label?: string; label?: string;
defaultValue: FieldMultiSelectValue | string | undefined; defaultValue: FieldMultiSelectValue | string | undefined;
options: SelectOption[]; options: SelectOption[];
onPersist: (value: FieldMultiSelectValue | string) => void; onChange: (value: FieldMultiSelectValue | string) => void;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
readonly?: boolean; readonly?: boolean;
placeholder?: string; placeholder?: string;
@ -66,7 +66,7 @@ export const FormMultiSelectFieldInput = ({
label, label,
defaultValue, defaultValue,
options, options,
onPersist, onChange,
VariablePicker, VariablePicker,
readonly, readonly,
placeholder, placeholder,
@ -132,7 +132,7 @@ export const FormMultiSelectFieldInput = ({
editingMode: 'edit', editingMode: 'edit',
}); });
onPersist(value); onChange(value);
}; };
const onCancel = () => { const onCancel = () => {
@ -154,7 +154,7 @@ export const FormMultiSelectFieldInput = ({
value: variableName, value: variableName,
}); });
onPersist(variableName); onChange(variableName);
}; };
const handleUnlinkVariable = () => { const handleUnlinkVariable = () => {
@ -164,7 +164,7 @@ export const FormMultiSelectFieldInput = ({
editingMode: 'view', editingMode: 'view',
}); });
onPersist([]); onChange([]);
}; };
const selectedNames = const selectedNames =

14
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormNumberFieldInput.tsx
View File

@ -4,6 +4,8 @@ import { FormFieldInputRowContainer } from '@/object-record/record-field/form-ty
import { VariableChipStandalone } from '@/object-record/record-field/form-types/components/VariableChipStandalone'; import { VariableChipStandalone } from '@/object-record/record-field/form-types/components/VariableChipStandalone';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent'; import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { TextInput } from '@/ui/field/input/components/TextInput'; import { TextInput } from '@/ui/field/input/components/TextInput';
import { InputErrorHelper } from '@/ui/input/components/InputErrorHelper';
import { InputHint } from '@/ui/input/components/InputHint';
import { InputLabel } from '@/ui/input/components/InputLabel'; import { InputLabel } from '@/ui/input/components/InputLabel';
import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString'; import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
@ -13,8 +15,6 @@ import {
canBeCastAsNumberOrNull, canBeCastAsNumberOrNull,
castAsNumberOrNull, castAsNumberOrNull,
} from '~/utils/cast-as-number-or-null'; } from '~/utils/cast-as-number-or-null';
import { InputErrorHelper } from '@/ui/input/components/InputErrorHelper';
import { InputHint } from '@/ui/input/components/InputHint';
const StyledInput = styled(TextInput)` const StyledInput = styled(TextInput)`
padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`}; padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`};
@ -25,7 +25,7 @@ type FormNumberFieldInputProps = {
error?: string; error?: string;
placeholder: string; placeholder: string;
defaultValue: number | string | undefined; defaultValue: number | string | undefined;
onPersist: (value: number | null | string) => void; onChange: (value: number | null | string) => void;
onBlur?: () => void; onBlur?: () => void;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
hint?: string; hint?: string;
@ -37,7 +37,7 @@ export const FormNumberFieldInput = ({
error, error,
placeholder, placeholder,
defaultValue, defaultValue,
onPersist, onChange,
onBlur, onBlur,
VariablePicker, VariablePicker,
hint, hint,
@ -73,7 +73,7 @@ export const FormNumberFieldInput = ({
const castedValue = castAsNumberOrNull(newValue); const castedValue = castAsNumberOrNull(newValue);
onPersist(castedValue); onChange(castedValue);
}; };
const handleChange = (newText: string) => { const handleChange = (newText: string) => {
@ -91,7 +91,7 @@ export const FormNumberFieldInput = ({
value: '', value: '',
}); });
onPersist(null); onChange(null);
}; };
const handleVariableTagInsert = (variableName: string) => { const handleVariableTagInsert = (variableName: string) => {
@ -100,7 +100,7 @@ export const FormNumberFieldInput = ({
value: variableName, value: variableName,
}); });
onPersist(variableName); onChange(variableName);
}; };
return ( return (

12
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormPhoneFieldInput.tsx
View File

@ -13,7 +13,7 @@ import { getCountryCallingCode } from 'libphonenumber-js';
type FormPhoneFieldInputProps = { type FormPhoneFieldInputProps = {
label?: string; label?: string;
defaultValue?: FieldPhonesValue; defaultValue?: FieldPhonesValue;
onPersist: (value: FieldPhonesValue) => void; onChange: (value: FieldPhonesValue) => void;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
readonly?: boolean; readonly?: boolean;
}; };
@ -21,7 +21,7 @@ type FormPhoneFieldInputProps = {
export const FormPhoneFieldInput = ({ export const FormPhoneFieldInput = ({
label, label,
defaultValue, defaultValue,
onPersist, onChange,
readonly, readonly,
VariablePicker, VariablePicker,
}: FormPhoneFieldInputProps) => { }: FormPhoneFieldInputProps) => {
@ -35,7 +35,7 @@ export const FormPhoneFieldInput = ({
newCallingCode = getCountryCallingCode(newCountry); newCallingCode = getCountryCallingCode(newCountry);
} }
onPersist({ onChange({
primaryPhoneCountryCode: newCountry, primaryPhoneCountryCode: newCountry,
primaryPhoneCallingCode: newCallingCode, primaryPhoneCallingCode: newCallingCode,
primaryPhoneNumber: defaultValue?.primaryPhoneNumber ?? '', primaryPhoneNumber: defaultValue?.primaryPhoneNumber ?? '',
@ -43,7 +43,7 @@ export const FormPhoneFieldInput = ({
}; };
const handleNumberChange = (number: string | number | null) => { const handleNumberChange = (number: string | number | null) => {
onPersist({ onChange({
primaryPhoneCountryCode: defaultValue?.primaryPhoneCountryCode ?? '', primaryPhoneCountryCode: defaultValue?.primaryPhoneCountryCode ?? '',
primaryPhoneCallingCode: defaultValue?.primaryPhoneCallingCode ?? '', primaryPhoneCallingCode: defaultValue?.primaryPhoneCallingCode ?? '',
primaryPhoneNumber: number ? `${number}` : '', primaryPhoneNumber: number ? `${number}` : '',
@ -56,13 +56,13 @@ export const FormPhoneFieldInput = ({
<FormNestedFieldInputContainer> <FormNestedFieldInputContainer>
<FormCountryCodeSelectInput <FormCountryCodeSelectInput
selectedCountryCode={defaultValue?.primaryPhoneCountryCode || ''} selectedCountryCode={defaultValue?.primaryPhoneCountryCode || ''}
onPersist={handleCountryChange} onChange={handleCountryChange}
readonly={readonly} readonly={readonly}
/> />
<FormNumberFieldInput <FormNumberFieldInput
label="Phone Number" label="Phone Number"
defaultValue={defaultValue?.primaryPhoneNumber || ''} defaultValue={defaultValue?.primaryPhoneNumber || ''}
onPersist={handleNumberChange} onChange={handleNumberChange}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
placeholder="Enter phone number" placeholder="Enter phone number"
hint="Without calling code" hint="Without calling code"

8
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormRawJsonFieldInput.tsx
View File

@ -13,7 +13,7 @@ type FormRawJsonFieldInputProps = {
label?: string; label?: string;
defaultValue: string | null | undefined; defaultValue: string | null | undefined;
placeholder: string; placeholder: string;
onPersist: (value: string | null) => void; onChange: (value: string | null) => void;
readonly?: boolean; readonly?: boolean;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
}; };
@ -22,7 +22,7 @@ export const FormRawJsonFieldInput = ({
label, label,
defaultValue, defaultValue,
placeholder, placeholder,
onPersist, onChange,
readonly, readonly,
VariablePicker, VariablePicker,
}: FormRawJsonFieldInputProps) => { }: FormRawJsonFieldInputProps) => {
@ -37,12 +37,12 @@ export const FormRawJsonFieldInput = ({
const text = turnIntoEmptyStringIfWhitespacesOnly(editor.getText()); const text = turnIntoEmptyStringIfWhitespacesOnly(editor.getText());
if (text === '') { if (text === '') {
onPersist(null); onChange(null);
return; return;
} }
onPersist(text); onChange(text);
}, },
}); });

12
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx
View File

@ -24,7 +24,7 @@ import { IconChevronDown, VisibilityHidden } from 'twenty-ui';
type FormSelectFieldInputProps = { type FormSelectFieldInputProps = {
label?: string; label?: string;
defaultValue: string | undefined; defaultValue: string | undefined;
onPersist: (value: string | null) => void; onChange: (value: string | null) => void;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
options: SelectOption[]; options: SelectOption[];
clearLabel?: string; clearLabel?: string;
@ -72,7 +72,7 @@ const StyledSelectDisplayContainer = styled.div`
export const FormSelectFieldInput = ({ export const FormSelectFieldInput = ({
label, label,
defaultValue, defaultValue,
onPersist, onChange,
VariablePicker, VariablePicker,
options, options,
clearLabel, clearLabel,
@ -122,7 +122,7 @@ export const FormSelectFieldInput = ({
goBackToPreviousHotkeyScope(); goBackToPreviousHotkeyScope();
onPersist(option); onChange(option);
}; };
const onCancel = () => { const onCancel = () => {
@ -151,7 +151,7 @@ export const FormSelectFieldInput = ({
value: '', value: '',
}); });
onPersist(null); onChange(null);
}; };
const selectedOption = options.find( const selectedOption = options.find(
@ -177,7 +177,7 @@ export const FormSelectFieldInput = ({
editingMode: 'view', editingMode: 'view',
}); });
onPersist(null); onChange(null);
}; };
const handleVariableTagInsert = (variableName: string) => { const handleVariableTagInsert = (variableName: string) => {
@ -186,7 +186,7 @@ export const FormSelectFieldInput = ({
value: variableName, value: variableName,
}); });
onPersist(variableName); onChange(variableName);
}; };
const handleDisplayModeClick = () => { const handleDisplayModeClick = () => {

6
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormTextFieldInput.tsx
View File

@ -17,7 +17,7 @@ type FormTextFieldInputProps = {
hint?: string; hint?: string;
defaultValue: string | undefined; defaultValue: string | undefined;
placeholder: string; placeholder: string;
onPersist: (value: string) => void; onChange: (value: string) => void;
onBlur?: () => void; onBlur?: () => void;
multiline?: boolean; multiline?: boolean;
readonly?: boolean; readonly?: boolean;
@ -30,7 +30,7 @@ export const FormTextFieldInput = ({
hint, hint,
defaultValue, defaultValue,
placeholder, placeholder,
onPersist, onChange,
onBlur, onBlur,
multiline, multiline,
readonly, readonly,
@ -47,7 +47,7 @@ export const FormTextFieldInput = ({
const jsonContent = editor.getJSON(); const jsonContent = editor.getJSON();
const parsedContent = parseEditorContent(jsonContent); const parsedContent = parseEditorContent(jsonContent);
onPersist(parsedContent); onChange(parsedContent);
}, },
}); });

12
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormUuidFieldInput.tsx
View File

@ -18,7 +18,7 @@ type FormUuidFieldInputProps = {
label?: string; label?: string;
defaultValue: string | null | undefined; defaultValue: string | null | undefined;
placeholder: string; placeholder: string;
onPersist: (value: string | null) => void; onChange: (value: string | null) => void;
readonly?: boolean; readonly?: boolean;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
}; };
@ -27,7 +27,7 @@ export const FormUuidFieldInput = ({
label, label,
defaultValue, defaultValue,
placeholder, placeholder,
onPersist, onChange,
readonly, readonly,
VariablePicker, VariablePicker,
}: FormUuidFieldInputProps) => { }: FormUuidFieldInputProps) => {
@ -63,12 +63,12 @@ export const FormUuidFieldInput = ({
const trimmedNewText = newText.trim(); const trimmedNewText = newText.trim();
if (trimmedNewText === '') { if (trimmedNewText === '') {
onPersist(null); onChange(null);
return; return;
} }
onPersist(trimmedNewText); onChange(trimmedNewText);
}; };
const handleUnlinkVariable = () => { const handleUnlinkVariable = () => {
@ -77,7 +77,7 @@ export const FormUuidFieldInput = ({
value: '', value: '',
}); });
onPersist(null); onChange(null);
}; };
const handleVariableTagInsert = (variableName: string) => { const handleVariableTagInsert = (variableName: string) => {
@ -86,7 +86,7 @@ export const FormUuidFieldInput = ({
value: variableName, value: variableName,
}); });
onPersist(variableName); onChange(variableName);
}; };
return ( return (

4
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormAddressFieldInput.stories.tsx
View File

@ -89,7 +89,7 @@ export const Disabled: Story = {
addressLat: 39.781721, addressLat: 39.781721,
addressLng: -89.650148, addressLng: -89.650148,
}, },
onPersist: fn(), onChange: fn(),
VariablePicker: () => <div>VariablePicker</div>, VariablePicker: () => <div>VariablePicker</div>,
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
@ -113,7 +113,7 @@ export const Disabled: Story = {
const searchInputInModal = canvas.queryByPlaceholderText('Search'); const searchInputInModal = canvas.queryByPlaceholderText('Search');
expect(searchInputInModal).not.toBeInTheDocument(); expect(searchInputInModal).not.toBeInTheDocument();
expect(args.onPersist).not.toHaveBeenCalled(); expect(args.onChange).not.toHaveBeenCalled();
const variablePickers = canvas.queryAllByText('VariablePicker'); const variablePickers = canvas.queryAllByText('VariablePicker');
expect(variablePickers).toHaveLength(0); expect(variablePickers).toHaveLength(0);

34
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateFieldInput.stories.tsx
View File

@ -61,7 +61,7 @@ export const SetsDateWithInput: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: undefined, defaultValue: undefined,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -76,7 +76,7 @@ export const SetsDateWithInput: Story = {
await userEvent.type(input, `12/08/${currentYear}{enter}`); await userEvent.type(input, `12/08/${currentYear}{enter}`);
await waitFor(() => { await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith( expect(args.onChange).toHaveBeenCalledWith(
`${currentYear}-12-08T00:00:00.000Z`, `${currentYear}-12-08T00:00:00.000Z`,
); );
}); });
@ -89,7 +89,7 @@ export const SetsDateWithDatePicker: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: `2024-12-09T13:20:19.631Z`, defaultValue: `2024-12-09T13:20:19.631Z`,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -111,7 +111,7 @@ export const SetsDateWithDatePicker: Story = {
waitForElementToBeRemoved(datePicker), waitForElementToBeRemoved(datePicker),
waitFor(() => { waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith( expect(args.onChange).toHaveBeenCalledWith(
expect.stringMatching(new RegExp(`^2024-12-07`)), expect.stringMatching(new RegExp(`^2024-12-07`)),
); );
}), }),
@ -126,7 +126,7 @@ export const ResetsDateByClickingButton: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`, defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -146,7 +146,7 @@ export const ResetsDateByClickingButton: Story = {
waitForElementToBeRemoved(datePicker), waitForElementToBeRemoved(datePicker),
waitFor(() => { waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(null); expect(args.onChange).toHaveBeenCalledWith(null);
}), }),
waitFor(() => { waitFor(() => {
expect(input).toHaveDisplayValue(''); expect(input).toHaveDisplayValue('');
@ -159,7 +159,7 @@ export const ResetsDateByErasingInputContent: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`, defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -176,7 +176,7 @@ export const ResetsDateByErasingInputContent: Story = {
waitForElementToBeRemoved(() => canvas.queryByRole('dialog')), waitForElementToBeRemoved(() => canvas.queryByRole('dialog')),
waitFor(() => { waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(null); expect(args.onChange).toHaveBeenCalledWith(null);
}), }),
waitFor(() => { waitFor(() => {
expect(input).toHaveDisplayValue(''); expect(input).toHaveDisplayValue('');
@ -189,7 +189,7 @@ export const DefaultsToMinValueWhenTypingReallyOldDate: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: undefined, defaultValue: undefined,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -206,7 +206,7 @@ export const DefaultsToMinValueWhenTypingReallyOldDate: Story = {
userEvent.type(input, '02/02/1500{Enter}'), userEvent.type(input, '02/02/1500{Enter}'),
waitFor(() => { waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(MIN_DATE.toISOString()); expect(args.onChange).toHaveBeenCalledWith(MIN_DATE.toISOString());
}), }),
waitFor(() => { waitFor(() => {
expect(input).toHaveDisplayValue( expect(input).toHaveDisplayValue(
@ -247,7 +247,7 @@ export const DefaultsToMaxValueWhenTypingReallyFarDate: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: undefined, defaultValue: undefined,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -264,7 +264,7 @@ export const DefaultsToMaxValueWhenTypingReallyFarDate: Story = {
userEvent.type(input, '02/02/2500{Enter}'), userEvent.type(input, '02/02/2500{Enter}'),
waitFor(() => { waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(MAX_DATE.toISOString()); expect(args.onChange).toHaveBeenCalledWith(MAX_DATE.toISOString());
}), }),
waitFor(() => { waitFor(() => {
expect(input).toHaveDisplayValue( expect(input).toHaveDisplayValue(
@ -305,7 +305,7 @@ export const SwitchesToStandaloneVariable: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: undefined, defaultValue: undefined,
onPersist: fn(), onChange: fn(),
VariablePicker: ({ onVariableSelect }) => { VariablePicker: ({ onVariableSelect }) => {
return ( return (
<button <button
@ -347,7 +347,7 @@ export const ClickingOutsideDoesNotResetInputState: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`, defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const defaultValueAsDisplayString = parseDateToString({ const defaultValueAsDisplayString = parseDateToString({
@ -373,7 +373,7 @@ export const ClickingOutsideDoesNotResetInputState: Story = {
waitForElementToBeRemoved(datePicker), waitForElementToBeRemoved(datePicker),
]); ]);
expect(args.onPersist).not.toHaveBeenCalled(); expect(args.onChange).not.toHaveBeenCalled();
expect(input).toHaveDisplayValue(defaultValueAsDisplayString.slice(0, -2)); expect(input).toHaveDisplayValue(defaultValueAsDisplayString.slice(0, -2));
}, },
@ -383,7 +383,7 @@ export const Disabled: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`, defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(), onChange: fn(),
readonly: true, readonly: true,
}, },
play: async ({ canvasElement }) => { play: async ({ canvasElement }) => {
@ -398,7 +398,7 @@ export const DisabledWithVariable: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: `{{${MOCKED_STEP_ID}.createdAt}}`, defaultValue: `{{${MOCKED_STEP_ID}.createdAt}}`,
onPersist: fn(), onChange: fn(),
readonly: true, readonly: true,
VariablePicker: ({ onVariableSelect }) => { VariablePicker: ({ onVariableSelect }) => {
return ( return (

38
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateTimeFieldInput.stories.tsx
View File

@ -63,7 +63,7 @@ export const SetsDateTimeWithInput: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: undefined, defaultValue: undefined,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -78,7 +78,7 @@ export const SetsDateTimeWithInput: Story = {
await userEvent.type(input, `12/08/${currentYear} 12:10{enter}`); await userEvent.type(input, `12/08/${currentYear} 12:10{enter}`);
await waitFor(() => { await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith( expect(args.onChange).toHaveBeenCalledWith(
expect.stringMatching(new RegExp(`^${currentYear}-12-08`)), expect.stringMatching(new RegExp(`^${currentYear}-12-08`)),
); );
}); });
@ -91,7 +91,7 @@ export const DoesNotSetDateWithoutTime: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: undefined, defaultValue: undefined,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -105,7 +105,7 @@ export const DoesNotSetDateWithoutTime: Story = {
await userEvent.type(input, `12/08/${currentYear}{enter}`); await userEvent.type(input, `12/08/${currentYear}{enter}`);
expect(args.onPersist).not.toHaveBeenCalled(); expect(args.onChange).not.toHaveBeenCalled();
expect(dialog).toBeVisible(); expect(dialog).toBeVisible();
}, },
}; };
@ -114,7 +114,7 @@ export const SetsDateTimeWithDatePicker: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: `2024-12-09T13:20:19.631Z`, defaultValue: `2024-12-09T13:20:19.631Z`,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -136,7 +136,7 @@ export const SetsDateTimeWithDatePicker: Story = {
waitForElementToBeRemoved(datePicker), waitForElementToBeRemoved(datePicker),
waitFor(() => { waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith( expect(args.onChange).toHaveBeenCalledWith(
expect.stringMatching(/^2024-12-07/), expect.stringMatching(/^2024-12-07/),
); );
}), }),
@ -153,7 +153,7 @@ export const ResetsDateByClickingButton: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`, defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -173,7 +173,7 @@ export const ResetsDateByClickingButton: Story = {
waitForElementToBeRemoved(datePicker), waitForElementToBeRemoved(datePicker),
waitFor(() => { waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(null); expect(args.onChange).toHaveBeenCalledWith(null);
}), }),
waitFor(() => { waitFor(() => {
expect(input).toHaveDisplayValue(''); expect(input).toHaveDisplayValue('');
@ -186,7 +186,7 @@ export const ResetsDateByErasingInputContent: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`, defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -205,7 +205,7 @@ export const ResetsDateByErasingInputContent: Story = {
waitForElementToBeRemoved(() => canvas.queryByRole('dialog')), waitForElementToBeRemoved(() => canvas.queryByRole('dialog')),
waitFor(() => { waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(null); expect(args.onChange).toHaveBeenCalledWith(null);
}), }),
waitFor(() => { waitFor(() => {
expect(input).toHaveDisplayValue(''); expect(input).toHaveDisplayValue('');
@ -218,7 +218,7 @@ export const DefaultsToMinValueWhenTypingReallyOldDate: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: undefined, defaultValue: undefined,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -235,7 +235,7 @@ export const DefaultsToMinValueWhenTypingReallyOldDate: Story = {
userEvent.type(input, '02/02/1500 10:10{Enter}'), userEvent.type(input, '02/02/1500 10:10{Enter}'),
waitFor(() => { waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(MIN_DATE.toISOString()); expect(args.onChange).toHaveBeenCalledWith(MIN_DATE.toISOString());
}), }),
waitFor(() => { waitFor(() => {
expect(input).toHaveDisplayValue( expect(input).toHaveDisplayValue(
@ -276,7 +276,7 @@ export const DefaultsToMaxValueWhenTypingReallyFarDate: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: undefined, defaultValue: undefined,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -293,7 +293,7 @@ export const DefaultsToMaxValueWhenTypingReallyFarDate: Story = {
userEvent.type(input, '02/02/2500 10:10{Enter}'), userEvent.type(input, '02/02/2500 10:10{Enter}'),
waitFor(() => { waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(MAX_DATE.toISOString()); expect(args.onChange).toHaveBeenCalledWith(MAX_DATE.toISOString());
}), }),
waitFor(() => { waitFor(() => {
expect(input).toHaveDisplayValue( expect(input).toHaveDisplayValue(
@ -334,7 +334,7 @@ export const SwitchesToStandaloneVariable: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: undefined, defaultValue: undefined,
onPersist: fn(), onChange: fn(),
VariablePicker: ({ onVariableSelect }) => { VariablePicker: ({ onVariableSelect }) => {
return ( return (
<button <button
@ -376,7 +376,7 @@ export const ClickingOutsideDoesNotResetInputState: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`, defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const defaultValueAsDisplayString = parseDateToString({ const defaultValueAsDisplayString = parseDateToString({
@ -402,7 +402,7 @@ export const ClickingOutsideDoesNotResetInputState: Story = {
waitForElementToBeRemoved(datePicker), waitForElementToBeRemoved(datePicker),
]); ]);
expect(args.onPersist).not.toHaveBeenCalled(); expect(args.onChange).not.toHaveBeenCalled();
expect(input).toHaveDisplayValue(defaultValueAsDisplayString.slice(0, -2)); expect(input).toHaveDisplayValue(defaultValueAsDisplayString.slice(0, -2));
}, },
@ -412,7 +412,7 @@ export const Disabled: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`, defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(), onChange: fn(),
readonly: true, readonly: true,
}, },
play: async ({ canvasElement }) => { play: async ({ canvasElement }) => {
@ -429,7 +429,7 @@ export const DisabledWithVariable: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: `{{${MOCKED_STEP_ID}.createdAt}}`, defaultValue: `{{${MOCKED_STEP_ID}.createdAt}}`,
onPersist: fn(), onChange: fn(),
readonly: true, readonly: true,
VariablePicker: ({ onVariableSelect }) => { VariablePicker: ({ onVariableSelect }) => {
return ( return (

4
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormEmailsFieldInput.stories.tsx
View File

@ -61,7 +61,7 @@ export const Disabled: Story = {
primaryEmail: 'tim@twenty.com', primaryEmail: 'tim@twenty.com',
additionalEmails: [], additionalEmails: [],
}, },
onPersist: fn(), onChange: fn(),
VariablePicker: () => <div>VariablePicker</div>, VariablePicker: () => <div>VariablePicker</div>,
readonly: true, readonly: true,
}, },
@ -79,7 +79,7 @@ export const Disabled: Story = {
await userEvent.type(editor, 'hello@gmail.com'); await userEvent.type(editor, 'hello@gmail.com');
expect(args.onPersist).not.toHaveBeenCalled(); expect(args.onChange).not.toHaveBeenCalled();
expect(canvas.queryByText('hello@gmail.com')).not.toBeInTheDocument(); expect(canvas.queryByText('hello@gmail.com')).not.toBeInTheDocument();
expect(defaultValue).toBeVisible(); expect(defaultValue).toBeVisible();

4
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormFullNameFieldInput.stories.tsx
View File

@ -66,7 +66,7 @@ export const Disabled: Story = {
lastName: 'Doe', lastName: 'Doe',
}, },
VariablePicker: () => <div>VariablePicker</div>, VariablePicker: () => <div>VariablePicker</div>,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -77,7 +77,7 @@ export const Disabled: Story = {
await userEvent.type(firstNameVariable, 'Jane'); await userEvent.type(firstNameVariable, 'Jane');
await userEvent.type(lastNameVariable, 'Smith'); await userEvent.type(lastNameVariable, 'Smith');
expect(args.onPersist).not.toHaveBeenCalled(); expect(args.onChange).not.toHaveBeenCalled();
const variablePickers = canvas.queryAllByText('VariablePicker'); const variablePickers = canvas.queryAllByText('VariablePicker');
expect(variablePickers).toHaveLength(0); expect(variablePickers).toHaveLength(0);

6
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormLinksFieldInput.stories.tsx
View File

@ -63,9 +63,9 @@ export const WithVariables: Story = {
export const Disabled: Story = { export const Disabled: Story = {
args: { args: {
label: 'Number field...', label: 'Domain Name',
readonly: true, readonly: true,
onPersist: fn(), onChange: fn(),
VariablePicker: () => <div>VariablePicker</div>, VariablePicker: () => <div>VariablePicker</div>,
defaultValue: { defaultValue: {
primaryLinkLabel: 'Google', primaryLinkLabel: 'Google',
@ -81,7 +81,7 @@ export const Disabled: Story = {
await userEvent.type(labelInput, 'Yahoo'); await userEvent.type(labelInput, 'Yahoo');
await userEvent.type(linkInput, 'https://www.yahoo.com'); await userEvent.type(linkInput, 'https://www.yahoo.com');
expect(args.onPersist).not.toHaveBeenCalled(); expect(args.onChange).not.toHaveBeenCalled();
const variablePickers = canvas.queryAllByText('VariablePicker'); const variablePickers = canvas.queryAllByText('VariablePicker');
expect(variablePickers).toHaveLength(0); expect(variablePickers).toHaveLength(0);

6
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormMultiSelectFieldInput.stories.tsx
View File

@ -65,7 +65,7 @@ export const WithVariablePicker: Story = {
color: 'blue', color: 'blue',
}, },
], ],
onPersist: fn(), onChange: fn(),
VariablePicker: () => <div>VariablePicker</div>, VariablePicker: () => <div>VariablePicker</div>,
}, },
play: async ({ canvasElement }) => { play: async ({ canvasElement }) => {
@ -102,7 +102,7 @@ export const Disabled: Story = {
color: 'yellow', color: 'yellow',
}, },
], ],
onPersist: fn(), onChange: fn(),
readonly: true, readonly: true,
}, },
play: async ({ canvasElement }) => { play: async ({ canvasElement }) => {
@ -122,7 +122,7 @@ export const DisabledWithVariable: Story = {
args: { args: {
label: 'Created At', label: 'Created At',
defaultValue: `{{${MOCKED_STEP_ID}.stage}}`, defaultValue: `{{${MOCKED_STEP_ID}.stage}}`,
onPersist: fn(), onChange: fn(),
readonly: true, readonly: true,
}, },
play: async ({ canvasElement }) => { play: async ({ canvasElement }) => {

16
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormPhoneFieldInput.stories.tsx
View File

@ -40,7 +40,7 @@ export const Default: Story = {
export const SelectCountryCode: Story = { export const SelectCountryCode: Story = {
args: { args: {
label: 'Phone', label: 'Phone',
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -60,21 +60,21 @@ export const SelectCountryCode: Story = {
await userEvent.click(franceOption); await userEvent.click(franceOption);
await waitFor(() => { await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith({ expect(args.onChange).toHaveBeenCalledWith({
primaryPhoneNumber: '', primaryPhoneNumber: '',
primaryPhoneCountryCode: 'FR', primaryPhoneCountryCode: 'FR',
primaryPhoneCallingCode: '33', primaryPhoneCallingCode: '33',
}); });
}); });
expect(args.onPersist).toHaveBeenCalledTimes(1); expect(args.onChange).toHaveBeenCalledTimes(1);
}, },
}; };
export const SelectEmptyCountryCode: Story = { export const SelectEmptyCountryCode: Story = {
args: { args: {
label: 'Phone', label: 'Phone',
onPersist: fn(), onChange: fn(),
defaultValue: { defaultValue: {
primaryPhoneNumber: '', primaryPhoneNumber: '',
primaryPhoneCountryCode: 'FR', primaryPhoneCountryCode: 'FR',
@ -97,14 +97,14 @@ export const SelectEmptyCountryCode: Story = {
await userEvent.click(emptyOption); await userEvent.click(emptyOption);
await waitFor(() => { await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith({ expect(args.onChange).toHaveBeenCalledWith({
primaryPhoneNumber: '', primaryPhoneNumber: '',
primaryPhoneCountryCode: '', primaryPhoneCountryCode: '',
primaryPhoneCallingCode: '', primaryPhoneCallingCode: '',
}); });
}); });
expect(args.onPersist).toHaveBeenCalledTimes(1); expect(args.onChange).toHaveBeenCalledTimes(1);
}, },
}; };
@ -147,7 +147,7 @@ export const SelectingVariables: Story = {
</button> </button>
); );
}, },
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -167,7 +167,7 @@ export const SelectingVariables: Story = {
expect(phoneNumberVariable).toBeVisible(); expect(phoneNumberVariable).toBeVisible();
await waitFor(() => { await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith({ expect(args.onChange).toHaveBeenCalledWith({
primaryPhoneNumber: `{{${MOCKED_STEP_ID}.phone.number}}`, primaryPhoneNumber: `{{${MOCKED_STEP_ID}.phone.number}}`,
primaryPhoneCountryCode: '', primaryPhoneCountryCode: '',
primaryPhoneCallingCode: '', primaryPhoneCallingCode: '',

46
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx
View File

@ -36,7 +36,7 @@ export const Readonly: Story = {
label: 'JSON field', label: 'JSON field',
placeholder: 'Enter valid json', placeholder: 'Enter valid json',
readonly: true, readonly: true,
onPersist: fn(), onChange: fn(),
VariablePicker: ({ onVariableSelect }) => { VariablePicker: ({ onVariableSelect }) => {
return ( return (
<button <button
@ -66,7 +66,7 @@ export const Readonly: Story = {
expect(allParagraphs[0]).toHaveTextContent(''); expect(allParagraphs[0]).toHaveTextContent('');
}); });
expect(args.onPersist).not.toHaveBeenCalled(); expect(args.onChange).not.toHaveBeenCalled();
const addVariableButton = canvas.queryByText('Add variable'); const addVariableButton = canvas.queryByText('Add variable');
expect(addVariableButton).not.toBeInTheDocument(); expect(addVariableButton).not.toBeInTheDocument();
@ -76,7 +76,7 @@ export const Readonly: Story = {
export const SaveValidJson: Story = { export const SaveValidJson: Story = {
args: { args: {
placeholder: 'Enter valid json', placeholder: 'Enter valid json',
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const editor = await waitFor(() => { const editor = await waitFor(() => {
@ -88,7 +88,7 @@ export const SaveValidJson: Story = {
await userEvent.type(editor, '{{ "a": {{ "b" : "d" } }'); await userEvent.type(editor, '{{ "a": {{ "b" : "d" } }');
await waitFor(() => { await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith('{ "a": { "b" : "d" } }'); expect(args.onChange).toHaveBeenCalledWith('{ "a": { "b" : "d" } }');
}); });
}, },
}; };
@ -96,7 +96,7 @@ export const SaveValidJson: Story = {
export const SaveValidMultilineJson: Story = { export const SaveValidMultilineJson: Story = {
args: { args: {
placeholder: 'Enter valid json', placeholder: 'Enter valid json',
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const editor = await waitFor(() => { const editor = await waitFor(() => {
@ -111,7 +111,7 @@ export const SaveValidMultilineJson: Story = {
); );
await waitFor(() => { await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith( expect(args.onChange).toHaveBeenCalledWith(
'{\n "a": {\n "b" : "d"\n }\n}', '{\n "a": {\n "b" : "d"\n }\n}',
); );
}); });
@ -141,7 +141,7 @@ export const MultilineWithDefaultValue: Story = {
export const DoesNotIgnoreInvalidJson: Story = { export const DoesNotIgnoreInvalidJson: Story = {
args: { args: {
placeholder: 'Enter valid json', placeholder: 'Enter valid json',
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const editor = await waitFor(() => { const editor = await waitFor(() => {
@ -154,7 +154,7 @@ export const DoesNotIgnoreInvalidJson: Story = {
await userEvent.click(canvasElement); await userEvent.click(canvasElement);
expect(args.onPersist).toHaveBeenCalledWith('lol'); expect(args.onChange).toHaveBeenCalledWith('lol');
}, },
}; };
@ -162,7 +162,7 @@ export const DisplayDefaultValueWithVariablesProperly: Story = {
args: { args: {
placeholder: 'Enter valid json', placeholder: 'Enter valid json',
defaultValue: `{ "a": { "b" : {{${MOCKED_STEP_ID}.name}} } }`, defaultValue: `{ "a": { "b" : {{${MOCKED_STEP_ID}.name}} } }`,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement }) => { play: async ({ canvasElement }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -190,7 +190,7 @@ export const InsertVariableInTheMiddleOnTextInput: Story = {
</button> </button>
); );
}, },
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -213,7 +213,7 @@ export const InsertVariableInTheMiddleOnTextInput: Story = {
await Promise.all([ await Promise.all([
waitFor(() => { waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith( expect(args.onChange).toHaveBeenCalledWith(
'{ "a": { "b" : {{test}} } }', '{ "a": { "b" : {{test}} } }',
); );
}), }),
@ -235,7 +235,7 @@ export const CanUseVariableAsObjectProperty: Story = {
</button> </button>
); );
}, },
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -257,7 +257,7 @@ export const CanUseVariableAsObjectProperty: Story = {
await userEvent.type(editor, '": 2 }'); await userEvent.type(editor, '": 2 }');
await waitFor(() => { await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith('{ "{{test}}": 2 }'); expect(args.onChange).toHaveBeenCalledWith('{ "{{test}}": 2 }');
}); });
}, },
}; };
@ -266,7 +266,7 @@ export const ClearField: Story = {
args: { args: {
placeholder: 'Enter valid json', placeholder: 'Enter valid json',
defaultValue: '{ "a": 2 }', defaultValue: '{ "a": 2 }',
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const defaultValueStringLength = args.defaultValue!.length; const defaultValueStringLength = args.defaultValue!.length;
@ -281,7 +281,7 @@ export const ClearField: Story = {
userEvent.type(editor, `{Backspace>${defaultValueStringLength}}`), userEvent.type(editor, `{Backspace>${defaultValueStringLength}}`),
waitFor(() => { waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(null); expect(args.onChange).toHaveBeenCalledWith(null);
}), }),
]); ]);
}, },
@ -294,7 +294,7 @@ export const ClearField: Story = {
export const DoesNotBreakWhenUserInsertsNewlineInJsonString: Story = { export const DoesNotBreakWhenUserInsertsNewlineInJsonString: Story = {
args: { args: {
placeholder: 'Enter valid json', placeholder: 'Enter valid json',
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const editor = await waitFor(() => { const editor = await waitFor(() => {
@ -307,14 +307,14 @@ export const DoesNotBreakWhenUserInsertsNewlineInJsonString: Story = {
await userEvent.click(canvasElement); await userEvent.click(canvasElement);
expect(args.onPersist).toHaveBeenCalled(); expect(args.onChange).toHaveBeenCalled();
}, },
}; };
export const AcceptsJsonEncodedNewline: Story = { export const AcceptsJsonEncodedNewline: Story = {
args: { args: {
placeholder: 'Enter valid json', placeholder: 'Enter valid json',
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const editor = await waitFor(() => { const editor = await waitFor(() => {
@ -327,7 +327,7 @@ export const AcceptsJsonEncodedNewline: Story = {
await userEvent.click(canvasElement); await userEvent.click(canvasElement);
expect(args.onPersist).toHaveBeenCalledWith('"a\\nb"'); expect(args.onChange).toHaveBeenCalledWith('"a\\nb"');
}, },
}; };
@ -345,7 +345,7 @@ export const HasHistory: Story = {
</button> </button>
); );
}, },
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const controlKey = getUserDevice() === 'mac' ? 'Meta' : 'Control'; const controlKey = getUserDevice() === 'mac' ? 'Meta' : 'Control';
@ -368,14 +368,14 @@ export const HasHistory: Story = {
await userEvent.type(editor, ' }'); await userEvent.type(editor, ' }');
expect(args.onPersist).toHaveBeenLastCalledWith( expect(args.onChange).toHaveBeenLastCalledWith(
`{ "a": {{${MOCKED_STEP_ID}.name}} }`, `{ "a": {{${MOCKED_STEP_ID}.name}} }`,
); );
await userEvent.type(editor, `{${controlKey}>}z{/${controlKey}}`); await userEvent.type(editor, `{${controlKey}>}z{/${controlKey}}`);
expect(editor).toHaveTextContent(''); expect(editor).toHaveTextContent('');
expect(args.onPersist).toHaveBeenLastCalledWith(null); expect(args.onChange).toHaveBeenLastCalledWith(null);
await userEvent.type( await userEvent.type(
editor, editor,
@ -383,7 +383,7 @@ export const HasHistory: Story = {
); );
expect(editor).toHaveTextContent('{ "a": Name }'); expect(editor).toHaveTextContent('{ "a": Name }');
expect(args.onPersist).toHaveBeenLastCalledWith( expect(args.onChange).toHaveBeenLastCalledWith(
`{ "a": {{${MOCKED_STEP_ID}.name}} }`, `{ "a": {{${MOCKED_STEP_ID}.name}} }`,
); );
}, },

6
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormSelectFieldInput.stories.tsx
View File

@ -65,7 +65,7 @@ export const WithVariablePicker: Story = {
color: 'blue', color: 'blue',
}, },
], ],
onPersist: fn(), onChange: fn(),
VariablePicker: () => <div>VariablePicker</div>, VariablePicker: () => <div>VariablePicker</div>,
}, },
play: async ({ canvasElement }) => { play: async ({ canvasElement }) => {
@ -102,7 +102,7 @@ export const Disabled: Story = {
color: 'yellow', color: 'yellow',
}, },
], ],
onPersist: fn(), onChange: fn(),
readonly: true, readonly: true,
}, },
play: async ({ canvasElement }) => { play: async ({ canvasElement }) => {
@ -144,7 +144,7 @@ export const DisabledWithVariable: Story = {
color: 'yellow', color: 'yellow',
}, },
], ],
onPersist: fn(), onChange: fn(),
readonly: true, readonly: true,
}, },
play: async ({ canvasElement }) => { play: async ({ canvasElement }) => {

24
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormTextFieldInput.stories.tsx
View File

@ -89,7 +89,7 @@ export const WithVariable: Story = {
</button> </button>
); );
}, },
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -104,9 +104,9 @@ export const WithVariable: Story = {
expect(variable).toBeVisible(); expect(variable).toBeVisible();
await waitFor(() => { await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(`{{${MOCKED_STEP_ID}.name}}`); expect(args.onChange).toHaveBeenCalledWith(`{{${MOCKED_STEP_ID}.name}}`);
}); });
expect(args.onPersist).toHaveBeenCalledTimes(1); expect(args.onChange).toHaveBeenCalledTimes(1);
}, },
}; };
@ -115,7 +115,7 @@ export const WithDeletableVariable: Story = {
label: 'Text', label: 'Text',
placeholder: 'Text field...', placeholder: 'Text field...',
defaultValue: `test {{${MOCKED_STEP_ID}.name}} test`, defaultValue: `test {{${MOCKED_STEP_ID}.name}} test`,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -143,9 +143,9 @@ export const WithDeletableVariable: Story = {
expect(editor).toHaveTextContent('test test'); expect(editor).toHaveTextContent('test test');
await waitFor(() => { await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith('test test'); expect(args.onChange).toHaveBeenCalledWith('test test');
}); });
expect(args.onPersist).toHaveBeenCalledTimes(1); expect(args.onChange).toHaveBeenCalledTimes(1);
}, },
}; };
@ -156,7 +156,7 @@ export const Disabled: Story = {
defaultValue: 'Text field', defaultValue: 'Text field',
readonly: true, readonly: true,
VariablePicker: () => <div>VariablePicker</div>, VariablePicker: () => <div>VariablePicker</div>,
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -175,7 +175,7 @@ export const Disabled: Story = {
await userEvent.type(editor, 'Hello'); await userEvent.type(editor, 'Hello');
expect(args.onPersist).not.toHaveBeenCalled(); expect(args.onChange).not.toHaveBeenCalled();
expect(canvas.queryByText('Hello')).not.toBeInTheDocument(); expect(canvas.queryByText('Hello')).not.toBeInTheDocument();
expect(defaultValue).toBeVisible(); expect(defaultValue).toBeVisible();
}, },
@ -220,7 +220,7 @@ export const HasHistory: Story = {
</button> </button>
); );
}, },
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const controlKey = getUserDevice() === 'mac' ? 'Meta' : 'Control'; const controlKey = getUserDevice() === 'mac' ? 'Meta' : 'Control';
@ -241,14 +241,14 @@ export const HasHistory: Story = {
await userEvent.click(addVariableButton); await userEvent.click(addVariableButton);
expect(args.onPersist).toHaveBeenLastCalledWith( expect(args.onChange).toHaveBeenLastCalledWith(
`Hello World {{${MOCKED_STEP_ID}.name}}`, `Hello World {{${MOCKED_STEP_ID}.name}}`,
); );
await userEvent.type(editor, `{${controlKey}>}z{/${controlKey}}`); await userEvent.type(editor, `{${controlKey}>}z{/${controlKey}}`);
expect(editor).toHaveTextContent(''); expect(editor).toHaveTextContent('');
expect(args.onPersist).toHaveBeenLastCalledWith(''); expect(args.onChange).toHaveBeenLastCalledWith('');
await userEvent.type( await userEvent.type(
editor, editor,
@ -256,7 +256,7 @@ export const HasHistory: Story = {
); );
expect(editor).toHaveTextContent(`Hello World Name`); expect(editor).toHaveTextContent(`Hello World Name`);
expect(args.onPersist).toHaveBeenLastCalledWith( expect(args.onChange).toHaveBeenLastCalledWith(
`Hello World {{${MOCKED_STEP_ID}.name}}`, `Hello World {{${MOCKED_STEP_ID}.name}}`,
); );
}, },

22
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormUuidFieldInput.stories.tsx
View File

@ -33,7 +33,7 @@ export const SetUuidWithDashes: Story = {
args: { args: {
label: 'UUID field', label: 'UUID field',
placeholder: 'Enter UUID', placeholder: 'Enter UUID',
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -46,7 +46,7 @@ export const SetUuidWithDashes: Story = {
await userEvent.type(input, uuid); await userEvent.type(input, uuid);
await waitFor(() => { await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(uuid); expect(args.onChange).toHaveBeenCalledWith(uuid);
}); });
}, },
}; };
@ -55,7 +55,7 @@ export const SetUuidWithoutDashes: Story = {
args: { args: {
label: 'UUID field', label: 'UUID field',
placeholder: 'Enter UUID', placeholder: 'Enter UUID',
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -68,7 +68,7 @@ export const SetUuidWithoutDashes: Story = {
await userEvent.type(input, uuid); await userEvent.type(input, uuid);
await waitFor(() => { await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(uuid); expect(args.onChange).toHaveBeenCalledWith(uuid);
}); });
}, },
}; };
@ -77,7 +77,7 @@ export const SetInvalidUuidWithNoValidation: Story = {
args: { args: {
label: 'UUID field', label: 'UUID field',
placeholder: 'Enter UUID', placeholder: 'Enter UUID',
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -90,7 +90,7 @@ export const SetInvalidUuidWithNoValidation: Story = {
await userEvent.type(input, uuid); await userEvent.type(input, uuid);
await waitFor(() => { await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(uuid); expect(args.onChange).toHaveBeenCalledWith(uuid);
}); });
}, },
}; };
@ -99,7 +99,7 @@ export const TrimInputBeforePersisting: Story = {
args: { args: {
label: 'UUID field', label: 'UUID field',
placeholder: 'Enter UUID', placeholder: 'Enter UUID',
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -112,7 +112,7 @@ export const TrimInputBeforePersisting: Story = {
await userEvent.type(input, `{Space>2}${uuid}{Space>3}`); await userEvent.type(input, `{Space>2}${uuid}{Space>3}`);
await waitFor(() => { await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(uuid); expect(args.onChange).toHaveBeenCalledWith(uuid);
}); });
}, },
}; };
@ -121,7 +121,7 @@ export const ClearField: Story = {
args: { args: {
label: 'UUID field', label: 'UUID field',
placeholder: 'Enter UUID', placeholder: 'Enter UUID',
onPersist: fn(), onChange: fn(),
}, },
play: async ({ canvasElement, args }) => { play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
@ -134,14 +134,14 @@ export const ClearField: Story = {
await userEvent.type(input, uuid); await userEvent.type(input, uuid);
await waitFor(() => { await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(uuid); expect(args.onChange).toHaveBeenCalledWith(uuid);
}); });
await Promise.all([ await Promise.all([
userEvent.clear(input), userEvent.clear(input),
waitFor(() => { waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(null); expect(args.onChange).toHaveBeenCalledWith(null);
}), }),
]); ]);
}, },

2
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord.tsx
View File

@ -210,7 +210,7 @@ export const WorkflowEditActionCreateRecord = ({
key={field.metadata.fieldName} key={field.metadata.fieldName}
defaultValue={currentValue} defaultValue={currentValue}
field={field} field={field}
onPersist={(value) => { onChange={(value) => {
handleFieldChange(field.metadata.fieldName, value); handleFieldChange(field.metadata.fieldName, value);
}} }}
VariablePicker={WorkflowVariablePicker} VariablePicker={WorkflowVariablePicker}

2
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFindRecords.tsx
View File

@ -138,7 +138,7 @@ export const WorkflowEditActionFindRecords = ({
label="Limit" label="Limit"
defaultValue={formData.limit} defaultValue={formData.limit}
placeholder="Enter limit" placeholder="Enter limit"
onPersist={() => {}} onChange={() => {}}
readonly readonly
/> />
</WorkflowStepBody> </WorkflowStepBody>

6
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx
View File

@ -240,7 +240,7 @@ export const WorkflowEditActionSendEmail = ({
placeholder="Enter receiver email" placeholder="Enter receiver email"
readonly={actionOptions.readonly} readonly={actionOptions.readonly}
defaultValue={formData.email} defaultValue={formData.email}
onPersist={(email) => { onChange={(email) => {
handleFieldChange('email', email); handleFieldChange('email', email);
}} }}
VariablePicker={WorkflowVariablePicker} VariablePicker={WorkflowVariablePicker}
@ -250,7 +250,7 @@ export const WorkflowEditActionSendEmail = ({
placeholder="Enter email subject" placeholder="Enter email subject"
readonly={actionOptions.readonly} readonly={actionOptions.readonly}
defaultValue={formData.subject} defaultValue={formData.subject}
onPersist={(subject) => { onChange={(subject) => {
handleFieldChange('subject', subject); handleFieldChange('subject', subject);
}} }}
VariablePicker={WorkflowVariablePicker} VariablePicker={WorkflowVariablePicker}
@ -260,7 +260,7 @@ export const WorkflowEditActionSendEmail = ({
placeholder="Enter email body" placeholder="Enter email body"
readonly={actionOptions.readonly} readonly={actionOptions.readonly}
defaultValue={formData.body} defaultValue={formData.body}
onPersist={(body) => { onChange={(body) => {
handleFieldChange('body', body); handleFieldChange('body', body);
}} }}
VariablePicker={WorkflowVariablePicker} VariablePicker={WorkflowVariablePicker}

2
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionServerlessFunctionFields.tsx
View File

@ -56,7 +56,7 @@ export const WorkflowEditActionServerlessFunctionFields = ({
placeholder="Enter value" placeholder="Enter value"
defaultValue={inputValue ? `${inputValue}` : ''} defaultValue={inputValue ? `${inputValue}` : ''}
readonly={readonly} readonly={readonly}
onPersist={(value) => onInputChange?.(value, currentPath)} onChange={(value) => onInputChange?.(value, currentPath)}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
/> />
); );

4
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionUpdateRecord.tsx
View File

@ -227,7 +227,7 @@ export const WorkflowEditActionUpdateRecord = ({
icon: getIcon(field.iconName), icon: getIcon(field.iconName),
color: 'gray', color: 'gray',
}))} }))}
onPersist={(fieldsToUpdate) => onChange={(fieldsToUpdate) =>
handleFieldChange('fieldsToUpdate', fieldsToUpdate) handleFieldChange('fieldsToUpdate', fieldsToUpdate)
} }
placeholder="Select fields to update" placeholder="Select fields to update"
@ -254,7 +254,7 @@ export const WorkflowEditActionUpdateRecord = ({
key={fieldDefinition.metadata.fieldName} key={fieldDefinition.metadata.fieldName}
defaultValue={currentValue} defaultValue={currentValue}
field={fieldDefinition} field={fieldDefinition}
onPersist={(value) => { onChange={(value) => {
handleFieldChange(fieldDefinition.metadata.fieldName, value); handleFieldChange(fieldDefinition.metadata.fieldName, value);
}} }}
VariablePicker={WorkflowVariablePicker} VariablePicker={WorkflowVariablePicker}

2
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx
View File

@ -109,7 +109,7 @@ export const WorkflowEditActionFormFieldSettings = ({
icon: IllustrationIconNumbers, icon: IllustrationIconNumbers,
}, },
]} ]}
onPersist={(newType: string | null) => { onChange={(newType: string | null) => {
if (newType === null) { if (newType === null) {
return; return;
} }

4
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsNumber.tsx
View File

@ -26,7 +26,7 @@ export const WorkflowFormFieldSettingsNumber = ({
<FormFieldInputContainer> <FormFieldInputContainer>
<InputLabel>Label</InputLabel> <InputLabel>Label</InputLabel>
<FormTextFieldInput <FormTextFieldInput
onPersist={(newLabel: string | null) => { onChange={(newLabel: string | null) => {
onChange('label', newLabel); onChange('label', newLabel);
}} }}
defaultValue={label ?? t`Number`} defaultValue={label ?? t`Number`}
@ -36,7 +36,7 @@ export const WorkflowFormFieldSettingsNumber = ({
<FormFieldInputContainer> <FormFieldInputContainer>
<InputLabel>Placeholder</InputLabel> <InputLabel>Placeholder</InputLabel>
<FormTextFieldInput <FormTextFieldInput
onPersist={(newPlaceholder: string | null) => { onChange={(newPlaceholder: string | null) => {
onChange('placeholder', newPlaceholder); onChange('placeholder', newPlaceholder);
}} }}
defaultValue={placeholder ?? '1000'} defaultValue={placeholder ?? '1000'}

4
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsText.tsx
View File

@ -25,7 +25,7 @@ export const WorkflowFormFieldSettingsText = ({
<FormFieldInputContainer> <FormFieldInputContainer>
<InputLabel>Label</InputLabel> <InputLabel>Label</InputLabel>
<FormTextFieldInput <FormTextFieldInput
onPersist={(newLabel: string | null) => { onChange={(newLabel: string | null) => {
onChange('label', newLabel); onChange('label', newLabel);
}} }}
defaultValue={label} defaultValue={label}
@ -35,7 +35,7 @@ export const WorkflowFormFieldSettingsText = ({
<FormFieldInputContainer> <FormFieldInputContainer>
<InputLabel>Placeholder</InputLabel> <InputLabel>Placeholder</InputLabel>
<FormTextFieldInput <FormTextFieldInput
onPersist={(newPlaceholder: string | null) => { onChange={(newPlaceholder: string | null) => {
onChange('placeholder', newPlaceholder); onChange('placeholder', newPlaceholder);
}} }}
defaultValue={placeholder} defaultValue={placeholder}

14
packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerCronForm.tsx
View File

@ -117,7 +117,7 @@ export const WorkflowEditTriggerCronForm = ({
hint="Format: [Minute] [Hour] [Day of Month] [Month] [Day of Week]" hint="Format: [Minute] [Hour] [Day of Month] [Month] [Day of Week]"
readonly={triggerOptions.readonly} readonly={triggerOptions.readonly}
defaultValue={trigger.settings.pattern} defaultValue={trigger.settings.pattern}
onPersist={(newPattern: string) => { onChange={(newPattern: string) => {
if (triggerOptions.readonly === true) { if (triggerOptions.readonly === true) {
return; return;
} }
@ -156,7 +156,7 @@ export const WorkflowEditTriggerCronForm = ({
error={errorMessagesVisible ? errorMessages.DAYS_day : undefined} error={errorMessagesVisible ? errorMessages.DAYS_day : undefined}
onBlur={onBlur} onBlur={onBlur}
defaultValue={trigger.settings.schedule.day} defaultValue={trigger.settings.schedule.day}
onPersist={(newDay) => { onChange={(newDay) => {
if (triggerOptions.readonly === true) { if (triggerOptions.readonly === true) {
return; return;
} }
@ -205,7 +205,7 @@ export const WorkflowEditTriggerCronForm = ({
error={errorMessagesVisible ? errorMessages.DAYS_hour : undefined} error={errorMessagesVisible ? errorMessages.DAYS_hour : undefined}
onBlur={onBlur} onBlur={onBlur}
defaultValue={trigger.settings.schedule.hour} defaultValue={trigger.settings.schedule.hour}
onPersist={(newHour) => { onChange={(newHour) => {
if (triggerOptions.readonly === true) { if (triggerOptions.readonly === true) {
return; return;
} }
@ -256,7 +256,7 @@ export const WorkflowEditTriggerCronForm = ({
} }
onBlur={onBlur} onBlur={onBlur}
defaultValue={trigger.settings.schedule.minute} defaultValue={trigger.settings.schedule.minute}
onPersist={(newMinute) => { onChange={(newMinute) => {
if (triggerOptions.readonly === true) { if (triggerOptions.readonly === true) {
return; return;
} }
@ -311,7 +311,7 @@ export const WorkflowEditTriggerCronForm = ({
} }
onBlur={onBlur} onBlur={onBlur}
defaultValue={trigger.settings.schedule.hour} defaultValue={trigger.settings.schedule.hour}
onPersist={(newHour) => { onChange={(newHour) => {
if (triggerOptions.readonly === true) { if (triggerOptions.readonly === true) {
return; return;
} }
@ -358,7 +358,7 @@ export const WorkflowEditTriggerCronForm = ({
} }
onBlur={onBlur} onBlur={onBlur}
defaultValue={trigger.settings.schedule.minute} defaultValue={trigger.settings.schedule.minute}
onPersist={(newMinute) => { onChange={(newMinute) => {
if (triggerOptions.readonly === true) { if (triggerOptions.readonly === true) {
return; return;
} }
@ -406,7 +406,7 @@ export const WorkflowEditTriggerCronForm = ({
error={errorMessagesVisible ? errorMessages.MINUTES : undefined} error={errorMessagesVisible ? errorMessages.MINUTES : undefined}
onBlur={onBlur} onBlur={onBlur}
defaultValue={trigger.settings.schedule.minute} defaultValue={trigger.settings.schedule.minute}
onPersist={(newMinute) => { onChange={(newMinute) => {
if (triggerOptions.readonly === true) { if (triggerOptions.readonly === true) {
return; return;
} }