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

Move the secret toggle into the edit form so it submits on Save
instead of firing a separate request immediately. Remove the standalone
makeSecret action/method and include isSecret as an optional field on
the existing editValue flow.

Author: JoanLaRosa

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

@@ -36,6 +36,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,6 +809,7 @@ 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;
 
@@ -840,6 +842,7 @@ function EditEnvironmentVariablePanel({
         <DialogHeader>Edit environment variable</DialogHeader>
         <fetcher.Form method="post" {...getFormProps(form)}>
           <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 +861,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

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,7 @@ export const EditEnvironmentVariableValue = z.object({
   environmentId: z.string(),
   value: z.string(),
   lastUpdatedBy: EnvironmentVariableUpdaterSchema.optional(),
+  isSecret: z.preprocess((val) => val === "true" || val === true, z.boolean()).optional(),
 });
 export type EditEnvironmentVariableValue = z.infer<typeof EditEnvironmentVariableValue>;