ref(admin): Convert user edit page to react (#14074)

Author: evanpurkhiser

src/sentry/api/endpoints/user_details.py

@@ -86,14 +86,16 @@ def validate(self, attrs):
         return super(UserSerializer, self).validate(attrs)
 
 
-class AdminUserSerializer(BaseUserSerializer):
+class SuperuserUserSerializer(BaseUserSerializer):
     isActive = serializers.BooleanField(source='is_active')
+    isStaff = serializers.BooleanField(source='is_staff')
+    isSuperuser = serializers.BooleanField(source='is_superuser')
 
     class Meta:
         model = User
         # no idea wtf is up with django rest framework, but we need is_active
         # and isActive
-        fields = ('name', 'username', 'isActive')
+        fields = ('name', 'username', 'isActive', 'isStaff', 'isSuperuser')
         # write_only_fields = ('password',)
 
 
@@ -131,7 +133,7 @@ def put(self, request, user):
         """
 
         if is_active_superuser(request):
-            serializer_cls = AdminUserSerializer
+            serializer_cls = SuperuserUserSerializer
         else:
             serializer_cls = UserSerializer
         serializer = serializer_cls(user, data=request.data, partial=True)

src/sentry/api/serializers/models/user.py

@@ -78,6 +78,7 @@ def serialize(self, obj, attrs, user):
             'has2fa': attrs['has2fa'],
             'lastActive': obj.last_active,
             'isSuperuser': obj.is_superuser,
+            'isStaff': obj.is_staff,
         }
 
         if obj == user:

src/sentry/static/sentry/app/routes.jsx

@@ -731,13 +731,21 @@ function routes() {
           }
           component={errorHandler(LazyLoad)}
         />
-        <Route
-          path="users/"
-          componentPromise={() =>
-            import(/* webpackChunkName: "AdminUsers" */ 'app/views/admin/adminUsers')
-          }
-          component={errorHandler(LazyLoad)}
-        />
+        <Route path="users/">
+          <IndexRoute
+            componentPromise={() =>
+              import(/* webpackChunkName: "AdminUsers" */ 'app/views/admin/adminUsers')
+            }
+            component={errorHandler(LazyLoad)}
+          />
+          <Route
+            path=":id"
+            componentPromise={() =>
+              import(/* webpackChunkName: "AdminUserEdit" */ 'app/views/admin/adminUserEdit')
+            }
+            component={errorHandler(LazyLoad)}
+          />
+        </Route>
         <Route
           path="status/mail/"
           componentPromise={() =>

src/sentry/static/sentry/app/views/admin/adminUserEdit.jsx

@@ -0,0 +1,202 @@
+import {browserHistory} from 'react-router';
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'react-emotion';
+
+import {addErrorMessage, addSuccessMessage} from 'app/actionCreators/indicator';
+import {openModal} from 'app/actionCreators/modal';
+import {t, tct} from 'app/locale';
+import AsyncView from 'app/views/asyncView';
+import Button from 'app/components/button';
+import Form from 'app/views/settings/components/forms/form';
+import FormModel from 'app/views/settings/components/forms/model';
+import JsonForm from 'app/views/settings/components/forms/jsonForm';
+import RadioGroup from 'app/views/settings/components/forms/controls/radioGroup';
+import SentryTypes from 'app/sentryTypes';
+import space from 'app/styles/space';
+
+const userEditForm = {
+  title: 'User details',
+  fields: [
+    {
+      name: 'name',
+      type: 'string',
+      required: true,
+      label: t('Name'),
+    },
+    {
+      name: 'username',
+      type: 'string',
+      required: true,
+      label: t('Username'),
+      help: t('The username is the unique id of the user in the system'),
+    },
+    {
+      name: 'email',
+      type: 'string',
+      required: true,
+      label: t('Email'),
+      help: t('The users primary email address'),
+    },
+    {
+      name: 'isActive',
+      type: 'boolean',
+      required: true,
+      label: t('Active'),
+      help: t(
+        'Designates whether this user should be treated as active. Unselect this instead of deleting accounts.'
+      ),
+    },
+    {
+      name: 'isStaff',
+      type: 'boolean',
+      required: true,
+      label: t('Admin'),
+      help: t('Designates whether this user can perform administrative functions.'),
+    },
+    {
+      name: 'isSuperuser',
+      type: 'boolean',
+      required: true,
+      label: t('Superuser'),
+      help: t(
+        'Designates whether this user has all permissions without explicitly assigning them.'
+      ),
+    },
+  ],
+};
+
+const REMOVE_BUTTON_LABEL = {
+  disable: t('Disable User'),
+  delete: t('Permanently Delete User'),
+};
+
+class RemoveUserModal extends React.Component {
+  static propTypes = {
+    user: SentryTypes.User,
+    onRemove: PropTypes.func,
+    closeModal: PropTypes.func,
+  };
+
+  state = {
+    deleteType: 'disable',
+  };
+
+  onRemove = () => {
+    this.props.onRemove(this.state.deleteType);
+    this.props.closeModal();
+  };
+
+  render() {
+    const {user} = this.props;
+    const {deleteType} = this.state;
+
+    return (
+      <React.Fragment>
+        <p>{tct('Removing user [user]', {user: <strong>{user.email}</strong>})}</p>
+        <RadioGroup
+          value={deleteType}
+          onChange={type => this.setState({deleteType: type})}
+          choices={[
+            ['disable', t('Disable the account.')],
+            ['delete', t('Permanently remove the user and their data.')],
+          ]}
+        />
+        <ModalFooter>
+          <Button priority="danger" onClick={this.onRemove}>
+            {REMOVE_BUTTON_LABEL[deleteType]}
+          </Button>
+          <Button onClick={this.props.closeModal}>{t('Nevermind')}</Button>
+        </ModalFooter>
+      </React.Fragment>
+    );
+  }
+}
+
+class AdminUserEdit extends AsyncView {
+  get userEndpoint() {
+    const {params} = this.props;
+    return `/users/${params.id}/`;
+  }
+
+  getEndpoints() {
+    return [['user', this.userEndpoint]];
+  }
+
+  async deleteUser() {
+    await this.api.requestPromise(this.userEndpoint, {
+      method: 'DELETE',
+      data: {hardDelete: true, organizations: []},
+    });
+
+    addSuccessMessage(t("%s's account has been deleted.", this.state.user.email));
+    browserHistory.replace('/manage/users/');
+  }
+
+  async deactivateUser() {
+    const response = await this.api.requestPromise(this.userEndpoint, {
+      method: 'PUT',
+      data: {isActive: false},
+    });
+
+    this.setState({user: response});
+    this.formModel.setInitialData(response);
+    addSuccessMessage(t("%s's account has been deactivated.", response.email));
+  }
+
+  removeUser = actionTypes =>
+    actionTypes === 'delete' ? this.deleteUser() : this.deactivateUser();
+
+  formModel = new FormModel();
+
+  renderBody() {
+    const {user} = this.state;
+    const openDeleteModal = () =>
+      openModal(opts => (
+        <RemoveUserModal user={user} onRemove={this.removeUser} {...opts} />
+      ));
+
+    return (
+      <React.Fragment>
+        <h3>{t('Users')}</h3>
+        <p>{t('Editing user: %s', user.email)}</p>
+        <Form
+          model={this.formModel}
+          initialData={user}
+          apiMethod="PUT"
+          apiEndpoint={this.userEndpoint}
+          requireChanges
+          onSubmitError={addErrorMessage}
+          onSubmitSuccess={data => {
+            this.setState({user: data});
+            addSuccessMessage('User account updated.');
+          }}
+          extraButton={
+            <Button
+              type="button"
+              onClick={openDeleteModal}
+              style={{marginLeft: space(1)}}
+              priority="danger"
+            >
+              {t('Remove User')}
+            </Button>
+          }
+        >
+          <JsonForm forms={[userEditForm]} />
+        </Form>
+      </React.Fragment>
+    );
+  }
+}
+
+const ModalFooter = styled('div')`
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: ${space(1)};
+  justify-content: end;
+  padding: 20px 30px;
+  margin: 20px -30px -30px;
+  border-top: 1px solid ${p => p.theme.borderLight};
+`;
+
+export default AdminUserEdit;

src/sentry/static/sentry/app/views/admin/adminUsers.jsx

@@ -2,8 +2,9 @@
 import React from 'react';
 import moment from 'moment';
 
-import ResultGrid from 'app/components/resultGrid';
 import {t} from 'app/locale';
+import Link from 'app/components/links/link';
+import ResultGrid from 'app/components/resultGrid';
 
 export const prettyDate = function(x) {
   return moment(x).format('ll');
@@ -14,7 +15,7 @@ class AdminUsers extends React.Component {
     return [
       <td>
         <strong>
-          <a href={`/manage/users/${row.id}/`}>{row.username}</a>
+          <Link to={`/manage/users/${row.id}/`}>{row.username}</Link>
         </strong>
         <br />
         {row.email !== row.username && <small>{row.email}</small>}