From cabd58d2bd95b76cb017d3b25be2896059f63516 Mon Sep 17 00:00:00 2001
From: Andre Wanlin <67169551+awanlin@users.noreply.github.com>
Date: Fri, 28 Oct 2022 16:21:59 -0500
Subject: [PATCH] Added SidebarSubmenu for all Kinds
Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com>
---
.changeset/lovely-walls-guess.md | 90 +++++++++++++++++++
packages/app/src/components/Root/Root.tsx | 57 +++++++++++-
.../packages/app/src/components/Root/Root.tsx | 57 +++++++++++-
3 files changed, 202 insertions(+), 2 deletions(-)
create mode 100644 .changeset/lovely-walls-guess.md
diff --git a/.changeset/lovely-walls-guess.md b/.changeset/lovely-walls-guess.md
new file mode 100644
index 0000000000..edf068c7e3
--- /dev/null
+++ b/.changeset/lovely-walls-guess.md
@@ -0,0 +1,90 @@
+---
+'@backstage/create-app': patch
+---
+
+Added `SidebarSubmenu` for all Kinds making it easier to discover them in the Catalog.
+
+To add this to an existing Backstage instance you will need to make the following to your `packages/app/src/components/Root/Root.tsx`:
+
+1. First add the following imports:
+
+ ```ts
+ import ApiIcon from '@material-ui/icons/Extension';
+ import ComponentIcon from '@material-ui/icons/Memory';
+ import DomainIcon from '@material-ui/icons/Apartment';
+ import ResourceIcon from '@material-ui/icons/Work';
+ import SystemIcon from '@material-ui/icons/Category';
+ import UserIcon from '@material-ui/icons/Person';
+ ```
+
+2. Then update the `@backstage/core-components` import like this:
+
+ ```diff
+ import {
+ Sidebar,
+ sidebarConfig,
+ SidebarDivider,
+ SidebarGroup,
+ SidebarItem,
+ SidebarPage,
+ SidebarScrollWrapper,
+ SidebarSpace,
+ useSidebarOpenState,
+ Link,
+ + GroupIcon,
+ + SidebarSubmenu,
+ + SidebarSubmenuItem,
+ } from '@backstage/core-components';
+ ```
+
+3. Finally replace `` with this:
+
+ ```ts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ```
diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx
index 41e5b15db9..7bec873d49 100644
--- a/packages/app/src/components/Root/Root.tsx
+++ b/packages/app/src/components/Root/Root.tsx
@@ -47,12 +47,21 @@ import {
SidebarSpace,
Link,
useSidebarOpenState,
+ SidebarSubmenu,
+ SidebarSubmenuItem,
} from '@backstage/core-components';
import { MyGroupsSidebarItem } from '@backstage/plugin-org';
import GroupIcon from '@material-ui/icons/People';
import { SearchModal } from '../search/SearchModal';
import Score from '@material-ui/icons/Score';
+import ApiIcon from '@material-ui/icons/Extension';
+import ComponentIcon from '@material-ui/icons/Memory';
+import DomainIcon from '@material-ui/icons/Apartment';
+import ResourceIcon from '@material-ui/icons/Work';
+import SystemIcon from '@material-ui/icons/Category';
+import UserIcon from '@material-ui/icons/Person';
+
const useSidebarLogoStyles = makeStyles({
root: {
width: sidebarConfig.drawerWidthClosed,
@@ -93,7 +102,53 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
}>
{/* Global nav, not org-specific */}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
) => (
}>
{/* Global nav, not org-specific */}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+