Google Apps: Show errors from backend if present

Automattic · Jul 15, 2016 · d63091f · d63091f
1 parent e1ccf88
commit d63091f
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 54 deletions.
diff --git a/client/my-sites/upgrades/domain-management/email/google-apps-users-card.jsx b/client/my-sites/upgrades/domain-management/email/google-apps-users-card.jsx
@@ -2,17 +2,20 @@
  * External dependencies
  */
 import React from 'react';
+import groupBy from 'lodash/groupBy';
 
 /**
  * Internal dependencies
  */
 import CompactCard from 'components/card/compact';
+import Notice from 'components/notice';
+import Button from 'components/button';
 import PendingGappsTosNotice from 'my-sites/upgrades/components/domain-warnings/pending-gapps-tos-notice';
 import paths from 'my-sites/upgrades/paths';
 import analyticsMixin from 'lib/mixins/analytics';
 import SectionHeader from 'components/section-header';
 import GoogleAppsUserItem from './google-apps-user-item';
-import { getSelectedDomain } from 'lib/domains';
+import { getSelectedDomain, hasPendingGoogleAppsUsers } from 'lib/domains';
 
 const GoogleAppsUsers = React.createClass( {
 	mixins: [ analyticsMixin( 'domainManagement', 'googleApps' ) ],
@@ -50,44 +53,68 @@ const GoogleAppsUsers = React.createClass( {
 		this.recordEvent( 'addGoogleAppsUserClick', this.props.selectedDomainName );
 	},
 
-	render() {
-		const pendingDomains = this.getDomainsAsList().filter( domain =>
-			domain.googleAppsSubscription &&
-			domain.googleAppsSubscription.pendingUsers &&
-			domain.googleAppsSubscription.pendingUsers.length !== 0 );
-
+	renderDomain( domain, users ) {
 		return (
-			<div>
-				{ pendingDomains.length !== 0 && <PendingGappsTosNotice key="pending-gapps-tos-notice" siteSlug={ this.props.selectedSite.slug } domains={ pendingDomains } section="google-apps" /> }
-
+			<div key={ `google-apps-user-${ domain }` } className="google-apps-users-card">
 				<SectionHeader
-					count={ this.props.googleAppsUsers.length }
-					label={ this.translate( 'Google Apps Users' ) }>
+					label={ domain }>
 					{ this.canAddUsers() && (
-						<a
+						<Button
+							primary
+							compact
 							href={ paths.domainManagementAddGoogleApps(
-								this.props.selectedSite.slug, this.props.selectedDomainName
+								this.props.selectedSite.slug, domain
 							) }
-							className="button is-compact is-primary"
 							onClick={ this.goToAddGoogleApps }>
 							{ this.translate( 'Add Google Apps User' ) }
-						</a>
+						</Button>
 					) }
 				</SectionHeader>
-
-				<CompactCard className="google-apps-users-card">
-					<ul className="google-apps-users-card__user-list">
-						{ this.props.googleAppsUsers.map(
-							( user, index ) => (
-								<GoogleAppsUserItem
-									key={ index } user={ user }
-									onClick={ this.generateClickHandler( user ) }/>
-							)
-						) }
+				<CompactCard className="google-apps-users-card__user-list">
+					<ul className="google-apps-users-card__user-list-inner">
+						{ users.map( ( user, index ) => this.renderUser( user, index ) ) }
 					</ul>
 				</CompactCard>
 			</div>
 		);
+	},
+
+	renderUser( user, index ) {
+		if ( user.error ) {
+			return (
+				<Notice
+					key={ `google-apps-user-notice-${ user.domain }-${ index }` }
+					showDismiss={ false }
+					status="is-warning"
+					text={ user.error } />
+			);
+		}
+
+		return (
+			<GoogleAppsUserItem
+				key={ `google-apps-user-${ user.domain }-${ index }` }
+				user={ user }
+				onClick={ this.generateClickHandler( user ) }/>
+		);
+	},
+
+	render() {
+		const pendingDomains = this.getDomainsAsList().filter( hasPendingGoogleAppsUsers ),
+			usersByDomain = groupBy( this.props.googleAppsUsers, 'domain' );
+
+		return (
+			<div>
+				{ pendingDomains.length !== 0 &&
+					<PendingGappsTosNotice
+						key="pending-gapps-tos-notice"
+						siteSlug={ this.props.selectedSite.slug }
+						domains={ pendingDomains }
+						section="google-apps" />
+				}
+
+				{ Object.keys( usersByDomain ).map( ( domain ) => this.renderDomain( domain, usersByDomain[ domain ] ) ) }
+			</div>
+		);
 	}
 } );
 

diff --git a/client/my-sites/upgrades/domain-management/email/placeholder.jsx b/client/my-sites/upgrades/domain-management/email/placeholder.jsx
@@ -11,11 +11,11 @@ import SectionHeader from 'components/section-header';
 import GoogleAppsUserItem from './google-apps-user-item';
 
 const Placeholder = () =>
-	<div className="is-placeholder">
+	<div className="google-apps-users-card is-placeholder">
 		<SectionHeader
 			label={ 'Google Apps Users' } />
-		<CompactCard className="google-apps-users-card">
-			<ul className="google-apps-users-card__user-list">
+		<CompactCard className="google-apps-users-card__user-list">
+			<ul className="google-apps-users-card__user-list-inner">
 				<GoogleAppsUserItem user={ { email: 'mail@example.com', domain: 'example.com' } } />
 			</ul>
 		</CompactCard>

diff --git a/client/my-sites/upgrades/domain-management/style.scss b/client/my-sites/upgrades/domain-management/style.scss
@@ -1002,36 +1002,18 @@ ul.email-forwarding__list {
 	}
 }
 
-.google-apps-users-card.card {
-	padding: 0;
-	@include clear-fix;
+.google-apps-users-card {
+	margin-bottom: 10px;
 }
 
-.google-apps-users-card__add-user-button {
-	@include breakpoint( '<480px' ) {
-		width: 100%;
-	}
-
-	@include breakpoint( '>480px' ) {
-		float: right;
+.google-apps-users-card__user-list {
+	&.card {
+		padding: 0;
+		@include clear-fix;
 	}
 }
 
-.google-apps-users-card__subtext {
-	font-size: 13px;
-	margin: 5px 0;
-	font-style: italic;
-	font-weight: 400;
-	color: $gray;
-}
-
-.google-apps-users-card__notice.notice {
-	font-size: 13px;
-	margin: 10px 0;
-	animation: none;
-}
-
-.google-apps-users-card__user-list {
+.google-apps-users-card__user-list-inner {
 	list-style: none;
 	margin: 0;
 
@@ -1048,6 +1030,10 @@ ul.email-forwarding__list {
 			border-bottom: 1px solid $gray-light;
 		}
 	}
+
+	.notice {
+		margin: 0;
+	}
 }
 
 .google-apps-user-item__email {