feat: introduce serverless path prefix

- fix: several minor bugs related to the environment config
- chore: add specs for buildFormValues method

src/pages/apps/[id]/environments/[env-id]/config/_components/TabConfigGeneral.tsx

@@ -150,31 +150,40 @@ export default function TabConfigGeneral({
             variant="filled"
             name="autoDeployBranches"
             label="Auto deploy branches"
-            defaultValue={env?.branch || ""}
+            defaultValue={env?.autoDeployBranches || ""}
             InputProps={{
               endAdornment: <code className="ml-1 text-pink-50">/i</code>,
             }}
             fullWidth
             helperText={
               <>
-                <Typography sx={{ mb: 2, mt: 1 }}>
+                <Typography
+                  component="span"
+                  sx={{ mb: 2, mt: 1, display: "block" }}
+                >
                   Specify which branches should be automatically deployed to
                   this environment. Below are some examples:
                 </Typography>
-                <Box component="ol">
-                  <Box component="li" sx={{ mb: 2 }}>
+                <Box component="span" sx={{ display: "block" }}>
+                  <Box component="span" sx={{ mb: 2, display: "block" }}>
                     <Box component="code" sx={{ color: "white" }}>
                       ^(?!dependabot).+
                     </Box>{" "}
-                    <Typography display="block" sx={{ mt: 0.5 }}>
+                    <Typography
+                      component="span"
+                      sx={{ mt: 0.5, display: "block" }}
+                    >
                       Match anything that does not start with <b>dependabot</b>
                     </Typography>
                   </Box>
-                  <Box component="li">
+                  <Box component="span" sx={{ display: "block" }}>
                     <Box component="code" sx={{ color: "white" }}>
                       ^release-.+
                     </Box>
-                    <Typography display="block" sx={{ mt: 0.5 }}>
+                    <Typography
+                      component="span"
+                      sx={{ mt: 0.5, display: "block" }}
+                    >
                       Match anything that starts with <b>release-</b>
                     </Typography>
                   </Box>

src/pages/apps/[id]/environments/[env-id]/config/_components/TabConfigServerless.tsx

@@ -42,8 +42,6 @@ export default function TabConfigGeneral({
           e.target as HTMLFormElement
         );
 
-        console.log(values);
-
         updateEnvironment({
           app,
           envId: env.id!,
@@ -75,6 +73,21 @@ export default function TabConfigGeneral({
               functions reside. This path is relative to the repository root.`}
         />
       </Box>
+      <Box sx={{ mb: 4 }}>
+        <TextField
+          label="API path prefix"
+          variant="filled"
+          autoComplete="off"
+          defaultValue={env?.build.apiPath || "/api"}
+          name="build.apiPath"
+          fullWidth
+          InputLabelProps={{
+            shrink: true,
+          }}
+          placeholder="/api"
+          helperText={`Path prefix for API endpoints. Default is \`/api\`.`}
+        />
+      </Box>
 
       <CardFooter>
         <Button

src/pages/apps/[id]/environments/[env-id]/config/actions.spec.ts

@@ -0,0 +1,75 @@
+import { buildFormValues } from "./actions";
+import mockApp from "~/testing/data/mock_app";
+import mockEnvironments from "~/testing/data/mock_environments";
+
+describe("~/pages/apps/[id]/environments/[env-id]/config/actions.tsx", () => {
+  const app = mockApp();
+  const env = mockEnvironments({ app })[0];
+
+  describe("buildFormValues", () => {
+    test("should match the default state", () => {
+      const values = buildFormValues(env, document.createElement("form"));
+
+      expect(values).toEqual({
+        name: env.name,
+        branch: env.branch,
+        autoDeploy: "disabled",
+        autoDeployBranches: undefined,
+        autoPublish: "on",
+        "build.headersFile": env.build.headersFile,
+        "build.redirectsFile": env.build.redirectsFile,
+        "build.apiFolder": env.build.apiFolder,
+        "build.apiPath": env.build.apiPath,
+        "build.cmd": env.build.cmd,
+        "build.distFolder": env.build.distFolder,
+        "build.vars": "BABEL_ENV=production\nNODE_ENV=production",
+      });
+    });
+
+    test("should match the updated form values", () => {
+      const form = document.createElement("form");
+
+      const name = document.createElement("input");
+      name.type = "text";
+      name.name = "name";
+      name.value = "my-new-env";
+
+      const autoPublish = document.createElement("input");
+      autoPublish.type = "text";
+      autoPublish.name = "autoPublish";
+      autoPublish.value = "off";
+
+      const autoDeploy = document.createElement("input");
+      autoDeploy.type = "text";
+      autoDeploy.name = "autoDeploy";
+      autoDeploy.value = "custom";
+
+      const autoDeployBranches = document.createElement("input");
+      autoDeployBranches.type = "text";
+      autoDeployBranches.name = "autoDeployBranches";
+      autoDeployBranches.value = "^(?!dependabot).+";
+
+      form.appendChild(name);
+      form.appendChild(autoPublish);
+      form.appendChild(autoDeploy);
+      form.appendChild(autoDeployBranches);
+
+      const values = buildFormValues(env, form);
+
+      expect(values).toEqual({
+        name: "my-new-env",
+        branch: env.branch,
+        autoDeploy: "custom",
+        autoDeployBranches: "^(?!dependabot).+",
+        autoPublish: "off",
+        "build.headersFile": env.build.headersFile,
+        "build.redirectsFile": env.build.redirectsFile,
+        "build.apiFolder": env.build.apiFolder,
+        "build.apiPath": env.build.apiPath,
+        "build.cmd": env.build.cmd,
+        "build.distFolder": env.build.distFolder,
+        "build.vars": "BABEL_ENV=production\nNODE_ENV=production",
+      });
+    });
+  });
+});

src/pages/apps/[id]/environments/[env-id]/config/actions.ts

@@ -32,6 +32,7 @@ export const prepareBuildObject = (values: FormValues): BuildConfig => {
     headersFile: values["build.headersFile"],
     redirectsFile: values["build.redirectsFile"],
     apiFolder: values["build.apiFolder"],
+    apiPath: values["build.apiPath"],
     vars,
   };
 
@@ -42,6 +43,17 @@ export const buildFormValues = (
   env: Environment,
   form: HTMLFormElement
 ): FormValues => {
+  const values = Object.fromEntries(new FormData(form).entries());
+
+  if (typeof values.autoPublish === "undefined") {
+    values.autoPublish = env.autoPublish ? "on" : "off";
+  }
+
+  // Normalize autoDeploy values
+  if (values.autoDeploy && values.autoDeploy !== "custom") {
+    values.autoDeployBranches = "";
+  }
+
   return {
     name: env.name,
     branch: env.branch,
@@ -50,13 +62,14 @@ export const buildFormValues = (
     "build.headersFile": env.build.headersFile,
     "build.redirectsFile": env.build.redirectsFile,
     "build.apiFolder": env.build.apiFolder,
+    "build.apiPath": env.build.apiPath,
     "build.cmd": env.build.cmd,
     "build.distFolder": env.build.distFolder,
     "build.vars": Object.keys(env.build?.vars || {})
       .filter(key => env.build.vars[key])
       .map(key => `${key}=${env.build.vars[key]}`)
       .join("\n"),
-    ...Object.fromEntries(new FormData(form).entries()),
+    ...values,
   };
 };
 
@@ -138,6 +151,7 @@ export interface FormValues {
   "build.headersFile"?: string;
   "build.redirectsFile"?: string;
   "build.apiFolder"?: string;
+  "build.apiPath"?: string;
   "build.vars"?: string; // This is the textarea version
   "build.vars[key]"?: string; // This is the key value version
   "build.vars[value]"?: string; // This is the key value version
@@ -183,7 +197,7 @@ export const updateEnvironment = ({
       build,
       autoPublish: values.autoPublish === "on",
       autoDeploy: autoDeploy !== "disabled",
-      autoDeployBranches: autoDeployBranches || null,
+      autoDeployBranches: autoDeployBranches,
     })
     .then(() => {
       setSuccess("The environment has been successfully updated.");

src/types/environment.d.ts

@@ -1,4 +1,5 @@
 declare type BuildConfig = {
+  apiPath?: string;
   apiFolder?: string;
   headersFile?: string;
   redirectsFile?: string;

src/utils/api/Api.ts

@@ -110,7 +110,7 @@ class Api {
     }
 
     if (
-      localStorage.getItem("sk_canary") == 'true' ||
+      localStorage.getItem("sk_canary") == "true" ||
       document?.cookie.indexOf("sk_canary=true") > -1 ||
       window.location.search?.indexOf("sk_canary=true") > -1
     ) {