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

4
packages/twenty-front/src/modules/navigation/hooks/useLastVisitedObjectMetadataItem.ts
View File

@ -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);

9
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useFilteredObjectMetadataItems.test.tsx
View File

@ -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');
});

15
packages/twenty-front/src/modules/object-metadata/hooks/useFilteredObjectMetadataItems.ts
View File

@ -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,
};
};

8
packages/twenty-front/src/modules/object-metadata/utils/__tests__/getFieldSlug.test.ts
View File

@ -1,8 +0,0 @@
import { getFieldSlug } from '@/object-metadata/utils/getFieldSlug';
describe('getFieldSlug', () => {
it('should work as expected', () => {
const res = getFieldSlug({ label: 'Pipeline Step' });
expect(res).toBe('pipeline-step');
});
});

13
packages/twenty-front/src/modules/object-metadata/utils/__tests__/getObjectSlug.test.ts
View File

@ -1,13 +0,0 @@
import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
describe('getObjectSlug', () => {
it('should work as expected', () => {
const objectMetadataItem = generatedMockObjectMetadataItems.find(
(item) => item.nameSingular === 'person',
)!;
const res = getObjectSlug(objectMetadataItem);
expect(res).toBe('people');
});
});

6
packages/twenty-front/src/modules/object-metadata/utils/getFieldSlug.ts
View File

@ -1,6 +0,0 @@
import toKebabCase from 'lodash.kebabcase';
import { Field } from '~/generated-metadata/graphql';
export const getFieldSlug = (metadataField: Pick<Field, 'label'>) =>
toKebabCase(metadataField.label);

7
packages/twenty-front/src/modules/object-metadata/utils/getObjectSlug.ts
View File

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

2
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx
View File

@ -35,7 +35,7 @@ export const ObjectOptionsDropdownHiddenFieldsContent = () => {
});
const settingsUrl = getSettingsPagePath(SettingsPath.ObjectDetail, {
objectSlug: objectNamePlural,
objectNamePlural,
});
const { handleColumnVisibilityChange, hiddenTableColumns } =

4
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx
View File

@ -54,8 +54,8 @@ export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
const viewGroupSettingsUrl = getSettingsPagePath(
SettingsPath.ObjectFieldEdit,
{
objectSlug: objectNamePlural,
fieldSlug: recordGroupFieldMetadata?.name ?? '',
objectNamePlural,
fieldName: recordGroupFieldMetadata?.name ?? '',
},
);

2
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx
View File

@ -69,7 +69,7 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
const newSelectFieldSettingsUrl = getSettingsPagePath(
SettingsPath.ObjectNewFieldConfigure,
{
objectSlug: objectNamePlural,
objectNamePlural,
},
{
fieldType: FieldMetadataType.Select,

4
packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts
View File

@ -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);
}, [

3
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx
View File

@ -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);
}}

6
packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
View File

@ -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();

6
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
View File

@ -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);

17
packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx
View File

@ -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>

6
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
View File

@ -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}

15
packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx
View File

@ -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, {

8
packages/twenty-front/src/modules/types/SettingsPath.ts
View File

@ -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',

7
packages/twenty-front/src/modules/views/view-picker/hooks/useGetAvailableFieldsForKanban.ts
View File

@ -3,7 +3,6 @@ import { useLocation, useNavigate } from 'react-router-dom';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { viewObjectMetadataIdComponentState } from '@/views/states/viewObjectMetadataIdComponentState';
@ -36,9 +35,9 @@ export const useGetAvailableFieldsForKanban = () => {
if (isDefined(objectMetadataItem?.namePlural)) {
navigate(
`/settings/objects/${getObjectSlug(
objectMetadataItem,
)}/new-field/configure?fieldType=${FieldMetadataType.Select}`,
`/settings/objects/${
objectMetadataItem.namePlural
}/new-field/configure?fieldType=${FieldMetadataType.Select}`,
);
} else {
navigate(`/settings/objects`);

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: '',
});