From c3057ff0f2d324b3a277e7caed307d0260239e07 Mon Sep 17 00:00:00 2001 From: Eric Binnion Date: Wed, 3 Feb 2016 16:59:13 -0600 Subject: [PATCH 1/7] People: Add explanation prop to RoleSelect component --- client/my-sites/people/role-select/index.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/client/my-sites/people/role-select/index.jsx b/client/my-sites/people/role-select/index.jsx index 111129f0f998fd..a04d861faee610 100644 --- a/client/my-sites/people/role-select/index.jsx +++ b/client/my-sites/people/role-select/index.jsx @@ -10,7 +10,8 @@ var RolesStore = require( 'lib/site-roles/store' ), RolesActions = require( 'lib/site-roles/actions' ), FormFieldset = require( 'components/forms/form-fieldset' ), FormLabel = require( 'components/forms/form-label' ), - FormSelect = require( 'components/forms/form-select' ); + FormSelect = require( 'components/forms/form-select' ), + FormSettingExplanation = require( 'components/forms/form-setting-explanation' ); var debug = debugFactory( 'calypso:role-select' ); @@ -90,6 +91,11 @@ module.exports = React.createClass( { } ) } + { this.props.explanation && + + { this.props.explanation } + + } ); } From f90fde990b34a87c4aba12f85c538d00ad95d1ac Mon Sep 17 00:00:00 2001 From: Eric Binnion Date: Wed, 3 Feb 2016 16:59:24 -0600 Subject: [PATCH 2/7] People: Refresh invite UI with Form components --- .../my-sites/people/invite-people/index.jsx | 100 +++++++++++++----- 1 file changed, 72 insertions(+), 28 deletions(-) diff --git a/client/my-sites/people/invite-people/index.jsx b/client/my-sites/people/invite-people/index.jsx index dc2c86dac38a12..7daa6f11bd4436 100644 --- a/client/my-sites/people/invite-people/index.jsx +++ b/client/my-sites/people/invite-people/index.jsx @@ -1,12 +1,24 @@ +/** + * External dependencies + */ import React from 'react'; import LinkedStateMixin from 'react-addons-linked-state-mixin'; +import page from 'page'; +/** + * Internal dependencies + */ import RoleSelect from 'my-sites/people/role-select'; import TokenField from 'components/token-field'; import FormTextArea from 'components/forms/form-textarea'; import FormButton from 'components/forms/form-button'; +import FormFieldset from 'components/forms/form-fieldset'; +import FormLabel from 'components/forms/form-label'; +import FormSettingExplanation from 'components/forms/form-setting-explanation'; import { sendInvites } from 'lib/invites/actions'; import Card from 'components/card'; +import Main from 'components/main'; +import HeaderCake from 'components/header-cake'; export default React.createClass( { displayName: 'InvitePeople', @@ -35,7 +47,9 @@ export default React.createClass( { this.setState( { usernamesOrEmails: tokens } ); }, - submitForm() { + submitForm( event ) { + event.preventDefault(); + this.setState( { sendingInvites: true } ); sendInvites( this.props.site.ID, this.state.usernamesOrEmails, this.state.role, this.state.message, ( error, data ) => { this.setState( { @@ -45,6 +59,19 @@ export default React.createClass( { } ); }, + goBack() { + // Go back to last route with /people/team as the fallback + page.back( '/people/team' ); + }, + + renderRoleExplanation() { + return ( + + { this.translate( 'Learn more about roles' ) } + + ); + }, + renderResponse() { return ( @@ -59,37 +86,54 @@ export default React.createClass( { }, render() { - if ( this.props.site.jetpack ) { - return (

Invites not currently available for Jetpack sites.

); - } return ( -
+
+ - - - - - - - - Send Invites - +
+ + { this.translate( 'Usernames or Emails' ) } + + + { this.translate( + 'Invite up to 10 email addresses and/or WordPress.com usernames.. ' + + 'Those needing a username will be sent instructions on how to create one.' + ) } + + + + + + + { this.translate( 'Custom Message' ) } + + + { this.translate( + '(Optional) You can enter a custom message of up to 500 characters that will be included in the invitation to the user(s).' + ) } + + + + + { this.translate( 'Send Invites' ) } + +
{ this.state.response && this.renderResponse() } -
+ ); } } ); From b73c157e3028725d9ff8659f84caf04d9453cbc8 Mon Sep 17 00:00:00 2001 From: Eric Binnion Date: Wed, 3 Feb 2016 17:07:58 -0600 Subject: [PATCH 3/7] People: Improves invite form back button --- client/my-sites/people/invite-people/index.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/client/my-sites/people/invite-people/index.jsx b/client/my-sites/people/invite-people/index.jsx index 7daa6f11bd4436..2f763d6e27e04d 100644 --- a/client/my-sites/people/invite-people/index.jsx +++ b/client/my-sites/people/invite-people/index.jsx @@ -4,6 +4,7 @@ import React from 'react'; import LinkedStateMixin from 'react-addons-linked-state-mixin'; import page from 'page'; +import get from 'lodash/object/get'; /** * Internal dependencies @@ -60,8 +61,10 @@ export default React.createClass( { }, goBack() { - // Go back to last route with /people/team as the fallback - page.back( '/people/team' ); + const siteSlug = get( this.props, 'site.slug' ); + const fallback = siteSlug ? ( '/people/team/' + siteSlug ) : '/people/team'; + // Go back to last route with /people/team/$site as the fallback + page.back( fallback ); }, renderRoleExplanation() { From 93953e61d94a9da17b527734119adb756852e914 Mon Sep 17 00:00:00 2001 From: Eric Binnion Date: Wed, 3 Feb 2016 17:19:46 -0600 Subject: [PATCH 4/7] People: Pluralize translation for send invitation button --- client/my-sites/people/invite-people/index.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/client/my-sites/people/invite-people/index.jsx b/client/my-sites/people/invite-people/index.jsx index 2f763d6e27e04d..cb7a7457d9023a 100644 --- a/client/my-sites/people/invite-people/index.jsx +++ b/client/my-sites/people/invite-people/index.jsx @@ -131,7 +131,13 @@ export default React.createClass( { - { this.translate( 'Send Invites' ) } + { this.translate( + 'Send Invitation', + 'Send Invitations', { + count: this.state.usernamesOrEmails.length || 1, + context: 'Button label' + } + ) } From 511bb41cfba3439a6960d4dda3a48889723ee387 Mon Sep 17 00:00:00 2001 From: Eric Binnion Date: Thu, 4 Feb 2016 12:17:10 -0600 Subject: [PATCH 5/7] People: Adds page title to invite users page --- client/my-sites/people/controller.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/my-sites/people/controller.js b/client/my-sites/people/controller.js index ea767817d7fcb3..507cf1aa5ab77c 100644 --- a/client/my-sites/people/controller.js +++ b/client/my-sites/people/controller.js @@ -77,6 +77,8 @@ function renderInvitePeople( context ) { sites.once( 'change', () => page( context.path ) ); } + titleActions.setTitle( i18n.translate( 'Invite People', { textOnly: true } ), { siteID: route.getSiteFragment( context.path ) } ); + ReactDom.render( React.createElement( InvitePeople, { site: sites.getSelectedSite() From e8177d1f689eefe550446831b8e5fa06cc040b8a Mon Sep 17 00:00:00 2001 From: Eric Binnion Date: Thu, 4 Feb 2016 13:20:05 -0600 Subject: [PATCH 6/7] People: Fixes formatting issue in InvitePeople --- client/my-sites/people/invite-people/index.jsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/client/my-sites/people/invite-people/index.jsx b/client/my-sites/people/invite-people/index.jsx index cb7a7457d9023a..b123ecbc2e275d 100644 --- a/client/my-sites/people/invite-people/index.jsx +++ b/client/my-sites/people/invite-people/index.jsx @@ -131,13 +131,13 @@ export default React.createClass( { - { this.translate( - 'Send Invitation', - 'Send Invitations', { - count: this.state.usernamesOrEmails.length || 1, - context: 'Button label' - } - ) } + { this.translate( + 'Send Invitation', + 'Send Invitations', { + count: this.state.usernamesOrEmails.length || 1, + context: 'Button label' + } + ) } From cac55b5703e9cec89f3802fb6ff573b7fcc50984 Mon Sep 17 00:00:00 2001 From: Eric Binnion Date: Thu, 4 Feb 2016 13:26:29 -0600 Subject: [PATCH 7/7] People: Updates RoleSelect README to include props --- client/my-sites/people/role-select/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/client/my-sites/people/role-select/README.md b/client/my-sites/people/role-select/README.md index 36c7e4d66982c9..54c7a480834f12 100644 --- a/client/my-sites/people/role-select/README.md +++ b/client/my-sites/people/role-select/README.md @@ -2,3 +2,7 @@ RoleSelect ================ This component listens to changes from the `RolesStore` and displays a select of the roles for a site. + +### Props +* siteId - (int) siteId for site from which to fetch roles +* explanation - (string) Optional explanation to be displayed below select in a FormSettingExplanation