From 03045bd47a3f34abd1c9947e3794690db3cdc2ab Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 2 Nov 2023 21:34:18 -0300
Subject: [PATCH] fix(site): fix dialog loading buttons displaying text over
 the spinner (#10501)

---
 .../ConfirmDialog/ConfirmDialog.stories.tsx   |  9 ++++++
 .../Dialogs/ConfirmDialog/ConfirmDialog.tsx   |  6 +---
 .../DeleteDialog/DeleteDialog.stories.tsx     |  7 +++++
 site/src/components/Dialogs/Dialog.tsx        | 29 ++++++++++++++-----
 .../TemplateSchedulePage/ScheduleDialog.tsx   |  1 -
 5 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx
index 3d8bb0b487..c0454a11c3 100644
--- a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx
+++ b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx
@@ -55,3 +55,12 @@ export const SuccessDialogWithCancel: Story = {
     type: "success",
   },
 };
+
+export const SuccessDialogLoading: Story = {
+  args: {
+    description: "I am successful.",
+    hideCancel: true,
+    type: "success",
+    confirmLoading: true,
+  },
+};
diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
index 50f0c24850..8ba40f079b 100644
--- a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
+++ b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
@@ -32,10 +32,7 @@ const CONFIRM_DIALOG_DEFAULTS: Record<
 };
 
 export interface ConfirmDialogProps
-  extends Omit<
-    DialogActionButtonsProps,
-    "color" | "confirmDialog" | "onCancel"
-  > {
+  extends Omit<DialogActionButtonsProps, "color" | "onCancel"> {
   readonly description?: ReactNode;
   /**
    * hideCancel hides the cancel button when set true, and shows the cancel
@@ -135,7 +132,6 @@ export const ConfirmDialog: FC<PropsWithChildren<ConfirmDialogProps>> = ({
       <DialogActions>
         <DialogActionButtons
           cancelText={cancelText}
-          confirmDialog
           confirmLoading={confirmLoading}
           confirmText={confirmText || defaults.confirmText}
           disabled={disabled}
diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx
index 92a0472fa1..76ee741c8b 100644
--- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx
+++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx
@@ -16,8 +16,15 @@ const meta: Meta<typeof DeleteDialog> = {
 };
 
 export default meta;
+
 type Story = StoryObj<typeof DeleteDialog>;
 
 const Example: Story = {};
 
+export const Loading: Story = {
+  args: {
+    confirmLoading: true,
+  },
+};
+
 export { Example as DeleteDialog };
diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
index eba3df2903..535f151a83 100644
--- a/site/src/components/Dialogs/Dialog.tsx
+++ b/site/src/components/Dialogs/Dialog.tsx
@@ -12,8 +12,6 @@ export interface DialogActionButtonsProps {
   confirmText?: ReactNode;
   /** Whether or not confirm is loading, also disables cancel when true */
   confirmLoading?: boolean;
-  /** Whether or not this is a confirm dialog */
-  confirmDialog?: boolean;
   /** Whether or not the submit button is disabled */
   disabled?: boolean;
   /** Called when cancel is clicked */
@@ -49,6 +47,7 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
           {cancelText}
         </LoadingButton>
       )}
+
       {onConfirm && (
         <LoadingButton
           fullWidth
@@ -76,7 +75,10 @@ const styles = {
     "&.MuiButton-contained": {
       backgroundColor: colors.red[10],
       borderColor: colors.red[9],
-      color: theme.palette.text.primary,
+
+      "&:not(.MuiLoadingButton-loading)": {
+        color: theme.palette.text.primary,
+      },
 
       "&:hover:not(:disabled)": {
         backgroundColor: colors.red[9],
@@ -86,26 +88,39 @@ const styles = {
       "&.Mui-disabled": {
         backgroundColor: colors.red[15],
         borderColor: colors.red[15],
-        color: colors.red[9],
+
+        "&:not(.MuiLoadingButton-loading)": {
+          color: colors.red[9],
+        },
       },
     },
   }),
   successButton: (theme) => ({
     "&.MuiButton-contained": {
       backgroundColor: theme.palette.success.main,
-      color: theme.palette.primary.contrastText,
+
+      "&:not(.MuiLoadingButton-loading)": {
+        color: theme.palette.primary.contrastText,
+      },
+
       "&:hover": {
         backgroundColor: theme.palette.success.dark,
+
         "@media (hover: none)": {
           backgroundColor: "transparent",
         },
+
         "&.Mui-disabled": {
           backgroundColor: "transparent",
         },
       },
+
       "&.Mui-disabled": {
-        backgroundColor: theme.palette.action.disabledBackground,
-        color: theme.palette.text.secondary,
+        backgroundColor: theme.palette.success.dark,
+
+        "&:not(.MuiLoadingButton-loading)": {
+          color: theme.palette.text.secondary,
+        },
       },
     },
 
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx
index 04c1a70e09..d8072bffbc 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx
@@ -118,7 +118,6 @@ export const ScheduleDialog: FC<PropsWithChildren<ScheduleDialogProps>> = ({
       <DialogActions>
         <DialogActionButtons
           cancelText={cancelText}
-          confirmDialog
           confirmLoading={confirmLoading}
           confirmText="Submit"
           disabled={disabled}