diff --git a/.changeset/serious-zebras-joke.md b/.changeset/serious-zebras-joke.md new file mode 100644 index 0000000000..78f38ca967 --- /dev/null +++ b/.changeset/serious-zebras-joke.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Support displaying subtitle text in `SidebarSubmenuItem` diff --git a/.changeset/shiny-turkeys-doubt.md b/.changeset/shiny-turkeys-doubt.md new file mode 100644 index 0000000000..edac39182c --- /dev/null +++ b/.changeset/shiny-turkeys-doubt.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-org': patch +--- + +Render namespaces for teams with subtitles in `MyGroupsSidebarItem` diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 911ef36867..302ef7ef7d 100644 --- a/packages/core-components/api-report.md +++ b/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[]; diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx index 41f1a1e287..a1565a348f 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx @@ -59,6 +59,13 @@ const useStyles = makeStyles( 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 && } {title} +
+ {subtitle && ( + + {subtitle} + + )}
{showDropDown ? ( @@ -210,6 +225,12 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => { {Icon && } {title} +
+ {subtitle && ( + + {subtitle} + + )}
diff --git a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx index fa8f8405ff..f3e3a6bd9a 100644 --- a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx +++ b/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 (