From 208976022b21f5fcafbaa98cde0f648211c454e9 Mon Sep 17 00:00:00 2001
From: "roylisto.pradana" <roylisto.pradana@grabtaxi.com>
Date: Tue, 29 Jun 2021 17:52:38 +0700
Subject: [PATCH] add displayName option for Groups diagram

Signed-off-by: roylisto.pradana <roylisto.pradana@grabtaxi.com>
---
 .../GroupsExplorerContent/GroupsDiagram.tsx          | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
index 53e55b96bf..27be0dae7e 100644
--- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
+++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
@@ -96,7 +96,9 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps<any>) {
           alignmentBaseline="baseline"
           style={{ fontWeight: 'bold' }}
         >
-          {props.node.name}
+          {props.node.profile?.displayName
+            ? props.node.profile?.displayName
+            : props.node.name}
         </text>
       </Link>
     </g>
@@ -107,7 +109,12 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps<any>) {
  * Dynamically generates a diagram of groups registered in the catalog.
  */
 export function GroupsDiagram() {
-  const nodes = new Array<{ id: string; kind: string; name: string }>();
+  const nodes = new Array<{
+    id: string;
+    kind: string;
+    name: string;
+    profile?: any;
+  }>();
   const edges = new Array<{ from: string; to: string; label: string }>();
 
   const configApi = useApi(configApiRef);
@@ -142,6 +149,7 @@ export function GroupsDiagram() {
       id: stringifyEntityRef(catalogItem),
       kind: catalogItem.kind,
       name: formatEntityRefTitle(catalogItem, { defaultKind: 'Group' }),
+      profile: catalogItem.spec?.profile,
     });
 
     // Edge to parent