adapting changes from (#17333)

public/app/core/components/UserEdit/Admin/UserStatus.tsx

@@ -0,0 +1,105 @@
+import React, { PureComponent } from 'react';
+import { hot } from 'react-hot-loader';
+import { connect } from 'react-redux';
+import { getBackendSrv } from '@grafana/runtime';
+import appEvents from 'app/core/app_events';
+import { OrgUser, StoreState } from 'app/types';
+import { toggleUserStatus } from '../state/actions';
+import { Button } from '@grafana/ui';
+
+export interface Props {
+  userId: number;
+  user: OrgUser;
+  toggleUserStatus: typeof toggleUserStatus;
+}
+
+export class UserStatus extends PureComponent<Props> {
+  async onDisableUser() {
+    const { user, userId } = this.props;
+
+    // External user can not be disabled
+    if (user.authModule) {
+      return;
+    }
+
+    await this.props.toggleUserStatus(user.isDisabled, userId);
+  }
+
+  onDeleteUser() {
+    const { user, userId } = this.props;
+    appEvents.emit('confirm-modal', {
+      title: 'Delete',
+      text: 'Do you want to delete ' + user.login + '?',
+      yesText: 'Delete',
+      icon: 'fa-trash',
+      onConfirm: () => {
+        getBackendSrv()
+          .delete('/api/admin/users/' + userId)
+          .then(() => {
+            window.location.href = '/admin/users';
+          });
+      },
+    });
+  }
+
+  render() {
+    const { user } = this.props;
+    return (
+      <div className="gf-form-group">
+        <h3 className="page-sub-heading">User status</h3>
+        <div className="gf-form-button-row">
+          {!user.isDisabled && (
+            <Button
+              variant="danger"
+              onClick={event => {
+                event.preventDefault();
+                this.onDisableUser();
+              }}
+              disabled={!!user.authModule}
+            >
+              Disable
+            </Button>
+          )}
+          {user.isDisabled && (
+            <Button
+              onClick={event => {
+                event.preventDefault();
+                this.onDisableUser();
+              }}
+              disabled={!!user.authModule}
+            >
+              Enable
+            </Button>
+          )}
+          {user.authModule && <p>External user cannot be activated or deactivated</p>}
+          <Button
+            variant="danger"
+            onClick={event => {
+              event.preventDefault();
+              this.onDeleteUser();
+            }}
+          >
+            Delete User
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state: StoreState) {
+  return {
+    user: state.user.profile,
+  };
+}
+
+const mapDispatchToProps = {
+  toggleUserStatus,
+};
+
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(UserStatus)
+);

public/app/core/components/UserEdit/state/actions.ts

@@ -1,6 +1,5 @@
 import { getBackendSrv } from '@grafana/runtime';
 import { OrgUser, ThunkResult } from 'app/types';
-import { updateLocation } from 'app/core/actions';
 
 export enum ActionTypes {
   LoadUser = 'LOAD_USER',
@@ -44,17 +43,23 @@ export function updateUser(updates: object, id?: number): ThunkResult<any> {
   return async dispatch => {
     if (id) {
       await getBackendSrv().put('/api/users/' + id, updates);
-      dispatch(updateLocation({ path: '/admin/users' }));
     } else {
       await getBackendSrv().put('/api/user/', updates);
-      dispatch(loadUser());
     }
+    dispatch(loadUser(id));
   };
 }
 
 export function updateUserPermissions(permissions: object, id: number): ThunkResult<any> {
   return async dispatch => {
     await getBackendSrv().put('/api/admin/users/' + id + '/permissions', permissions);
-    dispatch(updateLocation({ path: '/admin/users' }));
+  };
+}
+
+export function toggleUserStatus(disabled: boolean, id: number): ThunkResult<any> {
+  return async dispatch => {
+    const actionEndpoint = disabled ? '/enable' : '/disable';
+    await getBackendSrv().post('/api/admin/users/' + id + actionEndpoint, {});
+    dispatch(loadUser(id));
   };
 }

public/app/features/admin/AdminEditUser.tsx

@@ -12,6 +12,7 @@ import UserSessions from 'app/core/components/UserEdit/UserSessions';
 import NewUserPassword from 'app/core/components/UserEdit/Admin/NewUserPassword';
 import UserPermissions from 'app/core/components/UserEdit/Admin/UserPermissions';
 import UserOrganizations from 'app/core/components/UserEdit/Admin/UserOrganizations';
+import UserStatus from 'app/core/components/UserEdit/Admin/UserStatus';
 
 export interface Props {
   navModel: NavModel;
@@ -43,6 +44,7 @@ export class AdminEditUser extends PureComponent<Props> {
           {!isLoading && <UserPermissions userId={userId} />}
           <UserOrganizations userId={userId} />
           <UserSessions adminMode={adminMode} userId={userId} />
+          {!isLoading && <UserStatus userId={userId} />}
         </Page.Contents>
       </Page>
     );

public/app/types/user.ts

@@ -11,6 +11,8 @@ export interface OrgUser {
   role: string;
   userId: number;
   isGrafanaAdmin: boolean;
+  isDisabled: boolean;
+  authModule: string;
 }
 
 export interface User {

public/sass/components/_gf-form.scss

@@ -90,6 +90,10 @@ $input-border: 1px solid $input-border-color;
 }
 
 .gf-form-button-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: flex-start;
   padding-top: $spacer * 1.5;
   a,
   button {