Prometheus: Enable new visual query builder by default (#46634)

* Prometheus: Enable new query builder by default

* Updated e2e test

* Fixed e2e

conf/defaults.ini

@@ -1114,6 +1114,9 @@ license_path =
 # enable = feature1,feature2
 enable =
 
+# The new prometheus visual query builder 
+promQueryBuilder = true
+
 # feature1 = true
 # feature2 = false
 

e2e/various-suite/exemplars.spec.ts

@@ -49,6 +49,9 @@ describe('Exemplars', () => {
     e2e.components.DataSourcePicker.container().should('be.visible').click();
     e2e().contains(dataSourceName).scrollIntoView().should('be.visible').click();
 
+    // Switch to code editor
+    cy.contains('label', 'Code').click();
+
     // we need to wait for the query-field being lazy-loaded, in two steps:
     // 1. first we wait for the text 'Loading...' to appear
     // 1. then we wait for the text 'Loading...' to disappear

e2e/various-suite/query-editor.spec.ts

@@ -11,7 +11,9 @@ e2e.scenario({
     e2e.components.DataSourcePicker.container().should('be.visible').click();
 
     cy.contains('gdev-prometheus').scrollIntoView().should('be.visible').click();
-    const queryText = 'http_requests_total';
+    const queryText = `rate(http_requests_total{job="grafana"}[5m])`;
+
+    cy.contains('label', 'Code').click();
 
     // we need to wait for the query-field being lazy-loaded, in two steps:
     // it is a two-step process:
@@ -20,13 +22,18 @@ e2e.scenario({
     const monacoLoadingText = 'Loading...';
     e2e.components.QueryField.container().should('be.visible').should('have.text', monacoLoadingText);
     e2e.components.QueryField.container().should('be.visible').should('not.have.text', monacoLoadingText);
-
-    e2e.components.QueryField.container().type(queryText).type('{backspace}');
+    e2e.components.QueryField.container().type(queryText, { parseSpecialCharSequences: false }).type('{backspace}');
 
     cy.contains(queryText.slice(0, -1)).should('be.visible');
 
     e2e.components.QueryField.container().type(e2e.typings.undo());
 
     cy.contains(queryText).should('be.visible');
+
+    cy.get('body').click();
+
+    cy.contains('label', 'Builder').click();
+
+    cy.get('[data-testid="operations.0.wrapper"]').should('be.visible');
   },
 });

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -171,6 +171,7 @@ export const Components = {
   QueryEditorRow: {
     actionButton: (title: string) => `${title} query operation action`,
     title: (refId: string) => `Query editor row title ${refId}`,
+    container: (refId: string) => `Query editor row ${refId}`,
   },
   AlertTab: {
     content: 'Alert editor tab content',