support-page extension -- part 2

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

extensions/support-page/main.ts

@@ -1,11 +1,11 @@
-import { LensMainExtension } from "@lens/extensions";
+import { LensMainExtension, Registry } from "@lens/extensions";
 
 export default class SupportPageMainExtension extends LensMainExtension {
   async onActivate() {
     console.log("support page extension activated")
   }
 
-  async registerAppMenus() {
+  async registerAppMenus(registry: Registry.MenuRegistry) {
     // TODO: allow to modify global menu item "Help -> Support"
   }
 }

extensions/support-page/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "lens-support",
+  "name": "lens-support-page",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -10,6 +10,12 @@
       "integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==",
       "dev": true
     },
+    "@types/history": {
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz",
+      "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==",
+      "dev": true
+    },
     "@types/node": {
       "version": "14.11.11",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.11.11.tgz",
@@ -32,6 +38,16 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-router": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.8.tgz",
+      "integrity": "sha512-HzOyJb+wFmyEhyfp4D4NYrumi+LQgQL/68HvJO+q6XtuHSDvw6Aqov7sCAhjbNq3bUPgPqbdvjXC5HeB2oEAPg==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*"
+      }
+    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",

extensions/support-page/package.json

@@ -12,6 +12,7 @@
   "devDependencies": {
     "@types/node": "^14.11.11",
     "@types/react": "^16.9.53",
+    "@types/react-router": "^5.1.8",
     "@types/webpack": "^4.41.17",
     "mobx": "^5.15.5",
     "react": "^16.13.1",

extensions/support-page/renderer.tsx

@@ -1,7 +1,22 @@
-import { LensRendererExtension } from "@lens/ui-extensions";
+import { LensRendererExtension, Registry } from "@lens/ui-extensions";
+import { Support } from "./src/support";
+import { supportPageRoute, supportPageURL } from "./src/support.route";
 
 export default class SupportPageRendererExtension extends LensRendererExtension {
   async onActivate() {
     console.log("support page extension activated")
   }
+
+  registerPages(registry: Registry.PageRegistry) {
+    this.disposers.push(
+      registry.add({
+        ...supportPageRoute,
+        type: Registry.PageRegistryType.GLOBAL,
+        url: supportPageURL(),
+        components: {
+          Page: Support,
+        }
+      })
+    )
+  }
 }

extensions/support-page/src/support.route.ts

@@ -0,0 +1,7 @@
+import type { RouteProps } from "react-router";
+
+export const supportPageRoute: RouteProps = {
+  path: "/support"
+}
+
+export const supportPageURL = () => supportPageRoute.path.toString();

extensions/support-page/src/support.tsx

@@ -0,0 +1,29 @@
+// TODO: figure out how to consume styles / handle import "./support.scss"
+// TODO: support localization / figure out how to extract / consume i18n strings
+
+import React from "react"
+import { observer } from "mobx-react"
+import { CommonVars, Component } from "@lens/ui-extensions";
+
+@observer
+export class Support extends React.Component {
+  render() {
+    const { PageLayout } = Component;
+    const { slackUrl, issuesTrackerUrl } = CommonVars;
+    return (
+      <PageLayout showOnTop className="Support" header={<h2>Support</h2>}>
+        <h2>Community Slack Channel</h2>
+        <p>
+          Ask a question, see what's being discussed, join the conversation <a href={slackUrl} target="_blank">here</a>
+        </p>
+
+        <h2>Report an Issue</h2>
+        <p>
+          Review existing issues or open a new one <a href={issuesTrackerUrl} target="_blank">here</a>
+        </p>
+
+        {/*<h2><Trans>Commercial Support</Trans></h2>*/}
+      </PageLayout>
+    );
+  }
+}