added back the landing page startup hint

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

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

@@ -1,4 +1,39 @@
 .PageLayout.LandingPage {
   --width: 80%;
   text-align: center;
+
+  .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,22 +1,37 @@
 import "./landing-page.scss";
 import React from "react";
+import { observable } from "mobx";
 import { observer } from "mobx-react";
+import { clusterStore } from "../../../common/cluster-store";
 import { Workspace, workspaceStore } from "../../../common/workspace-store";
 import { WorkspaceOverview } from "./workspace-overview";
 import { PageLayout } from "../layout/page-layout";
 
 @observer
 export class LandingPage extends React.Component {
+  @observable showHint = true;
 
   get workspace(): Workspace {
     return workspaceStore.currentWorkspace;
   }
   
   render() {
+    const clusters = clusterStore.getByWorkspaceId(this.workspace.id);
+    const noClustersInScope = !clusters.length;
+    const showStartupHint = this.showHint && noClustersInScope;
+
     const header = <h2>Workspace: {this.workspace.name}</h2>;
 
     return (
       <PageLayout className="LandingPage flex column gaps" header={header} provideBackButtonNavigation={false} contentGaps={false}>
+        {showStartupHint && (
+          <div className="startup-hint flex column gaps" onMouseEnter={() => this.showHint = false}>
+            <p>This is the quick launch menu.</p>
+            <p>
+              Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button.
+            </p>
+          </div>
+        )}
         <WorkspaceOverview workspace={this.workspace}/>
       </PageLayout>
     );