fix: parsing env variables in variable-editor

Author: omermecitoglu

src/components/VariableEditor.tsx

@@ -17,6 +17,7 @@ import InputGroupText from "react-bootstrap/InputGroupText";
 import OverlayTrigger from "react-bootstrap/OverlayTrigger";
 import Tooltip from "react-bootstrap/Tooltip";
 import { v4 as uuidv4 } from "uuid";
+import { parseEnvVariables } from "~/utils/parseEnvVariables";
 import type { IconProp } from "@fortawesome/fontawesome-svg-core";
 
 type VariableEditorProps = {
@@ -81,8 +82,8 @@ const VariableEditor = ({
       })();
       if (text) {
         if (text.includes("=")) {
-          const newItems = text.replace(/\r\n/g, "\n").split("\n").map(line => {
-            const [key, value] = line.split("=");
+          const newItems = Object.entries(parseEnvVariables(text)).map(line => {
+            const [key, value] = line;
             return {
               id: crypto.randomUUID(),
               key,

src/utils/parseEnvVariables.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from "@jest/globals";
+import { parseEnvVariables } from "./parseEnvVariables";
+
+/* eslint-disable @stylistic/max-len */
+
+describe("parseEnvVariables", () => {
+  it("should parse environment variables correctly from a text", () => {
+    const input = `
+      FOO=bar
+      BAZ="qux"
+    `;
+    const output = parseEnvVariables(input);
+    expect(output).toEqual({
+      FOO: "bar",
+      BAZ: '"qux"',
+    });
+  });
+
+  it("should parse multi-line environment variables correctly from a text", () => {
+    const input = `
+      FOO=bar
+      MULTI_LINE_KEY="-----BEGIN PRIVATE KEY-----\nAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\nAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\nAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\nAAAAAAAA\n-----END PRIVATE KEY-----"
+    `;
+    const output = parseEnvVariables(input);
+    expect(output).toEqual({
+      FOO: "bar",
+      MULTI_LINE_KEY: "-----BEGIN PRIVATE KEY-----\nAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\nAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\nAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\nAAAAAAAA\n-----END PRIVATE KEY-----",
+    });
+  });
+
+  it("should ignore commented lines", () => {
+    const input = `
+      FOO=bar
+      # BAZ=qux
+    `;
+    const output = parseEnvVariables(input);
+    expect(output).toEqual({
+      FOO: "bar",
+    });
+  });
+});

src/utils/parseEnvVariables.ts

@@ -0,0 +1,32 @@
+export function parseEnvVariables(text: string): Record<string, string> {
+  const lines = text.split("\n").map(line => line.trim());
+  const envVariables: Record<string, string> = {};
+
+  let currentKey: string | null = null;
+  let currentValue: string[] = [];
+
+  for (const line of lines) {
+    if (line.startsWith("#")) {
+      continue; // Skip commented lines
+    }
+    if (currentKey) {
+      currentValue.push(line);
+      if (line.endsWith('"')) {
+        envVariables[currentKey] = currentValue.join("\n").slice(1, -1); // Remove surrounding quotes
+        currentKey = null;
+        currentValue = [];
+      }
+    } else {
+      const [key, ...valueParts] = line.split("=");
+      const value = valueParts.join("=");
+      if (key && value.startsWith('"') && !value.endsWith('"')) {
+        currentKey = key.trim();
+        currentValue.push(value);
+      } else if (key) {
+        envVariables[key.trim()] = value.trim();
+      }
+    }
+  }
+
+  return envVariables;
+}