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