From c0587163a046480cded759056ac9f80945db3510 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Thu, 2 Nov 2023 19:05:17 +0000
Subject: [PATCH 1/2] fix(site): fix dialog loding buttons displaying text over
 the spinner

---
 .../ConfirmDialog/ConfirmDialog.stories.tsx   |  9 ++++++
 .../Dialogs/ConfirmDialog/ConfirmDialog.tsx   |  1 -
 .../DeleteDialog/DeleteDialog.stories.tsx     |  7 +++++
 site/src/components/Dialogs/Dialog.tsx        | 29 ++++++++++++++-----
 4 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx
index 3d8bb0b4876e5..c0454a11c3b5e 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 50f0c248509d6..3686f274ccd4a 100644
--- a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
+++ b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
@@ -135,7 +135,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 92a0472fa194b..76ee741c8b402 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 eba3df2903350..535f151a83dc1 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,
+        },
       },
     },
 

From 53abf0be024463429e573da7beb83e3496c5c7f0 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Thu, 2 Nov 2023 19:28:50 +0000
Subject: [PATCH 2/2] Remove unused option

---
 site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx  | 5 +----
 .../TemplateSchedulePage/ScheduleDialog.tsx                  | 1 -
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
index 3686f274ccd4a..8ba40f079b729 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
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx
index 04c1a70e092e2..d8072bffbc40a 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}