feat(site): Display a warning message during startup script execution

BrunoQuaresma · BrunoQuaresma · commit 98dca9fc4d06 · 2023-04-28T18:54:41.000Z
diff --git 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
@@ -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<
           </Stack>
         )}
       </div>
-      {startupWarning.shouldDisplay && (
+      {shouldDisplayStartupWarning && (
         <div className={styles.alert} role="alert">
           <WarningIcon className={styles.alertIcon} />
           <div>
@@ -295,32 +300,24 @@ const TerminalPage: FC<
               You can use it but dotfiles aren&lsquo;t setup yet
             </div>
           </div>
+          <div className={styles.alertActions}>
+            <Button
+              startIcon={<RefreshOutlined />}
+              size="small"
+              onClick={() => {
+                window.location.reload()
+              }}
+            >
+              Refresh
+            </Button>
+          </div>
         </div>
       )}
       <div className={styles.terminal} ref={xtermRef} data-testid="terminal" />
     </>
   )
 }
 
-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

Original file line number	Diff line number	Diff line change
`@@ -966,7 +966,7 @@ export const getWorkspaceBuildParameters = async (`
`966`	`966`	`return response.data`
`967`	`967`	`}`
`968`	`968`	`type Claims = {`
`969`		`- license_expires?: jwt.NumericDate`
	`969`	`+ license_expires?: number`
`970`	`970`	`account_type?: string`
`971`	`971`	`account_id?: string`
`972`	`972`	`trial: boolean`