From 35e9e551fbe0bd9f0845394dcb2c3b270488c17d Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Thu, 25 May 2023 18:38:25 +0000
Subject: [PATCH] Refactor retry in debug mode

---
 site/src/components/Alert/Alert.tsx           | 21 +++++++--
 site/src/components/Alert/ErrorAlert.tsx      | 12 +----
 site/src/components/Workspace/Workspace.tsx   | 47 ++++++++-----------
 .../WorkspaceDeletedBanner.tsx                |  2 +-
 site/src/i18n/en/common.json                  |  4 +-
 site/src/i18n/en/workspacePage.json           |  2 +-
 .../GitAuthSettingsPageView.tsx               |  2 +-
 7 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
index 869b52a5c24a1..e9ce8559a8803 100644
--- a/site/src/components/Alert/Alert.tsx
+++ b/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>
+  )
+}
diff --git a/site/src/components/Alert/ErrorAlert.tsx b/site/src/components/Alert/ErrorAlert.tsx
index e348b1423c57c..fd193bbbf74fd 100644
--- a/site/src/components/Alert/ErrorAlert.tsx
+++ b/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
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index 77509e079fd78..6c743673546f6 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/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>
diff --git a/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx b/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx
index 66b68f28758d1..1ab764b741896 100644
--- a/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx
+++ b/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>
   )
diff --git a/site/src/i18n/en/common.json b/site/src/i18n/en/common.json
index f085a793b23a5..a22e318e6e8c5 100644
--- a/site/src/i18n/en/common.json
+++ b/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"
   },
diff --git a/site/src/i18n/en/workspacePage.json b/site/src/i18n/en/workspacePage.json
index 747964b447239..f357e9d655a0d 100644
--- a/site/src/i18n/en/workspacePage.json
+++ b/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",
diff --git a/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.tsx
index be8d643f953da..94ea04e697d66 100644
--- a/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.tsx
+++ b/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>