From 6e0ca52bf7e22ebb63a4e306ca5611ae415ffcfc Mon Sep 17 00:00:00 2001
From: Jim Ehrismann <jehrismann@mirantis.com>
Date: Wed, 20 Jan 2021 19:09:18 -0500
Subject: [PATCH] added cluster icons to workspace overview

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>
---
 .../+landing-page/workspace-cluster-icon.scss | 10 ++++
 .../+landing-page/workspace-overview.tsx      | 53 ++++++++++++-------
 2 files changed, 45 insertions(+), 18 deletions(-)
 create mode 100644 src/renderer/components/+landing-page/workspace-cluster-icon.scss

diff --git a/src/renderer/components/+landing-page/workspace-cluster-icon.scss b/src/renderer/components/+landing-page/workspace-cluster-icon.scss
new file mode 100644
index 0000000000..383940df6c
--- /dev/null
+++ b/src/renderer/components/+landing-page/workspace-cluster-icon.scss
@@ -0,0 +1,10 @@
+.WorkspaceClusterIcon {
+  --size: 37px;
+
+  position: relative;
+  border-radius: $radius;
+  padding: $radius;
+  user-select: none;
+  cursor: pointer;
+
+}
\ No newline at end of file
diff --git a/src/renderer/components/+landing-page/workspace-overview.tsx b/src/renderer/components/+landing-page/workspace-overview.tsx
index 8e3935c9d8..93d5ef431b 100644
--- a/src/renderer/components/+landing-page/workspace-overview.tsx
+++ b/src/renderer/components/+landing-page/workspace-overview.tsx
@@ -1,3 +1,5 @@
+import "./workspace-cluster-icon.scss";
+
 import React, { Component } from "react";
 import { Workspace } from "../../../common/workspace-store";
 import { clusterStore } from "../../../common/cluster-store";
@@ -13,6 +15,7 @@ import { Spinner } from "../spinner";
 import { Button } from "../button";
 import { Select, SelectOption } from "../select";
 import { Badge } from "../badge";
+import { Hashicon } from "@emeraldpay/hashicon-react";
 import { ClusterItem, WorkspaceClusterStore } from "./workspace-cluster.store";
 
 interface Props {
@@ -26,29 +29,43 @@ enum sortBy {
 @observer
 export class WorkspaceOverview extends Component<Props> {
 
+  getIcon(clusterItem: ClusterItem) {
+    const { cluster } = clusterItem;
+    const { name } = cluster;
+    const { preferences, id: clusterId } = cluster;
+    const { icon } = preferences;
+
+    return (
+      <div className="WorkspaceClusterIcon flex inline" >
+        {icon && <img src={icon} alt={name}/>}
+        {!icon && <Hashicon value={clusterId} />}
+      </div>
+    )
+  }
+
   render() {
     const { workspace } = this.props;
     const workspaceClusterStore = new WorkspaceClusterStore(workspace.id);
 
     return (
-        <TabLayout>
-          <ItemListLayout 
-            isClusterScoped
-            className="WorkspaceList" store={workspaceClusterStore}
-            sortingCallbacks={{
-              [sortBy.name]: (cluster: ClusterItem) => cluster.getName(),
-            }}
-            searchFilters={[]}
-            renderTableHeader={[
-              { title: "Name", className: "name flex-grow", sortBy: sortBy.name },
-              { title: "Id", className: "id" },
-            ]}
-            renderTableContents={(item: ClusterItem) => [
-              item.getName(),
-              item.getId(),
-            ]}
-          />
-        </TabLayout>
+      <ItemListLayout 
+        isClusterScoped
+        className="WorkspaceList" store={workspaceClusterStore}
+        sortingCallbacks={{
+            [sortBy.name]: (cluster: ClusterItem) => cluster.getName(),
+        }}
+        searchFilters={[]}
+        renderTableHeader={[
+            { title: "Icon" },
+            { title: "Name", className: "name flex-grow", sortBy: sortBy.name },
+            { title: "Id", className: "id" },
+        ]}
+        renderTableContents={(item: ClusterItem) => [
+            this.getIcon(item),
+            item.getName(),
+            item.getId(),
+        ]}
+      />
     );
   }
 }