From 717dfff8518a87a6af93fd7d80d0b497b8ed3c82 Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Wed, 15 Jul 2020 14:37:18 +0300
Subject: [PATCH] added landing-page

Signed-off-by: Roman <ixrock@gmail.com>
---
 src/renderer/_vue/components/LandingPage.vue     |  2 +-
 src/renderer/_vue/components/WhatsNewPage.vue    |  4 ++--
 src/renderer/components/+landing-page/index.tsx  |  1 +
 .../+landing-page/landing-page.route.ts          |  8 ++++++++
 .../components/+landing-page/landing-page.scss   | 12 ++++++++++++
 .../components/+landing-page/landing-page.tsx    | 16 ++++++++++++++--
 src/renderer/components/app.tsx                  |  7 ++++---
 .../components/cluster-manager/clusters-menu.tsx |  6 ++++--
 .../assets/img => components/icon}/crane.svg     |  0
 .../assets/img => components/icon}/lens-logo.svg |  0
 10 files changed, 46 insertions(+), 10 deletions(-)
 create mode 100644 src/renderer/components/+landing-page/landing-page.route.ts
 rename src/renderer/{_vue/assets/img => components/icon}/crane.svg (100%)
 rename src/renderer/{_vue/assets/img => components/icon}/lens-logo.svg (100%)

diff --git a/src/renderer/_vue/components/LandingPage.vue b/src/renderer/_vue/components/LandingPage.vue
index 3bf08d845d..fa2e6ca22c 100644
--- a/src/renderer/_vue/components/LandingPage.vue
+++ b/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;
diff --git a/src/renderer/_vue/components/WhatsNewPage.vue b/src/renderer/_vue/components/WhatsNewPage.vue
index 15ea82a101..8eb07cf23e 100644
--- a/src/renderer/_vue/components/WhatsNewPage.vue
+++ b/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;
diff --git a/src/renderer/components/+landing-page/index.tsx b/src/renderer/components/+landing-page/index.tsx
index e3632f1b0f..36f2dce350 100644
--- a/src/renderer/components/+landing-page/index.tsx
+++ b/src/renderer/components/+landing-page/index.tsx
@@ -1 +1,2 @@
+export * from "./landing-page.route"
 export * from "./landing-page"
\ No newline at end of file
diff --git a/src/renderer/components/+landing-page/landing-page.route.ts b/src/renderer/components/+landing-page/landing-page.route.ts
new file mode 100644
index 0000000000..3b3e17a6c2
--- /dev/null
+++ b/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)
diff --git a/src/renderer/components/+landing-page/landing-page.scss b/src/renderer/components/+landing-page/landing-page.scss
index 84e1ac2517..665527947a 100644
--- a/src/renderer/components/+landing-page/landing-page.scss
+++ b/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;
+  }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+landing-page/landing-page.tsx b/src/renderer/components/+landing-page/landing-page.tsx
index f5bf542d24..e1753c2b32 100644
--- a/src/renderer/components/+landing-page/landing-page.tsx
+++ b/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>
     )
   }
diff --git a/src/renderer/components/app.tsx b/src/renderer/components/app.tsx
index c1c011d0d8..991c6a507a 100755
--- a/src/renderer/components/app.tsx
+++ b/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}/>
diff --git a/src/renderer/components/cluster-manager/clusters-menu.tsx b/src/renderer/components/cluster-manager/clusters-menu.tsx
index 589f78d453..a2f072dd35 100644
--- a/src/renderer/components/cluster-manager/clusters-menu.tsx
+++ b/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());
         }
       }))
     }
diff --git a/src/renderer/_vue/assets/img/crane.svg b/src/renderer/components/icon/crane.svg
similarity index 100%
rename from src/renderer/_vue/assets/img/crane.svg
rename to src/renderer/components/icon/crane.svg
diff --git a/src/renderer/_vue/assets/img/lens-logo.svg b/src/renderer/components/icon/lens-logo.svg
similarity index 100%
rename from src/renderer/_vue/assets/img/lens-logo.svg
rename to src/renderer/components/icon/lens-logo.svg