Merge pull request Graylog2#8681 from Graylog2/improve-user-data-hand…

…ling

Implement UsersActions and User class

graylog2-web-interface/src/actions/users/UsersActions.js

@@ -0,0 +1,46 @@
+// @flow strict
+import Reflux from 'reflux';
+
+import User from 'logic/users/User';
+import { singletonActions } from 'views/logic/singleton';
+import type { RefluxActions } from 'stores/StoreTypes';
+
+export type Token = {
+  token_name: string,
+  token: string,
+  last_access: string,
+};
+
+export type ChangePasswordRequest = {
+  old_password: string,
+  password: string,
+};
+
+type UsersActionsType = RefluxActions<{
+  create: (request: any) => Promise<string[]>,
+  loadUsers: () => Promise<User[]>,
+  load: (username: string) => Promise<User>,
+  deleteUser: (username: string) => Promise<string[]>,
+  changePassword: (username: string, request: ChangePasswordRequest) => Promise<void>,
+  update: (username: string, request: any) => Promise<void>,
+  createToken: (username: string, tokenName: string) => Promise<Token>,
+  deleteToken: (username: string, tokenId: string, tokenName: string) => Promise<string[]>,
+  loadTokens: (username: string) => Promise<Token[]>,
+}>;
+
+const UsersActions: UsersActionsType = singletonActions(
+  'Users',
+  () => Reflux.createActions({
+    create: { asyncResult: true },
+    loadUsers: { asyncResult: true },
+    load: { asyncResult: true },
+    deleteUser: { asyncResult: true },
+    changePassword: { asyncResult: true },
+    update: { asyncResult: true },
+    createToken: { asyncResult: true },
+    deleteToken: { asyncResult: true },
+    loadTokens: { asyncResult: true },
+  }),
+);
+
+export default UsersActions;

graylog2-web-interface/src/components/event-notifications/event-notification-types/EmailNotificationForm.jsx

