From 39eb8f9eba7c2ed24ece39b659195fc2418d9f4b Mon Sep 17 00:00:00 2001
From: Marcus Efraimsson <marcus.efraimsson@gmail.com>
Date: Tue, 26 Dec 2017 13:52:19 +0100
Subject: [PATCH] Dashboard: View JSON improvements  (#10327)

* dashboard: enable copy to clipboard for view json and panel json

* dashboard: use code editor for view json under settings
---
 public/app/core/controllers/json_editor_ctrl.ts      | 3 +++
 public/app/core/directives/misc.ts                   | 5 +++++
 public/app/features/dashboard/export/export_modal.ts | 1 +
 public/app/features/dashboard/settings/settings.html | 2 +-
 public/app/features/panel/panel_ctrl.ts              | 1 +
 public/app/partials/edit_json.html                   | 3 +++
 6 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/public/app/core/controllers/json_editor_ctrl.ts b/public/app/core/controllers/json_editor_ctrl.ts
index 08491acc682..d369fe8b3c0 100644
--- a/public/app/core/controllers/json_editor_ctrl.ts
+++ b/public/app/core/controllers/json_editor_ctrl.ts
@@ -6,11 +6,14 @@ export class JsonEditorCtrl {
   constructor($scope) {
     $scope.json = angular.toJson($scope.object, true);
     $scope.canUpdate = $scope.updateHandler !== void 0 && $scope.contextSrv.isEditor;
+    $scope.canCopy = $scope.enableCopy;
 
     $scope.update = function() {
       var newObject = angular.fromJson($scope.json);
       $scope.updateHandler(newObject, $scope.object);
     };
+
+    $scope.getContentForClipboard = () => $scope.json;
   }
 }
 
diff --git a/public/app/core/directives/misc.ts b/public/app/core/directives/misc.ts
index 0d913c32349..299de05f112 100644
--- a/public/app/core/directives/misc.ts
+++ b/public/app/core/directives/misc.ts
@@ -2,6 +2,7 @@ import angular from 'angular';
 import Clipboard from 'clipboard';
 import coreModule from '../core_module';
 import kbn from 'app/core/utils/kbn';
+import { appEvents } from 'app/core/core';
 
 /** @ngInject */
 function tip($compile) {
@@ -32,6 +33,10 @@ function clipboardButton() {
         },
       });
 
+      scope.clipboard.on('success', () => {
+        appEvents.emit('alert-success', ['Content copied to clipboard']);
+      });
+
       scope.$on('$destroy', function() {
         if (scope.clipboard) {
           scope.clipboard.destroy();
diff --git a/public/app/features/dashboard/export/export_modal.ts b/public/app/features/dashboard/export/export_modal.ts
index 929071c23a2..2e61ce9f8a8 100644
--- a/public/app/features/dashboard/export/export_modal.ts
+++ b/public/app/features/dashboard/export/export_modal.ts
@@ -31,6 +31,7 @@ export class DashExportCtrl {
     var clone = this.dash;
     let editScope = this.$rootScope.$new();
     editScope.object = clone;
+    editScope.enableCopy = true;
 
     this.$rootScope.appEvent('show-modal', {
       src: 'public/app/partials/edit_json.html',
diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html
index 0411850c543..18dd055ef05 100644
--- a/public/app/features/dashboard/settings/settings.html
+++ b/public/app/features/dashboard/settings/settings.html
@@ -89,7 +89,7 @@
 	<h3 class="dashboard-settings__header">View JSON</h3>
 
 	<div class="gf-form">
-		<textarea class="gf-form-input" ng-model="ctrl.json" rows="30" spellcheck="false"></textarea>
+		<code-editor content="ctrl.json" data-mode="json" data-max-lines=30 ></code-editor>
 	</div>
 </div>
 
diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts
index 17eae2cbf19..d8757f49be6 100644
--- a/public/app/features/panel/panel_ctrl.ts
+++ b/public/app/features/panel/panel_ctrl.ts
@@ -272,6 +272,7 @@ export class PanelCtrl {
     let editScope = this.$scope.$root.$new();
     editScope.object = this.panel.getSaveModel();
     editScope.updateHandler = this.replacePanel.bind(this);
+    editScope.enableCopy = true;
 
     this.publishAppEvent('show-modal', {
       src: 'public/app/partials/edit_json.html',
diff --git a/public/app/partials/edit_json.html b/public/app/partials/edit_json.html
index b87bb0ce261..f3237193954 100644
--- a/public/app/partials/edit_json.html
+++ b/public/app/partials/edit_json.html
@@ -16,6 +16,9 @@
 
 		<div class="gf-form-button-row">
 			<button type="button" class="btn btn-success" ng-show="canUpdate" ng-click="update(); dismiss();">Update</button>
+			<button class="btn btn-secondary" ng-if="canCopy" clipboard-button="getContentForClipboard()">
+				<i class="fa fa-clipboard"></i>&nbsp;Copy to Clipboard
+			</button>
 		</div>
 	</div>
 </div>