show startup-hint tooltip when no-clusters

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

src/renderer/components/+add-cluster/add-cluster.scss

@@ -10,7 +10,7 @@
   > .content {
     padding: var(--flex-gap);
     margin-right: var(--flex-gap);
-    background-color: $contentColor;
+    background-color: var(--clusters-menu-bgc);
     border-radius: $radius;
   }
 

src/renderer/components/app.scss

@@ -15,6 +15,7 @@
 :root {
   --mainBackground: #1e2124;
   --textColorPrimary: #87909c;
+  --clusters-menu-bgc: #252729;
 }
 
 ::selection {

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

@@ -1,26 +1,50 @@
 .ClustersMenu {
-  // fixme: uncomment when tooltips handled correctly (rendered outside of parent)
-  //@include hidden-scrollbar;
-
   --flex-gap: #{$padding * 2};
-  --menu-bgc: #252729;
 
+  position: relative;
   padding: var(--flex-gap);
-  padding-top: calc(var(--flex-gap) + 20px); // add extra-space for "traffic-light" buttons (mac)
+  background: var(--clusters-menu-bgc);
-  background: var(--menu-bgc);
 
-  #add-cluster {
+  > .startup-tooltip {
-    position: relative;
+    $bgc: $mainBackground;
+    $arrowSize: 10px;
 
-    .TooltipContent {
+    position: absolute;
-      min-width: 300px;
+    top: 20px;
-      text-align: left;
+    left: 100%;
+    margin: $padding;
+    padding: $padding * 2;
+    width: 320px;
+    background: $bgc;
+    z-index: 100;
+    color: white;
+    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%;
     }
+  }
+
+  > .clusters {
+    //@include hidden-scrollbar;
+    //flex: 1;
+  }
+
+  > .add-cluster {
+    position: relative;
 
     .Icon {
       border-radius: $radius;
       padding: $padding / 3;
-      color: var(--menu-bgc) !important;
+      color: var(--clusters-menu-bgc) !important;
       background: white !important;
       font-weight: bold;
       cursor: pointer;

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

@@ -2,6 +2,7 @@ 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";
@@ -12,14 +13,13 @@ import { ClusterIcon } from "../+cluster-settings/cluster-icon";
 import { Icon } from "../icon";
 import { cssNames, IClassName } from "../../utils";
 import { Badge } from "../badge";
-import { navigate } from "../../navigation";
+import { navigate, navigation } from "../../navigation";
 import { addClusterURL } from "../+add-cluster";
 import { clusterSettingsURL } from "../+cluster-settings";
 import { landingURL } from "../+landing-page";
 import { Tooltip, TooltipContent } from "../tooltip";
 
 // fixme: allow to rearrange clusters with drag&drop
-// fixme: make add-icon's tooltip visible on init
 
 interface Props {
   className?: IClassName;
@@ -27,6 +27,8 @@ interface Props {
 
 @observer
 export class ClustersMenu extends React.Component<Props> {
+  @observable showHint = true;
+
   showCluster = (clusterId: ClusterId) => {
     if (clusterStore.activeClusterId === clusterId) {
       navigate("/"); // redirect to index
@@ -67,31 +69,45 @@ export class ClustersMenu extends React.Component<Props> {
     const { newContexts } = userStore;
     const { currentWorkspaceId } = workspaceStore;
     const clusters = clusterStore.getByWorkspaceId(currentWorkspaceId);
+    const noClusters = !clusterStore.clusters.size;
+    const isLanding = navigation.getPath() === landingURL();
+    const showStartupHint = this.showHint && isLanding && noClusters;
     return (
-      <div className={cssNames("ClustersMenu flex gaps column", className)}>
+      <div
-        {clusters.map(cluster => {
+        className={cssNames("ClustersMenu flex gaps column", className)}
-          return (
+        onMouseEnter={() => this.showHint = false}
-            <ClusterIcon
+      >
-              key={cluster.id}
+        {showStartupHint && (
-              showErrors={true}
+          <div className="startup-tooltip flex column gaps">
-              cluster={cluster}
+            <p><Trans>This is the quick launch menu.</Trans></p>
-              isActive={cluster.id === clusterStore.activeClusterId}
+            <p>
-              onClick={() => this.showCluster(cluster.id)}
-              onContextMenu={() => this.showContextMenu(cluster)}
-            />
-          )
-        })}
-        <div id="add-cluster" onClick={this.addCluster}>
-          <Tooltip htmlFor="add-cluster" position={{ right: true }}>
-            <TooltipContent>
-              <Trans>This is the quick launch menu.</Trans>
-              <br/><br/>
               <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">
+          {clusters.map(cluster => {
+            return (
+              <ClusterIcon
+                key={cluster.id}
+                showErrors={true}
+                cluster={cluster}
+                isActive={cluster.id === clusterStore.activeClusterId}
+                onClick={() => this.showCluster(cluster.id)}
+                onContextMenu={() => this.showContextMenu(cluster)}
+              />
+            )
+          })}
+        </div>
+        <div className="add-cluster" onClick={this.addCluster}>
+          <Tooltip htmlFor="add-cluster-icon" position={{ right: true }}>
+            <TooltipContent nowrap>
+              <Trans>Add Cluster</Trans>
             </TooltipContent>
           </Tooltip>
-          <Icon big material="add"/>
+          <Icon big material="add" id="add-cluster-icon"/>
           {newContexts.length > 0 && (
             <Badge className="counter" label={newContexts.length}/>
           )}

src/renderer/components/tooltip/tooltip.tsx

@@ -7,9 +7,8 @@ import { createPortal } from "react-dom"
 import { autobind, cssNames } from "../../utils";
 import { Animate } from "../animate";
 
-// todo: refactor
+// todo: refactor -- better positioning + remove "flying effect"
-// todo: add flag to show visible tooltip by default (until mouse-over the target)
+// fixme: always render outside of parent element ("overflow: auto" should not affect tooltip)
-// fixme: better positioning + remove "flying effect"
 
 export interface TooltipProps {
   htmlFor: string;