Templating: Made default template variable query editor field a text area with dynamic automatic height (#20288)

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
+        <textarea
-          type="text"
+          rows={this.getLineCount()}
           className="gf-form-input"
           value={this.state.value}
           onChange={this.onChange}