route.tsx

import { getFormProps, getInputProps, useForm } from "@conform-to/react";
import { parseWithZod } from "@conform-to/zod/v4";
import { Form, useActionData, useNavigation, useSearchParams } from "@remix-run/react";
import { json } from "@remix-run/server-runtime";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { typedjson, useTypedFetcher, useTypedLoaderData } from "remix-typedjson";
import { z } from "zod";
import { MainHorizontallyCenteredContainer } from "~/components/layout/AppLayout";
import { Button } from "~/components/primitives/Buttons";
import { CheckboxWithLabel } from "~/components/primitives/Checkbox";
import { Fieldset } from "~/components/primitives/Fieldset";
import { FormButtons } from "~/components/primitives/FormButtons";
import { FormError } from "~/components/primitives/FormError";
import { Header2 } from "~/components/primitives/Headers";
import { Hint } from "~/components/primitives/Hint";
import { Input } from "~/components/primitives/Input";
import { InputGroup } from "~/components/primitives/InputGroup";
import { Label } from "~/components/primitives/Label";
import { SpinnerWhite } from "~/components/primitives/Spinner";
import { useEnvironment } from "~/hooks/useEnvironment";
import { useOrganization } from "~/hooks/useOrganizations";
import { useProject } from "~/hooks/useProject";
import {
  redirectBackWithErrorMessage,
  redirectBackWithSuccessMessage,
} from "~/models/message.server";
import { resolveOrgIdFromSlug } from "~/models/organization.server";
import { OrgIntegrationRepository } from "~/models/orgIntegration.server";
import { logger } from "~/services/logger.server";
import { ProjectSettingsService } from "~/services/projectSettings.server";
import { ProjectSettingsPresenter } from "~/services/projectSettingsPresenter.server";
import { dashboardAction, dashboardLoader } from "~/services/routeBuilders/dashboardBuilder";
import { EnvironmentParamSchema, v3BillingPath, vercelResourcePath } from "~/utils/pathBuilder";
import { throwPermissionDenied } from "~/utils/permissionDenied";
import { type BuildSettings } from "~/v3/buildSettings";
import { GitHubSettingsPanel } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github";
import type { loader as vercelLoader } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel";
import {
  VercelOnboardingModal,
  VercelSettingsPanel,
} from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel";

export const loader = dashboardLoader(
  {
    params: EnvironmentParamSchema,
    context: async (params) => {
      const organizationId = await resolveOrgIdFromSlug(params.organizationSlug);
      return organizationId ? { organizationId } : {};
    },
    // No hard authorization: the page renders a PermissionDenied panel for
    // roles that can't manage any integration (see canManageIntegrations).
  },
  async ({ params, user, ability }) => {
    const { projectParam, organizationSlug } = params;

    const canManageIntegrations =
      ability.can("write", { type: "github" }) || ability.can("write", { type: "vercel" });

    if (!canManageIntegrations) {
      throwPermissionDenied("With your current role, you can't manage integrations.");
    }

    const projectSettingsPresenter = new ProjectSettingsPresenter();
    const resultOrFail = await projectSettingsPresenter.getProjectSettings(
      organizationSlug,
      projectParam,
      user.id
    );

    if (resultOrFail.isErr()) {
      switch (resultOrFail.error.type) {
        case "project_not_found": {
          throw new Response(undefined, {
            status: 404,
            statusText: "Project not found",
          });
        }
        case "other":
        default: {
          resultOrFail.error.type satisfies "other";

          logger.error("Failed loading project settings", {
            error: resultOrFail.error,
          });
          throw new Response(undefined, {
            status: 400,
            statusText: "Something went wrong, please try again!",
          });
        }
      }
    }

    const { gitHubApp, buildSettings } = resultOrFail.value;

    return typedjson({
      githubAppEnabled: gitHubApp.enabled,
      buildSettings,
      vercelIntegrationEnabled: OrgIntegrationRepository.isVercelSupported,
    });
  }
);

