From 8e16ff07a9b6c25785c966f59acfad7c26213391 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Sat, 25 Apr 2026 15:23:22 -0700
Subject: [PATCH] move switch toggle above tabs on health check dialog

---
 messages/en-US.json                    |   1 +
 src/components/HealthCheckCredenza.tsx | 239 +++++++++++++------------
 2 files changed, 121 insertions(+), 119 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index 5492768f1..13b47d135 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -1903,6 +1903,7 @@
     "configureHealthCheck": "Configure Health Check",
     "configureHealthCheckDescription": "Set up health monitoring for {target}",
     "enableHealthChecks": "Enable Health Checks",
+    "healthCheckDisabledStateDescription": "When disabled, the site will not perform health checks and the state will be considered unknown.",
     "enableHealthChecksDescription": "Monitor the health of this target. You can monitor a different endpoint than the target if required.",
     "healthScheme": "Method",
     "healthSelectScheme": "Select Method",
diff --git a/src/components/HealthCheckCredenza.tsx b/src/components/HealthCheckCredenza.tsx
index 671a16e7d..c5ab59064 100644
--- a/src/components/HealthCheckCredenza.tsx
+++ b/src/components/HealthCheckCredenza.tsx
@@ -46,6 +46,7 @@ import { SitesSelector } from "@app/components/site-selector";
 import type { Selectedsite } from "@app/components/site-selector";
 import { CaretSortIcon } from "@radix-ui/react-icons";
 import { cn } from "@app/lib/cn";
+import { SwitchInput } from "@app/components/SwitchInput";
 
 export type HealthCheckConfig = {
     hcEnabled: boolean;
@@ -407,7 +408,7 @@ export function HealthCheckCredenza(props: HealthCheckCredenzaProps) {
               })
             : t("standaloneHcDescription");
 
-    const showFields = mode === "submit" || watchedEnabled;
+    const disableTabInputs = mode === "autoSave" && !watchedEnabled;
     const isSnmpOrIcmp = watchedMode === "snmp" || watchedMode === "icmp";
     const isTcp = watchedMode === "tcp";
 
@@ -491,6 +492,40 @@ export function HealthCheckCredenza(props: HealthCheckCredenzaProps) {
                                 </div>
                             )}
 
+                            {mode === "autoSave" && (
+                                <div className="mt-5">
+                                    <FormField
+                                        control={form.control}
+                                        name="hcEnabled"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormControl>
+                                                    <SwitchInput
+                                                        id="hcEnabled"
+                                                        label={t(
+                                                            "enableHealthChecks"
+                                                        )}
+                                                        description={t(
+                                                            "healthCheckDisabledStateDescription"
+                                                        )}
+                                                        checked={field.value}
+                                                        onCheckedChange={(
+                                                            value
+                                                        ) =>
+                                                            handleChange(
+                                                                "hcEnabled",
+                                                                value,
+                                                                field.onChange
+                                                            )
+                                                        }
+                                                    />
+                                                </FormControl>
+                                            </FormItem>
+                                        )}
+                                    />
+                                </div>
+                            )}
+
                             <div className="mt-5">
                                 <HorizontalTabs
                                     clientSide
@@ -513,121 +548,85 @@ export function HealthCheckCredenza(props: HealthCheckCredenzaProps) {
                                     ]}
                                 >
                                     {/* ── Strategy tab ──────────────────────── */}
-                                    <div className="space-y-4 mt-4 p-1">
-                                        {/* Enable toggle (autoSave mode only) */}
-                                        {mode === "autoSave" && (
-                                            <FormField
-                                                control={form.control}
-                                                name="hcEnabled"
-                                                render={({ field }) => (
-                                                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                                                        <div>
-                                                            <FormLabel>
-                                                                {t(
-                                                                    "enableHealthChecks"
-                                                                )}
-                                                            </FormLabel>
-                                                        </div>
-                                                        <FormControl>
-                                                            <Switch
-                                                                checked={
-                                                                    field.value
-                                                                }
-                                                                onCheckedChange={(
-                                                                    value
-                                                                ) =>
-                                                                    handleChange(
-                                                                        "hcEnabled",
-                                                                        value,
-                                                                        field.onChange
-                                                                    )
-                                                                }
-                                                            />
-                                                        </FormControl>
-                                                    </FormItem>
-                                                )}
-                                            />
-                                        )}
-
+                                    <div className="mt-4 p-1">
+                                        <fieldset
+                                            disabled={disableTabInputs}
+                                            className={cn(
+                                                "space-y-4",
+                                                disableTabInputs &&
+                                                    "pointer-events-none opacity-60"
+                                            )}
+                                        >
                                         {/* Strategy picker */}
