Explore: fix undo in query editor (#24797)

* Explore: fix undo in query editor

* Add e2e test for regression

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
-      editor.setData({ tokens: flattened });
+      const newData = editor.value.data.set('tokens', flattened);
+      editor.setData(newData);
       return decorateNode(opts, tokens, block);
     },