Explore: fix undo in query editor (#24797)

* Explore: fix undo in query editor

* Add e2e test for regression

e2e/suite1/specs/query-editor.spec.ts

+import { e2e } from '@grafana/e2e';
+
+e2e.scenario({
+  describeName: 'Query editor',
+  itName: 'Undo should work in query editor for prometheus.',
+  addScenarioDataSource: false,
+  addScenarioDashBoard: false,
+  skipScenario: false,
+  scenario: () => {
+    e2e.pages.Explore.visit();
+    e2e.components.DataSourcePicker.container()
+      .should('be.visible')
+      .within(() => {
+        e2e.components.Select.input()
+          .should('be.visible')
+          .click();
+
+        cy.contains('gdev-prometheus')
+          .scrollIntoView()
+          .should('be.visible')
+          .click();
+      });
+    const queryText = 'http_requests_total';
+
+    e2e.components.QueryField.container()
+      .should('be.visible')
+      .type(queryText)
+      .type('{backspace}');
+
+    cy.contains(queryText.slice(0, -1)).should('be.visible');
+
+    e2e.components.QueryField.container().type('{ctrl}z');
+
+    cy.contains(queryText).should('be.visible');
+  },
+});

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

@@ -125,7 +125,11 @@ export const Components = {
   FolderPicker: {
   FolderPicker: {
     container: 'Folder picker select container',
     container: 'Folder picker select container',
   },
   },
+  DataSourcePicker: {
+    container: 'Data source picker select container',
+  },
   TimeZonePicker: {
   TimeZonePicker: {
     container: 'Time zone picker select container',
     container: 'Time zone picker select container',
   },
   },
+  QueryField: { container: 'Query field' },
 };
 };

packages/grafana-ui/src/components/QueryField/QueryField.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../slate-plugins';
 } from '../../slate-plugins';
 
 
 import { makeValue, SCHEMA, CompletionItemGroup, TypeaheadOutput, TypeaheadInput, SuggestionsState } from '../..';
 import { makeValue, SCHEMA, CompletionItemGroup, TypeaheadOutput, TypeaheadInput, SuggestionsState } from '../..';
+import { selectors } from '@grafana/e2e-selectors';
 
 
 export interface QueryFieldProps {
 export interface QueryFieldProps {
   additionalPlugins?: Plugin[];
   additionalPlugins?: Plugin[];
@@ -197,7 +198,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
 
 
     return (
     return (
       <div className={wrapperClassName}>
       <div className={wrapperClassName}>
-        <div className="slate-query-field">
+        <div className="slate-query-field" aria-label={selectors.components.QueryField.container}>
           <Editor
           <Editor
             ref={editor => (this.editor = editor!)}
             ref={editor => (this.editor = editor!)}
             schema={SCHEMA}
             schema={SCHEMA}

packages/grafana-ui/src/slate-plugins/slate-prism/index.ts

@@ -43,8 +43,8 @@ export function SlatePrism(optsParam: OptionsFormat = {}): Plugin {
       const tokens = Prism.tokenize(blockText, grammar);
       const tokens = Prism.tokenize(blockText, grammar);
       const flattened = flattenTokens(tokens);
       const flattened = flattenTokens(tokens);
 
 
-      // @ts-ignore
-      editor.setData({ tokens: flattened });
+      const newData = editor.value.data.set('tokens', flattened);
+      editor.setData(newData);
       return decorateNode(opts, tokens, block);
       return decorateNode(opts, tokens, block);
     },
     },
 
 

public/app/core/components/Select/DataSourcePicker.tsx

@@ -4,6 +4,7 @@ import React, { PureComponent } from 'react';
 // Components
 // Components
 import { Select } from '@grafana/ui';
 import { Select } from '@grafana/ui';
 import { SelectableValue, DataSourceSelectItem } from '@grafana/data';
 import { SelectableValue, DataSourceSelectItem } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 
 
 export interface Props {
 export interface Props {
   onChange: (ds: DataSourceSelectItem) => void;
   onChange: (ds: DataSourceSelectItem) => void;
@@ -67,6 +68,7 @@ export class DataSourcePicker extends PureComponent<Props> {
     };
     };
 
 
     return (
     return (
+      <div aria-label={selectors.components.DataSourcePicker.container}>
         <Select
         <Select
           className="ds-picker select-container"
           className="ds-picker select-container"
           isMulti={false}
           isMulti={false}
@@ -84,6 +86,7 @@ export class DataSourcePicker extends PureComponent<Props> {
           value={value}
           value={value}
           invalid={invalid}
           invalid={invalid}
         />
         />
+      </div>
     );
     );
   }
   }
 }
 }