const UpdateBuildSettingsFormSchema = z.object({
  action: z.literal("update-build-settings"),
  triggerConfigFilePath: z
    .string()
    .trim()
    .optional()
    .transform((val) => (val ? val.replace(/^\/+/, "") : val))
    .refine((val) => !val || val.length <= 255, {
      message: "Config file path must not exceed 255 characters",
    }),
  installCommand: z
    .string()
    .trim()
    .optional()
    .refine((val) => !val || !val.includes("\n"), {
      message: "Install command must be a single line",
    })
    .refine((val) => !val || val.length <= 500, {
      message: "Install command must not exceed 500 characters",
    }),
  preBuildCommand: z
    .string()
    .trim()
    .optional()
    .refine((val) => !val || !val.includes("\n"), {
      message: "Pre-build command must be a single line",
    })
    .refine((val) => !val || val.length <= 500, {
      message: "Pre-build command must not exceed 500 characters",
    }),
  useNativeBuildServer: z
    .string()
    .optional()
    .transform((val) => val === "on"),
});

export const action = dashboardAction(
  {
    params: EnvironmentParamSchema,
    context: async (params) => {
      const organizationId = await resolveOrgIdFromSlug(params.organizationSlug);
      return organizationId ? { organizationId } : {};
    },
    // Build settings configure the Git-based deploy, so gate on write:github
    // (a restricted role can view neither this page nor mutate via a POST).
    authorization: { action: "write", resource: { type: "github" } },
  },
  async ({ request, params, user }) => {
    const { organizationSlug, projectParam } = params;

    const formData = await request.formData();
    const submission = parseWithZod(formData, { schema: UpdateBuildSettingsFormSchema });

    if (submission.status !== "success") {
      return json(submission.reply());
    }

    const projectSettingsService = new ProjectSettingsService();
    const membershipResultOrFail = await projectSettingsService.verifyProjectMembership(
      organizationSlug,
      projectParam,
      user.id
    );

    if (membershipResultOrFail.isErr()) {
      return json({ errors: { body: membershipResultOrFail.error.type } }, { status: 404 });
    }

    const { projectId } = membershipResultOrFail.value;

    const { installCommand, preBuildCommand, triggerConfigFilePath, useNativeBuildServer } =
      submission.value;

    const resultOrFail = await projectSettingsService.updateBuildSettings(projectId, {
      installCommand: installCommand || undefined,
      preBuildCommand: preBuildCommand || undefined,
      triggerConfigFilePath: triggerConfigFilePath || undefined,
      useNativeBuildServer: useNativeBuildServer,
    });

    if (resultOrFail.isErr()) {
      switch (resultOrFail.error.type) {
        case "other":
        default: {
          resultOrFail.error.type satisfies "other";

          logger.error("Failed to update build settings", {
            error: resultOrFail.error,
          });
          return redirectBackWithErrorMessage(request, "Failed to update build settings");
        }
      }
    }

    return redirectBackWithSuccessMessage(request, "Build settings updated successfully");
  }
);

