From 575d9178eff53d73568776a94ef9cc084cbf9191 Mon Sep 17 00:00:00 2001
From: Alex Crome <afscrome@users.noreply.github.com>
Date: Mon, 1 May 2023 11:00:29 +0100
Subject: [PATCH] Updated customise theme docs

The custom theme document talks about System Icons, then immediatly ignores the existance of these  in the `Sidebar Sub-menu` example a couple of paragraphs later.
This commit updates the docs to make use of these icons, as well as adding an icon for resource types to the default icons.

Also updated the sidebar in example app to use this same approach

Signed-off-by: Alex Crome <afscrome@users.noreply.github.com>
---
 .changeset/dry-boats-sniff.md                | 10 +++++
 docs/getting-started/app-custom-theme.md     | 21 ++++-------
 packages/app-defaults/src/defaults/icons.tsx |  2 +
 packages/app/src/components/Root/Root.tsx    | 39 ++++++++++----------
 4 files changed, 39 insertions(+), 33 deletions(-)
 create mode 100644 .changeset/dry-boats-sniff.md

diff --git a/.changeset/dry-boats-sniff.md b/.changeset/dry-boats-sniff.md
new file mode 100644
index 0000000000..0c359b5536
--- /dev/null
+++ b/.changeset/dry-boats-sniff.md
@@ -0,0 +1,10 @@
+---
+'@backstage/app-defaults': patch
+---
+
+Added a System Icon for resource entities.
+This can be obtained using:
+
+```ts
+useApp().getSystemIcon('kind:resource');
+```
diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md
index 697c58ac8f..5676360dc0 100644
--- a/docs/getting-started/app-custom-theme.md
+++ b/docs/getting-started/app-custom-theme.md
@@ -403,12 +403,7 @@ For this example we'll show you how you can expand the sidebar with a sub-menu:
 2. Then we want to add the following imports for the icons:
 
    ```tsx title="packages/app/src/components/Root/Root.tsx"
-   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';
+   import { useApp } from '@backstage/core-plugin-api';
    ```
 
 3. Then update the `@backstage/core-components` import like this:
@@ -441,39 +436,39 @@ For this example we'll show you how you can expand the sidebar with a sub-menu:
        <SidebarSubmenuItem
          title="Domains"
          to="catalog?filters[kind]=domain"
-         icon={DomainIcon}
+         icon={useApp().getSystemIcon('kind:domain')}
        />
        <SidebarSubmenuItem
          title="Systems"
          to="catalog?filters[kind]=system"
-         icon={SystemIcon}
+         icon={useApp().getSystemIcon('kind:system')}
        />
        <SidebarSubmenuItem
          title="Components"
          to="catalog?filters[kind]=component"
-         icon={ComponentIcon}
+         icon={useApp().getSystemIcon('kind:component')}
        />
        <SidebarSubmenuItem
          title="APIs"
          to="catalog?filters[kind]=api"
-         icon={ApiIcon}
+         icon={useApp().getSystemIcon('kind:api')}
        />
        <SidebarDivider />
        <SidebarSubmenuItem
          title="Resources"
          to="catalog?filters[kind]=resource"
-         icon={ResourceIcon}
+         icon={useApp().getSystemIcon('kind:resource')}
        />
        <SidebarDivider />
        <SidebarSubmenuItem
          title="Groups"
          to="catalog?filters[kind]=group"
-         icon={GroupIcon}
+         icon={useApp().getSystemIcon('kind:group')}
        />
        <SidebarSubmenuItem
          title="Users"
          to="catalog?filters[kind]=user"
-         icon={UserIcon}
+         icon={useApp().getSystemIcon('kind:user')}
        />
      </SidebarSubmenu>
    </SidebarItem>
