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/+whats-new/index.tsx

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

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

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

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

@@ -0,0 +1,36 @@
+.WhatsNew {
+  $spacing: $padding * 2;
+
+  background: $mainBackground url(../../components/icon/crane.svg) no-repeat;
+  background-position: 0 35%;
+  background-size: 85%;
+  background-clip: content-box;
+
+  .logo {
+    width: 200px;
+    margin-bottom: $spacing;
+  }
+
+  > .content {
+    @include custom-scrollbar;
+    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

@@ -0,0 +1,43 @@
+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 { Trans } from "@lingui/macro";
+import marked from "marked"
+
+@observer
+export class WhatsNew extends React.Component {
+  releaseNotes = fs.readFileSync(path.join(__static, "RELEASE_NOTES.md")).toString();
+
+  ok = () => {
+    navigate("/");
+    userStore.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={<Trans>Ok, got it!</Trans>}
+            onClick={this.ok}
+          />
+        </div>
+      </div>
+    );
+  }
+}