From a0c19eb3c554ae1547c170c053f59c65ff5f1c5a Mon Sep 17 00:00:00 2001
From: Jim Ehrismann <jehrismann@mirantis.com>
Date: Wed, 6 Jan 2021 18:54:47 -0500
Subject: [PATCH] reworked workspaces page (WIP)

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>
---
 src/renderer/components/+workspaces/index.ts  |  1 +
 .../+workspaces/workspace-list.scss           | 20 +++++++++
 .../+workspaces/workspace-list.store.ts       | 27 ++++++++++++
 .../components/+workspaces/workspace-list.tsx | 44 +++++++++++++++++++
 .../cluster-manager/cluster-manager.tsx       |  4 +-
 5 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/components/+workspaces/workspace-list.scss
 create mode 100644 src/renderer/components/+workspaces/workspace-list.store.ts
 create mode 100644 src/renderer/components/+workspaces/workspace-list.tsx

diff --git a/src/renderer/components/+workspaces/index.ts b/src/renderer/components/+workspaces/index.ts
index db23faa3be..1305e70219 100644
--- a/src/renderer/components/+workspaces/index.ts
+++ b/src/renderer/components/+workspaces/index.ts
@@ -1,2 +1,3 @@
 export * from "./workspaces.route";
 export * from "./workspaces";
+export * from "./workspace-list";
diff --git a/src/renderer/components/+workspaces/workspace-list.scss b/src/renderer/components/+workspaces/workspace-list.scss
new file mode 100644
index 0000000000..53d9094bfb
--- /dev/null
+++ b/src/renderer/components/+workspaces/workspace-list.scss
@@ -0,0 +1,20 @@
+.Workspaces {
+  .TableCell {
+    &.name {
+      flex: 2;
+    }
+
+    &.warning {
+      @include table-cell-warning;
+    }
+
+    &.labels {
+      flex: 4;
+      @include table-cell-labels-offsets;
+    }
+
+    &.status {
+      @include workspaceStatus;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/components/+workspaces/workspace-list.store.ts b/src/renderer/components/+workspaces/workspace-list.store.ts
new file mode 100644
index 0000000000..f6e930dc4b
--- /dev/null
+++ b/src/renderer/components/+workspaces/workspace-list.store.ts
@@ -0,0 +1,27 @@
+import { Workspace, WorkspaceId, workspaceStore } from "../../../common/workspace-store";
+import { ItemStore } from "../../item.store";
+
+export class WorkspaceItem {
+    workspace: Workspace;
+
+    getName() {
+        return this.workspace.name;
+    }
+
+    getId() {
+        return this.workspace.id;
+    }
+}
+
+export class WorkspaceListStore extends ItemStore<WorkspaceItem> {
+
+    loadAll() {
+        return this.loadItems(() => workspaceStore.workspacesList.map(workspace => {
+            let ws = new WorkspaceItem();
+            ws.workspace = workspace;
+            return ws;
+        }));
+      }
+}
+
+export const workspaceListStore = new WorkspaceListStore();
diff --git a/src/renderer/components/+workspaces/workspace-list.tsx b/src/renderer/components/+workspaces/workspace-list.tsx
new file mode 100644
index 0000000000..3ca5ea66b0
--- /dev/null
+++ b/src/renderer/components/+workspaces/workspace-list.tsx
@@ -0,0 +1,44 @@
+import "./workspaces.scss";
+
+import React from "react";
+import { TabLayout } from "../layout/tab-layout";
+import { Badge } from "../badge";
+import { ItemListLayout, ItemListLayoutProps } from "../item-object-list/item-list-layout";
+import { Workspace, WorkspaceId } from "../../../common/workspace-store";
+import { WorkspaceItem, workspaceListStore } from "./workspace-list.store";
+
+enum sortBy {
+  name = "name",
+  id = "id",
+}
+
+export class WorkspaceList extends React.Component {
+  componentDidMount() {
+    workspaceListStore.loadAll();
+  }
+
+  render() {
+    return (
+      <TabLayout>
+        <ItemListLayout
+          isClusterScoped
+          className="Workspaces" store={workspaceListStore}
+          sortingCallbacks={{
+            [sortBy.name]: (ws: WorkspaceItem) => ws.getName(),
+            [sortBy.id]: (ws: WorkspaceItem) => ws.getId(),
+          }}
+          searchFilters={[]}
+          renderHeaderTitle="Workspaces"
+          renderTableHeader={[
+            { title: "Name", className: "name", sortBy: sortBy.name },
+            { title: "Id", className: "id", sortBy: sortBy.id },
+          ]}
+          renderTableContents={(item: WorkspaceItem) => [
+            item.getName(),
+            item.getId(),
+          ]}
+        />
+      </TabLayout>
+    );
+  }
+}
diff --git a/src/renderer/components/cluster-manager/cluster-manager.tsx b/src/renderer/components/cluster-manager/cluster-manager.tsx
index 68a358766c..355bdb6b8a 100644
--- a/src/renderer/components/cluster-manager/cluster-manager.tsx
+++ b/src/renderer/components/cluster-manager/cluster-manager.tsx
@@ -8,7 +8,7 @@ import { ClustersMenu } from "./clusters-menu";
 import { BottomBar } from "./bottom-bar";
 import { LandingPage, landingRoute, landingURL } from "../+landing-page";
 import { Preferences, preferencesRoute } from "../+preferences";
-import { Workspaces, workspacesRoute } from "../+workspaces";
+import { WorkspaceList, workspacesRoute } from "../+workspaces";
 import { AddCluster, addClusterRoute } from "../+add-cluster";
 import { ClusterView } from "./cluster-view";
 import { ClusterSettings, clusterSettingsRoute } from "../+cluster-settings";
@@ -67,7 +67,7 @@ export class ClusterManager extends React.Component {
             <Route component={LandingPage} {...landingRoute} />
             <Route component={Preferences} {...preferencesRoute} />
             <Route component={Extensions} {...extensionsRoute} />
-            <Route component={Workspaces} {...workspacesRoute} />
+            <Route component={WorkspaceList} {...workspacesRoute} />
             <Route component={AddCluster} {...addClusterRoute} />
             <Route component={ClusterView} {...clusterViewRoute} />
             <Route component={ClusterSettings} {...clusterSettingsRoute} />