Chore: Wrap custom configuration in development environment check (#70731)

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

@@ -0,0 +1,41 @@
+define(['react', '@grafana/data'], function (React, grafanaData) {
+  const HelloWorld = () => {
+    const createIframe = () => {
+      // direct iframe creation
+      const iframe = document.createElement('iframe');
+      iframe.src = 'about:blank';
+      iframe.id = 'createElementIframe';
+      iframe.style.width = '10%';
+      iframe.style.height = '10%';
+      iframe.style.border = 'none';
+      document.body.appendChild(iframe);
+
+      // via innerHTML
+      const div = document.createElement('div');
+      document.body.appendChild(div);
+      div.innerHTML =
+        '<iframe src="about:blank" id="innerHTMLIframe" style="width: 10%; height: 10%; border: none;"></iframe>';
+
+      const adjacentIframe = `<iframe src="about:blank" id="adjacentIframe" width="10%" height="10%" frameBorder="0"></iframe>`;
+      document.querySelector('body').insertAdjacentHTML('beforeend', adjacentIframe);
+    };
+    const handleClick2 = () => {
+      console.log('hello world 2');
+    };
+    const handleClick3 = () => {
+      console.log('hello world 3');
+    };
+
+    return React.createElement(
+      'div',
+      { className: 'frontend-sandbox-test' },
+      React.createElement('button', { onClick: createIframe, 'data-testid': 'panel-button-1' }, 'Craete iframes'),
+      React.createElement('button', { onClick: handleClick2, 'data-testid': 'panel-button-2' }, 'Button 2'),
+      React.createElement('button', { onClick: handleClick3, 'data-testid': 'panel-button-3' }, 'Button 3')
+    );
+  };
+
+  const plugin = new grafanaData.PanelPlugin(HelloWorld);
+
+  return { plugin };
+});

e2e/custom-plugins/frontend-sandbox-panel-test/plugin.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://raw.githubusercontent.com/grafana/grafana/master/docs/sources/developers/plugins/plugin.schema.json",
+  "type": "panel",
+  "name": "Sandbox test plugin",
+  "id": "sandbox-test-panel",
+  "info": {
+    "keywords": ["panel"],
+    "description": "",
+    "author": {
+      "name": "Grafana"
+    },
+    "logos": {
+      "small": "img/logo.svg",
+      "large": "img/logo.svg"
+    },
+    "links": [],
+    "screenshots": [],
+    "version": "1.0.0",
+    "updated": "2023-06-27"
+  },
+  "dependencies": {
+    "grafanaDependency": ">=10.0",
+    "plugins": []
+  }
+}

e2e/plugins-sandbox-suite/panelSandbox.spec.ts

@@ -0,0 +1,27 @@
+import { e2e } from '@grafana/e2e';
+
+import panelSandboxDashboard from './panelSandboxDashboard.json';
+
+const DASHBOARD_ID = 'c46b2460-16b7-42a5-82d1-b07fbf431950';
+
+describe('Panel sandbox', () => {
+  beforeEach(() => e2e.flows.login(e2e.env('USERNAME'), e2e.env('PASSWORD'), true));
+
+  describe('Sandbox disabled', () => {
+    const queryParams = { '__feature.pluginsFrontendSandbox': false };
+
+    it('Add iframe to body', () => {
+      e2e.flows.importDashboard(panelSandboxDashboard, 1000, true);
+      e2e.flows.openDashboard({ uid: DASHBOARD_ID, queryParams });
+
+      cy.get('[data-testid="panel-button-1"]').click();
+
+      cy.get('#createElementIframe').should('exist');
+      cy.get('#innerHTMLIframe').should('exist');
+      cy.get('#adjacentIframe').should('exist');
+    });
+  });
+
+  afterEach(() => e2e.flows.revertAllChanges());
+  after(() => e2e().clearCookies());
+});

e2e/plugins-sandbox-suite/panelSandboxDashboard.json

@@ -0,0 +1,58 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": {
+          "type": "grafana",
+          "uid": "-- Grafana --"
+        },
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "fiscalYearStartMonth": 0,
+  "graphTooltip": 0,
+  "id": 118,
+  "links": [],
+  "liveNow": false,
+  "panels": [
+    {
+      "datasource": {
+        "type": "testdata",
+        "uid": "PD8C576611E62080A"
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 0
+      },
+      "id": 1,
+      "title": "Sandbox Panel test",
+      "type": "sandbox-test-panel"
+    }
+  ],
+  "refresh": "",
+  "schemaVersion": 38,
+  "style": "dark",
+  "tags": [],
+  "templating": {
+    "list": []
+  },
+  "time": {
+    "from": "now-6h",
+    "to": "now"
+  },
+  "timepicker": {},
+  "timezone": "",
+  "title": "Sandbox Panel Test",
+  "uid": "c46b2460-16b7-42a5-82d1-b07fbf431950",
+  "version": 1,
+  "weekStart": ""
+}

e2e/start-and-run-suite

@@ -16,7 +16,7 @@ if [ "$BASE_URL" != "" ]; then
     echo -e "BASE_URL set, skipping starting server"
 else
   # Start it in the background
-  ./scripts/grafana-server/start-server $LICENSE_PATH 2>&1 > scripts/grafana-server/server.log &
+  GF_PATHS_PLUGINS=../../../e2e/custom-plugins/ ./scripts/grafana-server/start-server $LICENSE_PATH 2>&1 > scripts/grafana-server/server.log &
   ./scripts/grafana-server/wait-for-grafana
 fi
 

packages/grafana-runtime/src/config.ts

@@ -194,7 +194,9 @@ export class GrafanaBootConfig implements GrafanaConfig {
       systemDateFormats.update(this.dateFormats);
     }
 
+    if (this.buildInfo.env === 'development') {
       overrideFeatureTogglesFromUrl(this);
+    }
 
     if (this.featureToggles.disableAngular) {
       this.angularSupportEnabled = false;