refactor(MyGroupsSidebarItem): render namespaces with subtitles

Signed-off-by: Phil Kuang <pkuang@factset.com>

.changeset/serious-zebras-joke.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Support displaying subtitle text in `SidebarSubmenuItem`

.changeset/shiny-turkeys-doubt.md

@@ -2,4 +2,4 @@
 '@backstage/plugin-org': patch
 ---
 
-Render namespaced teams within dropdown items in `MyGroupsSidebarItem`
+Render namespaces for teams with subtitles in `MyGroupsSidebarItem`

packages/core-components/api-report.md

@@ -1110,6 +1110,7 @@ export type SidebarSubmenuItemDropdownItem = {
 // @public
 export type SidebarSubmenuItemProps = {
   title: string;
+  subtitle?: string;
   to?: string;
   icon?: IconComponent;
   dropdownItems?: SidebarSubmenuItemDropdownItem[];

packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx

@@ -59,6 +59,13 @@ const useStyles = makeStyles<BackstageTheme>(
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       'text-overflow': 'ellipsis',
+      lineHeight: 1,
+    },
+    subtitle: {
+      fontSize: 10,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      'text-overflow': 'ellipsis',
     },
     dropdownArrow: {
       position: 'absolute',
@@ -105,6 +112,7 @@ export type SidebarSubmenuItemDropdownItem = {
  * Holds submenu item content.
  *
  * title: Text content of submenu item
+ * subtitle: A subtitle displayed under the main title
  * to: Path to navigate to when item is clicked
  * icon: Icon displayed on the left of text content
  * dropdownItems: Optional array of dropdown items displayed when submenu item is clicked.
@@ -113,6 +121,7 @@ export type SidebarSubmenuItemDropdownItem = {
  */
 export type SidebarSubmenuItemProps = {
   title: string;
+  subtitle?: string;
   to?: string;
   icon?: IconComponent;
   dropdownItems?: SidebarSubmenuItemDropdownItem[];
@@ -124,7 +133,7 @@ export type SidebarSubmenuItemProps = {
  * @public
  */
 export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
-  const { title, to, icon: Icon, dropdownItems } = props;
+  const { title, subtitle, to, icon: Icon, dropdownItems } = props;
   const classes = useStyles();
   const { setIsHoveredOn } = useContext(SidebarItemWithSubmenuContext);
   const closeSubmenu = () => {
@@ -158,6 +167,12 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
             {Icon && <Icon fontSize="small" />}
             <Typography variant="subtitle1" className={classes.label}>
               {title}
+              <br />
+              {subtitle && (
+                <Typography variant="caption" className={classes.subtitle}>
+                  {subtitle}
+                </Typography>
+              )}
             </Typography>
             {showDropDown ? (
               <ArrowDropUpIcon className={classes.dropdownArrow} />
@@ -210,6 +225,12 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
           {Icon && <Icon fontSize="small" />}
           <Typography variant="subtitle1" className={classes.label}>
             {title}
+            <br />
+            {subtitle && (
+              <Typography variant="caption" className={classes.subtitle}>
+                {subtitle}
+              </Typography>
+            )}
           </Typography>
         </Link>
       </Tooltip>

plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx

@@ -17,7 +17,6 @@
 import React from 'react';
 import {
   DEFAULT_NAMESPACE,
-  Entity,
   stringifyEntityRef,
 } from '@backstage/catalog-model';
 import {
@@ -90,42 +89,25 @@ export const MyGroupsSidebarItem = (props: {
     );
   }
 
-  const namespacedGroupsMap: { [namespace: string]: Entity[] } = {};
-  groups.forEach(group => {
-    namespacedGroupsMap[group.metadata.namespace!] =
-      namespacedGroupsMap[group.metadata.namespace!] ?? [];
-    namespacedGroupsMap[group.metadata.namespace!].push(group);
-  });
-
   // Member of more than one group
   return (
     <SidebarItem icon={icon} text={pluralTitle}>
       <SidebarSubmenu title={pluralTitle}>
-        {namespacedGroupsMap[DEFAULT_NAMESPACE]?.map(group => {
+        {groups?.map(function groupsMap(group) {
           return (
             <SidebarSubmenuItem
-              key={stringifyEntityRef(group)}
               title={group.metadata.title || group.metadata.name}
+              subtitle={
+                group.metadata.namespace !== DEFAULT_NAMESPACE
+                  ? group.metadata.namespace
+                  : undefined
+              }
               to={catalogEntityRoute(getCompoundEntityRef(group))}
               icon={icon}
+              key={stringifyEntityRef(group)}
             />
           );
         })}
-        {Object.entries(namespacedGroupsMap)
-          .filter(([n]) => n !== DEFAULT_NAMESPACE)
-          .map(([namespace, namespacedGroups]) => {
-            return (
-              <SidebarSubmenuItem
-                key={namespace}
-                title={namespace}
-                icon={icon}
-                dropdownItems={namespacedGroups.map(group => ({
-                  title: group.metadata.title || group.metadata.name,
-                  to: catalogEntityRoute(getCompoundEntityRef(group)),
-                }))}
-              />
-            );
-          })}
       </SidebarSubmenu>
     </SidebarItem>
   );