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

static_src/actions/user_actions.js

@@ -12,6 +12,8 @@ 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 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 ' +
@@ -291,8 +293,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 OrgUsersSelector from './users_org_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 orgUsersSelectorDisabled = UserStore.orgUsersSelectorDisabled();
   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,
+    orgUsersSelectorDisabled,
     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,33 @@ export default class Users extends React.Component {
     );
   }
 
+  get userParentEntityUserSelector() {
+    if (!this.isSpace) {
+      return null;
+    }
+
+    if (!this.currentUserIsSpaceManager) {
+      return (
+        <PanelDocumentation>
+          Org Managers and Space Managers can add current organization users into this space.
+        </PanelDocumentation>
+      );
+    }
+
+    return (
+      <OrgUsersSelector
+        orgUsersSelectorDisabled={ this.state.orgUsersSelectorDisabled }
+        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 +243,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_org_user_selector.jsx

@@ -0,0 +1,123 @@
+/**
+ * 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 AUDITOR_NAME = 'auditors';
+const SPACE_AUDITOR_NAME = 'space_auditor';
+const USERS_PARENT_ENTITY_USER_FORM_GUID = 'users-parent-entity-users-form';
+
+const propTypes = {
+  orgUsersSelectorDisabled: PropTypes.bool,
+  currentUserAccess: PropTypes.bool,
+  parentEntityUsers: PropTypes.array,
+  error: PropTypes.object,
+  parentEntity: PropTypes.string,
+  currentEntityGuid: PropTypes.string,
+  currentEntity: PropTypes.string
+};
+const defaultProps = {
+  orgUsersSelectorDisabled: false,
+  currentUserAccess: false,
+  error: {}
+};
+
+export default class OrgUsersSelector extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.validateString = validateString().bind(this);
+    this._onSubmitForm = this._onSubmitForm.bind(this);
+  }
+
+  componentDidMount() {
+    FormStore.create(USERS_PARENT_ENTITY_USER_FORM_GUID);
+  }
+
+  _onSubmitForm(errs, values) {
+    const { currentEntity } = this.props;
+    const { currentEntityGuid } = this.props;
+    const apiKey = AUDITOR_NAME;
+    const roles = SPACE_AUDITOR_NAME;
+    if (values.userGuid) {
+      const userGuid = values.userGuid.value;
+      userActions.addUserRoles(roles, apiKey, userGuid, currentEntityGuid, currentEntity);
+    }
+  }
+
+  get invitationMessage() {
+    const { parentEntity } = this.props;
+    const { currentEntity } = this.props;
+
+    return `Invite an existing user in this ${parentEntity}` +
+      ` to this ${currentEntity}.`;
+  }
+
+  get userSelector() {
+    const { parentEntityUsers } = this.props;
+    const orgUsers = 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'] }
+        label="Username"
+        name="userGuid"
+        options={ orgUsers }
+        validator={ this.validateString }
+      />
+    );
+  }
+
+  render() {
+    const { orgUsersSelectorDisabled } = this.props;
+    const { currentEntity } = 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 }
+        >
+          { this.userSelector }
+          <Action
+            label="submit"
+            type="submit"
+            disabled={ orgUsersSelectorDisabled }
+          >
+            Add user to this { currentEntity }
+          </Action>
+        </Form>
+      </div>
+    );
+  }
+
+}
+
+OrgUsersSelector.propTypes = propTypes;
+
+OrgUsersSelector.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._orgUsersSelectorDisabled = 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._orgUsersSelectorDisabled = 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));
   }
 
+  orgUsersSelectorDisabled() {
+    return this._orgUsersSelectorDisabled;
+  }
+
   inviteDisabled() {
     return this._inviteDisabled;
   }

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

@@ -0,0 +1,64 @@
+import '../../global_setup.js';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Form, FormSelect } from '../../../components/form';
+import OrgUsersSelector from '../../../components/users_org_user_selector.jsx';
+import PanelDocumentation from '../../../components/panel_documentation.jsx';
+
+describe('<OrgUsersSelector />', function () {
+  const parentEntityType = 'organization';
+  const entityType = 'space';
+  const props = {
+    currentUserAccess: true,
+    orgUsersSelectorDisabled: false,
+    parentEntityUsers: [],
+    error: {},
+    parentEntity: parentEntityType,
+    currentEntityGuid: 'a-space-guid',
+    currentEntity: entityType
+  };
+  let wrapper;
+
+
+  describe('when the working description is displayed as text panel', () => {
+    beforeEach(() => {
+      wrapper = shallow(<OrgUsersSelector { ...props } />);
+    });
+
+    it('displays proper message', () => {
+      const doc = 'Invite an existing user in this organization to this space.';
+      expect(wrapper.find(PanelDocumentation).find('p').text()).toBe(doc);
+    });
+  });
+
+  describe('when user selector', () => {
+    it('renders users', () => {
+      const username = 'username';
+      const guid = 'a-guid';
+      const user = { guid, username };
+      const parentEntityUsers = [user, user, user];
+      const usersProps = Object.assign({}, props, { parentEntityUsers });
+      wrapper = shallow(<OrgUsersSelector { ...usersProps } />);
+      const formSelect = wrapper.find(Form).find(FormSelect);
+      expect(formSelect.length).toEqual(1);
+      expect(formSelect.props().options.length).toEqual(3);
+    });
+    it('renders without users', () => {
+      const usersProps = Object.assign({}, props, { parentEntityUsers: [] });
+      wrapper = shallow(<OrgUsersSelector { ...usersProps } />);
+      const formSelect = wrapper.find(Form).find(FormSelect);
+      expect(formSelect.length).toEqual(1);
+      expect(formSelect.props().options.length).toEqual(0);
+    });
+  });
+
+  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(<OrgUsersSelector { ...noAccessProps } />);
+
+      expect(wrapper.find(Form).length).toEqual(0);
+    });
+  });
+});

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

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