Allowing setting secret env vars

Author: matt-aitken

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

@@ -40,6 +40,7 @@ import { useList } from "~/hooks/useList";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { EnvironmentVariablesPresenter } from "~/presenters/v3/EnvironmentVariablesPresenter.server";
+import { logger } from "~/services/logger.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
 import {
@@ -87,6 +88,10 @@ const schema = z.object({
     if (i === "false") return false;
     return;
   }, z.boolean()),
+  isSecret: z.preprocess((i) => {
+    if (i === "true") return true;
+    return false;
+  }, z.boolean()),
   environmentIds: z.preprocess((i) => {
     if (typeof i === "string") return [i];
 
@@ -194,7 +199,7 @@ export default function Page() {
     shouldRevalidate: "onSubmit",
   });
 
-  const [revealAll, setRevealAll] = useState(false);
+  const [revealAll, setRevealAll] = useState(true);
 
   useEffect(() => {
     setIsOpen(true);
@@ -257,6 +262,15 @@ export default function Page() {
                 file when running locally.
               </Hint>
             </InputGroup>
+            <InputGroup className="w-auto">
+              <Switch
+                name="isSecret"
+                variant="large"
+                label="Secret?"
+                defaultChecked={false}
+                value="true"
+              />
+            </InputGroup>
             <InputGroup fullWidth>
               <FieldLayout showDeleteButton={false}>
                 <Label>Keys</Label>

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

@@ -330,8 +330,6 @@ function EditEnvironmentVariablePanel({
   variable: EnvironmentVariableWithSetValues;
   revealAll: boolean;
 }) {
-  const [reveal, setReveal] = useState(revealAll);
-
   const [isOpen, setIsOpen] = useState(false);
   const lastSubmission = useActionData();
   const navigation = useNavigation();
@@ -351,8 +349,6 @@ function EditEnvironmentVariablePanel({
     shouldRevalidate: "onSubmit",
   });
 
-  console.log("edit form", { form, variable, id, environmentId, value });
-
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
@@ -380,21 +376,13 @@ function EditEnvironmentVariablePanel({
             </InputGroup>
             <EnvironmentCombo environment={variable.environment} className="text-sm" />
 
-            <div className="flex justify-between gap-1">
-              <Switch
-                variant="small"
-                label="Reveal"
-                checked={reveal}
-                onCheckedChange={(e) => setReveal(e.valueOf())}
-              />
-            </div>
             <InputGroup fullWidth>
               <Label>Value</Label>
               <Input
                 {...conform.input(value, { type: "text" })}
                 placeholder={variable.isSecret ? "Set new secret value" : "Not set"}
                 defaultValue={variable.value}
-                type={reveal ? "text" : "password"}
+                type={"text"}
               />
               <FormError id={value.errorId}>{value.error}</FormError>
             </InputGroup>

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

@@ -51,6 +51,7 @@ export class EnvironmentVariablesRepository implements Repository {
     options: {
       override: boolean;
       environmentIds: string[];
+      isSecret?: boolean;
       variables: {
         key: string;
         value: string;
@@ -187,8 +188,11 @@ export class EnvironmentVariablesRepository implements Repository {
                 variableId: environmentVariable.id,
                 environmentId: environmentId,
                 valueReferenceId: secretReference.id,
+                isSecret: options.isSecret,
+              },
+              update: {
+                isSecret: options.isSecret,
               },
-              update: {},
             });
 
             await secretStore.setSecret<{ secret: string }>(key, {