adding html components to table and splitting module into component and container directories

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

@@ -1,41 +1,53 @@
 const React = require('react');
 
 const PropTypes = require('@root/prop-types');
-const Table = require('@ui/components/table-data-table');
+const Row = require('@ui/components/row');
+const Column = require('@ui/components/column');
+const Button = require('@ui/components/button');
 
-const PeopleList = ({
-  people = []
-}) => {
-  const columns = [{
-    title: 'Member',
-  }, {
-    title: 'Status',
-  }, {
-    title: 'Role',
-  }, {
-    title: '', // Empty title for delete
-  }];
+const PeopleTable = require('./table');
 
-  const data = [];
+const buttonStyle = {
+  float: 'right'
+};
 
-  people.forEach( (person) => {
-    data.push({
-      name: person.name,
-      status: person.status,
-      role: person.role,
-    });
-  });
+const People = (props) => {
+
+  const {
+    people = [],
+    orgUI = {},
+    handleToggle
+  } = props;
 
   return (
-    <Table
-      columns={columns}
-      data={data}
+    <div>
+      <Row>
+        <Column smOffset={9} xs={2}>
+          <Button
+            disabled={orgUI.invite_toggled}
+            onClick={handleToggle}
+            style={buttonStyle}
+          >
+            Invite
+          </Button>
+        </Column>
+      </Row>
+
+      <Row>
+        <Column xs={12}>
+          <PeopleTable
+            people={people}
           />
+        </Column>
+      </Row>
+    </div>
   );
 };
 
-PeopleList.propTypes = {
+People.propTypes = {
+  handleToggle: React.PropTypes.func,
+  orgUI: React.PropTypes.obj,
   people: React.PropTypes.arrayOf(PropTypes.person),
 };
 
-module.exports = PeopleList;
+module.exports = People;

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

@@ -0,0 +1,47 @@
+const React = require('react');
+
+const PropTypes = require('@root/prop-types');
+const Table = require('@ui/components/table-data-table');
+const Checkbox  = require('@ui/components/checkbox');
+
+const PeopleTable = ({
+  people = []
+}) => {
+  const columns = [{
+    title: <Checkbox />,
+    width: '5%'
+  }, {
+    title: 'Member',
+    width: '35%'
+  }, {
+    title: 'Status',
+    width: '25%'
+  }, {
+    title: 'Role',
+    width: '25%'
+  }, {
+    title: '',
+    width: '10%' // Empty title for delete
+  }];
+
+  const data = people.map( (person) => ({
+    checkbox: <Checkbox />,
+    name: person.name,
+    status: person.status,
+    role: person.role,
+    bin: ''
+  }));
+
+  return (
+    <Table
+      columns={columns}
+      data={data}
+    />
+  );
+};
+
+PeopleTable.propTypes = {
+  people: React.PropTypes.arrayOf(PropTypes.person)
+};
+
+module.exports = PeopleTable;

frontend/src/containers/org/people.js

@@ -1,69 +1,42 @@
 const React = require('react');
-// const ReactIntl = require('react-intl');
 const ReactRedux = require('react-redux');
-// const ReactRouter = require('react-router');
-
-const Row = require('@ui/components/row');
-const Column= require('@ui/components/column');
-const Button= require('@ui/components/button');
-const PropTypes = require('@root/prop-types');
-const PeopleList = require('@components/people-list');
+const PeopleSection = require('@components/people-list');
 const selectors = require('@state/selectors');
-
 const Section = require('./section');
-
-// const {
-//   FormattedMessage
-// } = ReactIntl;
+const actions = require('@state/actions');
 
 const {
   connect
 } = ReactRedux;
 
 const {
-  peopleByOrgIdSelector
+  peopleByOrgIdSelector,
+  orgUISelector
 } = selectors;
 
-const buttonStyle = {
-  float: 'right'
-};
+const {
+  handleInviteToggle
+} = actions;
 
 const People = (props) => {
 
-  const {
-    people = []
-  } = props;
-
   return (
     <Section {...props}>
-      <Row>
-        <Column smOffset={9} xs={2}>
-          <Button style={buttonStyle}>Invite</Button>
-        </Column>
-      </Row>
-
-      <Row>
-        <Column xs={12}>
-          <PeopleList
-            people={people}
-          />
-        </Column>
-      </Row>
+      <PeopleSection {...props} />
     </Section>
   );
 };
 
-People.propTypes = {
-  people: React.PropTypes.arrayOf(PropTypes.person)
-};
-
 const mapStateToProps = (state, {
   params = {}
 }) => ({
-  people: peopleByOrgIdSelector(params.org)(state)
+  people: peopleByOrgIdSelector(params.org)(state),
+  orgUI: orgUISelector(state)
 });
 
-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = (dispatch) => ({
+  handleToggle: () => dispatch(handleInviteToggle())
+});
 
 module.exports = connect(
   mapStateToProps,

frontend/src/mock-state.json

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

frontend/src/state/actions.js

@@ -15,5 +15,6 @@ module.exports = {
   addMetric: createAction(`${APP}/ADD_METRIC`),
   toggleInstanceCollapsed: createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`),
   toggleMonitorView: createAction(`${APP}/TOGGLE_MONITOR_VIEW`),
-  switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`)
+  switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`),
+  handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`)
 };

frontend/src/state/selectors.js

@@ -13,6 +13,7 @@ const orgUiSections = (state) => get(state, 'orgs.ui.sections', []);
 const projectUiSections = (state) => get(state, 'projects.ui.sections', []);
 const serviceUiSections = (state) => get(state, 'services.ui.sections', []);
 const orgs = (state) => get(state, 'orgs.data', []);
+const orgUI = (state) => get(state, 'orgs.ui', []);
 const projects = (state) => get(state, 'projects.data', []);
 const services = (state) => get(state, 'services.data', []);
 const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
@@ -129,6 +130,7 @@ module.exports = {
   accountUISelector: accountUi,
   orgByIdSelector: orgById,
   orgsSelector: orgs,
+  orgUISelector: orgUI,
   servicesSelector: services,
   serviceByIdSelector: serviceById,
   orgSectionsSelector: orgSections,