Add common app routes to the protocol renderer router (#2272)

docs/clusters/adding-clusters.md

@@ -2,7 +2,7 @@
 
 Add clusters by clicking the **Add Cluster** button in the left-side menu.
 
-1. Click the **Add Cluster** button (indicated with a '+' icon).
+1. Click the **Add Cluster** button (indicated with a '+' icon). Or [click here](lens://app/cluster).
 2. Enter the path to your kubeconfig file. You'll need to have a kubeconfig file for the cluster you want to add. You can either browse for the path from the file system or or enter it directly.
 
 Selected [cluster contexts](https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/#context) are added as a separate item in the left-side cluster menu to allow you to operate easily on multiple clusters and/or contexts.

docs/extensions/README.md

@@ -1,6 +1,9 @@
 # Lens Extension API
 
-Customize and enhance the Lens experience with the Lens Extension API. Use the extension API to create menus or page content. The same extension API was used to create many of Lens's core features.
+Customize and enhance the Lens experience with the Lens Extension API.
+Use the extension API to create menus or page content.
+The same extension API was used to create many of Lens's core features.
+To install your first extension you should goto the [extension page](lens://app/extensions) in lens.
 
 This documentation describes:
 

docs/getting-started/README.md

@@ -72,5 +72,6 @@ To stay current with the Lens features, you can review the [release notes](https
 
 ## Next Steps
 
+- [Launch Lens](lens://app/landing)
 - [Add clusters](../clusters/adding-clusters.md)
 - [Watch introductory videos](./introductory-videos.md)

docs/getting-started/preferences.md

@@ -1,12 +1,11 @@
 # Preferences
 
-
 ## Color Themes
 
 The Color Themes option in Lens preferences lets you set the colors in the Lens user interface to suit your liking.
 
-1. Go to **File** > **Preferences** (**Lens** > **Preferences** on Mac). 
-2. Select your preferred theme from the **Color Theme** dropdown. 
+1. Go to **File** > **Preferences** (**Lens** > **Preferences** on Mac). Or follow [this link](lens://app/preferences?highlight=appearance).
+2. Select your preferred theme from the **Color Theme** dropdown.
 ![Color Theme](images/color-theme.png)
 
 
@@ -19,10 +18,9 @@ Lens collects telemetry data, which is used to help us understand how to improve
 
 If you don't wish to send usage data to Mirantis, you can disable the "Telemetry & Usage Tracking" in the Lens preferences.
 
-1. Go to **File** > **Preferences** (**Lens** > **Preferences** on Mac).
+1. Go to **File** > **Preferences** (**Lens** > **Preferences** on Mac). Or follow [this link](lens://app/preferences?highlight=telemetry-tracking).
 2. Scroll down to **Telemetry & Usage Tracking**
-3. Uncheck **Allow Telemetry & Usage Tracking**. 
+3. Uncheck **Allow Telemetry & Usage Tracking**.
 
 This will silence all telemetry events from Lens going forward. Telemetry information may have been collected and sent up until the point when you disable this setting.
 ![Disable Telemetry & Usage Tracking](images/disabled-telemetry-usage-tracking.png)
-

extensions/telemetry/renderer.tsx

@@ -8,6 +8,7 @@ export default class TelemetryRendererExtension extends LensRendererExtension {
   appPreferences = [
     {
       title: "Telemetry & Usage Tracking",
+      id: "telemetry-tracking",
       components: {
         Hint: () => <TelemetryPreferenceHint/>,
         Input: () => <TelemetryPreferenceInput telemetry={telemetryPreferencesStore}/>

src/common/protocol-handler/router.ts

@@ -184,10 +184,12 @@ export abstract class LensProtocolRouter extends Singleton {
    * @param pathSchema the URI path schema to match against for this handler
    * @param handler a function that will be called if a protocol path matches
    */
-  public addInternalHandler(urlSchema: string, handler: RouteHandler): void {
+  public addInternalHandler(urlSchema: string, handler: RouteHandler): this {
     pathToRegexp(urlSchema); // verify now that the schema is valid
     logger.info(`${LensProtocolRouter.LoggingPrefix}: internal registering ${urlSchema}`);
     this.internalRoutes.set(urlSchema, handler);
+
+    return this;
   }
 
   /**

src/common/utils/buildUrl.ts

@@ -3,14 +3,20 @@ import { compile } from "path-to-regexp";
 export interface IURLParams<P extends object = {}, Q extends object = {}> {
   params?: P;
   query?: Q;
+  fragment?: string;
 }
 
 export function buildURL<P extends object = {}, Q extends object = {}>(path: string | any) {
   const pathBuilder = compile(String(path));
 
-  return function ({ params, query }: IURLParams<P, Q> = {}) {
+  return function ({ params, query, fragment }: IURLParams<P, Q> = {}): string {
     const queryParams = query ? new URLSearchParams(Object.entries(query)).toString() : "";
+    const parts = [
+      pathBuilder(params),
+      queryParams && `?${queryParams}`,
+      fragment && `#${fragment}`,
+    ];
 
-    return pathBuilder(params) + (queryParams ? `?${queryParams}` : "");
+    return parts.filter(Boolean).join("");
   };
 }

src/extensions/registries/app-preference-registry.ts

@@ -8,10 +8,21 @@ export interface AppPreferenceComponents {
 
 export interface AppPreferenceRegistration {
   title: string;
+  id?: string;
   components: AppPreferenceComponents;
 }
 
-export class AppPreferenceRegistry extends BaseRegistry<AppPreferenceRegistration> {
+export interface RegisteredAppPreference extends AppPreferenceRegistration {
+  id: string;
+}
+
+export class AppPreferenceRegistry extends BaseRegistry<AppPreferenceRegistration, RegisteredAppPreference> {
+  getRegisteredItem(item: AppPreferenceRegistration): RegisteredAppPreference {
+    return {
+      id: item.id || item.title.toLowerCase().replace(/[^0-9a-zA-Z]+/g, "-"),
+      ...item,
+    };
+  }
 }
 
 export const appPreferenceRegistry = new AppPreferenceRegistry();

src/renderer/components/+preferences/preferences.tsx

@@ -1,8 +1,8 @@
 import "./preferences.scss";
 
 import React from "react";
-import { computed, observable } from "mobx";
-import { observer } from "mobx-react";
+import { computed, observable, reaction } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
 
 import { userStore } from "../../../common/user-store";
 import { isWindows } from "../../../common/vars";
@@ -16,6 +16,7 @@ import { Select, SelectOption } from "../select";
 import { HelmCharts } from "./helm-charts";
 import { KubectlBinaries } from "./kubectl-binaries";
 import { ScrollSpy } from "../scroll-spy/scroll-spy";
+import { navigation } from "../../navigation";
 
 @observer
 export class Preferences extends React.Component {
@@ -29,6 +30,21 @@ export class Preferences extends React.Component {
     }));
   }
 
+  componentDidMount() {
+    disposeOnUnmount(this, [
+      reaction(() => navigation.location.hash, hash => {
+        const fragment = hash.slice(1); // hash is /^(#\w.)?$/
+
+        if (fragment) {
+          // ignore empty framents
+          document.getElementById(fragment)?.scrollIntoView();
+        }
+      }, {
+        fireImmediately: true
+      })
+    ]);
+  }
+
   render() {
     const { preferences } = userStore;
     const header = <h2>Preferences</h2>;
@@ -133,10 +149,10 @@ export class Preferences extends React.Component {
             <section>
               <h1>Extensions</h1>
             </section>
-            {appPreferenceRegistry.getItems().map(({ title, components: { Hint, Input } }, index) => {
+            {appPreferenceRegistry.getItems().map(({ title, id, components: { Hint, Input } }, index) => {
               return (
                 <section key={index} id={title}>
-                  <h2>{title}</h2>
+                  <h2 id={id}>{title}</h2>
                   <Input/>
                   <small className="hint">
                     <Hint/>

src/renderer/lens-app.tsx

@@ -12,7 +12,7 @@ import { ConfirmDialog } from "./components/confirm-dialog";
 import { extensionLoader } from "../extensions/extension-loader";
 import { broadcastMessage } from "../common/ipc";
 import { CommandContainer } from "./components/command-palette/command-container";
-import { LensProtocolRouterRenderer } from "./protocol-handler/router";
+import { LensProtocolRouterRenderer, bindProtocolAddRouteHandlers } from "./protocol-handler";
 import { registerIpcHandlers } from "./ipc";
 import { ipcRenderer } from "electron";
 
@@ -21,6 +21,7 @@ export class LensApp extends React.Component {
   static async init() {
     extensionLoader.loadOnClusterManagerRenderer();
     LensProtocolRouterRenderer.getInstance<LensProtocolRouterRenderer>().init();
+    bindProtocolAddRouteHandlers();
     window.addEventListener("offline", () => {
       broadcastMessage("network:offline");
     });

src/renderer/navigation/helpers.ts

@@ -5,11 +5,11 @@ import { clusterViewRoute, IClusterViewRouteParams } from "../components/cluster
 import { navigation } from "./history";
 
 export function navigate(location: LocationDescriptor) {
-  const currentLocation = navigation.getPath();
+  const currentLocation = navigation.location.pathname;
 
   navigation.push(location);
 
-  if (currentLocation === navigation.getPath()) {
+  if (currentLocation === navigation.location.pathname) {
     navigation.goBack(); // prevent sequences of same url in history
   }
 }

src/renderer/navigation/history.ts

@@ -10,5 +10,5 @@ navigation.listen((location, action) => {
   const isClusterView = !process.isMainFrame;
   const domain = global.location.href;
 
-  logger.debug(`[NAVIGATION]: ${action}`, { isClusterView, domain, location });
+  logger.debug(`[NAVIGATION]: ${action}-ing. Current is now:`, { isClusterView, domain, location });
 });

src/renderer/navigation/index.ts

@@ -1,10 +1,8 @@
 // Navigation (renderer)
 
 import { bindEvents } from "./events";
-import { bindProtocolHandlers } from "./protocol-handlers";
 
 export * from "./history";
 export * from "./helpers";
 
 bindEvents();
-bindProtocolHandlers();

src/renderer/navigation/protocol-handlers.ts

@@ -1,10 +0,0 @@
-import { LensProtocolRouterRenderer } from "../protocol-handler/router";
-import { navigate } from "./helpers";
-
-export function bindProtocolHandlers() {
-  const lprr = LensProtocolRouterRenderer.getInstance<LensProtocolRouterRenderer>();
-
-  lprr.addInternalHandler("/preferences", () => {
-    navigate("/preferences");
-  });
-}

src/renderer/protocol-handler/app-handlers.ts

@@ -0,0 +1,58 @@
+import { addClusterURL } from "../components/+add-cluster";
+import { clusterSettingsURL } from "../components/+cluster-settings";
+import { extensionsURL } from "../components/+extensions";
+import { landingURL } from "../components/+landing-page";
+import { preferencesURL } from "../components/+preferences";
+import { clusterViewURL } from "../components/cluster-manager/cluster-view.route";
+import { LensProtocolRouterRenderer } from "./router";
+import { navigate } from "../navigation/helpers";
+import { clusterStore } from "../../common/cluster-store";
+import { workspaceStore } from "../../common/workspace-store";
+
+export function bindProtocolAddRouteHandlers() {
+  LensProtocolRouterRenderer
+    .getInstance<LensProtocolRouterRenderer>()
+    .addInternalHandler("/preferences", ({ search: { highlight }}) => {
+      navigate(preferencesURL({ fragment: highlight }));
+    })
+    .addInternalHandler("/", () => {
+      navigate(landingURL());
+    })
+    .addInternalHandler("/landing", () => {
+      navigate(landingURL());
+    })
+    .addInternalHandler("/landing/:workspaceId", ({ pathname: { workspaceId } }) => {
+      if (workspaceStore.getById(workspaceId)) {
+        workspaceStore.setActive(workspaceId);
+        navigate(landingURL());
+      } else {
+        console.log("[APP-HANDLER]: workspace with given ID does not exist", { workspaceId });
+      }
+    })
+    .addInternalHandler("/cluster", () => {
+      navigate(addClusterURL());
+    })
+    .addInternalHandler("/cluster/:clusterId", ({ pathname: { clusterId } }) => {
+      const cluster = clusterStore.getById(clusterId);
+
+      if (cluster) {
+        workspaceStore.setActive(cluster.workspace);
+        navigate(clusterViewURL({ params: { clusterId } }));
+      } else {
+        console.log("[APP-HANDLER]: cluster with given ID does not exist", { clusterId });
+      }
+    })
+    .addInternalHandler("/cluster/:clusterId/settings", ({ pathname: { clusterId } }) => {
+      const cluster = clusterStore.getById(clusterId);
+
+      if (cluster) {
+        workspaceStore.setActive(cluster.workspace);
+        navigate(clusterSettingsURL({ params: { clusterId } }));
+      } else {
+        console.log("[APP-HANDLER]: cluster with given ID does not exist", { clusterId });
+      }
+    })
+    .addInternalHandler("/extensions", () => {
+      navigate(extensionsURL());
+    });
+}

src/renderer/protocol-handler/index.ts

@@ -1 +1,2 @@
-export * from "./router.ts";
+export * from "./router";
+export * from "./app-handlers";

webpack.extensions.ts

@@ -53,6 +53,16 @@ export default function generateExtensionTypes(): webpack.Configuration {
             }
           }
         },
+        {
+          test: /\.(jpg|png|svg|map|ico)$/,
+          use: {
+            loader: "file-loader",
+            options: {
+              name: "images/[name]-[hash:6].[ext]",
+              esModule: false, // handle media imports in <template>, e.g <img src="../assets/logo.svg"> (react)
+            }
+          }
+        },
         // for import scss files
         {
           test: /\.s?css$/,