Extension support page (#1112)

Signed-off-by: Roman <ixrock@gmail.com>
Co-authored-by: Jim Ehrismann <40840436+jim-docker@users.noreply.github.com>

extensions/example-extension/renderer.tsx

@@ -10,7 +10,7 @@ export default class ExampleExtension extends LensRendererExtension {
   registerPages(registry: Registry.PageRegistry) {
     this.disposers.push(
       registry.add({
-        type: Registry.DynamicPageType.CLUSTER,
+        type: Registry.PageRegistryType.CLUSTER,
         path: "/extension-example",
         title: "Example Extension",
         components: {

extensions/support-page/main.ts

@@ -0,0 +1,23 @@
+import { LensMainExtension, Registry, windowManager } from "@k8slens/extensions";
+import { supportPageURL } from "./src/support.route";
+
+export default class SupportPageMainExtension extends LensMainExtension {
+  async onActivate() {
+    console.log("support page extension activated")
+  }
+
+  async registerAppMenus(registry: Registry.MenuRegistry) {
+    this.disposers.push(
+      registry.add({
+        parentId: "help",
+        label: "Support",
+        click() {
+          windowManager.navigate({
+            channel: "menu:navigate", // fixme: use windowManager.ensureMainWindow from Tray's PR
+            url: supportPageURL(),
+          });
+        }
+      })
+    )
+  }
+}

extensions/support-page/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "lens-support-page",
+  "version": "0.1.0",
+  "description": "Lens support page",
+  "main": "dist/main.js",
+  "renderer": "dist/renderer.js",
+  "scripts": {
+    "build": "webpack -p",
+    "dev": "webpack --watch"
+  },
+  "dependencies": {},
+  "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",
+    "ts-loader": "^8.0.4",
+    "ts-node": "^9.0.0",
+    "typescript": "^4.0.3",
+    "webpack": "^4.44.2"
+  }
+}

extensions/support-page/renderer.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Component, LensRendererExtension, Navigation, Registry } from "@k8slens/extensions";
+import { supportPageRoute, supportPageURL } from "./src/support.route";
+import { Support } from "./src/support";
+
+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,
+        }
+      })
+    )
+  }
+
+  registerStatusBarIcon(registry: Registry.StatusBarRegistry) {
+    this.disposers.push(
+      registry.add({
+        icon: (
+          <Component.Icon
+            material="support"
+            tooltip="Support"
+            onClick={() => Navigation.navigate(supportPageURL())}
+          />
+        )
+      })
+    )
+  }
+}

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 "@k8slens/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>
+    );
+  }
+}

extensions/support-page/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "baseUrl": ".",
+    "module": "CommonJS",
+    "target": "ES2017",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "moduleResolution": "Node",
+    "sourceMap": false,
+    "declaration": false,
+    "strict": false,
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "jsx": "react",
+    "paths": {
+      "*": [
+        "node_modules/*",
+        "../../types/*"
+      ]
+    }
+  },
+  "include": [
+    "renderer.ts",
+    "../../src/extensions/npm/**/*.d.ts",
+    "src/**/*"
+  ]
+}

extensions/support-page/webpack.config.ts

@@ -0,0 +1,68 @@
+import path from "path"
+
+const outputPath = path.resolve(__dirname, 'dist');
+
+// TODO: figure out how to share base TS and Webpack configs from Lens (npm, filesystem, etc?)
+const lensExternals = {
+  "@k8slens/extensions": "var global.LensExtensions",
+  "react": "var global.React",
+  "mobx": "var global.Mobx",
+  "mobx-react": "var global.MobxReact",
+};
+
+export default [
+  {
+    entry: './main.ts',
+    context: __dirname,
+    target: "electron-main",
+    mode: "production",
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+      ],
+    },
+    externals: [
+      lensExternals,
+    ],
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js'],
+    },
+    output: {
+      libraryTarget: "commonjs2",
+      globalObject: "this",
+      filename: 'main.js',
+      path: outputPath,
+    },
+  },
+  {
+    entry: './renderer.tsx',
+    context: __dirname,
+    target: "electron-renderer",
+    mode: "production",
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+      ],
+    },
+    externals: [
+      lensExternals,
+    ],
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js'],
+    },
+    output: {
+      libraryTarget: "commonjs2",
+      globalObject: "this",
+      filename: 'renderer.js',
+      path: outputPath,
+    },
+  },
+];

extensions/telemetry/package.json

@@ -9,8 +9,8 @@
     "styles": []
   },
   "scripts": {
-    "build": "webpack --config webpack.config.js",
-    "dev": "npm run build --watch"
+    "build": "webpack -p",
+    "dev": "webpack --watch"
   },
   "dependencies": {},
   "devDependencies": {

extensions/telemetry/tsconfig.json

@@ -26,5 +26,5 @@
     "renderer.ts",
     "../../src/extensions/npm/**/*.d.ts",
     "src/**/*"
-  ],
+  ]
 }