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 = {
field: FieldDefinition<FieldMetadata>;
defaultValue: JsonValue;
onPersist: (value: JsonValue) => void;
onChange: (value: JsonValue) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
};
@ -53,7 +53,7 @@ type FormFieldInputProps = {
export const FormFieldInput = ({
field,
defaultValue,
onPersist,
onChange,
VariablePicker,
readonly,
}: FormFieldInputProps) => {
@ -61,7 +61,7 @@ export const FormFieldInput = ({
<FormNumberFieldInput
label={field.label}
defaultValue={defaultValue as string | number | undefined}
onPersist={onPersist}
onChange={onChange}
placeholder={field.label}
VariablePicker={VariablePicker}
readonly={readonly}
@ -70,7 +70,7 @@ export const FormFieldInput = ({
<FormBooleanFieldInput
label={field.label}
defaultValue={defaultValue as string | boolean | undefined}
onPersist={onPersist}
onChange={onChange}
VariablePicker={VariablePicker}
readonly={readonly}
/>
@ -78,7 +78,7 @@ export const FormFieldInput = ({
<FormTextFieldInput
label={field.label}
defaultValue={defaultValue as string | undefined}
onPersist={onPersist}
onChange={onChange}
placeholder={field.label}
VariablePicker={VariablePicker}
readonly={readonly}
@ -87,7 +87,7 @@ export const FormFieldInput = ({
<FormSelectFieldInput
label={field.label}
defaultValue={defaultValue as string | undefined}
onPersist={onPersist}
onChange={onChange}
VariablePicker={VariablePicker}
options={field.metadata.options}
clearLabel={field.label}
@ -98,7 +98,7 @@ export const FormFieldInput = ({
<FormFullNameFieldInput
label={field.label}
defaultValue={defaultValue as FieldFullNameValue | undefined}
onPersist={onPersist}
onChange={onChange}
VariablePicker={VariablePicker}
readonly={readonly}
/>
@ -106,7 +106,7 @@ export const FormFieldInput = ({
<FormAddressFieldInput
label={field.label}
defaultValue={defaultValue as FieldAddressValue | undefined}
onPersist={onPersist}
onChange={onChange}
VariablePicker={VariablePicker}
readonly={readonly}
/>
@ -114,7 +114,7 @@ export const FormFieldInput = ({
<FormLinksFieldInput
label={field.label}
defaultValue={defaultValue as FieldLinksValue | undefined}
onPersist={onPersist}
onChange={onChange}
VariablePicker={VariablePicker}
readonly={readonly}
/>
@ -122,7 +122,7 @@ export const FormFieldInput = ({
<FormEmailsFieldInput
label={field.label}
defaultValue={defaultValue as FieldEmailsValue | undefined}
onPersist={onPersist}
onChange={onChange}
VariablePicker={VariablePicker}
readonly={readonly}
/>
@ -130,7 +130,7 @@ export const FormFieldInput = ({
<FormPhoneFieldInput
label={field.label}
defaultValue={defaultValue as FieldPhonesValue | undefined}
onPersist={onPersist}
onChange={onChange}
VariablePicker={VariablePicker}
readonly={readonly}
/>
@ -138,7 +138,7 @@ export const FormFieldInput = ({
<FormDateFieldInput
label={field.label}
defaultValue={defaultValue as string | undefined}
onPersist={onPersist}
onChange={onChange}
VariablePicker={VariablePicker}
readonly={readonly}
/>
@ -146,7 +146,7 @@ export const FormFieldInput = ({
<FormDateTimeFieldInput
label={field.label}
defaultValue={defaultValue as string | undefined}
onPersist={onPersist}
onChange={onChange}
VariablePicker={VariablePicker}
readonly={readonly}
/>
@ -154,7 +154,7 @@ export const FormFieldInput = ({
<FormMultiSelectFieldInput
label={field.label}
defaultValue={defaultValue as FieldMultiSelectValue | string | undefined}
onPersist={onPersist}
onChange={onChange}
VariablePicker={VariablePicker}
options={field.metadata.options}
readonly={readonly}
@ -164,7 +164,7 @@ export const FormFieldInput = ({
<FormRawJsonFieldInput
label={field.label}
defaultValue={defaultValue as string | undefined}
onPersist={onPersist}
onChange={onChange}
placeholder={field.label}
VariablePicker={VariablePicker}
readonly={readonly}
@ -173,7 +173,7 @@ export const FormFieldInput = ({
<FormUuidFieldInput
label={field.label}
defaultValue={defaultValue as string | null | undefined}
onPersist={onPersist}
onChange={onChange}
placeholder={field.label}
VariablePicker={VariablePicker}
readonly={readonly}
@ -182,7 +182,7 @@ export const FormFieldInput = ({
<FormCurrencyFieldInput
label={field.label}
defaultValue={defaultValue as FormFieldCurrencyValue | null}
onPersist={onPersist}
onChange={onChange}
VariablePicker={VariablePicker}
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 = {
label?: string;
defaultValue?: FieldAddressDraftValue | null;
onPersist: (value: FieldAddressValue) => void;
onChange: (value: FieldAddressValue) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
};
@ -18,7 +18,7 @@ type FormAddressFieldInputProps = {
export const FormAddressFieldInput = ({
label,
defaultValue,
onPersist,
onChange,
readonly,
VariablePicker,
}: FormAddressFieldInputProps) => {
@ -35,7 +35,7 @@ export const FormAddressFieldInput = ({
addressLng: defaultValue?.addressLng ?? null,
[field]: updatedAddressPart,
};
onPersist(updatedAddress);
onChange(updatedAddress);
};
return (
@ -45,7 +45,7 @@ export const FormAddressFieldInput = ({
<FormTextFieldInput
label="Address 1"
defaultValue={defaultValue?.addressStreet1 ?? ''}
onPersist={handleChange('addressStreet1')}
onChange={handleChange('addressStreet1')}
readonly={readonly}
VariablePicker={VariablePicker}
placeholder="Street address"
@ -53,7 +53,7 @@ export const FormAddressFieldInput = ({
<FormTextFieldInput
label="Address 2"
defaultValue={defaultValue?.addressStreet2 ?? ''}
onPersist={handleChange('addressStreet2')}
onChange={handleChange('addressStreet2')}
readonly={readonly}
VariablePicker={VariablePicker}
placeholder="Street address 2"
@ -61,7 +61,7 @@ export const FormAddressFieldInput = ({
<FormTextFieldInput
label="City"
defaultValue={defaultValue?.addressCity ?? ''}
onPersist={handleChange('addressCity')}
onChange={handleChange('addressCity')}
readonly={readonly}
VariablePicker={VariablePicker}
placeholder="City"
@ -69,7 +69,7 @@ export const FormAddressFieldInput = ({
<FormTextFieldInput
label="State"
defaultValue={defaultValue?.addressState ?? ''}
onPersist={handleChange('addressState')}
onChange={handleChange('addressState')}
readonly={readonly}
VariablePicker={VariablePicker}
placeholder="State"
@ -77,14 +77,14 @@ export const FormAddressFieldInput = ({
<FormTextFieldInput
label="Post Code"
defaultValue={defaultValue?.addressPostcode ?? ''}
onPersist={handleChange('addressPostcode')}
onChange={handleChange('addressPostcode')}
readonly={readonly}
VariablePicker={VariablePicker}
placeholder="Post Code"
/>
<FormCountrySelectInput
selectedCountryName={defaultValue?.addressCountry ?? ''}
onPersist={handleChange('addressCountry')}
onChange={handleChange('addressCountry')}
readonly={readonly}
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 = {
label?: string;
defaultValue: boolean | string | undefined;
onPersist: (value: boolean | null | string) => void;
onChange: (value: boolean | null | string) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
};
@ -25,7 +25,7 @@ type FormBooleanFieldInputProps = {
export const FormBooleanFieldInput = ({
label,
defaultValue,
onPersist,
onChange,
readonly,
VariablePicker,
}: FormBooleanFieldInputProps) => {
@ -58,7 +58,7 @@ export const FormBooleanFieldInput = ({
value: newValue,
});
onPersist(newValue);
onChange(newValue);
};
const handleVariableTagInsert = (variableName: string) => {
@ -67,7 +67,7 @@ export const FormBooleanFieldInput = ({
value: variableName,
});
onPersist(variableName);
onChange(variableName);
};
const handleUnlinkVariable = () => {
@ -76,7 +76,7 @@ export const FormBooleanFieldInput = ({
value: false,
});
onPersist(false);
onChange(false);
};
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 = ({
selectedCountryCode,
onPersist,
onChange,
readonly = false,
VariablePicker,
}: {
selectedCountryCode: string;
onPersist: (countryCode: FormCountryCodeSelectInputUpdatedValue) => void;
onChange: (countryCode: FormCountryCodeSelectInputUpdatedValue) => void;
readonly?: boolean;
VariablePicker?: VariablePickerComponent;
}) => {
@ -42,22 +42,22 @@ export const FormCountryCodeSelectInput = ({
];
}, [countries]);
const onChange = (countryCode: string | null) => {
const onCountryCodeChange = (countryCode: string | null) => {
if (readonly) {
return;
}
if (countryCode === null) {
onPersist('');
onChange('');
} else {
onPersist(countryCode as CountryCode);
onChange(countryCode as CountryCode);
}
};
return (
<FormSelectFieldInput
label="Country Code"
onPersist={onChange}
onChange={onCountryCodeChange}
options={options}
defaultValue={selectedCountryCode}
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 = ({
selectedCountryName,
onPersist,
onChange,
readonly = false,
VariablePicker,
}: {
selectedCountryName: string;
onPersist: (country: string) => void;
onChange: (country: string) => void;
readonly?: boolean;
VariablePicker?: VariablePickerComponent;
}) => {
@ -39,22 +39,22 @@ export const FormCountrySelectInput = ({
];
}, [countries]);
const onChange = (country: string | null) => {
const onCountryChange = (country: string | null) => {
if (readonly) {
return;
}
if (country === null) {
onPersist('');
onChange('');
} else {
onPersist(country);
onChange(country);
}
};
return (
<FormSelectFieldInput
label="Country"
onPersist={onChange}
onChange={onCountryChange}
options={options}
defaultValue={selectedCountryName}
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 = {
label?: string;
defaultValue?: FormFieldCurrencyValue | null;
onPersist: (value: FormFieldCurrencyValue) => void;
onChange: (value: FormFieldCurrencyValue) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
};
@ -20,7 +20,7 @@ type FormCurrencyFieldInputProps = {
export const FormCurrencyFieldInput = ({
label,
defaultValue,
onPersist,
onChange,
VariablePicker,
readonly,
}: FormCurrencyFieldInputProps) => {
@ -37,14 +37,14 @@ export const FormCurrencyFieldInput = ({
const handleAmountMicrosChange = (
newAmountMicros: string | number | null,
) => {
onPersist({
onChange({
currencyCode: defaultValue?.currencyCode ?? null,
amountMicros: newAmountMicros ?? null,
});
};
const handleCurrencyCodeChange = (newCurrencyCode: string | null) => {
onPersist({
onChange({
currencyCode: (newCurrencyCode as CurrencyCode) ?? null,
amountMicros: defaultValue?.amountMicros ?? null,
});
@ -57,7 +57,7 @@ export const FormCurrencyFieldInput = ({
<FormSelectFieldInput
label="Currency Code"
defaultValue={defaultValue?.currencyCode ?? ''}
onPersist={handleCurrencyCodeChange}
onChange={handleCurrencyCodeChange}
options={currencies}
clearLabel={'Currency Code'}
VariablePicker={VariablePicker}
@ -68,9 +68,9 @@ export const FormCurrencyFieldInput = ({
<FormNumberFieldInput
label="Amount Micros"
defaultValue={defaultValue?.amountMicros ?? ''}
onPersist={handleAmountMicrosChange}
onChange={handleAmountMicrosChange}
VariablePicker={VariablePicker}
placeholder="Set 3210000 for 3.21$"
placeholder="Set 3210000 for $3.21"
readonly={readonly}
/>
</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 = {
label?: string;
defaultValue: string | undefined;
onPersist: (value: string | null) => void;
onChange: (value: string | null) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
};
@ -12,7 +12,7 @@ type FormDateFieldInputProps = {
export const FormDateFieldInput = ({
label,
defaultValue,
onPersist,
onChange,
VariablePicker,
readonly,
}: FormDateFieldInputProps) => {
@ -21,7 +21,7 @@ export const FormDateFieldInput = ({
dateOnly
label={label}
defaultValue={defaultValue}
onPersist={onPersist}
onChange={onChange}
VariablePicker={VariablePicker}
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;
placeholder?: string;
defaultValue: string | undefined;
onPersist: (value: string | null) => void;
onChange: (value: string | null) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
};
@ -88,7 +88,7 @@ export const FormDateTimeFieldInput = ({
dateOnly,
label,
defaultValue,
onPersist,
onChange,
VariablePicker,
readonly,
}: FormDateTimeFieldInputProps) => {
@ -130,11 +130,11 @@ export const FormDateTimeFieldInput = ({
const persistDate = (newDate: Nullable<Date>) => {
if (!isDefined(newDate)) {
onPersist(null);
onChange(null);
} else {
const newDateISO = newDate.toISOString();
onPersist(newDateISO);
onChange(newDateISO);
}
};
@ -312,7 +312,7 @@ export const FormDateTimeFieldInput = ({
setInputDateTime('');
onPersist(variableName);
onChange(variableName);
};
const handleUnlinkVariable = () => {
@ -324,7 +324,7 @@ export const FormDateTimeFieldInput = ({
setPickerDate(null);
onPersist(null);
onChange(null);
};
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 = {
label?: string;
defaultValue?: FieldEmailsValue;
onPersist: (value: FieldEmailsValue) => void;
onChange: (value: FieldEmailsValue) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
};
@ -16,12 +16,12 @@ type FormEmailsFieldInputProps = {
export const FormEmailsFieldInput = ({
label,
defaultValue,
onPersist,
onChange,
readonly,
VariablePicker,
}: FormEmailsFieldInputProps) => {
const handleChange = (email: string) => {
onPersist({
onChange({
primaryEmail: email,
additionalEmails: [],
});
@ -34,7 +34,7 @@ export const FormEmailsFieldInput = ({
<FormTextFieldInput
label="Primary Email"
defaultValue={defaultValue?.primaryEmail}
onPersist={handleChange}
onChange={handleChange}
placeholder={'Primary Email'}
readonly={readonly}
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 { 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 { 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';
@ -10,7 +10,7 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
type FormFullNameFieldInputProps = {
label?: string;
defaultValue: FieldFullNameValue | undefined;
onPersist: (value: FieldFullNameValue) => void;
onChange: (value: FieldFullNameValue) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
};
@ -18,19 +18,19 @@ type FormFullNameFieldInputProps = {
export const FormFullNameFieldInput = ({
label,
defaultValue,
onPersist,
onChange,
readonly,
VariablePicker,
}: FormFullNameFieldInputProps) => {
const handleFirstNameChange = (newText: string) => {
onPersist({
onChange({
lastName: defaultValue?.lastName ?? '',
firstName: newText,
});
};
const handleLastNameChange = (newText: string) => {
onPersist({
onChange({
firstName: defaultValue?.firstName ?? '',
lastName: newText,
});
@ -43,7 +43,7 @@ export const FormFullNameFieldInput = ({
<FormTextFieldInput
label="First Name"
defaultValue={defaultValue?.firstName}
onPersist={handleFirstNameChange}
onChange={handleFirstNameChange}
placeholder={
FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
}
@ -53,7 +53,7 @@ export const FormFullNameFieldInput = ({
<FormTextFieldInput
label="Last Name"
defaultValue={defaultValue?.lastName}
onPersist={handleLastNameChange}
onChange={handleLastNameChange}
placeholder={
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 = {
label?: string;
defaultValue?: FieldLinksValue;
onPersist: (value: FieldLinksValue) => void;
onChange: (value: FieldLinksValue) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
};
@ -17,7 +17,7 @@ type FormLinksFieldInputProps = {
export const FormLinksFieldInput = ({
label,
defaultValue,
onPersist,
onChange,
readonly,
VariablePicker,
}: FormLinksFieldInputProps) => {
@ -29,7 +29,7 @@ export const FormLinksFieldInput = ({
[field]: updatedLinksPart,
};
// We need to validate the links and display an error message if the links are not valid
onPersist(updatedLinks);
onChange(updatedLinks);
};
return (
@ -39,7 +39,7 @@ export const FormLinksFieldInput = ({
<FormTextFieldInput
label="Primary Link Label"
defaultValue={defaultValue?.primaryLinkLabel}
onPersist={handleChange('primaryLinkLabel')}
onChange={handleChange('primaryLinkLabel')}
placeholder={'Primary Link Label'}
readonly={readonly}
VariablePicker={VariablePicker}
@ -47,7 +47,7 @@ export const FormLinksFieldInput = ({
<FormTextFieldInput
label="Primary Link URL"
defaultValue={defaultValue?.primaryLinkUrl}
onPersist={handleChange('primaryLinkUrl')}
onChange={handleChange('primaryLinkUrl')}
placeholder={'Primary Link URL'}
readonly={readonly}
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;
defaultValue: FieldMultiSelectValue | string | undefined;
options: SelectOption[];
onPersist: (value: FieldMultiSelectValue | string) => void;
onChange: (value: FieldMultiSelectValue | string) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
placeholder?: string;
@ -66,7 +66,7 @@ export const FormMultiSelectFieldInput = ({
label,
defaultValue,
options,
onPersist,
onChange,
VariablePicker,
readonly,
placeholder,
@ -132,7 +132,7 @@ export const FormMultiSelectFieldInput = ({
editingMode: 'edit',
});
onPersist(value);
onChange(value);
};
const onCancel = () => {
@ -154,7 +154,7 @@ export const FormMultiSelectFieldInput = ({
value: variableName,
});
onPersist(variableName);
onChange(variableName);
};
const handleUnlinkVariable = () => {
@ -164,7 +164,7 @@ export const FormMultiSelectFieldInput = ({
editingMode: 'view',
});
onPersist([]);
onChange([]);
};
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 { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
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 { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
import styled from '@emotion/styled';
@ -13,8 +15,6 @@ import {
canBeCastAsNumberOrNull,
castAsNumberOrNull,
} 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)`
padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`};
@ -25,7 +25,7 @@ type FormNumberFieldInputProps = {
error?: string;
placeholder: string;
defaultValue: number | string | undefined;
onPersist: (value: number | null | string) => void;
onChange: (value: number | null | string) => void;
onBlur?: () => void;
VariablePicker?: VariablePickerComponent;
hint?: string;
@ -37,7 +37,7 @@ export const FormNumberFieldInput = ({
error,
placeholder,
defaultValue,
onPersist,
onChange,
onBlur,
VariablePicker,
hint,
@ -73,7 +73,7 @@ export const FormNumberFieldInput = ({
const castedValue = castAsNumberOrNull(newValue);
onPersist(castedValue);
onChange(castedValue);
};
const handleChange = (newText: string) => {
@ -91,7 +91,7 @@ export const FormNumberFieldInput = ({
value: '',
});
onPersist(null);
onChange(null);
};
const handleVariableTagInsert = (variableName: string) => {
@ -100,7 +100,7 @@ export const FormNumberFieldInput = ({
value: variableName,
});
onPersist(variableName);
onChange(variableName);
};
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 = {
label?: string;
defaultValue?: FieldPhonesValue;
onPersist: (value: FieldPhonesValue) => void;
onChange: (value: FieldPhonesValue) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
};
@ -21,7 +21,7 @@ type FormPhoneFieldInputProps = {
export const FormPhoneFieldInput = ({
label,
defaultValue,
onPersist,
onChange,
readonly,
VariablePicker,
}: FormPhoneFieldInputProps) => {
@ -35,7 +35,7 @@ export const FormPhoneFieldInput = ({
newCallingCode = getCountryCallingCode(newCountry);
}
onPersist({
onChange({
primaryPhoneCountryCode: newCountry,
primaryPhoneCallingCode: newCallingCode,
primaryPhoneNumber: defaultValue?.primaryPhoneNumber ?? '',
@ -43,7 +43,7 @@ export const FormPhoneFieldInput = ({
};
const handleNumberChange = (number: string | number | null) => {
onPersist({
onChange({
primaryPhoneCountryCode: defaultValue?.primaryPhoneCountryCode ?? '',
primaryPhoneCallingCode: defaultValue?.primaryPhoneCallingCode ?? '',
primaryPhoneNumber: number ? `${number}` : '',
@ -56,13 +56,13 @@ export const FormPhoneFieldInput = ({
<FormNestedFieldInputContainer>
<FormCountryCodeSelectInput
selectedCountryCode={defaultValue?.primaryPhoneCountryCode || ''}
onPersist={handleCountryChange}
onChange={handleCountryChange}
readonly={readonly}
/>
<FormNumberFieldInput
label="Phone Number"
defaultValue={defaultValue?.primaryPhoneNumber || ''}
onPersist={handleNumberChange}
onChange={handleNumberChange}
VariablePicker={VariablePicker}
placeholder="Enter phone number"
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;
defaultValue: string | null | undefined;
placeholder: string;
onPersist: (value: string | null) => void;
onChange: (value: string | null) => void;
readonly?: boolean;
VariablePicker?: VariablePickerComponent;
};
@ -22,7 +22,7 @@ export const FormRawJsonFieldInput = ({
label,
defaultValue,
placeholder,
onPersist,
onChange,
readonly,
VariablePicker,
}: FormRawJsonFieldInputProps) => {
@ -37,12 +37,12 @@ export const FormRawJsonFieldInput = ({
const text = turnIntoEmptyStringIfWhitespacesOnly(editor.getText());
if (text === '') {
onPersist(null);
onChange(null);
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 = {
label?: string;
defaultValue: string | undefined;
onPersist: (value: string | null) => void;
onChange: (value: string | null) => void;
VariablePicker?: VariablePickerComponent;
options: SelectOption[];
clearLabel?: string;
@ -72,7 +72,7 @@ const StyledSelectDisplayContainer = styled.div`
export const FormSelectFieldInput = ({
label,
defaultValue,
onPersist,
onChange,
VariablePicker,
options,
clearLabel,
@ -122,7 +122,7 @@ export const FormSelectFieldInput = ({
goBackToPreviousHotkeyScope();
onPersist(option);
onChange(option);
};
const onCancel = () => {
@ -151,7 +151,7 @@ export const FormSelectFieldInput = ({
value: '',
});
onPersist(null);
onChange(null);
};
const selectedOption = options.find(
@ -177,7 +177,7 @@ export const FormSelectFieldInput = ({
editingMode: 'view',
});
onPersist(null);
onChange(null);
};
const handleVariableTagInsert = (variableName: string) => {
@ -186,7 +186,7 @@ export const FormSelectFieldInput = ({
value: variableName,
});
onPersist(variableName);
onChange(variableName);
};
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;
defaultValue: string | undefined;
placeholder: string;
onPersist: (value: string) => void;
onChange: (value: string) => void;
onBlur?: () => void;
multiline?: boolean;
readonly?: boolean;
@ -30,7 +30,7 @@ export const FormTextFieldInput = ({
hint,
defaultValue,
placeholder,
onPersist,
onChange,
onBlur,
multiline,
readonly,
@ -47,7 +47,7 @@ export const FormTextFieldInput = ({
const jsonContent = editor.getJSON();
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;
defaultValue: string | null | undefined;
placeholder: string;
onPersist: (value: string | null) => void;
onChange: (value: string | null) => void;
readonly?: boolean;
VariablePicker?: VariablePickerComponent;
};
@ -27,7 +27,7 @@ export const FormUuidFieldInput = ({
label,
defaultValue,
placeholder,
onPersist,
onChange,
readonly,
VariablePicker,
}: FormUuidFieldInputProps) => {
@ -63,12 +63,12 @@ export const FormUuidFieldInput = ({
const trimmedNewText = newText.trim();
if (trimmedNewText === '') {
onPersist(null);
onChange(null);
return;
}
onPersist(trimmedNewText);
onChange(trimmedNewText);
};
const handleUnlinkVariable = () => {
@ -77,7 +77,7 @@ export const FormUuidFieldInput = ({
value: '',
});
onPersist(null);
onChange(null);
};
const handleVariableTagInsert = (variableName: string) => {
@ -86,7 +86,7 @@ export const FormUuidFieldInput = ({
value: variableName,
});
onPersist(variableName);
onChange(variableName);
};
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,
addressLng: -89.650148,
},
onPersist: fn(),
onChange: fn(),
VariablePicker: () => <div>VariablePicker</div>,
},
play: async ({ canvasElement, args }) => {
@ -113,7 +113,7 @@ export const Disabled: Story = {
const searchInputInModal = canvas.queryByPlaceholderText('Search');
expect(searchInputInModal).not.toBeInTheDocument();
expect(args.onPersist).not.toHaveBeenCalled();
expect(args.onChange).not.toHaveBeenCalled();
const variablePickers = canvas.queryAllByText('VariablePicker');
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: {
label: 'Created At',
defaultValue: undefined,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -76,7 +76,7 @@ export const SetsDateWithInput: Story = {
await userEvent.type(input, `12/08/${currentYear}{enter}`);
await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(
expect(args.onChange).toHaveBeenCalledWith(
`${currentYear}-12-08T00:00:00.000Z`,
);
});
@ -89,7 +89,7 @@ export const SetsDateWithDatePicker: Story = {
args: {
label: 'Created At',
defaultValue: `2024-12-09T13:20:19.631Z`,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -111,7 +111,7 @@ export const SetsDateWithDatePicker: Story = {
waitForElementToBeRemoved(datePicker),
waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(
expect(args.onChange).toHaveBeenCalledWith(
expect.stringMatching(new RegExp(`^2024-12-07`)),
);
}),
@ -126,7 +126,7 @@ export const ResetsDateByClickingButton: Story = {
args: {
label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -146,7 +146,7 @@ export const ResetsDateByClickingButton: Story = {
waitForElementToBeRemoved(datePicker),
waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(null);
expect(args.onChange).toHaveBeenCalledWith(null);
}),
waitFor(() => {
expect(input).toHaveDisplayValue('');
@ -159,7 +159,7 @@ export const ResetsDateByErasingInputContent: Story = {
args: {
label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -176,7 +176,7 @@ export const ResetsDateByErasingInputContent: Story = {
waitForElementToBeRemoved(() => canvas.queryByRole('dialog')),
waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(null);
expect(args.onChange).toHaveBeenCalledWith(null);
}),
waitFor(() => {
expect(input).toHaveDisplayValue('');
@ -189,7 +189,7 @@ export const DefaultsToMinValueWhenTypingReallyOldDate: Story = {
args: {
label: 'Created At',
defaultValue: undefined,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -206,7 +206,7 @@ export const DefaultsToMinValueWhenTypingReallyOldDate: Story = {
userEvent.type(input, '02/02/1500{Enter}'),
waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(MIN_DATE.toISOString());
expect(args.onChange).toHaveBeenCalledWith(MIN_DATE.toISOString());
}),
waitFor(() => {
expect(input).toHaveDisplayValue(
@ -247,7 +247,7 @@ export const DefaultsToMaxValueWhenTypingReallyFarDate: Story = {
args: {
label: 'Created At',
defaultValue: undefined,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -264,7 +264,7 @@ export const DefaultsToMaxValueWhenTypingReallyFarDate: Story = {
userEvent.type(input, '02/02/2500{Enter}'),
waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(MAX_DATE.toISOString());
expect(args.onChange).toHaveBeenCalledWith(MAX_DATE.toISOString());
}),
waitFor(() => {
expect(input).toHaveDisplayValue(
@ -305,7 +305,7 @@ export const SwitchesToStandaloneVariable: Story = {
args: {
label: 'Created At',
defaultValue: undefined,
onPersist: fn(),
onChange: fn(),
VariablePicker: ({ onVariableSelect }) => {
return (
<button
@ -347,7 +347,7 @@ export const ClickingOutsideDoesNotResetInputState: Story = {
args: {
label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const defaultValueAsDisplayString = parseDateToString({
@ -373,7 +373,7 @@ export const ClickingOutsideDoesNotResetInputState: Story = {
waitForElementToBeRemoved(datePicker),
]);
expect(args.onPersist).not.toHaveBeenCalled();
expect(args.onChange).not.toHaveBeenCalled();
expect(input).toHaveDisplayValue(defaultValueAsDisplayString.slice(0, -2));
},
@ -383,7 +383,7 @@ export const Disabled: Story = {
args: {
label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(),
onChange: fn(),
readonly: true,
},
play: async ({ canvasElement }) => {
@ -398,7 +398,7 @@ export const DisabledWithVariable: Story = {
args: {
label: 'Created At',
defaultValue: `{{${MOCKED_STEP_ID}.createdAt}}`,
onPersist: fn(),
onChange: fn(),
readonly: true,
VariablePicker: ({ onVariableSelect }) => {
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: {
label: 'Created At',
defaultValue: undefined,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -78,7 +78,7 @@ export const SetsDateTimeWithInput: Story = {
await userEvent.type(input, `12/08/${currentYear} 12:10{enter}`);
await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(
expect(args.onChange).toHaveBeenCalledWith(
expect.stringMatching(new RegExp(`^${currentYear}-12-08`)),
);
});
@ -91,7 +91,7 @@ export const DoesNotSetDateWithoutTime: Story = {
args: {
label: 'Created At',
defaultValue: undefined,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -105,7 +105,7 @@ export const DoesNotSetDateWithoutTime: Story = {
await userEvent.type(input, `12/08/${currentYear}{enter}`);
expect(args.onPersist).not.toHaveBeenCalled();
expect(args.onChange).not.toHaveBeenCalled();
expect(dialog).toBeVisible();
},
};
@ -114,7 +114,7 @@ export const SetsDateTimeWithDatePicker: Story = {
args: {
label: 'Created At',
defaultValue: `2024-12-09T13:20:19.631Z`,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -136,7 +136,7 @@ export const SetsDateTimeWithDatePicker: Story = {
waitForElementToBeRemoved(datePicker),
waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(
expect(args.onChange).toHaveBeenCalledWith(
expect.stringMatching(/^2024-12-07/),
);
}),
@ -153,7 +153,7 @@ export const ResetsDateByClickingButton: Story = {
args: {
label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -173,7 +173,7 @@ export const ResetsDateByClickingButton: Story = {
waitForElementToBeRemoved(datePicker),
waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(null);
expect(args.onChange).toHaveBeenCalledWith(null);
}),
waitFor(() => {
expect(input).toHaveDisplayValue('');
@ -186,7 +186,7 @@ export const ResetsDateByErasingInputContent: Story = {
args: {
label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -205,7 +205,7 @@ export const ResetsDateByErasingInputContent: Story = {
waitForElementToBeRemoved(() => canvas.queryByRole('dialog')),
waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(null);
expect(args.onChange).toHaveBeenCalledWith(null);
}),
waitFor(() => {
expect(input).toHaveDisplayValue('');
@ -218,7 +218,7 @@ export const DefaultsToMinValueWhenTypingReallyOldDate: Story = {
args: {
label: 'Created At',
defaultValue: undefined,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -235,7 +235,7 @@ export const DefaultsToMinValueWhenTypingReallyOldDate: Story = {
userEvent.type(input, '02/02/1500 10:10{Enter}'),
waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(MIN_DATE.toISOString());
expect(args.onChange).toHaveBeenCalledWith(MIN_DATE.toISOString());
}),
waitFor(() => {
expect(input).toHaveDisplayValue(
@ -276,7 +276,7 @@ export const DefaultsToMaxValueWhenTypingReallyFarDate: Story = {
args: {
label: 'Created At',
defaultValue: undefined,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -293,7 +293,7 @@ export const DefaultsToMaxValueWhenTypingReallyFarDate: Story = {
userEvent.type(input, '02/02/2500 10:10{Enter}'),
waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(MAX_DATE.toISOString());
expect(args.onChange).toHaveBeenCalledWith(MAX_DATE.toISOString());
}),
waitFor(() => {
expect(input).toHaveDisplayValue(
@ -334,7 +334,7 @@ export const SwitchesToStandaloneVariable: Story = {
args: {
label: 'Created At',
defaultValue: undefined,
onPersist: fn(),
onChange: fn(),
VariablePicker: ({ onVariableSelect }) => {
return (
<button
@ -376,7 +376,7 @@ export const ClickingOutsideDoesNotResetInputState: Story = {
args: {
label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const defaultValueAsDisplayString = parseDateToString({
@ -402,7 +402,7 @@ export const ClickingOutsideDoesNotResetInputState: Story = {
waitForElementToBeRemoved(datePicker),
]);
expect(args.onPersist).not.toHaveBeenCalled();
expect(args.onChange).not.toHaveBeenCalled();
expect(input).toHaveDisplayValue(defaultValueAsDisplayString.slice(0, -2));
},
@ -412,7 +412,7 @@ export const Disabled: Story = {
args: {
label: 'Created At',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(),
onChange: fn(),
readonly: true,
},
play: async ({ canvasElement }) => {
@ -429,7 +429,7 @@ export const DisabledWithVariable: Story = {
args: {
label: 'Created At',
defaultValue: `{{${MOCKED_STEP_ID}.createdAt}}`,
onPersist: fn(),
onChange: fn(),
readonly: true,
VariablePicker: ({ onVariableSelect }) => {
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',
additionalEmails: [],
},
onPersist: fn(),
onChange: fn(),
VariablePicker: () => <div>VariablePicker</div>,
readonly: true,
},
@ -79,7 +79,7 @@ export const Disabled: Story = {
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(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',
},
VariablePicker: () => <div>VariablePicker</div>,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -77,7 +77,7 @@ export const Disabled: Story = {
await userEvent.type(firstNameVariable, 'Jane');
await userEvent.type(lastNameVariable, 'Smith');
expect(args.onPersist).not.toHaveBeenCalled();
expect(args.onChange).not.toHaveBeenCalled();
const variablePickers = canvas.queryAllByText('VariablePicker');
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 = {
args: {
label: 'Number field...',
label: 'Domain Name',
readonly: true,
onPersist: fn(),
onChange: fn(),
VariablePicker: () => <div>VariablePicker</div>,
defaultValue: {
primaryLinkLabel: 'Google',
@ -81,7 +81,7 @@ export const Disabled: Story = {
await userEvent.type(labelInput, 'Yahoo');
await userEvent.type(linkInput, 'https://www.yahoo.com');
expect(args.onPersist).not.toHaveBeenCalled();
expect(args.onChange).not.toHaveBeenCalled();
const variablePickers = canvas.queryAllByText('VariablePicker');
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',
},
],
onPersist: fn(),
onChange: fn(),
VariablePicker: () => <div>VariablePicker</div>,
},
play: async ({ canvasElement }) => {
@ -102,7 +102,7 @@ export const Disabled: Story = {
color: 'yellow',
},
],
onPersist: fn(),
onChange: fn(),
readonly: true,
},
play: async ({ canvasElement }) => {
@ -122,7 +122,7 @@ export const DisabledWithVariable: Story = {
args: {
label: 'Created At',
defaultValue: `{{${MOCKED_STEP_ID}.stage}}`,
onPersist: fn(),
onChange: fn(),
readonly: true,
},
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 = {
args: {
label: 'Phone',
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -60,21 +60,21 @@ export const SelectCountryCode: Story = {
await userEvent.click(franceOption);
await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith({
expect(args.onChange).toHaveBeenCalledWith({
primaryPhoneNumber: '',
primaryPhoneCountryCode: 'FR',
primaryPhoneCallingCode: '33',
});
});
expect(args.onPersist).toHaveBeenCalledTimes(1);
expect(args.onChange).toHaveBeenCalledTimes(1);
},
};
export const SelectEmptyCountryCode: Story = {
args: {
label: 'Phone',
onPersist: fn(),
onChange: fn(),
defaultValue: {
primaryPhoneNumber: '',
primaryPhoneCountryCode: 'FR',
@ -97,14 +97,14 @@ export const SelectEmptyCountryCode: Story = {
await userEvent.click(emptyOption);
await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith({
expect(args.onChange).toHaveBeenCalledWith({
primaryPhoneNumber: '',
primaryPhoneCountryCode: '',
primaryPhoneCallingCode: '',
});
});
expect(args.onPersist).toHaveBeenCalledTimes(1);
expect(args.onChange).toHaveBeenCalledTimes(1);
},
};
@ -147,7 +147,7 @@ export const SelectingVariables: Story = {
</button>
);
},
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -167,7 +167,7 @@ export const SelectingVariables: Story = {
expect(phoneNumberVariable).toBeVisible();
await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith({
expect(args.onChange).toHaveBeenCalledWith({
primaryPhoneNumber: `{{${MOCKED_STEP_ID}.phone.number}}`,
primaryPhoneCountryCode: '',
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',
placeholder: 'Enter valid json',
readonly: true,
onPersist: fn(),
onChange: fn(),
VariablePicker: ({ onVariableSelect }) => {
return (
<button
@ -66,7 +66,7 @@ export const Readonly: Story = {
expect(allParagraphs[0]).toHaveTextContent('');
});
expect(args.onPersist).not.toHaveBeenCalled();
expect(args.onChange).not.toHaveBeenCalled();
const addVariableButton = canvas.queryByText('Add variable');
expect(addVariableButton).not.toBeInTheDocument();
@ -76,7 +76,7 @@ export const Readonly: Story = {
export const SaveValidJson: Story = {
args: {
placeholder: 'Enter valid json',
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const editor = await waitFor(() => {
@ -88,7 +88,7 @@ export const SaveValidJson: Story = {
await userEvent.type(editor, '{{ "a": {{ "b" : "d" } }');
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 = {
args: {
placeholder: 'Enter valid json',
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const editor = await waitFor(() => {
@ -111,7 +111,7 @@ export const SaveValidMultilineJson: Story = {
);
await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(
expect(args.onChange).toHaveBeenCalledWith(
'{\n "a": {\n "b" : "d"\n }\n}',
);
});
@ -141,7 +141,7 @@ export const MultilineWithDefaultValue: Story = {
export const DoesNotIgnoreInvalidJson: Story = {
args: {
placeholder: 'Enter valid json',
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const editor = await waitFor(() => {
@ -154,7 +154,7 @@ export const DoesNotIgnoreInvalidJson: Story = {
await userEvent.click(canvasElement);
expect(args.onPersist).toHaveBeenCalledWith('lol');
expect(args.onChange).toHaveBeenCalledWith('lol');
},
};
@ -162,7 +162,7 @@ export const DisplayDefaultValueWithVariablesProperly: Story = {
args: {
placeholder: 'Enter valid json',
defaultValue: `{ "a": { "b" : {{${MOCKED_STEP_ID}.name}} } }`,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
@ -190,7 +190,7 @@ export const InsertVariableInTheMiddleOnTextInput: Story = {
</button>
);
},
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -213,7 +213,7 @@ export const InsertVariableInTheMiddleOnTextInput: Story = {
await Promise.all([
waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(
expect(args.onChange).toHaveBeenCalledWith(
'{ "a": { "b" : {{test}} } }',
);
}),
@ -235,7 +235,7 @@ export const CanUseVariableAsObjectProperty: Story = {
</button>
);
},
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -257,7 +257,7 @@ export const CanUseVariableAsObjectProperty: Story = {
await userEvent.type(editor, '": 2 }');
await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith('{ "{{test}}": 2 }');
expect(args.onChange).toHaveBeenCalledWith('{ "{{test}}": 2 }');
});
},
};
@ -266,7 +266,7 @@ export const ClearField: Story = {
args: {
placeholder: 'Enter valid json',
defaultValue: '{ "a": 2 }',
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const defaultValueStringLength = args.defaultValue!.length;
@ -281,7 +281,7 @@ export const ClearField: Story = {
userEvent.type(editor, `{Backspace>${defaultValueStringLength}}`),
waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(null);
expect(args.onChange).toHaveBeenCalledWith(null);
}),
]);
},
@ -294,7 +294,7 @@ export const ClearField: Story = {
export const DoesNotBreakWhenUserInsertsNewlineInJsonString: Story = {
args: {
placeholder: 'Enter valid json',
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const editor = await waitFor(() => {
@ -307,14 +307,14 @@ export const DoesNotBreakWhenUserInsertsNewlineInJsonString: Story = {
await userEvent.click(canvasElement);
expect(args.onPersist).toHaveBeenCalled();
expect(args.onChange).toHaveBeenCalled();
},
};
export const AcceptsJsonEncodedNewline: Story = {
args: {
placeholder: 'Enter valid json',
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const editor = await waitFor(() => {
@ -327,7 +327,7 @@ export const AcceptsJsonEncodedNewline: Story = {
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>
);
},
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const controlKey = getUserDevice() === 'mac' ? 'Meta' : 'Control';
@ -368,14 +368,14 @@ export const HasHistory: Story = {
await userEvent.type(editor, ' }');
expect(args.onPersist).toHaveBeenLastCalledWith(
expect(args.onChange).toHaveBeenLastCalledWith(
`{ "a": {{${MOCKED_STEP_ID}.name}} }`,
);
await userEvent.type(editor, `{${controlKey}>}z{/${controlKey}}`);
expect(editor).toHaveTextContent('');
expect(args.onPersist).toHaveBeenLastCalledWith(null);
expect(args.onChange).toHaveBeenLastCalledWith(null);
await userEvent.type(
editor,
@ -383,7 +383,7 @@ export const HasHistory: Story = {
);
expect(editor).toHaveTextContent('{ "a": Name }');
expect(args.onPersist).toHaveBeenLastCalledWith(
expect(args.onChange).toHaveBeenLastCalledWith(
`{ "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',
},
],
onPersist: fn(),
onChange: fn(),
VariablePicker: () => <div>VariablePicker</div>,
},
play: async ({ canvasElement }) => {
@ -102,7 +102,7 @@ export const Disabled: Story = {
color: 'yellow',
},
],
onPersist: fn(),
onChange: fn(),
readonly: true,
},
play: async ({ canvasElement }) => {
@ -144,7 +144,7 @@ export const DisabledWithVariable: Story = {
color: 'yellow',
},
],
onPersist: fn(),
onChange: fn(),
readonly: true,
},
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>
);
},
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -104,9 +104,9 @@ export const WithVariable: Story = {
expect(variable).toBeVisible();
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',
placeholder: 'Text field...',
defaultValue: `test {{${MOCKED_STEP_ID}.name}} test`,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -143,9 +143,9 @@ export const WithDeletableVariable: Story = {
expect(editor).toHaveTextContent('test test');
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',
readonly: true,
VariablePicker: () => <div>VariablePicker</div>,
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -175,7 +175,7 @@ export const Disabled: Story = {
await userEvent.type(editor, 'Hello');
expect(args.onPersist).not.toHaveBeenCalled();
expect(args.onChange).not.toHaveBeenCalled();
expect(canvas.queryByText('Hello')).not.toBeInTheDocument();
expect(defaultValue).toBeVisible();
},
@ -220,7 +220,7 @@ export const HasHistory: Story = {
</button>
);
},
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const controlKey = getUserDevice() === 'mac' ? 'Meta' : 'Control';
@ -241,14 +241,14 @@ export const HasHistory: Story = {
await userEvent.click(addVariableButton);
expect(args.onPersist).toHaveBeenLastCalledWith(
expect(args.onChange).toHaveBeenLastCalledWith(
`Hello World {{${MOCKED_STEP_ID}.name}}`,
);
await userEvent.type(editor, `{${controlKey}>}z{/${controlKey}}`);
expect(editor).toHaveTextContent('');
expect(args.onPersist).toHaveBeenLastCalledWith('');
expect(args.onChange).toHaveBeenLastCalledWith('');
await userEvent.type(
editor,
@ -256,7 +256,7 @@ export const HasHistory: Story = {
);
expect(editor).toHaveTextContent(`Hello World Name`);
expect(args.onPersist).toHaveBeenLastCalledWith(
expect(args.onChange).toHaveBeenLastCalledWith(
`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: {
label: 'UUID field',
placeholder: 'Enter UUID',
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -46,7 +46,7 @@ export const SetUuidWithDashes: Story = {
await userEvent.type(input, uuid);
await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(uuid);
expect(args.onChange).toHaveBeenCalledWith(uuid);
});
},
};
@ -55,7 +55,7 @@ export const SetUuidWithoutDashes: Story = {
args: {
label: 'UUID field',
placeholder: 'Enter UUID',
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -68,7 +68,7 @@ export const SetUuidWithoutDashes: Story = {
await userEvent.type(input, uuid);
await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(uuid);
expect(args.onChange).toHaveBeenCalledWith(uuid);
});
},
};
@ -77,7 +77,7 @@ export const SetInvalidUuidWithNoValidation: Story = {
args: {
label: 'UUID field',
placeholder: 'Enter UUID',
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -90,7 +90,7 @@ export const SetInvalidUuidWithNoValidation: Story = {
await userEvent.type(input, uuid);
await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(uuid);
expect(args.onChange).toHaveBeenCalledWith(uuid);
});
},
};
@ -99,7 +99,7 @@ export const TrimInputBeforePersisting: Story = {
args: {
label: 'UUID field',
placeholder: 'Enter UUID',
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -112,7 +112,7 @@ export const TrimInputBeforePersisting: Story = {
await userEvent.type(input, `{Space>2}${uuid}{Space>3}`);
await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(uuid);
expect(args.onChange).toHaveBeenCalledWith(uuid);
});
},
};
@ -121,7 +121,7 @@ export const ClearField: Story = {
args: {
label: 'UUID field',
placeholder: 'Enter UUID',
onPersist: fn(),
onChange: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
@ -134,14 +134,14 @@ export const ClearField: Story = {
await userEvent.type(input, uuid);
await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(uuid);
expect(args.onChange).toHaveBeenCalledWith(uuid);
});
await Promise.all([
userEvent.clear(input),
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}
defaultValue={currentValue}
field={field}
onPersist={(value) => {
onChange={(value) => {
handleFieldChange(field.metadata.fieldName, value);
}}
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"
defaultValue={formData.limit}
placeholder="Enter limit"
onPersist={() => {}}
onChange={() => {}}
readonly
/>
</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"
readonly={actionOptions.readonly}
defaultValue={formData.email}
onPersist={(email) => {
onChange={(email) => {
handleFieldChange('email', email);
}}
VariablePicker={WorkflowVariablePicker}
@ -250,7 +250,7 @@ export const WorkflowEditActionSendEmail = ({
placeholder="Enter email subject"
readonly={actionOptions.readonly}
defaultValue={formData.subject}
onPersist={(subject) => {
onChange={(subject) => {
handleFieldChange('subject', subject);
}}
VariablePicker={WorkflowVariablePicker}
@ -260,7 +260,7 @@ export const WorkflowEditActionSendEmail = ({
placeholder="Enter email body"
readonly={actionOptions.readonly}
defaultValue={formData.body}
onPersist={(body) => {
onChange={(body) => {
handleFieldChange('body', body);
}}
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"
defaultValue={inputValue ? `${inputValue}` : ''}
readonly={readonly}
onPersist={(value) => onInputChange?.(value, currentPath)}
onChange={(value) => onInputChange?.(value, currentPath)}
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),
color: 'gray',
}))}
onPersist={(fieldsToUpdate) =>
onChange={(fieldsToUpdate) =>
handleFieldChange('fieldsToUpdate', fieldsToUpdate)
}
placeholder="Select fields to update"
@ -254,7 +254,7 @@ export const WorkflowEditActionUpdateRecord = ({
key={fieldDefinition.metadata.fieldName}
defaultValue={currentValue}
field={fieldDefinition}
onPersist={(value) => {
onChange={(value) => {
handleFieldChange(fieldDefinition.metadata.fieldName, value);
}}
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,
},
]}
onPersist={(newType: string | null) => {
onChange={(newType: string | null) => {
if (newType === null) {
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>
<InputLabel>Label</InputLabel>
<FormTextFieldInput
onPersist={(newLabel: string | null) => {
onChange={(newLabel: string | null) => {
onChange('label', newLabel);
}}
defaultValue={label ?? t`Number`}
@ -36,7 +36,7 @@ export const WorkflowFormFieldSettingsNumber = ({
<FormFieldInputContainer>
<InputLabel>Placeholder</InputLabel>
<FormTextFieldInput
onPersist={(newPlaceholder: string | null) => {
onChange={(newPlaceholder: string | null) => {
onChange('placeholder', newPlaceholder);
}}
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>
<InputLabel>Label</InputLabel>
<FormTextFieldInput
onPersist={(newLabel: string | null) => {
onChange={(newLabel: string | null) => {
onChange('label', newLabel);
}}
defaultValue={label}
@ -35,7 +35,7 @@ export const WorkflowFormFieldSettingsText = ({
<FormFieldInputContainer>
<InputLabel>Placeholder</InputLabel>
<FormTextFieldInput
onPersist={(newPlaceholder: string | null) => {
onChange={(newPlaceholder: string | null) => {
onChange('placeholder', newPlaceholder);
}}
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]"
readonly={triggerOptions.readonly}
defaultValue={trigger.settings.pattern}
onPersist={(newPattern: string) => {
onChange={(newPattern: string) => {
if (triggerOptions.readonly === true) {
return;
}
@ -156,7 +156,7 @@ export const WorkflowEditTriggerCronForm = ({
error={errorMessagesVisible ? errorMessages.DAYS_day : undefined}
onBlur={onBlur}
defaultValue={trigger.settings.schedule.day}
onPersist={(newDay) => {
onChange={(newDay) => {
if (triggerOptions.readonly === true) {
return;
}
@ -205,7 +205,7 @@ export const WorkflowEditTriggerCronForm = ({
error={errorMessagesVisible ? errorMessages.DAYS_hour : undefined}
onBlur={onBlur}
defaultValue={trigger.settings.schedule.hour}
onPersist={(newHour) => {
onChange={(newHour) => {
if (triggerOptions.readonly === true) {
return;
}
@ -256,7 +256,7 @@ export const WorkflowEditTriggerCronForm = ({
}
onBlur={onBlur}
defaultValue={trigger.settings.schedule.minute}
onPersist={(newMinute) => {
onChange={(newMinute) => {
if (triggerOptions.readonly === true) {
return;
}
@ -311,7 +311,7 @@ export const WorkflowEditTriggerCronForm = ({
}
onBlur={onBlur}
defaultValue={trigger.settings.schedule.hour}
onPersist={(newHour) => {
onChange={(newHour) => {
if (triggerOptions.readonly === true) {
return;
}
@ -358,7 +358,7 @@ export const WorkflowEditTriggerCronForm = ({
}
onBlur={onBlur}
defaultValue={trigger.settings.schedule.minute}
onPersist={(newMinute) => {
onChange={(newMinute) => {
if (triggerOptions.readonly === true) {
return;
}
@ -406,7 +406,7 @@ export const WorkflowEditTriggerCronForm = ({
error={errorMessagesVisible ? errorMessages.MINUTES : undefined}
onBlur={onBlur}
defaultValue={trigger.settings.schedule.minute}
onPersist={(newMinute) => {
onChange={(newMinute) => {
if (triggerOptions.readonly === true) {
return;
}