Sandbox: Add additional e2e tests for panel editor (#75447)

* Sandbox: Add e2e test to validate panel editors reaching out of their render space

* remove props

e2e/custom-plugins/frontend-sandbox-panel-test/module.js

@@ -4,6 +4,21 @@
  * This file doesn't require any compilation
  */
 define(['react', '@grafana/data'], function (React, grafanaData) {
+  // This would be a custom editor component
+  function Editor() {
+    const onChangeInternal = (event) => {
+      const outsideEl =
+        event.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
+          .parentElement.parentElement;
+      outsideEl.dataset.sandboxTest = 'panel-editor';
+    };
+    return React.createElement('input', {
+      type: 'text',
+      onChange: onChangeInternal,
+      'data-testid': 'panel-editor-custom-editor-input',
+    });
+  }
+
   const HelloWorld = () => {
     const createIframe = () => {
       // direct iframe creation
@@ -121,5 +136,15 @@ define(['react', '@grafana/data'], function (React, grafanaData) {
 
   const plugin = new grafanaData.PanelPlugin(HelloWorld);
 
+  plugin.setPanelOptions((builder) => {
+    builder.addCustomEditor({
+      id: 'buttons',
+      path: 'buttons',
+      name: 'Button Configuration',
+      defaultValue: [{ text: '', datasource: '', query: '' }],
+      editor: (props) => React.createElement(Editor, { onChange: props.onChange }),
+    });
+  });
+
   return { plugin };
 });

e2e/panels-suite/frontend-sandbox-panel.spec.ts

@@ -46,6 +46,19 @@ describe('Panel sandbox', () => {
 
       cy.get('[data-sandbox-test="true"]').should('exist');
     });
+
+    it('Reaches out of the panel editor', () => {
+      e2e.flows.openDashboard({
+        uid: DASHBOARD_ID,
+        queryParams: {
+          '__feature.pluginsFrontendSandbox': false,
+          editPanel: 1,
+        },
+      });
+
+      cy.get('[data-testid="panel-editor-custom-editor-input"]').type('x');
+      cy.get('[data-sandbox-test="panel-editor"]').should('exist');
+    });
   });
 
   describe('Sandbox enabled', () => {
@@ -64,6 +77,7 @@ describe('Panel sandbox', () => {
     it('Does not add iframes to body', () => {
       // this button adds 3 iframes to the body
       cy.get('[data-testid="button-create-iframes"]').click();
+      cy.wait(100); // small delay to prevent false positives from too fast tests
 
       const iframeIds = [
         'createElementIframe',
@@ -85,9 +99,23 @@ describe('Panel sandbox', () => {
     it('Does not reaches out of panel div', () => {
       // this button reaches out of the panel div and modifies the element dataset
       cy.get('[data-testid="button-reach-out"]').click();
-
+      cy.wait(100); // small delay to prevent false positives from too fast tests
       cy.get('[data-sandbox-test="true"]').should('not.exist');
     });
+
+    it('Does not Reaches out of the panel editor', () => {
+      e2e.flows.openDashboard({
+        uid: DASHBOARD_ID,
+        queryParams: {
+          '__feature.pluginsFrontendSandbox': false,
+          editPanel: 1,
+        },
+      });
+
+      cy.get('[data-testid="panel-editor-custom-editor-input"]').type('x');
+      cy.wait(100); // small delay to prevent false positives from too fast tests
+      cy.get('[data-sandbox-test="panel-editor"]').should('not.exist');
+    });
   });
 
   afterEach(() => {