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 1/5] 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 */} - + + + + + + + + + + + + + + + From 65630a9bcbe54d3380569f04d7979a5e506e3ad9 Mon Sep 17 00:00:00 2001 From: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Date: Fri, 11 Nov 2022 08:16:53 -0600 Subject: [PATCH 2/5] Changes based on feedback Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> --- .changeset/lovely-walls-guess.md | 20 +++++++------------ packages/app/src/components/Root/Root.tsx | 20 +++++++------------ .../packages/app/src/components/Root/Root.tsx | 20 +++++++------------ 3 files changed, 21 insertions(+), 39 deletions(-) diff --git a/.changeset/lovely-walls-guess.md b/.changeset/lovely-walls-guess.md index edf068c7e3..eab92d8e9e 100644 --- a/.changeset/lovely-walls-guess.md +++ b/.changeset/lovely-walls-guess.md @@ -44,45 +44,39 @@ To add this to an existing Backstage instance you will need to make the followin - - diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index 7bec873d49..8cec54326a 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -106,45 +106,39 @@ export const Root = ({ children }: PropsWithChildren<{}>) => ( - - diff --git a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx b/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx index b6f883ab2f..0acaba7470 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx @@ -78,45 +78,39 @@ export const Root = ({ children }: PropsWithChildren<{}>) => ( - - From 9d2c6a7db46edf2f1c114e17bed4d1b7f4bc5b10 Mon Sep 17 00:00:00 2001 From: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Date: Fri, 18 Nov 2022 12:25:50 -0600 Subject: [PATCH 3/5] Removed from create-app and added to docs Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> --- .changeset/lovely-walls-guess.md | 84 ---------------- .../sidebar-submenu-example.png | Bin 0 -> 26763 bytes docs/getting-started/app-custom-theme.md | 92 ++++++++++++++++++ .../packages/app/src/components/Root/Root.tsx | 42 +------- 4 files changed, 93 insertions(+), 125 deletions(-) delete mode 100644 .changeset/lovely-walls-guess.md create mode 100644 docs/assets/getting-started/sidebar-submenu-example.png diff --git a/.changeset/lovely-walls-guess.md b/.changeset/lovely-walls-guess.md deleted file mode 100644 index eab92d8e9e..0000000000 --- a/.changeset/lovely-walls-guess.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -'@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/docs/assets/getting-started/sidebar-submenu-example.png b/docs/assets/getting-started/sidebar-submenu-example.png new file mode 100644 index 0000000000000000000000000000000000000000..0b30f0ca6ad4c2e3e8609fe2375aff94c19b4e1b GIT binary patch literal 26763 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 literal 0 HcmV?d00001 diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 146f160d71..3015c18011 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -393,6 +393,98 @@ You can add more icons, if the [default icons](https://github.com/backstage/back Note: If the icon is not available as one of the default icons or one you've added then it will fall back to Material UI's `LanguageIcon` +## Custom Sidebar + +As you've seen there are many ways that you can customize your Backstage app. The following section will show you how you can customize the sidebar. + +### Sidebar Submenu + +For this example we'll show you how you can expand the sidebar with a submenu: + +1. Open the `Root.tsx` file located in `packages/app/src/components/Root` as this is where the sidebar code lives +2. Then we want to add the following imports for the icons: + + ```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'; + ``` + +3. 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'; + ``` + +4. Finally replace `` with this: + + ```ts + + + + + + + + + + + + + + ``` + +When you startup your Backstage app and hover over the Home option on the sidebar you'll now see a nice submenu appear with links to the various Kinds in your Catalog. It would look like this: + +![Sidebar submenu example](./../assets/getting-started/sidebar-submenu-example.png) + +You can see more ways to use this in the [Storybook Sidebar examples](https://backstage.io/storybook/?path=/story/layout-sidebar--sample-scalable-sidebar) + ## Custom Homepage In addition to a custom theme, a custom logo, you can also customize the diff --git a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx b/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx index 0acaba7470..84882fa23f 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx @@ -74,47 +74,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => ( }> {/* Global nav, not org-specific */} - - - - - - - - - - - - - + From 6db37424c5512aa57d3333f87af98bce9dba7773 Mon Sep 17 00:00:00 2001 From: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Date: Fri, 18 Nov 2022 12:43:34 -0600 Subject: [PATCH 4/5] Changes to make Vale happy, I hope Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> --- docs/getting-started/app-custom-theme.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 3015c18011..5ec0d6eeab 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -397,9 +397,9 @@ Note: If the icon is not available as one of the default icons or one you've add As you've seen there are many ways that you can customize your Backstage app. The following section will show you how you can customize the sidebar. -### Sidebar Submenu +### Sidebar Sub-menu -For this example we'll show you how you can expand the sidebar with a submenu: +For this example we'll show you how you can expand the sidebar with a sub-menu: 1. Open the `Root.tsx` file located in `packages/app/src/components/Root` as this is where the sidebar code lives 2. Then we want to add the following imports for the icons: @@ -479,9 +479,9 @@ For this example we'll show you how you can expand the sidebar with a submenu: ``` -When you startup your Backstage app and hover over the Home option on the sidebar you'll now see a nice submenu appear with links to the various Kinds in your Catalog. It would look like this: +When you startup your Backstage app and hover over the Home option on the sidebar you'll now see a nice sub-menu appear with links to the various Kinds in your Catalog. It would look like this: -![Sidebar submenu example](./../assets/getting-started/sidebar-submenu-example.png) +![Sidebar sub-menu example](./../assets/getting-started/sidebar-submenu-example.png) You can see more ways to use this in the [Storybook Sidebar examples](https://backstage.io/storybook/?path=/story/layout-sidebar--sample-scalable-sidebar) From 493fc5b80d21d0c95cd5359fe057f4552e3baeb1 Mon Sep 17 00:00:00 2001 From: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Date: Fri, 18 Nov 2022 13:09:49 -0600 Subject: [PATCH 5/5] Removed imports Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> --- .../packages/app/src/components/Root/Root.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx b/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx index 84882fa23f..6768b48dad 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx @@ -23,18 +23,9 @@ import { SidebarSpace, useSidebarOpenState, Link, - GroupIcon, - SidebarSubmenu, - SidebarSubmenuItem, } from '@backstage/core-components'; import MenuIcon from '@material-ui/icons/Menu'; import SearchIcon from '@material-ui/icons/Search'; -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: {