From e0778fa8b462b53ad634b69dbc8d03e3e468997e Mon Sep 17 00:00:00 2001
From: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Date: Tue, 9 Mar 2021 07:31:19 +0200
Subject: [PATCH] tweaks workspace overview layout

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
---
 .../components/+add-cluster/add-cluster.tsx   |  2 +-
 .../+landing-page/landing-page.scss           | 13 ++++++++++--
 .../components/+landing-page/landing-page.tsx |  6 +++---
 .../+landing-page/workspace-overview.scss     | 20 ++++++++++++++++---
 .../+landing-page/workspace-overview.tsx      | 17 +++++++++-------
 .../components/+workspaces/workspaces.tsx     |  2 +-
 6 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/renderer/components/+add-cluster/add-cluster.tsx b/src/renderer/components/+add-cluster/add-cluster.tsx
index ae4a3e6ace..7c5a4194c7 100644
--- a/src/renderer/components/+add-cluster/add-cluster.tsx
+++ b/src/renderer/components/+add-cluster/add-cluster.tsx
@@ -352,7 +352,7 @@ export class AddCluster extends React.Component {
 
     return (
       <DropFileInput onDropFiles={this.onDropKubeConfig}>
-        <PageLayout className="AddClusters" header={<h2>Add Clusters</h2>}>
+        <PageLayout className="AddClusters" header={<h2>Add Clusters</h2>} showOnTop={true}>
           <h2>Add Clusters from Kubeconfig</h2>
           {this.renderInfo()}
           {this.renderKubeConfigSource()}
diff --git a/src/renderer/components/+landing-page/landing-page.scss b/src/renderer/components/+landing-page/landing-page.scss
index 3610186e26..265b901069 100644
--- a/src/renderer/components/+landing-page/landing-page.scss
+++ b/src/renderer/components/+landing-page/landing-page.scss
@@ -60,6 +60,15 @@
 }
 
 .PageLayout.LandingOverview {
-  --width: 80%;
+  --width: 100%;
+  --height: 100%;
   text-align: center;
-}
\ No newline at end of file
+
+  .content-wrapper {
+
+    .content {
+      margin: unset;
+      max-width: unset;
+    }
+  }
+}
diff --git a/src/renderer/components/+landing-page/landing-page.tsx b/src/renderer/components/+landing-page/landing-page.tsx
index 3bb50e97e5..ea222ff43c 100644
--- a/src/renderer/components/+landing-page/landing-page.tsx
+++ b/src/renderer/components/+landing-page/landing-page.tsx
@@ -23,7 +23,7 @@ export class LandingPage extends React.Component {
           Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button.
         </p>
       </div>
-    )
+    );
   }
 
   render() {
@@ -46,11 +46,11 @@ export class LandingPage extends React.Component {
             </p>
           </div>
         </div>
-      )
+      );
     }
 
     return (
-      <PageLayout className="LandingOverview flex column gaps" header={header} provideBackButtonNavigation={false} contentGaps={false}>
+      <PageLayout className="LandingOverview flex" header={header} provideBackButtonNavigation={true} showOnTop={true}>
         <WorkspaceOverview workspace={this.workspace}/>
       </PageLayout>
     );
diff --git a/src/renderer/components/+landing-page/workspace-overview.scss b/src/renderer/components/+landing-page/workspace-overview.scss
index 8b341e62a7..d7b70f8c3a 100644
--- a/src/renderer/components/+landing-page/workspace-overview.scss
+++ b/src/renderer/components/+landing-page/workspace-overview.scss
@@ -1,6 +1,8 @@
 .WorkspaceOverview {
-  background-color: var(--mainBackground);
-  
+  max-height: 50%;
+  .Table {
+    padding-bottom: 60px;
+  }
   .TableCell {
     display: flex;
     align-items: left;
@@ -10,5 +12,17 @@
       flex-grow: 0.2;
       padding: 0;
     }
+
+    &.online {
+      color: var(--colorSuccess);
+    }
   }
-}
\ No newline at end of file
+
+  .TableCell.status {
+    flex: 0.1;
+  }
+
+  .TableCell.version {
+    flex: 0.2;
+  }
+}
diff --git a/src/renderer/components/+landing-page/workspace-overview.tsx b/src/renderer/components/+landing-page/workspace-overview.tsx
index b245c2294b..6f785fe314 100644
--- a/src/renderer/components/+landing-page/workspace-overview.tsx
+++ b/src/renderer/components/+landing-page/workspace-overview.tsx
@@ -8,6 +8,8 @@ import { ClusterItem, WorkspaceClusterStore } from "./workspace-cluster.store";
 import { navigate } from "../../navigation";
 import { clusterViewURL } from "../cluster-manager/cluster-view.route";
 import { WorkspaceClusterMenu } from "./workspace-cluster-menu";
+import { kebabCase } from "lodash";
+import { addClusterURL } from "../+add-cluster";
 
 interface Props {
   workspace: Workspace;
@@ -25,15 +27,15 @@ export class WorkspaceOverview extends Component<Props> {
   showCluster = ({ clusterId }: ClusterItem) => {
     navigate(clusterViewURL({ params: { clusterId } }));
   };
-  
+
   render() {
     const { workspace } = this.props;
     const workspaceClusterStore = new WorkspaceClusterStore(workspace.id);
-    
+
     workspaceClusterStore.loadAll();
 
     return (
-      <ItemListLayout 
+      <ItemListLayout
         renderHeaderTitle={<div>Clusters</div>}
         isClusterScoped
         isSearchable={false}
@@ -42,22 +44,23 @@ export class WorkspaceOverview extends Component<Props> {
         store={workspaceClusterStore}
         sortingCallbacks={{
           [sortBy.name]: (item: ClusterItem) => item.name,
-          [sortBy.contextName]: (item: ClusterItem) => item.cluster.contextName,
           [sortBy.version]: (item: ClusterItem) => item.cluster.version,
         }}
         renderTableHeader={[
           { title: "Name", className: "name", sortBy: sortBy.name },
-          { title: "Context", className: "context", sortBy: sortBy.contextName },
           { title: "Version", className: "version", sortBy: sortBy.version },
           { title: "Status", className: "status" },
         ]}
         renderTableContents={(item: ClusterItem) => [
           item.name,
-          item.cluster.contextName,
           item.cluster.version,
-          item.cluster.online ? "online" : "offline"
+          { title: item.cluster.online ? "online" : "offline", className: kebabCase(item.cluster.online ? "online" : "offline") }
         ]}
         onDetails={this.showCluster}
+        addRemoveButtons={{
+          addTooltip: "Add Cluster",
+          onAdd: () => navigate(addClusterURL()),
+        }}
         renderItemMenu={(clusterItem: ClusterItem) => (
           <WorkspaceClusterMenu clusterItem={clusterItem} workspace={workspace} workspaceClusterStore={workspaceClusterStore}/>
         )}
diff --git a/src/renderer/components/+workspaces/workspaces.tsx b/src/renderer/components/+workspaces/workspaces.tsx
index 9c7167a826..3bea020ef3 100644
--- a/src/renderer/components/+workspaces/workspaces.tsx
+++ b/src/renderer/components/+workspaces/workspaces.tsx
@@ -24,7 +24,7 @@ export class ChooseWorkspace extends React.Component {
       return { value: workspace.id, label: workspace.name };
     });
 
-    options.push({ value: ChooseWorkspace.overviewActionId, label: "Workspace: Overview" });
+    options.push({ value: ChooseWorkspace.overviewActionId, label: "Show current workspace overview ..." });
 
     options.push({ value: ChooseWorkspace.addActionId, label: "Add workspace ..." });