export default function IntegrationsSettingsPage() {
  const { githubAppEnabled, buildSettings, vercelIntegrationEnabled } =
    useTypedLoaderData<typeof loader>();
  const project = useProject();
  const organization = useOrganization();
  const environment = useEnvironment();
  const [searchParams, setSearchParams] = useSearchParams();

  // Vercel onboarding modal state
  const hasQueryParam = searchParams.get("vercelOnboarding") === "true";
  const nextUrl = searchParams.get("next");
  const [isModalOpen, setIsModalOpen] = useState(false);
  const vercelFetcher = useTypedFetcher<typeof vercelLoader>();

  // Helper to open modal and ensure query param is present
  const openVercelOnboarding = useCallback(() => {
    setIsModalOpen(true);
    // Ensure query param is present to maintain state during form submissions
    if (!hasQueryParam) {
      setSearchParams((prev) => {
        prev.set("vercelOnboarding", "true");
        return prev;
      });
    }
  }, [hasQueryParam, setSearchParams]);

  const closeVercelOnboarding = useCallback(() => {
    // Remove query param if present
    if (hasQueryParam) {
      setSearchParams((prev) => {
        prev.delete("vercelOnboarding");
        return prev;
      });
    }
    // Close modal
    setIsModalOpen(false);
  }, [hasQueryParam, setSearchParams]);

  // When query param is present, handle modal opening
  // Note: We don't close the modal based on data state during onboarding - only when explicitly closed
  useEffect(() => {
    if (hasQueryParam && vercelIntegrationEnabled) {
      // Ensure query param is present and modal is open
      if (vercelFetcher.data?.onboardingData && vercelFetcher.state === "idle") {
        // Data is loaded, ensure modal is open (query param takes precedence)
        if (!isModalOpen) {
          openVercelOnboarding();
        }
      } else if (vercelFetcher.state === "idle" && vercelFetcher.data === undefined) {
        // Load onboarding data
        vercelFetcher.load(
          `${vercelResourcePath(
            organization.slug,
            project.slug,
            environment.slug
          )}?vercelOnboarding=true`
        );
      }
    } else if (!hasQueryParam && isModalOpen) {
      // Query param removed but modal is open, close modal
      setIsModalOpen(false);
    }
  }, [
    hasQueryParam,
    vercelIntegrationEnabled,
    organization.slug,
    project.slug,
    environment.slug,
    vercelFetcher.data,
    vercelFetcher.state,
    isModalOpen,
    openVercelOnboarding,
  ]);

  // Ensure modal stays open when query param is present (even after data reloads)
  // This is a safeguard to prevent the modal from closing during form submissions
  useEffect(() => {
    if (hasQueryParam && !isModalOpen) {
      // Query param is present but modal is closed, open it
      // This ensures the modal stays open during the onboarding flow
      openVercelOnboarding();
    }
  }, [hasQueryParam, isModalOpen, openVercelOnboarding]);

  // When data finishes loading (from query param), ensure modal is open
  useEffect(() => {
    if (hasQueryParam && vercelFetcher.data?.onboardingData && vercelFetcher.state === "idle") {
      // Data loaded and query param is present, ensure modal is open
      if (!isModalOpen) {
        openVercelOnboarding();
      }
    }
  }, [hasQueryParam, vercelFetcher.data, vercelFetcher.state, isModalOpen, openVercelOnboarding]);

  // Track if we're waiting for data from button click (not query param)
  const waitingForButtonClickRef = useRef(false);

  // Handle opening modal from button click (without query param)
  const handleOpenVercelModal = useCallback(() => {
    // Add query param to maintain state during form submissions
    if (!hasQueryParam) {
      setSearchParams((prev) => {
        prev.set("vercelOnboarding", "true");
        return prev;
      });
    }

    if (vercelFetcher.data && vercelFetcher.data.onboardingData) {
      // Data already loaded, open modal immediately
      openVercelOnboarding();
    } else {
      // Need to load data first, mark that we're waiting for button click
      waitingForButtonClickRef.current = true;
      vercelFetcher.load(
        `${vercelResourcePath(
          organization.slug,
          project.slug,
          environment.slug
        )}?vercelOnboarding=true`
      );
    }
  }, [
    organization.slug,
    project.slug,
    environment.slug,
    vercelFetcher,
    setSearchParams,
    hasQueryParam,
    openVercelOnboarding,
  ]);

  // When data loads from button click, open modal
  useEffect(() => {
    if (
      waitingForButtonClickRef.current &&
      vercelFetcher.data?.onboardingData &&
      vercelFetcher.state === "idle"
    ) {
      // Data loaded from button click, open modal and ensure query param is present
      waitingForButtonClickRef.current = false;
      openVercelOnboarding();
    }
  }, [vercelFetcher.data, vercelFetcher.state, openVercelOnboarding]);

  return (
    <>
      <MainHorizontallyCenteredContainer className="md:mt-6">
        <div className="flex flex-col gap-6">
          {githubAppEnabled && (
            <React.Fragment>
              <div>
                <Header2 spacing>Git settings</Header2>
                <div className="w-full rounded-sm border border-grid-dimmed p-4">
                  <GitHubSettingsPanel
                    organizationSlug={organization.slug}
                    projectSlug={project.slug}
                    environmentSlug={environment.slug}
                    billingPath={v3BillingPath({ slug: organization.slug })}
                  />
                </div>
              </div>

              {vercelIntegrationEnabled && (
                <div>
                  <Header2 spacing>Vercel integration</Header2>
                  <div className="w-full rounded-sm border border-grid-dimmed p-4">
                    <VercelSettingsPanel
                      organizationSlug={organization.slug}
                      projectSlug={project.slug}
                      environmentSlug={environment.slug}
                      onOpenVercelModal={handleOpenVercelModal}
                      isLoadingVercelData={
                        vercelFetcher.state === "loading" || vercelFetcher.state === "submitting"
                      }
                    />
                  </div>
                </div>
              )}

              <div>
                <Header2 spacing>Build settings</Header2>
                <div className="w-full rounded-sm border border-grid-dimmed p-4">
                  <BuildSettingsForm buildSettings={buildSettings ?? {}} />
                </div>
              </div>
            </React.Fragment>
          )}
        </div>
      </MainHorizontallyCenteredContainer>

      {/* Vercel Onboarding Modal */}
      {vercelIntegrationEnabled && (
        <VercelOnboardingModal
          isOpen={isModalOpen}
          onClose={closeVercelOnboarding}
          onboardingData={vercelFetcher.data?.onboardingData ?? null}
          organizationSlug={organization.slug}
          projectSlug={project.slug}
          environmentSlug={environment.slug}
          hasStagingEnvironment={vercelFetcher.data?.hasStagingEnvironment ?? false}
          hasPreviewEnvironment={vercelFetcher.data?.hasPreviewEnvironment ?? false}
          hasOrgIntegration={vercelFetcher.data?.hasOrgIntegration ?? false}
          nextUrl={nextUrl ?? undefined}
          vercelManageAccessUrl={vercelFetcher.data?.vercelManageAccessUrl}
          onDataReload={(vercelEnvironmentId) => {
            vercelFetcher.load(
              `${vercelResourcePath(
                organization.slug,
                project.slug,
                environment.slug
              )}?vercelOnboarding=true${
                vercelEnvironmentId
                  ? `&vercelEnvironmentId=${encodeURIComponent(vercelEnvironmentId)}`
                  : ""
              }`
            );
          }}
        />
      )}
    </>
  );
}

