chore: improve environment config

- Rename run command to start command
- Move server settings to its own section
- Rename serverless to serverless functions
- Deprecate server folder (use output folder instead)

Author: svedova

src/layouts/AppLayout/_components/DeployModal.spec.tsx

@@ -4,7 +4,6 @@ import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
 import { waitFor, fireEvent } from "@testing-library/react";
 import mockApp from "~/testing/data/mock_app";
 import mockEnv from "~/testing/data/mock_environment";
-import { mockFetchRepoMeta } from "~/testing/nocks/nock_environment";
 import { mockDeployNow } from "~/testing/nocks/nock_deployments";
 import userEvent from "@testing-library/user-event";
 import DeployModal from "./DeployModal";
@@ -59,16 +58,7 @@ describe("~/layouts/AppLayout/_components/DeployModal.tsx", () => {
     currentEnv.build.buildCmd = "";
     currentEnv.build.distFolder = "";
 
-    const fetchMetaScope = mockFetchRepoMeta({
-      name: currentEnv.name,
-      appId: currentApp.id,
-    });
-
     createWrapper({ app: currentApp, env: currentEnv });
-
-    await waitFor(() => {
-      expect(fetchMetaScope.isDone()).toBe(true);
-    });
   });
 
   afterEach(() => {

src/layouts/AppLayout/_components/DeployModal.tsx

@@ -1,8 +1,6 @@
 import { useState } from "react";
 import { useNavigate } from "react-router";
 import { deploy } from "~/pages/apps/actions";
-import { useFetchRepoMeta } from "~/pages/apps/[id]/environments/[env-id]/config/actions";
-import { isFrameworkRecognized } from "~/pages/apps/[id]/environments/[env-id]/config/helpers";
 import Link from "@mui/material/Link";
 import Box from "@mui/material/Box";
 import Button from "@mui/lab/LoadingButton";
@@ -16,7 +14,6 @@ import EnvironmentSelector from "~/components/EnvironmentSelector";
 import Card from "~/components/Card";
 import CardHeader from "~/components/CardHeader";
 import CardFooter from "~/components/CardFooter";
-import Spinner from "~/components/Spinner";
 
 interface Props {
   app: App;
@@ -35,7 +32,6 @@ export default function DeployModal({
   const [selectedEnv, setSelectedEnv] = useState<Environment | undefined>(
     environment
   );
-  const fetchResult = useFetchRepoMeta({ app, env: selectedEnv });
   const [cmd, setCmd] = useState(environment?.build?.buildCmd || "");
   const [dist, setDist] = useState(environment?.build?.distFolder || "");
   const [branch, setBranch] = useState(environment?.branch || "");
@@ -44,7 +40,6 @@ export default function DeployModal({
     environment?.autoPublish || false
   );
   const [loading, setLoading] = useState<boolean>(false);
-  const { meta, loading: metaLoading } = fetchResult;
 
   const clearForm = () => {
     setCmd("");
@@ -152,26 +147,16 @@ export default function DeployModal({
           />
         </Box>
         <Box sx={{ mb: 4 }}>
-          {!metaLoading && isFrameworkRecognized(meta?.framework) ? (
-            <Box sx={{ cursor: "not-allowed" }}>
-              <span className="fa fa-info-circle mr-2 ml-1" />
-              Output folder read from framework configuration file.
-            </Box>
-          ) : (
-            <TextField
-              value={dist}
-              variant="filled"
-              label="Output folder"
-              fullWidth
-              name="build.distFolder"
-              onChange={e => setDist(e.target.value)}
-              placeholder="Defaults to `build`, `dist`, `output` or `.stormkit`"
-              helperText="The folder where the build artifacts are located"
-              InputProps={{
-                endAdornment: metaLoading && <Spinner width={4} height={4} />,
-              }}
-            />
-          )}
+          <TextField
+            value={dist}
+            variant="filled"
+            label="Output folder"
+            fullWidth
+            name="build.distFolder"
+            onChange={e => setDist(e.target.value)}
+            placeholder="Defaults to `build`, `dist`, `output` or `.stormkit`"
+            helperText="The folder where the build artifacts are located"
+          />
         </Box>
         <Box sx={{ bgcolor: "container.paper", p: 1.75, pt: 1, mb: 4 }}>
           <FormControlLabel

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

@@ -7,10 +7,12 @@ import ListItem from "@mui/material/ListItem";
 import Typography from "@mui/material/Typography";
 import { AppContext } from "~/pages/apps/[id]/App.context";
 import { EnvironmentContext } from "~/pages/apps/[id]/environments/Environment.context";
+import { isSelfHosted } from "~/utils/helpers/instance";
 import TabDomainConfig from "./_components/TabDomainConfig/TabDomainConfig";
 import TabConfigEnvVars from "./_components/TabConfigEnvVars";
 import TabConfigGeneral from "./_components/TabConfigGeneral";
 import TabConfigBuild from "./_components/TabConfigBuild";
+import TabConfigServer from "./_components/TabConfigServer";
 import TabConfigHeaders from "./_components/TabConfigHeaders";
 import TabConfigRedirects from "./_components/TabConfigRedirects";
 import TabConfigServerless from "./_components/TabConfigServerless";
@@ -19,9 +21,12 @@ import TabStatusChecks from "./_components/TabStatusChecks";
 import TabAPIKey from "./_components/TabAPIKey";
 import TabMailer from "./_components/TabMailer";
 
+const selfHosted = isSelfHosted();
+
 interface NavItem {
   path: string;
   text: string;
+  visible?: boolean;
 }
 
 interface NavItemParent {
@@ -35,14 +40,15 @@ const listItems: NavItemParent[] = [
     children: [
       { path: "#general", text: "General" },
       { path: "#build", text: "Build" },
+      { path: "#server", text: "Server", visible: selfHosted },
       { path: "#env-vars", text: "Environment variables" },
       { path: "#status-checks", text: "Status checks" },
-    ],
+    ].filter(i => i.visible !== false),
   },
   {
     title: "Runtime Settings",
     children: [
-      { path: "#serverless", text: "Serverless" },
+      { path: "#serverless", text: "Serverless functions" },
       { path: "#headers", text: "Headers" },
       { path: "#redirects", text: "Redirects" },
     ],
@@ -102,6 +108,7 @@ export default function EnvironmentConfig() {
       case "":
       case "#general":
       case "#build":
+      case "#server":
       case "#env-vars":
       case "#status-checks":
         return ({ app, environment, setRefreshToken }: TabProps) => (
@@ -116,6 +123,13 @@ export default function EnvironmentConfig() {
               environment={environment}
               setRefreshToken={setRefreshToken}
             />
+            {selfHosted && (
+              <TabConfigServer
+                app={app}
+                environment={environment}
+                setRefreshToken={setRefreshToken}
+              />
+            )}
             <TabConfigEnvVars
               app={app}
               environment={environment}

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

@@ -6,13 +6,7 @@ import Button from "@mui/lab/LoadingButton";
 import Card from "~/components/Card";
 import CardHeader from "~/components/CardHeader";
 import CardFooter from "~/components/CardFooter";
-import Spinner from "~/components/Spinner";
-import { isFrameworkRecognized } from "../helpers";
-import {
-  updateEnvironment,
-  buildFormValues,
-  useFetchRepoMeta,
-} from "../actions";
+import { updateEnvironment, buildFormValues } from "../actions";
 
 interface Props {
   app: App;
@@ -29,7 +23,6 @@ export default function TabConfigGeneral({
   const [success, setSuccess] = useState<string>();
   const [isLoading, setLoading] = useState(false);
   const [root, setRoot] = useState(env?.build?.vars?.["SK_CWD"] || "./");
-  const { meta, loading: metaLoading } = useFetchRepoMeta({ app, env });
 
   if (!env) {
     return <></>;
@@ -95,22 +88,27 @@ export default function TabConfigGeneral({
           label="Output folder"
           variant="filled"
           autoComplete="off"
-          defaultValue={env?.build.distFolder || ""}
+          defaultValue={
+            env?.build.distFolder || env?.build.serverFolder || "./"
+          }
           fullWidth
-          disabled={metaLoading || isFrameworkRecognized(meta?.framework)}
           name="build.distFolder"
-          InputProps={{
-            endAdornment: metaLoading && <Spinner width={4} height={4} />,
-          }}
-          placeholder={
-            !metaLoading && !isFrameworkRecognized(meta?.framework)
-              ? "Output folder is not needed. It is taken from the framework configuration file."
-              : "Defaults to `build`, `dist`, `output` or `.stormkit`"
-          }
+          placeholder="Defaults to `build`, `dist`, `output` or `.stormkit`"
           helperText={
-            !metaLoading &&
-            !isFrameworkRecognized(meta?.framework) &&
-            "The content of this folder will be served by Stormkit."
+            <>
+              The folder containing your built assets. For many projects, this
+              is either{" "}
+              <Box component="code" sx={{ fontSize: 11, px: 0.5, py: 0.25 }}>
+                dist
+              </Box>{" "}
+              <Box component="code" sx={{ fontSize: 11, px: 0.5, py: 0.25 }}>
+                build
+              </Box>{" "}
+              <Box component="code" sx={{ fontSize: 11, px: 0.5, py: 0.25 }}>
+                output
+              </Box>
+              .
+            </>
           }
         />
       </Box>

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

@@ -0,0 +1,79 @@
+import { RenderResult, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi, type Mock } from "vitest";
+import { fireEvent, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import mockApp from "~/testing/data/mock_app";
+import mockEnvironments from "~/testing/data/mock_environments";
+import { mockUpdateEnvironment } from "~/testing/nocks/nock_environment";
+import TabConfigServer from "./TabConfigServer";
+
+interface WrapperProps {
+  app?: App;
+  environment?: Environment;
+  setRefreshToken?: () => void;
+}
+
+describe("~/pages/apps/[id]/environments/[env-id]/config/_components/TabConfigServer.tsx", () => {
+  let wrapper: RenderResult;
+  let currentApp: App;
+  let currentEnv: Environment;
+  let setRefreshToken: Mock;
+
+  const createWrapper = ({ app, environment }: WrapperProps) => {
+    setRefreshToken = vi.fn();
+    currentApp = app || mockApp();
+    currentEnv = environment || mockEnvironments({ app: currentApp })[0];
+
+    wrapper = render(
+      <TabConfigServer
+        app={currentApp}
+        environment={currentEnv}
+        setRefreshToken={setRefreshToken}
+      />
+    );
+  };
+
+  it("should have a form", () => {
+    createWrapper({});
+
+    expect(wrapper.getByText("Server settings")).toBeTruthy();
+    expect(
+      wrapper.getByText("Configure your long-running processes.")
+    ).toBeTruthy();
+
+    const startCmdInput = wrapper.getByLabelText(
+      "Start command"
+    ) as HTMLInputElement;
+
+    expect(startCmdInput.value).toBe("");
+  });
+
+  it("should submit the form", async () => {
+    createWrapper({});
+
+    await userEvent.type(
+      wrapper.getByLabelText("Start command"),
+      "npm run start"
+    );
+
+    const scope = mockUpdateEnvironment({
+      environment: {
+        ...currentEnv,
+        build: {
+          ...currentEnv.build,
+          serverCmd: "npm run start",
+        },
+      },
+      status: 200,
+      response: {
+        ok: true,
+      },
+    });
+
+    fireEvent.click(wrapper.getByText("Save"));
+
+    await waitFor(() => {
+      expect(scope.isDone()).toBe(true);
+    });
+  });
+});

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

@@ -0,0 +1,74 @@
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import Button from "@mui/lab/LoadingButton";
+import Card from "~/components/Card";
+import CardHeader from "~/components/CardHeader";
+import CardFooter from "~/components/CardFooter";
+import { useSubmitHandler } from "../actions";
+
+interface Props {
+  app: App;
+  environment: Environment;
+  setRefreshToken: (v: number) => void;
+}
+
+export default function TabConfigServer({
+  environment: env,
+  app,
+  setRefreshToken,
+}: Props) {
+  const { error, success, isLoading, submitHandler } = useSubmitHandler({
+    env,
+    app,
+    setRefreshToken,
+  });
+
+  if (!env) {
+    return <></>;
+  }
+
+  return (
+    <Card
+      id="server"
+      component="form"
+      sx={{ mb: 2 }}
+      error={error}
+      success={success}
+      onSubmit={submitHandler}
+    >
+      <CardHeader
+        title="Server settings"
+        subtitle="Configure your long-running processes."
+      />
+      <Box sx={{ mb: 4 }}>
+        <TextField
+          label="Start command"
+          variant="filled"
+          autoComplete="off"
+          defaultValue={env?.build.serverCmd || ""}
+          name="build.serverCmd"
+          fullWidth
+          InputLabelProps={{
+            shrink: true,
+          }}
+          placeholder="npm run start"
+          helperText={
+            "The command to run your server application. Leave empty if you don't have any."
+          }
+          sx={{ mb: 4 }}
+        />
+      </Box>
+
+      <CardFooter>
+        <Button
+          type="submit"
+          variant="contained"
+          color="secondary"
+          loading={isLoading}
+        >
+          Save
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}