From f57c90a25e3b633eaafa1ad70029f49b0fe0a0bf Mon Sep 17 00:00:00 2001
From: Jim Ehrismann <jehrismann@mirantis.com>
Date: Mon, 25 Jan 2021 19:19:36 -0500
Subject: [PATCH] playing with select dropdown for workspace landing page

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>
---
 .../components/+landing-page/landing-page.tsx | 38 ++++++++++++-------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/renderer/components/+landing-page/landing-page.tsx b/src/renderer/components/+landing-page/landing-page.tsx
index 6b50572646..aa96ca6b58 100644
--- a/src/renderer/components/+landing-page/landing-page.tsx
+++ b/src/renderer/components/+landing-page/landing-page.tsx
@@ -28,11 +28,13 @@ export class LandingPage extends React.Component {
       workspaceStore.setActive(selectedWorkspace.id);
     }
 
+    const existingWorkspaces = workspaceStore.enabledWorkspacesList.map(w => ({value: w.name, label: w.name}));
+
     return (
       <h2 className="flex row center">
         <span>Workspace:</span>       
         <Select
-          options={workspaceStore.enabledWorkspacesList.map(w => ({value: w.name, label: w.name}))}
+          options={[{value: "New Workspace", label: "New Workspace..."}, ...existingWorkspaces]}
           value={this.workspace.name}
           onChange={onWorkspaceChange}
         />
@@ -45,6 +47,17 @@ export class LandingPage extends React.Component {
     const noClustersInScope = !clusters.length;
     const showStartupHint = this.showHint && noClustersInScope;
 
+    const onWorkspaceChange = (option: SelectOption) => {
+      const selectedWorkspace = workspaceStore.getByName(option.value);
+
+      if (!selectedWorkspace) {
+        return;
+      }
+
+      workspaceStore.setActive(selectedWorkspace.id);
+    }
+
+    const existingWorkspaces = workspaceStore.enabledWorkspacesList.map(w => ({value: w.name, label: w.name}));
     return (
       <PageLayout provideBackButtonNavigation={false} className="Workspaces" header={this.getHeader()} headerClass={"box center"}>
         <div className="LandingPage flex auto">
@@ -56,19 +69,18 @@ export class LandingPage extends React.Component {
               </p>
             </div>
           )}
-          {!noClustersInScope && (
-            <WorkspaceOverview workspace={this.workspace}/>
-          )}          
-          {noClustersInScope && (
-            <div className="no-clusters flex column gaps box center">
-              <h1>
-                Welcome!
-              </h1>
-              <p>
-                Get started by adding one or more clusters to this workspace.
-              </p>
+          <div className="flex column">
+            <div className="flex center">
+              <span>Workspace:</span>       
+              <Select
+                options={[{value: "New Workspace", label: "New Workspace..."}, ...existingWorkspaces]}
+                value={this.workspace.name}
+                onChange={onWorkspaceChange}
+                className="box grow"
+              />
             </div>
-          )}
+            <WorkspaceOverview workspace={this.workspace}/>
+          </div>
         </div>
       </PageLayout>
     );