fix presentation icon passing

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

.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.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,