fix(site): Fix retry on debug mode alert (#7686)

site/src/components/Alert/Alert.tsx

@@ -3,10 +3,11 @@ import Collapse from "@mui/material/Collapse"
 // eslint-disable-next-line no-restricted-imports -- It is the base component
 import MuiAlert, { AlertProps as MuiAlertProps } from "@mui/material/Alert"
 import Button from "@mui/material/Button"
+import Box from "@mui/material/Box"
 
 export interface AlertProps extends PropsWithChildren {
   severity: MuiAlertProps["severity"]
-  actions?: ReactNode[]
+  actions?: ReactNode
   dismissible?: boolean
   onRetry?: () => void
   onDismiss?: () => void
@@ -14,7 +15,7 @@ export interface AlertProps extends PropsWithChildren {
 
 export const Alert: FC<AlertProps> = ({
   children,
-  actions = [],
+  actions,
   onRetry,
   dismissible,
   severity,
@@ -29,8 +30,7 @@ export const Alert: FC<AlertProps> = ({
         action={
           <>
             {/* CTAs passed in by the consumer */}
-            {actions.length > 0 &&
-              actions.map((action) => <div key={String(action)}>{action}</div>)}
+            {actions}
 
             {/* retry CTA */}
             {onRetry && (
@@ -61,3 +61,16 @@ export const Alert: FC<AlertProps> = ({
     </Collapse>
   )
 }
+
+export const AlertDetail = ({ children }: { children: ReactNode }) => {
+  return (
+    <Box
+      component="span"
+      color={(theme) => theme.palette.text.secondary}
+      fontSize={13}
+      data-chromatic="ignore"
+    >
+      {children}
+    </Box>
+  )
+}

site/src/components/Alert/ErrorAlert.tsx

@@ -1,6 +1,5 @@
-import { AlertProps, Alert } from "./Alert"
+import { AlertProps, Alert, AlertDetail } from "./Alert"
 import AlertTitle from "@mui/material/AlertTitle"
-import Box from "@mui/material/Box"
 import { getErrorMessage, getErrorDetail } from "api/errors"
 import { FC } from "react"
 
@@ -15,14 +14,7 @@ export const ErrorAlert: FC<
       {detail ? (
         <>
           <AlertTitle>{message}</AlertTitle>
-          <Box
-            component="span"
-            color={(theme) => theme.palette.text.secondary}
-            fontSize={13}
-            data-chromatic="ignore"
-          >
-            {detail}
-          </Box>
+          <AlertDetail>{detail}</AlertDetail>
         </>
       ) : (
         message

site/src/components/Workspace/Workspace.tsx

@@ -1,6 +1,5 @@
 import Button from "@mui/material/Button"
 import { makeStyles } from "@mui/styles"
-import RefreshOutlined from "@mui/icons-material/RefreshOutlined"
 import { Avatar } from "components/Avatar/Avatar"
 import { AgentRow } from "components/Resources/AgentRow"
 import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"
@@ -12,7 +11,7 @@ import { FC } from "react"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
-import { Alert } from "../Alert/Alert"
+import { Alert, AlertDetail } from "../Alert/Alert"
 import { BuildsTable } from "../BuildsTable/BuildsTable"
 import { Margins } from "../Margins/Margins"
 import { Resources } from "../Resources/Resources"
@@ -31,6 +30,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert"
 import { ImpendingDeletionBanner } from "components/WorkspaceDeletion"
 import { useLocalStorage } from "hooks"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
+import AlertTitle from "@mui/material/AlertTitle"
 
 export enum WorkspaceErrors {
   GET_BUILDS_ERROR = "getBuildsError",
@@ -209,32 +209,23 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
 
           {failedBuildLogs && (
             <Stack>
-              <Alert severity="error">
-                <Stack
-                  className={styles.fullWidth}
-                  direction="row"
-                  alignItems="center"
-                  justifyContent="space-between"
-                >
-                  <Stack spacing={0}>
-                    <span>Workspace build failed</span>
-                    <span className={styles.errorDetails}>
-                      {workspace.latest_build.job.error}
-                    </span>
-                  </Stack>
-
-                  {canUpdateTemplate && (
-                    <div>
-                      <Button
-                        onClick={handleBuildRetry}
-                        startIcon={<RefreshOutlined />}
-                        size="small"
-                      >
-                        {t("actionButton.retryDebugMode")}
-                      </Button>
-                    </div>
-                  )}
-                </Stack>
+              <Alert
+                severity="error"
+                actions={
+                  canUpdateTemplate && (
+                    <Button
+                      key={0}
+                      onClick={handleBuildRetry}
+                      variant="text"
+                      size="small"
+                    >
+                      {t("actionButton.retryDebugMode")}
+                    </Button>
+                  )
+                }
+              >
+                <AlertTitle>Workspace build failed</AlertTitle>
+                <AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
               </Alert>
               <WorkspaceBuildLogs logs={failedBuildLogs} />
             </Stack>

site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx

@@ -19,7 +19,7 @@ export const WorkspaceDeletedBanner: FC<
   )
 
   return (
-    <Alert severity="warning" actions={[NewWorkspaceButton]}>
+    <Alert severity="warning" actions={NewWorkspaceButton}>
       {t("warningsAndErrors.workspaceDeletedWarning")}
     </Alert>
   )

site/src/i18n/en/common.json

@@ -8,8 +8,8 @@
     "stopped": "Stopped",
     "deleting": "Deleting",
     "deleted": "Deleted",
-    "canceling": "Canceling action",
-    "canceled": "Canceled action",
+    "canceling": "Canceling",
+    "canceled": "Canceled",
     "failed": "Failed",
     "pending": "Pending"
   },

site/src/i18n/en/workspacePage.json

@@ -30,7 +30,7 @@
     "stopping": "Stopping...",
     "deleting": "Deleting...",
     "settings": "Settings",
-    "retryDebugMode": "Try again in debug mode"
+    "retryDebugMode": "Try in debug mode"
   },
   "disabledButton": {
     "canceling": "Canceling",

site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.tsx

@@ -40,7 +40,7 @@ export const GitAuthSettingsPageView = ({
       />
 
       <div className={styles.description}>
-        <Alert severity="info" actions={[<EnterpriseBadge key="enterprise" />]}>
+        <Alert severity="info" actions={<EnterpriseBadge key="enterprise" />}>
           Integrating with multiple Git providers is an Enterprise feature.
         </Alert>
       </div>