feat: expose project build settings

myftija · myftija · commit d86288fb2825 · 2025-09-15T17:01:07.000+02:00
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsx
@@ -62,7 +62,7 @@ import {
   EnvironmentParamSchema,
   v3ProjectSettingsPath,
 } from "~/utils/pathBuilder";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Select, SelectItem } from "~/components/primitives/Select";
 import { Switch } from "~/components/primitives/Switch";
 import { type BranchTrackingConfig } from "~/v3/github";
@@ -120,7 +120,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     }
   }
 
-  const { gitHubApp } = resultOrFail.value;
+  const { gitHubApp, buildSettings } = resultOrFail.value;
 
   const session = await getSession(request.headers.get("Cookie"));
   const openGitHubRepoConnectionModal = session.get("gitHubAppInstalled") === true;
@@ -134,6 +134,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       githubAppInstallations: gitHubApp.installations,
       connectedGithubRepository: gitHubApp.connectedRepository,
       openGitHubRepoConnectionModal,
+      buildSettings,
     },
     { headers }
   );
@@ -155,6 +156,13 @@ const UpdateGitSettingsFormSchema = z.object({
     .transform((val) => val === "on"),
 });
 
+const UpdateBuildSettingsFormSchema = z.object({
+  action: z.literal("update-build-settings"),
+  rootDirectory: z.string().trim().optional(),
+  installCommand: z.string().trim().optional(),
+  triggerConfigFile: z.string().trim().optional(),
+});
+
 export function createSchema(
   constraints: {
     getSlugMatch?: (slug: string) => { isMatch: boolean; projectSlug: string };
@@ -188,6 +196,7 @@ export function createSchema(
     }),
     ConnectGitHubRepoFormSchema,
     UpdateGitSettingsFormSchema,
+    UpdateBuildSettingsFormSchema,
     z.object({
       action: z.literal("disconnect-repo"),
     }),
@@ -376,6 +385,31 @@ export const action: ActionFunction = async ({ request, params }) => {
         success: true,
       });
     }
