[REFACTOR][FRONT]: Remove objectMetadata and fieldMetadata sluggifica…

…tion (#9441) # Introduction For motivations and context please have a look to #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 <[email protected]>
twentyhq · Jan 8, 2025 · aa0d854 · aa0d854
1 parent 00a9646
commit aa0d854
Show file tree

Hide file tree

Showing 31 changed files with 98 additions and 156 deletions.
diff --git a/packages/twenty-front/src/modules/navigation/hooks/useLastVisitedObjectMetadataItem.ts b/packages/twenty-front/src/modules/navigation/hooks/useLastVisitedObjectMetadataItem.ts
@@ -20,7 +20,7 @@ export const useLastVisitedObjectMetadataItem = () => {
     useRecoilState(lastVisitedObjectMetadataItemIdState);
 
   const {
-    findActiveObjectMetadataItemBySlug,
+    findActiveObjectMetadataItemByNamePlural,
     alphaSortedActiveObjectMetadataItems,
   } = useFilteredObjectMetadataItems();
 
@@ -51,7 +51,7 @@ export const useLastVisitedObjectMetadataItem = () => {
 
   const setLastVisitedObjectMetadataItem = (objectNamePlural: string) => {
     const fallbackObjectMetadataItem =
-      findActiveObjectMetadataItemBySlug(objectNamePlural);
+      findActiveObjectMetadataItemByNamePlural(objectNamePlural);
 
     if (isDefined(fallbackObjectMetadataItem)) {
       setLastVisitedObjectMetadataItemId(fallbackObjectMetadataItem.id);

diff --git a/...front/src/modules/object-metadata/hooks/__tests__/useFilteredObjectMetadataItems.test.tsx b/...front/src/modules/object-metadata/hooks/__tests__/useFilteredObjectMetadataItems.test.tsx
@@ -35,7 +35,7 @@ const Wrapper = ({ children }: { children: ReactNode }) => (
 );
 
 describe('useFilteredObjectMetadataItems', () => {
-  it('should findActiveObjectMetadataItemBySlug', async () => {
+  it('should findActiveObjectMetadataItemByNamePlural', async () => {
     const { result } = renderHook(
       () => {
         const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
@@ -49,13 +49,14 @@ describe('useFilteredObjectMetadataItems', () => {
     );
 
     act(() => {
-      const res = result.current.findActiveObjectMetadataItemBySlug('people');
+      const res =
+        result.current.findActiveObjectMetadataItemByNamePlural('people');
       expect(res).toBeDefined();
       expect(res?.namePlural).toBe('people');
     });
   });
 
-  it('should findObjectMetadataItemBySlug', async () => {
+  it('should findObjectMetadataItemByNamePlural', async () => {
     const { result } = renderHook(
       () => {
         const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
@@ -69,7 +70,7 @@ describe('useFilteredObjectMetadataItems', () => {
     );
 
     act(() => {
-      const res = result.current.findObjectMetadataItemBySlug('people');
+      const res = result.current.findObjectMetadataItemByNamePlural('people');
       expect(res).toBeDefined();
       expect(res?.namePlural).toBe('people');
     });

diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/useFilteredObjectMetadataItems.ts b/packages/twenty-front/src/modules/object-metadata/hooks/useFilteredObjectMetadataItems.ts
@@ -2,8 +2,6 @@ import { useRecoilValue } from 'recoil';
 
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 
-import { getObjectSlug } from '../utils/getObjectSlug';
-
 export const useFilteredObjectMetadataItems = () => {
   const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
 
@@ -27,17 +25,6 @@ export const useFilteredObjectMetadataItems = () => {
     ({ isActive, isSystem }) => !isActive && !isSystem,
   );
 
-  const findObjectMetadataItemBySlug = (slug: string) =>
-    objectMetadataItems.find(
-      (objectMetadataItem) => getObjectSlug(objectMetadataItem) === slug,
-    );
-
-  const findActiveObjectMetadataItemBySlug = (slug: string) =>
-    activeObjectMetadataItems.find(
-      (activeObjectMetadataItem) =>
-        getObjectSlug(activeObjectMetadataItem) === slug,
-    );
-
   const findActiveObjectMetadataItemByNamePlural = (namePlural: string) =>
     activeObjectMetadataItems.find(
       (activeObjectMetadataItem) =>
@@ -56,13 +43,11 @@ export const useFilteredObjectMetadataItems = () => {
 
   return {
     activeObjectMetadataItems,
-    findActiveObjectMetadataItemBySlug,
     findObjectMetadataItemById,
     findObjectMetadataItemByNamePlural,
     findActiveObjectMetadataItemByNamePlural,
     inactiveObjectMetadataItems,
     objectMetadataItems,
-    findObjectMetadataItemBySlug,
     alphaSortedActiveObjectMetadataItems,
   };
 };
diff --git a/packages/twenty-front/src/modules/object-metadata/utils/__tests__/getFieldSlug.test.ts b/packages/twenty-front/src/modules/object-metadata/utils/__tests__/getFieldSlug.test.ts
diff --git a/packages/twenty-front/src/modules/object-metadata/utils/__tests__/getObjectSlug.test.ts b/packages/twenty-front/src/modules/object-metadata/utils/__tests__/getObjectSlug.test.ts
diff --git a/packages/twenty-front/src/modules/object-metadata/utils/getFieldSlug.ts b/packages/twenty-front/src/modules/object-metadata/utils/getFieldSlug.ts
diff --git a/packages/twenty-front/src/modules/object-metadata/utils/getObjectSlug.ts b/packages/twenty-front/src/modules/object-metadata/utils/getObjectSlug.ts
diff --git a/...ct-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx b/...ct-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx
@@ -35,7 +35,7 @@ export const ObjectOptionsDropdownHiddenFieldsContent = () => {
   });
 
   const settingsUrl = getSettingsPagePath(SettingsPath.ObjectDetail, {
-    objectSlug: objectNamePlural,
+    objectNamePlural,
   });
 
   const { handleColumnVisibilityChange, hiddenTableColumns } =

diff --git a/...ord/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx b/...ord/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx
@@ -54,8 +54,8 @@ export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
   const viewGroupSettingsUrl = getSettingsPagePath(
     SettingsPath.ObjectFieldEdit,
     {
-      objectSlug: objectNamePlural,
-      fieldSlug: recordGroupFieldMetadata?.name ?? '',
+      objectNamePlural,
+      fieldName: recordGroupFieldMetadata?.name ?? '',
     },
   );
 

diff --git a/...cord/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx b/...cord/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx
@@ -69,7 +69,7 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
   const newSelectFieldSettingsUrl = getSettingsPagePath(
     SettingsPath.ObjectNewFieldConfigure,
     {
-      objectSlug: objectNamePlural,
+      objectNamePlural,
     },
     {
       fieldType: FieldMetadataType.Select,

diff --git a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts
@@ -1,6 +1,4 @@
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
-import { getFieldSlug } from '@/object-metadata/utils/getFieldSlug';
-import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
 import { useRecordGroupVisibility } from '@/object-record/record-group/hooks/useRecordGroupVisibility';
 import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
@@ -55,7 +53,7 @@ export const useRecordGroupActions = ({
       throw new Error('recordGroupFieldMetadata is not a non-empty string');
     }
 
-    const settingsPath = `/settings/objects/${getObjectSlug(objectMetadataItem)}/${getFieldSlug(recordGroupFieldMetadata)}`;
+    const settingsPath = `/settings/objects/${objectMetadataItem.namePlural}/${recordGroupFieldMetadata.name}`;
 
     navigate(settingsPath);
   }, [

diff --git a/...record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx b/...record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx
@@ -3,7 +3,6 @@ import { useLocation } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { IconSettings, MenuItem, UndecoratedLink, useIcons } from 'twenty-ui';
 
-import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
@@ -56,7 +55,7 @@ export const RecordTableHeaderPlusButtonContent = () => {
       <DropdownMenuItemsContainer scrollable={false}>
         <UndecoratedLink
           fullWidth
-          to={`/settings/objects/${getObjectSlug(objectMetadataItem)}`}
+          to={`/settings/objects/${objectMetadataItem.namePlural}`}
           onClick={() => {
             setNavigationMemorizedUrl(location.pathname + location.search);
           }}

diff --git a/...rc/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx b/...rc/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
@@ -68,7 +68,7 @@ export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
   const { closeDropdown } = useDropdown(dropdownId);
   const navigate = useNavigate();
   const location = useLocation();
-  const { objectSlug = '' } = useParams();
+  const { objectNamePlural = '' } = useParams();
   const [searchParams] = useSearchParams();
   const theme = useTheme();
 
@@ -78,11 +78,11 @@ export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
   const handleClick = (step: 'select' | 'configure') => {
     if (step === 'configure' && isDefined(fieldType)) {
       navigate(
-        `/settings/objects/${objectSlug}/new-field/configure?fieldType=${fieldType}`,
+        `/settings/objects/${objectNamePlural}/new-field/configure?fieldType=${fieldType}`,
       );
     } else {
       navigate(
-        `/settings/objects/${objectSlug}/new-field/select${fieldType ? `?fieldType=${fieldType}` : ''}`,
+        `/settings/objects/${objectNamePlural}/new-field/select${fieldType ? `?fieldType=${fieldType}` : ''}`,
       );
     }
     closeDropdown();

diff --git a/...rc/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx b/...rc/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
@@ -26,7 +26,7 @@ type SettingsObjectNewFieldSelectorProps = {
     'defaultValue' | 'options' | 'type'
   >;
 
-  objectSlug: string;
+  objectNamePlural: string;
 };
 
 const StyledTypeSelectContainer = styled.div`
@@ -58,7 +58,7 @@ const StyledSearchInput = styled(TextInput)`
 export const SettingsObjectNewFieldSelector = ({
   excludedFieldTypes = [],
   fieldMetadataItem,
-  objectSlug,
+  objectNamePlural,
 }: SettingsObjectNewFieldSelectorProps) => {
   const theme = useTheme();
   const { control, setValue } =
@@ -128,7 +128,7 @@ export const SettingsObjectNewFieldSelector = ({
                     .map(([key, config]) => (
                       <StyledCardContainer key={key}>
                         <UndecoratedLink
-                          to={`/settings/objects/${objectSlug}/new-field/configure?fieldType=${key}`}
+                          to={`/settings/objects/${objectNamePlural}/new-field/configure?fieldType=${key}`}
                           fullWidth
                           onClick={() => {
                             setValue('type', key as SettingsFieldType);

diff --git a/...modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx b/...modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx
@@ -5,7 +5,6 @@ import { Link } from 'react-router-dom';
 import { IconChevronDown, IconChevronUp, useIcons } from 'twenty-ui';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { ObjectFieldRow } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewField';
 import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/components/SettingsDataModelObjectTypeTag';
@@ -100,36 +99,38 @@ const StyledObjectLink = styled(Link)`
 `;
 
 export const SettingsDataModelOverviewObject = ({
-  data,
+  data: objectMetadataItem,
 }: SettingsDataModelOverviewObjectProps) => {
   const theme = useTheme();
   const { getIcon } = useIcons();
   const [otherFieldsExpanded, setOtherFieldsExpanded] = useState(false);
 
   const { totalCount } = useFindManyRecords({
-    objectNameSingular: data.nameSingular,
+    objectNameSingular: objectMetadataItem.nameSingular,
   });
 
-  const fields = data.fields.filter((x) => !x.isSystem);
+  const fields = objectMetadataItem.fields.filter((x) => !x.isSystem);
 
   const countNonRelation = fields.filter(
     (x) => x.type !== FieldMetadataType.Relation,
   ).length;
 
-  const Icon = getIcon(data.icon);
+  const Icon = getIcon(objectMetadataItem.icon);
 
   return (
     <StyledNode>
       <StyledHeader>
         <StyledObjectName onMouseEnter={() => {}} onMouseLeave={() => {}}>
-          <StyledObjectLink to={`/settings/objects/${getObjectSlug(data)}`}>
+          <StyledObjectLink
+            to={`/settings/objects/${objectMetadataItem.namePlural}`}
+          >
             {Icon && <Icon size={theme.icon.size.md} />}
-            {capitalize(data.namePlural)}
+            {capitalize(objectMetadataItem.namePlural)}
           </StyledObjectLink>
           <StyledObjectInstanceCount> · {totalCount}</StyledObjectInstanceCount>
         </StyledObjectName>
         <SettingsDataModelObjectTypeTag
-          objectTypeLabel={getObjectTypeLabel(data)}
+          objectTypeLabel={getObjectTypeLabel(objectMetadataItem)}
         ></SettingsDataModelObjectTypeTag>
       </StyledHeader>
 

diff --git a/...modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/...modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
@@ -4,8 +4,6 @@ import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMe
 import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { getFieldSlug } from '@/object-metadata/utils/getFieldSlug';
-import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
 import { useDeleteRecordFromCache } from '@/object-record/cache/hooks/useDeleteRecordFromCache';
 import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
@@ -110,7 +108,7 @@ export const SettingsObjectFieldItemTableRow = ({
     !isLabelIdentifier &&
     LABEL_IDENTIFIER_FIELD_METADATA_TYPES.includes(fieldMetadataItem.type);
 
-  const linkToNavigate = `./${getFieldSlug(fieldMetadataItem)}`;
+  const linkToNavigate = `./${fieldMetadataItem.name}`;
 
   const {
     activateMetadataField,
@@ -246,7 +244,7 @@ export const SettingsObjectFieldItemTableRow = ({
           }
           to={
             isRelatedObjectLinkable
-              ? `/settings/objects/${getObjectSlug(relationObjectMetadataItem)}`
+              ? `/settings/objects/${relationObjectMetadataItem.namePlural}`
               : undefined
           }
           value={fieldType}

diff --git a/...y-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx b/...y-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx
@@ -9,7 +9,6 @@ import { z, ZodError } from 'zod';
 import { useLastVisitedObjectMetadataItem } from '@/navigation/hooks/useLastVisitedObjectMetadataItem';
 import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
 import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
-import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import {
   IS_LABEL_SYNCED_WITH_NAME_LABEL,
@@ -28,7 +27,7 @@ import styled from '@emotion/styled';
 import isEmpty from 'lodash.isempty';
 import pick from 'lodash.pick';
 import { useSetRecoilState } from 'recoil';
-import { updatedObjectSlugState } from '~/pages/settings/data-model/states/updatedObjectSlugState';
+import { updatedObjectNamePluralState } from '~/pages/settings/data-model/states/updatedObjectNamePluralState';
 import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
 
 const objectEditFormSchema = z
@@ -57,7 +56,9 @@ const StyledFormSection = styled(Section)`
 export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
   const navigate = useNavigate();
   const { enqueueSnackBar } = useSnackBar();
-  const setUpdatedObjectSlugState = useSetRecoilState(updatedObjectSlugState);
+  const setUpdatedObjectNamePlural = useSetRecoilState(
+    updatedObjectNamePluralState,
+  );
 
   const { updateOneObjectMetadataItem } = useUpdateOneObjectMetadataItem();
   const { lastVisitedObjectMetadataItemId } =
@@ -131,12 +132,8 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
       const updatePayload = getUpdatePayload(formValues);
       const objectNamePluralForRedirection =
         updatePayload.namePlural ?? objectMetadataItem.namePlural;
-      const objectSlug = getObjectSlug({
-        ...updatePayload,
-        namePlural: objectNamePluralForRedirection,
-      });
 
-      setUpdatedObjectSlugState(objectSlug);
+      setUpdatedObjectNamePlural(objectNamePluralForRedirection);
 
       await updateOneObjectMetadataItem({
         idToUpdate: objectMetadataItem.id,
@@ -154,7 +151,7 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
         );
       }
 
-      navigate(`${settingsObjectsPagePath}/${objectSlug}`);
+      navigate(`${settingsObjectsPagePath}/${objectNamePluralForRedirection}`);
     } catch (error) {
       if (error instanceof ZodError) {
         enqueueSnackBar(error.issues[0].message, {

diff --git a/packages/twenty-front/src/modules/types/SettingsPath.ts b/packages/twenty-front/src/modules/types/SettingsPath.ts
@@ -10,10 +10,10 @@ export enum SettingsPath {
   Billing = 'billing',
   Objects = 'objects',
   ObjectOverview = 'objects/overview',
-  ObjectDetail = 'objects/:objectSlug',
-  ObjectNewFieldSelect = 'objects/:objectSlug/new-field/select',
-  ObjectNewFieldConfigure = 'objects/:objectSlug/new-field/configure',
-  ObjectFieldEdit = 'objects/:objectSlug/:fieldSlug',
+  ObjectDetail = 'objects/:objectNamePlural',
+  ObjectNewFieldSelect = 'objects/:objectNamePlural/new-field/select',
+  ObjectNewFieldConfigure = 'objects/:objectNamePlural/new-field/configure',
+  ObjectFieldEdit = 'objects/:objectNamePlural/:fieldName',
   NewObject = 'objects/new',
   NewServerlessFunction = 'functions/new',
   ServerlessFunctionDetail = 'functions/:serverlessFunctionId',