feat: improve Relation field type tag (#2606)

* feat: improve Relation field type tag

Closes #2359

* refactor: code review - rename dataTypes to settingsFieldMetadataTypes

* refactor: code review - style Icon with styled

front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx

@@ -1,19 +1,23 @@
 import { ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { useRelationMetadata } from '@/object-metadata/hooks/useRelationMetadata';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 
-import { dataTypes } from '../../constants/dataTypes';
+import { relationTypes } from '../../constants/relationTypes';
+import { settingsFieldMetadataTypes } from '../../constants/settingsFieldMetadataTypes';
 
 import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
 
 type SettingsObjectFieldItemTableRowProps = {
   ActionIcon: ReactNode;
-  fieldItem: FieldMetadataItem;
+  fieldMetadataItem: FieldMetadataItem;
 };
 
 export const StyledObjectFieldTableRow = styled(TableRow)`
@@ -32,27 +36,51 @@ const StyledIconTableCell = styled(TableCell)`
 
 export const SettingsObjectFieldItemTableRow = ({
   ActionIcon,
-  fieldItem,
+  fieldMetadataItem: fieldMetadataItem,
 }: SettingsObjectFieldItemTableRowProps) => {
   const theme = useTheme();
-  const { Icon } = useLazyLoadIcon(fieldItem.icon ?? '');
+  const { Icon } = useLazyLoadIcon(fieldMetadataItem.icon ?? '');
+  const navigate = useNavigate();
 
   // TODO: parse with zod and merge types with FieldType (create a subset of FieldType for example)
-  const fieldDataTypeIsSupported = Object.keys(dataTypes).includes(
-    fieldItem.type,
-  );
+  const fieldDataTypeIsSupported =
+    fieldMetadataItem.type in settingsFieldMetadataTypes;
+
+  const { relationObjectMetadataItem, relationType } = useRelationMetadata({
+    fieldMetadataItem,
+  });
 
   if (!fieldDataTypeIsSupported) return null;
 
+  const RelationIcon = relationType
+    ? relationTypes[relationType].Icon
+    : undefined;
+
   return (
     <StyledObjectFieldTableRow>
       <StyledNameTableCell>
         {!!Icon && <Icon size={theme.icon.size.md} />}
-        {fieldItem.label}
+        {fieldMetadataItem.label}
       </StyledNameTableCell>
-      <TableCell>{fieldItem.isCustom ? 'Custom' : 'Standard'}</TableCell>
       <TableCell>
-        <SettingsObjectFieldDataType value={fieldItem.type} />
+        {fieldMetadataItem.isCustom ? 'Custom' : 'Standard'}
+      </TableCell>
+      <TableCell>
+        <SettingsObjectFieldDataType
+          Icon={RelationIcon}
+          label={relationObjectMetadataItem?.labelPlural}
+          onClick={
+            relationObjectMetadataItem?.namePlural
+              ? () =>
+                  navigate(
+                    `/settings/objects/${getObjectSlug(
+                      relationObjectMetadataItem,
+                    )}`,
+                  )
+              : undefined
+          }
+          value={fieldMetadataItem.type}
+        />
       </TableCell>
       <StyledIconTableCell>{ActionIcon}</StyledIconTableCell>
     </StyledObjectFieldTableRow>