Migrating Vue components to React and stores refactoring (#585)

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

Co-authored-by: Sebastian Malton <sebastian@malton.name>
Co-authored-by: Sebastian Malton <smalton@mirantis.com>
Co-authored-by: Lauri Nevala <lauri.nevala@gmail.com>
Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

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

@@ -0,0 +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

@@ -0,0 +1,8 @@
+.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;
+}

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

@@ -0,0 +1,28 @@
+import "./landing-page.scss"
+import React from "react";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { clusterStore } from "../../../common/cluster-store";
+import { workspaceStore } from "../../../common/workspace-store";
+
+@observer
+export class LandingPage extends React.Component {
+  render() {
+    const clusters = clusterStore.getByWorkspaceId(workspaceStore.currentWorkspaceId);
+    const noClustersInScope = !clusters.length;
+    return (
+      <div className="LandingPage flex">
+        {noClustersInScope && (
+          <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>
+    )
+  }
+}