Bring back support for custom cluster icons (#3066)

* revive custom cluster icons

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix borders

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/components/+catalog/catalog-entity-details.tsx

@@ -79,6 +79,7 @@ export class CatalogEntityDetails extends Component<Props> {
                 uid={entity.metadata.uid}
                 title={entity.metadata.name}
                 source={entity.metadata.source}
+                icon={entity.spec.iconData}
                 onClick={() => this.openEntity()}
                 size={128} />
               <div className="IconHint">

src/renderer/components/+catalog/catalog.tsx

@@ -37,12 +37,12 @@ import { catalogCategoryRegistry } from "../../../common/catalog";
 import { CatalogAddButton } from "./catalog-add-button";
 import type { RouteComponentProps } from "react-router";
 import { Notifications } from "../notifications";
-import { Avatar } from "../avatar/avatar";
 import { MainLayout } from "../layout/main-layout";
 import { cssNames } from "../../utils";
 import { makeCss } from "../../../common/utils/makeCss";
 import { CatalogEntityDetails } from "./catalog-entity-details";
 import type { CatalogViewRouteParam } from "../../../common/routes";
+import { HotbarIcon } from "../hotbar/hotbar-icon";
 
 enum sortBy {
   name = "name",
@@ -192,13 +192,13 @@ export class Catalog extends React.Component<Props> {
 
   renderIcon(item: CatalogEntityItem) {
     return (
-      <Avatar
-        title={item.name}
-        colorHash={`${item.name}-${item.source}`}
-        width={24}
-        height={24}
-        className={css.catalogIcon}
-      />
+      <HotbarIcon
+        uid={item.getId()}
+        title={item.getName()}
+        source={item.source}
+        icon={item.entity.spec.iconData}
+        onClick={() => this.onDetails(item)}
+        size={24} />
     );
   }