feat(webapp): allow marking env vars as secret after creation

.server-changes/mark-environment-variables-secret.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Existing environment variables can now be permanently marked as secret from the dashboard.

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

@@ -20,7 +20,15 @@ import {
 import { json } from "@remix-run/server-runtime";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { fromPromise } from "neverthrow";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, type RefObject } from "react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type FormEvent,
+  type RefObject,
+} from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { UserAvatar } from "~/components/UserProfilePhoto";
@@ -36,6 +44,7 @@ import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormButtons } from "~/components/primitives/FormButtons";
 import { FormError } from "~/components/primitives/FormError";
 import { Header2 } from "~/components/primitives/Headers";
+import { Hint } from "~/components/primitives/Hint";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
@@ -808,11 +817,32 @@ function EditEnvironmentVariablePanel({
   revealAll: boolean;
 }) {
   const [isOpen, setIsOpen] = useState(false);
+  const [isSecret, setIsSecret] = useState(variable.isSecret);
   const fetcher = useFetcher<typeof action>();
   const lastSubmission = fetcher.data as any;
 
   const isLoading = fetcher.state !== "idle";
 
+  function handleOpenChange(open: boolean) {
+    if (open) {
+      setIsSecret(variable.isSecret);
+    }
+
+    setIsOpen(open);
+  }
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    if (
+      isSecret &&
+      !variable.isSecret &&
+      !window.confirm(
+        "Making this variable secret is irreversible. The value will be hidden and cannot be revealed again. Continue?"
+      )
+    ) {
+      event.preventDefault();
+    }
+  }
+
   // Close dialog on successful submission
   useEffect(() => {
     if (lastSubmission?.success && fetcher.state === "idle") {
@@ -832,14 +862,15 @@ function EditEnvironmentVariablePanel({
   });
 
   return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         <Button variant="small-menu-item" LeadingIcon={PencilSquareIcon} fullWidth textAlignLeft />
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>Edit environment variable</DialogHeader>
-        <fetcher.Form method="post" {...getFormProps(form)}>
+        <fetcher.Form method="post" {...getFormProps(form)} onSubmit={handleSubmit}>
           <input type="hidden" name="action" value="edit" />
+          <input type="hidden" name="isSecret" value={isSecret ? "true" : "false"} />
           <input {...getInputProps(id, { type: "hidden" })} value={variable.id} />
           <input
             {...getInputProps(environmentId, { type: "hidden" })}
@@ -858,6 +889,22 @@ function EditEnvironmentVariablePanel({
               <EnvironmentCombo environment={variable.environment} className="text-sm" />
             </InputGroup>
 
+            <InputGroup className="w-auto">
+              <Switch
+                variant="medium"
+                label={<span className="text-text-bright">Secret value</span>}
+                checked={isSecret}
+                disabled={variable.isSecret}
+                className="-ml-2 inline-flex w-fit"
+                onCheckedChange={setIsSecret}
+              />
+              <Hint className="-mt-1">
+                {variable.isSecret
+                  ? "This variable is secret and cannot be changed back."
+                  : "Once enabled, the value will be hidden and cannot be revealed again."}
+              </Hint>
+            </InputGroup>
+
             <InputGroup fullWidth>
               <Label>Value</Label>
               <Input
@@ -879,7 +926,11 @@ function EditEnvironmentVariablePanel({
                 </Button>
               }
               cancelButton={
-                <Button onClick={() => setIsOpen(false)} variant="tertiary/medium" type="button">
+                <Button
+                  onClick={() => handleOpenChange(false)}
+                  variant="tertiary/medium"
+                  type="button"
+                >
                   Cancel
                 </Button>
               }

apps/webapp/app/v3/environmentVariables/environmentVariablesRepository.server.ts

@@ -505,6 +505,7 @@ export class EnvironmentVariablesRepository implements Repository {
               increment: 1,
             },
             lastUpdatedBy: options.lastUpdatedBy ? options.lastUpdatedBy : undefined,
+            isSecret: options.isSecret ? true : undefined,
           },
         });
       });

apps/webapp/app/v3/environmentVariables/repository.ts

@@ -69,6 +69,10 @@ export const EditEnvironmentVariableValue = z.object({
   environmentId: z.string(),
   value: z.string(),
   lastUpdatedBy: EnvironmentVariableUpdaterSchema.optional(),
+  isSecret: z.preprocess(
+    (val) => (val === undefined ? undefined : val === "true" || val === true),
+    z.boolean().optional()
+  ),
 });
 export type EditEnvironmentVariableValue = z.infer<typeof EditEnvironmentVariableValue>;
 

apps/webapp/test/environmentVariablesRepository.test.ts

@@ -257,3 +257,112 @@ describe("EnvironmentVariablesRepository.getVariableValuesForKeys", () => {
     }
   );
 });
