Fix function editor save

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/QueryEditorDialog.tsx

@@ -106,6 +106,9 @@ export default function QueryNodeEditorDialog<Q>({
   const node = useLatest(nodeProp);
 
   const [input, setInput] = React.useState<appDom.QueryNode<Q>>(node);
+  React.useEffect(() => {
+    setInput(node);
+  }, [node]);
 
   const reset = useEvent(() => setInput(node));
 
@@ -231,10 +234,6 @@ export default function QueryNodeEditorDialog<Q>({
     onClose();
   }, [handleCommit, onClose]);
 
-  React.useEffect(() => {
-    setInput(node);
-  }, [node]);
-
   const queryEditorContext = React.useMemo(
     () => (dataSourceId ? { appId, dataSourceId, connectionId } : null),
     [appId, dataSourceId, connectionId],

packages/toolpad-app/src/toolpadDataSources/function/client.tsx

@@ -234,6 +234,7 @@ function QueryEditor({
           <Box sx={{ flex: 1, minHeight: 0 }}>
             <TypescriptEditor
               value={input.attributes.query.value.module}
+              data-testid="function editor"
               onChange={(newValue) => {
                 setInput((existing) => appDom.setQueryProp(existing, 'module', newValue));
               }}

packages/toolpad-app/src/utils/react.tsx

@@ -1,3 +1,4 @@
+import mitt from 'mitt';
 import * as React from 'react';
 
 /**
@@ -34,3 +35,34 @@ export function interleave(items: React.ReactNode[], separator: React.ReactNode)
 
   return result;
 }
+
+/**
+ * Create a shared state to be used across the application. Returns a useState hook that
+ * is synchronised on the same state between all instances where it is called.
+ */
+export function createGlobalState<T = undefined>(initialValue: T) {
+  const emitter = mitt();
+  let result: [T, React.Dispatch<React.SetStateAction<T>>];
+  const setState: React.Dispatch<React.SetStateAction<T>> = (newValue) => {
+    const updateValue =
+      typeof newValue === 'function' ? (newValue as (newValue: T) => T)(result[0]) : newValue;
+
+    if (updateValue !== result[0]) {
+      result = [updateValue, setState];
+      emitter.emit('change');
+    }
+  };
+  result = [initialValue, setState];
+  return function useGlobalState() {
+    return React.useSyncExternalStore<[T, React.Dispatch<React.SetStateAction<T>>]>(
+      (cb) => {
+        emitter.on('change', cb);
+        return () => {
+          emitter.off('change', cb);
+        };
+      },
+      () => result,
+      () => result,
+    );
+  };
+}

test/integration/function-basic/functionDom.json

@@ -56,7 +56,7 @@
       "attributes": {
         "component": {
           "type": "const",
-          "value": "Typography"
+          "value": "Text"
         }
       },
       "parentProp": "children",
@@ -105,7 +105,7 @@
       "id": "avf3p1y",
       "name": "throws",
       "type": "query",
-      "params": {},
+      "params": [],
       "parentId": "5q1xd0t",
       "attributes": {
         "query": {
@@ -162,7 +162,7 @@
       "id": "od03pa3",
       "name": "hello",
       "type": "query",
-      "params": {},
+      "params": [],
       "parentId": "5q1xd0t",
       "attributes": {
         "query": {
@@ -198,7 +198,7 @@
       "attributes": {
         "component": {
           "type": "const",
-          "value": "Typography"
+          "value": "Text"
         }
       },
       "parentProp": "children",
@@ -219,7 +219,7 @@
       "attributes": {
         "component": {
           "type": "const",
-          "value": "Typography"
+          "value": "Text"
         }
       },
       "parentProp": "children",
@@ -245,12 +245,15 @@
       "id": "xh03p50",
       "name": "echo",
       "type": "query",
-      "params": {
-        "foo": {
-          "type": "jsExpression",
-          "value": "\"bound foo parameter\"\n"
-        }
-      },
+      "params": [
+        [
+          "foo",
+          {
+            "type": "jsExpression",
+            "value": "\"bound foo parameter\"\n"
+          }
+        ]
+      ],
       "parentId": "5q1xd0t",
       "attributes": {
         "query": {
@@ -288,7 +291,7 @@
       "attributes": {
         "component": {
           "type": "const",
-          "value": "Typography"
+          "value": "Text"
         }
       },
       "parentProp": "children",
@@ -309,7 +312,7 @@
       "attributes": {
         "component": {
           "type": "const",
-          "value": "Typography"
+          "value": "Text"
         }
       },
       "parentProp": "children",
@@ -351,6 +354,69 @@
       },
       "parentProp": "children",
       "parentIndex": "a0"
+    },
+    "rd030ch": {
+      "attributes": {
+        "query": {
+          "type": "const",
+          "value": {
+            "module": "export default async function ({ parameters }: ToolpadFunctionEvent) {\n  return \"edited hello\";\n}\n",
+            "browser": false
+          }
+        },
+        "connectionId": {
+          "type": "const",
+          "value": null
+        },
+        "dataSource": {
+          "type": "const",
+          "value": "function"
+        }
+      },
+      "name": "edited",
+      "id": "rd030ch",
+      "type": "query",
+      "parentId": "5q1xd0t",
+      "parentProp": "queries",
+      "parentIndex": "a3"
+    },
+    "ib830c5": {
+      "name": "pageRow5",
+      "props": {},
+      "attributes": {
+        "component": {
+          "type": "const",
+          "value": "PageRow"
+        }
+      },
+      "layout": {},
+      "id": "ib830c5",
+      "type": "element",
+      "parentId": "5q1xd0t",
+      "parentProp": "children",
+      "parentIndex": "a6"
+    },
+    "yv630a2": {
+      "name": "text5",
+      "props": {
+        "value": {
+          "type": "jsExpression",
+          "value": "edited.data\n"
+        }
+      },
+      "attributes": {
+        "component": {
+          "type": "const",
+          "value": "Text"
+        }
+      },
+      "layout": {},
+      "id": "yv630a2",
+      "type": "element",
+      "parentId": "ib830c5",
+      "parentProp": "children",
+      "parentIndex": "a0"
     }
-  }
+  },
+  "version": 5
 }

test/integration/function-basic/index.spec.ts

@@ -1,8 +1,9 @@
 import * as path from 'path';
-import { test } from '../../playwright/test';
+import { test, expect } from '../../playwright/test';
 import { ToolpadRuntime } from '../../models/ToolpadRuntime';
 import { readJsonFile } from '../../utils/fs';
 import generateId from '../../utils/generateId';
+import { ToolpadEditor } from '../../models/ToolpadEditor';
 
 test.use({
   ignoreConsoleErrors: [
@@ -31,3 +32,33 @@ test('functions basics', async ({ page, api }) => {
   await page.locator('text="echo, parameter: bound foo parameter"').waitFor({ state: 'visible' });
   await page.locator('text="echo, secret: Some bar secret"').waitFor({ state: 'visible' });
 });
+
+test('function editor save shortcut', async ({ page, api, browserName }) => {
+  const dom = await readJsonFile(path.resolve(__dirname, './functionDom.json'));
+
+  const app = await api.mutation.createApp(`App ${generateId()}`, {
+    from: { kind: 'dom', dom },
+  });
+
+  const editorModel = new ToolpadEditor(page, browserName);
+  await editorModel.goto(app.id);
+
+  await expect(editorModel.appCanvas.getByText('edited hello')).toBeVisible();
+
+  await editorModel.componentEditor.getByRole('button', { name: 'edited' }).click();
+  const queryEditor = page.getByRole('dialog', { name: 'edited' });
+  const savebutton = queryEditor.getByRole('button', { name: 'save' });
+  await expect(savebutton).toBeDisabled();
+
+  await page.getByTestId('function editor').click();
+  await page.keyboard.press('Control+A');
+  await page.keyboard.press('Backspace');
+  await page.keyboard.type('export default () => "edited goodbye!!!"');
+  await expect(savebutton).not.toBeDisabled();
+  await page.keyboard.press('Control+S');
+  await expect(savebutton).toBeDisabled();
+
+  await queryEditor.getByRole('button', { name: 'cancel' }).click();
+
+  await expect(editorModel.appCanvas.getByText('edited goodbye!!!')).toBeVisible();
+});