added Select component to landing page title for changing workspace

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

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

@@ -5,7 +5,10 @@ import { observer } from "mobx-react";
 import { clusterStore } from "../../../common/cluster-store";
 import { Workspace, workspaceStore } from "../../../common/workspace-store";
 import { PageLayout } from "../layout/page-layout"
+import { Select, SelectOption } from "../select";
 import { WorkspaceOverview } from "./workspace-overview"
+import { autobind } from "../../../common/utils";
+
 @observer
 export class LandingPage extends React.Component {
   @observable showHint = true;
@@ -13,15 +16,37 @@ export class LandingPage extends React.Component {
 
   currentWorkspace = autorun(() => { this.workspace = workspaceStore.currentWorkspace; })
 
+  @autobind()
+  getHeader() {
+    const onWorkspaceChange = (option: SelectOption) => {
+      const selectedWorkspace = workspaceStore.getByName(option.value);
+
+      if (!selectedWorkspace) {
+        return;
+      }
+
+      workspaceStore.setActive(selectedWorkspace.id);
+    }
+
+    return (
+      <h2 className="flex row center">
+        <span>Workspace:</span>       
+        <Select
+          options={workspaceStore.enabledWorkspacesList.map(w => ({value: w.name, label: w.name}))}
+          value={this.workspace.name}
+          onChange={onWorkspaceChange}
+        />
+      </h2>
+    );
+  }
+
   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 (
-      <PageLayout provideBackButtonNavigation={false} className="Workspaces" header={header} headerClass={"box center"}>
+      <PageLayout provideBackButtonNavigation={false} className="Workspaces" header={this.getHeader()} headerClass={"box center"}>
         <div className="LandingPage flex auto">
           {showStartupHint && (
             <div className="startup-hint flex column gaps" onMouseEnter={() => this.showHint = false}>

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

@@ -1,6 +1,6 @@
 import "./workspace-cluster-icon.scss";
 
-import React, { Component } from "react";
+import React, { Component, Fragment } from "react";
 import { Workspace } from "../../../common/workspace-store";
 import { clusterStore } from "../../../common/cluster-store";
 import { Cluster } from "../../../main/cluster";
@@ -29,6 +29,33 @@ enum sortBy {
 @observer
 export class WorkspaceOverview extends Component<Props> {
 
+  renderInfo() {
+    const { workspace } = this.props;
+
+    if (workspace.name === "default") {
+      return (
+        <Fragment>
+          <h2>Default Workspace</h2>
+          <p className="info">
+            This is the default workspace. Workspaces are used to organize clusters into logical groups.
+          </p>
+          <p>
+            A single workspaces contains a list of clusters and their full configuration.
+          </p>
+        </Fragment>
+      );
+    }
+
+    return (
+      <Fragment>
+      <h2>Description</h2>
+      <p className="info">
+        {workspace.description}
+      </p>
+      </Fragment>
+    )
+  }
+
   getIcon(clusterItem: ClusterItem) {
     const { cluster } = clusterItem;
     const { name } = cluster;
@@ -48,24 +75,27 @@ export class WorkspaceOverview extends Component<Props> {
     const workspaceClusterStore = new WorkspaceClusterStore(workspace.id);
 
     return (
-      <ItemListLayout 
+      <WizardLayout className="Workspaces" infoPanel={this.renderInfo()}>
-        isClusterScoped
+        <ItemListLayout 
-        className="WorkspaceList" store={workspaceClusterStore}
+          renderHeaderTitle={<div>Clusters</div>}
-        sortingCallbacks={{
+          isClusterScoped
-            [sortBy.name]: (cluster: ClusterItem) => cluster.getName(),
+          className="WorkspaceList" store={workspaceClusterStore}
-        }}
+          sortingCallbacks={{
-        searchFilters={[]}
+              [sortBy.name]: (cluster: ClusterItem) => cluster.getName(),
-        renderTableHeader={[
+          }}
-            { title: "", className: "icon flex-grow" },
+          searchFilters={[]}
-            { title: "Name", className: "name flex-grow", sortBy: sortBy.name },
+          renderTableHeader={[
-            { title: "Id", className: "id" },
+              { title: "", className: "icon" },
-        ]}
+              { title: "Name", className: "name flex-grow", sortBy: sortBy.name },
-        renderTableContents={(item: ClusterItem) => [
+              { title: "Id", className: "id" },
-            this.getIcon(item),
+          ]}
-            item.getName(),
+          renderTableContents={(item: ClusterItem) => [
-            item.getId(),
+              this.getIcon(item),
-        ]}
+              item.getName(),
-      />
+              item.getId(),
+          ]}
+        />
+      </WizardLayout>
     );
   }
 }