Click to edit UI (#385)

- [x] add e2e test - happy case (make sure it clears selection and next
prompt is empty, and preview is cleared); de-selection case
- [x] shim - old & new file
- [x] upgrade path
- [x] add docs
- [x] add try-catch to parser script
- [x] make it work for next.js
- [x] extract npm package
- [x] make sure plugin doesn't apply in prod

e2e-tests/helpers/generateAppFilesSnapshotData.ts

@@ -62,6 +62,7 @@ export function generateAppFilesSnapshotData(
   basePath: string,
 ): FileSnapshotData[] {
   const ignorePatterns = [
+    ".DS_Store",
     ".git",
     "node_modules",
     // Avoid snapshotting lock files because they are getting generated

e2e-tests/helpers/test_helper.ts

@@ -220,6 +220,20 @@ export class PageObject {
     await this.page.getByText("Rebuild").click();
   }
 
+  async clickTogglePreviewPanel() {
+    await this.page.getByTestId("toggle-preview-panel-button").click();
+  }
+
+  async clickPreviewPickElement() {
+    await this.page
+      .getByTestId("preview-pick-element-button")
+      .click({ timeout: Timeout.LONG });
+  }
+
+  async clickDeselectComponent() {
+    await this.page.getByRole("button", { name: "Deselect component" }).click();
+  }
+
   async clickPreviewMoreOptions() {
     await this.page.getByTestId("preview-more-options-button").click();
   }
@@ -262,6 +276,18 @@ export class PageObject {
     return this.page.getByTestId("preview-error-banner");
   }
 
+  async snapshotChatInputContainer() {
+    await expect(this.getChatInputContainer()).toMatchAriaSnapshot();
+  }
+
+  getSelectedComponentDisplay() {
+    return this.page.getByTestId("selected-component-display");
+  }
+
+  async snapshotSelectedComponentDisplay() {
+    await expect(this.getSelectedComponentDisplay()).toMatchAriaSnapshot();
+  }
+
   async snapshotPreview({ name }: { name?: string } = {}) {
     const iframe = this.getPreviewIframeElement();
     await expect(iframe.contentFrame().locator("body")).toMatchAriaSnapshot({
@@ -483,6 +509,16 @@ export class PageObject {
     await this.page.getByRole("button", { name: "Open in Chat" }).click();
   }
 
+  async clickAppUpgradeButton({ upgradeId }: { upgradeId: string }) {
+    await this.page.getByTestId(`app-upgrade-${upgradeId}`).click();
+  }
+
+  async expectNoAppUpgrades() {
+    await expect(this.page.getByTestId("no-app-upgrades-needed")).toBeVisible({
+      timeout: Timeout.MEDIUM,
+    });
+  }
+
   async clickAppDetailsRenameAppButton() {
     await this.page.getByTestId("app-details-rename-app-button").click();
   }