Extensible welcome page (#2637)

* welcome/landing page

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix integration tests

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/components/+welcome/index.ts

@@ -0,0 +1,2 @@
+export * from "./welcome";
+export * from "./welcome.route";

src/renderer/components/+welcome/welcome.route.ts

@@ -0,0 +1,8 @@
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
+
+export const welcomeRoute: RouteProps = {
+  path: "/welcome"
+};
+
+export const welcomeURL = buildURL(welcomeRoute.path);

src/renderer/components/+welcome/welcome.scss

@@ -0,0 +1,49 @@
+.Welcome {
+  text-align: center;
+  width: 100%;
+  z-index: 1;
+
+  .box {
+    width: 320px;
+  }
+
+  h2 {
+    color: var(--textColorAccent);
+    font-weight: 600;
+    margin-top: 15px;
+    margin-bottom: 20px;
+  }
+
+  p {
+    line-height: 1.5;
+  }
+
+  ul {
+    width: 200px;
+    margin-top: 20px;
+
+    li {
+      text-align: left;
+      line-height: 1.5;
+      background-color: var(--layoutBackground);
+      padding: 7px;
+      border-radius: 4px;
+      margin-bottom: 7px;
+      cursor: pointer;
+
+      a {
+        margin-left: 10px;
+        border-bottom: none;
+      }
+    }
+    li:hover {
+      color: var(--textColorAccent);
+    }
+  }
+
+  .Icon.logo {
+    width: 200px;
+    height: 200px;
+    color: var(--primary);
+  }
+}

src/renderer/components/+welcome/welcome.tsx

@@ -0,0 +1,58 @@
+import "./welcome.scss";
+import React from "react";
+import { observer } from "mobx-react";
+import { Icon } from "../icon";
+import { productName, slackUrl } from "../../../common/vars";
+import { welcomeMenuRegistry } from "../../../extensions/registries";
+import { navigate } from "../../navigation";
+import { catalogURL } from "../+catalog";
+import { preferencesURL } from "../+preferences";
+
+@observer
+export class Welcome extends React.Component {
+
+  componentDidMount() {
+    if (welcomeMenuRegistry.getItems().find((item) => item.title === "Browse Your Catalog")) {
+      return;
+    }
+
+    welcomeMenuRegistry.add({
+      title: "Browse Your Catalog",
+      icon: "view_list",
+      click: () => navigate(catalogURL())
+    });
+
+    if (welcomeMenuRegistry.getItems().length === 1) {
+      welcomeMenuRegistry.add({
+        title: "Configure Preferences",
+        icon: "settings",
+        click: () => navigate(preferencesURL())
+      });
+    }
+  }
+
+  render() {
+    return (
+      <div className="Welcome flex justify-center align-center">
+        <div className="box">
+          <Icon svg="logo-lens" className="logo" />
+
+          <h2>Welcome to {productName} 5 Beta!</h2>
+
+          <p>
+            Here are some steps to help you get started with {productName} 5 Beta.
+            If you have any questions or feedback, please join our <a href={slackUrl} target="_blank" rel="noreferrer">Lens Community slack channel</a>.
+          </p>
+
+          <ul className="box">
+            { welcomeMenuRegistry.getItems().map((item, index) => (
+              <li key={index} className="flex grid-12" onClick={() => item.click()}>
+                <Icon material={item.icon} className="box col-1" /> <a className="box col-10">{item.title}</a> <Icon material="navigate_next" className="box col-1" />
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}