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: 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<{}>) => ( + + - -