WIP: edit user group page

public/app/core/routes/routes.ts

@@ -89,6 +89,12 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     controllerAs: 'ctrl',
     resolve: loadOrgBundle,
   })
+  .when('/org/user-groups/edit/:id', {
+    templateUrl: 'public/app/features/org/partials/edit_user_group.html',
+    controller : 'UserGroupDetailsCtrl',
+    controllerAs: 'ctrl',
+    resolve: loadOrgBundle,
+  })
   .when('/profile', {
     templateUrl: 'public/app/features/org/partials/profile.html',
     controller : 'ProfileCtrl',

public/app/features/org/all.js

@@ -9,4 +9,5 @@ define([
   './orgDetailsCtrl',
   './prefs_control',
   './user_groups_ctrl',
+  './user_group_details_ctrl',
 ], function () {});

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

+<div class="modal-body" ng-controller="UserGroupsCtrl">
+  <div class="modal-header">
+		<h2 class="modal-header-title">
+			Create User Group
+		</h2>
+		<a class="modal-header-close" ng-click="dismiss();">
+			<i class="fa fa-remove"></i>
+		</a>
+
+    <div class="modal-content">
+      <div class="modal-tagline p-b-2">
+        Create User Group
+      </div>
+      <form name="createUserGroupForm" class="gf-form-group">
+        <div class="gf-form-inline">
+          <div class="gf-form max-width-21">
+            <input type="text" class="gf-form-input" ng-model='ctrl.userGroupName' placeholder="Name"></input>
+          </div>
+          <div class="gf-form">
+            <button class="btn gf-form-btn btn-success" ng-click="ctrl.createUserGroup();dismiss();">Create</button>
+          </div>
+        </div>
+      </form>
+    </div>
+	</div>
+</div>

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

+<navbar icon="fa fa-fw fa-cogs" title="User Group" title-url="user-group">
+	<a href="org/user-groups" class="navbar-page-btn">
+		<i class="icon-gf icon-gf-users"></i>
+		User Groups
+	</a>
+</navbar>
+
+<div class="page-container">
+	<div class="page-header">
+		<h1>Edit User Group</h1>
+	</div>
+
+	<form name="userGroupDetailsForm" class="gf-form-group">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Name</span>
+			<input type="text" required ng-model="ctrl.userGroup.name" class="gf-form-input max-width-14" >
+		</div>
+
+		<div class="gf-form-button-row">
+			<button type="submit" class="btn btn-success" ng-click="ctrl.update()">Update</button>
+		</div>
+	</form>
+
+	<h3 class="page-heading">User Group Members</h3>
+
+  <form name="addMemberForm" class="gf-form-group">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Name</span>
+			<input type="text" bs-typeahead="ctrl.searchUsers" required ng-model="ctrl.user.name" class="gf-form-input max-width-14" >
+		</div>
+
+		<div class="gf-form-button-row">
+			<button type="submit" class="btn btn-success" ng-click="ctrl.addMember()">Add</button>
+		</div>
+	</form>
+
+	<table class="grafana-options-table">
+		<tr>
+			<th>Username</th>
+			<th>Email</th>
+			<th></th>
+		</tr>
+		<tr ng-repeat="userGroup in ctrl.userGroupMembers">
+			<td>{{userGroup.login}}</td>
+			<td>{{userGroup.email}}</td>
+			<td style="width: 1%">
+				<a ng-click="ctrl.removeUserGroupMember(userGroup)" class="btn btn-danger btn-mini">
+					<i class="fa fa-remove"></i>
+				</a>
+			</td>
+		</tr>
+	</table>
+</div>

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

@@ -6,17 +6,10 @@
 		<h1>User Groups</h1>
 
     <div class="page-header-tabs">
-      <form name="addTokenForm" class="gf-form-group">
-        <div class="gf-form-inline">
-          <div class="gf-form max-width-21">
-            <span class="gf-form-label">Create a User Group</span>
-            <input type="text" class="gf-form-input" ng-model='ctrl.userGroupName' placeholder="Name"></input>
-          </div>
-          <div class="gf-form">
-            <button class="btn gf-form-btn btn-success" ng-click="ctrl.createUserGroup()">Create</button>
-          </div>
-        </div>
-      </form>
+      <button class="btn btn-success" ng-click="ctrl.openModal()">
+				<i class="fa fa-plus"></i>
+        Create User Group
+			</button>
     </div>
   </div>
   <div class="search-field-wrapper pull-right width-18">

public/app/features/org/specs/user_group_details_ctrl_specs.ts

+import '../user_group_details_ctrl';
+import {describe, beforeEach, it, expect, sinon, angularMocks} from 'test/lib/common';
+import UserGroupDetailsCtrl from '../user_group_details_ctrl';
+
+describe('UserGroupDetailsCtrl', () => {
+var ctx: any = {};
+var backendSrv = {
+  searchUsers: sinon.stub().returns(Promise.resolve([])),
+  get: sinon.stub().returns(Promise.resolve([])),
+  post: sinon.stub().returns(Promise.resolve([]))
+};
+
+  beforeEach(angularMocks.module('grafana.core'));
+  beforeEach(angularMocks.module('grafana.controllers'));
+
+  beforeEach(angularMocks.inject(($rootScope, $controller, $q) => {
+    ctx.$q = $q;
+    ctx.scope = $rootScope.$new();
+    ctx.ctrl = $controller(UserGroupDetailsCtrl, {
+      $scope: ctx.scope,
+      backendSrv: backendSrv,
+      $routeParams: {id: 1}
+    });
+    ctx.ctrl.user = {name: 'login - user@email.com'};
+  }));
+
+  describe('when user is chosen to be added to user group', () => {
+    beforeEach(() => {
+      ctx.scope.addMemberForm = {$valid: true};
+      ctx.ctrl.usersSearchCache = [{id: 1, login: 'login'}, {id: 2, login: 'login2'}];
+      ctx.ctrl.addMember();
+    });
+
+    it('should parse the result and save to db', () => {
+      expect(backendSrv.post.getCall(0).args[0]).to.eql('/api/user-groups/1/members');
+    });
+
+    it('should refresh the list after saving.', () => {
+      expect(backendSrv.get.getCall(0).args[0]).to.eql('/api/user-groups/1');
+      expect(backendSrv.get.getCall(1).args[0]).to.eql('/api/user-groups/1/members');
+    });
+  });
+});

public/app/features/org/user_group_details_ctrl.ts

+///<reference path="../../headers/common.d.ts" />
+
+import coreModule from 'app/core/core_module';
+import _ from 'lodash';
+
+export default class UserGroupDetailsCtrl {
+  userGroup: any;
+  userGroupMembers = [];
+  user: any;
+  usersSearchCache = [];
+  searchUsers: any;
+
+  constructor(private $scope, private $http, private backendSrv, private $routeParams) {
+    this.get();
+    this.usersSearchCache = [];
+    this.searchUsers = (queryStr, callback) => {
+      if (this.usersSearchCache.length > 0) {
+        callback(_.map(this.usersSearchCache, (user) => { return user.login + ' - ' + user.email; }));
+        return;
+      }
+
+      this.backendSrv.get('/api/users/search?perpage=10&page=1&query=' + queryStr).then(result => {
+        this.usersSearchCache = result.users;
+        callback(_.map(result.users, (user) => { return user.login + ' - ' + user.email; }));
+      });
+    };
+  }
+
+  get() {
+    if (this.$routeParams && this.$routeParams.id) {
+      this.backendSrv.get(`/api/user-groups/${this.$routeParams.id}`)
+        .then(result => {
+          this.userGroup = result;
+        });
+      this.backendSrv.get(`/api/user-groups/${this.$routeParams.id}/members`)
+        .then(result => {
+          this.userGroupMembers = result;
+        });
+    }
+  }
+
+  removeUserGroupMember(userGroupMember) {
+    this.$scope.appEvent('confirm-modal', {
+      title: 'Remove Member',
+      text: 'Are you sure you want to remove ' + userGroupMember.name + ' from this group?',
+      yesText: "Remove",
+      icon: "fa-warning",
+      onConfirm: () => {
+        this.removeMemberConfirmed(userGroupMember);
+      }
+    });
+  }
+
+  removeMemberConfirmed(userGroupMember) {
+    this.backendSrv.delete(`/api/user-groups/${this.$routeParams.id}/members/${userGroupMember.userId}`)
+      .then(this.get.bind(this));
+  }
+
+  update() {
+    if (!this.$scope.userGroupDetailsForm.$valid) { return; }
+
+    this.backendSrv.put('/api/user-groups/' + this.userGroup.id, {name: this.userGroup.name});
+  }
+
+  addMember() {
+    if (!this.$scope.addMemberForm.$valid) { return; }
+
+    const login = this.user.name.split(' - ')[0];
+    const memberToAdd = _.find(this.usersSearchCache, ['login', login]);
+    this.backendSrv.post(`/api/user-groups/${this.$routeParams.id}/members`, {userId: memberToAdd.id}).then(() => {
+      this.user.name = '';
+      this.get();
+    });
+  }
+}
+
+coreModule.controller('UserGroupDetailsCtrl', UserGroupDetailsCtrl);
+

public/app/features/org/user_groups_ctrl.ts

@@ -13,7 +13,7 @@ export default class UserGroupsCtrl {
   userGroupName: any = '';
 
   /** @ngInject */
-  constructor(private $scope, private $http, private backendSrv) {
+  constructor(private $scope, private $http, private backendSrv, private $location) {
     this.get();
   }
 
@@ -39,9 +39,10 @@ export default class UserGroupsCtrl {
   }
 
   createUserGroup() {
-    this.backendSrv.post('/api/user-groups', {name: this.userGroupName}).then(result => {
-      this.get();
-      this.userGroupName = '';
+    this.backendSrv.post('/api/user-groups', {name: this.userGroupName}).then((result) => {
+      if (result.userGroupId) {
+        this.$location.path('/org/user-groups/edit/' + result.userGroupId);
+      }
     });
   }
 
@@ -61,6 +62,17 @@ export default class UserGroupsCtrl {
     this.backendSrv.delete('/api/user-groups/' + userGroup.id)
       .then(this.get.bind(this));
   }
+
+  openModal() {
+    var modalScope = this.$scope.$new();
+    modalScope.createUserGroup = this.createUserGroup.bind(this);
+
+    this.$scope.appEvent('show-modal', {
+      src: 'public/app/features/org/partials/create_user_group.html',
+      modalClass: 'user-group-modal',
+      scope: this.$scope
+    });
+  }
 }
 
 coreModule.controller('UserGroupsCtrl', UserGroupsCtrl);