Environment variables pasting uses dotenv (#1075)

* Add dotenv package to the webapp frontend, required some polyfills

* Use dotenv to parse the pasted env vars. Make the panel wider on larger screens

Author: matt-aitken

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

@@ -38,6 +38,7 @@ import { cn } from "~/utils/cn";
 import { ProjectParamSchema, v3EnvironmentVariablesPath } from "~/utils/pathBuilder";
 import { EnvironmentVariablesRepository } from "~/v3/environmentVariables/environmentVariablesRepository.server";
 import { EnvironmentVariableKey } from "~/v3/environmentVariables/repository";
+import dotenv from "dotenv";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -183,7 +184,7 @@ export default function Page() {
         }
       }}
     >
-      <DialogContent>
+      <DialogContent className="md:max-w-2xl lg:max-w-3xl">
         <DialogHeader>New environment variables</DialogHeader>
         <Form
           method="post"
@@ -308,20 +309,12 @@ function VariableFields({
     if (!clipboardData) return;
 
     let text = clipboardData.getData("text");
-    //replace carriage returns
-    text = text.replace(/\r/g, "");
-    const lines = text.split("\n");
+    if (!text) return;
 
-    const keyValuePairs = lines.flatMap((line) => {
-      if (line.trim().startsWith("#")) return [];
-
-      const split = line.split("=");
-      if (split.length === 2) {
-        return [{ key: split[0], value: split[1] }];
-      }
-      return [];
-    });
+    const variables = dotenv.parse(text);
+    const keyValuePairs = Object.entries(variables).map(([key, value]) => ({ key, value }));
 
+    //do the default paste
     if (keyValuePairs.length === 0) return;
 
     //prevent default pasting

apps/webapp/package.json

@@ -108,6 +108,7 @@
     "cronstrue": "^2.21.0",
     "cross-env": "^7.0.3",
     "cuid": "^2.1.8",
+    "dotenv": "^16.4.5",
     "emails": "workspace:*",
     "evt": "^2.4.13",
     "express": "^4.18.1",

apps/webapp/remix.config.js

@@ -21,6 +21,7 @@ module.exports = {
     "random-words",
     "superjson",
   ],
+  browserNodeBuiltinsPolyfill: { modules: { path: true, os: true, crypto: true } },
   watchPaths: async () => {
     return [
       "../../packages/core/src/**/*",