mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: fix several field bugs (#5339)

Browse Source 
After discussing with @charlesBochet, several fixes are needed on
fields:
- [x] Disable Boolean field `defaultValue` edition for now (On
`defaultValue` update, newly created records are not taking the updated
`defaultValue` into account. Setting the `defaultValue` on creation is
fine.)
- [x] Disable Phone field creation for now
- [x] For the Person object, display the "Phone" field as a field of
type Phone (right now its type is Text; later we'll migrate it to a
proper Phone field).
- [x] Fix RawJson field display (displaying `[object Object]` in Record
Table cells).
- [x] In Settings/Data Model, on Relation field creation/edition,
"Object destination" select is not working properly if an object was not
manually selected (displays Companies by default but creates a relation
to another random object than Companies).
This commit is contained in:
Thaïs
2024-05-09 01:56:15 +02:00
committed by GitHub
parent 005045c596
commit 7728c09dba
23 changed files with 332 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/twenty-front/src/modules/object-record/cache/utils/getRecordFromRecordNode.ts vendored
View File

@ -1,3 +1,5 @@
import pick from 'lodash.pick';
import { getRecordsFromRecordConnection } from '@/object-record/cache/utils/getRecordsFromRecordConnection';
import { RecordGqlNode } from '@/object-record/graphql/types/RecordGqlNode';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
@ -12,15 +14,11 @@ export const getRecordFromRecordNode = <T extends ObjectRecord>({
return {
...Object.fromEntries(
Object.entries(recordNode).map(([fieldName, value]) => {
if (isUndefinedOrNull(value)) {
return [fieldName, value];
}
if (Array.isArray(value)) {
return [fieldName, value];
}
if (typeof value !== 'object') {
if (
isUndefinedOrNull(value) ||
Array.isArray(value) ||
typeof value !== 'object'
) {
return [fieldName, value];
}
@ -32,7 +30,10 @@ export const getRecordFromRecordNode = <T extends ObjectRecord>({
: [fieldName, getRecordFromRecordNode<T>({ recordNode: value })];
}),
),
id: recordNode.id,
__typename: recordNode.__typename,
// Only adds `id` and `__typename` if they exist.
// RawJson field value passes through this method and does not have `id` or `__typename`.
// This prevents adding an undefined `id` and `__typename` to the RawJson field value,
// which is invalid JSON.
...pick(recordNode, ['id', '__typename'] as const),
} as T;
};

4
packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx
View File

@ -1,6 +1,7 @@
import { useContext } from 'react';
import { LinksFieldDisplay } from '@/object-record/record-field/meta-types/display/components/LinksFieldDisplay';
import { isFieldDisplayedAsPhone } from '@/object-record/record-field/types/guards/isFieldDisplayedAsPhone';
import { isFieldLinks } from '@/object-record/record-field/types/guards/isFieldLinks';
import { ExpandableListProps } from '@/ui/layout/expandable-list/components/ExpandableList';
@ -56,7 +57,8 @@ export const FieldDisplay = ({
<ChipFieldDisplay />
) : isFieldRelation(fieldDefinition) ? (
<RelationFieldDisplay />
) : isFieldPhone(fieldDefinition) ? (
) : isFieldPhone(fieldDefinition) ||
isFieldDisplayedAsPhone(fieldDefinition) ? (
<PhoneFieldDisplay />
) : isFieldText(fieldDefinition) ? (
<TextFieldDisplay />

4
packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx
View File

@ -9,6 +9,7 @@ import { RawJsonFieldInput } from '@/object-record/record-field/meta-types/input
import { SelectFieldInput } from '@/object-record/record-field/meta-types/input/components/SelectFieldInput';
import { RecordFieldInputScope } from '@/object-record/record-field/scopes/RecordFieldInputScope';
import { isFieldDate } from '@/object-record/record-field/types/guards/isFieldDate';
import { isFieldDisplayedAsPhone } from '@/object-record/record-field/types/guards/isFieldDisplayedAsPhone';
import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName';
import { isFieldLinks } from '@/object-record/record-field/types/guards/isFieldLinks';
import { isFieldMultiSelect } from '@/object-record/record-field/types/guards/isFieldMultiSelect';
@ -71,7 +72,8 @@ export const FieldInput = ({
>
{isFieldRelation(fieldDefinition) ? (
<RelationFieldInput onSubmit={onSubmit} onCancel={onCancel} />
) : isFieldPhone(fieldDefinition) ? (
) : isFieldPhone(fieldDefinition) ||
isFieldDisplayedAsPhone(fieldDefinition) ? (
<PhoneFieldInput
onEnter={onEnter}
onEscape={onEscape}

2
packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts
View File

@ -1,6 +1,7 @@
import { useContext } from 'react';
import { IconComponent, IconPencil } from 'twenty-ui';
import { isFieldDisplayedAsPhone } from '@/object-record/record-field/types/guards/isFieldDisplayedAsPhone';
import { isFieldLinks } from '@/object-record/record-field/types/guards/isFieldLinks';
import { isFieldMultiSelect } from '@/object-record/record-field/types/guards/isFieldMultiSelect';
import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
@ -20,6 +21,7 @@ export const useGetButtonIcon = (): IconComponent | undefined => {
isFieldLink(fieldDefinition) ||
isFieldEmail(fieldDefinition) ||
isFieldPhone(fieldDefinition) ||
isFieldDisplayedAsPhone(fieldDefinition) ||
isFieldMultiSelect(fieldDefinition) ||
(isFieldRelation(fieldDefinition) &&
fieldDefinition.metadata.relationObjectMetadataNameSingular !==

3
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/JsonFieldDisplay.tsx
View File

@ -1,4 +1,5 @@
import { useJsonField } from '@/object-record/record-field/meta-types/hooks/useJsonField';
import { isFieldRawJsonValue } from '@/object-record/record-field/types/guards/isFieldRawJsonValue';
import { JsonDisplay } from '@/ui/field/display/components/JsonDisplay';
export const JsonFieldDisplay = () => {
@ -6,7 +7,7 @@ export const JsonFieldDisplay = () => {
return (
<JsonDisplay
text={fieldValue ? JSON.stringify(JSON.parse(fieldValue), null, 2) : ''}
text={isFieldRawJsonValue(fieldValue) ? JSON.stringify(fieldValue) : ''}
maxWidth={maxWidth}
/>
);

18
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useJsonField.ts
View File

@ -1,6 +1,7 @@
import { useContext } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
import { FieldJsonValue } from '@/object-record/record-field/types/FieldMetadata';
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
@ -9,7 +10,6 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
import { FieldContext } from '../../contexts/FieldContext';
import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
import { isFieldRawJson } from '../../types/guards/isFieldRawJson';
import { isFieldTextValue } from '../../types/guards/isFieldTextValue';
export const useJsonField = () => {
const { entityId, fieldDefinition, hotkeyScope, maxWidth } =
@ -29,7 +29,18 @@ export const useJsonField = () => {
fieldName: fieldName,
}),
);
const fieldTextValue = isFieldTextValue(fieldValue) ? fieldValue : '';
const persistField = usePersistField();
const persistJsonField = (nextValue: string) => {
if (!nextValue) persistField(null);
try {
persistField(JSON.parse(nextValue));
} catch {
// Do nothing
}
};
const { setDraftValue, getDraftValueSelector } =
useRecordFieldInput<FieldJsonValue>(`${entityId}-${fieldName}`);
@ -41,8 +52,9 @@ export const useJsonField = () => {
setDraftValue,
maxWidth,
fieldDefinition,
fieldValue: fieldTextValue,
fieldValue,
setFieldValue,
hotkeyScope,
persistJsonField,
};
};

13
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/usePhoneField.ts
View File

@ -4,6 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
import { FieldPhoneValue } from '@/object-record/record-field/types/FieldMetadata';
import { isFieldDisplayedAsPhone } from '@/object-record/record-field/types/guards/isFieldDisplayedAsPhone';
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
import { FieldMetadataType } from '~/generated-metadata/graphql';
@ -15,7 +16,17 @@ import { isFieldPhone } from '../../types/guards/isFieldPhone';
export const usePhoneField = () => {
const { entityId, fieldDefinition, hotkeyScope } = useContext(FieldContext);
assertFieldMetadata(FieldMetadataType.Phone, isFieldPhone, fieldDefinition);
try {
// TODO: temporary - remove when 'Phone' field in 'Person' object
// is migrated to use FieldMetadataType.Phone as type.
assertFieldMetadata(
FieldMetadataType.Text,
isFieldDisplayedAsPhone,
fieldDefinition,
);
} catch {
assertFieldMetadata(FieldMetadataType.Phone, isFieldPhone, fieldDefinition);
}
const fieldName = fieldDefinition.metadata.fieldName;

34
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RawJsonFieldInput.tsx
View File

@ -1,8 +1,6 @@
import { isValidJSON } from '@/object-record/record-field/utils/isFieldValueJson';
import { FieldTextAreaOverlay } from '@/ui/field/input/components/FieldTextAreaOverlay';
import { TextAreaInput } from '@/ui/field/input/components/TextAreaInput';
import { usePersistField } from '../../../hooks/usePersistField';
import { useJsonField } from '../../hooks/useJsonField';
import { FieldInputEvent } from './DateFieldInput';
@ -22,53 +20,47 @@ export const RawJsonFieldInput = ({
onTab,
onShiftTab,
}: RawJsonFieldInputProps) => {
const { fieldDefinition, draftValue, hotkeyScope, setDraftValue } =
useJsonField();
const persistField = usePersistField();
const handlePersistField = (newText: string) => {
if (!newText || isValidJSON(newText)) persistField(newText || null);
};
const {
fieldDefinition,
draftValue,
hotkeyScope,
setDraftValue,
persistJsonField,
} = useJsonField();
const handleEnter = (newText: string) => {
onEnter?.(() => handlePersistField(newText));
onEnter?.(() => persistJsonField(newText));
};
const handleEscape = (newText: string) => {
onEscape?.(() => handlePersistField(newText));
onEscape?.(() => persistJsonField(newText));
};
const handleClickOutside = (
_event: MouseEvent | TouchEvent,
newText: string,
) => {
onClickOutside?.(() => handlePersistField(newText));
onClickOutside?.(() => persistJsonField(newText));
};
const handleTab = (newText: string) => {
onTab?.(() => handlePersistField(newText));
onTab?.(() => persistJsonField(newText));
};
const handleShiftTab = (newText: string) => {
onShiftTab?.(() => handlePersistField(newText));
onShiftTab?.(() => persistJsonField(newText));
};
const handleChange = (newText: string) => {
setDraftValue(newText);
};
const value =
draftValue && isValidJSON(draftValue)
? JSON.stringify(JSON.parse(draftValue), null, 2)
: draftValue ?? '';
return (
<FieldTextAreaOverlay>
<TextAreaInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={value}
value={draftValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}

6
packages/twenty-front/src/modules/object-record/record-field/types/FieldInputDraftValue.ts
View File

@ -6,6 +6,7 @@ import {
FieldDateTimeValue,
FieldEmailValue,
FieldFullNameValue,
FieldJsonValue,
FieldLinksValue,
FieldLinkValue,
FieldMultiSelectValue,
@ -47,6 +48,7 @@ export type FieldAddressDraftValue = {
addressLat: number | null;
addressLng: number | null;
};
export type FieldJsonDraftValue = string;
export type FieldInputDraftValue<FieldValue> = FieldValue extends FieldTextValue
? FieldTextDraftValue
@ -80,4 +82,6 @@ export type FieldInputDraftValue<FieldValue> = FieldValue extends FieldTextValue
? FieldRelationDraftValue
: FieldValue extends FieldAddressValue
? FieldAddressDraftValue
: never;
: FieldValue extends FieldJsonValue
? FieldJsonDraftValue
: never;

6
packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts
View File

@ -173,4 +173,8 @@ export type FieldSelectValue = string | null;
export type FieldMultiSelectValue = string[] | null;
export type FieldRelationValue = EntityForSelect | null;
export type FieldJsonValue = string;
// See https://zod.dev/?id=json-type
type Literal = string | number | boolean | null;
export type Json = Literal | { [key: string]: Json } | Json[];
export type FieldJsonValue = Record<string, Json> | Json[] | null;

14
packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldDisplayedAsPhone.ts Normal file
View File

@ -0,0 +1,14 @@
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { FieldDefinition } from '../FieldDefinition';
import { FieldMetadata, FieldTextMetadata } from '../FieldMetadata';
// TODO: temporary - remove when 'Phone' field in 'Person' object
// is migrated to use FieldMetadataType.Phone as type.
export const isFieldDisplayedAsPhone = (
field: Pick<FieldDefinition<FieldMetadata>, 'type' | 'metadata'>,
): field is FieldDefinition<FieldTextMetadata> =>
field.metadata.objectMetadataNameSingular === CoreObjectNameSingular.Person &&
field.type === FieldMetadataType.Text &&
field.metadata.fieldName === 'phone';

20
packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldRawJsonValue.ts
View File

@ -1,8 +1,20 @@
import { isNull, isString } from '@sniptt/guards';
import { z } from 'zod';
import { FieldJsonValue } from '../FieldMetadata';
import { FieldJsonValue, Json } from '../FieldMetadata';
// See https://zod.dev/?id=json-type
const literalSchema = z.union([z.string(), z.number(), z.boolean(), z.null()]);
const jsonSchema: z.ZodType<Json> = z.lazy(() =>
z.union([literalSchema, z.array(jsonSchema), z.record(jsonSchema)]),
);
export const jsonWithoutLiteralsSchema: z.ZodType<FieldJsonValue> = z.union([
z.null(), // Exclude literal values other than null
z.array(jsonSchema),
z.record(jsonSchema),
]);
// TODO: add zod
export const isFieldRawJsonValue = (
fieldValue: unknown,
): fieldValue is FieldJsonValue => isString(fieldValue) || isNull(fieldValue);
): fieldValue is FieldJsonValue =>
jsonWithoutLiteralsSchema.safeParse(fieldValue).success;

13
packages/twenty-front/src/modules/object-record/record-field/utils/computeDraftValueFromFieldValue.ts
View File

@ -3,6 +3,8 @@ import { FieldInputDraftValue } from '@/object-record/record-field/types/FieldIn
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { isFieldCurrency } from '@/object-record/record-field/types/guards/isFieldCurrency';
import { isFieldCurrencyValue } from '@/object-record/record-field/types/guards/isFieldCurrencyValue';
import { isFieldRawJson } from '@/object-record/record-field/types/guards/isFieldRawJson';
import { isFieldRawJsonValue } from '@/object-record/record-field/types/guards/isFieldRawJsonValue';
import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
import { computeEmptyDraftValue } from '@/object-record/record-field/utils/computeEmptyDraftValue';
import { isFieldValueEmpty } from '@/object-record/record-field/utils/isFieldValueEmpty';
@ -33,9 +35,20 @@ export const computeDraftValueFromFieldValue = <FieldValue>({
currencyCode: fieldValue?.currencyCode ?? '',
} as unknown as FieldInputDraftValue<FieldValue>;
}
if (isFieldRelation(fieldDefinition)) {
return computeEmptyDraftValue<FieldValue>({ fieldDefinition });
}
if (isFieldRawJson(fieldDefinition)) {
return isFieldRawJsonValue(fieldValue)
? (JSON.stringify(
fieldValue,
null,
2,
) as FieldInputDraftValue<FieldValue>)
: computeEmptyDraftValue<FieldValue>({ fieldDefinition });
}
return fieldValue as FieldInputDraftValue<FieldValue>;
};

6
packages/twenty-front/src/modules/object-record/record-field/utils/computeEmptyDraftValue.ts
View File

@ -8,7 +8,8 @@ import { isFieldEmail } from '@/object-record/record-field/types/guards/isFieldE
import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName';
import { isFieldLink } from '@/object-record/record-field/types/guards/isFieldLink';
import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
import { isFieldRelationValue } from '@/object-record/record-field/types/guards/isFieldRelationValue';
import { isFieldRawJson } from '@/object-record/record-field/types/guards/isFieldRawJson';
import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
import { isFieldUuid } from '@/object-record/record-field/types/guards/isFieldUuid';
@ -26,7 +27,8 @@ export const computeEmptyDraftValue = <FieldValue>({
isFieldDateTime(fieldDefinition) ||
isFieldNumber(fieldDefinition) ||
isFieldEmail(fieldDefinition) ||
isFieldRelationValue(fieldDefinition)
isFieldRelation(fieldDefinition) ||
isFieldRawJson(fieldDefinition)
) {
return '' as FieldInputDraftValue<FieldValue>;
}

12
packages/twenty-front/src/modules/object-record/record-field/utils/isFieldValueJson.ts
View File

@ -1,12 +0,0 @@
import { isString } from '@sniptt/guards';
export const isValidJSON = (str: string) => {
try {
if (isString(JSON.parse(str))) {
throw new Error(`Strings are not supported as JSON: ${str}`);
}
return true;
} catch (error) {
return false;
}
};

5
packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelDefaultValue.tsx
View File

@ -6,6 +6,7 @@ import { z } from 'zod';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { Select } from '@/ui/input/components/Select';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { isDefined } from '~/utils/isDefined';
// TODO: rename to SettingsDataModelFieldBooleanForm and move to settings/data-model/fields/forms/components
@ -41,6 +42,7 @@ export const SettingsDataModelFieldBooleanForm = ({
}: SettingsDataModelFieldBooleanFormProps) => {
const { control } = useFormContext<SettingsDataModelFieldBooleanFormValues>();
const isEditMode = isDefined(fieldMetadataItem?.defaultValue);
const initialValue = fieldMetadataItem?.defaultValue ?? true;
return (
@ -54,6 +56,9 @@ export const SettingsDataModelFieldBooleanForm = ({
<Select
className={className}
fullWidth
// TODO: temporary fix - disabling edition because after editing the defaultValue,
// newly created records are not taking into account the updated defaultValue properly.
disabled={isEditMode}
dropdownId="object-field-default-value-select"
value={value}
onChange={onChange}

49
packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
View File

@ -1,18 +1,16 @@
import { useMemo } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import styled from '@emotion/styled';
import { useIcons } from 'twenty-ui';
import { z } from 'zod';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation';
import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fieldMetadataItemSchema';
import { useRelationSettingsFormInitialValues } from '@/settings/data-model/fields/forms/hooks/useRelationSettingsFormInitialValues';
import { IconPicker } from '@/ui/input/components/IconPicker';
import { Select } from '@/ui/input/components/Select';
import { TextInput } from '@/ui/input/components/TextInput';
import { RelationMetadataType } from '~/generated-metadata/graphql';
import { RELATION_TYPES } from '../constants/RelationTypes';
import { RelationType } from '../types/RelationType';
@ -32,7 +30,7 @@ export const settingsDataModelFieldRelationFormSchema = z.object({
}),
});
type SettingsDataModelFieldRelationFormValues = z.infer<
export type SettingsDataModelFieldRelationFormValues = z.infer<
typeof settingsDataModelFieldRelationFormSchema
>;
@ -79,30 +77,23 @@ const RELATION_TYPE_OPTIONS = Object.entries(RELATION_TYPES)
export const SettingsDataModelFieldRelationForm = ({
fieldMetadataItem,
}: SettingsDataModelFieldRelationFormProps) => {
const { control } =
const { control, watch: watchFormValue } =
useFormContext<SettingsDataModelFieldRelationFormValues>();
const { getIcon } = useIcons();
const { objectMetadataItems } = useFilteredObjectMetadataItems();
const { objectMetadataItems, findObjectMetadataItemById } =
useFilteredObjectMetadataItems();
const getRelationMetadata = useGetRelationMetadata();
const {
relationFieldMetadataItem,
relationType,
relationObjectMetadataItem,
} =
useMemo(
() =>
fieldMetadataItem ? getRelationMetadata({ fieldMetadataItem }) : null,
[fieldMetadataItem, getRelationMetadata],
) ?? {};
disableFieldEdition,
disableRelationEdition,
initialRelationFieldMetadataItem,
initialRelationObjectMetadataItem,
initialRelationType,
} = useRelationSettingsFormInitialValues({ fieldMetadataItem });
const disableFieldEdition =
relationFieldMetadataItem && !relationFieldMetadataItem.isCustom;
const disableRelationEdition = !!relationFieldMetadataItem;
const selectedObjectMetadataItem =
relationObjectMetadataItem ?? objectMetadataItems[0];
const selectedObjectMetadataItem = findObjectMetadataItemById(
watchFormValue('relation.objectMetadataId'),
);
return (
<StyledContainer>
@ -110,7 +101,7 @@ export const SettingsDataModelFieldRelationForm = ({
<Controller
name="relation.type"
control={control}
defaultValue={relationType ?? RelationMetadataType.OneToMany}
defaultValue={initialRelationType}
render={({ field: { onChange, value } }) => (
<Select
label="Relation type"
@ -126,7 +117,7 @@ export const SettingsDataModelFieldRelationForm = ({
<Controller
name="relation.objectMetadataId"
control={control}
defaultValue={selectedObjectMetadataItem?.id}
defaultValue={initialRelationObjectMetadataItem.id}
render={({ field: { onChange, value } }) => (
<Select
label="Object destination"
@ -153,11 +144,7 @@ export const SettingsDataModelFieldRelationForm = ({
<Controller
name="relation.field.icon"
control={control}
defaultValue={
relationFieldMetadataItem?.icon ??
relationObjectMetadataItem?.icon ??
'IconUsers'
}
defaultValue={initialRelationFieldMetadataItem.icon}
render={({ field: { onChange, value } }) => (
<IconPicker
disabled={disableFieldEdition}
@ -171,7 +158,7 @@ export const SettingsDataModelFieldRelationForm = ({
<Controller
name="relation.field.label"
control={control}
defaultValue={relationFieldMetadataItem?.label}
defaultValue={initialRelationFieldMetadataItem.label}
render={({ field: { onChange, value } }) => (
<TextInput
disabled={disableFieldEdition}

109
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldRelationSettingsFormCard.tsx Normal file
View File

@ -0,0 +1,109 @@
import { useFormContext } from 'react-hook-form';
import styled from '@emotion/styled';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
import {
SettingsDataModelFieldRelationForm,
SettingsDataModelFieldRelationFormValues,
} from '@/settings/data-model/components/SettingsObjectFieldRelationForm';
import { RELATION_TYPES } from '@/settings/data-model/constants/RelationTypes';
import { useRelationSettingsFormInitialValues } from '@/settings/data-model/fields/forms/hooks/useRelationSettingsFormInitialValues';
import {
SettingsDataModelFieldPreviewCard,
SettingsDataModelFieldPreviewCardProps,
} from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
import { FieldMetadataType } from '~/generated-metadata/graphql';
type SettingsDataModelFieldRelationSettingsFormCardProps = {
fieldMetadataItem: Pick<FieldMetadataItem, 'icon' | 'label' | 'type'> &
Partial<Omit<FieldMetadataItem, 'icon' | 'label' | 'type'>>;
relationFieldMetadataItem?: FieldMetadataItem;
} & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;
const StyledFieldPreviewCard = styled(SettingsDataModelFieldPreviewCard)`
display: grid;
flex: 1 1 100%;
`;
const StyledPreviewContent = styled.div`
display: flex;
gap: 6px;
`;
const StyledRelationImage = styled.img<{ flip?: boolean }>`
transform: ${({ flip }) => (flip ? 'scaleX(-1)' : 'none')};
width: 54px;
`;
export const SettingsDataModelFieldRelationSettingsFormCard = ({
fieldMetadataItem,
objectMetadataItem,
}: SettingsDataModelFieldRelationSettingsFormCardProps) => {
const { watch: watchFormValue } =
useFormContext<SettingsDataModelFieldRelationFormValues>();
const { findObjectMetadataItemById } = useFilteredObjectMetadataItems();
const {
initialRelationObjectMetadataItem,
initialRelationType,
initialRelationFieldMetadataItem,
} = useRelationSettingsFormInitialValues({ fieldMetadataItem });
const relationObjectMetadataId = watchFormValue(
'relation.objectMetadataId',
initialRelationObjectMetadataItem?.id,
);
const relationObjectMetadataItem = findObjectMetadataItemById(
relationObjectMetadataId,
);
if (!relationObjectMetadataItem) return null;
const relationType = watchFormValue('relation.type', initialRelationType);
const relationTypeConfig = RELATION_TYPES[relationType];
return (
<SettingsDataModelPreviewFormCard
preview={
<StyledPreviewContent>
<StyledFieldPreviewCard
fieldMetadataItem={fieldMetadataItem}
shrink
objectMetadataItem={objectMetadataItem}
relationObjectMetadataItem={relationObjectMetadataItem}
/>
<StyledRelationImage
src={relationTypeConfig.imageSrc}
flip={relationTypeConfig.isImageFlipped}
alt={relationTypeConfig.label}
/>
<StyledFieldPreviewCard
fieldMetadataItem={{
...initialRelationFieldMetadataItem,
icon: watchFormValue(
'relation.field.icon',
initialRelationFieldMetadataItem.icon,
),
label:
watchFormValue(
'relation.field.label',
initialRelationFieldMetadataItem.label,
) || 'Field name',
type: FieldMetadataType.Relation,
}}
shrink
objectMetadataItem={relationObjectMetadataItem}
relationObjectMetadataItem={objectMetadataItem}
/>
</StyledPreviewContent>
}
form={
<SettingsDataModelFieldRelationForm
fieldMetadataItem={fieldMetadataItem}
/>
}
/>
);
};

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

@ -3,7 +3,6 @@ import styled from '@emotion/styled';
import omit from 'lodash.omit';
import { z } from 'zod';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import {
SettingsDataModelFieldBooleanForm,
@ -14,16 +13,13 @@ import {
SettingsDataModelFieldCurrencyForm,
settingsDataModelFieldCurrencyFormSchema,
} from '@/settings/data-model/components/SettingsObjectFieldCurrencyForm';
import {
SettingsDataModelFieldRelationForm,
settingsDataModelFieldRelationFormSchema,
} from '@/settings/data-model/components/SettingsObjectFieldRelationForm';
import { settingsDataModelFieldRelationFormSchema } from '@/settings/data-model/components/SettingsObjectFieldRelationForm';
import {
SettingsDataModelFieldSelectForm,
settingsDataModelFieldSelectFormSchema,
} from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
import { RELATION_TYPES } from '@/settings/data-model/constants/RelationTypes';
import { SETTINGS_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsFieldTypeConfigs';
import { SettingsDataModelFieldRelationSettingsFormCard } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldRelationSettingsFormCard';
import {
SettingsDataModelFieldPreviewCard,
SettingsDataModelFieldPreviewCardProps,
@ -81,7 +77,6 @@ type SettingsDataModelFieldSettingsFormCardProps = {
disableCurrencyForm?: boolean;
fieldMetadataItem: Pick<FieldMetadataItem, 'icon' | 'label' | 'type'> &
Partial<Omit<FieldMetadataItem, 'icon' | 'label' | 'type'>>;
relationFieldMetadataItem?: FieldMetadataItem;
} & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;
const StyledFieldPreviewCard = styled(SettingsDataModelFieldPreviewCard)`
@ -94,11 +89,6 @@ const StyledPreviewContent = styled.div`
gap: 6px;
`;
const StyledRelationImage = styled.img<{ flip?: boolean }>`
transform: ${({ flip }) => (flip ? 'scaleX(-1)' : 'none')};
width: 54px;
`;
const previewableTypes = [
FieldMetadataType.Boolean,
FieldMetadataType.Currency,
@ -121,23 +111,20 @@ export const SettingsDataModelFieldSettingsFormCard = ({
disableCurrencyForm,
fieldMetadataItem,
objectMetadataItem,
relationFieldMetadataItem,
}: SettingsDataModelFieldSettingsFormCardProps) => {
const { watch: watchFormValue } =
useFormContext<SettingsDataModelFieldSettingsFormValues>();
const { findObjectMetadataItemById } = useFilteredObjectMetadataItems();
if (!previewableTypes.includes(fieldMetadataItem.type)) return null;
const relationObjectMetadataId = watchFormValue('relation.objectMetadataId');
const relationObjectMetadataItem = relationObjectMetadataId
? findObjectMetadataItemById(relationObjectMetadataId)
: undefined;
const relationType = watchFormValue('relation.type');
const relationTypeConfig = relationType
? RELATION_TYPES[relationType]
: undefined;
if (fieldMetadataItem.type === FieldMetadataType.Relation) {
return (
<SettingsDataModelFieldRelationSettingsFormCard
fieldMetadataItem={fieldMetadataItem}
objectMetadataItem={objectMetadataItem}
/>
);
}
return (
<SettingsDataModelPreviewFormCard
@ -145,34 +132,9 @@ export const SettingsDataModelFieldSettingsFormCard = ({
<StyledPreviewContent>
<StyledFieldPreviewCard
fieldMetadataItem={fieldMetadataItem}
shrink={fieldMetadataItem.type === FieldMetadataType.Relation}
objectMetadataItem={objectMetadataItem}
relationObjectMetadataItem={relationObjectMetadataItem}
selectOptions={watchFormValue('options')}
/>
{fieldMetadataItem.type === FieldMetadataType.Relation &&
!!relationObjectMetadataItem &&
!!relationTypeConfig && (
<>
<StyledRelationImage
src={relationTypeConfig.imageSrc}
flip={relationTypeConfig.isImageFlipped}
alt={relationTypeConfig.label}
/>
<StyledFieldPreviewCard
fieldMetadataItem={{
...relationFieldMetadataItem,
icon: watchFormValue('relation.field.icon'),
label:
watchFormValue('relation.field.label') || 'Field name',
type: FieldMetadataType.Relation,
}}
shrink
objectMetadataItem={relationObjectMetadataItem}
relationObjectMetadataItem={objectMetadataItem}
/>
</>
)}
</StyledPreviewContent>
}
form={
@ -185,10 +147,6 @@ export const SettingsDataModelFieldSettingsFormCard = ({
disabled={disableCurrencyForm}
fieldMetadataItem={fieldMetadataItem}
/>
) : fieldMetadataItem.type === FieldMetadataType.Relation ? (
<SettingsDataModelFieldRelationForm
fieldMetadataItem={fieldMetadataItem}
/>
) : fieldMetadataItem.type === FieldMetadataType.Select ||
fieldMetadataItem.type === FieldMetadataType.MultiSelect ? (
<SettingsDataModelFieldSelectForm

8
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldSettingsFormCard.stories.tsx
View File

@ -7,10 +7,7 @@ import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorato
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import {
mockedCompanyObjectMetadataItem,
mockedPersonObjectMetadataItem,
} from '~/testing/mock-data/metadata';
import { mockedCompanyObjectMetadataItem } from '~/testing/mock-data/metadata';
import { SettingsDataModelFieldSettingsFormCard } from '../SettingsDataModelFieldSettingsFormCard';
@ -49,9 +46,6 @@ export const WithRelationForm: Story = {
fieldMetadataItem: mockedCompanyObjectMetadataItem.fields.find(
({ name }) => name === 'people',
),
relationFieldMetadataItem: mockedPersonObjectMetadataItem.fields.find(
({ name }) => name === 'company',
)!,
},
};

55
packages/twenty-front/src/modules/settings/data-model/fields/forms/hooks/useRelationSettingsFormInitialValues.ts Normal file
View File

@ -0,0 +1,55 @@
import { useMemo } from 'react';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation';
import { RelationMetadataType } from '~/generated-metadata/graphql';
export const useRelationSettingsFormInitialValues = ({
fieldMetadataItem,
}: {
fieldMetadataItem?: Pick<
FieldMetadataItem,
'fromRelationMetadata' | 'toRelationMetadata' | 'type'
>;
}) => {
const { objectMetadataItems } = useFilteredObjectMetadataItems();
const getRelationMetadata = useGetRelationMetadata();
const {
relationFieldMetadataItem,
relationObjectMetadataItem: relationObjectMetadataItemFromFieldMetadata,
relationType: relationTypeFromFieldMetadata,
} = useMemo(
() =>
fieldMetadataItem ? getRelationMetadata({ fieldMetadataItem }) : null,
[fieldMetadataItem, getRelationMetadata],
) ?? {};
const initialRelationObjectMetadataItem = useMemo(
() =>
relationObjectMetadataItemFromFieldMetadata ??
objectMetadataItems.find(
({ nameSingular }) => nameSingular === CoreObjectNameSingular.Person,
) ??
objectMetadataItems.filter(isObjectMetadataAvailableForRelation)[0],
[objectMetadataItems, relationObjectMetadataItemFromFieldMetadata],
);
const initialRelationType =
relationTypeFromFieldMetadata ?? RelationMetadataType.OneToMany;
return {
disableFieldEdition:
relationFieldMetadataItem && !relationFieldMetadataItem.isCustom,
disableRelationEdition: !!relationFieldMetadataItem,
initialRelationFieldMetadataItem: relationFieldMetadataItem ?? {
icon: initialRelationObjectMetadataItem.icon ?? 'IconUsers',
label: '',
},
initialRelationObjectMetadataItem,
initialRelationType,
};
};

32
packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
View File

@ -1,9 +1,8 @@
import { useEffect, useMemo } from 'react';
import { useEffect } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useNavigate, useParams } from 'react-router-dom';
import styled from '@emotion/styled';
import { zodResolver } from '@hookform/resolvers/zod';
import { isNonEmptyString } from '@sniptt/guards';
import omit from 'lodash.omit';
import pick from 'lodash.pick';
import { IconArchive, IconSettings } from 'twenty-ui';
@ -33,6 +32,7 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { isDefined } from '~/utils/isDefined';
type SettingsDataModelFieldEditFormValues = z.infer<
typeof settingsFieldFormSchema
@ -72,15 +72,6 @@ export const SettingsObjectFieldEdit = () => {
);
const getRelationMetadata = useGetRelationMetadata();
const { relationFieldMetadataItem } =
useMemo(
() =>
activeMetadataField
? getRelationMetadata({ fieldMetadataItem: activeMetadataField })
: null,
[activeMetadataField, getRelationMetadata],
) ?? {};
const { updateOneFieldMetadataItem } = useUpdateOneFieldMetadataItem();
const formConfig = useForm<SettingsDataModelFieldEditFormValues>({
@ -111,13 +102,19 @@ export const SettingsObjectFieldEdit = () => {
if (
formValues.type === FieldMetadataType.Relation &&
'relation' in formValues &&
'relation' in dirtyFields &&
isNonEmptyString(relationFieldMetadataItem?.id)
'relation' in dirtyFields
) {
await updateOneFieldMetadataItem({
fieldMetadataIdToUpdate: relationFieldMetadataItem.id,
updatePayload: formValues.relation.field,
});
const { relationFieldMetadataItem } =
getRelationMetadata({
fieldMetadataItem: activeMetadataField,
}) ?? {};
if (isDefined(relationFieldMetadataItem)) {
await updateOneFieldMetadataItem({
fieldMetadataIdToUpdate: relationFieldMetadataItem.id,
updatePayload: formValues.relation.field,
});
}
}
const otherDirtyFields = omit(dirtyFields, 'relation');
@ -202,7 +199,6 @@ export const SettingsObjectFieldEdit = () => {
disableCurrencyForm
fieldMetadataItem={activeMetadataField}
objectMetadataItem={activeObjectMetadataItem}
relationFieldMetadataItem={relationFieldMetadataItem}
/>
</Section>
{!isLabelIdentifier && (

1
packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
View File

@ -271,6 +271,7 @@ export const SettingsObjectNewFieldStep2 = () => {
FieldMetadataType.Numeric,
FieldMetadataType.Probability,
FieldMetadataType.Uuid,
FieldMetadataType.Phone,
];
return (