From 29afc2feb80fe00886f10f87f7c12f8e85d19bc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zolt=C3=A1n=20Bedi?= <zoltan.bedi@gmail.com>
Date: Tue, 19 May 2020 15:41:52 +0200
Subject: [PATCH] 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         | 36 ++++++++++++++++++
 .../src/selectors/components.ts               |  4 ++
 .../src/components/QueryField/QueryField.tsx  |  3 +-
 .../src/slate-plugins/slate-prism/index.ts    |  4 +-
 .../components/Select/DataSourcePicker.tsx    | 37 ++++++++++---------
 5 files changed, 64 insertions(+), 20 deletions(-)
 create mode 100644 e2e/suite1/specs/query-editor.spec.ts

diff --git a/e2e/suite1/specs/query-editor.spec.ts b/e2e/suite1/specs/query-editor.spec.ts
new file mode 100644
index 00000000000..e7d2cc72ca4
--- /dev/null
+++ b/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');
+  },
+});
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index 1cfcdf4b6e2..f7b8a93f442 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/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' },
 };
diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.tsx
index 221fba39ecf..86b546312db 100644
--- a/packages/grafana-ui/src/components/QueryField/QueryField.tsx
+++ b/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}
diff --git a/packages/grafana-ui/src/slate-plugins/slate-prism/index.ts b/packages/grafana-ui/src/slate-plugins/slate-prism/index.ts
index a5258aefefc..c54b1cefd70 100644
--- a/packages/grafana-ui/src/slate-plugins/slate-prism/index.ts
+++ b/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
-      editor.setData({ tokens: flattened });
+      const newData = editor.value.data.set('tokens', flattened);
+      editor.setData(newData);
       return decorateNode(opts, tokens, block);
     },
 
diff --git a/public/app/core/components/Select/DataSourcePicker.tsx b/public/app/core/components/Select/DataSourcePicker.tsx
index d54941e003b..98e465a8881 100644
--- a/public/app/core/components/Select/DataSourcePicker.tsx
+++ b/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
-        className="ds-picker select-container"
-        isMulti={false}
-        isClearable={false}
-        backspaceRemovesValue={false}
-        onChange={this.onChange}
-        options={options}
-        autoFocus={autoFocus}
-        onBlur={onBlur}
-        openMenuOnFocus={openMenuOnFocus}
-        maxMenuHeight={500}
-        menuPlacement="bottom"
-        placeholder={placeholder}
-        noOptionsMessage="No datasources found"
-        value={value}
-        invalid={invalid}
-      />
+      <div aria-label={selectors.components.DataSourcePicker.container}>
+        <Select
+          className="ds-picker select-container"
+          isMulti={false}
+          isClearable={false}
+          backspaceRemovesValue={false}
+          onChange={this.onChange}
+          options={options}
+          autoFocus={autoFocus}
+          onBlur={onBlur}
+          openMenuOnFocus={openMenuOnFocus}
+          maxMenuHeight={500}
+          menuPlacement="bottom"
+          placeholder={placeholder}
+          noOptionsMessage="No datasources found"
+          value={value}
+          invalid={invalid}
+        />
+      </div>
     );
   }
 }