From 25d42dbedb699f9e14c68b0d62516658e6f20f0c Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Mon, 17 May 2021 13:40:08 +0200
Subject: [PATCH] QueryField: Remove carriage return character from pasted text
 (#34076)

* Remove carriage returns

* Clean up
---
 .../src/components/QueryField/QueryField.test.tsx     | 11 +++++++++++
 .../src/components/QueryField/QueryField.tsx          | 10 ++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx
index 2136dbe0419..c3c35ef6b99 100644
--- a/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx
+++ b/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx
@@ -30,6 +30,17 @@ describe('<QueryField />', () => {
     expect(onRun.mock.calls.length).toBe(1);
   });
 
+  it('should run onChange with clean text', () => {
+    const onChange = jest.fn();
+    const wrapper = shallow(
+      <QueryField query={`my\r clean query`} onTypeahead={jest.fn()} onChange={onChange} portalOrigin="mock-origin" />
+    );
+    const field = wrapper.instance() as QueryField;
+    field.runOnChange();
+    expect(onChange.mock.calls.length).toBe(1);
+    expect(onChange.mock.calls[0][0]).toBe('my clean query');
+  });
+
   it('should run custom on blur, but not necessarily execute query', () => {
     const onBlur = jest.fn();
     const onRun = jest.fn();
diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.tsx
index 7f0ea9e2f6f..2aa7fbc9548 100644
--- a/packages/grafana-ui/src/components/QueryField/QueryField.tsx
+++ b/packages/grafana-ui/src/components/QueryField/QueryField.tsx
@@ -148,9 +148,9 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
 
   runOnChange = () => {
     const { onChange } = this.props;
-
+    const value = Plain.serialize(this.state.value);
     if (onChange) {
-      onChange(Plain.serialize(this.state.value));
+      onChange(this.cleanText(value));
     }
   };
 
@@ -190,6 +190,12 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
     return next();
   };
 
+  cleanText(text: string) {
+    // RegExp with invisible characters we want to remove - currently only carriage return (newlines are visible)
+    const newText = text.trim().replace(/[\r]/g, '');
+    return newText;
+  }
+
   render() {
     const { disabled } = this.props;
     const wrapperClassName = classnames('slate-query-field__wrapper', {