feat(emails): disable unavailable email server options for local (#1576)

### Context
When working with local install, we can't send emails with resend keys/
managed domain/ custom smtp as of yet.
So, we disable those buttons and indicate to the user what's going on.

<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Disables unsupported email server options when running the dashboard
locally. Only the `shared` provider is selectable; others are disabled
with a clear tooltip.

- **New Features**
- In local development, disables Resend, Managed Domain, and Custom
SMTP; only `shared` remains enabled.
- Shows tooltip: "These email server options are not supported when
running dashboard locally." and applies disabled, non-interactive styles
without changing the card layout.

<sup>Written for commit 49828fd687.
Summary will update on new commits.</sup>

<a
href="https://cubic.dev/pr/hexclave/hexclave/pull/1576?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>

<!-- End of auto-generated description by cubic. -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Email provider selection UI now disables non-shared providers when the
dashboard is running in a local development/emulator environment, and
shows explanatory tooltips on the disabled provider cards. A
shared-environment tooltip string was added to clarify which option is
supported locally, improving clarity when configuring email settings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Aman Ganapathy 2026-06-10 13:22:01 -07:00 committed by GitHub
parent 7f99f15b42
commit 35e144e25c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -34,7 +34,7 @@ import {
} from "@phosphor-icons/react";
import { throwErr } from "@hexclave/shared/dist/utils/errors";
import { runAsynchronously, runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
import { ActionDialog, Dialog, DialogContent, DialogTitle, Label, Popover, PopoverContent, PopoverTrigger, Typography, useToast } from "@/components/ui";
import { ActionDialog, Dialog, DialogContent, DialogTitle, Label, Popover, PopoverContent, PopoverTrigger, SimpleTooltip, Typography, useToast } from "@/components/ui";
import { useCallback, useEffect, useMemo, useState } from "react";
import * as yup from "yup";
import Image from "next/image";
@ -178,6 +178,8 @@ const PROVIDERS: ProviderMeta[] = [
},
];
const REMOTE_DEVELOPMENT_ENVIRONMENT_EMAIL_PROVIDER_TOOLTIP = "These email server options are not supported when running dashboard locally.";
function TestSendingDialog(props: { trigger: React.ReactNode }) {
const hexclaveAdminApp = useAdminApp();
const project = hexclaveAdminApp.useProject();
@ -960,18 +962,21 @@ export function DomainSettings() {
const isSelected = serverType === p.value;
const isSaved = savedServerType === p.value;
const isDraft = isSelected && !isSaved;
const isDisabledInDevelopmentEnvironment = project.isDevelopmentEnvironment && p.value !== "shared";
const Icon = p.icon;
return (
const button = (
<button
key={p.value}
type="button"
disabled={isDisabledInDevelopmentEnvironment}
onClick={() => handleSelectProvider(p.value)}
className={cn(
"relative text-left rounded-xl border p-4 transition-all",
"relative h-full w-full text-left rounded-xl border p-4 transition-all disabled:pointer-events-none",
isSaved && "border-green-500/40 bg-green-500/[0.04]",
isDraft && "border-amber-500/50 bg-amber-500/[0.04] ring-1 ring-amber-500/20 border-dashed",
!isSaved && !isDraft && "border-border/60 hover:border-foreground/20 hover:bg-foreground/[0.02]",
isSelected && !isDraft && !isSaved && "border-foreground/40 bg-foreground/[0.03] shadow-sm ring-1 ring-foreground/10",
isDisabledInDevelopmentEnvironment && "cursor-not-allowed opacity-50 hover:border-border/60 hover:bg-transparent",
)}
>
<div className="absolute top-2 right-2 flex items-center gap-1">
@ -994,6 +999,11 @@ export function DomainSettings() {
<div className="text-xs text-muted-foreground mt-1 leading-relaxed">{p.tagline}</div>
</button>
);
return isDisabledInDevelopmentEnvironment ? (
<SimpleTooltip key={p.value} tooltip={REMOTE_DEVELOPMENT_ENVIRONMENT_EMAIL_PROVIDER_TOOLTIP} inline className="block h-full">
{button}
</SimpleTooltip>
) : button;
})}
</div>