Set env vars to be "secret"

apps/webapp/app/components/primitives/CopyableText.tsx

@@ -51,7 +51,7 @@ export function CopyableText({ value, className }: { value: string; className?:
               )}
             </span>
           }
-          content={copied ? "Copied!" : "Copy text"}
+          content={copied ? "Copied!" : "Copy"}
           className="font-sans"
           disableHoverableContent
         />

apps/webapp/app/components/primitives/Switch.tsx

@@ -33,6 +33,13 @@ const variations = {
       "transition group-hover:text-text-bright group-disabled:group-hover:text-text-dimmed"
     ),
   },
+  medium: {
+    container:
+      "flex items-center gap-x-2 rounded-md hover:bg-tertiary py-1.5 px-2 transition focus-custom",
+    root: "h-4 w-8",
+    thumb: "size-3.5 data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0",
+    text: "text-sm text-text-dimmed",
+  },
 };
 
 type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {

apps/webapp/app/components/primitives/Table.tsx

@@ -349,7 +349,9 @@ export const TableCellMenu = forwardRef<
                   variants[variant].menuButtonDivider
                 )}
               >
-                <div className={cn("flex items-center gap-x-0.5")}>{hiddenButtons}</div>
+                <div className={cn("flex items-center gap-x-0.5 divide-x divide-grid-bright")}>
+                  {hiddenButtons}
+                </div>
               </div>
             )}
             {/* Always visible buttons  */}

apps/webapp/app/presenters/v3/EnvironmentVariablesPresenter.server.ts

@@ -1,3 +1,4 @@
+import { flipCauseOption } from "effect/Cause";
 import { PrismaClient, prisma } from "~/db.server";
 import { Project } from "~/models/project.server";
 import { User } from "~/models/user.server";
@@ -48,6 +49,7 @@ export class EnvironmentVariablesPresenter {
                 key: true,
               },
             },
+            isSecret: true,
           },
         },
       },
@@ -82,34 +84,43 @@ export class EnvironmentVariablesPresenter {
       },
     });
 
-    const sortedEnvironments = sortEnvironments(filterOrphanedEnvironments(environments));
+    const sortedEnvironments = sortEnvironments(filterOrphanedEnvironments(environments)).filter(
+      (e) => e.orgMember?.userId === userId || e.orgMember === null
+    );
 
     const repository = new EnvironmentVariablesRepository(this.#prismaClient);
     const variables = await repository.getProject(project.id);
 
     return {
-      environmentVariables: environmentVariables.map((environmentVariable) => {
-        const variable = variables.find((v) => v.key === environmentVariable.key);
+      environmentVariables: environmentVariables
+        .flatMap((environmentVariable) => {
+          const variable = variables.find((v) => v.key === environmentVariable.key);
 
-        return {
-          id: environmentVariable.id,
-          key: environmentVariable.key,
-          values: sortedEnvironments.reduce((previous, env) => {
+          return sortedEnvironments.flatMap((env) => {
             const val = variable?.values.find((v) => v.environment.id === env.id);
-            previous[env.id] = {
-              value: val?.value,
-              environment: { type: env.type, id: env.id },
-            };
-            return { ...previous };
-          }, {} as Record<string, { value: string | undefined; environment: { type: string; id: string } }>),
-        };
-      }),
-      environments: sortedEnvironments
-        .filter((e) => e.orgMember?.userId === userId || e.orgMember === null)
-        .map((environment) => ({
-          id: environment.id,
-          type: environment.type,
-        })),
+            const isSecret =
+              environmentVariable.values.find((v) => v.environmentId === env.id)?.isSecret ?? false;
+
+            if (!val) {
+              return [];
+            }
+
+            return [
+              {
+                id: environmentVariable.id,
+                key: environmentVariable.key,
+                environment: { type: env.type, id: env.id },
+                value: isSecret ? "" : val.value,
+                isSecret,
+              },
+            ];
+          });
+        })
+        .sort((a, b) => a.key.localeCompare(b.key)),
+      environments: sortedEnvironments.map((environment) => ({
+        id: environment.id,
+        type: environment.type,
+      })),
       hasStaging: environments.some((environment) => environment.type === "STAGING"),
     };
   }

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);
@@ -209,14 +214,10 @@ export default function Page() {
         }
       }}
     >
-      <DialogContent className="md:max-w-2xl lg:max-w-3xl">
-        <DialogHeader>New environment variables</DialogHeader>
-        <Form
-          method="post"
-          {...form.props}
-          className="max-h-[70vh] overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
-        >
-          <Fieldset className="mt-2">
+      <DialogContent className="p-0 pt-2.5 md:max-w-2xl lg:max-w-3xl">
+        <DialogHeader className="px-4">New environment variables</DialogHeader>
+        <Form method="post" {...form.props}>
+          <Fieldset className="max-h-[70vh] overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
             <InputGroup fullWidth>
               <Label>Environments</Label>
               <div className="flex items-center gap-2">
