Update dependency @grafana/experimental to v2 (#93919)

* Update dependency @grafana/experimental to v2

* add data-testid to old save button so it works properly in e2e test

* fix azure monitor e2e tests

* use raw selectors

* remove .only

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

e2e/cloud-plugins-suite/azure-monitor.spec.ts

@@ -2,6 +2,8 @@ import { Interception } from 'cypress/types/net-stubbing';
 import { load } from 'js-yaml';
 import { v4 as uuidv4 } from 'uuid';
 
+import { selectors as rawSelectors } from '@grafana/e2e-selectors';
+
 import { selectors } from '../../public/app/plugins/datasource/azuremonitor/e2e/selectors';
 import {
   AzureDataSourceJsonData,
@@ -75,12 +77,13 @@ const addAzureMonitorVariable = (
   isFirst: boolean,
   options?: { subscription?: string; resourceGroup?: string; namespace?: string; resource?: string; region?: string }
 ) => {
-  e2e.components.PageToolbar.item('Dashboard settings').click();
+  e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
+  e2e.components.NavToolbar.editDashboard.settingsButton().should('be.visible').click();
   e2e.components.Tab.title('Variables').click();
   if (isFirst) {
     e2e.pages.Dashboard.Settings.Variables.List.addVariableCTAV2().click();
   } else {
-    e2e.pages.Dashboard.Settings.Variables.List.newButton().click();
+    cy.get(`[data-testid="${rawSelectors.pages.Dashboard.Settings.Variables.List.newButton}"]`).click();
   }
   e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2().clear().type(name);
   e2e.components.DataSourcePicker.inputV2().type(`${dataSourceName}{enter}`);
@@ -113,7 +116,8 @@ const addAzureMonitorVariable = (
       break;
   }
   e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
-  e2e.pages.Dashboard.Settings.Actions.close().click();
+  e2e.components.NavToolbar.editDashboard.backToDashboardButton().click();
+  e2e.components.NavToolbar.editDashboard.exitButton().click();
 };
 
 const storageAcctName = 'azmonteststorage';
@@ -189,7 +193,8 @@ describe('Azure monitor datasource', () => {
       },
       timeout: 10000,
     });
-    e2e.components.PanelEditor.applyButton().click();
+    e2e.components.NavToolbar.editDashboard.backToDashboardButton().click();
+    e2e.components.NavToolbar.editDashboard.exitButton().click();
     e2e.flows.addPanel({
       dataSourceName,
       visitDashboardAtStart: false,
@@ -209,7 +214,8 @@ describe('Azure monitor datasource', () => {
       },
       timeout: 10000,
     });
-    e2e.components.PanelEditor.applyButton().click();
+    e2e.components.NavToolbar.editDashboard.backToDashboardButton().click();
+    e2e.components.NavToolbar.editDashboard.exitButton().click();
     e2e.flows.addPanel({
       dataSourceName,
       visitDashboardAtStart: false,
@@ -228,7 +234,8 @@ describe('Azure monitor datasource', () => {
       },
       timeout: 10000,
     });
-    e2e.components.PanelEditor.applyButton().click();
+    e2e.components.NavToolbar.editDashboard.backToDashboardButton().click();
+    e2e.components.NavToolbar.editDashboard.exitButton().click();
     e2e.flows.addPanel({
       dataSourceName,
       visitDashboardAtStart: false,
@@ -275,25 +282,32 @@ describe('Azure monitor datasource', () => {
       namespace: '$namespace',
       region: '$region',
     });
-    e2e.pages.Dashboard.SubMenu.submenuItemLabels('subscription').click();
-    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('grafanalabs-datasources-dev').click();
-    e2e.pages.Dashboard.SubMenu.submenuItemLabels('resourceGroups').parent().find('button').click();
+    e2e.pages.Dashboard.SubMenu.submenuItemLabels('subscription')
+      .parent()
+      .within(() => {
+        cy.get('input').click();
+      });
+    e2e.components.Select.option().contains('grafanalabs-datasources-dev').click();
     e2e.pages.Dashboard.SubMenu.submenuItemLabels('resourceGroups')
       .parent()
-      .find('input')
-      .type('cloud-plugins-e2e-test-azmon{downArrow}{enter}');
-    e2e.pages.Dashboard.SubMenu.submenuItemLabels('namespaces').parent().find('button').click();
+      .within(() => {
+        cy.get('input').type('cloud-plugins-e2e-test-azmon{downArrow}{enter}');
+      });
     e2e.pages.Dashboard.SubMenu.submenuItemLabels('namespaces')
       .parent()
-      .find('input')
-      .type('microsoft.storage/storageaccounts{downArrow}{enter}');
-    e2e.pages.Dashboard.SubMenu.submenuItemLabels('region').parent().find('button').click();
-    e2e.pages.Dashboard.SubMenu.submenuItemLabels('region').parent().find('input').type('uk south{downArrow}{enter}');
-    e2e.pages.Dashboard.SubMenu.submenuItemLabels('resource').parent().find('button').click();
+      .within(() => {
+        cy.get('input').type('microsoft.storage/storageaccounts{downArrow}{enter}');
+      });
+    e2e.pages.Dashboard.SubMenu.submenuItemLabels('region')
+      .parent()
+      .within(() => {
+        cy.get('input').type('uk south{downArrow}{enter}');
+      });
     e2e.pages.Dashboard.SubMenu.submenuItemLabels('resource')
       .parent()
-      .find('input')
-      .type(`${storageAcctName}{downArrow}{enter}`);
+      .within(() => {
+        cy.get('input').type(`${storageAcctName}{downArrow}{enter}`);
+      });
     e2e.flows.addPanel({
       dataSourceName,
       visitDashboardAtStart: false,

package.json

@@ -256,7 +256,7 @@
     "@grafana/azure-sdk": "0.0.3",
     "@grafana/data": "workspace:*",
     "@grafana/e2e-selectors": "workspace:*",
-    "@grafana/experimental": "1.8.0",
+    "@grafana/experimental": "2.1.1",
     "@grafana/faro-core": "^1.3.6",
     "@grafana/faro-web-sdk": "^1.3.6",
     "@grafana/faro-web-tracing": "^1.8.2",

packages/grafana-o11y-ds-frontend/package.json

@@ -20,7 +20,7 @@
     "@emotion/css": "11.13.0",
     "@grafana/data": "11.3.0-pre",
     "@grafana/e2e-selectors": "11.3.0-pre",
-    "@grafana/experimental": "1.8.0",
+    "@grafana/experimental": "2.1.1",
     "@grafana/runtime": "11.3.0-pre",
     "@grafana/schema": "11.3.0-pre",
     "@grafana/ui": "11.3.0-pre",

packages/grafana-prometheus/package.json

@@ -39,7 +39,7 @@
     "@emotion/css": "11.13.0",
     "@floating-ui/react": "0.26.24",
     "@grafana/data": "11.3.0-pre",
-    "@grafana/experimental": "1.8.0",
+    "@grafana/experimental": "2.1.1",
     "@grafana/faro-web-sdk": "1.10.1",
     "@grafana/runtime": "11.3.0-pre",
     "@grafana/schema": "11.3.0-pre",

packages/grafana-sql/package.json

@@ -17,7 +17,7 @@
     "@emotion/css": "11.13.0",
     "@grafana/data": "11.3.0-pre",
     "@grafana/e2e-selectors": "11.3.0-pre",
-    "@grafana/experimental": "1.8.0",
+    "@grafana/experimental": "2.1.1",
     "@grafana/runtime": "11.3.0-pre",
     "@grafana/ui": "11.3.0-pre",
     "@react-awesome-query-builder/ui": "6.6.3",

public/app/plugins/datasource/azuremonitor/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@emotion/css": "11.13.0",
     "@grafana/data": "11.3.0-pre",
-    "@grafana/experimental": "1.8.0",
+    "@grafana/experimental": "2.1.1",
     "@grafana/runtime": "11.3.0-pre",
     "@grafana/schema": "11.3.0-pre",
     "@grafana/ui": "11.3.0-pre",

public/app/plugins/datasource/cloud-monitoring/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@emotion/css": "11.13.0",
     "@grafana/data": "11.3.0-pre",
-    "@grafana/experimental": "1.8.0",
+    "@grafana/experimental": "2.1.1",
     "@grafana/google-sdk": "0.1.2",
     "@grafana/runtime": "11.3.0-pre",
     "@grafana/schema": "11.3.0-pre",

public/app/plugins/datasource/grafana-postgresql-datasource/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@emotion/css": "11.13.0",
     "@grafana/data": "11.3.0-pre",
-    "@grafana/experimental": "1.8.0",
+    "@grafana/experimental": "2.1.1",
     "@grafana/runtime": "11.3.0-pre",
     "@grafana/sql": "11.3.0-pre",
     "@grafana/ui": "11.3.0-pre",

public/app/plugins/datasource/grafana-testdata-datasource/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@emotion/css": "11.13.0",
     "@grafana/data": "11.3.0-pre",
-    "@grafana/experimental": "1.8.0",
+    "@grafana/experimental": "2.1.1",
     "@grafana/runtime": "11.3.0-pre",
     "@grafana/schema": "11.3.0-pre",
     "@grafana/ui": "11.3.0-pre",

public/app/plugins/datasource/jaeger/package.json

@@ -7,7 +7,7 @@
     "@emotion/css": "11.13.0",
     "@grafana/data": "workspace:*",
     "@grafana/e2e-selectors": "workspace:*",
-    "@grafana/experimental": "1.8.0",
+    "@grafana/experimental": "2.1.1",
     "@grafana/o11y-ds-frontend": "workspace:*",
     "@grafana/runtime": "workspace:*",
     "@grafana/ui": "workspace:*",

public/app/plugins/datasource/mssql/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@emotion/css": "11.13.0",
     "@grafana/data": "11.3.0-pre",
-    "@grafana/experimental": "1.8.0",
+    "@grafana/experimental": "2.1.1",
     "@grafana/runtime": "11.3.0-pre",
     "@grafana/sql": "11.3.0-pre",
     "@grafana/ui": "11.3.0-pre",

public/app/plugins/datasource/mysql/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@emotion/css": "11.13.0",
     "@grafana/data": "11.3.0-pre",
-    "@grafana/experimental": "1.8.0",
+    "@grafana/experimental": "2.1.1",
     "@grafana/runtime": "11.3.0-pre",
     "@grafana/sql": "11.3.0-pre",
     "@grafana/ui": "11.3.0-pre",

public/app/plugins/datasource/tempo/package.json

@@ -7,7 +7,7 @@
     "@emotion/css": "11.13.0",
     "@grafana/data": "workspace:*",
     "@grafana/e2e-selectors": "workspace:*",
-    "@grafana/experimental": "1.8.0",
+    "@grafana/experimental": "2.1.1",
     "@grafana/lezer-logql": "0.2.6",
     "@grafana/lezer-traceql": "0.0.19",
     "@grafana/monaco-logql": "^0.0.7",

public/app/plugins/datasource/zipkin/package.json

@@ -7,7 +7,7 @@
     "@emotion/css": "11.13.0",
     "@grafana/data": "workspace:*",
     "@grafana/e2e-selectors": "workspace:*",
-    "@grafana/experimental": "1.8.0",
+    "@grafana/experimental": "2.1.1",
     "@grafana/o11y-ds-frontend": "workspace:*",
     "@grafana/runtime": "workspace:*",
     "@grafana/ui": "workspace:*",

yarn.lock

@@ -3142,7 +3142,7 @@ __metadata:
     "@emotion/css": "npm:11.13.0"
     "@grafana/data": "npm:11.3.0-pre"
     "@grafana/e2e-selectors": "npm:11.3.0-pre"
-    "@grafana/experimental": "npm:1.8.0"
+    "@grafana/experimental": "npm:2.1.1"
     "@grafana/plugin-configs": "npm:11.3.0-pre"
     "@grafana/runtime": "npm:11.3.0-pre"
     "@grafana/schema": "npm:11.3.0-pre"
@@ -3186,7 +3186,7 @@ __metadata:
     "@emotion/css": "npm:11.13.0"
     "@grafana/data": "npm:11.3.0-pre"
     "@grafana/e2e-selectors": "npm:11.3.0-pre"
-    "@grafana/experimental": "npm:1.8.0"
+    "@grafana/experimental": "npm:2.1.1"
     "@grafana/plugin-configs": "npm:11.3.0-pre"
     "@grafana/runtime": "npm:11.3.0-pre"
     "@grafana/sql": "npm:11.3.0-pre"
@@ -3258,7 +3258,7 @@ __metadata:
     "@emotion/css": "npm:11.13.0"
     "@grafana/data": "npm:11.3.0-pre"
     "@grafana/e2e-selectors": "npm:11.3.0-pre"
-    "@grafana/experimental": "npm:1.8.0"
+    "@grafana/experimental": "npm:2.1.1"
     "@grafana/plugin-configs": "npm:11.3.0-pre"
     "@grafana/runtime": "npm:11.3.0-pre"
     "@grafana/schema": "npm:11.3.0-pre"
@@ -3299,7 +3299,7 @@ __metadata:
     "@emotion/css": "npm:11.13.0"
     "@grafana/data": "workspace:*"
     "@grafana/e2e-selectors": "workspace:*"
-    "@grafana/experimental": "npm:1.8.0"
+    "@grafana/experimental": "npm:2.1.1"
     "@grafana/o11y-ds-frontend": "workspace:*"
     "@grafana/plugin-configs": "workspace:*"
     "@grafana/runtime": "workspace:*"
@@ -3341,7 +3341,7 @@ __metadata:
     "@emotion/css": "npm:11.13.0"
     "@grafana/data": "npm:11.3.0-pre"
     "@grafana/e2e-selectors": "npm:11.3.0-pre"
-    "@grafana/experimental": "npm:1.8.0"
+    "@grafana/experimental": "npm:2.1.1"
     "@grafana/plugin-configs": "npm:11.3.0-pre"
     "@grafana/runtime": "npm:11.3.0-pre"
     "@grafana/sql": "npm:11.3.0-pre"
@@ -3372,7 +3372,7 @@ __metadata:
     "@emotion/css": "npm:11.13.0"
     "@grafana/data": "npm:11.3.0-pre"
     "@grafana/e2e-selectors": "npm:11.3.0-pre"
-    "@grafana/experimental": "npm:1.8.0"
+    "@grafana/experimental": "npm:2.1.1"
     "@grafana/plugin-configs": "npm:11.3.0-pre"
     "@grafana/runtime": "npm:11.3.0-pre"
     "@grafana/sql": "npm:11.3.0-pre"
@@ -3435,7 +3435,7 @@ __metadata:
     "@emotion/css": "npm:11.13.0"
     "@grafana/data": "npm:11.3.0-pre"
     "@grafana/e2e-selectors": "npm:11.3.0-pre"
-    "@grafana/experimental": "npm:1.8.0"
+    "@grafana/experimental": "npm:2.1.1"
     "@grafana/google-sdk": "npm:0.1.2"
     "@grafana/plugin-configs": "npm:11.3.0-pre"
     "@grafana/runtime": "npm:11.3.0-pre"
@@ -3483,7 +3483,7 @@ __metadata:
     "@emotion/css": "npm:11.13.0"
     "@grafana/data": "workspace:*"
     "@grafana/e2e-selectors": "workspace:*"
-    "@grafana/experimental": "npm:1.8.0"
+    "@grafana/experimental": "npm:2.1.1"
     "@grafana/lezer-logql": "npm:0.2.6"
     "@grafana/lezer-traceql": "npm:0.0.19"
     "@grafana/monaco-logql": "npm:^0.0.7"
@@ -3543,7 +3543,7 @@ __metadata:
     "@emotion/css": "npm:11.13.0"
     "@grafana/data": "workspace:*"
     "@grafana/e2e-selectors": "workspace:*"
-    "@grafana/experimental": "npm:1.8.0"
+    "@grafana/experimental": "npm:2.1.1"
     "@grafana/o11y-ds-frontend": "workspace:*"
     "@grafana/plugin-configs": "workspace:*"
     "@grafana/runtime": "workspace:*"
@@ -3739,9 +3739,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@grafana/experimental@npm:1.8.0":
-  version: 1.8.0
-  resolution: "@grafana/experimental@npm:1.8.0"
+"@grafana/experimental@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@grafana/experimental@npm:2.1.1"
   dependencies:
     "@hello-pangea/dnd": "npm:^16.6.0"
     "@types/uuid": "npm:^8.3.3"
@@ -3753,15 +3753,15 @@ __metadata:
     uuid: "npm:^8.3.2"
   peerDependencies:
     "@emotion/css": 11.11.2
-    "@grafana/data": ^10.0.0
+    "@grafana/data": ^10.4.0
     "@grafana/e2e-selectors": ^10.0.0
-    "@grafana/runtime": ^10.0.0
-    "@grafana/ui": ^10.0.0
-    react: 17.0.2
-    react-dom: 17.0.2
-    react-select: ^5.2.1
-    rxjs: 7.8.0
-  checksum: 10/a58d66254e9220f27580fcf42f3a0507c4e48da0cc9a26bcf110c37f16bef282a5c53119afa6f5588712c38bdcf113dd98a01fcf275917288a52cd88fcaae317
+    "@grafana/runtime": ^10.4.0
+    "@grafana/ui": ^10.4.0
+    react: 18.2.0
+    react-dom: 18.2.0
+    react-select: 5.8.0
+    rxjs: ^7.8.1
+  checksum: 10/114ad749002dd8fa7f903b384351a0aac73c7d95bf4eba6a827fd9e47e2148c88f7eb7a70d9c140b17b3afbd7c28aacbd0f0e26b06b9851584721ce4a03a1060
   languageName: node
   linkType: hard
 
@@ -3900,7 +3900,7 @@ __metadata:
     "@emotion/css": "npm:11.13.0"
     "@grafana/data": "npm:11.3.0-pre"
     "@grafana/e2e-selectors": "npm:11.3.0-pre"
-    "@grafana/experimental": "npm:1.8.0"
+    "@grafana/experimental": "npm:2.1.1"
     "@grafana/runtime": "npm:11.3.0-pre"
     "@grafana/schema": "npm:11.3.0-pre"
     "@grafana/tsconfig": "npm:^2.0.0"
@@ -3971,7 +3971,7 @@ __metadata:
     "@floating-ui/react": "npm:0.26.24"
     "@grafana/data": "npm:11.3.0-pre"
     "@grafana/e2e-selectors": "npm:11.3.0-pre"
-    "@grafana/experimental": "npm:1.8.0"
+    "@grafana/experimental": "npm:2.1.1"
     "@grafana/faro-web-sdk": "npm:1.10.1"
     "@grafana/runtime": "npm:11.3.0-pre"
     "@grafana/schema": "npm:11.3.0-pre"
@@ -4198,7 +4198,7 @@ __metadata:
     "@emotion/css": "npm:11.13.0"
     "@grafana/data": "npm:11.3.0-pre"
     "@grafana/e2e-selectors": "npm:11.3.0-pre"
-    "@grafana/experimental": "npm:1.8.0"
+    "@grafana/experimental": "npm:2.1.1"
     "@grafana/runtime": "npm:11.3.0-pre"
     "@grafana/tsconfig": "npm:^2.0.0"
     "@grafana/ui": "npm:11.3.0-pre"
@@ -18934,7 +18934,7 @@ __metadata:
     "@grafana/e2e-selectors": "workspace:*"
     "@grafana/eslint-config": "npm:7.0.0"
     "@grafana/eslint-plugin": "link:./packages/grafana-eslint-rules"
-    "@grafana/experimental": "npm:1.8.0"
+    "@grafana/experimental": "npm:2.1.1"
     "@grafana/faro-core": "npm:^1.3.6"
     "@grafana/faro-web-sdk": "npm:^1.3.6"
     "@grafana/faro-web-tracing": "npm:^1.8.2"