Add system icons for the built-in entity types and use them in the entity list of the catalog-import plugin

Signed-off-by: Dominik Henneke <dominik.henneke@sda-se.com>

.changeset/brave-days-burn.md

@@ -0,0 +1,6 @@
+---
+'@backstage/core-app-api': patch
+'@backstage/plugin-catalog-import': patch
+---
+
+Add system icons for the built-in entity types and use them in the entity list of the `catalog-import` plugin.

packages/core-app-api/src/app/icons.tsx

@@ -15,44 +15,59 @@
  */
 
 import { IconComponent } from '@backstage/core-plugin-api';
-import MuiMenuBookIcon from '@material-ui/icons/MenuBook';
+import MuiApartmentIcon from '@material-ui/icons/Apartment';
 import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage';
+import MuiCategoryIcon from '@material-ui/icons/Category';
 import MuiChatIcon from '@material-ui/icons/Chat';
 import MuiDashboardIcon from '@material-ui/icons/Dashboard';
+import MuiDocsIcon from '@material-ui/icons/Description';
 import MuiEmailIcon from '@material-ui/icons/Email';
+import MuiExtensionIcon from '@material-ui/icons/Extension';
 import MuiGitHubIcon from '@material-ui/icons/GitHub';
 import MuiHelpIcon from '@material-ui/icons/Help';
+import MuiLocationOnIcon from '@material-ui/icons/LocationOn';
+import MuiMemoryIcon from '@material-ui/icons/Memory';
+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 MuiDocsIcon from '@material-ui/icons/Description';
 
 type AppIconsKey =
+  | 'api'
   | 'brokenImage'
   | 'catalog'
   | 'chat'
+  | 'component'
   | 'dashboard'
   | 'docs'
+  | 'domain'
   | 'email'
   | 'github'
   | 'group'
   | 'help'
+  | 'location'
   | 'user'
+  | 'system'
   | 'warning';
 
 export type AppIcons = { [key in AppIconsKey]: IconComponent };
 
 export const defaultAppIcons: AppIcons = {
+  api: MuiExtensionIcon,
   brokenImage: MuiBrokenImageIcon,
   // To be confirmed: see https://github.com/backstage/backstage/issues/4970
   catalog: MuiMenuBookIcon,
   chat: MuiChatIcon,
+  component: MuiMemoryIcon,
   dashboard: MuiDashboardIcon,
   docs: MuiDocsIcon,
+  domain: MuiApartmentIcon,
   email: MuiEmailIcon,
   github: MuiGitHubIcon,
   group: MuiPeopleIcon,
   help: MuiHelpIcon,
+  location: MuiLocationOnIcon,
   user: MuiPersonIcon,
+  system: MuiCategoryIcon,
   warning: MuiWarningIcon,
 };

plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx

@@ -15,6 +15,7 @@
  */
 
 import { Entity, EntityName } from '@backstage/catalog-model';
+import { useApp } from '@backstage/core-plugin-api';
 import {
   EntityRefLink,
   formatEntityRefTitle,
@@ -29,15 +30,8 @@ import {
   ListItemText,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import ApartmentIcon from '@material-ui/icons/Apartment';
-import CategoryIcon from '@material-ui/icons/Category';
 import ExpandLessIcon from '@material-ui/icons/ExpandLess';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import ExtensionIcon from '@material-ui/icons/Extension';
-import GroupIcon from '@material-ui/icons/Group';
-import LocationOnIcon from '@material-ui/icons/LocationOn';
-import MemoryIcon from '@material-ui/icons/Memory';
-import PersonIcon from '@material-ui/icons/Person';
 import WorkIcon from '@material-ui/icons/Work';
 import React, { useState } from 'react';
 
@@ -53,34 +47,6 @@ function sortEntities(entities: Array<EntityName | Entity>) {
   );
 }
 
-function getEntityIcon(entity: { kind: string }): React.ReactElement {
-  switch (entity.kind.toLocaleLowerCase('en-US')) {
-    case 'api':
-      return <ExtensionIcon />;
-
-    case 'component':
-      return <MemoryIcon />;
-
-    case 'domain':
-      return <ApartmentIcon />;
-
-    case 'group':
-      return <GroupIcon />;
-
-    case 'location':
-      return <LocationOnIcon />;
-
-    case 'system':
-      return <CategoryIcon />;
-
-    case 'user':
-      return <PersonIcon />;
-
-    default:
-      return <WorkIcon />;
-  }
-}
-
 type Props = {
   locations: Array<{ target: string; entities: (Entity | EntityName)[] }>;
   locationListItemIcon: (target: string) => React.ReactElement;
@@ -98,6 +64,7 @@ export const EntityListComponent = ({
   firstListItem,
   withLinks = false,
 }: Props) => {
+  const app = useApp();
   const classes = useStyles();
 
   const [expandedUrls, setExpandedUrls] = useState<string[]>([]);
@@ -144,22 +111,29 @@ export const EntityListComponent = ({
             unmountOnExit
           >
             <List component="div" disablePadding dense>
-              {sortEntities(r.entities).map(entity => (
-                <ListItem
-                  key={formatEntityRefTitle(entity)}
-                  className={classes.nested}
-                  {...(withLinks
-                    ? {
-                        component: EntityRefLink,
-                        entityRef: entity,
-                        button: withLinks as any,
-                      }
-                    : {})}
-                >
-                  <ListItemIcon>{getEntityIcon(entity)}</ListItemIcon>
-                  <ListItemText primary={formatEntityRefTitle(entity)} />
-                </ListItem>
-              ))}
+              {sortEntities(r.entities).map(entity => {
+                const Icon =
+                  app.getSystemIcon(entity.kind.toLocaleLowerCase('en-US')) ??
+                  WorkIcon;
+                return (
+                  <ListItem
+                    key={formatEntityRefTitle(entity)}
+                    className={classes.nested}
+                    {...(withLinks
+                      ? {
+                          component: EntityRefLink,
+                          entityRef: entity,
+                          button: withLinks as any,
+                        }
+                      : {})}
+                  >
+                    <ListItemIcon>
+                      <Icon />
+                    </ListItemIcon>
+                    <ListItemText primary={formatEntityRefTitle(entity)} />
+                  </ListItem>
+                );
+              })}
             </List>
           </Collapse>
         </React.Fragment>