adding in invite input module

frontend/src/components/people-list/index.js

@@ -6,6 +6,7 @@ const Column = require('@ui/components/column');
 const Button = require('@ui/components/button');
 
 const PeopleTable = require('./table');
+const Invite = require('./invite');
 
 const buttonStyle = {
   float: 'right'
@@ -16,7 +17,7 @@ const People = (props) => {
   const {
     people = [],
     orgUI = {},
-    handleToggle
+    handleToggle,
   } = props;
 
   return (
@@ -33,6 +34,8 @@ const People = (props) => {
         </Column>
       </Row>
 
+      {orgUI.invite_toggled ? <Invite {...props} /> : null}
+
       <Row>
         <Column xs={12}>
           <PeopleTable
@@ -47,7 +50,7 @@ const People = (props) => {
 People.propTypes = {
   handleToggle: React.PropTypes.func,
   orgUI: React.PropTypes.obj,
-  people: React.PropTypes.arrayOf(PropTypes.person),
+  people: React.PropTypes.arrayOf(PropTypes.person)
 };
 
 module.exports = People;

frontend/src/components/people-list/invite.js

@@ -0,0 +1,104 @@
+const React = require('react');
+
+const Row = require('@ui/components/row');
+const Column = require('@ui/components/column');
+const Button = require('@ui/components/button');
+const SelectCustom = require('@ui/components/select-custom');
+
+const Invite = (props) => {
+
+  const {
+    people = [],
+    handleToggle,
+    platformMembers
+  } = props;
+
+  const InputStyle = {
+    float: 'left',
+    width: '75%'
+  };
+
+  const AddButtonStyle = {
+    float: 'right',
+    width: '20%'
+  };
+
+  const styleInline = {
+    display: 'inline-block'
+  };
+
+  const selectData = [
+    {
+      value: 'one',
+      label: 'One'
+    },
+    {
+      value: 'two',
+      label: 'Two'
+    },
+    {
+      value: 'three',
+      label: 'Three'
+    },
+    {
+      value: 'four',
+      label: 'Four'
+    },
+    {
+      value: 'five',
+      label: 'Five'
+    },
+    {
+      value: 'six',
+      label: 'Six'
+    }
+  ];
+
+  return (
+    <Row>
+      <Column xs={6}>
+        <p>Search for a person by name or email or enter an email address
+          to invite someone new.</p>
+
+        <Row>
+          <Column xs={12}>
+            <SelectCustom
+              placeholder="Enter an email address or password"
+              multi
+              onChange={function noop() {}}
+              options={selectData}
+            />
+            <Button
+              style={AddButtonStyle}
+              secondary
+            >
+              Add
+            </Button>
+          </Column>
+        </Row>
+
+        <Button
+          secondary
+          style={styleInline}
+          onClick={handleToggle}
+        >
+          Cancel
+        </Button>
+
+        <Button
+          style={styleInline}
+        >
+          Send Invitation(s)
+        </Button>
+      </Column>
+    </Row>
+  );
+};
+
+Invite.propTypes = {
+  handleToggle: React.PropTypes.func,
+  orgUI: React.PropTypes.obj,
+  people: React.PropTypes.arrayOf(PropTypes.person)
+};
+
+module.exports = Invite;

frontend/src/containers/org/people.js

@@ -11,7 +11,8 @@ const {
 
 const {
   peopleByOrgIdSelector,
-  orgUISelector
+  orgUISelector,
+  membersSelector
 } = selectors;
 
 const {
@@ -31,7 +32,8 @@ const mapStateToProps = (state, {
   params = {}
 }) => ({
   people: peopleByOrgIdSelector(params.org)(state),
-  orgUI: orgUISelector(state)
+  orgUI: orgUISelector(state),
+  platformMembers: membersSelector(state)
 });
 
 const mapDispatchToProps = (dispatch) => ({

frontend/src/mock-state.json

@@ -198,7 +198,7 @@
   },
   "orgs": {
     "ui": {
-      "invite_toggled": false,
+      "invite_toggled": true,
       "sections": [
         "projects",
         "people",

frontend/src/state/reducers/orgs.js

@@ -1,9 +1,23 @@
 const ReduxActions = require('redux-actions');
 
+const actions = require('@state/actions');
+
 const {
   handleActions
 } = ReduxActions;
 
+const {
+  handleInviteToggle
+} = actions;
+
 module.exports = handleActions({
-  'x': (state) => state // somehow handleActions needs at least one reducer
+  [handleInviteToggle.toString()]: (state, action) => {
+    return {
+      ...state,
+      ui: {
+        ...state.ui,
+        invite_toggled: !state.ui.invite_toggled
+      }
+    };
+  }
 }, {});

frontend/src/state/selectors.js

@@ -143,5 +143,6 @@ module.exports = {
   metricsByServiceIdSelector: metricsByServiceId,
   instancesByProjectIdSelector: instancesByProjectId,
   metricTypeByUuidSelector: metricTypeByUuid,
-  peopleByOrgIdSelector: peopleByOrgId
+  peopleByOrgIdSelector: peopleByOrgId,
+  membersSelector: members,
 };