+
+describe("EnvironmentVariablesRepository.editValue", () => {
+  postgresTest(
+    "permanently marks an existing value as secret while updating its value",
+    async ({ prisma }) => {
+      const { user, organization, project } = await createTestOrgProjectWithMember(prisma);
+      const environment = await createRuntimeEnvironment(prisma, {
+        projectId: project.id,
+        organizationId: organization.id,
+        type: "PRODUCTION",
+      });
+      const repository = new EnvironmentVariablesRepository(prisma, prisma);
+
+      await createEnvironmentVariable(repository, project.id, {
+        environmentId: environment.id,
+        key: "BECOMES_SECRET",
+        value: "plain-value",
+        userId: user.id,
+      });
+
+      const variable = await prisma.environmentVariable.findFirstOrThrow({
+        where: { projectId: project.id, key: "BECOMES_SECRET" },
+        include: { values: { where: { environmentId: environment.id } } },
+      });
+      const originalVersion = variable.values[0]!.version;
+
+      const result = await repository.editValue(project.id, {
+        id: variable.id,
+        environmentId: environment.id,
+        value: "new-secret-value",
+        isSecret: true,
+        lastUpdatedBy: { type: "user", userId: user.id },
+      });
+
+      expect(result).toEqual({ success: true });
+
+      const updatedValue = await prisma.environmentVariableValue.findUniqueOrThrow({
+        where: {
+          variableId_environmentId: {
+            variableId: variable.id,
+            environmentId: environment.id,
+          },
+        },
+      });
+      expect(updatedValue.isSecret).toBe(true);
+      expect(updatedValue.version).toBe(originalVersion + 1);
+
+      const unredacted = await repository.getEnvironment(project.id, environment.id);
+      expect(unredacted).toEqual([
+        expect.objectContaining({ key: "BECOMES_SECRET", value: "new-secret-value" }),
+      ]);
+
+      const redacted = await repository.getEnvironmentWithRedactedSecrets(
+        project.id,
+        environment.id
+      );
+      expect(redacted).toEqual([
+        expect.objectContaining({ key: "BECOMES_SECRET", value: "<redacted>", isSecret: true }),
+      ]);
+    }
+  );
+
+  postgresTest("does not change an existing secret value back to plaintext", async ({ prisma }) => {
+    const { user, organization, project } = await createTestOrgProjectWithMember(prisma);
+    const environment = await createRuntimeEnvironment(prisma, {
+      projectId: project.id,
+      organizationId: organization.id,
+      type: "PRODUCTION",
+    });
+    const repository = new EnvironmentVariablesRepository(prisma, prisma);
+
+    await createEnvironmentVariable(repository, project.id, {
+      environmentId: environment.id,
+      key: "STAYS_SECRET",
+      value: "original-secret",
+      isSecret: true,
+      userId: user.id,
+    });
+
+    const variable = await prisma.environmentVariable.findFirstOrThrow({
+      where: { projectId: project.id, key: "STAYS_SECRET" },
+    });
+
+    const result = await repository.editValue(project.id, {
+      id: variable.id,
+      environmentId: environment.id,
+      value: "updated-secret",
+      isSecret: false,
+      lastUpdatedBy: { type: "user", userId: user.id },
+    });
+
+    expect(result).toEqual({ success: true });
+
+    const updatedValue = await prisma.environmentVariableValue.findUniqueOrThrow({
+      where: {
+        variableId_environmentId: {
+          variableId: variable.id,
+          environmentId: environment.id,
+        },
+      },
+    });
+    expect(updatedValue.isSecret).toBe(true);
+
+    const unredacted = await repository.getEnvironment(project.id, environment.id);
+    expect(unredacted).toEqual([
+      expect.objectContaining({ key: "STAYS_SECRET", value: "updated-secret" }),
+    ]);
+  });
+});