feat: query troubleshooter

public/sass/_grafana.scss

@@ -75,8 +75,8 @@
 @import "components/jsontree";
 @import "components/edit_sidemenu.scss";
 @import "components/row.scss";
-@import "components/response_viewer.scss";
 @import "components/json_explorer.scss";
+@import "components/collapse_box.scss";
 
 // PAGES
 @import "pages/login";

public/sass/components/_collapse_box.scss

@@ -0,0 +1,29 @@
+.collapse-box {
+  margin-bottom: $spacer;
+}
+
+.collapse-box__header {
+  display: flex;
+  flex-direction: row;
+  padding: $input-padding-y $input-padding-x;
+  margin-right: $gf-form-margin;
+  background-color: $input-bg;
+  font-size: $font-size-sm;
+  margin-right: $gf-form-margin;
+
+  border: $input-btn-border-width solid transparent;
+  @include border-radius($label-border-radius-sm);
+}
+
+.collapse-box__header-title {
+  flex-grow: 1;
+}
+
+.collapse-box__body {
+  padding: $input-padding-y*2 $input-padding-x;
+  background-color: $input-label-bg;
+  display: block;
+  margin-right: $gf-form-margin;
+  border: $input-btn-border-width solid transparent;
+  @include border-radius($label-border-radius-sm);
+}

public/sass/components/_json_explorer.scss

@@ -36,7 +36,7 @@
 
   .json-formatter-string {
     color: $string-color;
-    white-space: pre;
+    white-space: normal;
     word-wrap: break-word;
   }
   .json-formatter-number { color: $number-color; }

public/sass/components/_response_viewer.scss

@@ -1,6 +0,0 @@
-.response-viewer {
-  background: $card-background;
-  box-shadow: $card-shadow;
-  padding: 1rem;
-  border-radius: 4px;
-}