feat: Copy to clipboard now works in query troubleshooter

public/app/core/directives/misc.js

@@ -20,9 +20,17 @@ function (angular, require, coreModule, kbn) {
   });
 
   coreModule.default.directive('clipboardButton', function() {
-    return function(scope, elem) {
+    return {
+      scope: {
+        getText: '&clipboardButton'
+      },
+      link: function(scope, elem) {
         require(['vendor/clipboard/dist/clipboard'], function(Clipboard) {
-        scope.clipboard = new Clipboard(elem[0]);
+          scope.clipboard = new Clipboard(elem[0], {
+            text: function() {
+              return scope.getText();
+            }
+          });
         });
 
         scope.$on('$destroy', function() {
@@ -30,6 +38,7 @@ function (angular, require, coreModule, kbn) {
             scope.clipboard.destroy();
           }
         });
+      }
     };
   });
 

public/app/features/dashboard/partials/shareModal.html

@@ -86,7 +86,7 @@
 							<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input>
 						</div>
 						<div class="gf-form">
-							<button class="btn btn-inverse" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
+							<button class="btn btn-inverse" clipboard-button="getShareUrl()"><i class="fa fa-clipboard"></i> Copy</button>
 						</div>
 					</div>
 				</div>
@@ -143,7 +143,7 @@
 								{{snapshotUrl}}
 							</a>
 							<br>
-							<button class="btn btn-inverse" data-clipboard-text="{{snapshotUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy Link</button>
+							<button class="btn btn-inverse" clipboard-button="getSnapshotUrl()"><i class="fa fa-clipboard"></i> Copy Link</button>
 						</div>
 					</div>
 				</div>

public/app/features/dashboard/shareModalCtrl.js

@@ -88,6 +88,10 @@ function (angular, _, $, moment, config) {
       $scope.imageUrl += '&tz=UTC' + encodeURIComponent(moment().format("Z"));
     };
 
+    $scope.getShareUrl = function() {
+      return $scope.shareUrl;
+    };
+
   });
 
 });

public/app/features/dashboard/shareSnapshotCtrl.js

@@ -96,6 +96,10 @@ function (angular, _) {
       });
     };
 
+    $scope.getSnapshotUrl = function() {
+      return $scope.snapshotUrl;
+    };
+
     $scope.scrubDashboard = function(dash) {
       // change title
       dash.title = $scope.snapshot.name;

public/app/features/panel/query_troubleshooter.ts

@@ -14,7 +14,7 @@ const template = `
     <a class="pointer" ng-click="ctrl.toggleExpand()" ng-show="ctrl.allNodesExpanded">
       <i class="fa fa-expand"></i> Collapse All
     </a>
-    <a class="pointer" data-clipboard-text="adasda" clipboard-button><i class="fa fa-clipboard"></i> Copy to Clipboard</a>
+    <a class="pointer" clipboard-button="ctrl.getClipboardText()"><i class="fa fa-clipboard"></i> Copy to Clipboard</a>
   </collapse-box-actions>
   <collapse-box-body>
     <div class="query-troubleshooter-json"></div>
@@ -62,6 +62,12 @@ export class QueryTroubleshooterCtrl {
     }
   }
 
+  getClipboardText() {
+    if (this.jsonExplorer) {
+      return JSON.stringify(this.jsonExplorer.json, null, 2);
+    }
+  }
+
   onRequestResponse(data) {
     data = _.cloneDeep(data);