diff --git a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx index 14e5db70c..a3804093b 100644 --- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx @@ -1,12 +1,11 @@ -import { Handle, Position } from 'reactflow'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { Handle, Position } from 'reactflow'; import { useRecoilValue } from 'recoil'; import { useIcons } from 'twenty-ui'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; -import { capitalize } from '~/utils/string/capitalize'; type ObjectFieldRowProps = { field: FieldMetadataItem; @@ -41,9 +40,7 @@ export const ObjectFieldRow = ({ field }: ObjectFieldRowProps) => { return ( {Icon && } - - {capitalize(relatedObject?.namePlural ?? '')} - + {relatedObject?.labelPlural ?? ''} theme.spacing(2)}; + position: relative; + width: 100%; + padding: 0 ${({ theme }) => theme.spacing(2)}; +`; + +const StyledFieldName = styled.div` + color: ${({ theme }) => theme.font.color.primary}; +`; + +export const ObjectFieldRowWithoutRelation = ({ + field, +}: ObjectFieldRowWithoutRelationProps) => { + const { getIcon } = useIcons(); + const theme = useTheme(); + + const Icon = getIcon(field?.icon); + + return ( + + {Icon && } + {field.label} + + ); +}; diff --git a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx index ff80c147e..85c473b2f 100644 --- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx @@ -1,8 +1,8 @@ -import { Link } from 'react-router-dom'; -import { NodeProps } from 'reactflow'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconChevronDown, useIcons } from 'twenty-ui'; +import { Link } from 'react-router-dom'; +import { NodeProps } from 'reactflow'; +import { IconChevronDown, IconChevronUp, useIcons } from 'twenty-ui'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug'; @@ -13,7 +13,9 @@ import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLab import { FieldMetadataType } from '~/generated/graphql'; import { capitalize } from '~/utils/string/capitalize'; +import { ObjectFieldRowWithoutRelation } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation'; import '@reactflow/node-resizer/dist/style.css'; +import { useState } from 'react'; type SettingsDataModelOverviewObjectProps = NodeProps; @@ -66,10 +68,15 @@ const StyledCardRow = styled.div` const StyledCardRowOther = styled.div` align-items: center; + cursor: pointer; display: flex; height: 24px; padding: 0 ${({ theme }) => theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)}; + + &:hover { + background-color: ${({ theme }) => theme.background.tertiary}; + } `; const StyledCardRowText = styled.div``; @@ -95,6 +102,7 @@ export const SettingsDataModelOverviewObject = ({ }: SettingsDataModelOverviewObjectProps) => { const theme = useTheme(); const { getIcon } = useIcons(); + const [otherFieldsExpanded, setOtherFieldsExpanded] = useState(false); const { totalCount } = useFindManyRecords({ objectNameSingular: data.nameSingular, @@ -128,14 +136,30 @@ export const SettingsDataModelOverviewObject = ({ .filter((x) => x.type === FieldMetadataType.Relation) .map((field) => ( - + ))} {countNonRelation > 0 && ( - - - {countNonRelation} fields - + <> + setOtherFieldsExpanded(!otherFieldsExpanded)} + > + {otherFieldsExpanded ? ( + + ) : ( + + )} + {countNonRelation} fields + + {otherFieldsExpanded && + fields + .filter((x) => x.type !== FieldMetadataType.Relation) + .map((field) => ( + + + + ))} + )}