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

fix: reset default value on field type switch in Settings/Data Model … (#5436)

Browse Source 
…field form

Closes #5412
This commit is contained in:
Thaïs
2024-05-22 09:53:15 +02:00
committed by GitHub
parent 48003887ce
commit 944b2b0254
9 changed files with 68 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,23 +3,23 @@ import omit from 'lodash.omit';
import { z } from 'zod';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
import { SETTINGS_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsFieldTypeConfigs';
import {
SettingsDataModelFieldBooleanForm,
settingsDataModelFieldBooleanFormSchema,
} from '@/settings/data-model/components/SettingsDataModelDefaultValue';
import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
import { settingsDataModelFieldRelationFormSchema } from '@/settings/data-model/components/SettingsObjectFieldRelationForm';
import {
settingsDataModelFieldMultiSelectFormSchema,
settingsDataModelFieldSelectFormSchema,
} from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
import { SETTINGS_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsFieldTypeConfigs';
} from '@/settings/data-model/fields/forms/components/boolean/SettingsDataModelFieldBooleanForm';
import {
SettingsDataModelFieldCurrencyForm,
settingsDataModelFieldCurrencyFormSchema,
} from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldCurrencyForm';
import { SettingsDataModelFieldRelationSettingsFormCard } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldRelationSettingsFormCard';
import { SettingsDataModelFieldSelectSettingsFormCard } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldSelectSettingsFormCard';
} from '@/settings/data-model/fields/forms/components/currency/SettingsDataModelFieldCurrencyForm';
import { settingsDataModelFieldRelationFormSchema } from '@/settings/data-model/fields/forms/components/relation/SettingsDataModelFieldRelationForm';
import { SettingsDataModelFieldRelationSettingsFormCard } from '@/settings/data-model/fields/forms/components/relation/SettingsDataModelFieldRelationSettingsFormCard';
import {
settingsDataModelFieldMultiSelectFormSchema,
settingsDataModelFieldSelectFormSchema,
} from '@/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectForm';
import { SettingsDataModelFieldSelectSettingsFormCard } from '@/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectSettingsFormCard';
import {
SettingsDataModelFieldPreviewCard,
SettingsDataModelFieldPreviewCardProps,

12
packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelDefaultValue.tsx → packages/twenty-front/src/modules/settings/data-model/fields/forms/components/boolean/SettingsDataModelFieldBooleanForm.tsx
View File

@ -1,3 +1,4 @@
import { useEffect } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import styled from '@emotion/styled';
import { IconCheck, IconX } from 'twenty-ui';
@ -8,8 +9,6 @@ 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
export const settingsDataModelFieldBooleanFormSchema = z.object({
defaultValue: z.boolean(),
});
@ -33,18 +32,23 @@ const StyledLabel = styled.span`
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
margin-bottom: 6px;
margin-top: ${({ theme }) => theme.spacing(1)};
`;
export const SettingsDataModelFieldBooleanForm = ({
className,
fieldMetadataItem,
}: SettingsDataModelFieldBooleanFormProps) => {
const { control } = useFormContext<SettingsDataModelFieldBooleanFormValues>();
const { control, resetField } =
useFormContext<SettingsDataModelFieldBooleanFormValues>();
const isEditMode = isDefined(fieldMetadataItem?.defaultValue);
const initialValue = fieldMetadataItem?.defaultValue ?? true;
// Reset defaultValue on mount, so it doesn't conflict with other field types.
useEffect(() => {
resetField('defaultValue', { defaultValue: initialValue });
}, [initialValue, resetField]);
return (
<StyledContainer>
<StyledLabel>Default Value</StyledLabel>

27
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldCurrencyForm.tsx → packages/twenty-front/src/modules/settings/data-model/fields/forms/components/currency/SettingsDataModelFieldCurrencyForm.tsx
View File

@ -1,3 +1,4 @@
import { useEffect } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { z } from 'zod';
@ -13,6 +14,7 @@ import { simpleQuotesStringSchema } from '~/utils/validation-schemas/simpleQuote
export const settingsDataModelFieldCurrencyFormSchema = z.object({
defaultValue: z.object({
amountMicros: z.null(),
currencyCode: simpleQuotesStringSchema.refine(
(value) =>
currencyCodeSchema.safeParse(stripSimpleQuotesFromString(value))
@ -43,19 +45,38 @@ export const SettingsDataModelFieldCurrencyForm = ({
disabled,
fieldMetadataItem,
}: SettingsDataModelFieldCurrencyFormProps) => {
const { control } =
const { control, resetField } =
useFormContext<SettingsDataModelFieldCurrencyFormValues>();
const initialValue =
const initialAmountMicrosValue = null;
const initialCurrencyCode =
(fieldMetadataItem?.defaultValue?.currencyCode as CurrencyCode) ??
CurrencyCode.USD;
const initialCurrencyCodeValue =
applySimpleQuotesToString(initialCurrencyCode);
// Reset defaultValue on mount, so it doesn't conflict with other field types.
useEffect(() => {
resetField('defaultValue', {
defaultValue: {
amountMicros: initialAmountMicrosValue,
currencyCode: initialCurrencyCodeValue,
},
});
}, [initialCurrencyCodeValue, resetField]);
return (
<CardContent>
<Controller
name="defaultValue.amountMicros"
control={control}
defaultValue={initialAmountMicrosValue}
render={() => <></>}
/>
<Controller
name="defaultValue.currencyCode"
control={control}
defaultValue={applySimpleQuotesToString(initialValue)}
defaultValue={initialCurrencyCodeValue}
render={({ field: { onChange, value } }) => (
<Select
fullWidth

7
packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx → packages/twenty-front/src/modules/settings/data-model/fields/forms/components/relation/SettingsDataModelFieldRelationForm.tsx
View File

@ -7,16 +7,13 @@ import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilte
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation';
import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fieldMetadataItemSchema';
import { RELATION_TYPES } from '@/settings/data-model/constants/RelationTypes';
import { useRelationSettingsFormInitialValues } from '@/settings/data-model/fields/forms/hooks/useRelationSettingsFormInitialValues';
import { RelationType } from '@/settings/data-model/types/RelationType';
import { IconPicker } from '@/ui/input/components/IconPicker';
import { Select } from '@/ui/input/components/Select';
import { TextInput } from '@/ui/input/components/TextInput';
import { RELATION_TYPES } from '../constants/RelationTypes';
import { RelationType } from '../types/RelationType';
// TODO: rename to SettingsDataModelFieldRelationForm and move to settings/data-model/fields/forms/components
export const settingsDataModelFieldRelationFormSchema = z.object({
relation: z.object({
field: fieldMetadataItemSchema.pick({

4
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldRelationSettingsFormCard.tsx → packages/twenty-front/src/modules/settings/data-model/fields/forms/components/relation/SettingsDataModelFieldRelationSettingsFormCard.tsx
View File

@ -4,11 +4,11 @@ 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 { RELATION_TYPES } from '@/settings/data-model/constants/RelationTypes';
import {
SettingsDataModelFieldRelationForm,
SettingsDataModelFieldRelationFormValues,
} from '@/settings/data-model/components/SettingsObjectFieldRelationForm';
import { RELATION_TYPES } from '@/settings/data-model/constants/RelationTypes';
} from '@/settings/data-model/fields/forms/components/relation/SettingsDataModelFieldRelationForm';
import { useRelationSettingsFormInitialValues } from '@/settings/data-model/fields/forms/hooks/useRelationSettingsFormInitialValues';
import {
SettingsDataModelFieldPreviewCard,

13
packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx → packages/twenty-front/src/modules/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectForm.tsx
View File

@ -1,3 +1,4 @@
import { useEffect } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import styled from '@emotion/styled';
import { DropResult } from '@hello-pangea/dnd';
@ -23,9 +24,7 @@ import { toSpliced } from '~/utils/array/toSpliced';
import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
import { simpleQuotesStringSchema } from '~/utils/validation-schemas/simpleQuotesStringSchema';
import { SettingsObjectFieldSelectFormOptionRow } from './SettingsObjectFieldSelectFormOptionRow';
// TODO: rename to SettingsDataModelFieldSelectForm and move to settings/data-model/fields/forms/components
import { SettingsDataModelFieldSelectFormOptionRow } from './SettingsDataModelFieldSelectFormOptionRow';
export const settingsDataModelFieldSelectFormSchema = z.object({
defaultValue: simpleQuotesStringSchema.nullable(),
@ -87,6 +86,7 @@ export const SettingsDataModelFieldSelectForm = ({
setValue: setFormValue,
watch: watchFormValue,
getValues,
resetField,
} = useFormContext<SettingsDataModelFieldSelectFormValues>();
const handleDragEnd = (
@ -168,6 +168,11 @@ export const SettingsDataModelFieldSelectForm = ({
}
};
// Reset defaultValue on mount or on field type change, so it doesn't conflict with other field types.
useEffect(() => {
resetField('defaultValue', { defaultValue: initialDefaultValue });
}, [initialDefaultValue, initialOptions, resetField, fieldMetadataItem.type]);
return (
<>
<Controller
@ -195,7 +200,7 @@ export const SettingsDataModelFieldSelectForm = ({
index={index}
isDragDisabled={options.length === 1}
itemComponent={
<SettingsObjectFieldSelectFormOptionRow
<SettingsDataModelFieldSelectFormOptionRow
key={option.id}
option={option}
onChange={(nextOption) => {

6
packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx → packages/twenty-front/src/modules/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectFormOptionRow.tsx
View File

@ -23,7 +23,7 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
import { MAIN_COLOR_NAMES } from '@/ui/theme/constants/MainColorNames';
type SettingsObjectFieldSelectFormOptionRowProps = {
type SettingsDataModelFieldSelectFormOptionRowProps = {
className?: string;
isDefault?: boolean;
onChange: (value: FieldMetadataItemOption) => void;
@ -55,7 +55,7 @@ const StyledOptionInput = styled(TextInput)`
}
`;
export const SettingsObjectFieldSelectFormOptionRow = ({
export const SettingsDataModelFieldSelectFormOptionRow = ({
className,
isDefault,
onChange,
@ -63,7 +63,7 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
onSetAsDefault,
onRemoveAsDefault,
option,
}: SettingsObjectFieldSelectFormOptionRowProps) => {
}: SettingsDataModelFieldSelectFormOptionRowProps) => {
const theme = useTheme();
const dropdownIds = useMemo(() => {

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSelectSettingsFormCard.tsx → packages/twenty-front/src/modules/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectSettingsFormCard.tsx
View File

@ -8,7 +8,7 @@ import {
settingsDataModelFieldMultiSelectFormSchema,
SettingsDataModelFieldSelectForm,
settingsDataModelFieldSelectFormSchema,
} from '@/settings/data-model/components/SettingsObjectFieldSelectForm';
} from '@/settings/data-model/fields/forms/components/select/SettingsDataModelFieldSelectForm';
import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/hooks/useSelectSettingsFormInitialValues';
import {
SettingsDataModelFieldPreviewCard,

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

@ -1,3 +1,5 @@
import { isString } from '@sniptt/guards';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
@ -23,17 +25,18 @@ export const getFieldDefaultPreviewValue = ({
relationObjectMetadataItem?: ObjectMetadataItem;
}) => {
if (fieldMetadataItem.type === FieldMetadataType.Select) {
const defaultValue = fieldMetadataItem.defaultValue
const defaultValue = isString(fieldMetadataItem.defaultValue)
? stripSimpleQuotesFromString(fieldMetadataItem.defaultValue)
: null;
return defaultValue ?? fieldMetadataItem.options?.[0]?.value ?? null;
}
if (fieldMetadataItem.type === FieldMetadataType.MultiSelect) {
const defaultValues = fieldMetadataItem.defaultValue?.map(
(defaultValue: `'${string}'`) =>
stripSimpleQuotesFromString(defaultValue),
);
const defaultValues = Array.isArray(fieldMetadataItem.defaultValue)
? fieldMetadataItem.defaultValue?.map((defaultValue: `'${string}'`) =>
stripSimpleQuotesFromString(defaultValue),
)
: null;
return defaultValues?.length
? defaultValues
: fieldMetadataItem.options?.map(({ value }) => value) ?? null;