Jetpack Error Manage PAge: Extracted feature gate example code to par…

…ents

client/my-sites/jetpack-manage-error-page/README.md

@@ -42,6 +42,11 @@ To display a page that will prompt the user to opt-in to Jetpack manage:
 
 As stated above, this component renders an `emptyContent` component by default. For example:
 
+
+### Feature Example
+If you initialize the component with a property `featureExample` containing jsx, it will be added in the bottom of the Jetpack Manage Error Page as an example of what the user could be viewing if there weren't any access errors.
+
+
 ```
 JetpackManageErrorPage = require( 'my-sites/jetpack-manage-error-page' );
 

client/my-sites/jetpack-manage-error-page/index.jsx

@@ -9,15 +9,12 @@ import merge from 'lodash/object/merge'
  */
 import analytics from 'analytics'
 import EmptyContent from 'components/empty-content'
-import PluginItem from 'my-sites/plugins/plugin-item/plugin-item'
 import FeatureExample from 'components/feature-example'
 
 module.exports = React.createClass( {
 
 	displayName: 'JetpackManageErrorPage',
 
-	mockedPlugins: 0,
-
 	mixins: [ 'pluginsData' ],
 
 	actionCallbacks: {
@@ -67,53 +64,20 @@ module.exports = React.createClass( {
 		return merge( defaults[ this.props.template ] || defaults.default, this.props );
 	},
 
-	getMockPluginItems: function() {
-		const plugins = [ {
-			slug: 'akismet',
-			name: 'Akismet',
-			wporg: true,
-			icon: '//ps.w.org/akismet/assets/icon-256x256.png'
-		}, {
-			slug: 'wp-super-cache',
-			name: 'WP Super Cache',
-			wporg: true,
-			icon: '//ps.w.org/wp-super-cache/assets/icon-256x256.png'
-		}, {
-			slug: 'jetpack',
-			name: 'Jetpack by WordPress.com',
-			wporg: true,
-			icon: '//ps.w.org/jetpack/assets/icon-256x256.png'
-		} ];
-		const selectedSite = {
-			slug: 'no-slug',
-			canUpdateFiles: true,
-			name: 'Not a real site'
-		}
-
-		return plugins.map( plugin => {
-			return <PluginItem
-				key={ 'plugin-item-mock-' + this.mockedPlugins ++ }
-				plugin={ plugin }
-				sites={ [] }
-				selectedSite={ selectedSite }
-				progress={ [] }
-				isMock={ true } />
-		} );
-	},
-
 	render() {
 		const settings = this.getSettings();
 		if ( this.actionCallbacks[ this.props.template ] ) {
 			settings.actionCallback = this[ this.actionCallbacks[ this.props.template ] ];
 		}
 		const emptyContent = React.createElement( EmptyContent, settings );
+		const featureExample = this.props.featureExample
+			? <FeatureExample>{ this.props.featureExample }</FeatureExample>
+			: null;
 
 		return (
 			<div>
 				{ emptyContent }
-				<FeatureExample>
-					{ this.getMockPluginItems() }
-				</FeatureExample>
+				{ featureExample }
 			</div>
 		)
 	}

client/my-sites/plugins/main.jsx

@@ -663,6 +663,40 @@ export default React.createClass( {
 		return navItems;
 	},
 
+	getMockPluginItems() {
+		const plugins = [ {
+			slug: 'akismet',
+			name: 'Akismet',
+			wporg: true,
+			icon: '//ps.w.org/akismet/assets/icon-256x256.png'
+		}, {
+			slug: 'wp-super-cache',
+			name: 'WP Super Cache',
+			wporg: true,
+			icon: '//ps.w.org/wp-super-cache/assets/icon-256x256.png'
+		}, {
+			slug: 'jetpack',
+			name: 'Jetpack by WordPress.com',
+			wporg: true,
+			icon: '//ps.w.org/jetpack/assets/icon-256x256.png'
+		} ];
+		const selectedSite = {
+			slug: 'no-slug',
+			canUpdateFiles: true,
+			name: 'Not a real site'
+		}
+
+		return plugins.map( plugin => {
+			return <PluginItem
+				key={ 'plugin-item-mock-' + plugin.slug }
+				plugin={ plugin }
+				sites={ [] }
+				selectedSite={ selectedSite }
+				progress={ [] }
+				isMock={ true } />
+		} );
+	},
+
 	render() {
 		if ( this.state.accessError ) {
 			return (
@@ -691,7 +725,7 @@ export default React.createClass( {
 						site={ this.props.site }
 						actionURL={ selectedSite.getRemoteManagementURL() }
 						illustration= '/calypso/images/drake/drake-jetpack.svg'
-					/>
+						featureExample={ this.getMockPluginItems() } />
 				</Main>
 			);
 		}

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 ) {
 			return;
 		}