From 92dad9c76c8f566aad8cf421845423a3ef234aae Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 7 Jul 2023 12:47:32 +0000
Subject: [PATCH 1/3] fix(site): resize terminal when alert is dismissed

---
 site/src/pages/TerminalPage/TerminalPage.tsx  | 26 +++++++------------
 .../pages/TerminalPage/TerminalPageAlert.tsx  |  9 ++++++-
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
index 09fc1a0633511..4352ee40c0991 100644
--- 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
index 0cca5cb3a8097..4ab98f2654b59 100644
--- a/site/src/pages/TerminalPage/TerminalPageAlert.tsx
+++ b/site/src/pages/TerminalPage/TerminalPageAlert.tsx
@@ -87,11 +87,18 @@ const mapAlertTypeToText: MapAlertTypeToComponent = {
   },
 }
 
-export default ({ alertType }: { alertType: TerminalPageAlertType }) => {
+export default ({
+  alertType,
+  onDismiss,
+}: {
+  alertType: TerminalPageAlertType
+  onDismiss: () => void
+}) => {
   return (
     <Alert
       severity={mapAlertTypeToText[alertType].severity}
       sx={{ borderRadius: 0 }}
+      onDismiss={onDismiss}
       dismissible
       actions={[
         <Button

From c0af52e750072a97c015d55477ef6bfc558b83b8 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 7 Jul 2023 13:00:46 +0000
Subject: [PATCH 2/3] fix(site): resize terminal when alert is dismissed

---
 site/src/pages/TerminalPage/TerminalPage.tsx      |  1 +
 site/src/pages/TerminalPage/TerminalPageAlert.tsx | 13 +++++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
index 4352ee40c0991..6638cf8d07fda 100644
--- a/site/src/pages/TerminalPage/TerminalPage.tsx
+++ b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -520,6 +520,7 @@ const useStyles = makeStyles((theme) => ({
     overflow: "hidden",
     backgroundColor: theme.palette.background.paper,
     flex: 1,
+    fontSize: 14,
     // These styles attempt to mimic the VS Code scrollbar.
     "& .xterm": {
       padding: 4,
diff --git a/site/src/pages/TerminalPage/TerminalPageAlert.tsx b/site/src/pages/TerminalPage/TerminalPageAlert.tsx
index 4ab98f2654b59..c81a5bb988098 100644
--- a/site/src/pages/TerminalPage/TerminalPageAlert.tsx
+++ b/site/src/pages/TerminalPage/TerminalPageAlert.tsx
@@ -94,10 +94,19 @@ export default ({
   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={[

From d2285d963636e823e62cddd5b8c0e5c666dcf799 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 7 Jul 2023 13:02:30 +0000
Subject: [PATCH 3/3] Remove unecessary style

---
 site/src/pages/TerminalPage/TerminalPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
index 6638cf8d07fda..4352ee40c0991 100644
--- a/site/src/pages/TerminalPage/TerminalPage.tsx
+++ b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -520,7 +520,6 @@ const useStyles = makeStyles((theme) => ({
     overflow: "hidden",
     backgroundColor: theme.palette.background.paper,
     flex: 1,
-    fontSize: 14,
     // These styles attempt to mimic the VS Code scrollbar.
     "& .xterm": {
       padding: 4,