From e2d68f1ce32441c6b584c82701b98dd3d15d2caa Mon Sep 17 00:00:00 2001
From: Louis Bichard <contact@louisjohnbichard.co.uk>
Date: Tue, 8 Jun 2021 18:39:40 +0100
Subject: [PATCH] fix: truncate long system names

Signed-off-by: Louis Bichard <contact@louisjohnbichard.co.uk>
---
 .changeset/flat-chefs-push.md                 |  5 ++
 .../SystemDiagramCard.test.tsx                | 85 ++++++++++++++++---
 .../SystemDiagramCard/SystemDiagramCard.tsx   |  7 +-
 3 files changed, 83 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/flat-chefs-push.md

diff --git a/.changeset/flat-chefs-push.md b/.changeset/flat-chefs-push.md
new file mode 100644
index 0000000000..98ee448dba
--- /dev/null
+++ b/.changeset/flat-chefs-push.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Truncate long entity names on the system diagram
diff --git a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.test.tsx b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.test.tsx
index 337e9d12b6..412cc56309 100644
--- a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.test.tsx
+++ b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.test.tsx
@@ -48,8 +48,8 @@ describe('<SystemDiagramCard />', () => {
       apiVersion: 'v1',
       kind: 'System',
       metadata: {
-        name: 'my-system2',
-        namespace: 'my-namespace2',
+        name: 'system2',
+        namespace: 'namespace2',
       },
       relations: [],
     };
@@ -68,8 +68,8 @@ describe('<SystemDiagramCard />', () => {
     );
 
     expect(queryByText(/System Diagram/)).toBeInTheDocument();
-    expect(queryByText(/my-namespace2\/my-system2/)).toBeInTheDocument();
-    expect(queryByText(/my-namespace\/my-entity/)).not.toBeInTheDocument();
+    expect(queryByText(/namespace2\/system2/)).toBeInTheDocument();
+    expect(queryByText(/namespace\/entity/)).not.toBeInTheDocument();
   });
 
   it('shows related systems', async () => {
@@ -81,13 +81,13 @@ describe('<SystemDiagramCard />', () => {
               apiVersion: 'backstage.io/v1alpha1',
               kind: 'Component',
               metadata: {
-                name: 'my-entity',
-                namespace: 'my-namespace',
+                name: 'entity',
+                namespace: 'namespace',
               },
               spec: {
                 owner: 'not-tools@example.com',
                 type: 'service',
-                system: 'my-system',
+                system: 'system',
               },
             },
           ] as Entity[],
@@ -98,15 +98,15 @@ describe('<SystemDiagramCard />', () => {
       apiVersion: 'v1',
       kind: 'System',
       metadata: {
-        name: 'my-system',
-        namespace: 'my-namespace',
+        name: 'system',
+        namespace: 'namespace',
       },
       relations: [
         {
           target: {
             kind: 'Domain',
-            namespace: 'my-namespace',
-            name: 'my-domain',
+            namespace: 'namespace',
+            name: 'domain',
           },
           type: RELATION_PART_OF,
         },
@@ -127,7 +127,66 @@ describe('<SystemDiagramCard />', () => {
     );
 
     expect(getByText('System Diagram')).toBeInTheDocument();
-    expect(getByText('my-namespace/my-system')).toBeInTheDocument();
-    expect(getByText('my-namespace/my-entity')).toBeInTheDocument();
+    expect(getByText('namespace/system')).toBeInTheDocument();
+    expect(getByText('namespace/entity')).toBeInTheDocument();
+  });
+
+  it('should truncate long domains, systems or entities', async () => {
+    const catalogApi: Partial<CatalogApi> = {
+      getEntities: () =>
+        Promise.resolve({
+          items: [
+            {
+              apiVersion: 'backstage.io/v1alpha1',
+              kind: 'Component',
+              metadata: {
+                name: 'alongentitythatshouldgettruncated',
+                namespace: 'namespace',
+              },
+              spec: {
+                owner: 'not-tools@example.com',
+                type: 'service',
+                system: 'system',
+              },
+            },
+          ] as Entity[],
+        }),
+    };
+
+    const entity: Entity = {
+      apiVersion: 'v1',
+      kind: 'System',
+      metadata: {
+        name: 'alongsystemthatshouldgettruncated',
+        namespace: 'namespace',
+      },
+      relations: [
+        {
+          target: {
+            kind: 'Domain',
+            namespace: 'namespace',
+            name: 'alongdomainthatshouldgettruncated',
+          },
+          type: RELATION_PART_OF,
+        },
+      ],
+    };
+
+    const { getByText } = await renderInTestApp(
+      <ApiProvider apis={ApiRegistry.from([[catalogApiRef, catalogApi]])}>
+        <EntityProvider entity={entity}>
+          <SystemDiagramCard />
+        </EntityProvider>
+      </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
+    );
+
+    expect(getByText('namespace/alongdomai...')).toBeInTheDocument();
+    expect(getByText('namespace/alongsyste...')).toBeInTheDocument();
+    expect(getByText('namespace/alongentit...')).toBeInTheDocument();
   });
 });
diff --git a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
index 5fd32a6298..fab8163317 100644
--- a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
+++ b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
@@ -89,6 +89,11 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps<any>) {
   const catalogEntityRoute = useRouteRef(entityRouteRef);
   const kind = props.node.kind || 'Component';
   const ref = parseEntityRef(props.node.id);
+  const MAX_NAME_LENGTH = 20;
+  const truncatedNodeName =
+    props.node.name.length < MAX_NAME_LENGTH
+      ? props.node.name
+      : `${props.node.name.slice(0, MAX_NAME_LENGTH)}...`;
   let nodeClass = classes.componentNode;
 
   switch (kind) {
@@ -128,7 +133,7 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps<any>) {
           alignmentBaseline="baseline"
           style={{ fontWeight: 'bold' }}
         >
-          {props.node.name}
+          {truncatedNodeName}
         </text>
       </Link>