Merge pull request #22649 from raduciopraga/fix/explore-group-diagram-titles

Use the EntityDisplayName component for rendering Group nodes

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();
   });
 });

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

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 { waitFor, screen } from '@testing-library/react';
 import React from 'react';
 import { GroupsExplorerContent } from '../GroupsExplorerContent';
 
@@ -73,24 +73,24 @@ describe('<GroupsExplorerContent />', () => {
     ];
     catalogApi.getEntities.mockResolvedValue({ items: entities });
 
-    const { getByText } = await renderInTestApp(
+    await renderInTestApp(
       <Wrapper>
         <GroupsExplorerContent />
       </Wrapper>,
       mountedRoutes,
     );
 
-    await waitFor(() => {
+    await waitFor(() =>
       expect(
-        getByText('my-namespace/group-a', { selector: 'div' }),
-      ).toBeInTheDocument();
-    });
+        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>,
@@ -98,7 +98,9 @@ describe('<GroupsExplorerContent />', () => {
     );
 
     await waitFor(() =>
-      expect(getByText('Our Teams', { selector: 'h2' })).toBeInTheDocument(),
+      expect(
+        screen.getByText('Our Teams', { selector: 'h2' }),
+      ).toBeInTheDocument(),
     );
   });
 
@@ -106,7 +108,7 @@ describe('<GroupsExplorerContent />', () => {
     const catalogError = new Error('Network timeout');
     catalogApi.getEntities.mockRejectedValueOnce(catalogError);
 
-    const { getAllByText } = await renderInTestApp(
+    await renderInTestApp(
       <Wrapper>
         <GroupsExplorerContent />
       </Wrapper>,
@@ -114,7 +116,7 @@ describe('<GroupsExplorerContent />', () => {
     );
 
     await waitFor(() =>
-      expect(getAllByText(/Error: Network timeout/).length).not.toBe(0),
+      expect(screen.getAllByText(/Error: Network timeout/).length).not.toBe(0),
     );
   });
 });