twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-29 10:13:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use react-hook-form in Settings Data Model Object pages (#4271)

Browse Source 
Related issue: #3836
This commit is contained in:
Thaïs 2024-03-05 07:52:19 -03:00 committed by GitHub
parent caa4dcf893
commit 91e5e7598b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 338 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -56,6 +56,7 @@
"@types/facepaint": "^1.2.5",
"@types/lodash.camelcase": "^4.3.7",
"@types/lodash.merge": "^4.6.7",
"@types/lodash.pick": "^4.3.7",
"@types/mailparser": "^3.4.4",
"@types/nodemailer": "^6.4.14",
"add": "^2.0.6",
@ -112,6 +113,7 @@
"lodash.kebabcase": "^4.1.1",
"lodash.merge": "^4.6.2",
"lodash.omit": "^4.5.0",
"lodash.pick": "^4.4.0",
"lodash.snakecase": "^4.1.1",
"lodash.upperfirst": "^4.3.1",
"luxon": "^3.3.0",

103
packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFormSection.tsx
View File

@ -1,103 +0,0 @@
import styled from '@emotion/styled';
import { validateMetadataLabel } from '@/object-metadata/utils/validateMetadataLabel';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { IconPicker } from '@/ui/input/components/IconPicker';
import { TextArea } from '@/ui/input/components/TextArea';
import { TextInput } from '@/ui/input/components/TextInput';
import { Section } from '@/ui/layout/section/components/Section';
type SettingsObjectFormSectionProps = {
disabled?: boolean;
icon?: string;
singularName?: string;
pluralName?: string;
description?: string;
onChange?: (
formValues: Partial<{
icon: string;
labelSingular: string;
labelPlural: string;
description: string;
}>,
) => void;
};
const StyledInputsContainer = styled.div`
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
margin-bottom: ${({ theme }) => theme.spacing(2)};
width: 100%;
`;
const StyledLabel = styled.span`
color: ${({ theme }) => theme.font.color.light};
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
margin-bottom: ${({ theme }) => theme.spacing(1)};
text-transform: uppercase;
`;
const StyledInputContainer = styled.div`
display: flex;
flex-direction: column;
`;
export const SettingsObjectFormSection = ({
disabled,
icon = 'IconListNumbers',
singularName = '',
pluralName = '',
description = '',
onChange,
}: SettingsObjectFormSectionProps) => (
<Section>
<H2Title
title="About"
description="Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms."
/>
<StyledInputsContainer>
<StyledInputContainer>
<StyledLabel>Icon</StyledLabel>
<IconPicker
disabled={disabled}
selectedIconKey={icon}
onChange={(icon) => {
onChange?.({ icon: icon.iconKey });
}}
/>
</StyledInputContainer>
<TextInput
label="Singular"
placeholder="Listing"
value={singularName}
onChange={(value) => {
if (!value || validateMetadataLabel(value)) {
onChange?.({ labelSingular: value });
}
}}
disabled={disabled}
fullWidth
/>
<TextInput
label="Plural"
placeholder="Listings"
value={pluralName}
onChange={(value) => {
if (!value || validateMetadataLabel(value)) {
onChange?.({ labelPlural: value });
}
}}
disabled={disabled}
fullWidth
/>
</StyledInputsContainer>
<TextArea
placeholder="Write a description"
minRows={4}
value={description}
onChange={(value) => onChange?.({ description: value })}
disabled={disabled}
/>
</Section>
);

24
packages/twenty-front/src/modules/settings/data-model/components/__stories__/SettingsObjectFormSection.stories.tsx
View File

@ -1,24 +0,0 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { SettingsObjectFormSection } from '../SettingsObjectFormSection';
const meta: Meta<typeof SettingsObjectFormSection> = {
title: 'Modules/Settings/DataModel/SettingsObjectFormSection',
component: SettingsObjectFormSection,
decorators: [ComponentDecorator],
};
export default meta;
type Story = StoryObj<typeof SettingsObjectFormSection>;
export const Default: Story = {};
export const WithDefaultValues: Story = {
args: {
singularName: 'Company',
pluralName: 'Companies',
description: 'Lorem ipsum',
},
};

120
packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx Normal file
View File

@ -0,0 +1,120 @@
import { Controller, useFormContext } from 'react-hook-form';
import styled from '@emotion/styled';
import { z } from 'zod';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { objectMetadataItemSchema } from '@/object-metadata/validation-schemas/objectMetadataItemSchema';
import { IconPicker } from '@/ui/input/components/IconPicker';
import { TextArea } from '@/ui/input/components/TextArea';
import { TextInput } from '@/ui/input/components/TextInput';
export const settingsDataModelObjectAboutFormSchema =
objectMetadataItemSchema.pick({
description: true,
icon: true,
labelPlural: true,
labelSingular: true,
});
type SettingsDataModelObjectAboutFormValues = z.infer<
typeof settingsDataModelObjectAboutFormSchema
>;
type SettingsDataModelObjectAboutFormProps = {
disabled?: boolean;
objectMetadataItem?: ObjectMetadataItem;
};
const StyledInputsContainer = styled.div`
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
margin-bottom: ${({ theme }) => theme.spacing(2)};
width: 100%;
`;
const StyledLabel = styled.span`
color: ${({ theme }) => theme.font.color.light};
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
margin-bottom: ${({ theme }) => theme.spacing(1)};
text-transform: uppercase;
`;
const StyledInputContainer = styled.div`
display: flex;
flex-direction: column;
`;
export const SettingsDataModelObjectAboutForm = ({
disabled,
objectMetadataItem,
}: SettingsDataModelObjectAboutFormProps) => {
const { control } = useFormContext<SettingsDataModelObjectAboutFormValues>();
return (
<>
<StyledInputsContainer>
<StyledInputContainer>
<StyledLabel>Icon</StyledLabel>
<Controller
name="icon"
control={control}
defaultValue={objectMetadataItem?.icon ?? 'IconListNumbers'}
render={({ field: { onChange, value } }) => (
<IconPicker
disabled={disabled}
selectedIconKey={value}
onChange={({ iconKey }) => onChange(iconKey)}
/>
)}
/>
</StyledInputContainer>
{[
{
label: 'Singular',
fieldName: 'labelSingular' as const,
placeholder: 'Listing',
defaultValue: objectMetadataItem?.labelSingular,
},
{
label: 'Plural',
fieldName: 'labelPlural' as const,
placeholder: 'Listings',
defaultValue: objectMetadataItem?.labelPlural,
},
].map(({ defaultValue, fieldName, label, placeholder }) => (
<Controller
key={`object-${fieldName}-text-input`}
name={fieldName}
control={control}
defaultValue={defaultValue}
render={({ field: { onChange, value } }) => (
<TextInput
label={label}
placeholder={placeholder}
value={value}
onChange={onChange}
disabled={disabled}
fullWidth
/>
)}
/>
))}
</StyledInputsContainer>
<Controller
name="description"
control={control}
defaultValue={objectMetadataItem?.description ?? null}
render={({ field: { onChange, value } }) => (
<TextArea
placeholder="Write a description"
minRows={4}
value={value ?? undefined}
onChange={(nextValue) => onChange(nextValue ?? null)}
disabled={disabled}
/>
)}
/>
</>
);
};

43
packages/twenty-front/src/modules/settings/data-model/objects/forms/components/__stories__/SettingsDataModelObjectAboutForm.stories.tsx Normal file
View File

@ -0,0 +1,43 @@
import styled from '@emotion/styled';
import { Meta, StoryObj } from '@storybook/react';
import { mockedCompanyObjectMetadataItem } from '@/object-record/record-field/__mocks__/fieldDefinitions';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { FormProviderDecorator } from '~/testing/decorators/FormProviderDecorator';
import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
import { SettingsDataModelObjectAboutForm } from '../SettingsDataModelObjectAboutForm';
const StyledContainer = styled.div`
flex: 1;
`;
const meta: Meta<typeof SettingsDataModelObjectAboutForm> = {
title:
'Modules/Settings/DataModel/Objects/Forms/SettingsDataModelObjectAboutForm',
component: SettingsDataModelObjectAboutForm,
decorators: [
(Story) => (
<StyledContainer>
<Story />
</StyledContainer>
),
FormProviderDecorator,
IconsProviderDecorator,
ComponentDecorator,
],
parameters: {
container: { width: 520 },
},
};
export default meta;
type Story = StoryObj<typeof SettingsDataModelObjectAboutForm>;
export const Default: Story = {};
export const WithDefaultValues: Story = {
args: {
objectMetadataItem: mockedCompanyObjectMetadataItem,
},
};

65
packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
View File

@ -1,47 +1,60 @@
import { useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useCreateOneObjectMetadataItem } from '@/object-metadata/hooks/useCreateOneObjectMetadataItem';
import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsObjectFormSection } from '@/settings/data-model/components/SettingsObjectFormSection';
import {
SettingsDataModelObjectAboutForm,
settingsDataModelObjectAboutFormSchema,
} from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm';
import { settingsCreateObjectInputSchema } from '@/settings/data-model/validation-schemas/settingsCreateObjectInputSchema';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { IconSettings } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
const newObjectFormSchema = settingsDataModelObjectAboutFormSchema;
type SettingsDataModelNewObjectFormValues = z.infer<typeof newObjectFormSchema>;
export const SettingsNewObject = () => {
const navigate = useNavigate();
const { enqueueSnackBar } = useSnackBar();
const { createOneObjectMetadataItem } = useCreateOneObjectMetadataItem();
const [formValues, setFormValues] = useState<{
description?: string;
icon: string;
labelPlural: string;
labelSingular: string;
}>({ icon: 'IconListNumbers', labelPlural: '', labelSingular: '' });
const settingsObjectsPagePath = getSettingsPagePath(SettingsPath.Objects);
const canSave = !!formValues.labelPlural && !!formValues.labelSingular;
const formConfig = useForm<SettingsDataModelNewObjectFormValues>({
mode: 'onTouched',
resolver: zodResolver(newObjectFormSchema),
});
const canSave = formConfig.formState.isValid;
const handleSave = async () => {
const formValues = formConfig.getValues();
try {
const createdObject = await createOneObjectMetadataItem(
const { data: response } = await createOneObjectMetadataItem(
settingsCreateObjectInputSchema.parse(formValues),
);
navigate(
createdObject.data?.createOneObject.isActive
? `/settings/objects/${getObjectSlug(
createdObject.data.createOneObject,
response
? `${settingsObjectsPagePath}/${getObjectSlug(
response.createOneObject,
)}`
: '/settings/objects',
: settingsObjectsPagePath,
);
} catch (error) {
enqueueSnackBar((error as Error).message, {
@ -51,6 +64,8 @@ export const SettingsNewObject = () => {
};
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<FormProvider {...formConfig}>
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<SettingsHeaderContainer>
@ -58,30 +73,26 @@ export const SettingsNewObject = () => {
links={[
{
children: 'Objects',
href: getSettingsPagePath(SettingsPath.Objects),
href: settingsObjectsPagePath,
},
{ children: 'New' },
]}
/>
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() => navigate(getSettingsPagePath(SettingsPath.Objects))}
onCancel={() => navigate(settingsObjectsPagePath)}
onSave={handleSave}
/>
</SettingsHeaderContainer>
<SettingsObjectFormSection
icon={formValues.icon}
singularName={formValues.labelSingular}
pluralName={formValues.labelPlural}
description={formValues.description}
onChange={(formValues) => {
setFormValues((previousValues) => ({
...previousValues,
...formValues,
}));
}}
<Section>
<H2Title
title="About"
description="Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms."
/>
<SettingsDataModelObjectAboutForm />
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
</FormProvider>
);
};

110
packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
View File

@ -1,5 +1,9 @@
import { useEffect, useState } from 'react';
import { useEffect } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useNavigate, useParams } from 'react-router-dom';
import { zodResolver } from '@hookform/resolvers/zod';
import pick from 'lodash.pick';
import { z } from 'zod';
import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
@ -7,7 +11,10 @@ import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsObjectFormSection } from '@/settings/data-model/components/SettingsObjectFormSection';
import {
SettingsDataModelObjectAboutForm,
settingsDataModelObjectAboutFormSchema,
} from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm';
import { SettingsDataModelObjectSettingsFormCard } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard';
import { settingsUpdateObjectInputSchema } from '@/settings/data-model/validation-schemas/settingsUpdateObjectInputSchema';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@ -21,6 +28,12 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
const objectEditFormSchema = settingsDataModelObjectAboutFormSchema;
type SettingsDataModelObjectEditFormValues = z.infer<
typeof objectEditFormSchema
>;
export const SettingsObjectEdit = () => {
const navigate = useNavigate();
const { enqueueSnackBar } = useSnackBar();
@ -33,57 +46,37 @@ export const SettingsObjectEdit = () => {
const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
const [formValues, setFormValues] = useState<
Partial<{
icon: string;
labelSingular: string;
labelPlural: string;
description: string;
}>
>({});
const settingsObjectsPagePath = getSettingsPagePath(SettingsPath.Objects);
const formConfig = useForm<SettingsDataModelObjectEditFormValues>({
mode: 'onTouched',
resolver: zodResolver(objectEditFormSchema),
});
useEffect(() => {
if (!activeObjectMetadataItem) {
navigate(AppPath.NotFound);
return;
}
if (!Object.keys(formValues).length) {
setFormValues({
icon: activeObjectMetadataItem.icon ?? undefined,
labelSingular: activeObjectMetadataItem.labelSingular,
labelPlural: activeObjectMetadataItem.labelPlural,
description: activeObjectMetadataItem.description ?? undefined,
});
}
}, [activeObjectMetadataItem, formValues, navigate]);
if (!activeObjectMetadataItem) navigate(AppPath.NotFound);
}, [activeObjectMetadataItem, navigate]);
if (!activeObjectMetadataItem) return null;
const areRequiredFieldsFilled =
!!formValues.labelSingular && !!formValues.labelPlural;
const hasChanges =
formValues.description !== activeObjectMetadataItem.description ||
formValues.icon !== activeObjectMetadataItem.icon ||
formValues.labelPlural !== activeObjectMetadataItem.labelPlural ||
formValues.labelSingular !== activeObjectMetadataItem.labelSingular;
const canSave = areRequiredFieldsFilled && hasChanges;
const { isDirty, isValid } = formConfig.formState;
const canSave = isDirty && isValid;
const handleSave = async () => {
const editedObjectMetadataItem = {
...activeObjectMetadataItem,
...formValues,
};
const formValues = formConfig.getValues();
const dirtyFieldKeys = Object.keys(
formConfig.formState.dirtyFields,
) as (keyof SettingsDataModelObjectEditFormValues)[];
try {
await updateOneObjectMetadataItem({
idToUpdate: activeObjectMetadataItem.id,
updatePayload: settingsUpdateObjectInputSchema.parse(formValues),
updatePayload: settingsUpdateObjectInputSchema.parse(
pick(formValues, dirtyFieldKeys),
),
});
navigate(`/settings/objects/${getObjectSlug(editedObjectMetadataItem)}`);
navigate(`${settingsObjectsPagePath}/${getObjectSlug(formValues)}`);
} catch (error) {
enqueueSnackBar((error as Error).message, {
variant: 'error',
@ -96,19 +89,24 @@ export const SettingsObjectEdit = () => {
idToUpdate: activeObjectMetadataItem.id,
updatePayload: { isActive: false },
});
navigate(getSettingsPagePath(SettingsPath.Objects));
navigate(settingsObjectsPagePath);
};
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<FormProvider {...formConfig}>
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<SettingsHeaderContainer>
<Breadcrumb
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: 'Objects',
href: settingsObjectsPagePath,
},
{
children: activeObjectMetadataItem.labelPlural,
href: `/settings/objects/${objectSlug}`,
href: `${settingsObjectsPagePath}/${objectSlug}`,
},
{ children: 'Edit' },
]}
@ -116,24 +114,23 @@ export const SettingsObjectEdit = () => {
{activeObjectMetadataItem.isCustom && (
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
onCancel={() =>
navigate(`${settingsObjectsPagePath}/${objectSlug}`)
}
onSave={handleSave}
/>
)}
</SettingsHeaderContainer>
<SettingsObjectFormSection
disabled={!activeObjectMetadataItem.isCustom}
icon={formValues.icon}
singularName={formValues.labelSingular}
pluralName={formValues.labelPlural}
description={formValues.description}
onChange={(values) =>
setFormValues((previousFormValues) => ({
...previousFormValues,
...values,
}))
}
<Section>
<H2Title
title="About"
description="Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms."
/>
<SettingsDataModelObjectAboutForm
disabled={!activeObjectMetadataItem.isCustom}
objectMetadataItem={activeObjectMetadataItem}
/>
</Section>
<Section>
<H2Title
title="Settings"
@ -154,5 +151,6 @@ export const SettingsObjectEdit = () => {
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
</FormProvider>
);
};

13
packages/twenty-front/src/testing/decorators/FormProviderDecorator.tsx Normal file
View File

@ -0,0 +1,13 @@
import { FormProvider, useForm } from 'react-hook-form';
import { Decorator } from '@storybook/react';
export const FormProviderDecorator: Decorator = (Story) => {
const formConfig = useForm();
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<FormProvider {...formConfig}>
<Story />
</FormProvider>
);
};

11
yarn.lock
View File

@ -15636,6 +15636,15 @@ __metadata:
languageName: node
linkType: hard
"@types/lodash.pick@npm:^4.3.7":
version: 4.4.9
resolution: "@types/lodash.pick@npm:4.4.9"
dependencies:
"@types/lodash": "npm:*"
checksum: 61ae2fb9fe817a2f398863d10dc57e3cb864ebadefb7f3554d8d0c189448e08a174d6bfdd6e0220988ea084a2d47c3377908cf037e2b3ce552aa79ce0f36bc9f
languageName: node
linkType: hard
"@types/lodash.snakecase@npm:^4.1.7":
version: 4.1.9
resolution: "@types/lodash.snakecase@npm:4.1.9"
@ -44428,6 +44437,7 @@ __metadata:
"@types/lodash.isobject": "npm:^3.0.7"
"@types/lodash.kebabcase": "npm:^4.1.7"
"@types/lodash.merge": "npm:^4.6.7"
"@types/lodash.pick": "npm:^4.3.7"
"@types/lodash.snakecase": "npm:^4.1.7"
"@types/lodash.upperfirst": "npm:^4.3.7"
"@types/luxon": "npm:^3.3.0"
@ -44525,6 +44535,7 @@ __metadata:
lodash.kebabcase: "npm:^4.1.1"
lodash.merge: "npm:^4.6.2"
lodash.omit: "npm:^4.5.0"
lodash.pick: "npm:^4.4.0"
lodash.snakecase: "npm:^4.1.1"
lodash.upperfirst: "npm:^4.3.1"
luxon: "npm:^3.3.0"