reworked workspaces page (WIP)

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

src/renderer/components/+workspaces/index.ts

@@ -1,2 +1,3 @@
 export * from "./workspaces.route";
 export * from "./workspaces";
+export * from "./workspace-list";

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;
+    }
+  }
+}

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();

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>
+    );
+  }
+}

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} />