diff --git a/packages/app-defaults/src/defaults/icons.tsx b/packages/app-defaults/src/defaults/icons.tsx
index c4f2d2b7e4..80fa4dcf12 100644
--- a/packages/app-defaults/src/defaults/icons.tsx
+++ b/packages/app-defaults/src/defaults/icons.tsx
@@ -34,6 +34,7 @@ import MuiMenuBookIcon from '@material-ui/icons/MenuBook';
 import MuiPeopleIcon from '@material-ui/icons/People';
 import MuiPersonIcon from '@material-ui/icons/Person';
 import MuiWarningIcon from '@material-ui/icons/Warning';
+import MuiWorkIcon from '@material-ui/icons/Work';
 
 export const icons = {
   brokenImage: MuiBrokenImageIcon as IconComponent,
@@ -56,6 +57,7 @@ export const icons = {
   'kind:location': MuiLocationOnIcon as IconComponent,
   'kind:system': MuiCategoryIcon as IconComponent,
   'kind:user': MuiPersonIcon as IconComponent,
+  'kind:resource': MuiWorkIcon as IconComponent,
   user: MuiPersonIcon as IconComponent,
   warning: MuiWarningIcon as IconComponent,
 };
diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx
index 8b71637773..904fa4a7d4 100644
--- a/packages/app/src/components/Root/Root.tsx
+++ b/packages/app/src/components/Root/Root.tsx
@@ -17,11 +17,9 @@
 import React, { PropsWithChildren } from 'react';
 import { makeStyles } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
-import ExtensionIcon from '@material-ui/icons/Extension';
 import RuleIcon from '@material-ui/icons/AssignmentTurnedIn';
 import MapIcon from '@material-ui/icons/MyLocation';
 import LayersIcon from '@material-ui/icons/Layers';
-import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import SearchIcon from '@material-ui/icons/Search';
@@ -51,16 +49,9 @@ import {
   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';
+import { useApp } from '@backstage/core-plugin-api';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -107,49 +98,57 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
             <SidebarSubmenuItem
               title="Domains"
               to="catalog?filters[kind]=domain"
-              icon={DomainIcon}
+              icon={useApp().getSystemIcon('kind:domain')}
             />
             <SidebarSubmenuItem
               title="Systems"
               to="catalog?filters[kind]=system"
-              icon={SystemIcon}
+              icon={useApp().getSystemIcon('kind:system')}
             />
             <SidebarSubmenuItem
               title="Components"
               to="catalog?filters[kind]=component"
-              icon={ComponentIcon}
+              icon={useApp().getSystemIcon('kind:component')}
             />
             <SidebarSubmenuItem
               title="APIs"
               to="catalog?filters[kind]=api"
-              icon={ApiIcon}
+              icon={useApp().getSystemIcon('kind:api')}
             />
             <SidebarDivider />
             <SidebarSubmenuItem
               title="Resources"
               to="catalog?filters[kind]=resource"
-              icon={ResourceIcon}
+              icon={useApp().getSystemIcon('kind:resource')}
             />
             <SidebarDivider />
             <SidebarSubmenuItem
               title="Groups"
               to="catalog?filters[kind]=group"
-              icon={GroupIcon}
+              icon={useApp().getSystemIcon('kind:group')}
             />
             <SidebarSubmenuItem
               title="Users"
               to="catalog?filters[kind]=user"
-              icon={UserIcon}
+              icon={useApp().getSystemIcon('kind:user')}
             />
           </SidebarSubmenu>
         </SidebarItem>
         <MyGroupsSidebarItem
           singularTitle="My Squad"
           pluralTitle="My Squads"
-          icon={GroupIcon}
+          icon={useApp().getSystemIcon('group')!}
+        />
+        <SidebarItem
+          icon={useApp().getSystemIcon('kind:api')!}
+          to="api-docs"
+          text="APIs"
+        />
+        <SidebarItem
+          icon={useApp().getSystemIcon('docs')!}
+          to="docs"
+          text="Docs"
         />
-        <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
-        <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
         <SidebarItem icon={PlaylistPlayIcon} to="playlist" text="Playlists" />
         <SidebarItem icon={LayersIcon} to="explore" text="Explore" />
         <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />