From 797a32953b68191e0882d0cac1cc721739277a15 Mon Sep 17 00:00:00 2001 From: Aizat Faiz Date: Sun, 24 Dec 2023 17:51:24 +0800 Subject: [PATCH 1/4] ux: use consistent icons for sytem and template Signed-off-by: Aizat Faiz --- .changeset/loud-walls-compare.md | 5 +++++ packages/app-defaults/src/defaults/icons.tsx | 8 ++++---- 2 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 .changeset/loud-walls-compare.md diff --git a/.changeset/loud-walls-compare.md b/.changeset/loud-walls-compare.md new file mode 100644 index 0000000000..3616006675 --- /dev/null +++ b/.changeset/loud-walls-compare.md @@ -0,0 +1,5 @@ +--- +'@backstage/app-defaults': patch +--- + +Fixed inconsistencies in icons used for System and Template diff --git a/packages/app-defaults/src/defaults/icons.tsx b/packages/app-defaults/src/defaults/icons.tsx index fbdfb14e5b..9f83b01988 100644 --- a/packages/app-defaults/src/defaults/icons.tsx +++ b/packages/app-defaults/src/defaults/icons.tsx @@ -17,7 +17,7 @@ import { IconComponent } from '@backstage/core-plugin-api'; import MuiApartmentIcon from '@material-ui/icons/Apartment'; import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage'; -import MuiCategoryIcon from '@material-ui/icons/Category'; +import MuiBusinessIcon from '@material-ui/icons/Business'; import MuiCreateNewFolderIcon from '@material-ui/icons/CreateNewFolder'; import MuiSubjectIcon from '@material-ui/icons/Subject'; import MuiSearchIcon from '@material-ui/icons/Search'; @@ -35,7 +35,7 @@ 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'; -import MuiFeaturedPlayListIcon from '@material-ui/icons/FeaturedPlayList'; +import MuiLibraryAddIcon from '@material-ui/icons/LibraryAdd'; export const icons = { brokenImage: MuiBrokenImageIcon as IconComponent, @@ -56,10 +56,10 @@ export const icons = { 'kind:domain': MuiApartmentIcon as IconComponent, 'kind:group': MuiPeopleIcon as IconComponent, 'kind:location': MuiLocationOnIcon as IconComponent, - 'kind:system': MuiCategoryIcon as IconComponent, + 'kind:system': MuiBusinessIcon as IconComponent, 'kind:user': MuiPersonIcon as IconComponent, 'kind:resource': MuiWorkIcon as IconComponent, - 'kind:template': MuiFeaturedPlayListIcon as IconComponent, + 'kind:template': MuiLibraryAddIcon as IconComponent, user: MuiPersonIcon as IconComponent, warning: MuiWarningIcon as IconComponent, }; From b37b31ec8a4358ee3d3741226fffa842b1da9e23 Mon Sep 17 00:00:00 2001 From: Aizat Faiz Date: Mon, 25 Dec 2023 08:18:52 +0800 Subject: [PATCH 2/4] switch icons Signed-off-by: Aizat Faiz --- packages/app-defaults/src/defaults/icons.tsx | 8 ++++---- .../catalog/src/apis/EntityPresentationApi/defaults.tsx | 8 ++++---- plugins/catalog/src/components/AboutCard/AboutCard.tsx | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/app-defaults/src/defaults/icons.tsx b/packages/app-defaults/src/defaults/icons.tsx index 9f83b01988..fbdfb14e5b 100644 --- a/packages/app-defaults/src/defaults/icons.tsx +++ b/packages/app-defaults/src/defaults/icons.tsx @@ -17,7 +17,7 @@ import { IconComponent } from '@backstage/core-plugin-api'; import MuiApartmentIcon from '@material-ui/icons/Apartment'; import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage'; -import MuiBusinessIcon from '@material-ui/icons/Business'; +import MuiCategoryIcon from '@material-ui/icons/Category'; import MuiCreateNewFolderIcon from '@material-ui/icons/CreateNewFolder'; import MuiSubjectIcon from '@material-ui/icons/Subject'; import MuiSearchIcon from '@material-ui/icons/Search'; @@ -35,7 +35,7 @@ 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'; -import MuiLibraryAddIcon from '@material-ui/icons/LibraryAdd'; +import MuiFeaturedPlayListIcon from '@material-ui/icons/FeaturedPlayList'; export const icons = { brokenImage: MuiBrokenImageIcon as IconComponent, @@ -56,10 +56,10 @@ export const icons = { 'kind:domain': MuiApartmentIcon as IconComponent, 'kind:group': MuiPeopleIcon as IconComponent, 'kind:location': MuiLocationOnIcon as IconComponent, - 'kind:system': MuiBusinessIcon as IconComponent, + 'kind:system': MuiCategoryIcon as IconComponent, 'kind:user': MuiPersonIcon as IconComponent, 'kind:resource': MuiWorkIcon as IconComponent, - 'kind:template': MuiLibraryAddIcon as IconComponent, + 'kind:template': MuiFeaturedPlayListIcon as IconComponent, user: MuiPersonIcon as IconComponent, warning: MuiWarningIcon as IconComponent, }; diff --git a/plugins/catalog/src/apis/EntityPresentationApi/defaults.tsx b/plugins/catalog/src/apis/EntityPresentationApi/defaults.tsx index 84f04c6f83..c2abeb5e6a 100644 --- a/plugins/catalog/src/apis/EntityPresentationApi/defaults.tsx +++ b/plugins/catalog/src/apis/EntityPresentationApi/defaults.tsx @@ -18,10 +18,10 @@ import { IconComponent } from '@backstage/core-plugin-api'; import { defaultEntityPresentation } from '@backstage/plugin-catalog-react'; import { HumanDuration } from '@backstage/types'; import ApartmentIcon from '@material-ui/icons/Apartment'; -import BusinessIcon from '@material-ui/icons/Business'; +import CategoryIcon from '@material-ui/icons/Category'; import ExtensionIcon from '@material-ui/icons/Extension'; import HelpIcon from '@material-ui/icons/Help'; -import LibraryAddIcon from '@material-ui/icons/LibraryAdd'; +import FeaturedPlayListIcon from '@material-ui/icons/FeaturedPlayList'; import LocationOnIcon from '@material-ui/icons/LocationOn'; import MemoryIcon from '@material-ui/icons/Memory'; import PeopleIcon from '@material-ui/icons/People'; @@ -38,13 +38,13 @@ export const UNKNOWN_KIND_ICON: IconComponent = HelpIcon; export const DEFAULT_ICONS: Record = { api: ExtensionIcon, component: MemoryIcon, - system: BusinessIcon, + system: CategoryIcon, resource: WorkIcon, domain: ApartmentIcon, location: LocationOnIcon, user: PersonIcon, group: PeopleIcon, - template: LibraryAddIcon, + template: FeaturedPlayListIcon, }; export function createDefaultRenderer(options: { diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx index 763f6fc094..2bbbc20760 100644 --- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutCard.tsx @@ -166,7 +166,7 @@ export function AboutCard(props: AboutCardProps) { const subHeaderLinks = [viewInSource, viewInTechDocs]; if (isTemplateEntityV1beta3(entity)) { - const Icon = app.getSystemIcon('scaffolder') ?? CreateComponentIcon; + const Icon = app.getSystemIcon('kind:template') ?? CreateComponentIcon; const launchTemplate: IconLinkVerticalProps = { label: 'Launch Template', From 976612c68af75ac445143b3056660a183f0607bf Mon Sep 17 00:00:00 2001 From: Aizat Faiz Date: Wed, 27 Dec 2023 10:20:05 +0800 Subject: [PATCH 3/4] change impacted package Signed-off-by: Aizat Faiz --- .changeset/loud-walls-compare.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/loud-walls-compare.md b/.changeset/loud-walls-compare.md index 3616006675..495ad933d9 100644 --- a/.changeset/loud-walls-compare.md +++ b/.changeset/loud-walls-compare.md @@ -1,5 +1,5 @@ --- -'@backstage/app-defaults': patch +'@backstage/plugin-catalog': patch --- Fixed inconsistencies in icons used for System and Template From c2108f75819c250e166ae13b0c704f28330254f6 Mon Sep 17 00:00:00 2001 From: Aizat Faiz Date: Thu, 18 Jan 2024 10:49:09 +0800 Subject: [PATCH 4/4] revert changes to AboutCard.tsx Signed-off-by: Aizat Faiz --- plugins/catalog/src/components/AboutCard/AboutCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx index 2bbbc20760..763f6fc094 100644 --- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutCard.tsx @@ -166,7 +166,7 @@ export function AboutCard(props: AboutCardProps) { const subHeaderLinks = [viewInSource, viewInTechDocs]; if (isTemplateEntityV1beta3(entity)) { - const Icon = app.getSystemIcon('kind:template') ?? CreateComponentIcon; + const Icon = app.getSystemIcon('scaffolder') ?? CreateComponentIcon; const launchTemplate: IconLinkVerticalProps = { label: 'Launch Template',