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

refactor: use react-hook-form for Field type config forms (#5326)

Browse Source 
Closes #4295

Note: for the sake of an easier code review, I did not rename/move some
files and added "todo" comments instead so Github is able to match those
files with their previous version.
This commit is contained in:
Thaïs
2024-05-07 21:07:56 +02:00
committed by GitHub
parent b7a2e72c32
commit bb995d5488
34 changed files with 714 additions and 1068 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/twenty-front/src/modules/settings/data-model/utils/__tests__/getFieldDefaultPreviewValue.test.ts
View File

@ -1,5 +1,5 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { SettingsObjectFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
import { SettingsDataModelFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
import {
mockedCompanyObjectMetadataItem,
mockedOpportunityObjectMetadataItem,
@ -16,8 +16,19 @@ describe('getFieldDefaultPreviewValue', () => {
const fieldMetadataItem = mockedOpportunityObjectMetadataItem.fields.find(
({ name }) => name === 'stage',
)!;
const selectOptions: SettingsObjectFieldSelectFormValues =
fieldMetadataItem.options ?? [];
const selectOptions: SettingsDataModelFieldSelectFormValues['options'] = [
{
color: 'purple',
label: '🏭 Industry',
value: 'INDUSTRY',
},
{
color: 'pink',
isDefault: true,
label: '💊 Health',
value: 'HEALTH',
},
];
// When
const result = getFieldDefaultPreviewValue({
@ -27,7 +38,7 @@ describe('getFieldDefaultPreviewValue', () => {
});
// Then
expect(result).toEqual(selectOptions[0].value);
expect(result).toEqual(selectOptions[1].value);
});
it('returns the first select option if no default option was found', () => {
@ -36,8 +47,18 @@ describe('getFieldDefaultPreviewValue', () => {
const fieldMetadataItem = mockedOpportunityObjectMetadataItem.fields.find(
({ name }) => name === 'stage',
)!;
const selectOptions: SettingsObjectFieldSelectFormValues =
fieldMetadataItem.options ?? [];
const selectOptions: SettingsDataModelFieldSelectFormValues['options'] = [
{
color: 'purple' as const,
label: '🏭 Industry',
value: 'INDUSTRY',
},
{
color: 'pink' as const,
label: '💊 Health',
value: 'HEALTH',
},
];
// When
const result = getFieldDefaultPreviewValue({

52
packages/twenty-front/src/modules/settings/data-model/utils/__tests__/getFieldPreviewValueFromRecord.test.ts
View File

@ -1,5 +1,5 @@
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { SettingsObjectFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
import { SettingsDataModelFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
import {
mockedCompanyObjectMetadataItem,
mockedOpportunityObjectMetadataItem,
@ -20,8 +20,34 @@ describe('getFieldPreviewValueFromRecord', () => {
const fieldMetadataItem = mockedOpportunityObjectMetadataItem.fields.find(
({ name }) => name === 'stage',
)!;
const selectOptions: SettingsObjectFieldSelectFormValues =
fieldMetadataItem.options ?? [];
const selectOptions: SettingsDataModelFieldSelectFormValues['options'] = [
{
color: 'red',
label: 'New',
value: 'NEW',
},
{
color: 'purple',
label: 'Screening',
value: 'SCREENING',
},
{
color: 'sky',
label: 'Meeting',
value: 'MEETING',
isDefault: true,
},
{
color: 'turquoise',
label: 'Proposal',
value: 'PROPOSAL',
},
{
color: 'yellow',
label: 'Customer',
value: 'CUSTOMER',
},
];
// When
const result = getFieldPreviewValueFromRecord({
@ -44,8 +70,24 @@ describe('getFieldPreviewValueFromRecord', () => {
const fieldMetadataItem = mockedOpportunityObjectMetadataItem.fields.find(
({ name }) => name === 'stage',
)!;
const selectOptions: SettingsObjectFieldSelectFormValues =
fieldMetadataItem.options ?? [];
const selectOptions: SettingsDataModelFieldSelectFormValues['options'] = [
{
color: 'purple',
label: '🏭 Industry',
value: 'INDUSTRY',
},
{
color: 'pink',
isDefault: true,
label: '💊 Health',
value: 'HEALTH',
},
{
color: 'turquoise',
label: '🌿 Green tech',
value: 'GREEN_TECH',
},
];
// When
const result = getFieldPreviewValueFromRecord({

4
packages/twenty-front/src/modules/settings/data-model/utils/getFieldDefaultPreviewValue.ts
View File

@ -2,7 +2,7 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
import { SettingsObjectFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
import { SettingsDataModelFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSettingsFieldTypeConfig';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { isDefined } from '~/utils/isDefined';
@ -19,7 +19,7 @@ export const getFieldDefaultPreviewValue = ({
};
objectMetadataItem: ObjectMetadataItem;
relationObjectMetadataItem?: ObjectMetadataItem;
selectOptions?: SettingsObjectFieldSelectFormValues;
selectOptions?: SettingsDataModelFieldSelectFormValues['options'];
}) => {
if (
fieldMetadataItem.type === FieldMetadataType.Select &&

4
packages/twenty-front/src/modules/settings/data-model/utils/getFieldPreviewValueFromRecord.ts
View File

@ -1,6 +1,6 @@
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { SettingsObjectFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
import { SettingsDataModelFieldSelectFormValues } from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
import { FieldMetadataType } from '~/generated-metadata/graphql';
export const getFieldPreviewValueFromRecord = ({
@ -10,7 +10,7 @@ export const getFieldPreviewValueFromRecord = ({
}: {
record: ObjectRecord;
fieldMetadataItem: Pick<FieldMetadataItem, 'name' | 'type'>;
selectOptions?: SettingsObjectFieldSelectFormValues;
selectOptions?: SettingsDataModelFieldSelectFormValues['options'];
}) => {
const recordFieldValue = record[fieldMetadataItem.name];