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

@@ -0,0 +1,36 @@
+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: {
     container: 'Folder picker select container',
   },
+  DataSourcePicker: {
+    container: 'Data source picker select container',
+  },
   TimeZonePicker: {
     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';
 
 import { makeValue, SCHEMA, CompletionItemGroup, TypeaheadOutput, TypeaheadInput, SuggestionsState } from '../..';
+import { selectors } from '@grafana/e2e-selectors';
 
 export interface QueryFieldProps {
   additionalPlugins?: Plugin[];
@@ -197,7 +198,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
 
     return (
       <div className={wrapperClassName}>
-        <div className="slate-query-field">
+        <div className="slate-query-field" aria-label={selectors.components.QueryField.container}>
           <Editor
             ref={editor => (this.editor = editor!)}
             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 flattened = flattenTokens(tokens);
 
-      // @ts-ignore
+      const newData = editor.value.data.set('tokens', flattened);
-      editor.setData({ tokens: flattened });
+      editor.setData(newData);
       return decorateNode(opts, tokens, block);
     },
 

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

@@ -4,6 +4,7 @@ import React, { PureComponent } from 'react';
 // Components
 import { Select } from '@grafana/ui';
 import { SelectableValue, DataSourceSelectItem } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 
 export interface Props {
   onChange: (ds: DataSourceSelectItem) => void;
@@ -67,23 +68,25 @@ export class DataSourcePicker extends PureComponent<Props> {
     };
 
     return (
-      <Select
+      <div aria-label={selectors.components.DataSourcePicker.container}>
-        className="ds-picker select-container"
+        <Select
-        isMulti={false}
+          className="ds-picker select-container"
-        isClearable={false}
+          isMulti={false}
-        backspaceRemovesValue={false}
+          isClearable={false}
-        onChange={this.onChange}
+          backspaceRemovesValue={false}
-        options={options}
+          onChange={this.onChange}
-        autoFocus={autoFocus}
+          options={options}
-        onBlur={onBlur}
+          autoFocus={autoFocus}
-        openMenuOnFocus={openMenuOnFocus}
+          onBlur={onBlur}
-        maxMenuHeight={500}
+          openMenuOnFocus={openMenuOnFocus}
-        menuPlacement="bottom"
+          maxMenuHeight={500}
-        placeholder={placeholder}
+          menuPlacement="bottom"
-        noOptionsMessage="No datasources found"
+          placeholder={placeholder}
-        value={value}
+          noOptionsMessage="No datasources found"
-        invalid={invalid}
+          value={value}
-      />
+          invalid={invalid}
+        />
+      </div>
     );
   }
 }