Merge pull request #12097 from kuangp/feat/myGroups

refactor(MyGroupsSidebarItem): Render namespaces with subtitles

.changeset/serious-zebras-joke.md

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

.changeset/shiny-turkeys-doubt.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+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

@@ -15,7 +15,10 @@
  */
 
 import React from 'react';
-import { stringifyEntityRef } from '@backstage/catalog-model';
+import {
+  DEFAULT_NAMESPACE,
+  stringifyEntityRef,
+} from '@backstage/catalog-model';
 import {
   SidebarItem,
   SidebarSubmenu,
@@ -32,7 +35,6 @@ import {
   catalogApiRef,
   CatalogApi,
   entityRouteRef,
-  humanizeEntityRef,
 } from '@backstage/plugin-catalog-react';
 import { getCompoundEntityRef } from '@backstage/catalog-model';
 
@@ -94,9 +96,11 @@ export const MyGroupsSidebarItem = (props: {
         {groups?.map(function groupsMap(group) {
           return (
             <SidebarSubmenuItem
-              title={
-                group.metadata.title ||
-                humanizeEntityRef(group, { defaultKind: 'group' })
+              title={group.metadata.title || group.metadata.name}
+              subtitle={
+                group.metadata.namespace !== DEFAULT_NAMESPACE
+                  ? group.metadata.namespace
+                  : undefined
               }
               to={catalogEntityRoute(getCompoundEntityRef(group))}
               icon={icon}