Fix: Typing works again in Variables Editor

src/modules/EditorView/VariablesEditor.tsx

@@ -29,6 +29,7 @@ import { drawSelection, dropCursor, EditorView, highlightSpecialChars, keymap, l
 import { dracula, tomorrow } from "@mjfwebb/thememirror";
 import { Button } from "@neo4j-ndl/react";
 import classNames from "classnames";
+import { useMount } from "react-use";
 
 import type { Extension } from "../../components/Filename";
 import { FileName } from "../../components/Filename";
@@ -106,7 +107,7 @@ export const VariablesEditor = ({ id, loading, fileExtension, fileName, borderRa
         [formatTheCode, theme.theme, updateListener]
     );
 
-    useEffect(() => {
+    useMount(() => {
         if (elementRef.current === null) {
             return;
         }
@@ -123,7 +124,7 @@ export const VariablesEditor = ({ id, loading, fileExtension, fileName, borderRa
             view.destroy();
             setEditorView(null);
         };
-    }, [value]);
+    });
 
     useEffect(() => {
         if (editorView) {
@@ -163,6 +164,7 @@ export const VariablesEditor = ({ id, loading, fileExtension, fileName, borderRa
                 rightButtons={
                     <Button
                         aria-label="Prettify code"
+                        data-testid="variables-editor-prettify-button"
                         className={classNames(
                             "mr-2",
                             theme.theme === Theme.LIGHT ? "ndl-theme-light" : "ndl-theme-dark"

tests/pages/Editor.ts

@@ -27,12 +27,22 @@ export class Editor extends Screen {
         await this.page.locator(`#${EDITOR_QUERY_INPUT} .cm-content`).fill(query);
     }
 
+    public async getQuery(): Promise<string> {
+        const text = (await this.page.locator(`#${EDITOR_QUERY_INPUT} .cm-content`).innerText()).valueOf();
+        return text;
+    }
+
     public async setParams(params: string) {
         await this.page.waitForSelector("[data-test-editor-query-button]");
         await this.page.locator(`#${EDITOR_PARAMS_INPUT} .cm-content`).clear();
         await this.page.locator(`#${EDITOR_PARAMS_INPUT} .cm-content`).fill(params);
     }
 
+    public async getParams(): Promise<string> {
+        const text = (await this.page.locator(`#${EDITOR_PARAMS_INPUT} .cm-content`).innerText()).valueOf();
+        return text;
+    }
+
     public async submitQuery() {
         await this.page.waitForSelector("[data-test-editor-query-button]");
         await this.page.click("[data-test-editor-query-button]");
@@ -77,4 +87,17 @@ export class Editor extends Screen {
         await this.page.waitForSelector(`[data-test-query-editor-tab="${tabName}"]`);
         await this.page.click(`[data-test-query-editor-tab="${tabName}"]`);
     }
+
+    public async isVariablesEditorDisabled(): Promise<boolean> {
+        const isDisabled = await this.page.evaluate(() => {
+            const editor = document.querySelector(`#${EDITOR_PARAMS_INPUT}`);
+            return editor ? editor.classList.contains("cm-disabled") : false;
+        });
+        return isDisabled;
+    }
+
+    public async prettifyVariables() {
+        await this.page.waitForSelector("[data-testid='variables-editor-prettify-button']");
+        await this.page.click("[data-testid='variables-editor-prettify-button']");
+    }
 }

tests/queryeditortabs.test.ts

@@ -87,4 +87,26 @@ test.describe("query editor tabs", () => {
         await expect(page.getByRole("tab", { name: "MyTest1" })).toBeVisible();
         await expect(page.getByRole("tab", { name: "MyTest2" })).not.toBeVisible();
     });
+
+    test("should display typed query in the editor", async ({ loginPage, schemaEditorPage, editorPage }) => {
+        await loginPage.loginDismissIntrospection(NEO_USER, NEO_PASSWORD, NEO_URL);
+
+        await schemaEditorPage.setTypeDefs(typeDefs);
+        await schemaEditorPage.buildSchema();
+
+        await editorPage.addNewTab();
+
+        const testQuery = `
+            query TestQuery {
+                movies {
+                    id
+                }
+            }
+        `;
+
+        await editorPage.setQuery(testQuery);
+
+        const currentQuery = await editorPage.getQuery();
+        expect(currentQuery.replace(/\s/g, "")).toContain("queryTestQuery{movies{id}}");
+    });
 });

tests/variableseditor.test.ts

@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) "Neo4j"
+ * Neo4j Sweden AB [http://neo4j.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as dotenv from "dotenv";
+
+import { expect, test } from "./utils/pagemodel";
+
+dotenv.config();
+
+const { NEO_USER = "admin", NEO_PASSWORD = "password", NEO_URL = "neo4j://localhost:7687/neo4j" } = process.env;
+
+test.describe("variables editor", () => {
+    const typeDefs = /* GraphQL */ `
+        type Movie @node {
+            id: ID!
+        }
+    `;
+
+    const query = /* GraphQL */ `
+        query MyTest1 {
+            movies {
+                id
+            }
+        }
+    `;
+
+    test("should display typed variables in the editor", async ({ loginPage, schemaEditorPage, editorPage }) => {
+        await loginPage.loginDismissIntrospection(NEO_USER, NEO_PASSWORD, NEO_URL);
+        await schemaEditorPage.setTypeDefs(typeDefs);
+        await schemaEditorPage.buildSchema();
+        await editorPage.addNewTab();
+        await editorPage.setQuery(query);
+
+        const testVariables = '{ "id": "123", "name": "The Matrix" }';
+        await editorPage.setParams(testVariables);
+        const currentVariables = await editorPage.getParams();
+        expect(currentVariables.replace(/\s/g, "")).toContain('"id":"123","name":"TheMatrix"');
+    });
+
+    test("variables editor prettifies JSON correctly", async ({ loginPage, schemaEditorPage, editorPage }) => {
+        await loginPage.loginDismissIntrospection(NEO_USER, NEO_PASSWORD, NEO_URL);
+        await schemaEditorPage.setTypeDefs(typeDefs);
+        await schemaEditorPage.buildSchema();
+        await editorPage.addNewTab();
+        await editorPage.setQuery(query);
+
+        const uglyJson = '{"id":1,"name":"Test"}';
+        await editorPage.setParams(uglyJson);
+        await editorPage.prettifyVariables();
+        const prettyJson = await editorPage.getParams();
+        expect(prettyJson).toMatch(/\s+"id": 1,?\s+"name": "Test"/);
+    });
+});