Explain disabled mail connection tests

webui/src/components/mail/MailServerSettingsPanel.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import Button from "../Button";
 import { CredentialFields } from "../CredentialPanel";
 import DismissibleAlert from "../DismissibleAlert";
@@ -64,11 +64,13 @@ export type MailServerSettingsPanelProps = {
   smtpPasswordSaved?: boolean;
   smtpSavedPasswordPlaceholder?: string;
   smtpActionDisabled?: boolean;
+  smtpActionDisabledReason?: ReactNode;
   imapServerDisabled?: boolean;
   imapCredentialDisabled?: boolean;
   imapPasswordSaved?: boolean;
   imapSavedPasswordPlaceholder?: string;
   imapActionDisabled?: boolean;
+  imapActionDisabledReason?: ReactNode;
   smtpTestLabel?: string;
   imapTestLabel?: string;
   busyAction?: "smtp" | "imap" | "folders" | string | null;
@@ -209,11 +211,13 @@ export default function MailServerSettingsPanel({
   smtpPasswordSaved = false,
   smtpSavedPasswordPlaceholder = "••••••••",
   smtpActionDisabled = smtpDisabled,
+  smtpActionDisabledReason,
   imapServerDisabled = false,
   imapCredentialDisabled = imapServerDisabled,
   imapPasswordSaved = false,
   imapSavedPasswordPlaceholder = "••••••••",
   imapActionDisabled = imapServerDisabled,
+  imapActionDisabledReason,
   smtpTestLabel = "i18n:govoplan-core.test_smtp.e5697981",
   imapTestLabel = "i18n:govoplan-core.test_imap.ef1bd79c",
   busyAction = null,
@@ -323,7 +327,7 @@ export default function MailServerSettingsPanel({
             </div>
             {onTestSmtp &&
           <div className="button-row compact-actions mail-server-actions">
-                <Button type="button" variant="primary" onClick={onTestSmtp} disabled={smtpActionsDisabled || busyAction === "smtp"}>{busyAction === "smtp" ? "i18n:govoplan-core.testing.15ccc832" : smtpTestLabel}</Button>
+                <Button type="button" variant="primary" onClick={onTestSmtp} disabled={smtpActionsDisabled || busyAction === "smtp"} disabledReason={busyAction === "smtp" ? "SMTP connection testing is already running." : smtpActionsDisabled ? smtpActionDisabledReason : undefined}>{busyAction === "smtp" ? "i18n:govoplan-core.testing.15ccc832" : smtpTestLabel}</Button>
               </div>
           }
             <MailServerActionResult result={smtpTestResult} floating={floatingResults} />
@@ -352,7 +356,7 @@ export default function MailServerSettingsPanel({
             </div>
             {onTestImap &&
           <div className="button-row compact-actions mail-server-actions">
-                <Button type="button" variant="primary" onClick={onTestImap} disabled={imapActionsDisabled || busyAction === "imap"}>{busyAction === "imap" ? "i18n:govoplan-core.testing.15ccc832" : imapTestLabel}</Button>
+                <Button type="button" variant="primary" onClick={onTestImap} disabled={imapActionsDisabled || busyAction === "imap"} disabledReason={busyAction === "imap" ? "IMAP connection testing is already running." : imapActionsDisabled ? imapActionDisabledReason : undefined}>{busyAction === "imap" ? "i18n:govoplan-core.testing.15ccc832" : imapTestLabel}</Button>
               </div>
           }
             <MailServerActionResult result={imapTestResult} floating={floatingResults} />