From dd6f5efabe487e4a330f75a934973db29bf92bd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 11 Nov 2019 10:04:22 +0100
Subject: [PATCH] Templating: Made default template variable query editor field
 a text area with dynamic automatic height (#20288)

---
 .../templating/DefaultVariableQueryEditor.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/public/app/features/templating/DefaultVariableQueryEditor.tsx b/public/app/features/templating/DefaultVariableQueryEditor.tsx
index e361d76bcc9..90ad322d59e 100644
--- a/public/app/features/templating/DefaultVariableQueryEditor.tsx
+++ b/public/app/features/templating/DefaultVariableQueryEditor.tsx
@@ -1,5 +1,4 @@
 import React, { PureComponent } from 'react';
-import { Input } from '@grafana/ui';
 import { VariableQueryProps } from 'app/types/plugins';
 
 export default class DefaultVariableQueryEditor extends PureComponent<VariableQueryProps, any> {
@@ -8,20 +7,30 @@ export default class DefaultVariableQueryEditor extends PureComponent<VariableQu
     this.state = { value: props.query };
   }
 
-  onChange = (event: React.FormEvent<HTMLInputElement>) => {
+  onChange = (event: React.FormEvent<HTMLTextAreaElement>) => {
     this.setState({ value: event.currentTarget.value });
   };
 
-  onBlur = (event: React.FormEvent<HTMLInputElement>) => {
+  onBlur = (event: React.FormEvent<HTMLTextAreaElement>) => {
     this.props.onChange(event.currentTarget.value, event.currentTarget.value);
   };
 
+  getLineCount() {
+    const { value } = this.state;
+
+    if (typeof value === 'string') {
+      return value.split('\n').length;
+    }
+
+    return 1;
+  }
+
   render() {
     return (
       <div className="gf-form">
         <span className="gf-form-label width-10">Query</span>
-        <Input
-          type="text"
+        <textarea
+          rows={this.getLineCount()}
           className="gf-form-input"
           value={this.state.value}
           onChange={this.onChange}