implimenting toggle on person status and refactoring rendering of table components

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

@@ -14,7 +14,6 @@ const buttonStyle = {
 const People = (props) => {
 
   const {
-    people = [],
     orgUI = {},
     handleToggle,
   } = props;
@@ -37,9 +36,7 @@ const People = (props) => {
 
       <Row>
         <Column xs={12}>
-          <PeopleTable
-            people={people}
-          />
+          <PeopleTable {...props} />
         </Column>
       </Row>
     </div>
@@ -49,7 +46,6 @@ const People = (props) => {
 People.propTypes = {
   handleToggle: React.PropTypes.func,
   orgUI: React.PropTypes.object,
-  people: React.PropTypes.array
 };
 
 module.exports = People;

frontend/src/components/people-list/person-role.js

@@ -0,0 +1,18 @@
+const React = require('react');
+
+const PersonRole = (props) => {
+
+  const {
+    role
+  } = props;
+
+  return (
+    <span>{role}</span>
+  );
+};
+
+PersonRole.propTypes = {
+  role: React.PropTypes.string
+};
+
+module.exports = PersonRole;

frontend/src/components/people-list/person-status.js

@@ -0,0 +1,65 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const fns = require('@ui/shared/functions');
+const composers = require('@ui/shared/composers');
+
+const {
+  pseudoEl
+} = composers;
+
+const {
+  default: styled
+} = Styled;
+
+const {
+  remcalc
+} = fns;
+
+const borderSide = props => props.toggled
+  ? 'bottom'
+  : 'top';
+
+const StyledWrapper = styled.div`
+  position: relative;
+  
+  &:after {
+    border-left: ${remcalc(5)} solid transparent;
+    border-right: ${remcalc(5)} solid transparent;
+    border-${borderSide}: ${remcalc(5)} solid black;
+    
+    ${pseudoEl({
+      top: '50%',
+      right: remcalc(10)
+    })}
+  }
+`;
+
+const PersonStatus = (props) => {
+
+  const {
+    toggled,
+    person,
+    handleStatusTooltip
+  } = props;
+
+  return (
+    <StyledWrapper toggled={toggled}>
+      <a
+        onClick={handleStatusTooltip}
+        role="tooltip"
+        tabIndex="0"
+      >
+        {person.status}
+      </a>
+    </StyledWrapper>
+  );
+};
+
+PersonStatus.propTypes = {
+  handleStatusTooltip: React.PropTypes.bool,
+  person: React.PropTypes.object,
+  toggled: React.PropTypes.bool,
+};
+
+module.exports = PersonStatus;

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

@@ -3,9 +3,16 @@ const React = require('react');
 const Table = require('@ui/components/table-data-table');
 const Checkbox  = require('@ui/components/checkbox');
 
-const PeopleTable = ({
-  people = []
-}) => {
+const PersonStatus = require('./person-status');
+const PersonRole = require('./person-role');
+
+const PeopleTable = (props) => {
+
+  const {
+    handleStatusTooltip,
+    people = [],
+    orgUI = {}
+  } = props;
 
   const columns = [{
     title: <Checkbox />,
@@ -24,13 +31,23 @@ const PeopleTable = ({
     width: '10%' // Empty title for delete
   }];
 
-  const data = people.map( (person) => ({
-    checkbox: <Checkbox />,
-    name: person.name,
-    status: person.status,
-    role: person.role,
-    bin: ''
-  }));
+  const data = people.map( (person) => {
+    const status = (person) => (
+      <PersonStatus
+        handleStatusTooltip={handleStatusTooltip}
+        person={person}
+        toggled={orgUI.member_role_tooltip}
+      />
+    );
+
+    return {
+      checkbox: <Checkbox />,
+      name: person.name,
+      status: status(person),
+      role: <PersonRole role={person.role} />,
+      bin: ''
+    };
+  });
 
   return (
     <Table
@@ -41,7 +58,9 @@ const PeopleTable = ({
 };
 
 PeopleTable.propTypes = {
-  people: React.PropTypes.array
+  handleStatusTooltip: React.PropTypes.bool,
+  orgUI: React.PropTypes.object,
+  people: React.PropTypes.array,
 };
 
 module.exports = PeopleTable;

frontend/src/containers/org/people.js

@@ -16,7 +16,8 @@ const {
 } = selectors;
 
 const {
-  handleInviteToggle
+  handleInviteToggle,
+  handlePeopleStatusTooltip
 } = actions;
 
 const People = (props) => {
@@ -37,7 +38,8 @@ const mapStateToProps = (state, {
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  handleToggle: () => dispatch(handleInviteToggle())
+  handleToggle: () => dispatch(handleInviteToggle()),
+  handleStatusTooltip: () => dispatch(handlePeopleStatusTooltip())
 });
 
 module.exports = connect(

frontend/src/mock-state.json

@@ -199,6 +199,7 @@
   "orgs": {
     "ui": {
       "invite_toggled": true,
+      "member_role_tooltip": false,
       "sections": [
         "projects",
         "people",

frontend/src/state/actions.js

@@ -16,5 +16,7 @@ module.exports = {
   toggleInstanceCollapsed: createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`),
   toggleMonitorView: createAction(`${APP}/TOGGLE_MONITOR_VIEW`),
   switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`),
-  handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`)
+  handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`),
+  handlePeopleStatusTooltip:
+      createAction(`${APP}/HANDLE_PERSON_STATUS_TOOLTIP`),
 };

frontend/src/state/reducers/orgs.js

@@ -7,7 +7,8 @@ const {
 } = ReduxActions;
 
 const {
-  handleInviteToggle
+  handleInviteToggle,
+  handlePeopleStatusTooltip
 } = actions;
 
 module.exports = handleActions({
@@ -19,5 +20,14 @@ module.exports = handleActions({
         invite_toggled: !state.ui.invite_toggled
       }
     };
+  },
+  [handlePeopleStatusTooltip.toString()]: (state, action) => {
+    return {
+      ...state,
+      ui: {
+        ...state.ui,
+        member_role_tooltip: !state.ui.member_role_tooltip
+      }
+    };
   }
 }, {});