dashboard_folders: fixes to user & group picker

public/app/core/components/user_group_picker.ts

@@ -16,8 +16,27 @@ export class UserGroupPickerCtrl {
 
   /** @ngInject */
   constructor(private backendSrv, private $scope, $sce, private uiSegmentSrv) {
-    this.userGroupSegment = this.uiSegmentSrv.newSegment({value: 'Choose User Group', selectMode: true});
     this.debouncedSearchUserGroups = _.debounce(this.searchUserGroups, 500, {'leading': true, 'trailing': false});
+    this.resetUserGroupSegment();
+  }
+
+  resetUserGroupSegment() {
+    this.userGroupId = null;
+
+    const userGroupSegment = this.uiSegmentSrv.newSegment({value: 'Choose User Group', selectMode: true, fake: true});
+    if (!this.userGroupSegment) {
+      this.userGroupSegment = userGroupSegment;
+    } else {
+      this.userGroupSegment.value = userGroupSegment.value;
+      this.userGroupSegment.html = userGroupSegment.html;
+      this.userGroupSegment.value = userGroupSegment.value;
+    }
+  }
+
+  userGroupIdChanged(newVal) {
+    if (!newVal) {
+      this.resetUserGroupSegment();
+    }
   }
 
   searchUserGroups(query: string) {
@@ -50,8 +69,12 @@ export function userGroupPicker() {
     bindToController: true,
     controllerAs: 'ctrl',
     scope: {
-      userGroupSegment: '=',
       userGroupId: '=',
+    },
+    link: function(scope, elem, attrs, ctrl) {
+      scope.$watch("ctrl.userGroupId", (newVal, oldVal) => {
+        ctrl.userGroupIdChanged(newVal);
+      });
     }
   };
 }

public/app/core/components/user_picker.ts

@@ -17,8 +17,21 @@ export class UserPickerCtrl {
 
   /** @ngInject */
   constructor(private backendSrv, private $scope, $sce, private uiSegmentSrv) {
-    this.userSegment = this.uiSegmentSrv.newSegment({value: 'Choose User', selectMode: true});
+    this.userSegment = this.uiSegmentSrv.newSegment({value: 'Choose User', selectMode: true, fake: true});
     this.debouncedSearchUsers = _.debounce(this.searchUsers, 500, {'leading': true, 'trailing': false});
+    this.userId = null;
+    this.resetUserSegment();
+  }
+
+  resetUserSegment() {
+    const userSegment = this.uiSegmentSrv.newSegment({value: 'Choose User', selectMode: true, fake: true});
+    if (!this.userSegment) {
+      this.userSegment = userSegment;
+    } else {
+      this.userSegment.value = userSegment.value;
+      this.userSegment.html = userSegment.html;
+      this.userSegment.value = userSegment.value;
+    }
   }
 
   searchUsers(query: string) {
@@ -44,11 +57,16 @@ export class UserPickerCtrl {
     });
   }
 
+  userIdChanged(newVal) {
+    if (!newVal) {
+      this.resetUserSegment();
+    }
+  }
+
   private userKey(user: User) {
     return this.uiSegmentSrv.newSegment(user.login + ' - ' + user.email);
   }
 
-
 }
 
 export interface User {
@@ -66,9 +84,12 @@ export function userPicker() {
     bindToController: true,
     controllerAs: 'ctrl',
     scope: {
-      userSegment: '=',
-      userLogin: '=',
       userId: '=',
+    },
+    link: function(scope, elem, attrs, ctrl) {
+      scope.$watch("ctrl.userId", (newVal, oldVal) => {
+        ctrl.userIdChanged(newVal);
+      });
     }
   };
 }

public/app/features/dashboard/acl/acl.html

@@ -8,11 +8,11 @@
 			</div>
       <div class="gf-form" ng-show="ctrl.type === 'User'">
         <span class="gf-form-label">User</span>
-        <user-picker user-login="ctrl.userLogin" user-id="ctrl.userId" user-segment="ctrl.userSegment"></user-picker>
+        <user-picker user-id="ctrl.userId"></user-picker>
       </div>
       <div class="gf-form" ng-show="ctrl.type === 'User Group'">
         <span class="gf-form-label">User Group</span>
-        <user-group-picker user-group-id="ctrl.userGroupId" user-group-segment="ctrl.userGroupSegment"></user-group-picker>
+        <user-group-picker user-group-id="ctrl.userGroupId"></user-group-picker>
       </div>
 			<div class="gf-form">
 				<span class="gf-form-label">Role</span>

public/app/features/dashboard/acl/acl.ts

@@ -14,12 +14,9 @@ export class AclCtrl {
     {value: 2, text: 'Read-only Edit'},
     {value: 4, text: 'Edit'}
   ];
-  userLogin: string;
   userId: number;
-  userSegment: any;
   type = 'User';
   userGroupId: number;
-  userGroupSegment: any;
   permission = 1;
 
   /** @ngInject */
@@ -40,7 +37,7 @@ export class AclCtrl {
 
   addPermission() {
     if (this.type === 'User') {
-      if (this.userSegment.value === 'Choose User') {
+      if (!this.userId) {
         return;
       }
 
@@ -48,15 +45,11 @@ export class AclCtrl {
         userId: this.userId,
         permissionType: this.permission
       }).then(() => {
-        this.userId = 0;
-        this.userLogin = '';
-        this.userSegment.value = 'Choose User';
-        this.userSegment.text = 'Choose User';
-        this.userSegment.html = 'Choose User';
+        this.userId = null;
         this.get(this.dashboard.id);
       });
     } else {
-      if (this.userGroupSegment.value === 'Choose User Group') {
+      if (!this.userGroupId) {
         return;
       }
 
@@ -64,10 +57,7 @@ export class AclCtrl {
         userGroupId: this.userGroupId,
         permissionType: this.permission
       }).then(() => {
-        this.userGroupId = 0;
-        this.userGroupSegment.value = 'Choose User Group';
-        this.userGroupSegment.text = 'Choose User Group';
-        this.userGroupSegment.html = 'Choose User Group';
+        this.userGroupId = null;
         this.get(this.dashboard.id);
       });
     }

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

@@ -18,10 +18,10 @@
 
 	<h3 class="page-heading">User Group Members</h3>
 
-  <form name="addMemberForm" class="gf-form-group">
+  <form name="ctrl.addMemberForm" class="gf-form-group">
 		<div class="gf-form">
 			<span class="gf-form-label width-10">Name</span>
-      <user-picker required user-login="ctrl.userName" user-id="ctrl.userId"></user-picker>
+      <user-picker user-id="ctrl.userId"></user-picker>
     </div>
 
 		<div class="gf-form-button-row">

public/app/features/org/user_group_details_ctrl.ts

@@ -6,9 +6,9 @@ import _ from 'lodash';
 export default class UserGroupDetailsCtrl {
   userGroup: UserGroup;
   userGroupMembers: User[] = [];
-  userName = '';
   userId: number;
   navModel: any;
+  addMemberForm: any;
 
   constructor(private $scope, private $http, private backendSrv, private $routeParams, navModelSrv) {
     this.navModel = navModelSrv.getOrgNav(3);
@@ -52,10 +52,10 @@ export default class UserGroupDetailsCtrl {
   }
 
   addMember() {
-    if (!this.$scope.addMemberForm.$valid) { return; }
+    if (!this.addMemberForm.$valid) { return; }
 
     this.backendSrv.post(`/api/user-groups/${this.$routeParams.id}/members`, {userId: this.userId}).then(() => {
-      this.userName = '';
+      this.userId = null;
       this.get();
     });
   }