fix(site): resize terminal when alert is dismissed (#8368)

BrunoQuaresma · web-flow · commit 2baa34364a4b · 2023-07-07T10:19:39.000-03:00
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -30,18 +30,11 @@ export const Language = {
   websocketErrorMessagePrefix: "WebSocket failed: ",
 }
 
-const useTerminalWarning = ({
-  agent,
-  fitAddon,
-}: {
-  agent?: WorkspaceAgent
-  fitAddon: FitAddon | null
-}) => {
+const useTerminalWarning = ({ agent }: { agent?: WorkspaceAgent }) => {
   const lifecycleState = agent?.lifecycle_state
   const [startupWarning, setStartupWarning] = useState<
     TerminalPageAlertType | undefined
   >(undefined)
-  const shouldDisplayWarning = startupWarning !== undefined
 
   useEffect(() => {
     if (lifecycleState === "start_error") {
@@ -58,13 +51,6 @@ const useTerminalWarning = ({
     }
   }, [lifecycleState])
 
-  // Resize the terminal when the warning toggles
-  useEffect(() => {
-    if (fitAddon) {
-      fitAddon.fit()
-    }
-  }, [shouldDisplayWarning, fitAddon])
-
   return {
     startupWarning,
   }
@@ -132,7 +118,6 @@ const TerminalPage: FC<TerminalPageProps> = ({ renderer }) => {
     : undefined
   const { startupWarning } = useTerminalWarning({
     agent: workspaceAgent,
-    fitAddon,
   })
 
   // handleWebLink handles opening of URLs in the terminal!
@@ -352,7 +337,14 @@ const TerminalPage: FC<TerminalPageProps> = ({ renderer }) => {
         )}
       </div>
       <Box display="flex" flexDirection="column" height="100vh">
-        {startupWarning && <TerminalPageAlert alertType={startupWarning} />}
+        {startupWarning && (
+          <TerminalPageAlert
+            alertType={startupWarning}
+            onDismiss={() => {
+              fitAddon?.fit()
+            }}
+          />
+        )}
         <div
           className={styles.terminal}
           ref={xtermRef}
diff --git a/site/src/pages/TerminalPage/TerminalPageAlert.tsx b/site/src/pages/TerminalPage/TerminalPageAlert.tsx
@@ -87,11 +87,27 @@ const mapAlertTypeToText: MapAlertTypeToComponent = {
   },
 }
 
-export default ({ alertType }: { alertType: TerminalPageAlertType }) => {
+export default ({
+  alertType,
+  onDismiss,
+}: {
+  alertType: TerminalPageAlertType
+  onDismiss: () => void
+}) => {
+  const severity = mapAlertTypeToText[alertType].severity
   return (
     <Alert
-      severity={mapAlertTypeToText[alertType].severity}
-      sx={{ borderRadius: 0 }}
+      severity={severity}
+      sx={{
+        borderRadius: 0,
+        borderWidth: 0,
+        borderBottomWidth: 1,
+        borderBottomColor: (theme) => theme.palette.divider,
+        backgroundColor: (theme) => theme.palette.background.paperLight,
+        borderLeft: (theme) => `3px solid ${theme.palette[severity].light}`,
+        marginBottom: 1,
+      }}
+      onDismiss={onDismiss}
       dismissible
       actions={[
         <Button