@@ -74,7 +74,7 @@ class EmailNotificationForm extends React.Component {
   };
 
   formatUsers = (users) => {
-    return users.map((user) => ({ label: `${user.username} (${user.full_name})`, value: user.username }));
+    return users.map((user) => ({ label: `${user.username} (${user.fullName})`, value: user.username }));
   };
 
   render() {

graylog2-web-interface/src/components/event-notifications/event-notification-types/EmailNotificationFormContainer.jsx

@@ -1,15 +1,16 @@
-import React from 'react';
+import * as React from 'react';
+import Immutable from 'immutable';
 import PropTypes from 'prop-types';
 
 import { Spinner } from 'components/common';
-import PermissionsMixin from 'util/PermissionsMixin';
+import { isPermitted } from 'util/PermissionsMixin';
 import CombinedProvider from 'injection/CombinedProvider';
 import connect from 'stores/connect';
+import { UsersActions } from 'stores/users/UsersStore';
 
 import EmailNotificationForm from './EmailNotificationForm';
 
 const { CurrentUserStore } = CombinedProvider.get('CurrentUser');
-const { UsersStore } = CombinedProvider.get('Users');
 
 class EmailNotificationFormContainer extends React.Component {
   static propTypes = {
@@ -19,9 +20,13 @@ class EmailNotificationFormContainer extends React.Component {
     onChange: PropTypes.func.isRequired,
   };
 
-  state = {
-    users: undefined,
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      users: undefined,
+    };
+  }
 
   componentDidMount() {
     this.loadUsers();
@@ -30,13 +35,11 @@ class EmailNotificationFormContainer extends React.Component {
   loadUsers = () => {
     const { currentUser } = this.props;
 
-    if (PermissionsMixin.isPermitted(currentUser.permissions, 'users:list')) {
-      UsersStore.loadUsers()
-        .then((users) => {
-          this.setState({ users: users });
-        });
+    if (isPermitted(currentUser.permissions, 'users:list')) {
+      UsersActions.loadUsers()
+        .then((users) => this.setState({ users }));
     } else {
-      this.setState({ users: [] });
+      this.setState({ users: Immutable.List() });
     }
   };
 

graylog2-web-interface/src/components/users/EditRolesForm.jsx

@@ -10,12 +10,12 @@ import history from 'util/History';
 import StoreProvider from 'injection/StoreProvider';
 import RolesSelect from 'components/users/RolesSelect';
 import { Spinner } from 'components/common';
+import { UsersActions } from 'stores/users/UsersStore';
 
 // eslint-disable-next-line import/no-webpack-loader-syntax
 import EditRolesFormStyle from '!style!css!./EditRolesForm.css';
 
 const RolesStore = StoreProvider.getStore('Roles');
-const UsersStore = StoreProvider.getStore('Users');
 
 class EditRolesForm extends React.Component {
   static propTypes = {
@@ -44,7 +44,7 @@ class EditRolesForm extends React.Component {
 
       userClone.roles = roles;
 
-      UsersStore.update(user.username, userClone).then(() => {
+      UsersActions.update(user.username, userClone).then(() => {
         UserNotification.success('Roles updated successfully.', 'Success!');
         history.replace(Routes.SYSTEM.AUTHENTICATION.USERS.LIST);
       }, () => {

graylog2-web-interface/src/components/users/NewUserForm.jsx

@@ -6,10 +6,8 @@ import { Input } from 'components/bootstrap';
 import RolesSelect from 'components/users/RolesSelect';
 import TimeoutInput from 'components/users/TimeoutInput';
 import { TimezoneSelect } from 'components/common';
-import StoreProvider from 'injection/StoreProvider';
 import ValidationsUtils from 'util/ValidationsUtils';
-
-const UsersStore = StoreProvider.getStore('Users');
+import { UsersActions } from 'stores/users/UsersStore';
 
 class NewUserForm extends React.Component {
   static propTypes = {
@@ -24,7 +22,7 @@ class NewUserForm extends React.Component {
   };
 
   componentDidMount() {
-    UsersStore.loadUsers().then((users) => {
+    UsersActions.loadUsers().then((users) => {
       this.setState({ users });
     });
   }

graylog2-web-interface/src/components/users/UserForm.jsx

@@ -17,10 +17,10 @@ import TimeoutInput from 'components/users/TimeoutInput';
 import EditRolesForm from 'components/users/EditRolesForm';
 import { IfPermitted, MultiSelect, TimezoneSelect, Spinner } from 'components/common';
 import { DashboardsActions, DashboardsStore } from 'views/stores/DashboardsStore';
+import { UsersActions } from 'stores/users/UsersStore';
 
 const StreamsStore = StoreProvider.getStore('Streams');
 const CurrentUserStore = StoreProvider.getStore('CurrentUser');
-const UsersStore = StoreProvider.getStore('Users');
 
 const UserForm = createReactClass({
   displayName: 'UserForm',
@@ -104,7 +104,7 @@ const UserForm = createReactClass({
 
     request.password = this.inputs.password.getValue();
 
-    UsersStore.changePassword(this.props.user.username, request).then(() => {
+    UsersActions.changePassword(this.props.user.username, request).then(() => {
       UserNotification.success('Password updated successfully.', 'Success');
 
       if (this.isPermitted(this.state.currentUser.permissions, ['users:list'])) {
@@ -118,7 +118,7 @@ const UserForm = createReactClass({
   _updateUser(evt) {
     evt.preventDefault();
 
-    UsersStore.update(this.props.user.username, this.state.user).then(() => {
+    UsersActions.update(this.props.user.username, this.state.user).then(() => {
       UserNotification.success('User updated successfully.', 'Success');
 
       if (this.isPermitted(this.state.currentUser.permissions, ['users:list'])) {

graylog2-web-interface/src/components/users/UserList.jsx

@@ -10,11 +10,11 @@ import Routes from 'routing/Routes';
 import StoreProvider from 'injection/StoreProvider';
 import { Button, OverlayTrigger, Popover, Tooltip, DropdownButton, MenuItem } from 'components/graylog';
 import { DataTable, Spinner, Timestamp, Icon } from 'components/common';
+import { UsersActions } from 'stores/users/UsersStore';
 
 // eslint-disable-next-line import/no-webpack-loader-syntax
 import UserListStyle from '!style!css!./UserList.css';
 
-const UsersStore = StoreProvider.getStore('Users');
 const RolesStore = StoreProvider.getStore('Roles');
 
 const ActiveIcon = styled(Icon)(({ theme }) => css`
@@ -47,11 +47,11 @@ const UserList = createReactClass({
   },
 
   loadUsers() {
-    const promise = UsersStore.loadUsers();
+    const promise = UsersActions.loadUsers();
 
     promise.done((users) => {
       this.setState({
-        users: users,
+        users: users.toJS().map((user) => user.toJSON()),
       });
     });
   },
@@ -61,7 +61,7 @@ const UserList = createReactClass({
   },
 
   deleteUser(username) {
-    const promise = UsersStore.deleteUser(username);
+    const promise = UsersActions.deleteUser(username);
 
     promise.done(() => {
       this.loadUsers();

graylog2-web-interface/src/contexts/CurrentUserContext.jsx

@@ -1,10 +1,10 @@
 // @flow strict
 import * as React from 'react';
 
-import type { User } from 'stores/users/UsersStore';
+import type { UserJSON } from 'logic/users/User';
 
 import { singleton } from '../views/logic/singleton';
 
-const CurrentUserContext = React.createContext<?User>();
+const CurrentUserContext = React.createContext<?UserJSON>();
 
 export default singleton('contexts.CurrentUserContext', () => CurrentUserContext);