Merge pull request #6934 from SDA-SE/feat/entity-icons

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

.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,17 +15,22 @@
  */
 
 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 =
   | 'brokenImage'
@@ -37,6 +42,13 @@ type AppIconsKey =
   | 'github'
   | 'group'
   | 'help'
+  | 'kind:api'
+  | 'kind:component'
+  | 'kind:domain'
+  | 'kind:group'
+  | 'kind:location'
+  | 'kind:system'
+  | 'kind:user'
   | 'user'
   | 'warning';
 
@@ -53,6 +65,13 @@ export const defaultAppIcons: AppIcons = {
   github: MuiGitHubIcon,
   group: MuiPeopleIcon,
   help: MuiHelpIcon,
+  'kind:api': MuiExtensionIcon,
+  'kind:component': MuiMemoryIcon,
+  'kind:domain': MuiApartmentIcon,
+  'kind:group': MuiPeopleIcon,
+  'kind:location': MuiLocationOnIcon,
+  'kind:system': MuiCategoryIcon,
+  'kind:user': MuiPersonIcon,
   user: MuiPersonIcon,
   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,30 @@ 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(
+                    `kind:${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>

plugins/catalog-import/src/components/StepPrepareSelectLocations/StepPrepareSelectLocations.test.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { act, render } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { AnalyzeResult } from '../../api';
@@ -57,7 +58,7 @@ describe('<StepPrepareSelectLocations />', () => {
   });
 
   it('renders without exploding', async () => {
-    const { getByRole } = render(
+    const { getByRole } = await renderInTestApp(
       <StepPrepareSelectLocations
         analyzeResult={analyzeResult}
         onPrepare={() => undefined}
@@ -69,7 +70,7 @@ describe('<StepPrepareSelectLocations />', () => {
   });
 
   it('should select and deselect all', async () => {
-    const { getByRole, getAllByRole } = render(
+    const { getByRole, getAllByRole } = await renderInTestApp(
       <StepPrepareSelectLocations
         analyzeResult={analyzeResult}
         onPrepare={() => undefined}
@@ -97,7 +98,7 @@ describe('<StepPrepareSelectLocations />', () => {
   });
 
   it('should preselect prepared locations', async () => {
-    const { getAllByRole } = render(
+    const { getAllByRole } = await renderInTestApp(
       <StepPrepareSelectLocations
         analyzeResult={analyzeResult}
         prepareResult={{
@@ -117,7 +118,7 @@ describe('<StepPrepareSelectLocations />', () => {
   });
 
   it('should select items', async () => {
-    const { getAllByRole } = render(
+    const { getAllByRole } = await renderInTestApp(
       <StepPrepareSelectLocations
         analyzeResult={analyzeResult}
         onPrepare={() => undefined}
@@ -146,7 +147,7 @@ describe('<StepPrepareSelectLocations />', () => {
   it('should go back', async () => {
     const onGoBack = jest.fn();
 
-    const { getByRole } = render(
+    const { getByRole } = await renderInTestApp(
       <StepPrepareSelectLocations
         analyzeResult={analyzeResult}
         onPrepare={() => undefined}
@@ -164,7 +165,7 @@ describe('<StepPrepareSelectLocations />', () => {
   it('should submit', async () => {
     const onPrepare = jest.fn();
 
-    const { getAllByRole, getByRole } = render(
+    const { getAllByRole, getByRole } = await renderInTestApp(
       <StepPrepareSelectLocations
         analyzeResult={analyzeResult}
         onPrepare={onPrepare}