wehub-resource-sync
1221 lines
44 KiB
TypeScript
1221 lines
44 KiB
TypeScript
import { getFormProps, useForm } from "@conform-to/react";
|
|
import { parseWithZod } from "@conform-to/zod";
|
|
import { CheckCircleIcon, ExclamationTriangleIcon } from "@heroicons/react/20/solid";
|
|
import { DialogClose } from "@radix-ui/react-dialog";
|
|
import { Form, useActionData, useLocation, useNavigation } from "@remix-run/react";
|
|
import { type LoaderFunctionArgs, json } from "@remix-run/server-runtime";
|
|
import { Result, fromPromise } from "neverthrow";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { typedjson, useTypedFetcher } from "remix-typedjson";
|
|
import { z } from "zod";
|
|
import { BuildSettingsFields } from "~/components/integrations/VercelBuildSettings";
|
|
import { VercelLogo } from "~/components/integrations/VercelLogo";
|
|
import { Button } from "~/components/primitives/Buttons";
|
|
import { Callout } from "~/components/primitives/Callout";
|
|
import { DateTime } from "~/components/primitives/DateTime";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog";
|
|
import { Fieldset } from "~/components/primitives/Fieldset";
|
|
import { FormButtons } from "~/components/primitives/FormButtons";
|
|
import { FormError } from "~/components/primitives/FormError";
|
|
import { Hint } from "~/components/primitives/Hint";
|
|
import { InputGroup } from "~/components/primitives/InputGroup";
|
|
import { Label } from "~/components/primitives/Label";
|
|
import { Paragraph } from "~/components/primitives/Paragraph";
|
|
import { PermissionLink } from "~/components/primitives/PermissionLink";
|
|
import { Select, SelectItem } from "~/components/primitives/Select";
|
|
import { SpinnerWhite } from "~/components/primitives/Spinner";
|
|
import {
|
|
redirectBackWithErrorMessage,
|
|
redirectWithErrorMessage,
|
|
redirectWithSuccessMessage,
|
|
} from "~/models/message.server";
|
|
import { resolveOrgIdFromSlug } from "~/models/organization.server";
|
|
import { findProjectBySlug } from "~/models/project.server";
|
|
import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
|
|
import { VercelIntegrationRepository } from "~/models/vercelIntegration.server";
|
|
import {
|
|
type VercelOnboardingData,
|
|
VercelSettingsPresenter,
|
|
} from "~/presenters/v3/VercelSettingsPresenter.server";
|
|
import { logger } from "~/services/logger.server";
|
|
import { rbac } from "~/services/rbac.server";
|
|
import { dashboardAction } from "~/services/routeBuilders/dashboardBuilder";
|
|
import { requireUserId } from "~/services/session.server";
|
|
import { VercelIntegrationService } from "~/services/vercelIntegration.server";
|
|
import {
|
|
EnvironmentParamSchema,
|
|
v3ProjectSettingsIntegrationsPath,
|
|
vercelAppInstallPath,
|
|
vercelResourcePath,
|
|
} from "~/utils/pathBuilder";
|
|
import {
|
|
type EnvSlug,
|
|
type SyncEnvVarsMapping,
|
|
type VercelProjectIntegrationData,
|
|
envSlugArrayField,
|
|
getAvailableEnvSlugs,
|
|
getAvailableEnvSlugsForBuildSettings,
|
|
} from "~/v3/vercel/vercelProjectIntegrationSchema";
|
|
import { sanitizeVercelNextUrl } from "~/v3/vercel/vercelUrls.server";
|
|
|
|
export type ConnectedVercelProject = {
|
|
id: string;
|
|
vercelProjectId: string;
|
|
vercelProjectName: string;
|
|
vercelTeamId: string | null;
|
|
integrationData: VercelProjectIntegrationData;
|
|
createdAt: Date;
|
|
};
|
|
|
|
const safeJsonParse = Result.fromThrowable(
|
|
(val: string) => JSON.parse(val) as Record<string, unknown>,
|
|
() => null
|
|
);
|
|
|
|
function parseVercelStagingEnvironment(
|
|
value: string | null | undefined
|
|
): { environmentId: string; displayName: string } | null {
|
|
if (!value) return null;
|
|
return safeJsonParse(value).match(
|
|
(parsed) => {
|
|
if (typeof parsed?.environmentId === "string" && typeof parsed?.displayName === "string") {
|
|
return { environmentId: parsed.environmentId, displayName: parsed.displayName };
|
|
}
|
|
return null;
|
|
},
|
|
() => null
|
|
);
|
|
}
|
|
|
|
// Sentinel values for the clearTriggerVersion hidden input. Used by the schema transform,
|
|
// the input's defaultValue, and the modal's submit helper — keep all three reading the same
|
|
// constants so they cannot drift.
|
|
const CLEAR_TRIGGER_VERSION_YES = "true";
|
|
const CLEAR_TRIGGER_VERSION_NO = "false";
|
|
|
|
const UpdateVercelConfigFormSchema = z.object({
|
|
action: z.literal("update-config"),
|
|
atomicBuilds: envSlugArrayField,
|
|
pullEnvVarsBeforeBuild: envSlugArrayField,
|
|
discoverEnvVars: envSlugArrayField,
|
|
vercelStagingEnvironment: z.string().nullable().optional(),
|
|
autoPromote: z
|
|
.string()
|
|
.optional()
|
|
.transform((val) => val !== "false"),
|
|
clearTriggerVersion: z
|
|
.string()
|
|
.optional()
|
|
.transform((val) => val === CLEAR_TRIGGER_VERSION_YES),
|
|
});
|
|
|
|
const DisconnectVercelFormSchema = z.object({
|
|
action: z.literal("disconnect"),
|
|
});
|
|
|
|
const CompleteOnboardingFormSchema = z.object({
|
|
action: z.literal("complete-onboarding"),
|
|
vercelStagingEnvironment: z.string().nullable().optional(),
|
|
pullEnvVarsBeforeBuild: envSlugArrayField,
|
|
atomicBuilds: envSlugArrayField,
|
|
discoverEnvVars: envSlugArrayField,
|
|
syncEnvVarsMapping: z.string().optional(),
|
|
next: z.string().optional(),
|
|
skipRedirect: z
|
|
.string()
|
|
.optional()
|
|
.transform((val) => val === "true"),
|
|
origin: z.string().optional(),
|
|
});
|
|
|
|
const SkipOnboardingFormSchema = z.object({
|
|
action: z.literal("skip-onboarding"),
|
|
});
|
|
|
|
const SelectVercelProjectFormSchema = z.object({
|
|
action: z.literal("select-vercel-project"),
|
|
vercelProjectId: z.string().min(1, "Please select a Vercel project"),
|
|
vercelProjectName: z.string().min(1),
|
|
});
|
|
|
|
const UpdateEnvMappingFormSchema = z.object({
|
|
action: z.literal("update-env-mapping"),
|
|
vercelStagingEnvironment: z.string().nullable().optional(),
|
|
});
|
|
|
|
const DisableAutoAssignFormSchema = z.object({
|
|
action: z.literal("disable-auto-assign"),
|
|
});
|
|
|
|
const VercelActionSchema = z.discriminatedUnion("action", [
|
|
UpdateVercelConfigFormSchema,
|
|
DisconnectVercelFormSchema,
|
|
CompleteOnboardingFormSchema,
|
|
SkipOnboardingFormSchema,
|
|
SelectVercelProjectFormSchema,
|
|
UpdateEnvMappingFormSchema,
|
|
DisableAutoAssignFormSchema,
|
|
]);
|
|
|
|
export async function loader({ request, params }: LoaderFunctionArgs) {
|
|
const userId = await requireUserId(request);
|
|
const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);
|
|
|
|
const project = await findProjectBySlug(organizationSlug, projectParam, userId);
|
|
if (!project) {
|
|
throw new Response("Not Found", { status: 404 });
|
|
}
|
|
|
|
const environment = await findEnvironmentBySlug(project.id, envParam, userId);
|
|
if (!environment) {
|
|
throw new Response("Not Found", { status: 404 });
|
|
}
|
|
|
|
const presenter = new VercelSettingsPresenter();
|
|
const resultOrFail = await presenter.call({
|
|
projectId: project.id,
|
|
organizationId: project.organizationId,
|
|
});
|
|
|
|
if (resultOrFail.isErr()) {
|
|
logger.error("Failed to load Vercel settings", {
|
|
url: request.url,
|
|
params,
|
|
error: resultOrFail.error,
|
|
});
|
|
throw new Response("Failed to load Vercel settings", { status: 500 });
|
|
}
|
|
|
|
const result = resultOrFail.value;
|
|
const url = new URL(request.url);
|
|
const needsOnboarding = url.searchParams.get("vercelOnboarding") === "true";
|
|
const vercelEnvironmentId = url.searchParams.get("vercelEnvironmentId") || undefined;
|
|
|
|
let onboardingData: VercelOnboardingData | null = null;
|
|
if (needsOnboarding) {
|
|
onboardingData = await presenter.getOnboardingData(
|
|
project.id,
|
|
project.organizationId,
|
|
vercelEnvironmentId
|
|
);
|
|
}
|
|
|
|
const authInvalid = onboardingData?.authInvalid || result.authInvalid || false;
|
|
const authError = onboardingData?.authError || result.authError;
|
|
|
|
// Display flag for the connect/disconnect/configure controls — the action
|
|
// enforces write:vercel independently. Permissive in OSS.
|
|
const sessionAuth = await rbac.authenticateSession(request, {
|
|
userId,
|
|
organizationId: project.organizationId,
|
|
});
|
|
const canManageVercel = sessionAuth.ok
|
|
? sessionAuth.ability.can("write", { type: "vercel" })
|
|
: true;
|
|
|
|
return typedjson({
|
|
...result,
|
|
authInvalid,
|
|
authError,
|
|
onboardingData,
|
|
organizationSlug,
|
|
projectSlug: projectParam,
|
|
environmentSlug: envParam,
|
|
projectId: project.id,
|
|
organizationId: project.organizationId,
|
|
canManageVercel,
|
|
});
|
|
}
|
|
|
|
export const action = dashboardAction(
|
|
{
|
|
params: EnvironmentParamSchema,
|
|
context: async (params) => {
|
|
const organizationId = await resolveOrgIdFromSlug(params.organizationSlug);
|
|
return organizationId ? { organizationId } : {};
|
|
},
|
|
authorization: { action: "write", resource: { type: "vercel" } },
|
|
},
|
|
async ({ request, params, user }) => {
|
|
const userId = user.id;
|
|
const { organizationSlug, projectParam, envParam } = params;
|
|
|
|
const project = await findProjectBySlug(organizationSlug, projectParam, userId);
|
|
if (!project) {
|
|
throw new Response("Not Found", { status: 404 });
|
|
}
|
|
|
|
const environment = await findEnvironmentBySlug(project.id, envParam, userId);
|
|
if (!environment) {
|
|
throw new Response("Not Found", { status: 404 });
|
|
}
|
|
|
|
const formData = await request.formData();
|
|
const submission = parseWithZod(formData, { schema: VercelActionSchema });
|
|
|
|
if (submission.status !== "success") {
|
|
return json(submission.reply());
|
|
}
|
|
|
|
const settingsPath = v3ProjectSettingsIntegrationsPath(
|
|
{ slug: organizationSlug },
|
|
{ slug: projectParam },
|
|
{ slug: envParam }
|
|
);
|
|
|
|
const vercelService = new VercelIntegrationService();
|
|
const { action: actionType } = submission.value;
|
|
|
|
switch (actionType) {
|
|
case "update-config": {
|
|
const {
|
|
atomicBuilds,
|
|
pullEnvVarsBeforeBuild,
|
|
discoverEnvVars,
|
|
vercelStagingEnvironment,
|
|
autoPromote,
|
|
clearTriggerVersion,
|
|
} = submission.value;
|
|
|
|
const parsedStagingEnv = parseVercelStagingEnvironment(vercelStagingEnvironment);
|
|
|
|
// Get the previous staging environment before updating
|
|
const previousIntegration = await vercelService.getVercelProjectIntegration(project.id);
|
|
const previousStagingEnvId =
|
|
previousIntegration?.parsedIntegrationData.config?.vercelStagingEnvironment
|
|
?.environmentId ?? null;
|
|
const newStagingEnvId = parsedStagingEnv?.environmentId ?? null;
|
|
|
|
const result = await vercelService.updateVercelIntegrationConfig(project.id, {
|
|
atomicBuilds,
|
|
pullEnvVarsBeforeBuild,
|
|
discoverEnvVars,
|
|
vercelStagingEnvironment: parsedStagingEnv,
|
|
autoPromote,
|
|
});
|
|
|
|
if (result) {
|
|
// Sync staging TRIGGER_SECRET_KEY if the custom environment changed
|
|
if (previousStagingEnvId !== newStagingEnvId) {
|
|
await vercelService.syncStagingKeyForCustomEnvironment(
|
|
project.id,
|
|
previousStagingEnvId,
|
|
newStagingEnvId
|
|
);
|
|
}
|
|
|
|
// When atomic deployments are being disabled and the user confirmed clearing the pin,
|
|
// remove TRIGGER_VERSION from Vercel production so future deploys don't stay pinned.
|
|
// If the Vercel API call fails we still consider the settings save itself successful,
|
|
// but tell the user so they can clear the env var manually from the Vercel dashboard.
|
|
if (clearTriggerVersion && !atomicBuilds?.includes("prod")) {
|
|
const cleared = await vercelService.clearTriggerVersionFromVercelProduction(project.id);
|
|
if (!cleared) {
|
|
return redirectWithErrorMessage(
|
|
settingsPath,
|
|
request,
|
|
"Vercel settings saved, but failed to clear TRIGGER_VERSION on Vercel — please remove it manually from your Vercel project settings."
|
|
);
|
|
}
|
|
}
|
|
|
|
return redirectWithSuccessMessage(
|
|
settingsPath,
|
|
request,
|
|
"Vercel settings updated successfully"
|
|
);
|
|
}
|
|
|
|
return redirectWithErrorMessage(settingsPath, request, "Failed to update Vercel settings");
|
|
}
|
|
|
|
case "disconnect": {
|
|
const success = await vercelService.disconnectVercelProject(project.id);
|
|
|
|
if (success) {
|
|
return redirectWithSuccessMessage(settingsPath, request, "Vercel project disconnected");
|
|
}
|
|
|
|
return redirectWithErrorMessage(
|
|
settingsPath,
|
|
request,
|
|
"Failed to disconnect Vercel project"
|
|
);
|
|
}
|
|
|
|
case "complete-onboarding": {
|
|
const {
|
|
vercelStagingEnvironment,
|
|
pullEnvVarsBeforeBuild,
|
|
atomicBuilds,
|
|
discoverEnvVars,
|
|
syncEnvVarsMapping,
|
|
next,
|
|
skipRedirect,
|
|
origin,
|
|
} = submission.value;
|
|
|
|
const parsedStagingEnv = parseVercelStagingEnvironment(vercelStagingEnvironment);
|
|
const parsedSyncEnvVarsMapping = syncEnvVarsMapping
|
|
? (safeJsonParse(syncEnvVarsMapping).unwrapOr(undefined) as
|
|
| SyncEnvVarsMapping
|
|
| undefined)
|
|
: undefined;
|
|
|
|
const result = await vercelService.completeOnboarding(project.id, {
|
|
vercelStagingEnvironment: parsedStagingEnv,
|
|
pullEnvVarsBeforeBuild,
|
|
atomicBuilds,
|
|
discoverEnvVars,
|
|
syncEnvVarsMapping: parsedSyncEnvVarsMapping,
|
|
origin: origin === "marketplace" ? "marketplace" : "dashboard",
|
|
});
|
|
|
|
if (result) {
|
|
if (skipRedirect) {
|
|
return json({ success: true });
|
|
}
|
|
|
|
if (next) {
|
|
const sanitizedNext = sanitizeVercelNextUrl(next);
|
|
if (sanitizedNext) {
|
|
return json({ success: true, redirectTo: sanitizedNext });
|
|
}
|
|
logger.warn("Rejected next URL - not same-origin or vercel.com", { next });
|
|
}
|
|
|
|
return json({ success: true, redirectTo: settingsPath });
|
|
}
|
|
|
|
return redirectWithErrorMessage(settingsPath, request, "Failed to complete Vercel setup");
|
|
}
|
|
|
|
case "update-env-mapping": {
|
|
const { vercelStagingEnvironment } = submission.value;
|
|
|
|
const parsedStagingEnv = parseVercelStagingEnvironment(vercelStagingEnvironment);
|
|
|
|
const result = await vercelService.updateVercelIntegrationConfig(project.id, {
|
|
vercelStagingEnvironment: parsedStagingEnv,
|
|
});
|
|
|
|
if (result) {
|
|
// During onboarding there's no previous custom environment — just upsert
|
|
await vercelService.syncStagingKeyForCustomEnvironment(
|
|
project.id,
|
|
null,
|
|
parsedStagingEnv?.environmentId ?? null
|
|
);
|
|
return json({ success: true });
|
|
}
|
|
|
|
return json(
|
|
{ success: false, error: "Failed to update environment mapping" },
|
|
{ status: 400 }
|
|
);
|
|
}
|
|
|
|
case "skip-onboarding": {
|
|
return redirectWithSuccessMessage(
|
|
settingsPath,
|
|
request,
|
|
"Vercel integration setup skipped"
|
|
);
|
|
}
|
|
|
|
case "select-vercel-project": {
|
|
const { vercelProjectId, vercelProjectName } = submission.value;
|
|
|
|
const selectResult = await fromPromise(
|
|
vercelService.selectVercelProject({
|
|
organizationId: project.organizationId,
|
|
projectId: project.id,
|
|
vercelProjectId,
|
|
vercelProjectName,
|
|
userId,
|
|
}),
|
|
(error) => error
|
|
);
|
|
|
|
if (selectResult.isErr()) {
|
|
logger.error("Failed to select Vercel project", { error: selectResult.error });
|
|
return json({
|
|
error: "Failed to connect Vercel project. Please try again.",
|
|
});
|
|
}
|
|
|
|
const { integration, syncResult } = selectResult.value;
|
|
|
|
if (!syncResult.success && syncResult.errors.length > 0) {
|
|
logger.warn("Failed to send trigger secrets to Vercel", {
|
|
projectId: project.id,
|
|
vercelProjectId,
|
|
errors: syncResult.errors,
|
|
});
|
|
}
|
|
|
|
return json({
|
|
success: true,
|
|
integrationId: integration.id,
|
|
syncErrors: syncResult.errors,
|
|
});
|
|
}
|
|
|
|
case "disable-auto-assign": {
|
|
const orgIntegration = await VercelIntegrationRepository.findVercelOrgIntegrationForProject(
|
|
project.id
|
|
);
|
|
|
|
if (!orgIntegration) {
|
|
return redirectWithErrorMessage(settingsPath, request, "No Vercel integration found");
|
|
}
|
|
|
|
const projectIntegration = await vercelService.getVercelProjectIntegration(project.id);
|
|
|
|
if (!projectIntegration) {
|
|
return redirectWithErrorMessage(settingsPath, request, "No Vercel project connected");
|
|
}
|
|
|
|
const teamId = await VercelIntegrationRepository.getTeamIdFromIntegration(orgIntegration);
|
|
|
|
const disableResult = await VercelIntegrationRepository.getVercelClient(
|
|
orgIntegration
|
|
).andThen((client) =>
|
|
VercelIntegrationRepository.disableAutoAssignCustomDomains(
|
|
client,
|
|
projectIntegration.parsedIntegrationData.vercelProjectId,
|
|
teamId
|
|
)
|
|
);
|
|
|
|
if (disableResult.isErr()) {
|
|
logger.error("Failed to disable auto-assign custom domains", {
|
|
error: disableResult.error,
|
|
});
|
|
return redirectWithErrorMessage(
|
|
settingsPath,
|
|
request,
|
|
"Failed to disable auto-assign custom domains"
|
|
);
|
|
}
|
|
|
|
return redirectWithSuccessMessage(
|
|
settingsPath,
|
|
request,
|
|
"Auto-assign custom domains disabled"
|
|
);
|
|
}
|
|
|
|
default: {
|
|
submission.value satisfies never;
|
|
return redirectBackWithErrorMessage(request, "Failed to process request");
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
function VercelConnectionPrompt({
|
|
organizationSlug,
|
|
projectSlug,
|
|
environmentSlug,
|
|
hasOrgIntegration,
|
|
isGitHubConnected,
|
|
onOpenModal,
|
|
isLoading,
|
|
canManageVercel = true,
|
|
}: {
|
|
organizationSlug: string;
|
|
projectSlug: string;
|
|
environmentSlug: string;
|
|
hasOrgIntegration: boolean;
|
|
isGitHubConnected: boolean;
|
|
onOpenModal?: () => void;
|
|
isLoading?: boolean;
|
|
canManageVercel?: boolean;
|
|
}) {
|
|
const installPath = vercelAppInstallPath(organizationSlug, projectSlug);
|
|
|
|
const handleConnectProject = () => {
|
|
if (onOpenModal) {
|
|
onOpenModal();
|
|
}
|
|
};
|
|
|
|
const isLoadingProjects = isLoading ?? false;
|
|
const isDisabled = isLoadingProjects || !onOpenModal;
|
|
|
|
return (
|
|
<Fieldset>
|
|
<InputGroup fullWidth>
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center gap-3">
|
|
{hasOrgIntegration ? (
|
|
<>
|
|
<Button
|
|
variant="secondary/medium"
|
|
onClick={handleConnectProject}
|
|
disabled={isDisabled || !canManageVercel}
|
|
tooltip={
|
|
canManageVercel
|
|
? undefined
|
|
: "You don't have permission to manage the Vercel integration"
|
|
}
|
|
LeadingIcon={
|
|
isLoadingProjects
|
|
? () => <SpinnerWhite className="size-4" />
|
|
: () => <VercelLogo className="-mx-1 size-4" />
|
|
}
|
|
>
|
|
{isLoadingProjects ? "Loading projects..." : "Connect Vercel project"}
|
|
</Button>
|
|
<span className="flex items-center gap-1 text-xs text-text-dimmed">
|
|
<CheckCircleIcon className="size-4 text-success" /> Vercel app is installed
|
|
</span>
|
|
{!onOpenModal && (
|
|
<span className="text-xs text-amber-400">
|
|
Please reconnect Vercel to continue
|
|
</span>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
<PermissionLink
|
|
hasPermission={canManageVercel}
|
|
noPermissionTooltip="You don't have permission to manage the Vercel integration"
|
|
to={installPath}
|
|
variant="secondary/medium"
|
|
LeadingIcon={() => <VercelLogo className="-mx-1 size-4" />}
|
|
>
|
|
Install Vercel app
|
|
</PermissionLink>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</InputGroup>
|
|
</Fieldset>
|
|
);
|
|
}
|
|
|
|
function VercelAuthInvalidBanner({
|
|
organizationSlug,
|
|
projectSlug,
|
|
canManageVercel = true,
|
|
}: {
|
|
organizationSlug: string;
|
|
projectSlug: string;
|
|
canManageVercel?: boolean;
|
|
}) {
|
|
const installUrl = vercelAppInstallPath(organizationSlug, projectSlug);
|
|
|
|
return (
|
|
<Callout variant="error" className="mb-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-1">
|
|
<p className="mb-2 font-sans text-sm font-medium text-text-bright">
|
|
Vercel connection expired
|
|
</p>
|
|
<p className="mb-3 font-sans text-xs text-text-dimmed">
|
|
Your Vercel access token has expired or been revoked. Please reconnect to restore
|
|
functionality.
|
|
</p>
|
|
<PermissionLink
|
|
hasPermission={canManageVercel}
|
|
noPermissionTooltip="You don't have permission to manage the Vercel integration"
|
|
to={installUrl}
|
|
variant="minimal/small"
|
|
className="border-error/20 bg-error/10 text-error hover:bg-error/20"
|
|
>
|
|
Reconnect Vercel
|
|
</PermissionLink>
|
|
</div>
|
|
</div>
|
|
</Callout>
|
|
);
|
|
}
|
|
|
|
function VercelGitHubWarning() {
|
|
return (
|
|
<Callout variant="warning" className="mb-4">
|
|
<p className="font-sans text-xs font-normal text-text-dimmed">
|
|
GitHub integration is not connected. Vercel integration cannot sync environment variables
|
|
and link deployments without a properly installed GitHub integration.
|
|
</p>
|
|
</Callout>
|
|
);
|
|
}
|
|
|
|
function envSlugLabel(slug: EnvSlug): string {
|
|
switch (slug) {
|
|
case "prod":
|
|
return "Production";
|
|
case "stg":
|
|
return "Staging";
|
|
case "preview":
|
|
return "Preview";
|
|
case "dev":
|
|
return "Development";
|
|
}
|
|
}
|
|
|
|
function ConnectedVercelProjectForm({
|
|
connectedProject,
|
|
hasStagingEnvironment,
|
|
hasPreviewEnvironment,
|
|
customEnvironments,
|
|
autoAssignCustomDomains,
|
|
currentTriggerVersion,
|
|
currentTriggerVersionFetchFailed,
|
|
organizationSlug,
|
|
projectSlug,
|
|
environmentSlug,
|
|
canManageVercel = true,
|
|
}: {
|
|
connectedProject: ConnectedVercelProject;
|
|
hasStagingEnvironment: boolean;
|
|
hasPreviewEnvironment: boolean;
|
|
customEnvironments: Array<{ id: string; slug: string }>;
|
|
autoAssignCustomDomains: boolean | null;
|
|
currentTriggerVersion: string | null;
|
|
currentTriggerVersionFetchFailed: boolean;
|
|
organizationSlug: string;
|
|
projectSlug: string;
|
|
environmentSlug: string;
|
|
canManageVercel?: boolean;
|
|
}) {
|
|
const lastSubmission = useActionData() as any;
|
|
const navigation = useNavigation();
|
|
|
|
const [hasConfigChanges, setHasConfigChanges] = useState(false);
|
|
const [configValues, setConfigValues] = useState({
|
|
atomicBuilds: connectedProject.integrationData.config.atomicBuilds ?? [],
|
|
pullEnvVarsBeforeBuild: connectedProject.integrationData.config.pullEnvVarsBeforeBuild ?? [],
|
|
discoverEnvVars: connectedProject.integrationData.config.discoverEnvVars ?? [],
|
|
vercelStagingEnvironment:
|
|
connectedProject.integrationData.config.vercelStagingEnvironment ?? null,
|
|
autoPromote: connectedProject.integrationData.config.autoPromote ?? true,
|
|
});
|
|
|
|
const originalAtomicBuilds = connectedProject.integrationData.config.atomicBuilds ?? [];
|
|
const originalPullEnvVars = connectedProject.integrationData.config.pullEnvVarsBeforeBuild ?? [];
|
|
const originalDiscoverEnvVars = connectedProject.integrationData.config.discoverEnvVars ?? [];
|
|
const originalStagingEnv =
|
|
connectedProject.integrationData.config.vercelStagingEnvironment ?? null;
|
|
const originalAutoPromote = connectedProject.integrationData.config.autoPromote ?? true;
|
|
|
|
useEffect(() => {
|
|
const atomicBuildsChanged =
|
|
JSON.stringify([...configValues.atomicBuilds].sort()) !==
|
|
JSON.stringify([...originalAtomicBuilds].sort());
|
|
const pullEnvVarsChanged =
|
|
JSON.stringify([...configValues.pullEnvVarsBeforeBuild].sort()) !==
|
|
JSON.stringify([...originalPullEnvVars].sort());
|
|
const discoverEnvVarsChanged =
|
|
JSON.stringify([...configValues.discoverEnvVars].sort()) !==
|
|
JSON.stringify([...originalDiscoverEnvVars].sort());
|
|
const stagingEnvChanged =
|
|
configValues.vercelStagingEnvironment?.environmentId !== originalStagingEnv?.environmentId;
|
|
const autoPromoteChanged = configValues.autoPromote !== originalAutoPromote;
|
|
|
|
setHasConfigChanges(
|
|
atomicBuildsChanged ||
|
|
pullEnvVarsChanged ||
|
|
discoverEnvVarsChanged ||
|
|
stagingEnvChanged ||
|
|
autoPromoteChanged
|
|
);
|
|
}, [
|
|
configValues,
|
|
originalAtomicBuilds,
|
|
originalPullEnvVars,
|
|
originalDiscoverEnvVars,
|
|
originalStagingEnv,
|
|
originalAutoPromote,
|
|
]);
|
|
|
|
const [configForm, _fields] = useForm({
|
|
id: "update-vercel-config",
|
|
lastResult: lastSubmission,
|
|
shouldRevalidate: "onSubmit",
|
|
onValidate({ formData }) {
|
|
return parseWithZod(formData, {
|
|
schema: UpdateVercelConfigFormSchema,
|
|
});
|
|
},
|
|
});
|
|
|
|
const saveButtonRef = useRef<HTMLButtonElement>(null);
|
|
const clearTriggerVersionInputRef = useRef<HTMLInputElement>(null);
|
|
const [showClearDialog, setShowClearDialog] = useState(false);
|
|
|
|
// Modal trigger uses the page-load state of atomicBuilds, not whatever changed in-session,
|
|
// because clearing TRIGGER_VERSION only makes sense when atomic was actually on at load time.
|
|
// If the Vercel lookup failed we still prompt — we don't know whether a pin exists, so the
|
|
// user needs to make the call explicitly rather than silently leaving prod pinned.
|
|
const wasAtomicEnabledAtLoad = originalAtomicBuilds.includes("prod");
|
|
const isAtomicNowDisabled = !configValues.atomicBuilds.includes("prod");
|
|
const shouldPromptClearOnSave =
|
|
wasAtomicEnabledAtLoad &&
|
|
isAtomicNowDisabled &&
|
|
(Boolean(currentTriggerVersion) || currentTriggerVersionFetchFailed);
|
|
|
|
const submitWithClearChoice = (clear: boolean) => {
|
|
if (clearTriggerVersionInputRef.current) {
|
|
clearTriggerVersionInputRef.current.value = clear
|
|
? CLEAR_TRIGGER_VERSION_YES
|
|
: CLEAR_TRIGGER_VERSION_NO;
|
|
}
|
|
setShowClearDialog(false);
|
|
// Conform owns the form's React ref via {...configForm.props}, so look it up by id
|
|
// (set via useForm({ id: "update-vercel-config" })) rather than fighting for the ref.
|
|
const form = document.getElementById("update-vercel-config") as HTMLFormElement | null;
|
|
form?.requestSubmit(saveButtonRef.current ?? undefined);
|
|
};
|
|
|
|
const isConfigLoading =
|
|
navigation.formData?.get("action") === "update-config" &&
|
|
(navigation.state === "submitting" || navigation.state === "loading");
|
|
|
|
const actionUrl = vercelResourcePath(organizationSlug, projectSlug, environmentSlug);
|
|
|
|
const availableEnvSlugs = getAvailableEnvSlugs(hasStagingEnvironment, hasPreviewEnvironment);
|
|
const availableEnvSlugsForBuildSettings = getAvailableEnvSlugsForBuildSettings(
|
|
hasStagingEnvironment,
|
|
hasPreviewEnvironment
|
|
);
|
|
|
|
const disabledEnvSlugsForBuildSettings: Partial<Record<EnvSlug, string>> | undefined =
|
|
hasStagingEnvironment && !configValues.vercelStagingEnvironment
|
|
? { stg: "Map a custom Vercel environment to Staging to enable this" }
|
|
: undefined;
|
|
|
|
const _formatSelectedEnvs = (
|
|
selected: EnvSlug[],
|
|
availableSlugs: EnvSlug[] = availableEnvSlugs
|
|
): string => {
|
|
if (selected.length === 0) return "None selected";
|
|
if (selected.length === availableSlugs.length) return "All environments";
|
|
return selected.map(envSlugLabel).join(", ");
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-4 flex items-center justify-between rounded-sm border bg-grid-dimmed p-2">
|
|
<div className="flex items-center gap-2">
|
|
<VercelLogo className="size-4" />
|
|
<span className="max-w-52 truncate text-sm text-text-bright">
|
|
{connectedProject.vercelProjectName}
|
|
</span>
|
|
<span className="text-xs text-text-dimmed">
|
|
<DateTime
|
|
date={connectedProject.createdAt}
|
|
includeTime={false}
|
|
includeSeconds={false}
|
|
showTimezone={false}
|
|
showTooltip={false}
|
|
/>
|
|
</span>
|
|
</div>
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
variant="minimal/small"
|
|
disabled={!canManageVercel}
|
|
tooltip={
|
|
canManageVercel
|
|
? undefined
|
|
: "You don't have permission to manage the Vercel integration"
|
|
}
|
|
>
|
|
Disconnect
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-md">
|
|
<DialogHeader>Disconnect Vercel project</DialogHeader>
|
|
<div className="flex flex-col gap-3 pt-3">
|
|
<Paragraph className="mb-1">
|
|
Are you sure you want to disconnect{" "}
|
|
<span className="font-semibold">{connectedProject.vercelProjectName}</span>? This
|
|
will stop pulling environment variables and disable atomic deployments.
|
|
</Paragraph>
|
|
<FormButtons
|
|
confirmButton={
|
|
<Form method="post" action={actionUrl}>
|
|
<input type="hidden" name="action" value="disconnect" />
|
|
<Button type="submit" variant="danger/medium">
|
|
Disconnect project
|
|
</Button>
|
|
</Form>
|
|
}
|
|
cancelButton={
|
|
<DialogClose asChild>
|
|
<Button variant="tertiary/medium">Cancel</Button>
|
|
</DialogClose>
|
|
}
|
|
/>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
|
|
{/* Configuration form */}
|
|
<Form method="post" action={actionUrl} {...getFormProps(configForm)}>
|
|
<input
|
|
type="hidden"
|
|
name="atomicBuilds"
|
|
value={JSON.stringify(configValues.atomicBuilds)}
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
name="pullEnvVarsBeforeBuild"
|
|
value={JSON.stringify(configValues.pullEnvVarsBeforeBuild)}
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
name="discoverEnvVars"
|
|
value={JSON.stringify(configValues.discoverEnvVars)}
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
name="vercelStagingEnvironment"
|
|
value={
|
|
configValues.vercelStagingEnvironment
|
|
? JSON.stringify(configValues.vercelStagingEnvironment)
|
|
: ""
|
|
}
|
|
/>
|
|
<input type="hidden" name="autoPromote" value={String(configValues.autoPromote)} />
|
|
{/* Flipped to CLEAR_TRIGGER_VERSION_YES by the clear-pinned-version modal on submit. */}
|
|
<input
|
|
type="hidden"
|
|
name="clearTriggerVersion"
|
|
defaultValue={CLEAR_TRIGGER_VERSION_NO}
|
|
ref={clearTriggerVersionInputRef}
|
|
/>
|
|
|
|
<Fieldset>
|
|
<InputGroup fullWidth>
|
|
<div className="flex flex-col gap-4">
|
|
{/* Staging environment mapping */}
|
|
{hasStagingEnvironment && customEnvironments && customEnvironments.length > 0 && (
|
|
<div>
|
|
<Label>Map Vercel environment to Staging</Label>
|
|
<Hint className="mb-2">
|
|
Select which custom Vercel environment should map to Trigger.dev's Staging
|
|
environment.
|
|
</Hint>
|
|
<Select
|
|
value={configValues.vercelStagingEnvironment?.environmentId || ""}
|
|
setValue={(value) => {
|
|
if (!Array.isArray(value)) {
|
|
const env = customEnvironments?.find((e) => e.id === value);
|
|
setConfigValues((prev) => {
|
|
const next = {
|
|
...prev,
|
|
vercelStagingEnvironment: env
|
|
? { environmentId: env.id, displayName: env.slug }
|
|
: null,
|
|
};
|
|
// When clearing the staging mapping, strip "stg" from build settings
|
|
if (!env) {
|
|
next.pullEnvVarsBeforeBuild = prev.pullEnvVarsBeforeBuild.filter(
|
|
(s) => s !== "stg"
|
|
);
|
|
next.discoverEnvVars = prev.discoverEnvVars.filter((s) => s !== "stg");
|
|
}
|
|
return next;
|
|
});
|
|
}
|
|
}}
|
|
items={[{ id: "", slug: "None" }, ...customEnvironments]}
|
|
variant="tertiary/small"
|
|
placeholder="Select environment"
|
|
dropdownIcon
|
|
text={configValues.vercelStagingEnvironment?.displayName || "None"}
|
|
>
|
|
{[
|
|
<SelectItem key="" value="">
|
|
None
|
|
</SelectItem>,
|
|
...customEnvironments.map((env) => (
|
|
<SelectItem key={env.id} value={env.id}>
|
|
{env.slug}
|
|
</SelectItem>
|
|
)),
|
|
]}
|
|
</Select>
|
|
</div>
|
|
)}
|
|
|
|
<BuildSettingsFields
|
|
availableEnvSlugs={availableEnvSlugsForBuildSettings}
|
|
pullEnvVarsBeforeBuild={configValues.pullEnvVarsBeforeBuild}
|
|
onPullEnvVarsChange={(slugs) =>
|
|
setConfigValues((prev) => ({ ...prev, pullEnvVarsBeforeBuild: slugs }))
|
|
}
|
|
discoverEnvVars={configValues.discoverEnvVars}
|
|
onDiscoverEnvVarsChange={(slugs) =>
|
|
setConfigValues((prev) => ({ ...prev, discoverEnvVars: slugs }))
|
|
}
|
|
atomicBuilds={configValues.atomicBuilds}
|
|
onAtomicBuildsChange={(slugs) =>
|
|
setConfigValues((prev) => ({ ...prev, atomicBuilds: slugs }))
|
|
}
|
|
envVarsConfigLink={`/orgs/${organizationSlug}/projects/${projectSlug}/env/${environmentSlug}/environment-variables`}
|
|
disabledEnvSlugs={disabledEnvSlugsForBuildSettings}
|
|
autoPromote={configValues.autoPromote}
|
|
onAutoPromoteChange={(value) =>
|
|
setConfigValues((prev) => ({ ...prev, autoPromote: value }))
|
|
}
|
|
currentTriggerVersion={currentTriggerVersion}
|
|
currentTriggerVersionFetchFailed={currentTriggerVersionFetchFailed}
|
|
hideSectionToggles
|
|
/>
|
|
|
|
{/* Warning: autoAssignCustomDomains must be disabled for atomic deployments */}
|
|
{autoAssignCustomDomains !== false && configValues.atomicBuilds.includes("prod") && (
|
|
<Callout variant="warning">
|
|
<div className="flex flex-col gap-2">
|
|
<p className="font-sans text-xs font-normal text-text-dimmed">
|
|
Atomic deployments require the "Auto-assign Custom Domains" setting to be
|
|
disabled on your Vercel project. Without this, Vercel will promote deployments
|
|
before Trigger.dev is ready.
|
|
</p>
|
|
<Form method="post" action={actionUrl}>
|
|
<input type="hidden" name="action" value="disable-auto-assign" />
|
|
<Button
|
|
type="submit"
|
|
variant="tertiary/small"
|
|
disabled={
|
|
navigation.formData?.get("action") === "disable-auto-assign" &&
|
|
(navigation.state === "submitting" || navigation.state === "loading")
|
|
}
|
|
LeadingIcon={
|
|
navigation.formData?.get("action") === "disable-auto-assign" &&
|
|
(navigation.state === "submitting" || navigation.state === "loading")
|
|
? SpinnerWhite
|
|
: undefined
|
|
}
|
|
>
|
|
Disable auto-assign custom domains
|
|
</Button>
|
|
</Form>
|
|
</div>
|
|
</Callout>
|
|
)}
|
|
</div>
|
|
|
|
<FormError>{configForm.errors}</FormError>
|
|
</InputGroup>
|
|
|
|
<FormButtons
|
|
confirmButton={
|
|
<Button
|
|
ref={saveButtonRef}
|
|
type="submit"
|
|
name="action"
|
|
value="update-config"
|
|
variant="secondary/small"
|
|
disabled={isConfigLoading || !hasConfigChanges || !canManageVercel}
|
|
tooltip={
|
|
canManageVercel
|
|
? undefined
|
|
: "You don't have permission to manage the Vercel integration"
|
|
}
|
|
LeadingIcon={isConfigLoading ? SpinnerWhite : undefined}
|
|
onClick={(event) => {
|
|
if (shouldPromptClearOnSave) {
|
|
event.preventDefault();
|
|
setShowClearDialog(true);
|
|
}
|
|
}}
|
|
>
|
|
Save
|
|
</Button>
|
|
}
|
|
/>
|
|
</Fieldset>
|
|
</Form>
|
|
|
|
<Dialog open={showClearDialog} onOpenChange={setShowClearDialog}>
|
|
<DialogContent className="max-w-md">
|
|
<DialogHeader>Clear TRIGGER_VERSION from Vercel?</DialogHeader>
|
|
<div className="flex flex-col gap-3 pt-3">
|
|
{currentTriggerVersion ? (
|
|
<Paragraph className="mb-1">
|
|
Atomic deployments are being turned off. The{" "}
|
|
<span className="font-mono text-text-bright">TRIGGER_VERSION</span> env var on your
|
|
Vercel production environment is currently set to{" "}
|
|
<span className="font-mono text-text-bright">{currentTriggerVersion}</span>.
|
|
</Paragraph>
|
|
) : (
|
|
<Paragraph className="mb-1">
|
|
Atomic deployments are being turned off. We couldn't reach Vercel to confirm whether{" "}
|
|
<span className="font-mono text-text-bright">TRIGGER_VERSION</span> is currently set
|
|
on your Vercel production environment, so please verify in the Vercel dashboard.
|
|
</Paragraph>
|
|
)}
|
|
<Paragraph className="mb-1">
|
|
If you leave it, your Vercel project will stay pinned to this version. Since atomic
|
|
deployments will be off, Trigger.dev will no longer update this variable, and future
|
|
Vercel deploys will continue using this pinned version. We recommend clearing it.
|
|
</Paragraph>
|
|
<FormButtons
|
|
confirmButton={
|
|
<div className="flex gap-2">
|
|
<Button variant="secondary/medium" onClick={() => submitWithClearChoice(false)}>
|
|
Keep pinned
|
|
</Button>
|
|
<Button variant="primary/medium" onClick={() => submitWithClearChoice(true)}>
|
|
Clear and disable
|
|
</Button>
|
|
</div>
|
|
}
|
|
cancelButton={
|
|
<DialogClose asChild>
|
|
<Button variant="tertiary/medium">Cancel</Button>
|
|
</DialogClose>
|
|
}
|
|
/>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function VercelSettingsPanel({
|
|
organizationSlug,
|
|
projectSlug,
|
|
environmentSlug,
|
|
onOpenVercelModal,
|
|
isLoadingVercelData,
|
|
}: {
|
|
organizationSlug: string;
|
|
projectSlug: string;
|
|
environmentSlug: string;
|
|
onOpenVercelModal?: () => void;
|
|
isLoadingVercelData?: boolean;
|
|
}) {
|
|
const fetcher = useTypedFetcher<typeof loader>();
|
|
const _location = useLocation();
|
|
const data = fetcher.data;
|
|
const [hasError, _setHasError] = useState(false);
|
|
const [hasFetched, setHasFetched] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!data?.authInvalid && !hasError && !data && !hasFetched) {
|
|
fetcher.load(vercelResourcePath(organizationSlug, projectSlug, environmentSlug));
|
|
setHasFetched(true);
|
|
}
|
|
}, [
|
|
organizationSlug,
|
|
projectSlug,
|
|
environmentSlug,
|
|
data?.authInvalid,
|
|
hasError,
|
|
data,
|
|
hasFetched,
|
|
]);
|
|
|
|
if (hasError) {
|
|
return (
|
|
<div className="rounded-sm border border-rose-500/40 bg-rose-500/10 p-4">
|
|
<div className="flex items-start gap-3">
|
|
<ExclamationTriangleIcon className="h-5 w-5 shrink-0 text-rose-500" />
|
|
<div>
|
|
<p className="font-medium text-rose-400">Failed to load Vercel settings</p>
|
|
<p className="mt-1 text-sm text-rose-300">
|
|
There was an error loading the Vercel integration settings. Please refresh the page to
|
|
try again.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (fetcher.state === "loading" && !data) {
|
|
return (
|
|
<div className="flex items-center gap-2 text-text-dimmed">
|
|
<SpinnerWhite className="size-4" />
|
|
<span className="text-sm">Loading Vercel settings...</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!data || !data.enabled) {
|
|
return null;
|
|
}
|
|
|
|
const showGitHubWarning = data.connectedProject && !data.isGitHubConnected;
|
|
const showAuthInvalid = data.authInvalid || data.onboardingData?.authInvalid;
|
|
|
|
if (data.connectedProject) {
|
|
return (
|
|
<>
|
|
{showAuthInvalid && (
|
|
<VercelAuthInvalidBanner
|
|
organizationSlug={organizationSlug}
|
|
projectSlug={projectSlug}
|
|
canManageVercel={data.canManageVercel}
|
|
/>
|
|
)}
|
|
{showGitHubWarning && <VercelGitHubWarning />}
|
|
{!showAuthInvalid && (
|
|
<ConnectedVercelProjectForm
|
|
connectedProject={data.connectedProject}
|
|
hasStagingEnvironment={data.hasStagingEnvironment}
|
|
hasPreviewEnvironment={data.hasPreviewEnvironment}
|
|
customEnvironments={data.customEnvironments}
|
|
autoAssignCustomDomains={data.autoAssignCustomDomains ?? null}
|
|
currentTriggerVersion={data.currentTriggerVersion ?? null}
|
|
currentTriggerVersionFetchFailed={data.currentTriggerVersionFetchFailed ?? false}
|
|
organizationSlug={organizationSlug}
|
|
projectSlug={projectSlug}
|
|
environmentSlug={environmentSlug}
|
|
canManageVercel={data.canManageVercel}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
{showAuthInvalid && (
|
|
<VercelAuthInvalidBanner organizationSlug={organizationSlug} projectSlug={projectSlug} />
|
|
)}
|
|
{!showAuthInvalid && (
|
|
<>
|
|
<VercelConnectionPrompt
|
|
organizationSlug={organizationSlug}
|
|
projectSlug={projectSlug}
|
|
environmentSlug={environmentSlug}
|
|
hasOrgIntegration={data.hasOrgIntegration}
|
|
isGitHubConnected={data.isGitHubConnected}
|
|
onOpenModal={showAuthInvalid ? undefined : onOpenVercelModal}
|
|
isLoading={isLoadingVercelData}
|
|
canManageVercel={data.canManageVercel}
|
|
/>
|
|
<Hint>
|
|
{data.hasOrgIntegration
|
|
? "Connect your Vercel project to pull environment variables and trigger builds automatically."
|
|
: "Install the Vercel app to connect your projects and pull environment variables."}
|
|
</Hint>
|
|
{!data.isGitHubConnected && (
|
|
<Hint>
|
|
GitHub integration is not connected. Vercel integration cannot sync environment
|
|
variables and link deployments without a properly installed GitHub integration.
|
|
</Hint>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
import { VercelOnboardingModal } from "~/components/integrations/VercelOnboardingModal";
|
|
|
|
export { VercelOnboardingModal, VercelSettingsPanel };
|