Remove usage of deprecated xtermjs's registerLinkMatcher API (#5996)

* Make openBrowser->openLinkInBrowser injectable

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Remove use of deprecated link matcher API from XtermJS

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix type errors

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+network-port-forwards/port-forward-menu.tsx

@@ -6,7 +6,6 @@
 import React from "react";
 import { autoBind, cssNames } from "../../utils";
 import type { PortForwardItem, PortForwardStore } from "../../port-forward";
-import { openPortForward } from "../../port-forward";
 import type { MenuActionsProps } from "../menu/menu-actions";
 import { MenuActions } from "../menu/menu-actions";
 import { MenuItem } from "../menu";
@@ -15,6 +14,8 @@ import { Notifications } from "../notifications";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import portForwardDialogModelInjectable from "../../port-forward/port-forward-dialog-model/port-forward-dialog-model.injectable";
 import portForwardStoreInjectable from "../../port-forward/port-forward-store/port-forward-store.injectable";
+import type { OpenPortForward } from "../../port-forward/open-port-forward.injectable";
+import openPortForwardInjectable from "../../port-forward/open-port-forward.injectable";
 
 export interface PortForwardMenuProps extends MenuActionsProps {
   portForward: PortForwardItem;
@@ -24,6 +25,7 @@ export interface PortForwardMenuProps extends MenuActionsProps {
 interface Dependencies {
   portForwardStore: PortForwardStore;
   openPortForwardDialog: (item: PortForwardItem) => void;
+  openPortForward: OpenPortForward;
 }
 
 class NonInjectedPortForwardMenu<Props extends PortForwardMenuProps & Dependencies> extends React.Component<Props> {
@@ -94,7 +96,7 @@ class NonInjectedPortForwardMenu<Props extends PortForwardMenuProps & Dependenci
     return (
       <>
         { portForward.status === "Active" && (
-          <MenuItem onClick={() => openPortForward(portForward)}>
+          <MenuItem onClick={() => this.props.openPortForward(portForward)}>
             <Icon
               material="open_in_browser"
               interactive={toolbar}
@@ -139,6 +141,7 @@ export const PortForwardMenu = withInjectables<Dependencies, PortForwardMenuProp
     getProps: (di, props) => ({
       portForwardStore: di.inject(portForwardStoreInjectable),
       openPortForwardDialog: di.inject(portForwardDialogModelInjectable).open,
+      openPortForward: di.inject(openPortForwardInjectable),
       ...props,
     }),
   },

src/renderer/components/+network-services/service-port-component.tsx

@@ -13,7 +13,7 @@ import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Button } from "../button";
 import type { ForwardedPort, PortForwardStore } from "../../port-forward";
-import { openPortForward, predictProtocol } from "../../port-forward";
+import { predictProtocol } from "../../port-forward";
 import { Spinner } from "../spinner";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import portForwardStoreInjectable from "../../port-forward/port-forward-store/port-forward-store.injectable";
@@ -21,6 +21,8 @@ import portForwardDialogModelInjectable from "../../port-forward/port-forward-di
 import logger from "../../../common/logger";
 import aboutPortForwardingInjectable from "../../port-forward/about-port-forwarding.injectable";
 import notifyErrorPortForwardingInjectable from "../../port-forward/notify-error-port-forwarding.injectable";
+import type { OpenPortForward } from "../../port-forward/open-port-forward.injectable";
+import openPortForwardInjectable from "../../port-forward/open-port-forward.injectable";
 
 export interface ServicePortComponentProps {
   service: Service;
@@ -32,6 +34,7 @@ interface Dependencies {
   openPortForwardDialog: (item: ForwardedPort, options: { openInBrowser: boolean; onClose: () => void }) => void;
   aboutPortForwarding: () => void;
   notifyErrorPortForwarding: (message: string) => void;
+  openPortForward: OpenPortForward;
 }
 
 @observer
@@ -88,7 +91,7 @@ class NonInjectedServicePortComponent extends React.Component<ServicePortCompone
 
   @action
   async portForward() {
-    const { service, port } = this.props;
+    const { service, port, openPortForward } = this.props;
     let portForward: ForwardedPort = {
       kind: "service",
       name: service.getName(),
@@ -180,7 +183,7 @@ class NonInjectedServicePortComponent extends React.Component<ServicePortCompone
         <span title="Open in a browser" onClick={() => this.portForward()}>
           {port.toString()}
         </span>
-        <Button primary onClick={portForwardAction}> 
+        <Button primary onClick={portForwardAction}>
           {" "}
           {this.isPortForwarded ? (this.isActive ? "Stop/Remove" : "Remove") : "Forward..."}
           {" "}
@@ -202,6 +205,7 @@ export const ServicePortComponent = withInjectables<Dependencies, ServicePortCom
       openPortForwardDialog: di.inject(portForwardDialogModelInjectable).open,
       aboutPortForwarding: di.inject(aboutPortForwardingInjectable),
       notifyErrorPortForwarding: di.inject(notifyErrorPortForwardingInjectable),
+      openPortForward: di.inject(openPortForwardInjectable),
       ...props,
     }),
   },

src/renderer/components/+workloads-pods/pod-container-port.tsx

@@ -13,7 +13,7 @@ import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Button } from "../button";
 import type { ForwardedPort, PortForwardStore } from "../../port-forward";
-import { openPortForward, predictProtocol } from "../../port-forward";
+import { predictProtocol } from "../../port-forward";
 import { Spinner } from "../spinner";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import portForwardStoreInjectable from "../../port-forward/port-forward-store/port-forward-store.injectable";
@@ -21,6 +21,8 @@ import portForwardDialogModelInjectable from "../../port-forward/port-forward-di
 import logger from "../../../common/logger";
 import aboutPortForwardingInjectable from "../../port-forward/about-port-forwarding.injectable";
 import notifyErrorPortForwardingInjectable from "../../port-forward/notify-error-port-forwarding.injectable";
+import type { OpenPortForward } from "../../port-forward/open-port-forward.injectable";
+import openPortForwardInjectable from "../../port-forward/open-port-forward.injectable";
 
 export interface PodContainerPortProps {
   pod: Pod;
@@ -32,6 +34,7 @@ interface Dependencies {
   openPortForwardDialog: (item: ForwardedPort, options: { openInBrowser: boolean; onClose: () => void }) => void;
   aboutPortForwarding: () => void;
   notifyErrorPortForwarding: (message: string) => void;
+  openPortForward: OpenPortForward;
 }
 
 @observer
@@ -86,7 +89,7 @@ class NonInjectedPodContainerPort extends React.Component<PodContainerPortProps
 
   @action
   async portForward() {
-    const { pod, port } = this.props;
+    const { pod, port, openPortForward } = this.props;
     let portForward: ForwardedPort = {
       kind: "pod",
       name: pod.getName(),
@@ -178,7 +181,7 @@ class NonInjectedPodContainerPort extends React.Component<PodContainerPortProps
         <span title="Open in a browser" onClick={() => this.portForward()}>
           {text}
         </span>
-        <Button primary onClick={portForwardAction}> 
+        <Button primary onClick={portForwardAction}>
           {" "}
           {this.isPortForwarded ? (this.isActive ? "Stop/Remove" : "Remove") : "Forward..."}
           {" "}
@@ -200,6 +203,7 @@ export const PodContainerPort = withInjectables<Dependencies, PodContainerPortPr
       openPortForwardDialog: di.inject(portForwardDialogModelInjectable).open,
       aboutPortForwarding: di.inject(aboutPortForwardingInjectable),
       notifyErrorPortForwarding: di.inject(notifyErrorPortForwardingInjectable),
+      openPortForward: di.inject(openPortForwardInjectable),
       ...props,
     }),
   },

src/renderer/components/dock/terminal/create-terminal.injectable.ts

@@ -11,6 +11,8 @@ import terminalSpawningPoolInjectable from "./terminal-spawning-pool.injectable"
 import terminalConfigInjectable from "../../../../common/user-store/terminal-config.injectable";
 import terminalCopyOnSelectInjectable from "../../../../common/user-store/terminal-copy-on-select.injectable";
 import themeStoreInjectable from "../../../themes/store.injectable";
+import isMacInjectable from "../../../../common/vars/is-mac.injectable";
+import openLinkInBrowserInjectable from "../../../../common/utils/open-link-in-browser.injectable";
 
 export type CreateTerminal = (tabId: TabId, api: TerminalApi) => Terminal;
 
@@ -22,6 +24,8 @@ const createTerminalInjectable = getInjectable({
       terminalConfig: di.inject(terminalConfigInjectable),
       terminalCopyOnSelect: di.inject(terminalCopyOnSelectInjectable),
       themeStore: di.inject(themeStoreInjectable),
+      isMac: di.inject(isMacInjectable),
+      openLinkInBrowser: di.inject(openLinkInBrowserInjectable),
     };
 
     return (tabId, api) => new Terminal(dependencies, { tabId, api });

src/renderer/components/dock/terminal/terminal.ts

@@ -12,19 +12,22 @@ import type { TabId } from "../dock/store";
 import type { TerminalApi } from "../../../api/terminal-api";
 import type { ThemeStore } from "../../../themes/store";
 import { disposer } from "../../../utils";
-import { isMac } from "../../../../common/vars";
 import { once } from "lodash";
 import { clipboard } from "electron";
 import logger from "../../../../common/logger";
 import type { TerminalConfig } from "../../../../common/user-store/preferences-helpers";
 import assert from "assert";
 import { TerminalChannels } from "../../../../common/terminal/channels";
+import { LinkProvider } from "xterm-link-provider";
+import type { OpenLinkInBrowser } from "../../../../common/utils/open-link-in-browser.injectable";
 
 export interface TerminalDependencies {
   readonly spawningPool: HTMLElement;
   readonly terminalConfig: IComputedValue<TerminalConfig>;
   readonly terminalCopyOnSelect: IComputedValue<boolean>;
   readonly themeStore: ThemeStore;
+  readonly isMac: boolean;
+  openLinkInBrowser: OpenLinkInBrowser;
 }
 
 export interface TerminalArguments {
@@ -93,7 +96,6 @@ export class Terminal {
     this.xterm.loadAddon(this.fitAddon);
 
     this.xterm.open(this.dependencies.spawningPool);
-    this.xterm.registerLinkMatcher(/https?:\/\/[^\s]+/i, this.onClickLink);
     this.xterm.attachCustomKeyEventHandler(this.keyHandler);
     this.xterm.onSelectionChange(this.onSelectionChange);
 
@@ -108,7 +110,16 @@ export class Terminal {
     this.api.on("data", this.onApiData);
     window.addEventListener("resize", this.onResize);
 
+    const linkProvider = new LinkProvider(
+      this.xterm,
+      /https?:\/\/[^\s]+/i,
+      (event, link) => this.dependencies.openLinkInBrowser(link),
+      undefined,
+      0,
+    );
+
     this.disposer.push(
+      this.xterm.registerLinkProvider(linkProvider),
       reaction(() => this.theme, colors => this.xterm.setOption("theme", colors), {
         fireImmediately: true,
       }),
@@ -169,10 +180,6 @@ export class Terminal {
     this.viewport.scrollTop = this.scrollPos; // restore last scroll position
   };
 
-  onClickLink = (evt: MouseEvent, link: string) => {
-    window.open(link, "_blank");
-  };
-
   onContextMenu = () => {
     if (
       // don't paste if user hasn't turned on the feature
@@ -229,7 +236,7 @@ export class Terminal {
     }
 
     //Ctrl+K: clear the entire buffer, making the prompt line the new first line on mac os
-    if (isMac && metaKey) {
+    if (this.dependencies.isMac && metaKey) {
       switch (code) {
         case "KeyK":
           this.onClear();

src/renderer/port-forward/open-port-forward.injectable.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import loggerInjectable from "../../common/logger.injectable";
+import openLinkInBrowserInjectable from "../../common/utils/open-link-in-browser.injectable";
+import showErrorNotificationInjectable from "../components/notifications/show-error-notification.injectable";
+import type { ForwardedPort } from "./port-forward-item";
+import { portForwardAddress } from "./port-forward-utils";
+
+export type OpenPortForward = (portForward: ForwardedPort) => void;
+
+const openPortForwardInjectable = getInjectable({
+  id: "open-port-forward",
+  instantiate: (di): OpenPortForward => {
+    const openLinkInBrowser = di.inject(openLinkInBrowserInjectable);
+    const showErrorNotification = di.inject(showErrorNotificationInjectable);
+    const logger = di.inject(loggerInjectable);
+
+    return (portForward) => {
+      const browseTo = portForwardAddress(portForward);
+
+      openLinkInBrowser(browseTo)
+        .catch(error => {
+          logger.error(`failed to open in browser: ${error}`, {
+            port: portForward.port,
+            kind: portForward.kind,
+            namespace: portForward.namespace,
+            name: portForward.name,
+          });
+          showErrorNotification(`Failed to open ${browseTo} in browser`);
+        });
+    };
+  },
+});
+
+export default openPortForwardInjectable;

src/renderer/port-forward/port-forward-dialog.tsx

@@ -14,7 +14,6 @@ import { Wizard, WizardStep } from "../components/wizard";
 import { Input } from "../components/input";
 import { cssNames } from "../utils";
 import type { PortForwardStore } from "./port-forward-store/port-forward-store";
-import { openPortForward } from "./port-forward-utils";
 import { Checkbox } from "../components/checkbox";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { PortForwardDialogData, PortForwardDialogModel } from "./port-forward-dialog-model/port-forward-dialog-model";
@@ -23,6 +22,8 @@ import logger from "../../common/logger";
 import portForwardStoreInjectable from "./port-forward-store/port-forward-store.injectable";
 import aboutPortForwardingInjectable from "./about-port-forwarding.injectable";
 import notifyErrorPortForwardingInjectable from "./notify-error-port-forwarding.injectable";
+import type { OpenPortForward } from "./open-port-forward.injectable";
+import openPortForwardInjectable from "./open-port-forward.injectable";
 
 export interface PortForwardDialogProps extends Partial<DialogProps> {}
 
@@ -31,6 +32,7 @@ interface Dependencies {
   model: PortForwardDialogModel;
   aboutPortForwarding: () => void;
   notifyErrorPortForwarding: (message: string) => void;
+  openPortForward: OpenPortForward;
 }
 
 @observer
@@ -89,7 +91,7 @@ class NonInjectedPortForwardDialog extends Component<PortForwardDialogProps & De
       }
 
       if (portForward.status === "Active" && data.openInBrowser) {
-        openPortForward(portForward);
+        this.props.openPortForward(portForward);
       }
     } catch (error) {
       logger.error(`[PORT-FORWARD-DIALOG]: ${error}`, portForward);
@@ -177,6 +179,7 @@ export const PortForwardDialog = withInjectables<Dependencies, PortForwardDialog
       model: di.inject(portForwardDialogModelInjectable),
       aboutPortForwarding: di.inject(aboutPortForwardingInjectable),
       notifyErrorPortForwarding: di.inject(notifyErrorPortForwardingInjectable),
+      openPortForward: di.inject(openPortForwardInjectable),
       ...props,
     }),
   },

src/renderer/port-forward/port-forward-utils.ts

@@ -3,34 +3,12 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-
-import { openBrowser } from "../utils";
-import { Notifications } from "../components/notifications";
 import type { ForwardedPort } from "./port-forward-item";
-import logger from "../../common/logger";
 
 export function portForwardAddress(portForward: ForwardedPort) {
   return `${portForward.protocol ?? "http"}://localhost:${portForward.forwardPort}`;
 }
 
-export function openPortForward(portForward: ForwardedPort) {
-  const browseTo = portForwardAddress(portForward);
-
-  openBrowser(browseTo)
-    .catch(error => {
-      logger.error(`failed to open in browser: ${error}`, {
-        port: portForward.port,
-        kind: portForward.kind,
-        namespace: portForward.namespace,
-        name: portForward.name,
-      });
-      Notifications.error(`Failed to open ${browseTo} in browser`);
-    },
-    );
-
-}
-
 export function predictProtocol(name: string | undefined) {
   return name === "https" ? "https" : "http";
 }
-