fix: improve send test email UX

frontend/src/components/admin/configuration/TestEmailButton.tsx

@@ -1,24 +1,69 @@
-import { Button } from "@mantine/core";
+import { Button, Stack, Text, Textarea } from "@mantine/core";
+import { useModals } from "@mantine/modals";
+import { useState } from "react";
 import useUser from "../../../hooks/user.hook";
 import configService from "../../../services/config.service";
 import toast from "../../../utils/toast.util";
 
-const TestEmailButton = () => {
+const TestEmailButton = ({
+  configVariablesChanged,
+  saveConfigVariables,
+}: {
+  configVariablesChanged: boolean;
+  saveConfigVariables: () => Promise<void>;
+}) => {
   const { user } = useUser();
+  const modals = useModals();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const sendTestEmail = async () => {
+    await configService
+      .sendTestEmail(user!.email)
+      .then(() => toast.success("Email sent successfully"))
+      .catch((e) =>
+        modals.openModal({
+          title: "Failed to send email",
+          children: (
+            <Stack spacing="xs">
+              <Text size="sm">
+                While sending the test email, the following error occurred:
+              </Text>
+              <Textarea minRows={4} readOnly value={e.response.data.message} />
+            </Stack>
+          ),
+        })
+      );
+  };
 
   return (
     <Button
+      loading={isLoading}
       variant="light"
-      onClick={() =>
-        configService
-          .sendTestEmail(user!.email)
-          .then(() => toast.success("Email sent successfully"))
-          .catch(() =>
-            toast.error(
-              "Failed to send the email. Please check the backend logs for more information."
-            )
-          )
-      }
+      onClick={async () => {
+        if (!configVariablesChanged) {
+          setIsLoading(true);
+          await sendTestEmail();
+          setIsLoading(false);
+        } else {
+          modals.openConfirmModal({
+            title: "Save configuration",
+            children: (
+              <Text size="sm">
+                To continue you need to save the configuration first. Do you
+                want to save the configuration and send the test email?
+              </Text>
+            ),
+            labels: { confirm: "Save and send", cancel: "Cancel" },
+            onConfirm: async () => {
+              setIsLoading(true);
+              await saveConfigVariables();
+              await sendTestEmail();
+              setIsLoading(false);
+            },
+          });
+        }
+      }}
     >
       Send test email
     </Button>