feat(query editors): remember collapsed state

public/app/core/services/context_srv.ts

@@ -25,7 +25,6 @@ export class ContextSrv {
   isGrafanaAdmin: any;
   isEditor: any;
   sidemenu: any;
-  lightTheme: any;
 
   constructor() {
     this.pinned = store.getBool('grafana.sidemenu.pinned', false);
@@ -41,7 +40,6 @@ export class ContextSrv {
     }
 
     this.version = config.buildInfo.version;
-    this.lightTheme = false;
     this.user = new User();
     this.isSignedIn = this.user.isSignedIn;
     this.isGrafanaAdmin = this.user.isGrafanaAdmin;

public/app/features/panel/partials/query_editor_row.html

@@ -23,7 +23,7 @@
 
 	<div class="gf-form">
 		<label class="gf-form-label">
-			<a class="pointer" tabindex="1" ng-click="ctrl.toggleCollapse()" disabled>
+			<a class="pointer" tabindex="1" ng-click="ctrl.toggleCollapse()" ng-class="{muted: !ctrl.canCollapse}">
 				<i class="fa fa-fw fa-chevron-down" ng-hide="ctrl.collapsed"></i>
 				<i class="fa fa-fw fa-chevron-left" ng-show="ctrl.collapsed"></i>
 			</a>

public/app/features/panel/query_editor_row.ts

@@ -20,11 +20,11 @@ export class QueryRowCtrl {
     this.target = this.queryCtrl.target;
     this.panel = this.panelCtrl.panel;
 
-    this.toggleCollapse();
+    this.toggleCollapse(true);
 
     if (this.target.isNew) {
       delete this.target.isNew;
-      this.toggleCollapse();
+      this.toggleCollapse(false);
     }
 
     if (!this.target.refId) {
@@ -47,12 +47,21 @@ export class QueryRowCtrl {
     });
   }
 
-  toggleCollapse() {
+  toggleCollapse(init) {
     if (!this.canCollapse) {
       return;
     }
 
+    if (!this.panelCtrl.__collapsedQueryCache) {
+      this.panelCtrl.__collapsedQueryCache = {};
+    }
+
+    if (init) {
+      this.collapsed = this.panelCtrl.__collapsedQueryCache[this.target.refId] !== false;
+    } else {
       this.collapsed = !this.collapsed;
+      this.panelCtrl.__collapsedQueryCache[this.target.refId] = this.collapsed;
+    }
 
     try {
       this.collapsedText = this.queryCtrl.getCollapsedText();

public/sass/_variables.dark.scss

@@ -76,7 +76,7 @@ $external-link-color:     $blue;
 // -------------------------
 $headings-color:       darken($white,11%);
 $abbr-border-color: 	 $gray-3 !default;
-$text-muted: 			     darken($link-color,30%);
+$text-muted: 			     $text-color-weak;
 
 $blockquote-small-color:  $gray-3 !default;
 $blockquote-border-color: $gray-4 !default;

public/sass/_variables.light.scss

@@ -82,7 +82,7 @@ $external-link-color:    $blue;
 // -------------------------
 $headings-color:       $text-color;
 $abbr-border-color: 	 $gray-2 !default;
-$text-muted: 			     darken($link-color,30%);
+$text-muted: 			     $text-color-weak;
 
 $blockquote-small-color:  $gray-2 !default;
 $blockquote-border-color: $gray-3 !default;

public/sass/base/_type.scss

@@ -27,9 +27,9 @@ em      { font-style: italic; color: $headings-color; }
 cite    { font-style: normal; }
 
 // Utility classes
-.muted               { color: $gray-2; }
+.muted               { color: $text-muted; }
 a.muted:hover,
-a.muted:focus        { color: darken($gray-2, 10%); }
+a.muted:focus        { color: darken($text-muted, 10%); }
 
 .text-warning        { color: $state-warning-text; }
 a.text-warning:hover,

public/sass/components/_gf-form.scss

@@ -62,7 +62,7 @@ $gf-form-margin: 0.25rem;
 
   &--grow {
     flex-grow: 1;
-    min-height: 2.65rem;
+    min-height: 2.70rem;
   }
 }