diff --git a/.changeset/pretty-needles-peel.md b/.changeset/pretty-needles-peel.md
new file mode 100644
index 0000000000..4e77ef7cd3
--- /dev/null
+++ b/.changeset/pretty-needles-peel.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-explore': patch
+---
+
+Using displayName as default value when loading Groups Diagram
diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.test.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.test.tsx
index 5044b09f83..3b9b523b02 100644
--- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.test.tsx
+++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.test.tsx
@@ -46,6 +46,9 @@ describe('', () => {
namespace: 'my-namespace',
},
spec: {
+ profile: {
+ displayName: 'Group A',
+ },
type: 'organization',
},
},
@@ -64,6 +67,6 @@ describe('', () => {
},
);
- expect(getByText('my-namespace/group-a')).toBeInTheDocument();
+ expect(getByText('Group A')).toBeInTheDocument();
});
});
diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
index 53e55b96bf..ce09f0d268 100644
--- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
+++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
@@ -18,6 +18,7 @@ import {
RELATION_CHILD_OF,
stringifyEntityRef,
parseEntityRef,
+ GroupEntity,
} from '@backstage/catalog-model';
import {
catalogApiRef,
@@ -107,7 +108,11 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps) {
* 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;
+ }>();
const edges = new Array<{ from: string; to: string; label: string }>();
const configApi = useApi(configApiRef);
@@ -141,7 +146,9 @@ export function GroupsDiagram() {
nodes.push({
id: stringifyEntityRef(catalogItem),
kind: catalogItem.kind,
- name: formatEntityRefTitle(catalogItem, { defaultKind: 'Group' }),
+ name:
+ (catalogItem as GroupEntity).spec?.profile?.displayName ||
+ formatEntityRefTitle(catalogItem, { defaultKind: 'Group' }),
});
// Edge to parent