From 16d67e9a47ad7807f30a1625b39b41c6cccf366f Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 23 Jan 2017 15:47:45 +0000 Subject: [PATCH 01/18] adding in invite input module --- frontend/src/components/people-list/index.js | 7 +- frontend/src/components/people-list/invite.js | 104 ++++++++++++++++++ frontend/src/containers/org/people.js | 6 +- frontend/src/mock-state.json | 2 +- frontend/src/state/reducers/orgs.js | 16 ++- frontend/src/state/selectors.js | 3 +- 6 files changed, 131 insertions(+), 7 deletions(-) create mode 100644 frontend/src/components/people-list/invite.js diff --git a/frontend/src/components/people-list/index.js b/frontend/src/components/people-list/index.js index 0d791a02..6d91b4b2 100644 --- a/frontend/src/components/people-list/index.js +++ b/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) => { + {orgUI.invite_toggled ? : null} + { 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; \ No newline at end of file diff --git a/frontend/src/components/people-list/invite.js b/frontend/src/components/people-list/invite.js new file mode 100644 index 00000000..c04af5e7 --- /dev/null +++ b/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 ( + + +

Search for a person by name or email or enter an email address + to invite someone new.

+ + + + + + + + + + + + + + ); +}; + +Invite.propTypes = { + handleToggle: React.PropTypes.func, + orgUI: React.PropTypes.obj, + people: React.PropTypes.arrayOf(PropTypes.person) +}; + +module.exports = Invite; \ No newline at end of file diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js index a9ca21b7..99e487a0 100644 --- a/frontend/src/containers/org/people.js +++ b/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) => ({ diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json index b2609be4..c942b5f0 100644 --- a/frontend/src/mock-state.json +++ b/frontend/src/mock-state.json @@ -198,7 +198,7 @@ }, "orgs": { "ui": { - "invite_toggled": false, + "invite_toggled": true, "sections": [ "projects", "people", diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js index 7fec06fb..e0243100 100644 --- a/frontend/src/state/reducers/orgs.js +++ b/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 + } + }; + } }, {}); diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js index 894ccc42..69fba90f 100644 --- a/frontend/src/state/selectors.js +++ b/frontend/src/state/selectors.js @@ -143,5 +143,6 @@ module.exports = { metricsByServiceIdSelector: metricsByServiceId, instancesByProjectIdSelector: instancesByProjectId, metricTypeByUuidSelector: metricTypeByUuid, - peopleByOrgIdSelector: peopleByOrgId + peopleByOrgIdSelector: peopleByOrgId, + membersSelector: members, }; From df53c76f247a067d66c44a0fd596ef12113f8fce Mon Sep 17 00:00:00 2001 From: Casey Bisson Date: Mon, 23 Jan 2017 08:28:01 -0800 Subject: [PATCH 02/18] Give context and non-support message --- README.md | 38 +++++++++++++++++++++----------------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 7cf7e02b..d6617767 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,30 @@ [![CircleCI](https://circleci.com/gh/yldio/joyent-portal.svg?style=shield&circle-token=0bbeaaafc4868c707ca0ed0568f5193a04daddb4)](https://circleci.com/gh/yldio/joyent-portal) [![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg)](https://opensource.org/licenses/MPL-2.0) -# Joyent Portal +# Protype Triton Portal -Before you begin, you will need to install ensure that `docker` and `docker-compose` are installed correctly, -this can be done by running `make`, make continues without any errors, then you are good to go. +This is a prototype project intended to explore some ideas that might contribute to new capabilities and a new user experience for managing applications on [Joyent's Triton](https://www.joyent.com/triton). + +**This is not intended for general use and is completely unsupported.** + +## Development + +If you would like to contribute to the project, the recommended way to setup is to +insure that you have docker installed, and optionally have a triton account and profile +setup using the triton tool. + +Currently requires [yarn](https://yarnpkg.com/en/docs/install) for installing dependencies, +as well as `docker` and `docker-compose` are installed correctly, this can be done by +running `make`, make continues without any errors, then you are good to go. + +``` +make && make install +``` + +Then to run each individual component locally (subject to change). ## Setup + ```sh make ``` @@ -22,20 +40,6 @@ docker-compose -f local-compose.yml up -d This will run the front-end at [http://127.0.0.1:8000](http://127.0.0.1:8000), the UI framework at [http://127.0.0.1:8001](http://127.0.0.1:8001), -## Development - -If you would like to contribute to the project, the recommended way to setup is to -insure that you have docker installed, and optionally have a triton account and profile -setup using the triton tool. - -Currently requires [yarn](https://yarnpkg.com/en/docs/install) for installing dependencies. - -``` -make && make install -``` - -Then to run each individual component locally (subject to change). - ## Project Management This project is using [Github Projects](https://www.youtube.com/watch?v=C6MGKHkNtxU) for organisation and development of the Joyent Dashboard. From 139247fc09fddefd6d6213bcf7a26be4977d7329 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 23 Jan 2017 16:26:40 +0000 Subject: [PATCH 03/18] fixing linting errors --- frontend/src/components/people-list/invite.js | 16 +++++++++------- frontend/webpack/base.js | 15 +++++++++------ ui/src/components/select-custom/index.js | 4 +++- 3 files changed, 21 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/people-list/invite.js b/frontend/src/components/people-list/invite.js index c04af5e7..4e2a1de0 100644 --- a/frontend/src/components/people-list/invite.js +++ b/frontend/src/components/people-list/invite.js @@ -1,5 +1,6 @@ const React = require('react'); +// const PropTypes = require('@root/prop-types'); const Row = require('@ui/components/row'); const Column = require('@ui/components/column'); const Button = require('@ui/components/button'); @@ -8,9 +9,9 @@ const SelectCustom = require('@ui/components/select-custom'); const Invite = (props) => { const { - people = [], + // people = [], handleToggle, - platformMembers + // platformMembers } = props; const InputStyle = { @@ -63,14 +64,15 @@ const Invite = (props) => { @@ -78,9 +80,9 @@ const Invite = (props) => { @@ -97,8 +99,8 @@ const Invite = (props) => { Invite.propTypes = { handleToggle: React.PropTypes.func, - orgUI: React.PropTypes.obj, - people: React.PropTypes.arrayOf(PropTypes.person) + // orgUI: React.PropTypes.obj, + // people: React.PropTypes.arrayOf(PropTypes.person) }; module.exports = Invite; \ No newline at end of file diff --git a/frontend/webpack/base.js b/frontend/webpack/base.js index 89c61179..7bf6ee93 100644 --- a/frontend/webpack/base.js +++ b/frontend/webpack/base.js @@ -86,12 +86,15 @@ module.exports = { }, { test: /\.css$/, - exclude: /node_modules/, - loaders: [ 'style-loader', 'css-loader' ], - include: [ - FRONTEND, - UI - ] + loader: 'style-loader!css-loader' + // XXXX : Commenting out breaks node_modules that use css + // i.e react-select. + + // exclude: /node_modules/, + // include: [ + // FRONTEND, + // UI + // ] }] } }; diff --git a/ui/src/components/select-custom/index.js b/ui/src/components/select-custom/index.js index d4a7a81b..f2bd9bca 100644 --- a/ui/src/components/select-custom/index.js +++ b/ui/src/components/select-custom/index.js @@ -38,11 +38,12 @@ const SelectCustom = ({ onChange, options, required = false, + style, value = '' }) => { return ( -
+
{label} @@ -76,6 +77,7 @@ SelectCustom.propTypes = { onChange: React.PropTypes.func, options: React.PropTypes.array, required: React.PropTypes.bool, + style: React.PropTypes.object, value: React.PropTypes.string }; From 05c04a15a14fd93bc78f0114ff08f14f4c7c57ec Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 23 Jan 2017 16:44:56 +0000 Subject: [PATCH 04/18] removing custom input as its causes compliation errors --- frontend/src/components/people-list/invite.js | 77 ++++++++++--------- 1 file changed, 39 insertions(+), 38 deletions(-) diff --git a/frontend/src/components/people-list/invite.js b/frontend/src/components/people-list/invite.js index 4e2a1de0..2771f859 100644 --- a/frontend/src/components/people-list/invite.js +++ b/frontend/src/components/people-list/invite.js @@ -4,7 +4,7 @@ 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 SelectCustom = require('@ui/components/select-custom'); const Invite = (props) => { @@ -14,10 +14,10 @@ const Invite = (props) => { // platformMembers } = props; - const InputStyle = { - float: 'left', - width: '75%' - }; + // const InputStyle = { + // float: 'left', + // width: '75%' + // }; const AddButtonStyle = { float: 'right', @@ -28,32 +28,32 @@ const Invite = (props) => { 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' - } - ]; + // 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 ( @@ -63,13 +63,14 @@ const Invite = (props) => { - + {/*TODO: Fix why there are issues with webpack and nodemodules*/} + {/**/}
@@ -49,7 +46,6 @@ const People = (props) => { People.propTypes = { handleToggle: React.PropTypes.func, orgUI: React.PropTypes.object, - people: React.PropTypes.array }; module.exports = People; \ No newline at end of file diff --git a/frontend/src/components/people-list/person-role.js b/frontend/src/components/people-list/person-role.js new file mode 100644 index 00000000..5844b042 --- /dev/null +++ b/frontend/src/components/people-list/person-role.js @@ -0,0 +1,18 @@ +const React = require('react'); + +const PersonRole = (props) => { + + const { + role + } = props; + + return ( + {role} + ); +}; + +PersonRole.propTypes = { + role: React.PropTypes.string +}; + +module.exports = PersonRole; \ No newline at end of file diff --git a/frontend/src/components/people-list/person-status.js b/frontend/src/components/people-list/person-status.js new file mode 100644 index 00000000..3a93b9a6 --- /dev/null +++ b/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 ( + + + {person.status} + + + ); +}; + +PersonStatus.propTypes = { + handleStatusTooltip: React.PropTypes.bool, + person: React.PropTypes.object, + toggled: React.PropTypes.bool, +}; + +module.exports = PersonStatus; \ No newline at end of file diff --git a/frontend/src/components/people-list/table.js b/frontend/src/components/people-list/table.js index 8198659e..0af1d367 100644 --- a/frontend/src/components/people-list/table.js +++ b/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: , @@ -24,13 +31,23 @@ const PeopleTable = ({ width: '10%' // Empty title for delete }]; - const data = people.map( (person) => ({ - checkbox: , - name: person.name, - status: person.status, - role: person.role, - bin: '' - })); + const data = people.map( (person) => { + const status = (person) => ( + + ); + + return { + checkbox: , + name: person.name, + status: status(person), + role: , + bin: '' + }; + }); return ( { @@ -37,7 +38,8 @@ const mapStateToProps = (state, { }); const mapDispatchToProps = (dispatch) => ({ - handleToggle: () => dispatch(handleInviteToggle()) + handleToggle: () => dispatch(handleInviteToggle()), + handleStatusTooltip: () => dispatch(handlePeopleStatusTooltip()) }); module.exports = connect( diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json index c942b5f0..be4d72b1 100644 --- a/frontend/src/mock-state.json +++ b/frontend/src/mock-state.json @@ -199,6 +199,7 @@ "orgs": { "ui": { "invite_toggled": true, + "member_role_tooltip": false, "sections": [ "projects", "people", diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js index e24eb3c6..ccbec33d 100644 --- a/frontend/src/state/actions.js +++ b/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`), }; diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js index e0243100..7332b38d 100644 --- a/frontend/src/state/reducers/orgs.js +++ b/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 + } + }; } }, {}); From 858bb79d3a20b4bec475e7ebd9017a0da283eb32 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 24 Jan 2017 10:12:53 +0000 Subject: [PATCH 07/18] correcting propTypes --- frontend/src/components/people-list/person-status.js | 2 +- frontend/src/components/people-list/table.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/people-list/person-status.js b/frontend/src/components/people-list/person-status.js index 3a93b9a6..ebb8cb0b 100644 --- a/frontend/src/components/people-list/person-status.js +++ b/frontend/src/components/people-list/person-status.js @@ -57,7 +57,7 @@ const PersonStatus = (props) => { }; PersonStatus.propTypes = { - handleStatusTooltip: React.PropTypes.bool, + handleStatusTooltip: React.PropTypes.func, person: React.PropTypes.object, toggled: React.PropTypes.bool, }; diff --git a/frontend/src/components/people-list/table.js b/frontend/src/components/people-list/table.js index 0af1d367..2c9140f5 100644 --- a/frontend/src/components/people-list/table.js +++ b/frontend/src/components/people-list/table.js @@ -58,7 +58,7 @@ const PeopleTable = (props) => { }; PeopleTable.propTypes = { - handleStatusTooltip: React.PropTypes.bool, + handleStatusTooltip: React.PropTypes.func, orgUI: React.PropTypes.object, people: React.PropTypes.array, }; From 019ecd4d9639197b28755924947e371df4007294 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 24 Jan 2017 11:01:48 +0000 Subject: [PATCH 08/18] updating toggle to take person uuid instead of bool --- .../components/people-list/person-status.js | 50 ++++++++++++++++--- frontend/src/components/people-list/table.js | 2 +- frontend/src/containers/org/people.js | 2 +- frontend/src/state/reducers/orgs.js | 3 +- 4 files changed, 46 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/people-list/person-status.js b/frontend/src/components/people-list/person-status.js index ebb8cb0b..3a91a2de 100644 --- a/frontend/src/components/people-list/person-status.js +++ b/frontend/src/components/people-list/person-status.js @@ -1,6 +1,7 @@ const React = require('react'); const Styled = require('styled-components'); +const Tooltip = require('@ui/components/tooltip'); const fns = require('@ui/shared/functions'); const composers = require('@ui/shared/composers'); @@ -35,23 +36,56 @@ const StyledWrapper = styled.div` } `; +const arrowPosition = { + bottom: '100%', + right: '10%' +}; + +const tooltipStyle = { + position: 'absolute', + top: 0, + 'z-index': 1 +}; + +const PlainButton = styled.button` + background: transparent; + font-size: inherit; + border: none; + z-index: 0; + font-family: inherit; + color: inherit; +`; + +const tooltip = (person) => ( + +
  • Admin
    • +
  • Read Only
    • +
  • Unassigned
    • +     +); + const PersonStatus = (props) => { const { - toggled, + toggledID, person, handleStatusTooltip } = props; + const toggled = toggledID; + const handleClick = () => handleStatusTooltip(person.uuid); + return ( - + {person.status} - + + + {toggledID === person.uuid ? tooltip(person) : null} ); }; @@ -59,7 +93,7 @@ const PersonStatus = (props) => { PersonStatus.propTypes = { handleStatusTooltip: React.PropTypes.func, person: React.PropTypes.object, - toggled: React.PropTypes.bool, + toggledID: React.PropTypes.string, }; module.exports = PersonStatus; \ No newline at end of file diff --git a/frontend/src/components/people-list/table.js b/frontend/src/components/people-list/table.js index 2c9140f5..2060258b 100644 --- a/frontend/src/components/people-list/table.js +++ b/frontend/src/components/people-list/table.js @@ -36,7 +36,7 @@ const PeopleTable = (props) => { ); diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js index 461208ac..32e348e6 100644 --- a/frontend/src/containers/org/people.js +++ b/frontend/src/containers/org/people.js @@ -39,7 +39,7 @@ const mapStateToProps = (state, { const mapDispatchToProps = (dispatch) => ({ handleToggle: () => dispatch(handleInviteToggle()), - handleStatusTooltip: () => dispatch(handlePeopleStatusTooltip()) + handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id)) }); module.exports = connect( diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js index 7332b38d..52181e4c 100644 --- a/frontend/src/state/reducers/orgs.js +++ b/frontend/src/state/reducers/orgs.js @@ -26,7 +26,8 @@ module.exports = handleActions({ ...state, ui: { ...state.ui, - member_role_tooltip: !state.ui.member_role_tooltip + member_role_tooltip: + action.payload === state.ui.member_role_tooltip ? '' : action.payload } }; } From 16482ece3701f56da53e5935d53ba1452725c764 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 24 Jan 2017 11:03:33 +0000 Subject: [PATCH 09/18] updating tooltip component to take style props in css --- ui/src/components/tooltip/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ui/src/components/tooltip/index.js b/ui/src/components/tooltip/index.js index cb4ab090..7aa71e00 100644 --- a/ui/src/components/tooltip/index.js +++ b/ui/src/components/tooltip/index.js @@ -33,6 +33,8 @@ const StyledList = styled.ul` margin: 0; padding: ${remcalc(ulPadder)}; min-width: ${remcalc(200)}; + + ${props => props.style} ${baseBox()} @@ -79,6 +81,7 @@ module.exports = ({ {children} From 62f9598c5c1b026ba85ed909eb83a4eac5eb7024 Mon Sep 17 00:00:00 2001 From: Tom Gallacher Date: Tue, 24 Jan 2017 11:47:51 +0000 Subject: [PATCH 10/18] Update instance sizes in triton --- docker-compose.yml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 02ad5b0d..709b43da 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -17,7 +17,7 @@ consul: - 8500 env_file: .env ports: - - 8500:8500 + - 8500 command: -server -bootstrap -ui-dir /ui ############################################################################# # CloudAPI GraphQL @@ -39,7 +39,7 @@ cloudapi: ############################################################################# frontend: image: quay.io/yldio/joyent-dashboard-frontend:latest - mem_limit: 256m + mem_limit: 512m labels: - triton.cns.services=frontend - com.docker.swarm.affinities=["container!=~*frontend*"] @@ -54,7 +54,7 @@ frontend: ############################################################################# ui: image: quay.io/yldio/joyent-dashboard-ui:latest - mem_limit: 128m + mem_limit: 512m labels: - triton.cns.services=ui - com.docker.swarm.affinities=["container!=~*ui*"] @@ -68,7 +68,7 @@ ui: nginx: image: quay.io/yldio/joyent-portal-nginx restart: always - mem_limit: 128m + mem_limit: 256m ports: - 80:80 - 443:443 From deca0897a82c01a9b71fcd1d01ea05d41f8f2a18 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 24 Jan 2017 11:31:52 +0000 Subject: [PATCH 11/18] fixing proptype validation and syntax of "z-index" to "zIndex" --- frontend/src/components/people-list/person-status.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/people-list/person-status.js b/frontend/src/components/people-list/person-status.js index 3a91a2de..e316093d 100644 --- a/frontend/src/components/people-list/person-status.js +++ b/frontend/src/components/people-list/person-status.js @@ -44,14 +44,14 @@ const arrowPosition = { const tooltipStyle = { position: 'absolute', top: 0, - 'z-index': 1 + zIndex: 1 }; const PlainButton = styled.button` background: transparent; font-size: inherit; border: none; - z-index: 0; + zIndex: 0; font-family: inherit; color: inherit; `; @@ -93,7 +93,10 @@ const PersonStatus = (props) => { PersonStatus.propTypes = { handleStatusTooltip: React.PropTypes.func, person: React.PropTypes.object, - toggledID: React.PropTypes.string, + toggledID: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.bool, + ]) }; module.exports = PersonStatus; \ No newline at end of file From cf5505dee9e9f568f2135eae1f45b4354ba63d72 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 24 Jan 2017 13:39:41 +0000 Subject: [PATCH 12/18] creating table directory and moving tooltip to speerate file so it can re-used by role column --- .../people-list/{table.js => table/index.js} | 1 + .../people-list/{ => table}/person-role.js | 0 .../people-list/{ => table}/person-status.js | 32 +++++------------ .../components/people-list/table/tooltip.js | 34 +++++++++++++++++++ frontend/src/mock-state.json | 10 ++++++ 5 files changed, 53 insertions(+), 24 deletions(-) rename frontend/src/components/people-list/{table.js => table/index.js} (93%) rename frontend/src/components/people-list/{ => table}/person-role.js (100%) rename frontend/src/components/people-list/{ => table}/person-status.js (74%) create mode 100644 frontend/src/components/people-list/table/tooltip.js diff --git a/frontend/src/components/people-list/table.js b/frontend/src/components/people-list/table/index.js similarity index 93% rename from frontend/src/components/people-list/table.js rename to frontend/src/components/people-list/table/index.js index 2060258b..9265f12c 100644 --- a/frontend/src/components/people-list/table.js +++ b/frontend/src/components/people-list/table/index.js @@ -35,6 +35,7 @@ const PeopleTable = (props) => { const status = (person) => ( diff --git a/frontend/src/components/people-list/person-role.js b/frontend/src/components/people-list/table/person-role.js similarity index 100% rename from frontend/src/components/people-list/person-role.js rename to frontend/src/components/people-list/table/person-role.js diff --git a/frontend/src/components/people-list/person-status.js b/frontend/src/components/people-list/table/person-status.js similarity index 74% rename from frontend/src/components/people-list/person-status.js rename to frontend/src/components/people-list/table/person-status.js index e316093d..2f8fd0b7 100644 --- a/frontend/src/components/people-list/person-status.js +++ b/frontend/src/components/people-list/table/person-status.js @@ -1,10 +1,11 @@ const React = require('react'); const Styled = require('styled-components'); -const Tooltip = require('@ui/components/tooltip'); const fns = require('@ui/shared/functions'); const composers = require('@ui/shared/composers'); +const Tooltip = require('./tooltip'); + const { pseudoEl } = composers; @@ -36,17 +37,6 @@ const StyledWrapper = styled.div` } `; -const arrowPosition = { - bottom: '100%', - right: '10%' -}; - -const tooltipStyle = { - position: 'absolute', - top: 0, - zIndex: 1 -}; - const PlainButton = styled.button` background: transparent; font-size: inherit; @@ -56,22 +46,13 @@ const PlainButton = styled.button` color: inherit; `; -const tooltip = (person) => ( - -
  • Admin
    • -
  • Read Only
    • -
  • Unassigned
    • -     -); + const PersonStatus = (props) => { const { toggledID, + membersStatusOptions, person, handleStatusTooltip } = props; @@ -85,13 +66,16 @@ const PersonStatus = (props) => { {person.status} - {toggledID === person.uuid ? tooltip(person) : null} + { toggledID === person.uuid + ? + : null } ); }; PersonStatus.propTypes = { handleStatusTooltip: React.PropTypes.func, + membersStatusOptions: React.PropTypes.array, person: React.PropTypes.object, toggledID: React.PropTypes.oneOfType([ React.PropTypes.string, diff --git a/frontend/src/components/people-list/table/tooltip.js b/frontend/src/components/people-list/table/tooltip.js new file mode 100644 index 00000000..af2a0ec1 --- /dev/null +++ b/frontend/src/components/people-list/table/tooltip.js @@ -0,0 +1,34 @@ +const React = require('react'); + +const Tooltip = require('@ui/components/tooltip'); + +const tooltipStyle = { + position: 'absolute', + top: '30px', + zIndex: 1 +}; + +const arrowPosition = { + bottom: '100%', + right: '10%' +}; + +module.exports = ({ + person = {}, + options = [] +}) => { + return ( + + {options.map((o, i) =>
  • {o}
    • )} +     + ); +}; + +module.exports.propTypes = { + options: React.PropTypes.array, + person: React.PropTypes.object, +}; \ No newline at end of file diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json index be4d72b1..27ffcc94 100644 --- a/frontend/src/mock-state.json +++ b/frontend/src/mock-state.json @@ -204,6 +204,16 @@ "projects", "people", "settings" + ], + "members_status": [ + "Active", + "Inactive", + "Invitation Sent" + ], + "members_roles": [ + "Owner", + "Unnassigned", + "Read Only" ] }, "data": [{ From e4dc0a1a6f97ecc2257cb913d1f8098c141527e0 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 24 Jan 2017 13:57:24 +0000 Subject: [PATCH 13/18] implimenting roles toggle tooltip --- .../src/components/people-list/table/index.js | 13 +++- .../people-list/table/person-role.js | 74 ++++++++++++++++++- .../people-list/table/person-status.js | 4 +- frontend/src/containers/org/people.js | 6 +- frontend/src/mock-state.json | 1 + frontend/src/state/actions.js | 2 + frontend/src/state/reducers/orgs.js | 17 ++++- 7 files changed, 107 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/people-list/table/index.js b/frontend/src/components/people-list/table/index.js index 9265f12c..5219d2b1 100644 --- a/frontend/src/components/people-list/table/index.js +++ b/frontend/src/components/people-list/table/index.js @@ -9,6 +9,7 @@ const PersonRole = require('./person-role'); const PeopleTable = (props) => { const { + handleRoleTooltip, handleStatusTooltip, people = [], orgUI = {} @@ -37,6 +38,15 @@ const PeopleTable = (props) => { handleStatusTooltip={handleStatusTooltip} membersStatusOptions={orgUI.members_status} person={person} + toggledID={orgUI.member_status_tooltip} + /> + ); + + const role = (person) => ( + ); @@ -45,7 +55,7 @@ const PeopleTable = (props) => { checkbox: , name: person.name, status: status(person), - role: , + role: role(person), bin: '' }; }); @@ -59,6 +69,7 @@ const PeopleTable = (props) => { }; PeopleTable.propTypes = { + handleRoleTooltip: React.PropTypes.func, handleStatusTooltip: React.PropTypes.func, orgUI: React.PropTypes.object, people: React.PropTypes.array, diff --git a/frontend/src/components/people-list/table/person-role.js b/frontend/src/components/people-list/table/person-role.js index 5844b042..0b700e94 100644 --- a/frontend/src/components/people-list/table/person-role.js +++ b/frontend/src/components/people-list/table/person-role.js @@ -1,18 +1,86 @@ const React = require('react'); +const Styled = require('styled-components'); + +const fns = require('@ui/shared/functions'); +const composers = require('@ui/shared/composers'); + +const Tooltip = require('./tooltip'); + +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 PlainButton = styled.button` + background: transparent; + font-size: inherit; + border: none; + zIndex: 0; + font-family: inherit; + color: inherit; +`; + + const PersonRole = (props) => { const { - role + toggledID, + membersRolesOptions, + person, + handleRoleTooltip } = props; + const toggled = toggledID; + const handleClick = () => handleRoleTooltip(person.uuid); + return ( - {role} + + + {person.role} + + + { toggledID === person.uuid + ? + : null } + ); }; PersonRole.propTypes = { - role: React.PropTypes.string + handleRoleTooltip: React.PropTypes.func, + membersRolesOptions: React.PropTypes.array, + person: React.PropTypes.object, + toggledID: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.bool, + ]) }; module.exports = PersonRole; \ No newline at end of file diff --git a/frontend/src/components/people-list/table/person-status.js b/frontend/src/components/people-list/table/person-status.js index 2f8fd0b7..4aa1929a 100644 --- a/frontend/src/components/people-list/table/person-status.js +++ b/frontend/src/components/people-list/table/person-status.js @@ -46,15 +46,13 @@ const PlainButton = styled.button` color: inherit; `; - - const PersonStatus = (props) => { const { + handleStatusTooltip, toggledID, membersStatusOptions, person, - handleStatusTooltip } = props; const toggled = toggledID; diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js index 32e348e6..662cb563 100644 --- a/frontend/src/containers/org/people.js +++ b/frontend/src/containers/org/people.js @@ -17,7 +17,8 @@ const { const { handleInviteToggle, - handlePeopleStatusTooltip + handlePeopleRoleTooltip, + handlePeopleStatusTooltip, } = actions; const People = (props) => { @@ -39,7 +40,8 @@ const mapStateToProps = (state, { const mapDispatchToProps = (dispatch) => ({ handleToggle: () => dispatch(handleInviteToggle()), - handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id)) + handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id)), + handleRoleTooltip: (id) => dispatch(handlePeopleRoleTooltip(id)), }); module.exports = connect( diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json index 27ffcc94..1569cce6 100644 --- a/frontend/src/mock-state.json +++ b/frontend/src/mock-state.json @@ -199,6 +199,7 @@ "orgs": { "ui": { "invite_toggled": true, + "member_status_tooltip": false, "member_role_tooltip": false, "sections": [ "projects", diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js index ccbec33d..44f602fd 100644 --- a/frontend/src/state/actions.js +++ b/frontend/src/state/actions.js @@ -19,4 +19,6 @@ module.exports = { handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`), handlePeopleStatusTooltip: createAction(`${APP}/HANDLE_PERSON_STATUS_TOOLTIP`), + handlePeopleRoleTooltip: + createAction(`${APP}/HANDLE_PERSON_ROLE_TOOLTIP`), }; diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js index 52181e4c..1e633bb6 100644 --- a/frontend/src/state/reducers/orgs.js +++ b/frontend/src/state/reducers/orgs.js @@ -8,6 +8,7 @@ const { const { handleInviteToggle, + handlePeopleRoleTooltip, handlePeopleStatusTooltip } = actions; @@ -22,12 +23,26 @@ module.exports = handleActions({ }; }, [handlePeopleStatusTooltip.toString()]: (state, action) => { + return { + ...state, + ui: { + ...state.ui, + member_status_tooltip: + action.payload === state.ui.member_status_tooltip + ? '' + : action.payload + } + }; + }, + [handlePeopleRoleTooltip.toString()]: (state, action) => { return { ...state, ui: { ...state.ui, member_role_tooltip: - action.payload === state.ui.member_role_tooltip ? '' : action.payload + action.payload === state.ui.member_role_tooltip + ? '' + : action.payload } }; } From 787a6815b4f12bfaebf7aeb1364f80495c12c74b Mon Sep 17 00:00:00 2001 From: Tom Gallacher Date: Tue, 24 Jan 2017 16:55:06 +0000 Subject: [PATCH 14/18] Move consul to autopilotpattern --- docker-compose.yml | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 709b43da..84f93985 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,24 +1,28 @@ ############################################################################# # CONSUL +# +# Consul is the service catalog that helps discovery between the components +# Change "-bootstrap" to "-bootstrap-expect 3", then scale to 3 or more to +# turn this into an HA Consul raft. ############################################################################# consul: - image: progrium/consul:latest - labels: - - triton.cns.services=consul - - com.docker.swarm.affinities=["container!=~*"] + image: autopilotpattern/consul:latest + command: > + /usr/local/bin/containerpilot + /bin/consul agent -server + -bootstrap-expect 3 + -config-dir=/etc/consul + -ui-dir /ui restart: always mem_limit: 128m - expose: - - 53 - - 8300 - - 8301 - - 8302 - - 8400 - - 8500 env_file: .env ports: - 8500 - command: -server -bootstrap -ui-dir /ui + dns: + - 127.0.0.1 + labels: + - triton.cns.services=consul + - com.docker.swarm.affinities=["container!=~*"] ############################################################################# # CloudAPI GraphQL ############################################################################# From 84becdb73f70decf61b76738bf328916777eb232 Mon Sep 17 00:00:00 2001 From: Tom Gallacher Date: Tue, 24 Jan 2017 17:06:10 +0000 Subject: [PATCH 15/18] Adding back missing images --- frontend/static/.gitignore | 1 + frontend/webpack/base.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/static/.gitignore b/frontend/static/.gitignore index a780b368..564e4fda 100644 --- a/frontend/static/.gitignore +++ b/frontend/static/.gitignore @@ -1,3 +1,4 @@ * !.gitignore !locales +!images diff --git a/frontend/webpack/base.js b/frontend/webpack/base.js index 7bf6ee93..003fa7b5 100644 --- a/frontend/webpack/base.js +++ b/frontend/webpack/base.js @@ -87,7 +87,7 @@ module.exports = { { test: /\.css$/, loader: 'style-loader!css-loader' - // XXXX : Commenting out breaks node_modules that use css + // XXX: Commenting out breaks node_modules that use css // i.e react-select. // exclude: /node_modules/, From b4f053cf3f47cc5e7aeabf61417c10dde5a358da Mon Sep 17 00:00:00 2001 From: Tom Gallacher Date: Tue, 24 Jan 2017 17:08:08 +0000 Subject: [PATCH 16/18] Adding missing images --- frontend/static/images/avatar.png | Bin 0 -> 3212 bytes frontend/static/images/make-us-proud.svg | 194 +++++++++++++++++++++++ 2 files changed, 194 insertions(+) create mode 100644 frontend/static/images/avatar.png create mode 100644 frontend/static/images/make-us-proud.svg diff --git a/frontend/static/images/avatar.png b/frontend/static/images/avatar.png new file mode 100644 index 0000000000000000000000000000000000000000..68b6ad913ad6c1d749dcf8cd02107022dd0f2b68 GIT binary patch literal 3212 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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 83398c412368d4dce37cff33860ef5dccfaeb834 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 24 Jan 2017 17:27:01 +0000 Subject: [PATCH 17/18] implimenting assinging role to team memember --- .../src/components/people-list/table/index.js | 7 ++++- .../people-list/table/person-role.js | 19 ++++++++++--- .../components/people-list/table/tooltip.js | 26 ++++++++++++++++-- frontend/src/containers/org/people.js | 3 +++ frontend/src/state/actions.js | 1 + frontend/src/state/reducers/orgs.js | 27 ++++++++++++++++++- ui/src/components/tooltip/index.js | 7 ++++- 7 files changed, 81 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/people-list/table/index.js b/frontend/src/components/people-list/table/index.js index 5219d2b1..ddc7fb5c 100644 --- a/frontend/src/components/people-list/table/index.js +++ b/frontend/src/components/people-list/table/index.js @@ -10,6 +10,7 @@ const PeopleTable = (props) => { const { handleRoleTooltip, + handleRoleUpdate, handleStatusTooltip, people = [], orgUI = {} @@ -32,12 +33,13 @@ const PeopleTable = (props) => { width: '10%' // Empty title for delete }]; - const data = people.map( (person) => { + const data = people.map( (person, index) => { const status = (person) => ( ); @@ -45,8 +47,10 @@ const PeopleTable = (props) => { const role = (person) => ( ); @@ -70,6 +74,7 @@ const PeopleTable = (props) => { PeopleTable.propTypes = { handleRoleTooltip: React.PropTypes.func, + handleRoleUpdate: React.PropTypes.func, handleStatusTooltip: React.PropTypes.func, orgUI: React.PropTypes.object, people: React.PropTypes.array, diff --git a/frontend/src/components/people-list/table/person-role.js b/frontend/src/components/people-list/table/person-role.js index 0b700e94..9fb2c543 100644 --- a/frontend/src/components/people-list/table/person-role.js +++ b/frontend/src/components/people-list/table/person-role.js @@ -46,19 +46,24 @@ const PlainButton = styled.button` color: inherit; `; - - const PersonRole = (props) => { const { toggledID, membersRolesOptions, person, - handleRoleTooltip + personIndex, + handleRoleTooltip, + handleRoleUpdate } = props; const toggled = toggledID; const handleClick = () => handleRoleTooltip(person.uuid); + const handleOptionSelect = (updatedMember) => handleRoleUpdate(updatedMember); + const _person = { + ...person, + personIndex + }; return ( @@ -67,7 +72,11 @@ const PersonRole = (props) => { { toggledID === person.uuid - ? + ? : null } ); @@ -75,8 +84,10 @@ const PersonRole = (props) => { PersonRole.propTypes = { handleRoleTooltip: React.PropTypes.func, + handleRoleUpdate: React.PropTypes.func, membersRolesOptions: React.PropTypes.array, person: React.PropTypes.object, + personIndex: React.PropTypes.number, toggledID: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.bool, diff --git a/frontend/src/components/people-list/table/tooltip.js b/frontend/src/components/people-list/table/tooltip.js index af2a0ec1..69a5681b 100644 --- a/frontend/src/components/people-list/table/tooltip.js +++ b/frontend/src/components/people-list/table/tooltip.js @@ -14,21 +14,43 @@ const arrowPosition = { }; module.exports = ({ + handleSelect, person = {}, - options = [] + options = [], }) => { + + const _options = options.map( (option, i) => { + + const _onClick = () => handleSelect({ + ...person, + role: option + }); + + return ( +
  • + {option} +
    • + ); + }); + return ( - {options.map((o, i) =>
  • {o}
    • )} + {_options}     ); }; module.exports.propTypes = { + handleSelect: React.PropTypes.func, options: React.PropTypes.array, person: React.PropTypes.object, }; \ No newline at end of file diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js index 662cb563..3e56bac1 100644 --- a/frontend/src/containers/org/people.js +++ b/frontend/src/containers/org/people.js @@ -19,6 +19,7 @@ const { handleInviteToggle, handlePeopleRoleTooltip, handlePeopleStatusTooltip, + handleRoleUpdate } = actions; const People = (props) => { @@ -42,6 +43,8 @@ const mapDispatchToProps = (dispatch) => ({ handleToggle: () => dispatch(handleInviteToggle()), handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id)), handleRoleTooltip: (id) => dispatch(handlePeopleRoleTooltip(id)), + handleRoleUpdate: (updatedMember) => + dispatch(handleRoleUpdate(updatedMember)), }); module.exports = connect( diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js index 44f602fd..c21a77cd 100644 --- a/frontend/src/state/actions.js +++ b/frontend/src/state/actions.js @@ -21,4 +21,5 @@ module.exports = { createAction(`${APP}/HANDLE_PERSON_STATUS_TOOLTIP`), handlePeopleRoleTooltip: createAction(`${APP}/HANDLE_PERSON_ROLE_TOOLTIP`), + handleRoleUpdate: createAction(`${APP}/HANDLE_PERSON_ROLE_UPDATE`), }; diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js index 1e633bb6..054714f6 100644 --- a/frontend/src/state/reducers/orgs.js +++ b/frontend/src/state/reducers/orgs.js @@ -9,7 +9,8 @@ const { const { handleInviteToggle, handlePeopleRoleTooltip, - handlePeopleStatusTooltip + handlePeopleStatusTooltip, + handleRoleUpdate } = actions; module.exports = handleActions({ @@ -45,5 +46,29 @@ module.exports = handleActions({ : action.payload } }; + }, + [handleRoleUpdate.toString()]: (state, action) => { + // TODO: Change "1" to org index + return { + ...state, + ui: { + ...state.ui, + member_role_tooltip: false + }, + data: [ + ...state.data.slice(0, 1), + { + ...state.data[1], + members: [ + ...state.data[1].members.slice(0, action.payload.personIndex), + { + ...action.payload + }, + ...state.data[1].members.slice(action.payload.personIndex + 1) + ] + }, + ...state.data.slice(1+1), + ] + }; } }, {}); diff --git a/ui/src/components/tooltip/index.js b/ui/src/components/tooltip/index.js index 7aa71e00..56fa0d90 100644 --- a/ui/src/components/tooltip/index.js +++ b/ui/src/components/tooltip/index.js @@ -3,6 +3,7 @@ const React = require('react'); const composers = require('../../shared/composers'); const fns = require('../../shared/functions'); +const constants = require('../../shared/constants'); const Styled = require('styled-components'); const { @@ -18,6 +19,10 @@ const { default: styled } = Styled; +const { + colors +} = constants; + const ItemPadder = 9; const WrapperPadder = 24; const ulPadder = `${WrapperPadder - ItemPadder} 0`; @@ -43,7 +48,7 @@ const StyledList = styled.ul` padding: ${remcalc(ItemPadder)} ${remcalc(WrapperPadder)}; &:hover { - background: red; + background: ${colors.borderSecondaryDarkest}; } } From 237e1c602415a3ccfc9e658e5e0612d5e77d23c6 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 24 Jan 2017 17:38:48 +0000 Subject: [PATCH 18/18] adding detail to TODO note --- frontend/src/state/reducers/orgs.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js index 054714f6..e7ce272b 100644 --- a/frontend/src/state/reducers/orgs.js +++ b/frontend/src/state/reducers/orgs.js @@ -48,7 +48,9 @@ module.exports = handleActions({ }; }, [handleRoleUpdate.toString()]: (state, action) => { - // TODO: Change "1" to org index + // TODO: + // Change "1" to org index. At the moment only updates + // "biz-tech" return { ...state, ui: {