From 796d4277acaf9a9b5e9382d4512e2c8c31d13e05 Mon Sep 17 00:00:00 2001
From: Radu Ciopraga <1442639+raduciopraga@users.noreply.github.com>
Date: Thu, 1 Feb 2024 22:09:16 +0100
Subject: [PATCH] Use the EntityDisplayName component for rendering Group nodes

Signed-off-by: Radu Ciopraga <1442639+raduciopraga@users.noreply.github.com>
---
 .changeset/strong-news-develop.md             |  5 ++++
 .../GroupsDiagram.test.tsx                    |  8 ++++--
 .../GroupsExplorerContent/GroupsDiagram.tsx   | 13 +++++-----
 .../GroupsExplorerContent.test.tsx            | 26 ++++++++-----------
 4 files changed, 28 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/strong-news-develop.md

diff --git a/.changeset/strong-news-develop.md b/.changeset/strong-news-develop.md
new file mode 100644
index 0000000000..1cbe4dda07
--- /dev/null
+++ b/.changeset/strong-news-develop.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-explore': patch
+---
+
+Use the EntityDisplayName component for rendering Group nodes
diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.test.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.test.tsx
index 7c57de84bc..1329d3c522 100644
--- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.test.tsx
+++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.test.tsx
@@ -21,6 +21,7 @@ import {
 } from '@backstage/plugin-catalog-react';
 import { Entity } from '@backstage/catalog-model';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
+import { screen } from '@testing-library/react';
 import React from 'react';
 import { GroupsDiagram } from './GroupsDiagram';
 
@@ -55,7 +56,7 @@ describe('<GroupsDiagram />', () => {
         }),
     };
 
-    const { getByText } = await renderInTestApp(
+    await renderInTestApp(
       <TestApiProvider apis={[[catalogApiRef, catalogApi]]}>
         <GroupsDiagram />
       </TestApiProvider>,
@@ -65,6 +66,9 @@ describe('<GroupsDiagram />', () => {
         },
       },
     );
-    expect(getByText('Group A', { selector: 'div' })).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('link', { name: 'group:my-namespace/group-a' }),
+    ).toBeInTheDocument();
   });
 });
diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
index f7f0eab0bd..dd0705908a 100644
--- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
+++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
@@ -15,7 +15,6 @@
  */
 
 import {
-  GroupEntity,
   parseEntityRef,
   RELATION_CHILD_OF,
   stringifyEntityRef,
@@ -31,8 +30,8 @@ import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
 import {
   catalogApiRef,
   entityRouteRef,
-  humanizeEntityRef,
   getEntityRelations,
+  EntityDisplayName,
 } from '@backstage/plugin-catalog-react';
 import { makeStyles, Typography, useTheme } from '@material-ui/core';
 import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
@@ -140,7 +139,9 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps<any>) {
         rx={theme.shape.borderRadius}
         className={classes.groupNode}
       />
-      <title>{props.node.name}</title>
+      <title>
+        <EntityDisplayName entityRef={props.node.id} hideIcon disableTooltip />
+      </title>
 
       <Link
         to={catalogEntityRoute({
@@ -152,7 +153,7 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps<any>) {
         <foreignObject width={nodeWidth} height={nodeHeight}>
           <div className={classes.centeredContent}>
             <div className={classNames(classes.textWrapper, classes.textGroup)}>
-              {props.node.name}
+              <EntityDisplayName entityRef={props.node.id} hideIcon />
             </div>
           </div>
         </foreignObject>
@@ -210,9 +211,7 @@ export function GroupsDiagram(props: {
     nodes.push({
       id: stringifyEntityRef(catalogItem),
       kind: catalogItem.kind,
-      name:
-        (catalogItem as GroupEntity).spec?.profile?.displayName ||
-        humanizeEntityRef(catalogItem, { defaultKind: 'Group' }),
+      name: '',
     });
 
     // Edge to parent
diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.test.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.test.tsx
index 9b461fba7d..0e992c220d 100644
--- a/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.test.tsx
+++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.test.tsx
@@ -17,7 +17,7 @@
 import { Entity } from '@backstage/catalog-model';
 import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
-import { waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import React from 'react';
 import { GroupsExplorerContent } from '../GroupsExplorerContent';
 
@@ -73,48 +73,44 @@ describe('<GroupsExplorerContent />', () => {
     ];
     catalogApi.getEntities.mockResolvedValue({ items: entities });
 
-    const { getByText } = await renderInTestApp(
+    await renderInTestApp(
       <Wrapper>
         <GroupsExplorerContent />
       </Wrapper>,
       mountedRoutes,
     );
 
-    await waitFor(() => {
-      expect(
-        getByText('my-namespace/group-a', { selector: 'div' }),
-      ).toBeInTheDocument();
-    });
+    expect(
+      screen.getByRole('link', { name: 'group:my-namespace/group-a' }),
+    ).toBeInTheDocument();
   });
 
   it('renders a custom title', async () => {
     catalogApi.getEntities.mockResolvedValue({ items: [] });
 
-    const { getByText } = await renderInTestApp(
+    await renderInTestApp(
       <Wrapper>
         <GroupsExplorerContent title="Our Teams" />
       </Wrapper>,
       mountedRoutes,
     );
 
-    await waitFor(() =>
-      expect(getByText('Our Teams', { selector: 'h2' })).toBeInTheDocument(),
-    );
+    expect(
+      screen.getByText('Our Teams', { selector: 'h2' }),
+    ).toBeInTheDocument();
   });
 
   it('renders a friendly error if it cannot collect domains', async () => {
     const catalogError = new Error('Network timeout');
     catalogApi.getEntities.mockRejectedValueOnce(catalogError);
 
-    const { getAllByText } = await renderInTestApp(
+    await renderInTestApp(
       <Wrapper>
         <GroupsExplorerContent />
       </Wrapper>,
       mountedRoutes,
     );
 
-    await waitFor(() =>
-      expect(getAllByText(/Error: Network timeout/).length).not.toBe(0),
-    );
+    expect(screen.getAllByText(/Error: Network timeout/).length).not.toBe(0);
   });
 });