@@ -237,7 +238,7 @@ export default function Page() {
                       <TooltipTrigger>
                         <TextLink
                           to={v3BillingPath(organization)}
-                          className="flex w-fit cursor-pointer items-center gap-2 rounded border border-dashed border-charcoal-600 py-3 pl-3 pr-4 transition hover:border-charcoal-500 hover:bg-charcoal-850"
+                          className="flex w-fit cursor-pointer items-center gap-2 rounded border border-dashed border-charcoal-600 py-2.5 pl-3 pr-4 transition hover:border-charcoal-500 hover:bg-charcoal-850"
                         >
                           <LockClosedIcon className="size-4 text-charcoal-500" />
                           <EnvironmentLabel environment={{ type: "STAGING" }} className="text-sm" />
@@ -257,8 +258,21 @@ export default function Page() {
                 file when running locally.
               </Hint>
             </InputGroup>
+            <InputGroup className="w-auto">
+              <Switch
+                name="isSecret"
+                variant="medium"
+                defaultChecked={false}
+                value="true"
+                className="-ml-2 inline-flex w-fit"
+                label={<span className="text-text-bright">Secret value</span>}
+              />
+              <Hint className="-mt-1">
+                If enabled, you and your team will not be able to view the values after creation.
+              </Hint>
+            </InputGroup>
             <InputGroup fullWidth>
-              <FieldLayout showDeleteButton={false}>
+              <FieldLayout>
                 <Label>Keys</Label>
                 <div className="flex justify-between gap-1">
                   <Label>Values</Label>
@@ -280,61 +294,47 @@ export default function Page() {
             </InputGroup>
 
             <FormError>{form.error}</FormError>
-            <FormButtons
-              confirmButton={
-                <div className="flex flex-row-reverse items-center gap-2">
-                  <Button
-                    type="submit"
-                    variant="primary/medium"
-                    disabled={isLoading}
-                    name="override"
-                    value="false"
-                  >
-                    {isLoading ? "Saving" : "Save"}
-                  </Button>
-                  <Button
-                    variant="secondary/medium"
-                    disabled={isLoading}
-                    name="override"
-                    value="true"
-                  >
-                    {isLoading ? "Overriding" : "Override"}
-                  </Button>
-                </div>
-              }
-              cancelButton={
-                <LinkButton
-                  to={v3EnvironmentVariablesPath(organization, project, environment)}
-                  variant="tertiary/medium"
-                >
-                  Cancel
-                </LinkButton>
-              }
-            />
           </Fieldset>
+          <FormButtons
+            className="px-4 pb-4"
+            confirmButton={
+              <div className="flex flex-row-reverse items-center gap-2">
+                <Button
+                  type="submit"
+                  variant="primary/medium"
+                  disabled={isLoading}
+                  name="override"
+                  value="false"
+                >
+                  {isLoading ? "Saving" : "Save"}
+                </Button>
+                <Button
+                  variant="secondary/medium"
+                  disabled={isLoading}
+                  name="override"
+                  value="true"
+                >
+                  {isLoading ? "Overriding" : "Override"}
+                </Button>
+              </div>
+            }
+            cancelButton={
+              <LinkButton
+                to={v3EnvironmentVariablesPath(organization, project, environment)}
+                variant="tertiary/medium"
+              >
+                Cancel
+              </LinkButton>
+            }
+          />
         </Form>
       </DialogContent>
     </Dialog>
   );
 }
 
-function FieldLayout({
-  children,
-  showDeleteButton,
-}: {
-  children: React.ReactNode;
-  showDeleteButton: boolean;
-}) {
-  return (
-    <div
-      className={cn(
-        "grid w-full gap-1.5",
-        showDeleteButton ? "grid-cols-[1fr_1fr_2rem]" : "grid-cols-[1fr_1fr]"
-      )}
-    >
-      {children}
-    </div>
-  );
+function FieldLayout({ children }: { children: React.ReactNode }) {
+  return <div className="grid w-full grid-cols-[1fr_1fr] gap-1.5">{children}</div>;
 }
 
 function VariableFields({
@@ -409,9 +409,9 @@ function VariableFields({
           />
         );
       })}
-      <div className={cn("flex items-center justify-between gap-4", items.length > 1 && "pr-10")}>
+      <div className="flex items-center justify-between gap-4">
         <Paragraph variant="extra-small">
-          Tip: Paste your .env into this form to populate it.
+          Tip: Paste all your .env values at once into this form to populate it.
         </Paragraph>
         <Button
           variant="tertiary/medium"
@@ -457,7 +457,7 @@ function VariableField({
 
   return (
     <fieldset ref={ref}>
-      <FieldLayout showDeleteButton={showDeleteButton}>
+      <FieldLayout>
         <Input
           id={`${formId}-${baseFieldName}.key`}
           name={`${baseFieldName}.key`}
@@ -467,22 +467,24 @@ function VariableField({
           autoFocus={index === 0}
           onPaste={onPaste}
         />
-        <Input
-          id={`${formId}-${baseFieldName}.value`}
-          name={`${baseFieldName}.value`}
-          type={showValue ? "text" : "password"}
-          placeholder="Not set"
-          value={value.value}
-          onChange={(e) => onChange({ ...value, value: e.currentTarget.value })}
-        />
-        {showDeleteButton && (
-          <Button
-            variant="minimal/medium"
-            type="button"
-            onClick={() => onDelete()}
-            LeadingIcon={XMarkIcon}
+        <div className={cn("flex items-center justify-between gap-1")}>
+          <Input
+            id={`${formId}-${baseFieldName}.value`}
+            name={`${baseFieldName}.value`}
+            type={showValue ? "text" : "password"}
+            placeholder="Not set"
+            value={value.value}
+            onChange={(e) => onChange({ ...value, value: e.currentTarget.value })}
           />
-        )}
+          {showDeleteButton && (
+            <Button
+              variant="minimal/medium"
+              type="button"
+              onClick={() => onDelete()}
+              LeadingIcon={XMarkIcon}
+            />
+          )}
+        </div>
       </FieldLayout>
       <div className="space-y-2">
         <FormError id={fields.key.errorId}>{fields.key.error}</FormError>