Add icon column to catalog list (#2852)

* add icon column to catalog list

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

* Create generic Avatar component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+catalog/catalog.scss

@@ -69,7 +69,18 @@
     }
   }
 
+  .TableCell.icon {
+    max-width: 40px;
+    display: flex;
+    align-items: center;
+  }
+
+  .TableCell.source {
+    max-width: 100px;
+  }
+
   .TableCell.status {
+    max-width: 100px;
     &.connected {
       color: var(--colorSuccess);
     }
@@ -97,4 +108,9 @@
       }
     }
   }
+
+  .catalogIcon {
+    font-size: 10px;
+    -webkit-font-smoothing: auto;
+  }
 }

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

@@ -40,6 +40,7 @@ import { CatalogAddButton } from "./catalog-add-button";
 import type { RouteComponentProps } from "react-router";
 import type { ICatalogViewRouteParam } from "./catalog.route";
 import { Notifications } from "../notifications";
+import { Avatar } from "../avatar/avatar";
 
 enum sortBy {
   name = "name",
@@ -174,6 +175,24 @@ export class Catalog extends React.Component<Props> {
     );
   }
 
+  renderIcon(item: CatalogEntityItem) {
+    const category = catalogCategoryRegistry.getCategoryForEntity(item.entity);
+
+    if (!category) {
+      return null;
+    }
+
+    return (
+      <Avatar
+        title={item.name}
+        colorHash={`${item.name}-${item.source}`}
+        width={24}
+        height={24}
+        className="catalogIcon"
+      />
+    );
+  }
+
   render() {
     if (!this.catalogEntityStore) {
       return null;
@@ -202,12 +221,14 @@ export class Catalog extends React.Component<Props> {
             (entity: CatalogEntityItem) => entity.searchFields,
           ]}
           renderTableHeader={[
+            { title: "", className: "icon" },
             { title: "Name", className: "name", sortBy: sortBy.name },
             { title: "Source", className: "source", sortBy: sortBy.source },
             { title: "Labels", className: "labels" },
             { title: "Status", className: "status", sortBy: sortBy.status },
           ]}
           renderTableContents={(item: CatalogEntityItem) => [
+            this.renderIcon(item),
             item.name,
             item.source,
             item.labels.map((label) => <Badge key={label} label={label} title={label} />),