feat(webapp): enforce env var permissions on the dashboard

The environment variables list now withholds values for environments the
current role can't read and shows a permission-denied state in their place.
The create dialog disables the environment targets the role can't write
(with a tooltip) and its action rejects those targets server-side. The
permission-denied states use the no-entry icon.

Author: matt-aitken

apps/webapp/app/components/PermissionDenied.tsx

@@ -1,7 +1,7 @@
 import { organizationRolesPath } from "~/utils/pathBuilder";
 import { LinkButton } from "./primitives/Buttons";
 import { InfoPanel } from "./primitives/InfoPanel";
-import { LockClosedIcon } from "@heroicons/react/20/solid";
+import { NoSymbolIcon } from "@heroicons/react/20/solid";
 import { useOrganization } from "~/hooks/useOrganizations";
 import React from "react";
 
@@ -10,7 +10,7 @@ export function PermissionDenied({ message }: { message: React.ReactNode }) {
 
   return (
     <InfoPanel
-      icon={LockClosedIcon}
+      icon={NoSymbolIcon}
       iconClassName="text-text-dimmed"
       title="Permission denied"
       accessory={

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx

@@ -7,15 +7,21 @@ import {
   useForm,
 } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
-import { LockClosedIcon, LockOpenIcon, PlusIcon, XMarkIcon } from "@heroicons/react/20/solid";
+import {
+  LockClosedIcon,
+  LockOpenIcon,
+  NoSymbolIcon,
+  PlusIcon,
+  XMarkIcon,
+} from "@heroicons/react/20/solid";
 import { Form, useActionData, useNavigate, useNavigation } from "@remix-run/react";
-import { type ActionFunctionArgs, json } from "@remix-run/server-runtime";
+import { json } from "@remix-run/server-runtime";
 import dotenv from "dotenv";
 import { type RefObject, useCallback, useRef, useState } from "react";
 import { redirect } from "remix-typedjson";
 import invariant from "tiny-invariant";
 import { z } from "zod";
-import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
+import { EnvironmentLabel, environmentFullTitle } from "~/components/environments/EnvironmentLabel";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { CheckboxWithLabel } from "~/components/primitives/Checkbox";
 import { Dialog, DialogContent, DialogHeader } from "~/components/primitives/Dialog";
@@ -41,7 +47,7 @@ import { useList } from "~/hooks/useList";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useTypedMatchesData } from "~/hooks/useTypedMatchData";
-import { requireUserId } from "~/services/session.server";
+import { dashboardAction } from "~/services/routeBuilders/dashboardBuilder";
 import { cn } from "~/utils/cn";
 import {
   environmentVariablesRouteId,
@@ -95,74 +101,107 @@ const schema = z.object({
   }, Variable.array().nonempty("At least one variable is required")),
 });
 
-export const action = async ({ request, params }: ActionFunctionArgs) => {
-  const userId = await requireUserId(request);
-  const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);
+async function resolveOrgIdFromSlug(slug: string): Promise<string | null> {
+  const org = await prisma.organization.findFirst({ where: { slug }, select: { id: true } });
+  return org?.id ?? null;
+}
 
-  if (request.method.toUpperCase() !== "POST") {
-    return { status: 405, body: "Method Not Allowed" };
-  }
+export const action = dashboardAction(
+  {
+    params: EnvironmentParamSchema,
+    context: async (params) => {
+      const organizationId = await resolveOrgIdFromSlug(params.organizationSlug);
+      return organizationId ? { organizationId } : {};
+    },
+    // Per-environment write:envvars is enforced in the handler — the target
+    // environments come from the submission, not the route params.
+  },
+  async ({ request, params, user, ability }) => {
+    const userId = user.id;
+    const { organizationSlug, projectParam, envParam } = params;
+
+    if (request.method.toUpperCase() !== "POST") {
+      throw new Response("Method Not Allowed", { status: 405 });
+    }
 
-  const formData = await request.formData();
-  const submission = parse(formData, { schema });
+    const formData = await request.formData();
+    const submission = parse(formData, { schema });
 
-  if (!submission.value) {
-    return json(submission);
-  }
+    if (!submission.value) {
+      return json(submission);
+    }
+
+    // Enforce env-tier write:envvars for every targeted environment, so a role
+    // that can't write a deployed tier can't create vars there via a direct
+    // POST (the disabled checkboxes are not the boundary).
+    const targetEnvironments = await prisma.runtimeEnvironment.findMany({
+      where: { id: { in: submission.value.environmentIds } },
+      select: { type: true },
+    });
+    const hasDeniedEnvironment = targetEnvironments.some(
+      (env) => !ability.can("write", { type: "envvars", envType: env.type })
+    );
+    if (hasDeniedEnvironment) {
+      submission.error.environmentIds = [
+        "You don't have permission to manage environment variables in one of the selected environments.",
+      ];
+      return json(submission);
+    }
 
-  const project = await prisma.project.findUnique({
-    where: {
-      slug: params.projectParam,
-      organization: {
-        members: {
-          some: {
-            userId,
+    const project = await prisma.project.findUnique({
+      where: {
+        slug: params.projectParam,
+        organization: {
+          members: {
+            some: {
+              userId,
+            },
           },
         },
       },
-    },
-    select: {
-      id: true,
-    },
-  });
-  if (!project) {
-    submission.error.key = ["Project not found"];
-    return json(submission);
-  }
+      select: {
+        id: true,
+      },
+    });
+    if (!project) {
+      submission.error.key = ["Project not found"];
+      return json(submission);
+    }
 
-  const repository = new EnvironmentVariablesRepository(prisma);
-  const result = await repository.create(project.id, {
-    ...submission.value,
-    lastUpdatedBy: {
-      type: "user",
-      userId,
-    },
-  });
+    const repository = new EnvironmentVariablesRepository(prisma);
+    const result = await repository.create(project.id, {
+      ...submission.value,
+      lastUpdatedBy: {
+        type: "user",
+        userId,
+      },
+    });
 
-  if (!result.success) {
-    if (result.variableErrors) {
-      for (const { key, error } of result.variableErrors) {
-        const index = submission.value.variables.findIndex((v) => v.key === key);
+    if (!result.success) {
+      if (result.variableErrors) {
+        for (const { key, error } of result.variableErrors) {
+          const index = submission.value.variables.findIndex((v) => v.key === key);
 
-        if (index !== -1) {
-          submission.error[`variables[${index}].key`] = [error];
+          if (index !== -1) {
+            submission.error[`variables[${index}].key`] = [error];
+          }
         }
+      } else {
+        submission.error.variables = [result.error];
       }
-    } else {
-      submission.error.variables = [result.error];
+
+      return json(submission);
     }
 
-    return json(submission);
+    return redirect(
+      v3EnvironmentVariablesPath(
+        { slug: organizationSlug },
+        { slug: projectParam },
+        { slug: envParam }
+      )
+    );
   }
-
-  return redirect(
-    v3EnvironmentVariablesPath(
-      { slug: organizationSlug },
-      { slug: projectParam },
-      { slug: envParam }
-    )
-  );
-};
+);
 
 export default function Page() {
   const [isOpen, setIsOpen] = useState(true);
@@ -173,7 +212,8 @@ export default function Page() {
     parentData,
     "Environment variables page loader data must be defined when rendering the create dialog"
   );
-  const { environments, hasStaging } = parentData;
+  const { environments, hasStaging, accessibleEnvironmentIds } = parentData;
+  const accessibleEnvironmentIdSet = new Set(accessibleEnvironmentIds);
   const lastSubmission = useActionData();
   const navigation = useNavigation();
   const navigate = useNavigate();
@@ -269,19 +309,45 @@ export default function Page() {
                 ))
               )}
               <div className="flex items-center gap-2">
-                {nonBranchEnvironments.map((environment) => (
-                  <CheckboxWithLabel
-                    key={environment.id}
-                    id={environment.id}
-                    value={environment.id}
-                    defaultChecked={selectedEnvironmentIds.has(environment.id)}
-                    onChange={(isChecked) =>
-                      handleEnvironmentChange(environment.id, isChecked, environment.type)
-                    }
-                    label={<EnvironmentLabel environment={environment} className="text-sm" />}
-                    variant="button"
-                  />
-                ))}
+                {nonBranchEnvironments.map((environment) =>
+                  accessibleEnvironmentIdSet.has(environment.id) ? (
+                    <CheckboxWithLabel
+                      key={environment.id}
+                      id={environment.id}
+                      value={environment.id}
+                      defaultChecked={selectedEnvironmentIds.has(environment.id)}
+                      onChange={(isChecked) =>
+                        handleEnvironmentChange(environment.id, isChecked, environment.type)
+                      }
+                      label={<EnvironmentLabel environment={environment} className="text-sm" />}
+                      variant="button"
+                    />
+                  ) : (
+                    <TooltipProvider key={environment.id}>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <div>
+                            <CheckboxWithLabel
+                              id={environment.id}
+                              value={environment.id}
+                              disabled
+                              defaultChecked={false}
+                              label={
+                                <EnvironmentLabel environment={environment} className="text-sm" />
+                              }
+                              variant="button"
+                            />
+                          </div>
+                        </TooltipTrigger>
+                        <TooltipContent className="flex items-center gap-2">
+                          <NoSymbolIcon className="size-4 text-text-dimmed" />
+                          With your current role, you can't manage{" "}
+                          {environmentFullTitle(environment)} environment variables.
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  )
+                )}
                 {!hasStaging && (
                   <>
                     <TooltipProvider>