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

feat: create custom object and update edited object names (#2220)

Browse Source 
Closes #2155, Closes #2153
This commit is contained in:
Thaïs
2023-10-26 11:04:16 +02:00
committed by GitHub
parent 0b33880cc9
commit 2b1945a3e1
22 changed files with 214 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/generated-metadata/graphql.ts
View File

@ -644,6 +644,8 @@ export type UpdateObjectInput = {
isActive?: InputMaybe<Scalars['Boolean']['input']>;
labelPlural?: InputMaybe<Scalars['String']['input']>;
labelSingular?: InputMaybe<Scalars['String']['input']>;
namePlural?: InputMaybe<Scalars['String']['input']>;
nameSingular?: InputMaybe<Scalars['String']['input']>;
};
export type UpdateOneFieldInput = {

36
front/src/modules/metadata/hooks/useObjectMetadata.ts
View File

@ -1,5 +1,8 @@
import { MetadataObject } from '../types/MetadataObject';
import { formatMetadataObjectInput } from '../utils/formatMetadataObjectInput';
import { getObjectSlug } from '../utils/getObjectSlug';
import { useCreateOneMetadataObject } from './useCreateOneMetadataObject';
import { useFindManyMetadataObjects } from './useFindManyMetadataObjects';
import { useUpdateOneMetadataObject } from './useUpdateOneMetadataObject';
@ -13,17 +16,30 @@ export const useObjectMetadata = () => {
({ isActive }) => !isActive,
);
const findActiveObjectBySlug = (slug: string) =>
activeMetadataObjects.find(
(activeObject) => getObjectSlug(activeObject) === slug,
);
const { createOneMetadataObject } = useCreateOneMetadataObject();
const { updateOneMetadataObject } = useUpdateOneMetadataObject();
const editObject = (metadataObject: MetadataObject) =>
const createObject = (
input: Pick<
MetadataObject,
'labelPlural' | 'labelSingular' | 'icon' | 'description'
>,
) => createOneMetadataObject(formatMetadataObjectInput(input));
const editObject = (
input: Pick<
MetadataObject,
'id' | 'labelPlural' | 'labelSingular' | 'icon' | 'description'
>,
) =>
updateOneMetadataObject({
idToUpdate: metadataObject.id,
updatePayload: {
description: metadataObject.description ?? null,
icon: metadataObject.icon,
labelPlural: metadataObject.labelPlural,
labelSingular: metadataObject.labelSingular,
},
idToUpdate: input.id,
updatePayload: formatMetadataObjectInput(input),
});
const activateObject = (metadataObject: MetadataObject) =>
@ -40,9 +56,11 @@ export const useObjectMetadata = () => {
return {
activateObject,
disableObject,
activeObjects: activeMetadataObjects,
createObject,
disabledObjects: disabledMetadataObjects,
disableObject,
editObject,
findActiveObjectBySlug,
};
};

8
front/src/modules/metadata/hooks/useUpdateOneMetadataObject.ts
View File

@ -29,7 +29,13 @@ export const useUpdateOneMetadataObject = () => {
idToUpdate: UpdateOneMetadataObjectMutationVariables['idToUpdate'];
updatePayload: Pick<
UpdateOneMetadataObjectMutationVariables['updatePayload'],
'description' | 'icon' | 'isActive' | 'labelPlural' | 'labelSingular'
| 'description'
| 'icon'
| 'isActive'
| 'labelPlural'
| 'labelSingular'
| 'namePlural'
| 'nameSingular'
>;
}) => {
return await mutate({

18
front/src/modules/metadata/utils/formatMetadataObjectInput.ts Normal file
View File

@ -0,0 +1,18 @@
import toCamelCase from 'lodash.camelcase';
import upperFirst from 'lodash.upperfirst';
import { MetadataObject } from '../types/MetadataObject';
export const formatMetadataObjectInput = (
input: Pick<
MetadataObject,
'labelPlural' | 'labelSingular' | 'icon' | 'description'
>,
) => ({
description: input.description?.trim() ?? null,
icon: input.icon,
labelPlural: input.labelPlural.trim(),
labelSingular: input.labelSingular.trim(),
namePlural: upperFirst(toCamelCase(input.labelPlural.trim())),
nameSingular: upperFirst(toCamelCase(input.labelSingular.trim())),
});

7
front/src/modules/metadata/utils/getObjectSlug.ts Normal file
View File

@ -0,0 +1,7 @@
import toKebabCase from 'lodash.kebabcase';
import { MetadataObject } from '../types/MetadataObject';
export const getObjectSlug = (
metadataObject: Pick<MetadataObject, 'labelPlural'>,
) => toKebabCase(metadataObject.labelPlural);

4
front/src/modules/metadata/utils/validateMetadataObjectLabel.ts Normal file
View File

@ -0,0 +1,4 @@
const metadataObjectLabelValidationPattern = /^[a-zA-Z][a-zA-Z0-9 ]*$/;
export const validateMetadataObjectLabel = (value: string) =>
!!value.match(metadataObjectLabelValidationPattern);

13
front/src/modules/settings/data-model/components/SettingsObjectFormSection.tsx
View File

@ -1,5 +1,6 @@
import styled from '@emotion/styled';
import { validateMetadataObjectLabel } from '@/metadata/utils/validateMetadataObjectLabel';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { TextArea } from '@/ui/input/components/TextArea';
import { TextInput } from '@/ui/input/components/TextInput';
@ -43,7 +44,11 @@ export const SettingsObjectFormSection = ({
label="Singular"
placeholder="Investor"
value={singularName}
onChange={(value) => onChange?.({ labelSingular: value })}
onChange={(value) => {
if (!value || validateMetadataObjectLabel(value)) {
onChange?.({ labelSingular: value });
}
}}
disabled={disabled}
fullWidth
/>
@ -51,7 +56,11 @@ export const SettingsObjectFormSection = ({
label="Plural"
placeholder="Investors"
value={pluralName}
onChange={(value) => onChange?.({ labelPlural: value })}
onChange={(value) => {
if (!value || validateMetadataObjectLabel(value)) {
onChange?.({ labelPlural: value });
}
}}
disabled={disabled}
fullWidth
/>

10
front/src/modules/types/SettingsPath.ts
View File

@ -2,11 +2,11 @@ export enum SettingsPath {
ProfilePage = 'profile',
Experience = 'profile/experience',
Objects = 'objects',
ObjectDetail = 'objects/:pluralObjectName',
ObjectEdit = 'objects/:pluralObjectName/edit',
ObjectNewFieldStep1 = 'objects/:pluralObjectName/new-field/step-1',
ObjectNewFieldStep2 = 'objects/:pluralObjectName/new-field/step-2',
ObjectFieldEdit = 'objects/:pluralObjectName/:fieldName',
ObjectDetail = 'objects/:objectSlug',
ObjectEdit = 'objects/:objectSlug/edit',
ObjectNewFieldStep1 = 'objects/:objectSlug/new-field/step-1',
ObjectNewFieldStep2 = 'objects/:objectSlug/new-field/step-2',
ObjectFieldEdit = 'objects/:objectSlug/:fieldName',
NewObject = 'objects/new',
WorkspaceMembersPage = 'workspace-members',
Workspace = 'workspace',

42
front/src/pages/settings/data-model/SettingsNewObject.tsx
View File

@ -1,6 +1,7 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@ -21,19 +22,33 @@ export const SettingsNewObject = () => {
const [selectedObjectType, setSelectedObjectType] =
useState<NewObjectType>('Standard');
const [customFormValues, setCustomFormValues] = useState<
Partial<{
labelPlural: string;
labelSingular: string;
description: string;
}>
>({});
const { createObject } = useObjectMetadata();
const [customFormValues, setCustomFormValues] = useState<{
description?: string;
icon?: string;
labelPlural: string;
labelSingular: string;
}>({ labelPlural: '', labelSingular: '' });
const canSave =
selectedObjectType === 'Custom' &&
!!customFormValues.labelPlural &&
!!customFormValues.labelSingular;
const handleSave = async () => {
if (selectedObjectType === 'Custom') {
await createObject({
labelPlural: customFormValues.labelPlural,
labelSingular: customFormValues.labelSingular,
description: customFormValues.description,
icon: customFormValues.icon,
});
}
navigate('/settings/objects');
};
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
@ -49,7 +64,7 @@ export const SettingsNewObject = () => {
onCancel={() => {
navigate('/settings/objects');
}}
onSave={() => undefined}
onSave={handleSave}
/>
</SettingsHeaderContainer>
<Section>
@ -64,7 +79,16 @@ export const SettingsNewObject = () => {
</Section>
{selectedObjectType === 'Custom' && (
<>
<SettingsObjectIconSection label={customFormValues.labelPlural} />
<SettingsObjectIconSection
label={customFormValues.labelPlural}
iconKey={customFormValues.icon}
onChange={({ iconKey }) => {
setCustomFormValues((previousValues) => ({
...previousValues,
icon: iconKey,
}));
}}
/>
<SettingsObjectFormSection
singularName={customFormValues.labelSingular}
pluralName={customFormValues.labelPlural}

19
front/src/pages/settings/data-model/SettingsObjectDetail.tsx
View File

@ -32,11 +32,10 @@ const StyledDiv = styled.div`
export const SettingsObjectDetail = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
const { activeObjects, disableObject } = useObjectMetadata();
const activeObject = activeObjects.find(
(activeObject) => activeObject.namePlural === pluralObjectName,
);
const { objectSlug = '' } = useParams();
const { activeObjects, disableObject, findActiveObjectBySlug } =
useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
useEffect(() => {
if (activeObjects.length && !activeObject) {
@ -70,9 +69,7 @@ export const SettingsObjectDetail = () => {
disableObject(activeObject);
navigate('/settings/objects');
}}
onEdit={() =>
navigate(`/settings/objects/${pluralObjectName}/edit`)
}
onEdit={() => navigate('./edit')}
/>
)}
<Section>
@ -97,11 +94,7 @@ export const SettingsObjectDetail = () => {
<SettingsObjectFieldActiveActionDropdown
isCustomField={fieldItem.isCustom}
scopeKey={fieldItem.id}
onEdit={() =>
navigate(
`/settings/objects/${pluralObjectName}/${fieldItem.name}`,
)
}
onEdit={() => navigate(`./${fieldItem.name}`)}
onDisable={() => disableField(fieldItem)}
/>
}

29
front/src/pages/settings/data-model/SettingsObjectEdit.tsx
View File

@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { getObjectSlug } from '@/metadata/utils/getObjectSlug';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@ -18,11 +19,10 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
export const SettingsObjectEdit = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
const { activeObjects, disableObject, editObject } = useObjectMetadata();
const activeObject = activeObjects.find(
(activeObject) => activeObject.namePlural === pluralObjectName,
);
const { objectSlug = '' } = useParams();
const { activeObjects, disableObject, editObject, findActiveObjectBySlug } =
useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
const [formValues, setFormValues] = useState<
Partial<{
@ -62,6 +62,16 @@ export const SettingsObjectEdit = () => {
const canSave = areRequiredFieldsFilled && hasChanges;
const handleSave = async () => {
if (!activeObject) return;
const editedObject = { ...activeObject, ...formValues };
await editObject(editedObject);
navigate(`/settings/objects/${getObjectSlug(editedObject)}`);
};
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
@ -71,7 +81,7 @@ export const SettingsObjectEdit = () => {
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObject?.labelPlural ?? '',
href: `/settings/objects/${pluralObjectName}`,
href: `/settings/objects/${objectSlug}`,
},
{ children: 'Edit' },
]}
@ -80,12 +90,9 @@ export const SettingsObjectEdit = () => {
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() => {
navigate(`/settings/objects/${pluralObjectName}`);
}}
onSave={() => {
editObject({ ...activeObject, ...formValues });
navigate(`/settings/objects/${pluralObjectName}`);
navigate(`/settings/objects/${objectSlug}`);
}}
onSave={handleSave}
/>
)}
</SettingsHeaderContainer>

6
front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
View File

@ -7,7 +7,7 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
export const SettingsObjectFieldEdit = () => {
const { pluralObjectName = '', fieldName = '' } = useParams();
const { objectSlug = '', fieldName = '' } = useParams();
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
@ -16,8 +16,8 @@ export const SettingsObjectFieldEdit = () => {
links={[
{ children: 'Objects', href: '/settings/objects' },
{
children: `${pluralObjectName}`,
href: `/settings/objects/${pluralObjectName}`,
children: `${objectSlug}`,
href: `/settings/objects/${objectSlug}`,
},
{
children: `${fieldName}`,

14
front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
View File

@ -35,11 +35,9 @@ const StyledAddCustomFieldButton = styled(Button)`
export const SettingsObjectNewFieldStep1 = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
const { activeObjects } = useObjectMetadata();
const activeObject = activeObjects.find(
(activeObject) => activeObject.namePlural === pluralObjectName,
);
const { objectSlug = '' } = useParams();
const { activeObjects, findActiveObjectBySlug } = useObjectMetadata();
const activeObject = findActiveObjectBySlug(objectSlug);
useEffect(() => {
if (activeObjects.length && !activeObject) {
@ -63,7 +61,7 @@ export const SettingsObjectNewFieldStep1 = () => {
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObject?.labelPlural ?? '',
href: `/settings/objects/${pluralObjectName}`,
href: `/settings/objects/${objectSlug}`,
},
{ children: 'New Field' },
]}
@ -71,7 +69,7 @@ export const SettingsObjectNewFieldStep1 = () => {
<SaveAndCancelButtons
isSaveDisabled
onCancel={() => {
navigate(`/settings/objects/${pluralObjectName}`);
navigate(`/settings/objects/${objectSlug}`);
}}
onSave={() => undefined}
/>
@ -121,7 +119,7 @@ export const SettingsObjectNewFieldStep1 = () => {
size="small"
variant="secondary"
onClick={() =>
navigate(`/settings/objects/${pluralObjectName}/new-field/step-2`)
navigate(`/settings/objects/${objectSlug}/new-field/step-2`)
}
/>
</StyledSection>

6
front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
View File

@ -15,9 +15,9 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
export const SettingsObjectNewFieldStep2 = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
const { objectSlug = '' } = useParams();
const activeObject = activeObjectItems.find(
(activeObject) => activeObject.name.toLowerCase() === pluralObjectName,
(activeObject) => activeObject.name.toLowerCase() === objectSlug,
);
useEffect(() => {
@ -43,7 +43,7 @@ export const SettingsObjectNewFieldStep2 = () => {
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObject?.name ?? '',
href: `/settings/objects/${pluralObjectName}`,
href: `/settings/objects/${objectSlug}`,
},
{ children: 'New Field' },
]}

5
front/src/pages/settings/data-model/SettingsObjects.tsx
View File

@ -3,6 +3,7 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
import { getObjectSlug } from '@/metadata/utils/getObjectSlug';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import {
@ -76,7 +77,9 @@ export const SettingsObjects = () => {
/>
}
onClick={() =>
navigate(`/settings/objects/${objectItem.namePlural}`)
navigate(
`/settings/objects/${getObjectSlug(objectItem)}`,
)
}
/>
))}

4
front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx
View File

@ -14,8 +14,8 @@ const meta: Meta<PageDecoratorArgs> = {
component: SettingsObjectDetail,
decorators: [PageDecorator],
args: {
routePath: '/settings/objects/:pluralObjectName',
routeParams: { ':pluralObjectName': 'companies' },
routePath: '/settings/objects/:objectSlug',
routeParams: { ':objectSlug': 'companies' },
},
parameters: {
msw: graphqlMocks,

4
front/src/pages/settings/data-model/__stories__/SettingsObjectEdit.stories.tsx
View File

@ -14,8 +14,8 @@ const meta: Meta<PageDecoratorArgs> = {
component: SettingsObjectEdit,
decorators: [PageDecorator],
args: {
routePath: '/settings/objects/:pluralObjectName/edit',
routeParams: { ':pluralObjectName': 'companies' },
routePath: '/settings/objects/:objectSlug/edit',
routeParams: { ':objectSlug': 'companies' },
},
parameters: {
msw: graphqlMocks,

4
front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx
View File

@ -15,8 +15,8 @@ const meta: Meta<PageDecoratorArgs> = {
component: SettingsObjectNewFieldStep1,
decorators: [PageDecorator],
args: {
routePath: '/settings/objects/:pluralObjectName/new-field/step-1',
routeParams: { ':pluralObjectName': 'companies' },
routePath: '/settings/objects/:objectSlug/new-field/step-1',
routeParams: { ':objectSlug': 'companies' },
},
parameters: {
msw: graphqlMocks,

4
front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep2.stories.tsx
View File

@ -15,8 +15,8 @@ const meta: Meta<PageDecoratorArgs> = {
component: SettingsObjectNewFieldStep2,
decorators: [PageDecorator],
args: {
routePath: '/settings/objects/:pluralObjectName/new-field/step-2',
routeParams: { ':pluralObjectName': 'companies' },
routePath: '/settings/objects/:objectSlug/new-field/step-2',
routeParams: { ':objectSlug': 'companies' },
},
parameters: {
msw: graphqlMocks,