Prevent handleWebLink change from recreating terminal

code-asher · code-asher · commit da4a2315d250 · 2023-10-19T12:34:11.000-08:00
Depending on the timing, handleWebLink was causing the terminal to get
recreated.  We only need to create the terminal once unless the render
type changes.

Recreating the terminal was also recreating the web socket pointlessly.
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -19,7 +19,7 @@ import { useDashboard } from "components/Dashboard/DashboardProvider";
 import { Region } from "api/typesGenerated";
 import { getLatencyColor } from "utils/latency";
 import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency";
-import { portForwardURL } from "utils/portForward";
+import { openMaybePortForwardedURL } from "utils/portForward";
 import { terminalWebsocketUrl } from "utils/terminal";
 import { getMatchingAgentOrFirst } from "utils/workspace";
 import {
@@ -99,6 +99,10 @@ const TerminalPage: FC = () => {
     },
     [workspaceAgent, workspace.data, username, proxy.preferredWildcardHostname],
   );
+  const handleWebLinkRef = useRef(handleWebLink);
+  useEffect(() => {
+    handleWebLinkRef.current = handleWebLink;
+  }, [handleWebLink]);
 
   // Create the terminal!
   useEffect(() => {
@@ -127,7 +131,7 @@ const TerminalPage: FC = () => {
     terminal.unicode.activeVersion = "11";
     terminal.loadAddon(
       new WebLinksAddon((_, uri) => {
-        handleWebLink(uri);
+        handleWebLinkRef.current(uri);
       }),
     );
     setTerminal(terminal);
@@ -141,7 +145,7 @@ const TerminalPage: FC = () => {
       window.removeEventListener("resize", listener);
       terminal.dispose();
     };
-  }, [renderer, config.isLoading, xtermRef, handleWebLink]);
+  }, [renderer, config.isLoading, xtermRef, handleWebLinkRef]);
 
   // Updates the reconnection token into the URL if necessary.
   useEffect(() => {
