feat(plugins): minor fixes to breaking out query editor row into reusable component

public/app/features/panel/query_editor_row.ts

@@ -11,7 +11,7 @@ function queryEditorRowDirective() {
     restrict: 'E',
     templateUrl: 'public/app/features/panel/partials/query_editor_row.html',
     transclude: true,
-    scope: { ctrl: "=" },
+    scope: {ctrl: "="},
   };
 }
 

public/app/plugins/datasource/graphite/partials/query.editor.html

@@ -1,19 +1,21 @@
-<query-editor-row ctrl="ctrl" controls="true">
+<query-editor-row ctrl="ctrl">
 
-	<span style="display: block; overflow: hidden;">
-		<input type="text" class="tight-form-clear-input" style="width: 100%;" ng-model="ctrl.target.target" give-focus="ctrl.target.textEditor" spellcheck='false' ng-model-onblur ng-change="ctrl.targetTextChanged()" ng-show="ctrl.target.textEditor"></input>
-	</span>
+	<li class="tight-form-flex-wrapper" ng-show="ctrl.target.textEditor">
+		<input type="text" class="tight-form-clear-input" style="width: 100%;" ng-model="ctrl.target.target" give-focus="ctrl.target.textEditor" spellcheck='false' ng-model-onblur ng-change="ctrl.targetTextChanged()"></input>
+	</li>
 
-	<ul class="tight-form-list" role="menu" ng-hide="ctrl.target.textEditor">
-		<li ng-repeat="segment in ctrl.segments" role="menuitem">
-			<metric-segment segment="segment" get-options="ctrl.getAltSegments($index)" on-change="ctrl.segmentValueChanged(segment, $index)"></metric-segment>
-		</li>
-		<li ng-repeat="func in ctrl.functions">
-			<span graphite-func-editor class="tight-form-item tight-form-func">
-			</span>
-		</li>
-		<li class="dropdown" graphite-add-func>
-		</li>
-	</ul>
+	<li ng-hide-start="ctrl.target.textEditor"></li>
+
+	<li ng-repeat="segment in ctrl.segments" role="menuitem">
+		<metric-segment segment="segment" get-options="ctrl.getAltSegments($index)" on-change="ctrl.segmentValueChanged(segment, $index)"></metric-segment>
+	</li>
+	<li ng-repeat="func in ctrl.functions">
+		<span graphite-func-editor class="tight-form-item tight-form-func">
+		</span>
+	</li>
+	<li class="dropdown" graphite-add-func>
+	</li>
+
+	<li ng-hide-end></li>
 
 </query-editor-row>

public/app/plugins/datasource/prometheus/partials/query.editor.html

@@ -1,5 +1,4 @@
-<query-editor-row ctrl="ctrl" controls="true">
-
+<query-editor-row ctrl="ctrl">
 	<li class="tight-form-item" style="width: 94px">
 		Query
 	</li>
@@ -25,7 +24,6 @@
 		placeholder="metric name"
 		data-min-length=0 data-items=100>
 	</li>
-
 </query-editor-row>
 
 <div class="tight-form">

public/less/tightform.less

@@ -62,6 +62,7 @@
 .tight-form-flex-wrapper {
   display: flex;
   flex-direction: row;
+  float: none !important;
 }
 
 .grafana-metric-options {