From 29301b9a672c22f0bd689372cfba4929ed46e4b3 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 28 Apr 2023 18:31:38 +0000 Subject: [PATCH 1/4] Show warning --- site/src/pages/TerminalPage/TerminalPage.tsx | 115 ++++++++++++++----- 1 file changed, 86 insertions(+), 29 deletions(-) diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx index da39edc7206f0..ccb379b2427a1 100644 --- a/site/src/pages/TerminalPage/TerminalPage.tsx +++ b/site/src/pages/TerminalPage/TerminalPage.tsx @@ -1,5 +1,7 @@ import { makeStyles } from "@material-ui/core/styles" +import WarningIcon from "@material-ui/icons/ErrorOutlineRounded" import { useMachine } from "@xstate/react" +import { WorkspaceAgent } from "api/typesGenerated" import { portForwardURL } from "components/PortForwardButton/PortForwardButton" import { Stack } from "components/Stack/Stack" import { FC, useCallback, useEffect, useRef, useState } from "react" @@ -21,34 +23,6 @@ export const Language = { websocketErrorMessagePrefix: "WebSocket failed: ", } -const useReloading = (isDisconnected: boolean) => { - const [status, setStatus] = useState<"reloading" | "notReloading">( - "notReloading", - ) - - // Retry connection on key press when it is disconnected - useEffect(() => { - if (!isDisconnected) { - return - } - - const keyDownHandler = () => { - setStatus("reloading") - window.location.reload() - } - - document.addEventListener("keydown", keyDownHandler) - - return () => { - document.removeEventListener("keydown", keyDownHandler) - } - }, [isDisconnected]) - - return { - status, - } -} - const TerminalPage: FC< React.PropsWithChildren<{ readonly renderer?: XTerm.RendererType @@ -100,6 +74,7 @@ const TerminalPage: FC< applicationsHost, } = terminalState.context const reloading = useReloading(isDisconnected) + const startupWarning = useStartupWarning(workspaceAgent) // handleWebLink handles opening of URLs in the terminal! const handleWebLink = useCallback( @@ -309,12 +284,70 @@ const TerminalPage: FC< )} + {startupWarning.shouldDisplay && ( +
+ +
+
+ Startup script is still running +
+
+ You can use it but dotfiles aren‘t setup yet +
+
+
+ )}
) } -export default TerminalPage +const useStartupWarning = (agent?: WorkspaceAgent) => { + const [shouldDisplay, setShouldDisplay] = useState(false) + + useEffect(() => { + if (agent) { + setShouldDisplay( + ["starting", "starting_timeout", "start_error"].includes( + agent.lifecycle_state, + ), + ) + } + }, [agent]) + + return { + shouldDisplay, + dismiss: () => setShouldDisplay(false), + } +} + +const useReloading = (isDisconnected: boolean) => { + const [status, setStatus] = useState<"reloading" | "notReloading">( + "notReloading", + ) + + // Retry connection on key press when it is disconnected + useEffect(() => { + if (!isDisconnected) { + return + } + + const keyDownHandler = () => { + setStatus("reloading") + window.location.reload() + } + + document.addEventListener("keydown", keyDownHandler) + + return () => { + document.removeEventListener("keydown", keyDownHandler) + } + }, [isDisconnected]) + + return { + status, + } +} const useStyles = makeStyles((theme) => ({ overlay: { @@ -348,6 +381,8 @@ const useStyles = makeStyles((theme) => ({ width: "100vw", height: "100vh", overflow: "hidden", + padding: theme.spacing(1), + backgroundColor: theme.palette.background.paper, // These styles attempt to mimic the VS Code scrollbar. "& .xterm": { padding: 4, @@ -370,4 +405,26 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: "rgba(255, 255, 255, 0.18)", }, }, + alert: { + display: "flex", + background: theme.palette.background.paperLight, + alignItems: "center", + padding: theme.spacing(2), + gap: theme.spacing(2), + borderBottom: `1px solid ${theme.palette.divider}`, + }, + alertIcon: { + color: theme.palette.warning.light, + fontSize: theme.spacing(3), + }, + alertTitle: { + fontWeight: 600, + color: theme.palette.text.primary, + }, + alertMessage: { + fontSize: 14, + color: theme.palette.text.secondary, + }, })) + +export default TerminalPage From 98dca9fc4d0604113d07e69257ed89bf53bbf1a7 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 28 Apr 2023 18:54:41 +0000 Subject: [PATCH 2/4] feat(site): Display a warning message during startup script execution --- site/src/api/api.ts | 2 +- site/src/pages/TerminalPage/TerminalPage.tsx | 44 ++++++++++---------- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/site/src/api/api.ts b/site/src/api/api.ts index 667499cf92f2c..033259ceea0ec 100644 --- a/site/src/api/api.ts +++ b/site/src/api/api.ts @@ -966,7 +966,7 @@ export const getWorkspaceBuildParameters = async ( return response.data } type Claims = { - license_expires?: jwt.NumericDate + license_expires?: number account_type?: string account_id?: string trial: boolean diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx index ccb379b2427a1..20b1aa809c238 100644 --- a/site/src/pages/TerminalPage/TerminalPage.tsx +++ b/site/src/pages/TerminalPage/TerminalPage.tsx @@ -1,7 +1,8 @@ +import Button from "@material-ui/core/Button" import { makeStyles } from "@material-ui/core/styles" import WarningIcon from "@material-ui/icons/ErrorOutlineRounded" +import RefreshOutlined from "@material-ui/icons/RefreshOutlined" import { useMachine } from "@xstate/react" -import { WorkspaceAgent } from "api/typesGenerated" import { portForwardURL } from "components/PortForwardButton/PortForwardButton" import { Stack } from "components/Stack/Stack" import { FC, useCallback, useEffect, useRef, useState } from "react" @@ -74,7 +75,11 @@ const TerminalPage: FC< applicationsHost, } = terminalState.context const reloading = useReloading(isDisconnected) - const startupWarning = useStartupWarning(workspaceAgent) + const shouldDisplayStartupWarning = workspaceAgent + ? ["starting", "starting_timeout", "start_error"].includes( + workspaceAgent.lifecycle_state, + ) + : false // handleWebLink handles opening of URLs in the terminal! const handleWebLink = useCallback( @@ -284,7 +289,7 @@ const TerminalPage: FC< )}
- {startupWarning.shouldDisplay && ( + {shouldDisplayStartupWarning && (
@@ -295,6 +300,17 @@ const TerminalPage: FC< You can use it but dotfiles aren‘t setup yet
+
+ +
)}
@@ -302,25 +318,6 @@ const TerminalPage: FC< ) } -const useStartupWarning = (agent?: WorkspaceAgent) => { - const [shouldDisplay, setShouldDisplay] = useState(false) - - useEffect(() => { - if (agent) { - setShouldDisplay( - ["starting", "starting_timeout", "start_error"].includes( - agent.lifecycle_state, - ), - ) - } - }, [agent]) - - return { - shouldDisplay, - dismiss: () => setShouldDisplay(false), - } -} - const useReloading = (isDisconnected: boolean) => { const [status, setStatus] = useState<"reloading" | "notReloading">( "notReloading", @@ -425,6 +422,9 @@ const useStyles = makeStyles((theme) => ({ fontSize: 14, color: theme.palette.text.secondary, }, + alertActions: { + marginLeft: "auto", + }, })) export default TerminalPage From 022796f53063f740c8a789cca9da05ffd2fbc897 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 2 May 2023 11:54:13 -0300 Subject: [PATCH 3/4] Update site/src/pages/TerminalPage/TerminalPage.tsx Co-authored-by: Mathias Fredriksson --- site/src/pages/TerminalPage/TerminalPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx index 20b1aa809c238..b9d5668926f84 100644 --- a/site/src/pages/TerminalPage/TerminalPage.tsx +++ b/site/src/pages/TerminalPage/TerminalPage.tsx @@ -297,7 +297,7 @@ const TerminalPage: FC< Startup script is still running
- You can use it but dotfiles aren‘t setup yet + You can continue using this terminal, but something may be missing or not fully set up.
From 36d5d7d09231ebf61f7fd4c89251f95ee239dc9a Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 2 May 2023 16:21:46 +0000 Subject: [PATCH 4/4] Refresh session and get error message --- site/src/pages/TerminalPage/TerminalPage.tsx | 37 ++++++++++++++++---- 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx index 84c366d4af387..7bef86379e145 100644 --- a/site/src/pages/TerminalPage/TerminalPage.tsx +++ b/site/src/pages/TerminalPage/TerminalPage.tsx @@ -18,6 +18,7 @@ import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" import { pageTitle } from "../../utils/page" import { terminalMachine } from "../../xServices/terminal/terminalXService" import { useProxy } from "contexts/ProxyContext" +import { combineClasses } from "utils/combineClasses" export const Language = { workspaceErrorMessagePrefix: "Unable to fetch workspace: ", @@ -78,9 +79,10 @@ const TerminalPage: FC< } = terminalState.context const reloading = useReloading(isDisconnected) const shouldDisplayStartupWarning = workspaceAgent - ? ["starting", "starting_timeout", "start_error"].includes( - workspaceAgent.lifecycle_state, - ) + ? ["starting", "starting_timeout"].includes(workspaceAgent.lifecycle_state) + : false + const shouldDisplayStartupError = workspaceAgent + ? workspaceAgent.lifecycle_state === "start_error" : false // handleWebLink handles opening of URLs in the terminal! @@ -296,6 +298,21 @@ const TerminalPage: FC< )}
+ {shouldDisplayStartupError && ( +
+ +
+
Startup script failed
+
+ You can continue using this terminal, but something may be missing + or not fully set up. +
+
+
+ )} {shouldDisplayStartupWarning && (
@@ -304,7 +321,8 @@ const TerminalPage: FC< Startup script is still running
- You can continue using this terminal, but something may be missing or not fully set up. + You can continue using this terminal, but something may be missing + or not fully set up.
@@ -312,10 +330,12 @@ const TerminalPage: FC< startIcon={} size="small" onClick={() => { - window.location.reload() + // By redirecting the user without the session in the URL we + // create a new one + window.location.href = window.location.pathname }} > - Refresh + Refresh session
@@ -421,6 +441,11 @@ const useStyles = makeStyles((theme) => ({ color: theme.palette.warning.light, fontSize: theme.spacing(3), }, + alertError: { + "& $alertIcon": { + color: theme.palette.error.light, + }, + }, alertTitle: { fontWeight: 600, color: theme.palette.text.primary,