From 752f9bf7034f03da749e55d90861fb75eebb0cb3 Mon Sep 17 00:00:00 2001
From: Dhruv Joshi <d.joshi@theaccessgroup.com>
Date: Mon, 6 Jan 2025 12:05:03 +0000
Subject: [PATCH] feat(MyGroupsSidebarItem): enhance group title display with
 EntityDisplayName component - This is to ensure increased readability to the
 user.

Signed-off-by: Dhruv Joshi <d.joshi@theaccessgroup.com>
---
 .../components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx
index 7e82d9f928..bd515f8553 100644
--- a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx
+++ b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx
@@ -37,6 +37,7 @@ import {
   entityRouteRef,
 } from '@backstage/plugin-catalog-react';
 import { getCompoundEntityRef } from '@backstage/catalog-model';
+import { EntityDisplayName } from '@backstage/plugin-catalog-react';
 
 /**
  * MyGroupsSidebarItem can be added to your sidebar providing quick access to groups the logged in user is a member of
@@ -66,7 +67,7 @@ export const MyGroupsSidebarItem = (props: {
           ...(filter ?? {}),
         },
       ],
-      fields: ['metadata', 'kind'],
+      fields: ['metadata', 'kind', 'spec'],
     });
 
     return response.items;
@@ -96,7 +97,7 @@ export const MyGroupsSidebarItem = (props: {
         {groups?.map(function groupsMap(group) {
           return (
             <SidebarSubmenuItem
-              title={group.metadata.title || group.metadata.name}
+              title={<EntityDisplayName entityRef={group} />}
               subtitle={
                 group.metadata.namespace !== DEFAULT_NAMESPACE
                   ? group.metadata.namespace