Merge pull request #4066 from utkarshcmu/user-removal

Added Confirmation modal for user deletion

public/app/core/routes/routes.ts

@@ -71,6 +71,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
   .when('/org/users', {
     templateUrl: 'public/app/features/org/partials/orgUsers.html',
     controller : 'OrgUsersCtrl',
+    controllerAs: 'ctrl',
     resolve: loadOrgBundle,
   })
   .when('/org/apikeys', {

public/app/features/org/all.js

@@ -1,5 +1,5 @@
 define([
-  './orgUsersCtrl',
+  './org_users_ctrl',
   './newOrgCtrl',
   './userInviteCtrl',
   './orgApiKeysCtrl',

public/app/features/org/orgUsersCtrl.js

@@ -1,66 +0,0 @@
-define([
-  'angular',
-],
-function (angular) {
-  'use strict';
-
-  var module = angular.module('grafana.controllers');
-
-  module.controller('OrgUsersCtrl', function($scope, $http, backendSrv) {
-
-    $scope.user = {
-      loginOrEmail: '',
-      role: 'Viewer',
-    };
-
-    $scope.users = [];
-    $scope.pendingInvites = [];
-
-    $scope.init = function() {
-      $scope.get();
-      $scope.editor = { index: 0 };
-    };
-
-    $scope.get = function() {
-      backendSrv.get('/api/org/users').then(function(users) {
-        $scope.users = users;
-      });
-      backendSrv.get('/api/org/invites').then(function(pendingInvites) {
-        $scope.pendingInvites = pendingInvites;
-      });
-    };
-
-    $scope.updateOrgUser = function(user) {
-      backendSrv.patch('/api/org/users/' + user.userId, user);
-    };
-
-    $scope.removeUser = function(user) {
-      backendSrv.delete('/api/org/users/' + user.userId).then($scope.get);
-    };
-
-    $scope.revokeInvite = function(invite, evt) {
-      evt.stopPropagation();
-      backendSrv.patch('/api/org/invites/' + invite.code + '/revoke').then($scope.get);
-    };
-
-    $scope.copyInviteToClipboard = function(evt) {
-      evt.stopPropagation();
-    };
-
-    $scope.openInviteModal = function() {
-      var modalScope = $scope.$new();
-      modalScope.invitesSent = function() {
-        $scope.get();
-      };
-
-      $scope.appEvent('show-modal', {
-        src: 'public/app/features/org/partials/invite.html',
-        modalClass: 'modal-no-header invite-modal',
-        scope: modalScope
-      });
-    };
-
-    $scope.init();
-
-  });
-});

public/app/features/org/org_users_ctrl.ts

@@ -0,0 +1,85 @@
+///<reference path="../../headers/common.d.ts" />
+
+import angular from 'angular';
+import _ from 'lodash';
+import coreModule from '../../core/core_module';
+
+export class OrgUsersCtrl {
+
+  user: any;
+  users: any;
+  pendingInvites: any;
+  editor: any;
+
+  /** @ngInject */
+  constructor(private $scope, private $http, private backendSrv) {
+    this.user = {
+      loginOrEmail: '',
+      role: 'Viewer',
+    };
+    this.get();
+    this.editor = { index: 0 };
+  }
+
+  get() {
+    this.backendSrv.get('/api/org/users')
+      .then((users) => {
+        this.users = users;
+      });
+    this.backendSrv.get('/api/org/invites')
+      .then((pendingInvites) => {
+        this.pendingInvites = pendingInvites;
+      });
+  }
+
+  updateOrgUser(user) {
+    this.backendSrv.patch('/api/org/users/' + user.userId, user);
+  }
+
+  removeUser(user) {
+    this.$scope.appEvent('confirm-modal', {
+      title: 'Confirm delete user',
+      text: 'Are you sure you want to delete user ' + user.login + '?',
+      yesText: "Delete",
+      icon: "fa-warning",
+      onConfirm: () => {
+        this.removeUserConfirmed(user);
+      }
+    });
+  }
+
+  removeUserConfirmed(user) {
+    this.backendSrv.delete('/api/org/users/' + user.userId)
+      .then(() => {
+        this.get();
+      });
+  }
+
+  revokeInvite(invite, evt) {
+    evt.stopPropagation();
+    this.backendSrv.patch('/api/org/invites/' + invite.code + '/revoke')
+      .then(() => {
+        this.get();
+      });
+  }
+
+  copyInviteToClipboard(evt) {
+    evt.stopPropagation();
+  }
+
+  openInviteModal() {
+    var modalScope = this.$scope.$new();
+    modalScope.invitesSent = function() {
+      this.get();
+    };
+
+    this.$scope.appEvent('show-modal', {
+      src: 'public/app/features/org/partials/invite.html',
+      modalClass: 'modal-no-header invite-modal',
+      scope: modalScope
+    });
+  }
+
+}
+
+coreModule.controller('OrgUsersCtrl', OrgUsersCtrl);

public/app/features/org/partials/orgUsers.html

@@ -7,7 +7,7 @@
 <div class="page-container">
 	<div class="page-wide">
 
-		<button class="btn btn-inverse pull-right" ng-click="openInviteModal()">
+		<button class="btn btn-inverse pull-right" ng-click="ctrl.openInviteModal()">
 			<i class="fa fa-plus"></i>
 			Add or Invite
 		</button>
@@ -16,7 +16,7 @@
 		<br>
 
 		<tabset>
-			<tab heading="Users ({{users.length}})">
+			<tab heading="Users ({{ctrl.users.length}})">
 				<table class="filter-table form-inline">
 					<thead>
 						<tr>
@@ -26,22 +26,22 @@
 							<th style="width: 34px;"></th>
 						</tr>
 					</thead>
-					<tr ng-repeat="user in users">
+					<tr ng-repeat="user in ctrl.users">
 						<td>{{user.login}}</td>
 						<td><span class="ellipsis">{{user.email}}</span></td>
 						<td>
-							<select type="text" ng-model="user.role" class="input-medium" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="updateOrgUser(user)">
+							<select type="text" ng-model="user.role" class="input-medium" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="ctrl.updateOrgUser(user)">
 							</select>
 						</td>
 						<td>
-							<a ng-click="removeUser(user)" class="btn btn-danger btn-mini">
+							<a ng-click="ctrl.removeUser(user)" class="btn btn-danger btn-mini">
 								<i class="fa fa-remove"></i>
 							</a>
 						</td>
 					</tr>
 				</table>
 			</tab>
-			<tab heading="Pending Invitations ({{pendingInvites.length}})">
+			<tab heading="Pending Invitations ({{ctrl.pendingInvites.length}})">
 				<table class="filter-table form-inline">
 					<thead>
 						<tr>
@@ -50,12 +50,12 @@
 							<th></th>
 						</tr>
 					</thead>
-					<tbody ng-repeat="invite in pendingInvites">
+					<tbody ng-repeat="invite in ctrl.pendingInvites">
 						<tr ng-click="invite.expanded = !invite.expanded" ng-class="{'expanded': invite.expanded}">
 							<td>{{invite.email}}</td>
 							<td>{{invite.name}}</td>
 							<td class="text-right">
-								<button class="btn btn-inverse btn-mini " data-clipboard-text="{{invite.url}}" clipboard-button ng-click="copyInviteToClipboard($event)">
+								<button class="btn btn-inverse btn-mini " data-clipboard-text="{{invite.url}}" clipboard-button ng-click="ctrl.copyInviteToClipboard($event)">
 									<i class="fa fa-clipboard"></i> Copy Invite
 								</button>
 								&nbsp;
@@ -70,7 +70,7 @@
 							<td colspan="3">
 								<a href="{{invite.url}}">{{invite.url}}</a><br><br>
 								&nbsp;
-								<button class="btn btn-inverse btn-mini" ng-click="revokeInvite(invite, $event)">
+								<button class="btn btn-inverse btn-mini" ng-click="ctrl.revokeInvite(invite, $event)">
 									<i class="fa fa-remove" style="color: red"></i> Revoke invite
 								</button>
 								<span style="padding-left: 15px">