From 21837254a093f8bddefcc7828b79530b1802057f Mon Sep 17 00:00:00 2001 From: Mathias Fredriksson Date: Tue, 13 Dec 2022 18:30:38 +0000 Subject: [PATCH 1/2] fix(site): Use correct UUID for web terminal when first opened While working on #5403 I noticed the web terminal connects with a different UUID than what is serialized in the URL, this resulted in a new session being opened if I refreshed the page. The reasons seems to be that we were accessing raw DOM elements (`location.search`) for navigation and omitting `react-router-dom`. This resulted in a new navigation and UUID being generated after the fact. --- site/src/pages/TerminalPage/TerminalPage.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx index 277c3555e8efd..2c3d8bc39da55 100644 --- a/site/src/pages/TerminalPage/TerminalPage.tsx +++ b/site/src/pages/TerminalPage/TerminalPage.tsx @@ -127,17 +127,19 @@ const TerminalPage: FC< // the reconnection token and workspace name found // from the router. useEffect(() => { - const search = new URLSearchParams(location.search) - search.set("reconnect", reconnectionToken) + if (searchParams.get("reconnect") === reconnectionToken) { + return + } + searchParams.set("reconnect", reconnectionToken) navigate( { - search: search.toString(), + search: searchParams.toString(), }, { replace: true, }, ) - }, [location.search, navigate, reconnectionToken]) + }, [searchParams, navigate, reconnectionToken]) // Apply terminal options based on connection state. useEffect(() => { From 52c6fe448c7315919c580195ab02c9e42c3afff4 Mon Sep 17 00:00:00 2001 From: Mathias Fredriksson Date: Tue, 13 Dec 2022 18:38:33 +0000 Subject: [PATCH 2/2] Remove unused imports --- site/src/pages/TerminalPage/TerminalPage.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx index 2c3d8bc39da55..c74c93edd1526 100644 --- a/site/src/pages/TerminalPage/TerminalPage.tsx +++ b/site/src/pages/TerminalPage/TerminalPage.tsx @@ -2,12 +2,7 @@ import { makeStyles } from "@material-ui/core/styles" import { useMachine } from "@xstate/react" import { FC, useEffect, useRef, useState } from "react" import { Helmet } from "react-helmet-async" -import { - useLocation, - useNavigate, - useParams, - useSearchParams, -} from "react-router-dom" +import { useNavigate, useParams, useSearchParams } from "react-router-dom" import { colors } from "theme/colors" import { v4 as uuidv4 } from "uuid" import * as XTerm from "xterm" @@ -29,7 +24,6 @@ const TerminalPage: FC< readonly renderer?: XTerm.RendererType }> > = ({ renderer }) => { - const location = useLocation() const navigate = useNavigate() const styles = useStyles() const { username, workspace } = useParams()