Merge pull request #21546 from backstage/freben/icons

fix presentation icon passing

.changeset/fifty-cameras-share.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-catalog-react': patch
+'@backstage/plugin-catalog': patch
+---
+
+Ensure that passed-in icons are taken advantage of in the presentation API

plugins/catalog-react/src/apis/EntityPresentationApi/defaultEntityPresentation.test.ts

@@ -37,7 +37,7 @@ describe('defaultEntityPresentation', () => {
         entityRef: 'component:default/test',
         primaryTitle: 'test',
         secondaryTitle: 'component:default/test | type | desc',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
 
       expect(
@@ -58,7 +58,7 @@ describe('defaultEntityPresentation', () => {
         entityRef: 'component:default/test',
         primaryTitle: 'title',
         secondaryTitle: 'component:default/test | type | desc',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
 
       expect(
@@ -82,7 +82,7 @@ describe('defaultEntityPresentation', () => {
         entityRef: 'component:default/test',
         primaryTitle: 'displayName',
         secondaryTitle: 'component:default/test | type | desc',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
     });
 
@@ -96,7 +96,7 @@ describe('defaultEntityPresentation', () => {
         entityRef: 'component:default/test',
         primaryTitle: 'test',
         secondaryTitle: 'component:default/test',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
     });
 
@@ -107,7 +107,7 @@ describe('defaultEntityPresentation', () => {
         entityRef: 'unknown:default/unknown',
         primaryTitle: 'unknown',
         secondaryTitle: 'unknown:default/unknown',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
     });
   });
@@ -118,7 +118,7 @@ describe('defaultEntityPresentation', () => {
         entityRef: 'component:default/test',
         primaryTitle: 'test',
         secondaryTitle: 'component:default/test',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
 
       expect(
@@ -129,7 +129,7 @@ describe('defaultEntityPresentation', () => {
         entityRef: 'component:default/test',
         primaryTitle: 'component:test',
         secondaryTitle: 'component:default/test',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
 
       expect(
@@ -140,7 +140,7 @@ describe('defaultEntityPresentation', () => {
         entityRef: 'component:default/test',
         primaryTitle: 'default/test',
         secondaryTitle: 'component:default/test',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
     });
 
@@ -149,14 +149,14 @@ describe('defaultEntityPresentation', () => {
         entityRef: 'unknown:default/unknown',
         primaryTitle: 'unknown',
         secondaryTitle: 'unknown:default/unknown',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
 
       expect(defaultEntityPresentation('name')).toEqual({
         entityRef: 'unknown:default/name',
         primaryTitle: 'name',
         secondaryTitle: 'unknown:default/name',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
     });
   });
@@ -173,7 +173,7 @@ describe('defaultEntityPresentation', () => {
         entityRef: 'component:default/test',
         primaryTitle: 'test',
         secondaryTitle: 'component:default/test',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
 
       expect(
@@ -187,7 +187,7 @@ describe('defaultEntityPresentation', () => {
         entityRef: 'component:default/test',
         primaryTitle: 'component:test',
         secondaryTitle: 'component:default/test',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
 
       expect(
@@ -201,7 +201,7 @@ describe('defaultEntityPresentation', () => {
         entityRef: 'component:default/test',
         primaryTitle: 'default/test',
         secondaryTitle: 'component:default/test',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
     });
 
@@ -217,14 +217,14 @@ describe('defaultEntityPresentation', () => {
         entityRef: 'component:default/test',
         primaryTitle: 'default/test',
         secondaryTitle: 'component:default/test',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
 
       expect(defaultEntityPresentation('')).toEqual({
         entityRef: 'unknown:default/unknown',
         primaryTitle: 'unknown',
         secondaryTitle: 'unknown:default/unknown',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
     });
   });
@@ -235,7 +235,7 @@ describe('defaultEntityPresentation', () => {
         entityRef: 'unknown:default/unknown',
         primaryTitle: 'unknown',
         secondaryTitle: 'unknown:default/unknown',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
 
       expect(defaultEntityPresentation(undefined as unknown as Entity)).toEqual(
@@ -243,7 +243,7 @@ describe('defaultEntityPresentation', () => {
           entityRef: 'unknown:default/unknown',
           primaryTitle: 'unknown',
           secondaryTitle: 'unknown:default/unknown',
-          Icon: expect.anything(),
+          Icon: undefined,
         },
       );
 
@@ -253,7 +253,7 @@ describe('defaultEntityPresentation', () => {
         entityRef: 'unknown:default/unknown',
         primaryTitle: 'unknown',
         secondaryTitle: 'unknown:default/unknown',
-        Icon: expect.anything(),
+        Icon: undefined,
       });
     });
   });

plugins/catalog-react/src/apis/EntityPresentationApi/defaultEntityPresentation.ts

@@ -20,34 +20,9 @@ import {
   Entity,
   stringifyEntityRef,
 } from '@backstage/catalog-model';
-import { IconComponent } from '@backstage/core-plugin-api';
-import ApartmentIcon from '@material-ui/icons/Apartment';
-import BusinessIcon from '@material-ui/icons/Business';
-import ExtensionIcon from '@material-ui/icons/Extension';
-import HelpIcon from '@material-ui/icons/Help';
-import LibraryAddIcon from '@material-ui/icons/LibraryAdd';
-import LocationOnIcon from '@material-ui/icons/LocationOn';
-import MemoryIcon from '@material-ui/icons/Memory';
-import PeopleIcon from '@material-ui/icons/People';
-import PersonIcon from '@material-ui/icons/Person';
-import WorkIcon from '@material-ui/icons/Work';
 import get from 'lodash/get';
 import { EntityRefPresentationSnapshot } from './EntityPresentationApi';
 
-const UNKNOWN_KIND_ICON: IconComponent = HelpIcon;
-
-const DEFAULT_ICONS: Record<string, IconComponent> = {
-  api: ExtensionIcon,
-  component: MemoryIcon,
-  system: BusinessIcon,
-  resource: WorkIcon,
-  domain: ApartmentIcon,
-  location: LocationOnIcon,
-  user: PersonIcon,
-  group: PeopleIcon,
-  template: LibraryAddIcon,
-};
-
 /**
  * This returns the default representation of an entity.
  *
@@ -68,10 +43,6 @@ export function defaultEntityPresentation(
   const { kind, namespace, name, title, description, displayName, type } =
     getParts(entityOrRef);
 
-  const Icon =
-    (kind && DEFAULT_ICONS[kind.toLocaleLowerCase('en-US')]) ||
-    UNKNOWN_KIND_ICON;
-
   const entityRef: string = stringifyEntityRef({
     kind: kind || 'unknown',
     namespace: namespace || DEFAULT_NAMESPACE,
@@ -96,7 +67,7 @@ export function defaultEntityPresentation(
     entityRef,
     primaryTitle: primary,
     secondaryTitle: secondary || undefined,
-    Icon,
+    Icon: undefined, // leave it up to the presentation API to handle
   };
 }
 

plugins/catalog/src/apis/EntityPresentationApi/DefaultEntityPresentationApi.ts

@@ -34,6 +34,7 @@ import {
   DEFAULT_BATCH_DELAY,
   DEFAULT_CACHE_TTL,
   DEFAULT_ICONS,
+  UNKNOWN_KIND_ICON,
   createDefaultRenderer,
 } from './defaults';
 
@@ -134,10 +135,7 @@ export interface DefaultEntityPresentationApiOptions {
    * @remarks
    *
    * The keys are kinds (case insensitive) that map to icon values to represent
-   * kinds by.
-   *
-   * If you do not supply a set of icons here, a set of fallback icons will be
-   * used. If you supply the empty object, no fallback icons will be used.
+   * kinds by. These are merged with the default set of icons.
    */
   kindIcons?: Record<string, IconComponent>;
 
@@ -194,11 +192,12 @@ export class DefaultEntityPresentationApi implements EntityPresentationApi {
     const renderer = options.renderer ?? createDefaultRenderer({ async: true });
 
     const kindIcons: Record<string, IconComponent> = {};
-    Object.entries(options.kindIcons ?? DEFAULT_ICONS).forEach(
-      ([kind, icon]) => {
-        kindIcons[kind.toLocaleLowerCase('en-US')] = icon;
-      },
-    );
+    Object.entries(DEFAULT_ICONS).forEach(([kind, icon]) => {
+      kindIcons[kind.toLocaleLowerCase('en-US')] = icon;
+    });
+    Object.entries(options.kindIcons ?? {}).forEach(([kind, icon]) => {
+      kindIcons[kind.toLocaleLowerCase('en-US')] = icon;
+    });
 
     if (renderer.async) {
       if (!options.catalogApi) {
@@ -396,6 +395,8 @@ export class DefaultEntityPresentationApi implements EntityPresentationApi {
       return false;
     }
 
-    return this.#kindIcons[kind.toLocaleLowerCase('en-US')];
+    return (
+      this.#kindIcons[kind.toLocaleLowerCase('en-US')] ?? UNKNOWN_KIND_ICON
+    );
   }
 }

plugins/catalog/src/apis/EntityPresentationApi/defaults.tsx

@@ -26,6 +26,7 @@ import LocationOnIcon from '@material-ui/icons/LocationOn';
 import MemoryIcon from '@material-ui/icons/Memory';
 import PeopleIcon from '@material-ui/icons/People';
 import PersonIcon from '@material-ui/icons/Person';
+import WorkIcon from '@material-ui/icons/Work';
 import { DefaultEntityPresentationApiRenderer } from './DefaultEntityPresentationApi';
 
 export const DEFAULT_CACHE_TTL: HumanDuration = { seconds: 10 };
@@ -38,6 +39,7 @@ export const DEFAULT_ICONS: Record<string, IconComponent> = {
   api: ExtensionIcon,
   component: MemoryIcon,
   system: BusinessIcon,
+  resource: WorkIcon,
   domain: ApartmentIcon,
   location: LocationOnIcon,
   user: PersonIcon,