Allow configuring environmental variables in panel (#626)

- [ ] Add test cases

e2e-tests/env_var.spec.ts

@@ -0,0 +1,62 @@
+import { expect } from "@playwright/test";
+import { test } from "./helpers/test_helper";
+import path from "path";
+import fs from "fs";
+
+test("env var", async ({ po }) => {
+  await po.sendPrompt("tc=1");
+  const appPath = await po.getCurrentAppPath();
+
+  await po.selectPreviewMode("configure");
+
+  // Create a new env var
+  await po.page
+    .getByRole("button", { name: "Add Environment Variable" })
+    .click();
+  await po.page.getByRole("textbox", { name: "Key" }).click();
+  await po.page.getByRole("textbox", { name: "Key" }).fill("aKey");
+
+  await po.page.getByRole("textbox", { name: "Value" }).click();
+  await po.page.getByRole("textbox", { name: "Value" }).fill("aValue");
+
+  await po.page.getByRole("button", { name: "Save" }).click();
+  await snapshotEnvVar({ appPath, name: "create-aKey" });
+
+  // Create second env var
+  await po.page
+    .getByRole("button", { name: "Add Environment Variable" })
+    .click();
+  await po.page.getByRole("textbox", { name: "Key" }).click();
+  await po.page.getByRole("textbox", { name: "Key" }).fill("bKey");
+
+  await po.page.getByRole("textbox", { name: "Value" }).click();
+  await po.page.getByRole("textbox", { name: "Value" }).fill("bValue");
+
+  await po.page.getByRole("button", { name: "Save" }).click();
+  await snapshotEnvVar({ appPath, name: "create-bKey" });
+
+  // Edit second env var
+  await po.page.getByTestId("edit-env-var-bKey").click();
+  await po.page.getByRole("textbox", { name: "Value" }).click();
+  await po.page.getByRole("textbox", { name: "Value" }).fill("bValue2");
+  await po.page.getByTestId("save-edit-env-var").click();
+  await snapshotEnvVar({ appPath, name: "edit-bKey" });
+
+  // Delete first env var
+  await po.page.getByTestId("delete-env-var-aKey").click();
+  await snapshotEnvVar({ appPath, name: "delete-aKey" });
+});
+
+async function snapshotEnvVar({
+  appPath,
+  name,
+}: {
+  appPath: string;
+  name: string;
+}) {
+  expect(() => {
+    const envFile = path.join(appPath, ".env.local");
+    const envFileContent = fs.readFileSync(envFile, "utf8");
+    expect(envFileContent).toMatchSnapshot({ name });
+  }).toPass();
+}

e2e-tests/helpers/test_helper.ts

@@ -422,7 +422,7 @@ export class PageObject {
   // Preview panel
   ////////////////////////////////
 
-  async selectPreviewMode(mode: "code" | "problems" | "preview") {
+  async selectPreviewMode(mode: "code" | "problems" | "preview" | "configure") {
     await this.page.getByTestId(`${mode}-mode-button`).click();
   }
 

e2e-tests/snapshots/env_var.spec.ts_create-aKey

@@ -0,0 +1 @@
+aKey=aValue

e2e-tests/snapshots/env_var.spec.ts_create-bKey

@@ -0,0 +1,2 @@
+aKey=aValue
+bKey=bValue

e2e-tests/snapshots/env_var.spec.ts_delete-aKey

@@ -0,0 +1 @@
+bKey=bValue2

e2e-tests/snapshots/env_var.spec.ts_edit-bKey

@@ -0,0 +1,2 @@
+aKey=aValue
+bKey=bValue2