fix(webapp): only load env var values for displayed environments

The environment variables page loaded every value in the project,
including rows left behind by archived preview-branch environments,
which made the loader extremely slow for projects that churn branches.
The values relation is now filtered to the environments the page
actually displays.

Author: ericallam

.server-changes/env-vars-page-scope-values-to-visible-environments.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Speed up the environment variables page for projects with many archived preview branches. The page now only loads variable values for the environments it displays instead of every value ever created, including those left behind by archived branches.

apps/webapp/app/presenters/v3/EnvironmentVariablesPresenter.server.ts

@@ -41,6 +41,17 @@ export class EnvironmentVariablesPresenter {
       throw new Error("Project not found");
     }
 
+    const { environments: sortedEnvironments, hasStaging } =
+      await loadEnvironmentVariablesEnvironments(
+        this.#prismaClient,
+        { userId, projectId: project.id },
+        { skipProjectAccessCheck: true }
+      );
+
+    // Only load values for the environments we display. Projects can accumulate
+    // values in archived branch environments, which would otherwise all be loaded here.
+    const environmentIds = sortedEnvironments.map((env) => env.id);
+
     const environmentVariables = await this.#prismaClient.environmentVariable.findMany({
       select: {
         id: true,
@@ -59,6 +70,11 @@ export class EnvironmentVariablesPresenter {
             },
             isSecret: true,
           },
+          where: {
+            environmentId: {
+              in: environmentIds,
+            },
+          },
         },
       },
       where: {
@@ -102,13 +118,6 @@ export class EnvironmentVariablesPresenter {
     const usersRecord: Record<string, { id: string; name: string | null; displayName: string | null; avatarUrl: string | null }> =
       Object.fromEntries(users.map((u) => [u.id, u]));
 
-    const { environments: sortedEnvironments, hasStaging } =
-      await loadEnvironmentVariablesEnvironments(
-        this.#prismaClient,
-        { userId, projectId: project.id },
-        { skipProjectAccessCheck: true }
-      );
-
     const repository = new EnvironmentVariablesRepository(this.#prismaClient);
 
     const nonSecretItems: Array<{ environmentId: string; key: string }> = [];

apps/webapp/test/EnvironmentVariablesPresenter.test.ts

@@ -69,4 +69,112 @@ describe("EnvironmentVariablesPresenter", () => {
     expect(secretVariable!.value).toBe("");
     expect(nonSecretVariable!.value).toBe("plain-value");
   });
+
+  postgresTest(
+    "returns values for active environments (including branch environments) and excludes archived branch environments",
+    async ({ prisma }) => {
+      const { user, organization, project, projectSlug } =
+        await createTestOrgProjectWithMember(prisma);
+
+      const prodEnvironment = await createRuntimeEnvironment(prisma, {
+        projectId: project.id,
+        organizationId: organization.id,
+        type: "PRODUCTION",
+      });
+
+      const parentPreviewEnvironment = await createRuntimeEnvironment(prisma, {
+        projectId: project.id,
+        organizationId: organization.id,
+        type: "PREVIEW",
+      });
+      await prisma.runtimeEnvironment.update({
+        where: { id: parentPreviewEnvironment.id },
+        data: { isBranchableEnvironment: true },
+      });
+
+      const activeBranchEnvironment = await createRuntimeEnvironment(prisma, {
+        projectId: project.id,
+        organizationId: organization.id,
+        type: "PREVIEW",
+      });
+      await prisma.runtimeEnvironment.update({
+        where: { id: activeBranchEnvironment.id },
+        data: {
+          parentEnvironmentId: parentPreviewEnvironment.id,
+          branchName: "feature/active",
+        },
+      });
+
+      const archivedBranchEnvironment = await createRuntimeEnvironment(prisma, {
+        projectId: project.id,
+        organizationId: organization.id,
+        type: "PREVIEW",
+      });
+      await prisma.runtimeEnvironment.update({
+        where: { id: archivedBranchEnvironment.id },
+        data: {
+          parentEnvironmentId: parentPreviewEnvironment.id,
+          branchName: "feature/archived",
+        },
+      });
+
+      const repository = new EnvironmentVariablesRepository(prisma, prisma);
+
+      await createEnvironmentVariable(repository, project.id, {
+        environmentId: prodEnvironment.id,
+        key: "MY_VAR",
+        value: "prod-value",
+        userId: user.id,
+      });
+      await createEnvironmentVariable(repository, project.id, {
+        environmentId: activeBranchEnvironment.id,
+        key: "MY_VAR",
+        value: "active-branch-value",
+        userId: user.id,
+      });
+      await createEnvironmentVariable(repository, project.id, {
+        environmentId: archivedBranchEnvironment.id,
+        key: "MY_VAR",
+        value: "archived-branch-value",
+        userId: user.id,
+      });
+
+      // Archive the branch after it accumulated values (archiving does not
+      // delete its EnvironmentVariableValue rows).
+      await prisma.runtimeEnvironment.update({
+        where: { id: archivedBranchEnvironment.id },
+        data: { archivedAt: new Date() },
+      });
+
+      const result = await new EnvironmentVariablesPresenter(prisma).call({
+        userId: user.id,
+        projectSlug,
+      });
+
+      const environmentIds = result.environments.map((environment) => environment.id);
+      expect(environmentIds).toContain(prodEnvironment.id);
+      expect(environmentIds).toContain(activeBranchEnvironment.id);
+      expect(environmentIds).not.toContain(archivedBranchEnvironment.id);
+
+      const myVarValues = result.environmentVariables.filter(
+        (variable) => variable.key === "MY_VAR"
+      );
+      expect(myVarValues).toHaveLength(2);
+
+      const prodValue = myVarValues.find(
+        (variable) => variable.environment.id === prodEnvironment.id
+      );
+      expect(prodValue?.value).toBe("prod-value");
+
+      const activeBranchValue = myVarValues.find(
+        (variable) => variable.environment.id === activeBranchEnvironment.id
+      );
+      expect(activeBranchValue?.value).toBe("active-branch-value");
+      expect(activeBranchValue?.environment.branchName).toBe("feature/active");
+
+      expect(
+        myVarValues.some((variable) => variable.environment.id === archivedBranchEnvironment.id)
+      ).toBe(false);
+    }
+  );
 });