UserAdmin: UI for disabling users (#17333)

* Feat: initial disable user UI

* batch disable users

* batch revoke users tokens

* split batch disable user and revoke token

* API: get users with auth info and isExternal flag

* fix tests for batch disable users

* Disable users: show is user external or not

* Users: refactor /api/users/search endpoint

* Users: use alias for "user" table

* Chore: add BatchDisableUsers() to the bus

* Users: order user list by id explicitly

* Chore: switch back to /api/users/search endpoint

* Users: move disable button to user profile page

* Users: return AuthModule from /api/users/:id endpoint

* Users: do not return unused fields

* Users: mute auth badge for disabled users

* Users: move disable button to the user section

* Users: fix SearchUsers method after last changes

* User: return auth module as array for future purposes

* User: tests for SearchUsers()

* User: return only latest auth module in SearchUsers()

* User: fix JOIN, get only most recent auth module

* Users: fix ldap badge after backed changes

* Users: show tooltip for inactive disable/enable button

* Users: move delete button to edit user view

* Users: put deactivated badge on the user list

* Users: minor refactor

* Users: adjust deactivated badge style

* Minor design changes

public/app/features/admin/AdminEditUserCtrl.ts

@@ -86,9 +86,7 @@ export default class AdminEditUserCtrl {
     $scope.updatePermissions = () => {
       const payload = $scope.permissions;
 
-      backendSrv.put('/api/admin/users/' + $scope.user_id + '/permissions', payload).then(() => {
-        $location.path('/admin/users');
-      });
+      backendSrv.put('/api/admin/users/' + $scope.user_id + '/permissions', payload);
     };
 
     $scope.create = () => {
@@ -163,6 +161,36 @@ export default class AdminEditUserCtrl {
       });
     };
 
+    $scope.deleteUser = (user: any) => {
+      $scope.appEvent('confirm-modal', {
+        title: 'Delete',
+        text: 'Do you want to delete ' + user.login + '?',
+        icon: 'fa-trash',
+        yesText: 'Delete',
+        onConfirm: () => {
+          backendSrv.delete('/api/admin/users/' + user.id).then(() => {
+            $location.path('/admin/users');
+          });
+        },
+      });
+    };
+
+    $scope.disableUser = event => {
+      const user = $scope.user;
+
+      // External user can not be disabled
+      if (user.authModule) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+
+      const actionEndpoint = user.isDisabled ? '/enable' : '/disable';
+      backendSrv.post('/api/admin/users/' + user.id + actionEndpoint).then(() => {
+        $scope.init();
+      });
+    };
+
     $scope.init();
   }
 }

public/app/features/admin/AdminListUsersCtrl.ts

