Show hint if preview branches are disabled in the project

Author: myftija

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsx

@@ -60,6 +60,8 @@ import {
   githubAppInstallPath,
   EnvironmentParamSchema,
   v3ProjectSettingsPath,
+  docsPath,
+  v3BillingPath,
 } from "~/utils/pathBuilder";
 import React, { useEffect, useState } from "react";
 import { Select, SelectItem } from "~/components/primitives/Select";
@@ -77,6 +79,7 @@ import { TextLink } from "~/components/primitives/TextLink";
 import { cn } from "~/utils/cn";
 import { ProjectSettingsPresenter } from "~/services/projectSettingsPresenter.server";
 import { type BuildSettings } from "~/v3/buildSettings";
+import { InfoIconTooltip } from "~/components/primitives/Tooltip";
 
 export const meta: MetaFunction = () => {
   return [
@@ -126,6 +129,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     githubAppEnabled: gitHubApp.enabled,
     githubAppInstallations: gitHubApp.installations,
     connectedGithubRepository: gitHubApp.connectedRepository,
+    isPreviewEnvironmentEnabled: gitHubApp.isPreviewEnvironmentEnabled,
     buildSettings,
   });
 };
@@ -433,8 +437,13 @@ export const action: ActionFunction = async ({ request, params }) => {
 };
 
 export default function Page() {
-  const { githubAppInstallations, connectedGithubRepository, githubAppEnabled, buildSettings } =
-    useTypedLoaderData<typeof loader>();
+  const {
+    githubAppInstallations,
+    connectedGithubRepository,
+    githubAppEnabled,
+    buildSettings,
+    isPreviewEnvironmentEnabled,
+  } = useTypedLoaderData<typeof loader>();
   const project = useProject();
   const organization = useOrganization();
   const environment = useEnvironment();
@@ -561,7 +570,10 @@ export default function Page() {
                   <Header2 spacing>Git settings</Header2>
                   <div className="w-full rounded-sm border border-grid-dimmed p-4">
                     {connectedGithubRepository ? (
-                      <ConnectedGitHubRepoForm connectedGitHubRepo={connectedGithubRepository} />
+                      <ConnectedGitHubRepoForm
+                        connectedGitHubRepo={connectedGithubRepository}
+                        previewEnvironmentEnabled={isPreviewEnvironmentEnabled}
+                      />
                     ) : (
                       <GitHubConnectionPrompt
                         gitHubAppInstallations={githubAppInstallations ?? []}
@@ -903,11 +915,14 @@ type ConnectedGitHubRepo = {
 
 function ConnectedGitHubRepoForm({
   connectedGitHubRepo,
+  previewEnvironmentEnabled,
 }: {
   connectedGitHubRepo: ConnectedGitHubRepo;
+  previewEnvironmentEnabled?: boolean;
 }) {
   const lastSubmission = useActionData() as any;
   const navigation = useNavigation();
+  const organization = useOrganization();
 
   const [hasGitSettingsChanges, setHasGitSettingsChanges] = useState(false);
   const [gitSettingsValues, setGitSettingsValues] = useState({
@@ -1003,10 +1018,10 @@ function ConnectedGitHubRepoForm({
         <Fieldset>
           <InputGroup fullWidth>
             <Hint>
-              Every commit on the selected tracking branch creates a deployment in the corresponding
+              Every push to the selected tracking branch creates a deployment in the corresponding
               environment.
             </Hint>
-            <div className="grid grid-cols-[120px_1fr] gap-3">
+            <div className="mt-1 grid grid-cols-[120px_1fr] gap-3">
               <div className="flex items-center gap-1.5">
                 <EnvironmentIcon environment={{ type: "PRODUCTION" }} className="size-4" />
                 <span className={`text-sm ${environmentTextClassName({ type: "PRODUCTION" })}`}>
@@ -1054,19 +1069,34 @@ function ConnectedGitHubRepoForm({
                   {environmentFullTitle({ type: "PREVIEW" })}
                 </span>
               </div>
-              <Switch
-                name="previewDeploymentsEnabled"
-                defaultChecked={connectedGitHubRepo.previewDeploymentsEnabled}
-                variant="small"
-                label="create preview deployments for pull requests"
-                labelPosition="right"
-                onCheckedChange={(checked) => {
-                  setGitSettingsValues((prev) => ({
-                    ...prev,
-                    previewDeploymentsEnabled: checked,
-                  }));
-                }}
-              />
+              <div className="flex items-center gap-1.5">
+                <Switch
+                  name="previewDeploymentsEnabled"
+                  disabled={!previewEnvironmentEnabled}
+                  defaultChecked={
+                    connectedGitHubRepo.previewDeploymentsEnabled && previewEnvironmentEnabled
+                  }
+                  variant="small"
+                  label="Create preview deployments for pull requests"
+                  labelPosition="right"
+                  onCheckedChange={(checked) => {
+                    setGitSettingsValues((prev) => ({
+                      ...prev,
+                      previewDeploymentsEnabled: checked,
+                    }));
+                  }}
+                />
+                {!previewEnvironmentEnabled && (
+                  <InfoIconTooltip
+                    content={
+                      <span className="text-xs">
+                        <TextLink to={v3BillingPath(organization)}>Upgrade</TextLink> your plan to
+                        enable preview branches
+                      </span>
+                    }
+                  />
+                )}
+              </div>
             </div>
             <FormError>{fields.productionBranch?.error}</FormError>
             <FormError>{fields.stagingBranch?.error}</FormError>

apps/webapp/app/services/projectSettingsPresenter.server.ts

@@ -3,7 +3,7 @@ import { prisma } from "~/db.server";
 import { BranchTrackingConfigSchema } from "~/v3/github";
 import { env } from "~/env.server";
 import { findProjectBySlug } from "~/models/project.server";
-import { err, fromPromise, ok, okAsync } from "neverthrow";
+import { err, fromPromise, ok, ResultAsync } from "neverthrow";
 import { BuildSettingsSchema } from "~/v3/buildSettings";
 
 export class ProjectSettingsPresenter {
@@ -20,33 +20,31 @@ export class ProjectSettingsPresenter {
       fromPromise(findProjectBySlug(organizationSlug, projectSlug, userId), (error) => ({
         type: "other" as const,
         cause: error,
-      })).andThen((project) => {
-        if (!project) {
-          return err({ type: "project_not_found" as const });
-        }
-        return ok(project);
-      });
+      }))
+        .andThen((project) => {
+          if (!project) {
+            return err({ type: "project_not_found" as const });
+          }
+          return ok(project);
+        })
+        .map((project) => {
+          const buildSettingsOrFailure = BuildSettingsSchema.safeParse(project.buildSettings);
+          const buildSettings = buildSettingsOrFailure.success
+            ? buildSettingsOrFailure.data
+            : undefined;
+          return { ...project, buildSettings };
+        });
 
     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,
-        });
-      });
+      return getProject().map(({ buildSettings }) => ({
+        gitHubApp: {
+          enabled: false,
+          connectedRepository: undefined,
+          installations: undefined,
+          isPreviewEnvironmentEnabled: undefined,
+        },
+        buildSettings,
+      }));
     }
 
     const findConnectedGithubRepository = (projectId: string) =>
@@ -136,37 +134,39 @@ 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: {
-              enabled: true,
-              connectedRepository: connectedGithubRepository,
-              // skip loading installations if there is a connected repository
-              // a project can have only a single connected repository
-              installations: undefined,
-            },
-            buildSettings,
-          });
-        }
+    const isPreviewEnvironmentEnabled = (projectId: string) =>
+      fromPromise(
+        prisma.runtimeEnvironment.findFirst({
+          select: {
+            id: true,
+          },
+          where: {
+            projectId: projectId,
+            slug: "preview",
+          },
+        }),
+        (error) => ({
+          type: "other" as const,
+          cause: error,
+        })
+      ).map((previewEnvironment) => previewEnvironment !== null);
 
-        return listGithubAppInstallations(project.organizationId).map((githubAppInstallations) => {
-          return {
-            gitHubApp: {
-              enabled: true,
-              connectedRepository: undefined,
-              installations: githubAppInstallations,
-            },
-            buildSettings,
-          };
-        });
-      })
+    return getProject().andThen((project) =>
+      ResultAsync.combine([
+        isPreviewEnvironmentEnabled(project.id),
+        findConnectedGithubRepository(project.id),
+        listGithubAppInstallations(project.organizationId),
+      ]).map(
+        ([isPreviewEnvironmentEnabled, connectedGithubRepository, githubAppInstallations]) => ({
+          gitHubApp: {
+            enabled: true,
+            connectedRepository: connectedGithubRepository,
+            installations: githubAppInstallations,
+            isPreviewEnvironmentEnabled,
+          },
+          buildSettings: project.buildSettings,
+        })
+      )
     );
   }
 }