dashboard_history: restored unsaved changes modal to simple cancel, discard, save

public/app/features/dashboard/all.js

@@ -13,6 +13,7 @@ define([
   './viewStateSrv',
   './time_srv',
   './unsavedChangesSrv',
+  './unsaved_changes_modal',
   './timepicker/timepicker',
   './graphiteImportCtrl',
   './impression_store',

public/app/features/dashboard/unsavedChangesSrv.js

@@ -134,34 +134,31 @@ function(angular, _) {
       return currentJson !== originalJson;
     };
 
-    p.open_modal = function() {
-      var tracker = this;
-      var dashboard = this.current;
-
-      var modalScope = this.scope.$new();
-      var clone = dashboard.getSaveModelClone();
+    p.discardChanges = function() {
+      this.original = null;
+      this.gotoNext();
+    };
 
-      modalScope.clone = clone;
-      modalScope.ignore = function() {
-        tracker.original = null;
-        tracker.goto_next();
-      };
+    p.open_modal = function() {
+      $rootScope.appEvent('show-modal', {
+        templateHtml: '<unsaved-changes-modal dismiss="dismiss()"></unsaved-changes-modal>',
+        modalClass: 'modal--narrow confirm-modal'
+      });
+    };
 
+    p.saveChanges = function() {
+      var self = this;
       var cancel = $rootScope.$on('dashboard-saved', function() {
         cancel();
         $timeout(function() {
-          tracker.goto_next();
+          self.gotoNext();
         });
       });
 
-      $rootScope.appEvent('show-modal', {
-        src: 'public/app/partials/unsaved-changes.html',
-        scope: modalScope,
-        modalClass: 'modal--narrow'
-      });
+      $rootScope.appEvent('save-dashboard');
     };
 
-    p.goto_next = function() {
+    p.gotoNext = function() {
       var baseLen = $location.absUrl().length - $location.url().length;
       var nextUrl = this.next.substring(baseLen);
       $location.url(nextUrl);
@@ -169,7 +166,8 @@ function(angular, _) {
 
     this.Tracker = Tracker;
     this.init = function(dashboard, scope) {
-      return new Tracker(dashboard, scope, 1000);
+      this.tracker = new Tracker(dashboard, scope, 1000);
+      return this.tracker;
     };
   });
 });

public/app/features/dashboard/unsaved_changes_modal.ts

+///<reference path="../../headers/common.d.ts" />
+
+import coreModule from 'app/core/core_module';
+
+const  template = `
+<div class="modal-body">
+  <div class="modal-header">
+    <h2 class="modal-header-title">
+      <i class="fa fa-exclamation"></i>
+      <span class="p-l-1">Unsaved changes</span>
+    </h2>
+
+    <a class="modal-header-close" ng-click="dismiss();">
+      <i class="fa fa-remove"></i>
+    </a>
+  </div>
+
+  <div class="modal-content text-center">
+
+    <div class="confirm-modal-text">
+      What do you want to do?
+    </div>
+
+    <div class="confirm-modal-buttons">
+      <button type="button" class="btn btn-inverse" ng-click="ctrl.dismiss()">Cancel</button>
+      <button type="button" class="btn btn-danger" ng-click="ctrl.discard()">Discard</button>
+      <button type="button" class="btn btn-success" ng-click="ctrl.save()">Save</button>
+    </div>
+  </div>
+</div>
+`;
+
+export class UnsavedChangesModalCtrl {
+  clone: any;
+  dismiss: () => void;
+
+  /** @ngInject */
+  constructor(private $rootScope, private unsavedChangesSrv) {
+  }
+
+  discard() {
+    this.dismiss();
+    this.unsavedChangesSrv.tracker.discardChanges();
+  }
+
+  save() {
+    this.dismiss();
+    this.unsavedChangesSrv.tracker.saveChanges();
+  }
+}
+
+export function unsavedChangesModalDirective() {
+  return {
+    restrict: 'E',
+    template: template,
+    controller: UnsavedChangesModalCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: {dismiss: "&"}
+  };
+}
+
+coreModule.directive('unsavedChangesModal', unsavedChangesModalDirective);

public/app/partials/unsaved-changes.html

-<div class="modal-body" ng-controller="SaveDashboardMessageCtrl" ng-init="init();">
-	<div class="modal-header">
-		<h2 class="modal-header-title">
-			<i class="fa fa-exclamation"></i>
-			<span class="p-l-1">Unsaved changes</span>
-		</h2>
-
-		<a class="modal-header-close" ng-click="dismiss();">
-			<i class="fa fa-remove"></i>
-		</a>
-	</div>
-
-	<form name="saveMessage" ng-submit="saveVersion(saveMessage.$valid)" class="modal-content" novalidate>
-		<h6 class="text-center">
-			You're leaving without saving your changes, are you sure you want to leave? To save, add a small note to describe the changes in this version.
-		</h6>
-		<div class="p-t-2">
-			<div class="gf-form">
-				<label class="gf-form-hint">
-					<input
-						type="text"
-						name="message"
-						class="gf-form-input"
-						placeholder="Updates to &hellip;"
-						give-focus="true"
-						ng-model="clone.message"
-						ng-model-options="{allowInvalid: true}"
-						ng-keydown="keyDown($event)"
-						ng-maxlength="clone.max"
-						autocomplete="off"
-						required />
-					<small class="gf-form-hint-text muted" ng-cloak>
-						<span ng-class="{'text-error': saveMessage.message.$invalid && saveMessage.message.$dirty }">
-							{{clone.message.length || 0}}
-						</span>
-						/ {{clone.max}} characters
-					</small>
-				</label>
-			</div>
-		</div>
-
-		<div class="gf-form-button-row text-center">
-			<button type="submit" class="btn btn-success" ng-disabled="saveMessage.$invalid">
-				Save changes
-			</button>
-			<button type="button" class="btn btn-danger" ng-click="ignore();dismiss()">
-				Discard changes and leave
-			</button>
-			<button class="btn btn-inverse" ng-click="dismiss();">Cancel</button>
-		</div>
-	</form>
-
-</div>
-