Create space user's dropdown form for adding other org users

static_src/actions/user_actions.js

@@ -12,7 +12,10 @@ import UserStore from '../stores/user_store';
 import OrgStore from '../stores/org_store';
 import SpaceStore from '../stores/space_store';
 
+const ORG_ENTITY = 'organization';
+const SPACE_ENTITY = 'space';
 const ORG_NAME = OrgStore.cfName;
+// const SPACE_NAME = SpaceStore.cfName;
 const MSG_USER_HAS_SPACE_ROLES = 'This user can\'t be removed because they still have a space ' +
                   'role within the organization. Please remove all space ' +
                   'associations before removing this user from the organization. ' +
@@ -291,8 +294,8 @@ const userActions = {
     const noticeType = 'finish';
     const currentViewedType = UserStore.currentlyViewedType;
     const viewTypeNouns = Object.assign({},
-      { space_users: { singular: 'space' } },
-      { org_users: { singular: 'organization' } }
+      { space_users: { singular: SPACE_ENTITY } },
+      { org_users: { singular: ORG_ENTITY } }
     );
     const entity = viewTypeNouns[currentViewedType].singular;
 

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 UsersParentEntityUserSelector from './users_parent_entity_user_selector.jsx';
 import Notification from './notification.jsx';
 import UserStore from '../stores/user_store.js';
 import ErrorMessage from './error_message.jsx';
@@ -33,12 +34,15 @@ function stateSetter() {
   const isSaving = UserStore.isSaving;
 
   let users = [];
+  let parentEntityUsers;
   let currentUserAccess = false;
   const inviteDisabled = UserStore.inviteDisabled();
+  const userParentEntityUserSelectDisabled = UserStore.userParentEntityUserSelectDisabled();
   let entityGuid;
 
   if (currentType === SPACE_NAME) {
     users = UserStore.getAllInSpace(currentSpaceGuid);
+    parentEntityUsers = UserStore.getAllInOrgAndNotSpace(currentSpaceGuid);
     entityGuid = currentSpaceGuid;
     currentUserAccess = UserStore.hasRole(currentUser.guid, currentSpaceGuid,
                                           SPACE_MANAGER);
@@ -53,6 +57,7 @@ function stateSetter() {
     currentUser,
     error: UserStore.getError(),
     inviteDisabled,
+    userParentEntityUserSelectDisabled,
     currentUserAccess,
     currentOrgGuid,
     currentSpaceGuid,
@@ -62,6 +67,7 @@ function stateSetter() {
     loading: UserStore.loading,
     empty: !UserStore.loading && !users.length,
     users,
+    parentEntityUsers,
     userListNotices: UserStore._userListNotification,
     userListNoticeError: UserStore.getUserListNotificationError()
   };
@@ -140,6 +146,13 @@ export default class Users extends React.Component {
     return entityGuid;
   }
 
+  get currentUserIsSpaceManager() {
+    const { currentUser } = this.state;
+    const { currentSpaceGuid } = SpaceStore;
+
+    return UserStore.hasRole(currentUser.guid, currentSpaceGuid, SPACE_MANAGER);
+  }
+
   get currentUserIsOrgManager() {
     const { currentUser } = this.state;
     const { currentOrgGuid } = OrgStore;
@@ -186,6 +199,34 @@ export default class Users extends React.Component {
     );
   }
 
+  get userParentEntityUserSelector() {
+    if (!this.isSpace) {
+      return null;
+    }
+
+    if (!this.currentUserIsSpaceManager) {
+      return (
+        <PanelDocumentation>
+          ORG AND SPACE MANAGERS CAN DO THIS.
+        </PanelDocumentation>
+      );
+    }
+
+    return (
+      <UsersParentEntityUserSelector
+        userParentEntityUserSelectDisabled={ this.state.userParentEntityUserSelectDisabled }
+        parentEntityGuid={ this.state.currentOrgGuid }
+        parentEntity={ ORG_ENTITY }
+        currentEntityGuid={ this.entityGuid }
+        currentEntity={ this.entityType }
+        parentEntityUsers={ this.state.parentEntityUsers }
+        inviteEntityType={ this.entityType }
+        currentUserAccess={ this.state.currentUserAccess }
+        error={ this.state.userListNoticeError }
+      />
+    );
+  }
+
   _onChange() {
     this.setState(stateSetter());
   }
@@ -203,6 +244,7 @@ export default class Users extends React.Component {
       <div className="test-users">
         <ErrorMessage error={this.state.error} />
         { this.userInvite }
+        { this.userParentEntityUserSelector }
         { this.notification }
         <UserList
           users={ this.state.users }

static_src/components/users_parent_entity_user_selector.jsx

@@ -0,0 +1,147 @@
+/**
+ * Renders a form that allows org users to invite new users
+ * to cloud.gov
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import Action from './action.jsx';
+import FormStore from '../stores/form_store';
+import { Form, FormSelect } from './form';
+import PanelDocumentation from './panel_documentation.jsx';
+import userActions from '../actions/user_actions';
+import { validateString } from '../util/validators';
+
+const USERS_PARENT_ENTITY_USER_FORM_GUID = 'users-parent-entity-users-form';
+
+const propTypes = {
+  userParentEntityUserSelectDisabled: PropTypes.bool,
+  currentUserAccess: PropTypes.bool,
+  parentEntityUsers: PropTypes.array,
+  error: PropTypes.object,
+  parentEntityGuid: PropTypes.string,
+  parentEntity: PropTypes.string,
+  currentEntityGuid: PropTypes.string,
+  currentEntity: PropTypes.string
+};
+const defaultProps = {
+  userParentEntityUserSelectDisabled: false,
+  currentUserAccess: false,
+  error: {}
+};
+
+function stateSetter(props) {
+  return {
+    userParentEntityUserSelectDisabled: props.userParentEntityUserSelectDisabled,
+    currentUserAccess: props.currentUserAccess,
+    parentEntityUsers: props.parentEntityUsers,
+    parentEntityGuid: props.parentEntityGuid,
+    parentEntity: props.parentEntity,
+    currentEntityGuid: props.currentEntityGuid,
+    currentEntity: props.currentEntity,
+    error: props.error
+  };
+}
+
+export default class UsersParentEntityUserSelector extends React.Component {
+  constructor(props) {
+    super(props);
+    FormStore.create(USERS_PARENT_ENTITY_USER_FORM_GUID);
+
+    this.state = stateSetter(props);
+
+    this.validateString = validateString().bind(this);
+    this._onSubmitForm = this._onSubmitForm.bind(this);
+  }
+
+  _onSubmitForm(errs, values) {
+    const entityType = this.state.currentEntity;
+    const entityGuid = this.state.currentEntityGuid;
+    const apiKey = 'auditors';
+    const roles = 'space_auditor';
+    if (values.userGuid) {
+      const userGuid = values.userGuid.value;
+      userActions.addUserRoles(roles, apiKey, userGuid, entityGuid, entityType);
+    }
+  }
+
+  get errorMessage() {
+    const { error } = this.props;
+
+    if (!error) return '';
+
+    const message = error.contextualMessage;
+
+    if (error.message) {
+      return `${message}: ${error.message}.`;
+    }
+
+    return message;
+  }
+
+  get invitationMessage() {
+    const parentEntity = this.props.parentEntity;
+    const currentEntity = this.props.currentEntity;
+
+    return `Invite an existing user in this ${parentEntity}` +
+      ` to this ${currentEntity}.`;
+  }
+
+  get userSelector() {
+    const orgUsers = this.state.parentEntityUsers.map((user) =>
+      ({ value: user.guid, label: user.username })
+    );
+
+    if (!orgUsers) {
+      return null;
+    }
+
+    return (
+      <FormSelect
+        formGuid={ USERS_PARENT_ENTITY_USER_FORM_GUID }
+        classes={ ['test-users_parent_entity_user_name'] }
+        label="Username"
+        name="userGuid"
+        options={ orgUsers }
+        validator={ this.validateString }
+      />
+    );
+  }
+
+  render() {
+    const { userParentEntityUserSelectDisabled } = this.props;
+
+    if (!this.props.currentUserAccess) {
+      return null;
+    }
+
+    return (
+      <div className="test-users-invite">
+        <PanelDocumentation description>
+          <p>{ this.invitationMessage }</p>
+        </PanelDocumentation>
+        <Form
+          guid={ USERS_PARENT_ENTITY_USER_FORM_GUID }
+          classes={ ['users_parent_entity_user_form'] }
+          ref="form"
+          onSubmit={ this._onSubmitForm }
+          errorOverride={ this.errorMessage }
+        >
+          { this.userSelector }
+          <Action
+            label="submit"
+            type="submit"
+            disabled={ userParentEntityUserSelectDisabled }
+          >
+            Add user to this { this.state.currentEntity }
+          </Action>
+        </Form>
+      </div>
+    );
+  }
+
+}
+
+UsersParentEntityUserSelector.propTypes = propTypes;
+
+UsersParentEntityUserSelector.defaultProps = defaultProps;

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._userParentEntityUserSelectDisabled = false;
     this._userListNotification = {};
     this._loading = {};
   }
@@ -189,7 +190,7 @@ export class UserStore extends BaseStore {
         this._userListNotificationError = Object.assign({}, action.err, {
           contextualMessage: action.contextualMessage
         });
-        this._inviteDisabled = false;
+        this._userParentEntityUserSelectDisabled = false;
         this.emitChange();
         break;
       }
@@ -322,6 +323,14 @@ export class UserStore extends BaseStore {
     return usersInOrg.toJS();
   }
 
+  getAllInOrgAndNotSpace() {
+    const usersInOrg = this._data.toJS().filter((user) =>
+      !user.space_roles
+    );
+
+    return usersInOrg;
+  }
+
   getError() {
     return this._error;
   }
@@ -367,6 +376,10 @@ export class UserStore extends BaseStore {
     return !!roles.find((role) => wrappedRoles.includes(role));
   }
 
+  userParentEntityUserSelectDisabled() {
+    return this._userParentEntityUserSelectDisabled;
+  }
+
   inviteDisabled() {
     return this._inviteDisabled;
   }

static_src/test/unit/components/users_parent_entity_user_selector.spec.jsx

@@ -0,0 +1,24 @@
+import '../../global_setup.js';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Form } from '../../../components/form';
+import ParentUserSelector from '../../../components/users_parent_entity_user_selector.jsx';
+
+describe('<ParentUserSelector />', function () {
+  const entityType = 'space';
+  const props = {
+    inviteEntityType: entityType,
+    currentUserAccess: true
+  };
+  let wrapper;
+
+  describe('when user does not have ability to invite other users', () => {
+    it('does not render <Form /> component', () => {
+      const noAccessProps = Object.assign({}, props, { currentUserAccess: false });
+      wrapper = shallow(<ParentUserSelector { ...noAccessProps } />);
+
+      expect(wrapper.find(Form).length).toEqual(0);
+    });
+  });
+});

static_src/test/unit/stores/user_store.spec.js

@@ -682,6 +682,19 @@ describe('UserStore', function () {
     });
   });
 
+  describe('getAllInOrgAndNotSpace()', function() {
+    it('should find all users that are in an org, without the space users', function() {
+      var spaceGuid = 'asdfa';
+      var testUser = { guid: 'adfzxcv', roles: { [spaceGuid]: [ 'space_user'] } };
+
+      UserStore.push(testUser);
+
+      let actual = UserStore.getAllInOrg(spaceGuid);
+
+      expect(actual[0]).toEqual(testUser);
+    });
+  });
+
   describe('USER_FETCH', function () {
     let user;
     beforeEach(function () {
@@ -909,6 +922,7 @@ describe('UserStore', function () {
       });
     });
   });
+
   describe('isAdmin()', function () {
     describe('user with _currentUserIsAdmin', function () {
       let user, space, org, actual;