added landing-page

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

src/renderer/_vue/components/LandingPage.vue

@@ -47,7 +47,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: #282b2f url(../assets/img/crane.svg) no-repeat;
+  background: #282b2f url(../../components/icon/crane.svg) no-repeat;
   background-position: 0px 35%;
   background-size: 85%;
   background-clip: content-box;

src/renderer/_vue/components/WhatsNewPage.vue

@@ -4,7 +4,7 @@
       <div class="row">
         <div class="col-md whats-new-text-wrapper">
           <div class="logo">
-            <img src="../assets/img/lens-logo.svg">
+            <img src="../../components/icon/lens-logo.svg">
           </div>
           <!-- Safe to use v-html as we self generate the html locally only -->
           <!-- eslint-disable-next-line vue/no-v-html -->
@@ -59,7 +59,7 @@ export default {
 <style lang="scss" scoped>
 
 .content {
-  background: #282b2f url(../assets/img/crane.svg) no-repeat;
+  background: #282b2f url(../../components/icon/crane.svg) no-repeat;
   background-position: 0px 35%;
   background-size: 85%;
   background-clip: content-box;

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

@@ -1 +1,2 @@
+export * from "./landing-page.route"
 export * from "./landing-page"

src/renderer/components/+landing-page/landing-page.route.ts

@@ -0,0 +1,8 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const landingRoute: RouteProps = {
+  path: "/landing"
+}
+
+export const landingURL = buildURL(landingRoute.path)

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

@@ -1,3 +1,15 @@
 .LandingPage {
+  height: 100%;
+  background: #282b2f url(../../components/icon/crane.svg) no-repeat;
+  background-position: 0 35%;
+  background-size: 85%;
+  background-clip: content-box;
+  text-align: center;
 
+  h1 {
+    color: white;
+    text-align: center;
+    font-size: 28px;
+    font-weight: normal;
+  }
 }

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

@@ -1,13 +1,25 @@
 import "./landing-page.scss"
 import React from "react";
 import { observer } from "mobx-react";
+import { clusterStore } from "../../../common/cluster-store";
+import { Trans } from "@lingui/macro";
 
 @observer
 export class LandingPage extends React.Component {
   render() {
+    const noClusters = !clusterStore.clusters.size;
     return (
-      <div className="LandingPage">
-        LandingPage
+      <div className="LandingPage flex">
+        {noClusters && (
+          <div className="no-clusters flex column gaps box center">
+            <h1>
+              <Trans>Welcome!</Trans>
+            </h1>
+            <p>
+              <Trans>Get started by associating one or more clusters to Lens.</Trans>
+            </p>
+          </div>
+        )}
       </div>
     )
   }

src/renderer/components/app.tsx

@@ -31,7 +31,7 @@ import { CustomResources } from "./+custom-resources/custom-resources";
 import { crdRoute } from "./+custom-resources";
 import { isAllowedResource } from "../api/rbac";
 import { AddCluster, addClusterRoute } from "./+add-cluster";
-import { LandingPage } from "./+landing-page";
+import { LandingPage, landingRoute } from "./+landing-page";
 import { clusterStore } from "../../common/cluster-store";
 import { ClusterSettings, clusterSettingsRoute } from "./+cluster-settings";
 
@@ -46,13 +46,14 @@ export class App extends React.Component {
   }
 
   render() {
-    const showLanding = clusterStore.clusters.size === 0;
+    const noClusters = clusterStore.clusters.size === 0;
     const homeUrl = isAllowedResource(["events", "nodes", "pods"]) ? clusterURL() : workloadsURL();
     return (
       <Fragment>
         <Switch>
           <Switch>
-            {showLanding && <Route component={LandingPage}/>}
+            {noClusters && <Route component={LandingPage}/>}
+            <Route component={LandingPage} {...landingRoute}/>
             <Route component={AddCluster} {...addClusterRoute}/>
             <Route component={ClusterSettings} {...clusterSettingsRoute}/>
             <Route component={Cluster} {...clusterRoute}/>

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

@@ -15,6 +15,7 @@ import { Badge } from "../badge";
 import { navigate } from "../../navigation";
 import { addClusterURL } from "../+add-cluster";
 import { clusterSettingsURL } from "../+cluster-settings";
+import { landingURL } from "../+landing-page";
 
 // fixme: allow to rearrange clusters with drag&drop
 // fixme: make add-icon's tooltip visible on init
@@ -45,12 +46,13 @@ export class ClustersMenu extends React.Component<Props> {
       label: _i18n._(t`Settings`),
       click: () => navigate(clusterSettingsURL())
     }));
+
+    // fixme: disconnect cluster
     if (cluster.initialized) {
       menu.append(new MenuItem({
         label: _i18n._(t`Disconnect`),
         click: () => {
-          console.log(`//fixme: disconnect cluster`, cluster);
-          navigate("/");
+          navigate(landingURL());
         }
       }))
     }