twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-22 03:17:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix 'Error in devtools while checking fields of object' (#8554)

Browse Source 
Fixes https://github.com/twentyhq/twenty/issues/8298

---------

Co-authored-by: Devessier <baptiste@devessier.fr>
This commit is contained in:
Félix Malfait 2024-11-18 14:59:50 +01:00 committed by GitHub
parent ba847292b6
commit d8626b1304
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 40 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,6 @@ import { IconComponent, IconTwentyStar } from 'twenty-ui';
import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType'; import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSettingsFieldTypeConfig'; import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSettingsFieldTypeConfig';
import { FieldMetadataType } from '~/generated-metadata/graphql';
type SettingsObjectFieldDataTypeProps = { type SettingsObjectFieldDataTypeProps = {
to?: string; to?: string;
@ -13,6 +12,7 @@ type SettingsObjectFieldDataTypeProps = {
label?: string; label?: string;
labelDetail?: string; labelDetail?: string;
value: SettingsFieldType; value: SettingsFieldType;
onClick?: (event: React.MouseEvent) => void;
}; };
const StyledDataType = styled.div<{ const StyledDataType = styled.div<{
@ -28,19 +28,16 @@ const StyledDataType = styled.div<{
height: 20px; height: 20px;
overflow: hidden; overflow: hidden;
text-decoration: none; text-decoration: none;
${({ to, theme }) =>
${({ to }) =>
to to
? css` ? css`
cursor: pointer; cursor: pointer;
`
: ''}
${({ value, theme }) =>
value === FieldMetadataType.Relation
? css`
color: ${theme.font.color.secondary}; color: ${theme.font.color.secondary};
text-decoration: underline; text-decoration: underline;
&:hover {
color: ${theme.font.color.primary};
}
` `
: ''} : ''}
`; `;
@ -60,6 +57,7 @@ export const SettingsObjectFieldDataType = ({
Icon: IconFromProps, Icon: IconFromProps,
label: labelFromProps, label: labelFromProps,
labelDetail, labelDetail,
onClick,
}: SettingsObjectFieldDataTypeProps) => { }: SettingsObjectFieldDataTypeProps) => {
const theme = useTheme(); const theme = useTheme();
@ -73,7 +71,12 @@ export const SettingsObjectFieldDataType = ({
`; `;
return ( return (
<StyledDataType as={to ? Link : 'div'} to={to} value={value}> <StyledDataType
as={to ? Link : 'div'}
to={to}
value={value}
onClick={onClick}
>
<StyledIcon size={theme.icon.size.sm} /> <StyledIcon size={theme.icon.size.sm} />
<StyledLabelContainer> <StyledLabelContainer>
{label} <StyledSpan>{labelDetail && `· ${labelDetail}`}</StyledSpan> {label} <StyledSpan>{labelDetail && `· ${labelDetail}`}</StyledSpan>

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

@ -27,6 +27,7 @@ import {
IconMinus, IconMinus,
IconPlus, IconPlus,
LightIconButton, LightIconButton,
UndecoratedLink,
isDefined, isDefined,
useIcons, useIcons,
} from 'twenty-ui'; } from 'twenty-ui';
@ -207,22 +208,29 @@ export const SettingsObjectFieldItemTableRow = ({
if (!isFieldTypeSupported) return null; if (!isFieldTypeSupported) return null;
const isRelatedObjectLinkable =
isDefined(relationObjectMetadataItem?.namePlural) &&
!relationObjectMetadataItem.isSystem;
return ( return (
<StyledObjectFieldTableRow <StyledObjectFieldTableRow
to={mode === 'view' ? linkToNavigate : undefined} onClick={mode === 'view' ? () => navigate(linkToNavigate) : undefined}
> >
<StyledNameTableCell> <UndecoratedLink to={linkToNavigate}>
{!!Icon && ( <StyledNameTableCell>
<Icon {!!Icon && (
style={{ minWidth: theme.icon.size.md }} <Icon
size={theme.icon.size.md} style={{ minWidth: theme.icon.size.md }}
stroke={theme.icon.stroke.sm} size={theme.icon.size.md}
/> stroke={theme.icon.stroke.sm}
)} />
<StyledNameLabel title={fieldMetadataItem.label}> )}
{fieldMetadataItem.label} <StyledNameLabel title={fieldMetadataItem.label}>
</StyledNameLabel> {fieldMetadataItem.label}
</StyledNameTableCell> </StyledNameLabel>
</StyledNameTableCell>
</UndecoratedLink>
<TableCell>{typeLabel}</TableCell> <TableCell>{typeLabel}</TableCell>
<TableCell> <TableCell>
<SettingsObjectFieldDataType <SettingsObjectFieldDataType
@ -237,12 +245,16 @@ export const SettingsObjectFieldItemTableRow = ({
fieldMetadataItem.settings?.type === 'percentage' ? '%' : undefined fieldMetadataItem.settings?.type === 'percentage' ? '%' : undefined
} }
to={ to={
relationObjectMetadataItem?.namePlural && isRelatedObjectLinkable
!relationObjectMetadataItem.isSystem
? `/settings/objects/${getObjectSlug(relationObjectMetadataItem)}` ? `/settings/objects/${getObjectSlug(relationObjectMetadataItem)}`
: undefined : undefined
} }
value={fieldType} value={fieldType}
onClick={(e) => {
if (isRelatedObjectLinkable) {
e.stopPropagation();
}
}}
/> />
</TableCell> </TableCell>
<StyledIconTableCell> <StyledIconTableCell>