function BuildSettingsForm({ buildSettings }: { buildSettings: BuildSettings }) {
  const lastSubmission = useActionData() as any;
  const navigation = useNavigation();

  const [hasBuildSettingsChanges, setHasBuildSettingsChanges] = useState(false);
  const [buildSettingsValues, setBuildSettingsValues] = useState({
    preBuildCommand: buildSettings?.preBuildCommand || "",
    installCommand: buildSettings?.installCommand || "",
    triggerConfigFilePath: buildSettings?.triggerConfigFilePath || "",
    useNativeBuildServer: buildSettings?.useNativeBuildServer || false,
  });

  useEffect(() => {
    const hasChanges =
      buildSettingsValues.preBuildCommand !== (buildSettings?.preBuildCommand || "") ||
      buildSettingsValues.installCommand !== (buildSettings?.installCommand || "") ||
      buildSettingsValues.triggerConfigFilePath !== (buildSettings?.triggerConfigFilePath || "") ||
      buildSettingsValues.useNativeBuildServer !== (buildSettings?.useNativeBuildServer || false);
    setHasBuildSettingsChanges(hasChanges);
  }, [buildSettingsValues, buildSettings]);

  const [buildSettingsForm, fields] = useForm({
    id: "update-build-settings",
    lastResult: lastSubmission,
    shouldRevalidate: "onSubmit",
    onValidate({ formData }) {
      return parseWithZod(formData, {
        schema: UpdateBuildSettingsFormSchema,
      });
    },
  });

  const isBuildSettingsLoading =
    navigation.formData?.get("action") === "update-build-settings" &&
    (navigation.state === "submitting" || navigation.state === "loading");

  return (
    <Form method="post" {...getFormProps(buildSettingsForm)}>
      <Fieldset>
        <InputGroup fullWidth>
          <Label htmlFor={fields.triggerConfigFilePath.id}>Trigger config file</Label>
          <Input
            {...getInputProps(fields.triggerConfigFilePath, { type: "text" })}
            defaultValue={buildSettings?.triggerConfigFilePath || ""}
            placeholder="trigger.config.ts"
            onChange={(e) => {
              setBuildSettingsValues((prev) => ({
                ...prev,
                triggerConfigFilePath: e.target.value,
              }));
            }}
          />
          <Hint>
            Path to your Trigger configuration file, relative to the root directory of your repo.
          </Hint>
          <FormError id={fields.triggerConfigFilePath.errorId}>
            {fields.triggerConfigFilePath.errors}
          </FormError>
        </InputGroup>

        <InputGroup fullWidth>
          <Label htmlFor={fields.installCommand.id}>Install command</Label>
          <Input
            {...getInputProps(fields.installCommand, { type: "text" })}
            defaultValue={buildSettings?.installCommand || ""}
            placeholder="e.g., `npm install`, `pnpm install`, or `bun install`"
            onChange={(e) => {
              setBuildSettingsValues((prev) => ({
                ...prev,
                installCommand: e.target.value,
              }));
            }}
          />
          <Hint>
            Command to install your project dependencies. This will be run from the root directory
            of your repo. Auto-detected by default.
          </Hint>
          <FormError id={fields.installCommand.errorId}>
            {fields.installCommand.errors?.join(", ")}
          </FormError>
        </InputGroup>
        <InputGroup fullWidth>
          <Label htmlFor={fields.preBuildCommand.id}>Pre-build command</Label>
          <Input
            {...getInputProps(fields.preBuildCommand, { type: "text" })}
            defaultValue={buildSettings?.preBuildCommand || ""}
            placeholder="e.g., `npm run prisma:generate`"
            onChange={(e) => {
              setBuildSettingsValues((prev) => ({
                ...prev,
                preBuildCommand: e.target.value,
              }));
            }}
          />
          <Hint>
            Any command that needs to run before we build and deploy your project. This will be run
            from the root directory of your repo.
          </Hint>
          <FormError id={fields.preBuildCommand.errorId}>
            {fields.preBuildCommand.errors?.join(", ")}
          </FormError>
        </InputGroup>
        <div className="border-t border-grid-dimmed pt-4">
          <InputGroup>
            <CheckboxWithLabel
              {...getInputProps(fields.useNativeBuildServer, { type: "checkbox" })}
              label="Use native build server"
              variant="simple/small"
              defaultChecked={buildSettings?.useNativeBuildServer || false}
              onChange={(isChecked) => {
                setBuildSettingsValues((prev) => ({
                  ...prev,
                  useNativeBuildServer: isChecked,
                }));
              }}
            />
            <Hint>
              Native build server builds do not rely on external build providers and will become the
              default in the future. Version 4.2.0 or newer is required.
            </Hint>
            <FormError id={fields.useNativeBuildServer.errorId}>
              {fields.useNativeBuildServer.errors}
            </FormError>
          </InputGroup>
        </div>
        <FormError>{buildSettingsForm.errors}</FormError>
        <FormButtons
          confirmButton={
            <Button
              type="submit"
              name="action"
              value="update-build-settings"
              variant="secondary/small"
              disabled={isBuildSettingsLoading || !hasBuildSettingsChanges}
              LeadingIcon={isBuildSettingsLoading ? SpinnerWhite : undefined}
            >
              Save
            </Button>
          }
        />
      </Fieldset>
    </Form>
  );
}