From 0239f93cbf1cd3a97575c64a3acf17ee45712d13 Mon Sep 17 00:00:00 2001
From: Kerry Liu <kerryliu@gmail.com>
Date: Fri, 31 Mar 2017 14:33:21 -0700
Subject: [PATCH 1/2] Sharing: do not dispatch during render

---
 .../sharing/connections/account-dialog.jsx    | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/client/my-sites/sharing/connections/account-dialog.jsx b/client/my-sites/sharing/connections/account-dialog.jsx
index 233357e5e2630..02a4e2e583253 100644
--- a/client/my-sites/sharing/connections/account-dialog.jsx
+++ b/client/my-sites/sharing/connections/account-dialog.jsx
@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { filter, find, identity, isEqual } from 'lodash';
 import { localize } from 'i18n-calypso';
-import Gridicon from 'gridicons';
+import Notice from 'components/notice';
 
 /**
  * Internal dependencies
@@ -113,12 +113,21 @@ class AccountDialog extends Component {
 		const connectedAccounts = this.getAccountsByConnectedStatus( true );
 
 		if ( connectedAccounts.length ) {
+			const hasConflictingAccounts = this.isSelectedAccountConflicting();
+
 			return (
 				<div className="account-dialog__connected-accounts">
 					<h3 className="account-dialog__connected-accounts-heading">{ this.props.translate( 'Connected' ) }</h3>
 					<ul className="account-dialog__accounts">
 						{ this.getAccountElements( connectedAccounts ) }
 					</ul>
+					{ hasConflictingAccounts &&
+					<Notice
+						status="is-warning"
+						icon="notice"
+						text={ this.props.translate( 'The marked connection will be replaced with your selection.' ) }
+						isCompact />
+					}
 				</div>
 			);
 		}
@@ -152,13 +161,6 @@ class AccountDialog extends Component {
 				{ action: 'connect', label: this.props.translate( 'Connect' ), isPrimary: true }
 			];
 
-		if ( this.isSelectedAccountConflicting() ) {
-			this.props.warningNotice( this.props.translate( 'The connection marked {{icon/}} will be replaced with your selection.', {
-				components: { icon: <Gridicon icon="notice" size={ 18 } /> },
-				context: 'Sharing: Publicize confirmation',
-			} ), { showDismiss: false } );
-		}
-
 		return (
 			<Dialog isVisible={ this.props.isVisible } buttons={ buttons } additionalClassNames={ classes } onClose={ this.onClose }>
 				<h2 className="account-dialog__authorizing-service">
@@ -170,6 +172,7 @@ class AccountDialog extends Component {
 				<p className="account-dialog__authorizing-disclaimer">{ this.getDisclaimerText() }</p>
 				<ul className="account-dialog__accounts">{ this.getAccountElements( this.getAccountsByConnectedStatus( false ) ) }</ul>
 				{ this.getConnectedAccountsContent() }
+
 			</Dialog>
 		);
 	}

From dd5dcd8ce5f584b1858c52adc196ea5420cdd691 Mon Sep 17 00:00:00 2001
From: Kerry Liu <kerryliu@gmail.com>
Date: Fri, 31 Mar 2017 14:41:05 -0700
Subject: [PATCH 2/2] Sharing: fix button state when number of connections does
 not change h/t @obenland

---
 client/my-sites/sharing/connections/service.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/my-sites/sharing/connections/service.jsx b/client/my-sites/sharing/connections/service.jsx
index aa0c674391e9e..eac20335c3e75 100644
--- a/client/my-sites/sharing/connections/service.jsx
+++ b/client/my-sites/sharing/connections/service.jsx
@@ -4,7 +4,7 @@
 import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { connect } from 'react-redux';
-import { identity, find, replace, some } from 'lodash';
+import { identity, isEqual, find, replace, some } from 'lodash';
 import { localize } from 'i18n-calypso';
 import SocialLogo from 'social-logos';
 
@@ -234,7 +234,7 @@ class SharingService extends Component {
 	}
 
 	componentWillReceiveProps( nextProps ) {
-		if ( this.props.siteUserConnections.length !== nextProps.siteUserConnections.length ) {
+		if ( ! isEqual( this.props.siteUserConnections, nextProps.siteUserConnections ) ) {
 			this.setState( {
 				isConnecting: false,
 				isDisconnecting: false,
@@ -242,7 +242,7 @@ class SharingService extends Component {
 			} );
 		}
 
-		if ( this.props.brokenConnections.length !== nextProps.brokenConnections.length ) {
+		if ( ! isEqual( this.props.brokenConnections, nextProps.brokenConnections ) ) {
 			this.setState( { isRefreshing: false } );
 		}