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/+catalog/catalog.tsx

@@ -13,7 +13,6 @@ import { CatalogEntityContextMenu, CatalogEntityContextMenuContext, catalogEntit
 import { Badge } from "../badge";
 import { HotbarStore } from "../../../common/hotbar-store";
 import { autobind } from "../../utils";
-import { Notifications } from "../notifications";
 import { ConfirmDialog } from "../confirm-dialog";
 import { Tab, Tabs } from "../tabs";
 import { catalogCategoryRegistry } from "../../../common/catalog";
@@ -45,15 +44,6 @@ export class Catalog extends React.Component {
         }
       }, { fireImmediately: true })
     ]);
-
-    setTimeout(() => {
-      if (this.catalogEntityStore.items.length === 0) {
-        Notifications.info(<><b>Welcome!</b><p>Get started by associating one or more clusters to Lens</p></>, {
-          timeout: 30_000,
-          id: "catalog-welcome"
-        });
-      }
-    }, 2_000);
   }
 
   addToHotbar(item: CatalogEntityItem) {

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>
+    );
+  }
+}

src/renderer/components/+whats-new/index.tsx

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

src/renderer/components/+whats-new/whats-new.route.ts

@@ -1,8 +0,0 @@
-import type { RouteProps } from "react-router";
-import { buildURL } from "../../../common/utils/buildUrl";
-
-export const whatsNewRoute: RouteProps = {
-  path: "/what-s-new"
-};
-
-export const whatsNewURL = buildURL(whatsNewRoute.path);

src/renderer/components/+whats-new/whats-new.scss

@@ -1,50 +0,0 @@
-.WhatsNew {
-  $spacing: $padding * 2;
-
-  &::after {
-    content: "";
-    background: url(../../components/icon/crane.svg) no-repeat;
-    background-position: 0 35%;
-    background-size: 85%;
-    background-clip: content-box;
-    opacity: .75;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    position: absolute;
-    z-index: -1;
-
-    .theme-light & {
-      opacity: 0.2;
-    }
-  }
-
-  .logo {
-    width: 200px;
-    margin-bottom: $spacing;
-  }
-
-  > .content {
-    overflow: auto;
-    margin-top: $spacing;
-    padding: $spacing * 2;
-
-    a {
-      color: $colorInfo;
-      text-decoration: underline;
-    }
-
-    ul {
-      list-style: disc inside;
-      line-height: 120%;
-      padding-left: $spacing * 2;
-    }
-  }
-
-  > .bottom {
-    text-align: center;
-    padding: $spacing;
-    background: $contentColor;
-  }
-}

src/renderer/components/+whats-new/whats-new.tsx

@@ -1,43 +0,0 @@
-import "./whats-new.scss";
-import fs from "fs";
-import path from "path";
-import React from "react";
-import { observer } from "mobx-react";
-import { UserStore } from "../../../common/user-store";
-import { navigate } from "../../navigation";
-import { Button } from "../button";
-import marked from "marked";
-
-@observer
-export class WhatsNew extends React.Component {
-  releaseNotes = fs.readFileSync(path.join(__static, "RELEASE_NOTES.md")).toString();
-
-  ok = () => {
-    navigate("/");
-    UserStore.getInstance().saveLastSeenAppVersion();
-  };
-
-  render() {
-    const logo = require("../../components/icon/lens-logo.svg");
-    const releaseNotes = marked(this.releaseNotes);
-
-    return (
-      <div className="WhatsNew flex column">
-        <div className="content box grow">
-          <img className="logo" src={logo} alt="Lens"/>
-          <div
-            className="release-notes flex column gaps"
-            dangerouslySetInnerHTML={{ __html: releaseNotes }}
-          />
-        </div>
-        <div className="bottom">
-          <Button
-            primary autoFocus
-            label="Ok, got it!"
-            onClick={this.ok}
-          />
-        </div>
-      </div>
-    );
-  }
-}

src/renderer/components/cluster-manager/bottom-bar.tsx

@@ -48,7 +48,7 @@ export class BottomBar extends React.Component {
       <div className="BottomBar flex gaps">
         <div id="catalog-link" data-test-id="catalog-link" className="flex gaps align-center" onClick={() => navigate(catalogURL())}>
           <Icon smallest material="view_list"/>
-          <span className="workspace-name" data-test-id="current-workspace-name">Catalog</span>
+          <span className="catalog-link" data-test-id="catalog-link">Catalog</span>
         </div>
         {this.renderRegisteredItems()}
       </div>

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

@@ -5,7 +5,7 @@ import { Redirect, Route, Switch } from "react-router";
 import { comparer, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { BottomBar } from "./bottom-bar";
-import { Catalog, catalogRoute, catalogURL } from "../+catalog";
+import { Catalog, catalogRoute } from "../+catalog";
 import { Preferences, preferencesRoute } from "../+preferences";
 import { AddCluster, addClusterRoute } from "../+add-cluster";
 import { ClusterView } from "./cluster-view";
@@ -17,6 +17,7 @@ import { Extensions, extensionsRoute } from "../+extensions";
 import { getMatchedClusterId } from "../../navigation";
 import { HotbarMenu } from "../hotbar/hotbar-menu";
 import { EntitySettings, entitySettingsRoute } from "../+entity-settings";
+import { Welcome, welcomeRoute, welcomeURL } from "../+welcome";
 
 @observer
 export class ClusterManager extends React.Component {
@@ -43,16 +44,13 @@ export class ClusterManager extends React.Component {
     lensViews.clear();
   }
 
-  get startUrl() {
-    return catalogURL();
-  }
-
   render() {
     return (
       <div className="ClusterManager">
         <main>
           <div id="lens-views"/>
           <Switch>
+            <Route component={Welcome} {...welcomeRoute} />
             <Route component={Catalog} {...catalogRoute} />
             <Route component={Preferences} {...preferencesRoute} />
             <Route component={Extensions} {...extensionsRoute} />
@@ -65,7 +63,7 @@ export class ClusterManager extends React.Component {
                   <Route key={url} path={url} component={Page} />
                 ))
             }
-            <Redirect exact to={this.startUrl}/>
+            <Redirect exact to={welcomeURL()}/>
           </Switch>
         </main>
         <HotbarMenu/>