workspace overview on landing page (WIP)

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

src/renderer/components/+landing-page/landing-page.tsx

@@ -1,40 +1,51 @@
 import "./landing-page.scss";
 import React from "react";
-import { observable } from "mobx";
+import { observable, autorun } from "mobx";
 import { observer } from "mobx-react";
 import { clusterStore } from "../../../common/cluster-store";
-import { workspaceStore } from "../../../common/workspace-store";
-
+import { Workspace, workspaceStore } from "../../../common/workspace-store";
+import { PageLayout } from "../layout/page-layout"
+import { WorkspaceOverview } from "./workspace-overview"
 @observer
 export class LandingPage extends React.Component {
   @observable showHint = true;
+  @observable workspace: Workspace;
+
+  currentWorkspace = autorun(() => { this.workspace = workspaceStore.currentWorkspace; })
 
   render() {
     const clusters = clusterStore.getByWorkspaceId(workspaceStore.currentWorkspaceId);
     const noClustersInScope = !clusters.length;
     const showStartupHint = this.showHint && noClustersInScope;
 
+    const header = <h2>{`Workspace: ${this.workspace?.name}`}</h2>;
+
     return (
-      <div className="LandingPage flex">
+      <PageLayout provideBackButtonNavigation={false} className="Workspaces" header={header} headerClass={"box center"}>
+        <div className="LandingPage flex auto">
           {showStartupHint && (
             <div className="startup-hint flex column gaps" onMouseEnter={() => this.showHint = false}>
               <p>This is the quick launch menu.</p>
               <p>
-              Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button.
+                Click the + button to add clusters and choose the ones you want to access via quick launch menu.
               </p>
             </div>
           )}
+          {!noClustersInScope && (
+            <WorkspaceOverview workspace={this.workspace}/>
+          )}          
           {noClustersInScope && (
             <div className="no-clusters flex column gaps box center">
               <h1>
                 Welcome!
               </h1>
               <p>
-              Get started by associating one or more clusters to Lens.
+                Get started by adding one or more clusters to this workspace.
               </p>
             </div>
           )}
         </div>
+      </PageLayout>
     );
   }
 }

src/renderer/components/+landing-page/workspace-overview.tsx

@@ -0,0 +1,57 @@
+import React, { Component } from "react";
+import { Workspace } from "../../../common/workspace-store";
+import { clusterStore } from "../../../common/cluster-store";
+import { Cluster } from "../../../main/cluster";
+import { observable, autorun } from "mobx";
+import { observer } from "mobx-react";
+import { Drawer, DrawerItem, DrawerTitle } from "../drawer";
+import { autobind, stopPropagation } from "../../utils";
+import { MarkdownViewer } from "../markdown-viewer";
+import { Spinner } from "../spinner";
+import { Button } from "../button";
+import { Select, SelectOption } from "../select";
+import { Badge } from "../badge";
+
+interface Props {
+  workspace: Workspace;
+}
+
+@observer
+export class WorkspaceOverview extends Component<Props> {
+
+  renderClusters() {
+    const { workspace } = this.props;
+    const clusters = clusterStore.getByWorkspaceId(workspace.id);
+    return <div>
+      {clusters.map(cluster => <div>{cluster.contextName}</div>)}
+    </div>
+  }
+
+  render() {
+    const { workspace } = this.props;
+
+    return (
+        <Drawer
+            className="WorkspaceDetails"
+            usePortal={true}
+            open={!!workspace}
+            title={"Details"}
+        >
+            <DrawerItem name={"Description"}>
+            {workspace.description}
+            </DrawerItem>
+            <DrawerItem name={"Id"}>
+            {workspace.id}
+            </DrawerItem>
+            <DrawerItem name={"Owner Ref"}>
+            {workspace.ownerRef}
+            </DrawerItem>
+            <DrawerItem name={"Enabled"} renderBoolean={true}>
+            {workspace.enabled}
+            </DrawerItem>
+            <DrawerTitle title={"Clusters"}/>
+            {this.renderClusters()}
+        </Drawer>
+    );
+  }
+}