feature: relationships list item component

opendatadiscovery · Feb 16, 2024 · 0aa53ba · 0aa53ba
1 parent 7ffce8a
commit 0aa53ba
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 12 deletions.
diff --git a/odd-platform-ui/src/components/DataModelling/Relationships.tsx b/odd-platform-ui/src/components/DataModelling/Relationships.tsx
@@ -47,11 +47,11 @@ const Relationships = () => {
           <Table.Cell $flex='1 0 33%'>
             <Typography variant='caption'>Name</Typography>
           </Table.Cell>
-          <Table.Cell $flex='1 0 19%'>
+          <Table.Cell $flex='1 0 16%'>
             <Typography variant='caption'>Type</Typography>
           </Table.Cell>
-          <Table.Cell $flex='1 0 16%'>
-            <Typography variant='caption'>Namespace</Typography>
+          <Table.Cell $flex='1 0 19%'>
+            <Typography variant='caption'>Namespace, Datasource</Typography>
           </Table.Cell>
           <Table.Cell $flex='1 0 16%'>
             <Typography variant='caption'>Source</Typography>

diff --git a/odd-platform-ui/src/components/DataModelling/Relationships/RelationshipsListItem.tsx b/odd-platform-ui/src/components/DataModelling/Relationships/RelationshipsListItem.tsx
@@ -1,21 +1,26 @@
-import type { DataEntity, DataEntityRelationship } from 'generated-sources';
+import type {
+  DataEntity,
+  DataEntityRelationship,
+  DataSourceSafe,
+} from 'generated-sources';
 import * as Table from 'components/shared/elements/StyledComponents/Table';
 import { Typography } from '@mui/material';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { dataEntityDetailsPath } from 'routes/dataEntitiesRoutes';
-import { EntityTypeItem } from 'components/shared/elements';
+import { DatasourceLogo, EntityTypeItem } from 'components/shared/elements';
+import * as S from 'components/shared/styled-components';
 
 interface Props {
   item: DataEntityRelationship;
 }
 
-interface DatasetCellProps {
+interface DatasetInfoProps {
   dataEntityId?: DataEntity['id'];
   oddrn: DataEntity['oddrn'];
 }
 
-const DatasetCell = ({ dataEntityId, oddrn }: DatasetCellProps) =>
+const DatasetInfo = ({ dataEntityId, oddrn }: DatasetInfoProps) =>
   dataEntityId ? (
     <Link to={dataEntityDetailsPath(dataEntityId)}>
       <Typography variant='caption' color='button.link.normal.color' fontWeight={500}>
@@ -26,6 +31,40 @@ const DatasetCell = ({ dataEntityId, oddrn }: DatasetCellProps) =>
     <Typography variant='body1'>{oddrn}</Typography>
   );
 
+interface DataSourceInfoProps {
+  dataSource: DataSourceSafe;
+}
+
+const DataSourceInfo = ({ dataSource }: DataSourceInfoProps) => {
+  const { namespace, oddrn, name } = dataSource;
+  return (
+    <S.Section $flexDirection='column' $gap={0}>
+      {namespace?.name ? (
+        <Typography variant='body1' title={namespace.name} noWrap>
+          {namespace.name}
+        </Typography>
+      ) : (
+        <Typography variant='subtitle2'>not in any namespace</Typography>
+      )}
+      {name ? (
+        <S.Section>
+          <DatasourceLogo
+            width={24}
+            padding={0}
+            backgroundColor='transparent'
+            name={oddrn}
+          />
+          <Typography variant='body1' title={name} noWrap>
+            {name}
+          </Typography>
+        </S.Section>
+      ) : (
+        <Typography variant='subtitle2'>manually created</Typography>
+      )}
+    </S.Section>
+  );
+};
+
 const RelationshipsListItem = ({ item }: Props) => (
   <Table.RowContainer>
     <Table.Cell $flex='1 0 33%'>
@@ -35,20 +74,20 @@ const RelationshipsListItem = ({ item }: Props) => (
         </Typography>
       </Link>
     </Table.Cell>
-    <Table.Cell $flex='1 0 19%'>
+    <Table.Cell $flex='1 0 16%'>
       <EntityTypeItem entityTypeName={item.type} />
     </Table.Cell>
-    <Table.Cell $flex='1 0 16%'>
-      <Typography variant='body1'>Namespace</Typography>
+    <Table.Cell $flex='1 0 19%'>
+      <DataSourceInfo dataSource={item.dataSource} />
     </Table.Cell>
     <Table.Cell $flex='1 0 16%'>
-      <DatasetCell
+      <DatasetInfo
         dataEntityId={item.sourceDataEntityId}
         oddrn={item.sourceDatasetOddrn}
       />
     </Table.Cell>
     <Table.Cell $flex='1 0 16%'>
-      <DatasetCell
+      <DatasetInfo
         dataEntityId={item.targetDataEntityId}
         oddrn={item.targetDatasetOddrn}
       />