feat(webapp): allow marking environment variables as secret after creation

Add an irreversible "Make secret" toggle to the edit environment variable
dialog so users can protect sensitive values that were initially created
as non-secret. Once enabled, the value is hidden and the toggle becomes
disabled.

Author: JoanLaRosa

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

@@ -28,6 +28,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 { InfoPanel } from "~/components/primitives/InfoPanel";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
@@ -69,6 +70,7 @@ import {
   DeleteEnvironmentVariableValue,
   EditEnvironmentVariableValue,
   EnvironmentVariable,
+  MakeSecretEnvironmentVariableValue,
 } from "~/v3/environmentVariables/repository";
 
 export const meta: MetaFunction = () => {
@@ -111,6 +113,10 @@ const schema = z.discriminatedUnion("action", [
     key: z.string(),
     ...DeleteEnvironmentVariableValue.shape,
   }),
+  z.object({
+    action: z.literal("makeSecret"),
+    ...MakeSecretEnvironmentVariableValue.shape,
+  }),
 ]);
 
 export const action = async ({ request, params }: ActionFunctionArgs) => {
@@ -179,6 +185,17 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
         `Deleted ${submission.value.key} environment variable`
       );
     }
+    case "makeSecret": {
+      const repository = new EnvironmentVariablesRepository(prisma);
+      const result = await repository.makeSecret(project.id, submission.value);
+
+      if (!result.success) {
+        submission.error.key = [result.error];
+        return json(submission);
+      }
+
+      return json({ ...submission, success: true });
+    }
   }
 };
 
@@ -405,9 +422,11 @@ function EditEnvironmentVariablePanel({
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const fetcher = useFetcher<typeof action>();
+  const makeSecretFetcher = useFetcher<typeof action>();
   const lastSubmission = fetcher.data as any;
 
   const isLoading = fetcher.state !== "idle";
+  const isMakingSecret = makeSecretFetcher.state !== "idle";
 
   // Close dialog on successful submission
   useEffect(() => {
@@ -426,6 +445,25 @@ function EditEnvironmentVariablePanel({
     shouldRevalidate: "onSubmit",
   });
 
+  const handleMakeSecret = () => {
+    if (
+      !confirm(
+        "Are you sure you want to make this variable secret? This action is irreversible — the value will be hidden and cannot be revealed again."
+      )
+    ) {
+      return;
+    }
+
+    makeSecretFetcher.submit(
+      {
+        action: "makeSecret",
+        id: variable.id,
+        environmentId: variable.environment.id,
+      },
+      { method: "post" }
+    );
+  };
+
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
@@ -466,6 +504,25 @@ function EditEnvironmentVariablePanel({
               <FormError id={value.errorId}>{value.error}</FormError>
             </InputGroup>
 
+            <InputGroup fullWidth>
+              <Switch
+                variant="medium"
+                label={<span className="text-text-bright">Secret value</span>}
+                checked={variable.isSecret}
+                disabled={variable.isSecret || isMakingSecret}
+                onCheckedChange={(checked) => {
+                  if (checked) {
+                    handleMakeSecret();
+                  }
+                }}
+              />
+              <Hint>
+                {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>
+
             <FormError>{form.error}</FormError>
 
             <FormButtons

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

@@ -11,6 +11,7 @@ import {
   type DeleteEnvironmentVariableValue,
   type EnvironmentVariable,
   type EnvironmentVariableWithSecret,
+  type MakeSecretEnvironmentVariableValue,
   type ProjectEnvironmentVariable,
   type Repository,
   type Result,
@@ -630,6 +631,76 @@ export class EnvironmentVariablesRepository implements Repository {
     return this.#getSecretEnvironmentVariables(projectId, environmentId, parentEnvironmentId);
   }
 
+  async makeSecret(
+    projectId: string,
+    options: MakeSecretEnvironmentVariableValue
+  ): Promise<Result> {
+    const project = await this.prismaClient.project.findFirst({
+      where: {
+        id: projectId,
+        deletedAt: null,
+      },
+      select: {
+        id: true,
+      },
+    });
+
+    if (!project) {
+      return { success: false as const, error: "Project not found" };
+    }
+
+    const environmentVariable = await this.prismaClient.environmentVariable.findFirst({
+      where: {
+        id: options.id,
+        projectId,
+      },
+      select: {
+        id: true,
+        values: {
+          where: {
+            environmentId: options.environmentId,
+          },
+          select: {
+            id: true,
+            isSecret: true,
+          },
+        },
+      },
+    });
+
+    if (!environmentVariable) {
+      return { success: false as const, error: "Environment variable not found" };
+    }
+
+    const value = environmentVariable.values[0];
+
+    if (!value) {
+      return { success: false as const, error: "Environment variable value not found" };
+    }
+
+    if (value.isSecret) {
+      return { success: false as const, error: "Variable is already secret" };
+    }
+
+    try {
+      await this.prismaClient.environmentVariableValue.update({
+        where: {
+          id: value.id,
+        },
+        data: {
+          isSecret: true,
+        },
+      });
+
+      return { success: true as const };
+    } catch (error) {
+      return {
+        success: false as const,
+        error: error instanceof Error ? error.message : "Something went wrong",
+      };
+    }
+  }
+
   async delete(projectId: string, options: DeleteEnvironmentVariable): Promise<Result> {
     const project = await this.prismaClient.project.findFirst({
       where: {

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

@@ -47,6 +47,12 @@ export const DeleteEnvironmentVariableValue = z.object({
 });
 export type DeleteEnvironmentVariableValue = z.infer<typeof DeleteEnvironmentVariableValue>;
 
+export const MakeSecretEnvironmentVariableValue = z.object({
+  id: z.string(),
+  environmentId: z.string(),
+});
+export type MakeSecretEnvironmentVariableValue = z.infer<typeof MakeSecretEnvironmentVariableValue>;
+
 export const EditEnvironmentVariableValue = z.object({
   id: z.string(),
   environmentId: z.string(),
@@ -105,4 +111,5 @@ export interface Repository {
   getEnvironmentVariables(projectId: string, environmentId: string): Promise<EnvironmentVariable[]>;
   delete(projectId: string, options: DeleteEnvironmentVariable): Promise<Result>;
   deleteValue(projectId: string, options: DeleteEnvironmentVariableValue): Promise<Result>;
+  makeSecret(projectId: string, options: MakeSecretEnvironmentVariableValue): Promise<Result>;
 }