Merge pull request #1124 from 18F/lkb-existing_user_frontend_notification

Create the frontend notification when a user is invited/associated to an org

Author: jcscottiii

static_src/actions/user_actions.js

@@ -163,12 +163,64 @@ const userActions = {
     });
 
     return uaaApi.inviteUaaUser(email)
-      .then(invite => cfApi.fetchUser(invite.userGuid))
+      .then(invite => userActions.receivedInviteStatus(invite, email))
+      .catch(err => userActions.userInviteCreateError(err, `There was a problem
+        inviting ${email}`));
+  },
+
+  receivedInviteStatus(invite, email) {
+    const verified = invite.verified;
+    AppDispatcher.handleViewAction({
+      type: userActionTypes.USER_INVITE_STATUS_UPDATED,
+      email,
+      verified
+    });
+
+    return cfApi.fetchUser(invite.userGuid)
       .then(user => userActions.createUserAndAssociate(user))
+      .then(() => userActions.createInviteNotification(verified, email))
       .catch(err => userActions.userInviteCreateError(err, `There was a problem
         inviting ${email}`));
   },
 
+  clearInviteNotifications() {
+    AppDispatcher.handleViewAction({
+      type: userActionTypes.USER_INVITE_STATUS_DISMISSED
+    });
+  },
+
+  createInviteNotification(verified, email) {
+    let description;
+    const noticeType = 'finish';
+    const currentViewedType = UserStore.currentlyViewedType;
+    const viewTypeNouns = {
+      org_users: {
+        singular: 'organization'
+      },
+      space_users: {
+        singular: 'space'
+      }
+    };
+
+    if (verified) {
+      description = `The account for ${email} is now associated to this ` +
+        `${viewTypeNouns[currentViewedType].singular}. Control their ` +
+        `${viewTypeNouns[currentViewedType].singular} roles below.`;
+    } else {
+      description = `There was no cloud.gov account found for ${email} ` +
+        'or the user has not verified their account by logging in.' +
+        'They have been sent an email cloud.gov invitation. Their account ' +
+        `has been associated to this ${viewTypeNouns[currentViewedType].singular}` +
+        ` and their ${viewTypeNouns[currentViewedType].singular}` +
+        ' roles can be controlled below.';
+    }
+    AppDispatcher.handleViewAction({
+      type: userActionTypes.USER_INVITE_STATUS_DISPLAYED,
+      noticeType,
+      description
+    });
+  },
+
   userInviteError(err, contextualMessage) {
     AppDispatcher.handleServerAction({
       type: userActionTypes.USER_INVITE_ERROR,
@@ -311,7 +363,4 @@ const userActions = {
   }
 };
 
-const _userActions = userActions;
-window.useraction = _userActions;
-
 export default userActions;

static_src/components/users.jsx

@@ -11,6 +11,7 @@ import OrgStore from '../stores/org_store.js';
 import SpaceStore from '../stores/space_store.js';
 import UserList from './user_list.jsx';
 import UsersInvite from './users_invite.jsx';
+import Notification from './notification.jsx';
 import UserStore from '../stores/user_store.js';
 
 const SPACE_NAME = 'space_users';
@@ -50,6 +51,7 @@ function stateSetter() {
     loading: UserStore.loading,
     empty: !UserStore.loading && !users.length,
     users,
+    inviteNotices: UserStore._inviteNotification,
     userInviteError: UserStore.getInviteError()
   };
 }
@@ -74,13 +76,9 @@ export default class Users extends React.Component {
     UserStore.removeChangeListener(this._onChange);
   }
 
-  _onChange() {
-    this.setState(stateSetter());
-  }
-
-  handleRemove(userGuid, ev) {
+  onNotificationDismiss(ev) {
     ev.preventDefault();
-    userActions.deleteUser(userGuid, this.state.currentOrgGuid);
+    userActions.clearInviteNotifications();
   }
 
   handleAddPermissions(roleKey, apiKey, userGuid) {
@@ -99,6 +97,11 @@ export default class Users extends React.Component {
                                 this.entityType);
   }
 
+  handleRemove(userGuid, ev) {
+    ev.preventDefault();
+    userActions.deleteUser(userGuid, this.state.currentOrgGuid);
+  }
+
   get entityType() {
     return this.state.currentType === ORG_NAME ? 'org' : 'space';
   }
@@ -109,6 +112,10 @@ export default class Users extends React.Component {
     return entityGuid;
   }
 
+  _onChange() {
+    this.setState(stateSetter());
+  }
+
   render() {
     let removeHandler;
     let errorMessage;
@@ -137,6 +144,20 @@ export default class Users extends React.Component {
       );
     }
 
+    let notification;
+
+    if (this.state.inviteNotices.description) {
+      const notice = this.state.inviteNotices;
+      notification = (
+        <Notification
+          message={ notice.description }
+          actions={ [] }
+          onDismiss={ this.onNotificationDismiss }
+          status="finish"
+        />
+      );
+    }
+
     return (
       <div className="test-users">
         { errorMessage }
@@ -145,6 +166,7 @@ export default class Users extends React.Component {
           currentUserAccess={ this.state.currentUserAccess }
           error={ this.state.userInviteError }
         />
+        { notification }
         <div>
           <div>
             { content }
@@ -153,9 +175,8 @@ export default class Users extends React.Component {
       </div>
     );
   }
-
 }
 
-Users.propTypes = { };
+Users.propTypes = {};
 
-Users.defaultProps = { };
+Users.defaultProps = {};

static_src/components/users_invite.jsx

@@ -11,8 +11,12 @@ import FormStore from '../stores/form_store';
 import { Form, FormText } from './form';
 import PanelDocumentation from './panel_documentation.jsx';
 import userActions from '../actions/user_actions';
+
 import { validateString } from '../util/validators';
 
+import createStyler from '../util/create_styler';
+import style from 'cloudgov-style/css/cloudgov-style.css';
+
 const USERS_INVITE_FORM_GUID = 'users-invite-form';
 
 const propTypes = {
@@ -39,6 +43,8 @@ export default class UsersInvite extends React.Component {
     this.props = props;
     this.state = stateSetter(props);
 
+    this.styler = createStyler(style);
+
     this.validateString = validateString().bind(this);
     this._onValidForm = this._onValidForm.bind(this);
   }
@@ -59,6 +65,7 @@ export default class UsersInvite extends React.Component {
 
   render() {
     let content;
+
     if (this.props.currentUserAccess) {
       content = (
         <div>

static_src/constants.js

@@ -22,6 +22,8 @@ const entityHealth = keymirror({
   warning: null,
   // Something is definitely not right and requires some attention
   error: null,
+  // Entity process was successful
+  finish: null,
   // Entity is inactive
   inactive: null,
   // This warrants a bug, so we can figure out what the correct health
@@ -252,6 +254,8 @@ const userActionTypes = keymirror({
   USER_ROLES_DELETED: null,
   // Action to request an invite link from UAA, with user GUID.
   USER_INVITE_TRIGGER: null,
+  // Action to trigger when invite status is triggered for front end.
+  USER_INVITE_STATUS_UPDATED: null,
   // Action to trigger email sent to user with cloud.gov invite url.
   USER_ORG_ASSOCIATE: null,
   // Action to associate user to organization on the server.
@@ -260,6 +264,10 @@ const userActionTypes = keymirror({
   USER_ASSOCIATED_ORG_DISPLAYED: null,
   // Action when something goes wrong in user invite and email process.
   USER_INVITE_ERROR: null,
+  // Action to display an invite notification
+  USER_INVITE_STATUS_DISPLAYED: null,
+  // Action to dismiss an invite notification
+  USER_INVITE_STATUS_DISMISSED: null,
   // Action to delete a user from an org.
   USER_DELETE: null,
   // Action when a user was deleted from an org on the server.

static_src/stores/user_store.js

@@ -21,6 +21,7 @@ export class UserStore extends BaseStore {
     this._error = null;
     this._saving = false;
     this._inviteDisabled = false;
+    this._inviteNotification = {};
     this._loading = {};
   }
 
@@ -78,7 +79,6 @@ export class UserStore extends BaseStore {
         } else {
           this.merge('guid', user, () => {});
         }
-        this._inviteDisabled = false;
         this.emitChange();
         break;
       }
@@ -177,6 +177,23 @@ export class UserStore extends BaseStore {
         this._inviteError = Object.assign({}, action.err, {
           contextualMessage: action.contextualMessage
         });
+        this._inviteDisabled = false;
+        this.emitChange();
+        break;
+      }
+
+      case userActionTypes.USER_INVITE_STATUS_DISPLAYED: {
+        this._inviteDisabled = false;
+        const noticeType = action.noticeType;
+        const description = action.description;
+        const notice = Object.assign({}, { noticeType }, { description });
+        this._inviteNotification = notice;
+        this.emitChange();
+        break;
+      }
+
+      case userActionTypes.USER_INVITE_STATUS_DISMISSED: {
+        this._inviteNotification = {};
         this.emitChange();
         break;
       }
@@ -276,10 +293,6 @@ export class UserStore extends BaseStore {
     return this._error;
   }
 
-  get currentlyViewedType() {
-    return this._currentViewedType;
-  }
-
   get isLoadingCurrentUser() {
     return this._loading.currentUser === true;
   }
@@ -329,6 +342,10 @@ export class UserStore extends BaseStore {
     return this._currentUserIsAdmin;
   }
 
+  getInviteNotification() {
+    return this._inviteNotification;
+  }
+
   getInviteError() {
     return this._inviteError;
   }
@@ -337,10 +354,12 @@ export class UserStore extends BaseStore {
     return this.get(this._currentUserGuid);
   }
 
+  get currentlyViewedType() {
+    return this._currentViewedType;
+  }
+
 }
 
 const _UserStore = new UserStore();
 
-window.userstore = _UserStore;
-
 export default _UserStore;

static_src/test/functional/user_role.spec.js

@@ -123,6 +123,7 @@ describe('User roles', function () {
         // sets cookie to org X manager
         cookieValue = cookieManagerOrgX;
       });
+
       describe('shouldn\'t have permission to edit fields on org Y pages', function () {
         it('should set url to org Y', function () {
           browser.url(urlOrgY);
@@ -285,6 +286,7 @@ describe('User roles', function () {
         // sets cookie to space manager YY
         cookieValue = cookieManagerOrgXSpaceYY;
       });
+
       describe('shouldn\'t have permission to edit fields on org X space XX pages', function () {
         it('should set url to org Y', function () {
           browser.url(urlOrgXSpaceXX);