Fix autocomplete after monaco-editor upgrade

packages/toolpad-app/src/components/MonacoEditor.tsx

@@ -370,7 +370,7 @@ export default React.forwardRef<MonacoEditorHandle, MonacoEditorProps>(function
  }
  }
  } else {
- const pathUri = monaco.Uri.parse(`./scripts/${nanoid(7)}${getExtension(language)}`);
+ const pathUri = monaco.Uri.parse(`/scripts/${nanoid(7)}${getExtension(language)}`);
  const model = monaco.editor.createModel(value || '', language, pathUri);
 
  instance = monaco.editor.create(rootRef.current, {

test/integration/editor/fixture/toolpad/pages/page1/page.yml

@@ -0,0 +1,17 @@
+apiVersion: v1
+kind: page
+spec:
+ id: y4d19z0
+ title: Page 1
+ content:
+ - component: PageRow
+ name: pageRow
+ children:
+ - component: TextField
+ name: textField1
+ props:
+ label: textField1
+ - component: TextField
+ name: textField2
+ props:
+ label: textField2

test/integration/editor/fixture/toolpad/pages/page2/page.yml

@@ -0,0 +1,19 @@
+apiVersion: v1
+kind: page
+spec:
+ id: K7SkzhT
+ title: page2
+ display: shell
+ content:
+ - component: PageRow
+ name: pageRow
+ children:
+ - component: TextField
+ name: textField
+ - component: PageRow
+ name: pageRow1
+ children:
+ - component: Text
+ name: text
+ props:
+ value: text-foo

test/integration/editor/index.spec.ts

@@ -90,3 +90,28 @@ test('can delete elements from page', async ({ page }) => {
 
  await expect(canvasInputLocator).toHaveCount(0);
 });
+
+test('code editor auto-complete', async ({ page }) => {
+ const editorModel = new ToolpadEditor(page);
+
+ await editorModel.goToPageById('K7SkzhT');
+
+ await editorModel.waitForOverlay();
+
+ const text = editorModel.appCanvas.getByText('text-foo');
+
+ await clickCenter(page, text);
+
+ const bindingButton = editorModel.componentEditor.getByLabel('Bind property "Value"');
+
+ await bindingButton.click();
+
+ const editor = page
+ .getByRole('dialog', { name: 'Bind property "Value"' })
+ .locator('.monaco-editor');
+
+ await editor.waitFor();
+
+ await page.keyboard.type('textF');
+ await expect(page.getByRole('option', { name: 'textField' })).toBeVisible();
+});

test/models/ToolpadEditor.ts

@@ -104,7 +104,10 @@ export class ToolpadEditor {
 
  async goToPage(name: string) {
  await this.explorer.getByText(name).click();
- this.page.waitForNavigation();
+ }
+
+ async goToPageById(id: string) {
+ await gotoIfNotCurrent(this.page, `/_toolpad/app/pages/${id}`);
  }
 
  async createComponent(name: string) {