From eb3aa7b19324cb24af30994a8ad9d56cb2d0ecc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 8 May 2018 11:24:20 +0200
Subject: [PATCH] PR: ux changes to #11528

---
 .../app/features/dashboard/settings/settings.html  | 14 ++++++++++----
 public/app/features/dashboard/settings/settings.ts |  2 +-
 public/sass/components/_dashboard_settings.scss    |  7 +++++++
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html
index 3e9796239dc..46d84a7a2fd 100644
--- a/public/app/features/dashboard/settings/settings.html
+++ b/public/app/features/dashboard/settings/settings.html
@@ -88,15 +88,21 @@
 </div>
 
 <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'dashboard_json'" >
-	<h3 class="dashboard-settings__header">Dashboard JSON</h3>
+	<h3 class="dashboard-settings__header">JSON Model</h3>
+  <div class="dashboard-settings__subheader">
+    The JSON Model below is data structure that defines the dashboard. Including settings, panel settings & layout,
+    queries etc.
+  </div>
 
 	<div class="gf-form">
 		<code-editor content="ctrl.json" data-mode="json" data-max-lines=30 ></code-editor>
 	</div>
 
-	<button class="btn btn-success dashboard-settings__json-save-button" ng-click="ctrl.saveDashboardJson()" ng-show="ctrl.canSave">
-		<i class="fa fa-save"></i> Save JSON
-	</button>
+  <div class="gf-form-button-row">
+    <button class="btn btn-success" ng-click="ctrl.saveDashboardJson()" ng-show="ctrl.canSave">
+      <i class="fa fa-save"></i> Save Changes
+    </button>
+  </div>
 </div>
 
 <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'permissions'" >
diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts
index 0d24dc7c7cf..5acbbcf29c5 100755
--- a/public/app/features/dashboard/settings/settings.ts
+++ b/public/app/features/dashboard/settings/settings.ts
@@ -100,7 +100,7 @@ export class SettingsCtrl {
     }
 
     this.sections.push({
-      title: 'Dashboard JSON',
+      title: 'JSON Model',
       id: 'dashboard_json',
       icon: 'gicon gicon-json',
     });
diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss
index 49154b0b485..5e17e025196 100644
--- a/public/sass/components/_dashboard_settings.scss
+++ b/public/sass/components/_dashboard_settings.scss
@@ -53,6 +53,13 @@
   margin-bottom: $spacer*2;
 }
 
+.dashboard-settings__subheader {
+  color: $text-muted;
+  font-style: italic;
+  position: relative;
+  top: -1.5rem;
+}
+
 .dashboard-settings__nav-item {
   padding: 7px 12px;
   color: $text-color;