From 1e984b11fccefdffefb4544e448c6040bcd5a741 Mon Sep 17 00:00:00 2001 From: Phil Kuang Date: Thu, 16 Jun 2022 15:53:48 -0400 Subject: [PATCH 1/2] refactor(MyGroupsSidebarItem): Render namespaced teams within dropdown items Signed-off-by: Phil Kuang --- .changeset/shiny-turkeys-doubt.md | 5 +++ .../MyGroupsSidebarItem.tsx | 38 +++++++++++++++---- 2 files changed, 35 insertions(+), 8 deletions(-) create mode 100644 .changeset/shiny-turkeys-doubt.md diff --git a/.changeset/shiny-turkeys-doubt.md b/.changeset/shiny-turkeys-doubt.md new file mode 100644 index 0000000000..0f663a4c74 --- /dev/null +++ b/.changeset/shiny-turkeys-doubt.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-org': patch +--- + +Render namespaced teams within dropdown items in `MyGroupsSidebarItem` diff --git a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx index fa8f8405ff..445bf8e6fe 100644 --- a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx +++ b/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx @@ -15,7 +15,11 @@ */ import React from 'react'; -import { stringifyEntityRef } from '@backstage/catalog-model'; +import { + DEFAULT_NAMESPACE, + Entity, + stringifyEntityRef, +} from '@backstage/catalog-model'; import { SidebarItem, SidebarSubmenu, @@ -32,7 +36,6 @@ import { catalogApiRef, CatalogApi, entityRouteRef, - humanizeEntityRef, } from '@backstage/plugin-catalog-react'; import { getCompoundEntityRef } from '@backstage/catalog-model'; @@ -87,23 +90,42 @@ 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 ( - {groups?.map(function groupsMap(group) { + {namespacedGroupsMap[DEFAULT_NAMESPACE]?.map(group => { return ( ); })} + {Object.entries(namespacedGroupsMap) + .filter(([n]) => n !== DEFAULT_NAMESPACE) + .map(([namespace, namespacedGroups]) => { + return ( + ({ + title: group.metadata.title || group.metadata.name, + to: catalogEntityRoute(getCompoundEntityRef(group)), + }))} + /> + ); + })} ); From 7e115d42f945e57e2fbcf4d83ef69e89362753f4 Mon Sep 17 00:00:00 2001 From: Phil Kuang Date: Tue, 21 Jun 2022 16:34:55 -0400 Subject: [PATCH 2/2] refactor(MyGroupsSidebarItem): render namespaces with subtitles Signed-off-by: Phil Kuang --- .changeset/serious-zebras-joke.md | 5 +++ .changeset/shiny-turkeys-doubt.md | 2 +- packages/core-components/api-report.md | 1 + .../src/layout/Sidebar/SidebarSubmenuItem.tsx | 23 ++++++++++++- .../MyGroupsSidebarItem.tsx | 32 ++++--------------- 5 files changed, 36 insertions(+), 27 deletions(-) create mode 100644 .changeset/serious-zebras-joke.md 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 index 0f663a4c74..edac39182c 100644 --- a/.changeset/shiny-turkeys-doubt.md +++ b/.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` 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 445bf8e6fe..f3e3a6bd9a 100644 --- a/plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.tsx +++ b/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 ( - {namespacedGroupsMap[DEFAULT_NAMESPACE]?.map(group => { + {groups?.map(function groupsMap(group) { return ( ); })} - {Object.entries(namespacedGroupsMap) - .filter(([n]) => n !== DEFAULT_NAMESPACE) - .map(([namespace, namespacedGroups]) => { - return ( - ({ - title: group.metadata.title || group.metadata.name, - to: catalogEntityRoute(getCompoundEntityRef(group)), - }))} - /> - ); - })} );