+    case "update-build-settings": {
+      const { rootDirectory, installCommand, triggerConfigFile } = submission.value;
+
+      const resultOrFail = await projectSettingsService.updateBuildSettings(projectId, {
+        rootDirectory: rootDirectory || undefined,
+        installCommand: installCommand || undefined,
+        triggerConfigFile: triggerConfigFile || undefined,
+      });
+
+      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");
+    }
     default: {
       submission.value satisfies never;
       return redirectBackWithErrorMessage(request, "Failed to process request");
@@ -389,6 +423,7 @@ export default function Page() {
     connectedGithubRepository,
     githubAppEnabled,
     openGitHubRepoConnectionModal,
+    buildSettings,
   } = useTypedLoaderData<typeof loader>();
   const project = useProject();
   const organization = useOrganization();
@@ -511,22 +546,31 @@ export default function Page() {
             </div>
 
             {githubAppEnabled && (
-              <div>
-                <Header2 spacing>Git settings</Header2>
-                <div className="w-full rounded-sm border border-grid-dimmed p-4">
-                  {connectedGithubRepository ? (
-                    <ConnectedGitHubRepoForm connectedGitHubRepo={connectedGithubRepository} />
-                  ) : (
-                    <GitHubConnectionPrompt
-                      gitHubAppInstallations={githubAppInstallations ?? []}
-                      organizationSlug={organization.slug}
-                      projectSlug={project.slug}
-                      environmentSlug={environment.slug}
-                      openGitHubRepoConnectionModal={openGitHubRepoConnectionModal}
-                    />
-                  )}
+              <React.Fragment>
+                <div>
+                  <Header2 spacing>Git settings</Header2>
+                  <div className="w-full rounded-sm border border-grid-dimmed p-4">
+                    {connectedGithubRepository ? (
+                      <ConnectedGitHubRepoForm connectedGitHubRepo={connectedGithubRepository} />
+                    ) : (
+                      <GitHubConnectionPrompt
+                        gitHubAppInstallations={githubAppInstallations ?? []}
+                        organizationSlug={organization.slug}
+                        projectSlug={project.slug}
+                        environmentSlug={environment.slug}
+                        openGitHubRepoConnectionModal={openGitHubRepoConnectionModal}
+                      />
+                    )}
+                  </div>
                 </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>
@@ -1033,3 +1077,120 @@ function ConnectedGitHubRepoForm({
     </>
   );
 }
+
+type BuildSettings = {
+  rootDirectory?: string;
+  installCommand?: string;
+  triggerConfigFile?: string;
+};
+
+function BuildSettingsForm({ buildSettings }: { buildSettings: BuildSettings }) {
+  const lastSubmission = useActionData() as any;
+  const navigation = useNavigation();
+
+  const [hasBuildSettingsChanges, setHasBuildSettingsChanges] = useState(false);
+  const [buildSettingsValues, setBuildSettingsValues] = useState({
+    rootDirectory: buildSettings?.rootDirectory || "",
+    installCommand: buildSettings?.installCommand || "",
+    triggerConfigFile: buildSettings?.triggerConfigFile || "",
+  });
+
+  useEffect(() => {
+    const hasChanges =
+      buildSettingsValues.rootDirectory !== (buildSettings?.rootDirectory || "") ||
+      buildSettingsValues.installCommand !== (buildSettings?.installCommand || "") ||
+      buildSettingsValues.triggerConfigFile !== (buildSettings?.triggerConfigFile || "");
+    setHasBuildSettingsChanges(hasChanges);
+  }, [buildSettingsValues, buildSettings]);
+
+  const [buildSettingsForm, fields] = useForm({
+    id: "update-build-settings",
+    lastSubmission: lastSubmission,
+    shouldRevalidate: "onSubmit",
+    onValidate({ formData }) {
+      return parse(formData, {
+        schema: UpdateBuildSettingsFormSchema,
+      });
+    },
+  });
+
+  const isBuildSettingsLoading =
+    navigation.formData?.get("action") === "update-build-settings" &&
+    (navigation.state === "submitting" || navigation.state === "loading");
+
+  return (
+    <Form method="post" {...buildSettingsForm.props}>
+      <Fieldset>
+        <InputGroup fullWidth>
+          <Label htmlFor={fields.rootDirectory.id}>Root directory</Label>
+          <Input
+            {...conform.input(fields.rootDirectory, { type: "text" })}
+            defaultValue={buildSettings?.rootDirectory || ""}
+            placeholder="/"
+            onChange={(e) => {
+              setBuildSettingsValues((prev) => ({
+                ...prev,
+                rootDirectory: e.target.value,
+              }));
+            }}
+          />
+          <Hint>The directory that contains your code.</Hint>
+          <FormError id={fields.rootDirectory.errorId}>{fields.rootDirectory.error}</FormError>
+        </InputGroup>
+        <InputGroup fullWidth>
+          <Label htmlFor={fields.installCommand.id}>Install command</Label>
+          <Input
+            {...conform.input(fields.installCommand, { type: "text" })}
+            defaultValue={buildSettings?.installCommand || ""}
+            placeholder="e.g., `npm install`, or `bun install`"
+            onChange={(e) => {
+              setBuildSettingsValues((prev) => ({
+                ...prev,
+                installCommand: e.target.value,
+              }));
+            }}
+          />
+          <Hint>
+            Command to install your project dependencies. This is auto-detected by default.
+          </Hint>
+          <FormError id={fields.installCommand.errorId}>{fields.installCommand.error}</FormError>
+        </InputGroup>
+        <InputGroup fullWidth>
+          <Label htmlFor={fields.triggerConfigFile.id}>Trigger config file</Label>
+          <Input
+            {...conform.input(fields.triggerConfigFile, { type: "text" })}
+            defaultValue={buildSettings?.triggerConfigFile || ""}
+            placeholder="trigger.config.ts"
+            onChange={(e) => {
+              setBuildSettingsValues((prev) => ({
+                ...prev,
+                triggerConfigFile: e.target.value,
+              }));
+            }}
+          />
+          <Hint>
+            Path to your trigger configuration file, relative to the specified root directory.
+          </Hint>
+          <FormError id={fields.triggerConfigFile.errorId}>
+            {fields.triggerConfigFile.error}
+          </FormError>
+        </InputGroup>
+        <FormError>{buildSettingsForm.error}</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>
+  );
+}
diff --git a/apps/webapp/app/services/projectSettings.server.ts b/apps/webapp/app/services/projectSettings.server.ts
@@ -4,6 +4,7 @@ import { DeleteProjectService } from "~/services/deleteProject.server";
 import { BranchTrackingConfigSchema, type BranchTrackingConfig } from "~/v3/github";
 import { checkGitHubBranchExists } from "~/services/gitHub.server";
 import { errAsync, fromPromise, okAsync, ResultAsync } from "neverthrow";
+import { BuildSettings } from "~/v3/buildSettings";
 
 export class ProjectSettingsService {
   #prismaClient: PrismaClient;
@@ -244,6 +245,23 @@ export class ProjectSettingsService {
       .andThen(updateConnectedRepo);
   }
 
+  updateBuildSettings(projectId: string, buildSettings: BuildSettings) {
+    return fromPromise(
+      this.#prismaClient.project.update({
+        where: {
+          id: projectId,
+        },
+        data: {
+          buildSettings: buildSettings,
+        },
+      }),
+      (error) => ({
+        type: "other" as const,
+        cause: error,
+      })
+    );
+  }
+
   verifyProjectMembership(organizationSlug: string, projectSlug: string, userId: string) {
     const findProject = () =>
       fromPromise(
diff --git a/apps/webapp/app/services/projectSettingsPresenter.server.ts b/apps/webapp/app/services/projectSettingsPresenter.server.ts
@@ -4,6 +4,7 @@ import { BranchTrackingConfigSchema } from "~/v3/github";
 import { env } from "~/env.server";
 import { findProjectBySlug } from "~/models/project.server";
 import { err, fromPromise, ok, okAsync } from "neverthrow";
+import { BuildSettingsSchema } from "~/v3/buildSettings";
 
 export class ProjectSettingsPresenter {
   #prismaClient: PrismaClient;
@@ -15,16 +16,6 @@ export class ProjectSettingsPresenter {
   getProjectSettings(organizationSlug: string, projectSlug: string, userId: string) {
     const githubAppEnabled = env.GITHUB_APP_ENABLED === "1";
 
-    if (!githubAppEnabled) {
-      return okAsync({
-        gitHubApp: {
-          enabled: false,
-          connectedRepository: undefined,
-          installations: undefined,
-        },
-      });
-    }
-
     const getProject = () =>
       fromPromise(findProjectBySlug(organizationSlug, projectSlug, userId), (error) => ({
         type: "other" as const,
@@ -36,6 +27,28 @@ export class ProjectSettingsPresenter {
         return ok(project);
       });
 
+    if (!githubAppEnabled) {
+      return getProject().andThen((project) => {
+        if (!project) {
+          return err({ type: "project_not_found" as const });
+        }
+
+        const buildSettingsOrFailure = BuildSettingsSchema.safeParse(project.buildSettings);
+        const buildSettings = buildSettingsOrFailure.success
+          ? buildSettingsOrFailure.data
+          : undefined;
+
+        return ok({
+          gitHubApp: {
+            enabled: false,
+            connectedRepository: undefined,
+            installations: undefined,
+          },
+          buildSettings,
+        });
+      });
+    }
+
     const findConnectedGithubRepository = (projectId: string) =>
       fromPromise(
         this.#prismaClient.connectedGithubRepository.findFirst({
@@ -119,6 +132,11 @@ export class ProjectSettingsPresenter {
 
     return getProject().andThen((project) =>
       findConnectedGithubRepository(project.id).andThen((connectedGithubRepository) => {
+        const buildSettingsOrFailure = BuildSettingsSchema.safeParse(project.buildSettings);
+        const buildSettings = buildSettingsOrFailure.success
+          ? buildSettingsOrFailure.data
+          : undefined;
+
         if (connectedGithubRepository) {
           return okAsync({
             gitHubApp: {
@@ -128,6 +146,7 @@ export class ProjectSettingsPresenter {
               // a project can have only a single connected repository
               installations: undefined,
             },
+            buildSettings,
           });
         }
 
@@ -138,6 +157,7 @@ export class ProjectSettingsPresenter {
               connectedRepository: undefined,
               installations: githubAppInstallations,
             },
+            buildSettings,
           };
         });
       })
diff --git a/apps/webapp/app/v3/buildSettings.ts b/apps/webapp/app/v3/buildSettings.ts
@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+export const BuildSettingsSchema = z.object({
+  rootDirectory: z.string().optional(),
+  installCommand: z.string().optional(),
+  triggerConfigFile: z.string().optional(),
+});
+
+export type BuildSettings = z.infer<typeof BuildSettingsSchema>;
diff --git a/internal-packages/database/prisma/migrations/20250915141201_add_build_settings_to_project/migration.sql b/internal-packages/database/prisma/migrations/20250915141201_add_build_settings_to_project/migration.sql
@@ -0,0 +1,2 @@
+ALTER TABLE "public"."Project" ADD COLUMN     "buildSettings" JSONB;
+
diff --git a/internal-packages/database/prisma/schema.prisma b/internal-packages/database/prisma/schema.prisma
@@ -394,6 +394,8 @@ model Project {
   executionSnapshots        TaskRunExecutionSnapshot[]
   waitpointTags             WaitpointTag[]
   connectedGithubRepository ConnectedGithubRepository?
+
+  buildSettings Json?
 }
 
 enum ProjectVersion {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+ALTER TABLE "public"."Project" ADD COLUMN "buildSettings" JSONB;`
	`2`	`+`
Original file line number	Diff line number	Diff line change
`@@ -394,6 +394,8 @@ model Project {`
`394`	`394`	`executionSnapshots TaskRunExecutionSnapshot[]`
`395`	`395`	`waitpointTags WaitpointTag[]`
`396`	`396`	`connectedGithubRepository ConnectedGithubRepository?`
	`397`	`+`
	`398`	`+ buildSettings Json?`
`397`	`399`	`}`
`398`	`400`
`399`	`401`	`enum ProjectVersion {`