- fix: too narrow sidebar without clusters #755 (#765)

- fix: navigate to landing on workspace switch

Signed-off-by: Roman <ixrock@gmail.com>

src/common/workspace-store.ts

@@ -1,6 +1,8 @@
 import { action, computed, observable, toJS } from "mobx";
 import { BaseStore } from "./base-store";
 import { clusterStore } from "./cluster-store"
+import { landingURL } from "../renderer/components/+landing-page/landing-page.route";
+import { navigate } from "../renderer/navigation";
 
 export type WorkspaceId = string;
 
@@ -50,12 +52,18 @@ export class WorkspaceStore extends BaseStore<WorkspaceStoreModel> {
   }
 
   @action
-  setActive(id = WorkspaceStore.defaultId) {
+  setActive(id = WorkspaceStore.defaultId, { redirectToLanding = true, resetActiveCluster = true } = {}) {
+    if (id === this.currentWorkspaceId) return;
     if (!this.getById(id)) {
       throw new Error(`workspace ${id} doesn't exist`);
     }
-
     this.currentWorkspaceId = id;
+    if (resetActiveCluster) {
+      clusterStore.setActive(null)
+    }
+    if (redirectToLanding) {
+      navigate(landingURL())
+    }
   }
 
   @action

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

@@ -9,7 +9,7 @@
     background-position: 0 35%;
     background-size: 85%;
     background-clip: content-box;
-    opacity: 1;
+    opacity: .75;
     top: 0;
     left: 0;
     bottom: 0;
@@ -21,4 +21,39 @@
       opacity: 0.2;
     }
   }
+
+  .startup-hint {
+    $bgc: $mainBackground;
+    $arrowSize: 10px;
+
+    position: absolute;
+    left: 0;
+    top: 25px;
+    margin: $padding;
+    padding: $padding * 2;
+    width: 320px;
+    background: $bgc;
+    color: $textColorAccent;
+    filter: drop-shadow(0 0px 2px #ffffff33);
+
+    &:before {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-top: $arrowSize solid transparent;
+      border-bottom: $arrowSize solid transparent;
+      border-right: $arrowSize solid $bgc;
+      right: 100%;
+    }
+
+    .theme-light & {
+      filter: drop-shadow(0 0px 2px #777);
+      background: white;
+
+      &:before {
+        border-right-color: white;
+      }
+    }
+  }
 }

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

@@ -1,5 +1,6 @@
 import "./landing-page.scss"
 import React from "react";
+import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { Trans } from "@lingui/macro";
 import { clusterStore } from "../../../common/cluster-store";
@@ -7,11 +8,24 @@ import { workspaceStore } from "../../../common/workspace-store";
 
 @observer
 export class LandingPage extends React.Component {
+  @observable showHint = true;
+
   render() {
     const clusters = clusterStore.getByWorkspaceId(workspaceStore.currentWorkspaceId);
     const noClustersInScope = !clusters.length;
+    const showStartupHint = this.showHint && noClustersInScope;
     return (
       <div className="LandingPage flex">
+        {showStartupHint && (
+          <div className="startup-hint flex column gaps" onMouseEnter={() => this.showHint = false}>
+            <p><Trans>This is the quick launch menu.</Trans></p>
+            <p>
+              <Trans>
+                Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button.
+              </Trans>
+            </p>
+          </div>
+        )}
         {noClustersInScope && (
           <div className="no-clusters flex column gaps box center">
             <h1>

src/renderer/components/cluster-manager/clusters-menu.scss

@@ -5,56 +5,26 @@
   text-align: center;
   background: $clusterMenuBackground;
   border-right: 1px solid $clusterMenuBorderColor;
-  padding-bottom: $spacing;
+  padding: $spacing 0;
+  min-width: 75px;
 
-  .is-mac & {
+  .is-mac &:before {
-    padding-top: $spacing * 2;
+    content: "";
-  }
+    height: 20px; // extra spacing for mac-os "traffic-light" buttons
-
-  > .startup-tooltip {
-    $bgc: $mainBackground;
-    $arrowSize: 10px;
-
-    position: absolute;
-    top: 20px;
-    left: 100%;
-    margin: $padding;
-    padding: $spacing;
-    width: 320px;
-    background: $bgc;
-    color: $textColorAccent;
-    filter: drop-shadow(0 0px 2px #ffffff33);
-    pointer-events: none;
-
-    &:before {
-      content: "";
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-top: $arrowSize solid transparent;
-      border-bottom: $arrowSize solid transparent;
-      border-right: $arrowSize solid $bgc;
-      right: 100%;
-    }
-
-    .theme-light & {
-      filter: drop-shadow(0 0px 2px #777);
-      background: white;
-
-      &:before {
-        border-right-color: white;
-      }
-    }
   }
 
   .clusters {
     @include hidden-scrollbar;
-    padding: 0 $spacing $spacing;
+    padding: 0 $spacing; // extra spacing for cluster-icon's badge
+    margin-bottom: $spacing;
+
+    &:empty {
+      display: none;
+    }
   }
 
   > .add-cluster {
     position: relative;
-    min-width: 43px;
 
     .Icon {
       border-radius: $radius;

src/renderer/components/cluster-manager/clusters-menu.tsx

@@ -2,7 +2,6 @@ import "./clusters-menu.scss"
 import { remote } from "electron"
 import React from "react";
 import { observer } from "mobx-react";
-import { observable } from "mobx";
 import { _i18n } from "../../i18n";
 import { t, Trans } from "@lingui/macro";
 import type { Cluster } from "../../../main/cluster";
@@ -13,7 +12,7 @@ import { ClusterIcon } from "../cluster-icon";
 import { Icon } from "../icon";
 import { cssNames, IClassName } from "../../utils";
 import { Badge } from "../badge";
-import { navigate, navigation } from "../../navigation";
+import { navigate } from "../../navigation";
 import { addClusterURL } from "../+add-cluster";
 import { clusterSettingsURL } from "../+cluster-settings";
 import { landingURL } from "../+landing-page";
@@ -30,8 +29,6 @@ interface Props {
 
 @observer
 export class ClustersMenu extends React.Component<Props> {
-  @observable showHint = true;
-
   showCluster = (clusterId: ClusterId) => {
     clusterStore.setActive(clusterId);
     navigate(clusterViewURL({ params: { clusterId } }));
@@ -94,24 +91,8 @@ export class ClustersMenu extends React.Component<Props> {
     const { className } = this.props;
     const { newContexts } = userStore;
     const clusters = clusterStore.getByWorkspaceId(workspaceStore.currentWorkspaceId);
-    const noClustersInScope = clusters.length === 0;
-    const isLanding = navigation.getPath() === landingURL();
-    const showStartupHint = this.showHint && isLanding && noClustersInScope; // fixme: broken, move to landing.tsx
     return (
-      <div
+      <div className={cssNames("ClustersMenu flex column", className)}>
-        className={cssNames("ClustersMenu flex column", className)}
-        onMouseEnter={() => this.showHint = false}
-      >
-        {showStartupHint && (
-          <div className="startup-tooltip flex column gaps">
-            <p><Trans>This is the quick launch menu.</Trans></p>
-            <p>
-              <Trans>
-                Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button.
-              </Trans>
-            </p>
-          </div>
-        )}
         <div className="clusters flex column gaps">
           {clusters.map(cluster => {
             return (