@@ -12,7 +12,7 @@ export default class AdminListUsersCtrl {
   navModel: any;
 
   /** @ngInject */
-  constructor(private $scope: any, private backendSrv: BackendSrv, navModelSrv: NavModelSrv) {
+  constructor(private backendSrv: BackendSrv, navModelSrv: NavModelSrv) {
     this.navModel = navModelSrv.getNav('admin', 'global-users', 0);
     this.query = '';
     this.getUsers();
@@ -40,17 +40,10 @@ export default class AdminListUsersCtrl {
     this.getUsers();
   }
 
-  deleteUser(user: any) {
-    this.$scope.appEvent('confirm-modal', {
-      title: 'Delete',
-      text: 'Do you want to delete ' + user.login + '?',
-      icon: 'fa-trash',
-      yesText: 'Delete',
-      onConfirm: () => {
-        this.backendSrv.delete('/api/admin/users/' + user.id).then(() => {
-          this.getUsers();
-        });
-      },
-    });
+  getAuthModule(user: any) {
+    if (user.authModule && user.authModule.length) {
+      return user.authModule[0];
+    }
+    return undefined;
   }
 }

public/app/features/admin/partials/edit_user.html

 <page-header model="navModel"></page-header>
 
 <div class="page-container page-body">
-
-
   <h3 class="page-sub-heading">Edit User</h3>
 
-
   <form name="userForm" class="gf-form-group">
     <div class="gf-form">
       <span class="gf-form-label width-10">Name</span>
-				<input type="text" required ng-model="user.name" class="gf-form-input max-width-25" >
+      <input type="text" required ng-model="user.name" class="gf-form-input max-width-25" />
     </div>
     <div class="gf-form">
       <span class="gf-form-label width-10">Email</span>
-				<input type="email" ng-model="user.email" class="gf-form-input max-width-25" >
+      <input type="email" ng-model="user.email" class="gf-form-input max-width-25" />
     </div>
     <div class="gf-form">
       <span class="gf-form-label width-10">Username</span>
-				<input type="text" ng-model="user.login" class="gf-form-input max-width-25" >
+      <input type="text" ng-model="user.login" class="gf-form-input max-width-25" />
     </div>
 
     <div class="gf-form-button-row">
@@ -30,7 +27,7 @@
   <form name="passwordForm" class="gf-form-group">
     <div class="gf-form">
       <span class="gf-form-label width-10">New password</span>
-				<input type="password" required ng-minlength="4" ng-model="password" class="gf-form-input max-width-25">
+      <input type="password" required ng-minlength="4" ng-model="password" class="gf-form-input max-width-25" />
     </div>
 
     <div class="gf-form-button-row">
@@ -41,12 +38,14 @@
   <h3 class="page-heading">Permissions</h3>
 
   <form name="passwordForm" class="gf-form-group">
-		<div class="gf-form" >
-			<gf-form-switch class="gf-form" label="Grafana Admin" checked="permissions.isGrafanaAdmin" switch-class="max-width-6"></gf-form-switch>
-		</div>
-
-		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-primary" ng-click="updatePermissions()">Update</button>
+    <div class="gf-form">
+      <gf-form-switch
+        class="gf-form"
+        label="Grafana Admin"
+        checked="permissions.isGrafanaAdmin"
+        switch-class="max-width-6"
+        on-change="updatePermissions()"
+      ></gf-form-switch>
     </div>
   </form>
 
@@ -56,12 +55,24 @@
     <div class="gf-form-inline">
       <div class="gf-form">
         <span class="gf-form-label">Add</span>
-				<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs"	required class="gf-form-input max-width-20" placeholder="organization name">
+        <input
+          type="text"
+          ng-model="newOrg.name"
+          bs-typeahead="searchOrgs"
+          required
+          class="gf-form-input max-width-20"
+          placeholder="organization name"
+        />
       </div>
       <div class="gf-form">
         <span class="gf-form-label">Role</span>
         <span class="gf-form-select-wrapper">
-            	<select type="text" ng-model="newOrg.role" class="gf-form-input width-10" ng-options="f for f in ['Viewer', 'Editor', 'Admin']"></select>
+          <select
+            type="text"
+            ng-model="newOrg.role"
+            class="gf-form-input width-10"
+            ng-options="f for f in ['Viewer', 'Editor', 'Admin']"
+          ></select>
         </span>
       </div>
       <div class="gf-form">
@@ -80,13 +91,17 @@
         </tr>
       </thead>
       <tr ng-repeat="org in orgs">
-				<td>
-					{{org.name}} <span class="label label-info" ng-show="org.orgId === user.orgId">Current</span>
-				</td>
+        <td>{{org.name}} <span class="label label-info" ng-show="org.orgId === user.orgId">Current</span></td>
         <td>
           <div class="gf-form">
             <span class="gf-form-select-wrapper">
-					<select type="text" ng-model="org.role" class="gf-form-input max-width-12" ng-options="f for f in ['Viewer', 'Editor', 'Admin']" ng-change="updateOrgUser(org)">
+              <select
+                type="text"
+                ng-model="org.role"
+                class="gf-form-input max-width-12"
+                ng-options="f for f in ['Viewer', 'Editor', 'Admin']"
+                ng-change="updateOrgUser(org)"
+              >
               </select>
             </span>
           </div>
@@ -130,6 +145,35 @@
     </table>
   </div>
 
-	<button ng-if="sessions.length" class="btn btn-danger" ng-click="revokeAllUserSessions()">Logout user from all devices</button>
+  <button ng-if="sessions.length" class="btn btn-danger" ng-click="revokeAllUserSessions()">
+    Logout user from all devices
+  </button>
+
+  <div class="gf-form-group">
+    <h3 class="page-heading">User status</h3>
 
+    <div class="gf-form-button-row">
+      <button
+        type="submit"
+        class="btn btn-danger"
+        ng-if="!user.isDisabled"
+        ng-click="disableUser($event)"
+        bs-tooltip="user.authModule ? 'External user cannot be activated or deactivated' : ''"
+        ng-class="{'disabled': user.authModule}"
+      >
+        Disable
+      </button>
+      <button
+        type="submit"
+        class="btn btn-primary"
+        ng-if="user.isDisabled"
+        ng-click="disableUser($event)"
+        bs-tooltip="user.authModule ? 'External user cannot be activated or deactivated' : ''"
+        ng-class="{'disabled': user.authModule}"
+      >
+        Enable
+      </button>
+      <button type="submit" class="btn btn-danger" ng-click="deleteUser(user)" ng-show="!createMode">Delete User</button>
+    </div>
+  </div>
 </div>

public/app/features/admin/partials/users.html

@@ -55,9 +55,10 @@
             </a>
           </td>
           <td class="text-right">
-            <a ng-click="ctrl.deleteUser(user)" class="btn btn-danger btn-small">
-              <i class="fa fa-remove"></i>
-            </a>
+            <span class="label label-tag" ng-class="{'muted': user.isDisabled}" ng-if="ctrl.getAuthModule(user) === 'ldap'">LDAP</span>
+          </td>
+          <td class="text-right">
+            <span class="label label-tag label-tag--gray" ng-if="user.isDisabled">Disabled</span>
           </td>
         </tr>
       </tbody>

public/sass/components/_tags.scss

@@ -29,9 +29,25 @@
     top: 1px;
     padding-right: 4px;
   }
-}
 
-.label-tag:hover {
+  &.muted {
     opacity: 0.85;
     background-color: darken($purple, 10%);
+    color: $text-muted;
+  }
+
+  &:hover {
+    opacity: 0.85;
+    background-color: darken($purple, 10%);
+  }
+
+  &--gray {
+    opacity: 0.85;
+    background-color: $gray-1;
+    border-color: $gray-2;
+
+    &:hover {
+      background-color: $gray-1;
+    }
+  }
 }