refactor(front): rename objectSlug path params to objectNamePlural

twentyhq · Jan 7, 2025 · f8a41b3 · f8a41b3
1 parent c413ee1
commit f8a41b3
Show file tree

Hide file tree

Showing 17 changed files with 62 additions and 58 deletions.
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,7 +54,7 @@ export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
   const viewGroupSettingsUrl = getSettingsPagePath(
     SettingsPath.ObjectFieldEdit,
     {
-      objectSlug: objectNamePlural,
+      objectNamePlural,
       fieldSlug: 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/...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/...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
@@ -27,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
@@ -56,7 +56,9 @@ const StyledFormSection = styled(Section)`
 export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
   const navigate = useNavigate();
   const { enqueueSnackBar } = useSnackBar();
-  const setUpdatedObjectSlugState = useSetRecoilState(updatedObjectSlugState);
+  const setUpdatedObjectNamePluralState = useSetRecoilState(
+    updatedObjectNamePluralState,
+  );
 
   const { updateOneObjectMetadataItem } = useUpdateOneObjectMetadataItem();
   const { lastVisitedObjectMetadataItemId } =
@@ -131,7 +133,7 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
       const objectNamePluralForRedirection =
         updatePayload.namePlural ?? objectMetadataItem.namePlural;
 
-      setUpdatedObjectSlugState(objectNamePluralForRedirection);
+      setUpdatedObjectNamePluralState(objectNamePluralForRedirection);
 
       await updateOneObjectMetadataItem({
         idToUpdate: objectMetadataItem.id,

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/:fieldSlug',
   NewObject = 'objects/new',
   NewServerlessFunction = 'functions/new',
   ServerlessFunctionDetail = 'functions/:serverlessFunctionId',

diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx
@@ -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 { objectNamePlural = '' } = useParams();
   const { findActiveObjectMetadataItemByNamePlural } =
     useFilteredObjectMetadataItems();
 
-  const [updatedObjectSlug, setUpdatedObjectSlug] = useRecoilState(
-    updatedObjectSlugState,
+  const [updatedObjectNamePlural, setUpdatedObjectNamePlural] = useRecoilState(
+    updatedObjectNamePluralState,
   );
   const objectMetadataItem =
-    findActiveObjectMetadataItemByNamePlural(objectSlug) ??
-    findActiveObjectMetadataItemByNamePlural(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 <></>;

diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
@@ -47,11 +47,12 @@ export const SettingsObjectFieldEdit = () => {
   const navigate = useNavigate();
   const { enqueueSnackBar } = useSnackBar();
 
-  const { objectSlug = '', fieldSlug = '' } = useParams();
+  const { objectNamePlural = '', fieldSlug = '' } = useParams();
   const { findObjectMetadataItemByNamePlural } =
     useFilteredObjectMetadataItems();
 
-  const objectMetadataItem = findObjectMetadataItemByNamePlural(objectSlug);
+  const objectMetadataItem =
+    findObjectMetadataItemByNamePlural(objectNamePlural);
 
   const { deactivateMetadataField, activateMetadataField } =
     useFieldMetadataItem();
@@ -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)}
             />
           }

diff --git a/.../src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx b/.../src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx
@@ -41,7 +41,7 @@ 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) ||
@@ -51,7 +51,7 @@ export const SettingsObjectNewFieldConfigure = () => {
   const { findActiveObjectMetadataItemByNamePlural } =
     useFilteredObjectMetadataItems();
   const activeObjectMetadataItem =
-    findActiveObjectMetadataItemByNamePlural(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)}

diff --git a/...ont/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect.tsx b/...ont/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect.tsx
@@ -30,11 +30,11 @@ export type SettingsDataModelFieldTypeFormValues = z.infer<
 
 export const SettingsObjectNewFieldSelect = () => {
   const navigate = useNavigate();
-  const { objectSlug = '' } = useParams();
+  const { objectNamePlural = '' } = useParams();
   const { findActiveObjectMetadataItemByNamePlural } =
     useFilteredObjectMetadataItems();
   const activeObjectMetadataItem =
-    findActiveObjectMetadataItemByNamePlural(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>

diff --git a/...s/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx b/...s/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx
@@ -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': 'my-customs' },
   },
 };
 

diff --git a/...wenty-front/src/pages/settings/data-model/__stories__/SettingsObjectFieldEdit.stories.tsx b/...wenty-front/src/pages/settings/data-model/__stories__/SettingsObjectFieldEdit.stories.tsx
@@ -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/:fieldSlug',
+    routeParams: { ':objectNamePlural': 'companies', ':fieldSlug': 'name' },
   },
   parameters: {
     msw: graphqlMocks,
@@ -30,7 +30,7 @@ export const StandardField: Story = {};
 export const CustomField: Story = {
   args: {
     routeParams: {
-      ':objectSlug': 'companies',
+      ':objectNamePlural': 'companies',
       ':fieldSlug': 'employees',
     },
   },

diff --git a/...data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldConfigure.stories.tsx b/...data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldConfigure.stories.tsx
@@ -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,

diff --git a/...gs/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldSelect.stories.tsx b/...gs/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldSelect.stories.tsx
@@ -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,

diff --git a/packages/twenty-front/src/pages/settings/data-model/states/updatedObjectNamePluralState.ts b/packages/twenty-front/src/pages/settings/data-model/states/updatedObjectNamePluralState.ts
@@ -0,0 +1,6 @@
+import { createState } from '@ui/utilities/state/utils/createState';
+
+export const updatedObjectNamePluralState = createState<string>({
+  key: 'updatedObjectNamePluralState',
+  defaultValue: '',
+});
diff --git a/packages/twenty-front/src/pages/settings/data-model/states/updatedObjectSlugState.ts b/packages/twenty-front/src/pages/settings/data-model/states/updatedObjectSlugState.ts