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

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

View File

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

View File

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