People: Swap out Role select element for radio buttons (#31821)

Automattic · Apr 3, 2019 · ad2e4bd · ad2e4bd
1 parent 416b085
commit ad2e4bd
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/client/my-sites/people/role-select/index.jsx b/client/my-sites/people/role-select/index.jsx
@@ -14,7 +14,7 @@ import { localize } from 'i18n-calypso';
  */
 import FormFieldset from 'components/forms/form-fieldset';
 import FormLabel from 'components/forms/form-label';
-import FormSelect from 'components/forms/form-select';
+import FormRadio from 'components/forms/form-radio';
 import FormSettingExplanation from 'components/forms/form-setting-explanation';
 import QuerySites from 'components/data/query-sites';
 import QuerySiteRoles from 'components/data/query-site-roles';
@@ -34,7 +34,7 @@ const getWpcomFollowerRole = ( { site, translate } ) => {
 
 const RoleSelect = props => {
 	let { siteRoles } = props;
-	const { site, includeFollower, siteId, id, explanation, translate } = props;
+	const { site, includeFollower, siteId, id, explanation, translate, value } = props;
 	const omitProps = [
 		'site',
 		'key',
@@ -46,27 +46,32 @@ const RoleSelect = props => {
 		'moment',
 		'numberFormat',
 		'translate',
+		'value',
+		'id',
 	];
 
 	if ( site && siteRoles && includeFollower ) {
 		siteRoles = siteRoles.concat( getWpcomFollowerRole( props ) );
 	}
 
 	return (
-		<FormFieldset key={ siteId } disabled={ ! siteRoles }>
+		<FormFieldset key={ siteId } disabled={ ! siteRoles } id={ id }>
 			{ siteId && <QuerySites siteId={ siteId } /> }
 			{ siteId && <QuerySiteRoles siteId={ siteId } /> }
 			<FormLabel htmlFor={ id }>{ translate( 'Role' ) }</FormLabel>
-			<FormSelect { ...omit( props, omitProps ) }>
-				{ siteRoles &&
-					map( siteRoles, role => {
-						return (
-							<option value={ role.name } key={ role.name }>
-								{ role.display_name }
-							</option>
-						);
-					} ) }
-			</FormSelect>
+			{ siteRoles &&
+				map( siteRoles, role => {
+					return (
+						<FormLabel key={ role.name }>
+							<FormRadio
+								checked={ role.name === value }
+								value={ role.name }
+								{ ...omit( props, omitProps ) }
+							/>
+							<span>{ role.display_name }</span>
+						</FormLabel>
+					);
+				} ) }
 			{ explanation && <FormSettingExplanation>{ explanation }</FormSettingExplanation> }
 		</FormFieldset>
 	);

diff --git a/test/e2e/lib/pages/invite-people-page.js b/test/e2e/lib/pages/invite-people-page.js
@@ -17,19 +17,20 @@ import * as DriverHelper from '../driver-helper.js';
 
 export default class InvitePeoplePage extends AsyncBaseContainer {
 	constructor( driver ) {
-		super( driver, By.css( 'select#role' ) );
+		super( driver, By.css( 'fieldset#role' ) );
 	}
 
 	async inviteNewUser( email, role, message = '' ) {
 		if ( role === 'viewer' ) {
 			role = 'follower'; //the select input option uses follower for viewer
 		}
 
-		const roleSelector = By.css( `select#role option[value=${ role }]` );
+		const roleSelector = By.css( `fieldset#role input[value=${ role }]` );
 
 		await DriverHelper.setWhenSettable( this.driver, By.css( 'input.token-field__input' ), email );
 		await DriverHelper.waitTillPresentAndDisplayed( this.driver, roleSelector );
 		await DriverHelper.clickWhenClickable( this.driver, roleSelector );
+		await DriverHelper.setCheckbox( this.driver, roleSelector );
 		await DriverHelper.setWhenSettable( this.driver, By.css( '#message' ), message );
 		return await DriverHelper.clickWhenClickable(
 			this.driver,