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

[REFACTOR][FRONT]: Remove objectMetadata and fieldMetadata sluggification (#9441)

Browse Source 
# Introduction
For motivations and context please have a look to
https://github.com/twentyhq/twenty/pull/9394 whom this PR results from.
In this pull-request we remove any `metadataField` and `objectMetadata`
sluggification. We directly consume `objectMetadata.namePlural` and
`metadataField.name`, ***it seems like that historically the consumed
`metadataField.name`*** are we sure that we wanna change this behavior ?

## Notes
Unless I'm mistaken by reverting the `kebabcase` url formatting we might
be creating deadlinks that user could have save beforehand => Discussed
with Charles said it's controlled risk.

---------

Co-authored-by: Paul Rastoin <paulrastoin@Pauls-MacBook-Pro.local>
This commit is contained in:
Paul Rastoin
2025-01-08 11:31:53 +01:00
committed by GitHub
parent 00a9646d68
commit aa0d8546a8
31 changed files with 98 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,6 @@ import { H2Title, Section } from 'twenty-ui';
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 { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import {
@ -50,9 +49,7 @@ export const SettingsNewObject = () => {
navigate(
response
? `${settingsObjectsPagePath}/${getObjectSlug(
response.createOneObject,
)}`
? `${settingsObjectsPagePath}/${response.createOneObject.namePlural}`
: settingsObjectsPagePath,
);

23
packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx
View File

@ -32,7 +32,7 @@ import {
} from 'twenty-ui';
import { FeatureFlagKey } from '~/generated/graphql';
import { SETTINGS_OBJECT_DETAIL_TABS } from '~/pages/settings/data-model/constants/SettingsObjectDetailTabs';
import { updatedObjectSlugState } from '~/pages/settings/data-model/states/updatedObjectSlugState';
import { updatedObjectNamePluralState } from '~/pages/settings/data-model/states/updatedObjectNamePluralState';
const StyledContentContainer = styled.div`
flex: 1;
@ -53,16 +53,16 @@ const StyledTitleContainer = styled.div`
export const SettingsObjectDetailPage = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { findActiveObjectMetadataItemBySlug } =
const { objectNamePlural = '' } = useParams();
const { findActiveObjectMetadataItemByNamePlural } =
useFilteredObjectMetadataItems();
const [updatedObjectSlug, setUpdatedObjectSlug] = useRecoilState(
updatedObjectSlugState,
const [updatedObjectNamePlural, setUpdatedObjectNamePlural] = useRecoilState(
updatedObjectNamePluralState,
);
const objectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug) ??
findActiveObjectMetadataItemBySlug(updatedObjectSlug);
findActiveObjectMetadataItemByNamePlural(objectNamePlural) ??
findActiveObjectMetadataItemByNamePlural(updatedObjectNamePlural);
const { activeTabId } = useTabList(
SETTINGS_OBJECT_DETAIL_TABS.COMPONENT_INSTANCE_ID,
@ -74,14 +74,15 @@ export const SettingsObjectDetailPage = () => {
);
useEffect(() => {
if (objectSlug === updatedObjectSlug) setUpdatedObjectSlug('');
if (objectNamePlural === updatedObjectNamePlural)
setUpdatedObjectNamePlural('');
if (!isDefined(objectMetadataItem)) navigate(AppPath.NotFound);
}, [
objectMetadataItem,
navigate,
objectSlug,
updatedObjectSlug,
setUpdatedObjectSlug,
objectNamePlural,
updatedObjectNamePlural,
setUpdatedObjectNamePlural,
]);
if (!isDefined(objectMetadataItem)) return <></>;

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

@ -18,7 +18,6 @@ import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilte
import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
import { useUpdateOneFieldMetadataItem } from '@/object-metadata/hooks/useUpdateOneFieldMetadataItem';
import { formatFieldMetadataItemInput } from '@/object-metadata/utils/formatFieldMetadataItemInput';
import { getFieldSlug } from '@/object-metadata/utils/getFieldSlug';
import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
@ -48,16 +47,18 @@ export const SettingsObjectFieldEdit = () => {
const navigate = useNavigate();
const { enqueueSnackBar } = useSnackBar();
const { objectSlug = '', fieldSlug = '' } = useParams();
const { findObjectMetadataItemBySlug } = useFilteredObjectMetadataItems();
const { objectNamePlural = '', fieldName = '' } = useParams();
const { findObjectMetadataItemByNamePlural } =
useFilteredObjectMetadataItems();
const objectMetadataItem = findObjectMetadataItemBySlug(objectSlug);
const objectMetadataItem =
findObjectMetadataItemByNamePlural(objectNamePlural);
const { deactivateMetadataField, activateMetadataField } =
useFieldMetadataItem();
const fieldMetadataItem = objectMetadataItem?.fields.find(
(fieldMetadataItem) => getFieldSlug(fieldMetadataItem) === fieldSlug,
(fieldMetadataItem) => fieldMetadataItem.name === fieldName,
);
const getRelationMetadata = useGetRelationMetadata();
@ -126,7 +127,7 @@ export const SettingsObjectFieldEdit = () => {
Object.keys(otherDirtyFields),
);
navigate(`/settings/objects/${objectSlug}`);
navigate(`/settings/objects/${objectNamePlural}`);
await updateOneFieldMetadataItem({
objectMetadataId: objectMetadataItem.id,
@ -143,12 +144,12 @@ export const SettingsObjectFieldEdit = () => {
const handleDeactivate = async () => {
await deactivateMetadataField(fieldMetadataItem.id, objectMetadataItem.id);
navigate(`/settings/objects/${objectSlug}`);
navigate(`/settings/objects/${objectNamePlural}`);
};
const handleActivate = async () => {
await activateMetadataField(fieldMetadataItem.id, objectMetadataItem.id);
navigate(`/settings/objects/${objectSlug}`);
navigate(`/settings/objects/${objectNamePlural}`);
};
return (
@ -168,7 +169,7 @@ export const SettingsObjectFieldEdit = () => {
},
{
children: objectMetadataItem.labelPlural,
href: `/settings/objects/${objectSlug}`,
href: `/settings/objects/${objectNamePlural}`,
},
{
children: fieldMetadataItem.label,
@ -178,7 +179,7 @@ export const SettingsObjectFieldEdit = () => {
<SaveAndCancelButtons
isSaveDisabled={!canSave}
isCancelDisabled={isSubmitting}
onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
onCancel={() => navigate(`/settings/objects/${objectNamePlural}`)}
onSave={formConfig.handleSubmit(handleSave)}
/>
}

12
packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx
View File

@ -41,17 +41,17 @@ const DEFAULT_ICON_FOR_NEW_FIELD = 'IconUsers';
export const SettingsObjectNewFieldConfigure = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { objectNamePlural = '' } = useParams();
const [searchParams] = useSearchParams();
const fieldType =
(searchParams.get('fieldType') as SettingsFieldType) ||
FieldMetadataType.Text;
const { enqueueSnackBar } = useSnackBar();
const { findActiveObjectMetadataItemBySlug } =
const { findActiveObjectMetadataItemByNamePlural } =
useFilteredObjectMetadataItems();
const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
findActiveObjectMetadataItemByNamePlural(objectNamePlural);
const { createMetadataField } = useFieldMetadataItem();
const apolloClient = useApolloClient();
@ -163,7 +163,7 @@ export const SettingsObjectNewFieldConfigure = () => {
});
}
navigate(`/settings/objects/${objectSlug}`);
navigate(`/settings/objects/${objectNamePlural}`);
// TODO: fix optimistic update logic
// Forcing a refetch for now but it's not ideal
@ -190,7 +190,7 @@ export const SettingsObjectNewFieldConfigure = () => {
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObjectMetadataItem.labelPlural,
href: `/settings/objects/${objectSlug}`,
href: `/settings/objects/${objectNamePlural}`,
},
{ children: <SettingsDataModelNewFieldBreadcrumbDropDown /> },
@ -201,7 +201,7 @@ export const SettingsObjectNewFieldConfigure = () => {
isCancelDisabled={isSubmitting}
onCancel={() =>
navigate(
`/settings/objects/${objectSlug}/new-field/select?fieldType=${fieldType}`,
`/settings/objects/${objectNamePlural}/new-field/select?fieldType=${fieldType}`,
)
}
onSave={formConfig.handleSubmit(handleSave)}

10
packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect.tsx
View File

@ -30,11 +30,11 @@ export type SettingsDataModelFieldTypeFormValues = z.infer<
export const SettingsObjectNewFieldSelect = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { findActiveObjectMetadataItemBySlug } =
const { objectNamePlural = '' } = useParams();
const { findActiveObjectMetadataItemByNamePlural } =
useFilteredObjectMetadataItems();
const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
findActiveObjectMetadataItemByNamePlural(objectNamePlural);
const formMethods = useForm({
resolver: zodResolver(settingsDataModelFieldTypeFormSchema),
defaultValues: {
@ -69,14 +69,14 @@ export const SettingsObjectNewFieldSelect = () => {
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObjectMetadataItem.labelPlural,
href: `/settings/objects/${objectSlug}`,
href: `/settings/objects/${objectNamePlural}`,
},
{ children: <SettingsDataModelNewFieldBreadcrumbDropDown /> },
]}
>
<SettingsPageContainer>
<SettingsObjectNewFieldSelector
objectSlug={objectSlug}
objectNamePlural={objectNamePlural}
excludedFieldTypes={excludedFieldTypes}
/>
</SettingsPageContainer>

7
packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
View File

@ -1,7 +1,6 @@
import { useDeleteOneObjectMetadataItem } from '@/object-metadata/hooks/useDeleteOneObjectMetadataItem';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
import { useCombinedGetTotalCount } from '@/object-record/multiple-objects/hooks/useCombinedGetTotalCount';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import {
@ -197,9 +196,9 @@ export const SettingsObjects = () => {
stroke={theme.icon.stroke.sm}
/>
}
link={`/settings/objects/${getObjectSlug(
objectSettingsItem.objectMetadataItem,
)}`}
link={`/settings/objects/${
objectSettingsItem.objectMetadataItem.namePlural
}`}
/>
),
)}

6
packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx
View File

@ -16,8 +16,8 @@ const meta: Meta<PageDecoratorArgs> = {
component: SettingsObjectDetailPage,
decorators: [PageDecorator],
args: {
routePath: '/settings/objects/:objectSlug',
routeParams: { ':objectSlug': 'companies' },
routePath: '/settings/objects/:objectNamePlural',
routeParams: { ':objectNamePlural': 'companies' },
},
parameters: {
msw: graphqlMocks,
@ -36,7 +36,7 @@ export const StandardObject: Story = {
export const CustomObject: Story = {
args: {
routeParams: { ':objectSlug': 'my-customs' },
routeParams: { ':objectNamePlural': 'myCustoms' },
},
};

8
packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectFieldEdit.stories.tsx
View File

@ -13,8 +13,8 @@ const meta: Meta<PageDecoratorArgs> = {
component: SettingsObjectFieldEdit,
decorators: [PageDecorator],
args: {
routePath: '/settings/objects/:objectSlug/:fieldSlug',
routeParams: { ':objectSlug': 'companies', ':fieldSlug': 'name' },
routePath: '/settings/objects/:objectNamePlural/:fieldName',
routeParams: { ':objectNamePlural': 'companies', ':fieldName': 'name' },
},
parameters: {
msw: graphqlMocks,
@ -30,8 +30,8 @@ export const StandardField: Story = {};
export const CustomField: Story = {
args: {
routeParams: {
':objectSlug': 'companies',
':fieldSlug': 'employees',
':objectNamePlural': 'companies',
':fieldName': 'employees',
},
},
};

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

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

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

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

6
packages/twenty-front/src/pages/settings/data-model/states/updatedObjectNamePluralState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createState } from '@ui/utilities/state/utils/createState';
export const updatedObjectNamePluralState = createState<string>({
key: 'updatedObjectNamePluralState',
defaultValue: '',
});

6
packages/twenty-front/src/pages/settings/data-model/states/updatedObjectSlugState.ts
View File

@ -1,6 +0,0 @@
import { createState } from '@ui/utilities/state/utils/createState';
export const updatedObjectSlugState = createState<string>({
key: 'updatedObjectSlugState',
defaultValue: '',
});