-                                        {showFields && (
-                                            <FormField
-                                                control={form.control}
-                                                name="hcMode"
-                                                render={({ field }) => (
-                                                    <FormItem>
-                                                        <FormControl>
-                                                            <StrategySelect
-                                                                cols={2}
-                                                                options={[
-                                                                    {
-                                                                        id: "http",
-                                                                        title: "HTTP",
-                                                                        description:
-                                                                            t(
-                                                                                "healthCheckStrategyHttp"
-                                                                            )
-                                                                    },
-                                                                    {
-                                                                        id: "tcp",
-                                                                        title: "TCP",
-                                                                        description:
-                                                                            t(
-                                                                                "healthCheckStrategyTcp"
-                                                                            )
-                                                                    },
-                                                                    {
-                                                                        id: "snmp",
-                                                                        title: "SNMP",
-                                                                        description:
-                                                                            t(
-                                                                                "healthCheckStrategySnmp"
-                                                                            )
-                                                                    },
-                                                                    {
-                                                                        id: "icmp",
-                                                                        title: "Ping (ICMP)",
-                                                                        description:
-                                                                            t(
-                                                                                "healthCheckStrategyIcmp"
-                                                                            )
-                                                                    }
-                                                                ]}
-                                                                value={
-                                                                    field.value
-                                                                }
-                                                                onChange={(
-                                                                    value
-                                                                ) =>
-                                                                    handleChange(
-                                                                        "hcMode",
-                                                                        value,
-                                                                        field.onChange
+                                        <FormField
+                                            control={form.control}
+                                            name="hcMode"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormControl>
+                                                        <StrategySelect
+                                                            cols={2}
+                                                            options={[
+                                                                {
+                                                                    id: "http",
+                                                                    title: "HTTP",
+                                                                    description: t(
+                                                                        "healthCheckStrategyHttp"
+                                                                    )
+                                                                },
+                                                                {
+                                                                    id: "tcp",
+                                                                    title: "TCP",
+                                                                    description: t(
+                                                                        "healthCheckStrategyTcp"
+                                                                    )
+                                                                },
+                                                                {
+                                                                    id: "snmp",
+                                                                    title: "SNMP",
+                                                                    description: t(
+                                                                        "healthCheckStrategySnmp"
+                                                                    )
+                                                                },
+                                                                {
+                                                                    id: "icmp",
+                                                                    title: "Ping (ICMP)",
+                                                                    description: t(
+                                                                        "healthCheckStrategyIcmp"
                                                                     )
                                                                 }
-                                                            />
-                                                        </FormControl>
-                                                        <FormMessage />
-                                                    </FormItem>
-                                                )}
-                                            />
-                                        )}
+                                                            ]}
+                                                            value={field.value}
+                                                            onChange={(value) =>
+                                                                handleChange(
+                                                                    "hcMode",
+                                                                    value,
+                                                                    field.onChange
+                                                                )
+                                                            }
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                        </fieldset>
                                     </div>
 
                                     {/* ── Connection tab ────────────────────── */}
-                                    <div className="space-y-4 mt-4 p-1">
-                                        {!showFields && (
-                                            <p className="text-sm text-muted-foreground">
-                                                {t("enableHealthChecks")}
-                                            </p>
-                                        )}
-
+                                    <div className="mt-4 p-1">
+                                        <fieldset
+                                            disabled={disableTabInputs}
+                                            className={cn(
+                                                "space-y-4",
+                                                disableTabInputs &&
+                                                    "pointer-events-none opacity-60"
+                                            )}
+                                        >
                                         {/* Contact-sales banner for SNMP / ICMP */}
-                                        {showFields && isSnmpOrIcmp && (
-                                            <ContactSalesBanner />
-                                        )}
+                                        {isSnmpOrIcmp && <ContactSalesBanner />}
 
-                                        {showFields && !isSnmpOrIcmp && (
+                                        {!isSnmpOrIcmp && (
                                             <>
                                                 {/* Scheme / Hostname / Port */}
                                                 {isTcp ? (
@@ -1021,22 +1020,23 @@ export function HealthCheckCredenza(props: HealthCheckCredenzaProps) {
                                                 )}
                                             </>
                                         )}
+                                        </fieldset>
                                     </div>
 
                                     {/* ── Advanced tab ──────────────────────── */}
-                                    <div className="space-y-4 mt-4 p-1">
-                                        {!showFields && (
-                                            <p className="text-sm text-muted-foreground">
-                                                {t("enableHealthChecks")}
-                                            </p>
-                                        )}
-
+                                    <div className="mt-4 p-1">
+                                        <fieldset
+                                            disabled={disableTabInputs}
+                                            className={cn(
+                                                "space-y-4",
+                                                disableTabInputs &&
+                                                    "pointer-events-none opacity-60"
+                                            )}
+                                        >
                                         {/* Contact-sales banner for SNMP / ICMP */}
-                                        {showFields && isSnmpOrIcmp && (
-                                            <ContactSalesBanner />
-                                        )}
+                                        {isSnmpOrIcmp && <ContactSalesBanner />}
 
-                                        {showFields && !isSnmpOrIcmp && (
+                                        {!isSnmpOrIcmp && (
                                             <>
                                                 {/* Healthy interval + threshold */}
                                                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -1350,6 +1350,7 @@ export function HealthCheckCredenza(props: HealthCheckCredenzaProps) {
                                                 )}
                                             </>
                                         )}
+                                        </fieldset>
                                     </div>
                                 </HorizontalTabs>
                             </div>