Plugins: Bulk edit mode with disabled plugin actions

client/my-sites/plugins/plugin-action/README.md

@@ -47,4 +47,5 @@ render: function() {
 * `inProgress`: (bool) whether the action is in the middle of being performed.
 * `htmlFor`: (string) htmlFor is used for creating the for attribute on the label.
 * `disabledInfo`: ( string ) text that gets displayed in a infoPopover explaining why the action is disabled.
+* `disabled`: ( bool ) whether the toggle is disabled (grayed out and non interactive) or not
 

client/my-sites/plugins/plugin-action/plugin-action.jsx

@@ -90,7 +90,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<div className={ classNames( 'plugin-action', this.props.className ) }>
+			<div className={ classNames( 'plugin-action', { 'is-disabled': this.props.disabled }, this.props.className ) }>
 				{ this.renderInner() }
 			</div>
 		);

client/my-sites/plugins/plugin-action/style.scss

@@ -30,6 +30,10 @@
 	vertical-align: top;
 	text-transform: uppercase;
 	cursor: pointer;
+
+	.is-disabled & {
+		color: lighten( $gray, 30% );
+	}
 }
 
 .plugin-action .form-toggle__label .form-toggle__switch {

client/my-sites/plugins/plugin-activate-toggle/README.md

@@ -27,3 +27,4 @@ render: function() {
 * `site`: a site object.
 * `notices`: a notices object.
 * `isMock`: a boolean indicating if the toggle should not launch any real action when interacted
+* `disabled`: a boolean indicating whether the toggle is disabled (grayed out and non interactive) or not

client/my-sites/plugins/plugin-activate-toggle/index.jsx

@@ -23,7 +23,7 @@ module.exports = React.createClass( {
 	},
 
 	toggleActivation: function() {
-		if ( this.props.isMock ) {
+		if ( this.props.isMock || this.props.disabled ) {
 			return;
 		}
 
@@ -64,7 +64,7 @@ module.exports = React.createClass( {
 					htmlFor={ 'disconnect-jetpack-' + this.props.site.ID }
 					>
 					<DisconnectJetpackButton
-						disabled={ ! this.props.plugin }
+						disabled={ this.props.disabled || ! this.props.plugin }
 						site={ this.props.site }
 						redirect="/plugins/jetpack"
 						/>
@@ -73,6 +73,7 @@ module.exports = React.createClass( {
 		}
 		return (
 			<PluginAction
+				disabled={ this.props.disabled }
 				className="plugin-activate-toggle"
 				label={ this.translate( 'Active', { context: 'plugin status' } ) }
 				inProgress={ inProgress }

client/my-sites/plugins/plugin-autoupdate-toggle/README.md

@@ -29,3 +29,4 @@ render: function() {
 * `notices`: a notices object.
 * `wporg`: whether the plugin is from .org or not
 * `isMock`: a boolean indicating if the toggle should not launch any real action when interacted
+* `disabled`: a boolean indicating whether the toggle is disabled (grayed out and non interactive) or not

client/my-sites/plugins/plugin-autoupdate-toggle/index.jsx

@@ -25,7 +25,7 @@ module.exports = React.createClass( {
 	},
 
 	toggleAutoupdates: function() {
-		if ( this.props.isMock ) {
+		if ( this.props.isMock || this.props.disabled ) {
 			return;
 		}
 
@@ -131,6 +131,7 @@ module.exports = React.createClass( {
 
 		return (
 			<PluginAction
+				disabled={ this.props.disabled }
 				label={ label }
 				status={ this.props.plugin.autoupdate }
 				action={ this.toggleAutoupdates }

client/my-sites/plugins/plugin-item/plugin-item.jsx

@@ -137,13 +137,15 @@ module.exports = React.createClass( {
 		return (
 			<div className="plugin-item__actions">
 				<PluginActivateToggle
-					isMock={ this.props.isMock || this.props.isSelectable }
+					isMock={ this.props.isMock }
 					plugin={ this.props.plugin }
+					disabled={ this.props.isSelectable }
 					site={ this.props.selectedSite }
 					notices={ this.props.notices } />
 				<PluginAutoupdateToggle
-					isMock={ this.props.isMock || this.props.isSelectable }
+					isMock={ this.props.isMock }
 					plugin={ this.props.plugin }
+					disabled={ this.props.isSelectable }
 					site={ this.props.selectedSite }
 					notices={ this.props.notices }
 					wporg={ !! this.props.plugin.wporg } />
@@ -190,10 +192,9 @@ module.exports = React.createClass( {
 
 		if ( ! this.props.plugin ) {
 			return this.renderPlaceholder();
+		}
 
-		const pluginItemClasses = classNames( 'plugin-item', {
-			disabled: this.props.hasAllNoManageSites,
-		} );
+		const pluginItemClasses = classNames( 'plugin-item', { disabled: this.props.hasAllNoManageSites, } );
 
 		errors.forEach( function( error ) {
 			errorNotices.push(
@@ -220,7 +221,7 @@ module.exports = React.createClass( {
 			<div className="plugin-item__title" data-warnings={ numberOfWarningIcons }>
 				{ plugin.name }
 			</div>
-		);
+			);
 
 		if ( this.props.hasAllNoManageSites ) {
 			return (

client/my-sites/plugins/plugin-item/style.scss

@@ -3,11 +3,6 @@
 
 	.is-bulk-editing & {
 		padding-left: 24px;
-
-		.plugin-item__actions {
-			opacity: 0.3;
-			filter: grayscale(70%);
-		}
 	}
 
 	& ~ .notice.is-error {