Admin Page: new Performance tab.

- See #10550 - Move existing cards over to a new "Performance" section.
Automattic · Dec 18, 2018 · 504f2cb · 504f2cb
1 parent 50bf82f
commit 504f2cb
Show file tree

Hide file tree

Showing 11 changed files with 214 additions and 161 deletions.
diff --git a/_inc/client/admin.js b/_inc/client/admin.js
@@ -77,6 +77,7 @@ function render() {
 					<Route path="/settings" name={ i18n.translate( 'Settings', { context: 'Navigation item.' } ) } component={ Main } />
 					<Route path="/discussion" name={ i18n.translate( 'Discussion', { context: 'Navigation item.' } ) } component={ Main } />
 					<Route path="/security" name={ i18n.translate( 'Security', { context: 'Navigation item.' } ) } component={ Main } />
+					<Route path="/performance" name={ i18n.translate( 'Performance', { context: 'Navigation item.' } ) } component={ Main } />
 					<Route path="/traffic" name={ i18n.translate( 'Traffic', { context: 'Navigation item.' } ) } component={ Main } />
 					<Route path="/writing" name={ i18n.translate( 'Writing', { context: 'Navigation item.' } ) } component={ Main } />
 					<Route path="/sharing" name={ i18n.translate( 'Sharing', { context: 'Navigation item.' } ) } component={ Main } />

diff --git a/_inc/client/components/navigation-settings/index.jsx b/_inc/client/components/navigation-settings/index.jsx
@@ -1,6 +1,9 @@
 /**
  * External dependencies
+ *
+ * @format
  */
+
 import PropTypes from 'prop-types';
 import React from 'react';
 import createReactClass from 'create-react-class';
@@ -18,14 +21,11 @@ import intersection from 'lodash/intersection';
 /**
  * Internal dependencies
  */
-import {
-	filterSearch,
-	getSearchTerm
-} from 'state/search';
+import { filterSearch, getSearchTerm } from 'state/search';
 import {
 	userCanManageModules as _userCanManageModules,
 	userIsSubscriber as _userIsSubscriber,
-	userCanPublish
+	userCanPublish,
 } from 'state/initial-state';
 import { isSiteConnected, isCurrentUserLinked } from 'state/connection';
 import { isModuleActivated, getModules } from 'state/modules';
@@ -81,11 +81,11 @@ export const NavigationSettings = createReactClass( {
 	trackNavClick( target ) {
 		analytics.tracks.recordJetpackClick( {
 			target: 'nav_item',
-			path: target
+			path: target,
 		} );
 	},
 
-    /**
+	/**
 	 * The UrlSearch mixin callback to form a new location href string.
 	 *
 	 * @param {string} href the current location string
@@ -100,7 +100,7 @@ export const NavigationSettings = createReactClass( {
 		return '#' + splitHash[ 0 ] + ( keyword ? '?term=' + keyword : '' );
 	},
 
-    /**
+	/**
 	 * Check that the module list includes at least one of these modules.
 	 *
 	 * @param  {array}   modules Modules that are probably included in the module list.
@@ -120,87 +120,93 @@ export const NavigationSettings = createReactClass( {
 		if ( this.props.userCanManageModules ) {
 			navItems = (
 				<NavTabs selectedText={ this.props.route.name }>
-					{
-						this.hasAnyOfThese( [
-							'masterbar',
-							'markdown',
-							'after-the-deadline',
-							'custom-content-types',
-							'photon',
-							'carousel',
-							'post-by-email',
-							'infinite-scroll',
-							'minileven'
-						] ) && (
-							<NavItem
-								path="#writing"
-								onClick={ this.handleClickForTracking( 'writing' ) }
-								selected={ this.props.route.path === '/writing' || this.props.route.path === '/settings' }>
-								{ __( 'Writing', { context: 'Navigation item.' } ) }
-							</NavItem>
-						)
-					}
-					{
-						this.hasAnyOfThese( [
-							'publicize',
-							'sharedaddy',
-							'likes'
-						] ) && (
-							<NavItem
-								path="#sharing"
-								onClick={ this.handleClickForTracking( 'sharing' ) }
-								selected={ this.props.route.path === '/sharing' }>
-								{ __( 'Sharing', { context: 'Navigation item.' } ) }
-							</NavItem>
-						)
-					}
-					{
-						this.hasAnyOfThese( [
-							'comments',
-							'gravatar-hovercards',
-							'markdown',
-							'subscriptions'
-						] ) && (
-							<NavItem
-								path="#discussion"
-								onClick={ this.handleClickForTracking( 'discussion' ) }
-								selected={ this.props.route.path === '/discussion' }>
-								{ __( 'Discussion', { context: 'Navigation item.' } ) }
-							</NavItem>
-						)
-					}
-					{
-						this.hasAnyOfThese( [
-							'seo-tools',
-							'wordads',
-							'stats',
-							'related-posts',
-							'verification-tools',
-							'sitemaps',
-							'google-analytics'
-						] ) && (
-							<NavItem
-								path="#traffic"
-								onClick={ this.handleClickForTracking( 'traffic' ) }
-								selected={ this.props.route.path === '/traffic' }>
-								{ __( 'Traffic', { context: 'Navigation item.' } ) }
-							</NavItem>
-						)
-					}
-					{
-						( this.hasAnyOfThese( [
-							'protect',
-							'sso',
-							'vaultpress'
-						] ) || this.props.isPluginActive( 'akismet/akismet.php' ) ) && (
-							<NavItem
-								path="#security"
-								onClick={ this.handleClickForTracking( 'security' ) }
-								selected={ this.props.route.path === '/security' }>
-								{ __( 'Security', { context: 'Navigation item.' } ) }
-							</NavItem>
-						)
-					}
+					{ this.hasAnyOfThese( [
+						'masterbar',
+						'markdown',
+						'after-the-deadline',
+						'custom-content-types',
+						'post-by-email',
+						'infinite-scroll',
+						'minileven',
+					] ) && (
+						<NavItem
+							path="#writing"
+							onClick={ this.handleClickForTracking( 'writing' ) }
+							selected={
+								this.props.route.path === '/writing' || this.props.route.path === '/settings'
+							}
+						>
+							{ __( 'Writing', { context: 'Navigation item.' } ) }
+						</NavItem>
+					) }
+					{ this.hasAnyOfThese( [ 'publicize', 'sharedaddy', 'likes' ] ) && (
+						<NavItem
+							path="#sharing"
+							onClick={ this.handleClickForTracking( 'sharing' ) }
+							selected={ this.props.route.path === '/sharing' }
+						>
+							{ __( 'Sharing', { context: 'Navigation item.' } ) }
+						</NavItem>
+					) }
+					{ this.hasAnyOfThese( [
+						'comments',
+						'gravatar-hovercards',
+						'markdown',
+						'subscriptions',
+					] ) && (
+						<NavItem
+							path="#discussion"
+							onClick={ this.handleClickForTracking( 'discussion' ) }
+							selected={ this.props.route.path === '/discussion' }
+						>
+							{ __( 'Discussion', { context: 'Navigation item.' } ) }
+						</NavItem>
+					) }
+					{ this.hasAnyOfThese( [
+						'carousel',
+						'lazy-images',
+						'photon',
+						'photon-cdn',
+						'search',
+						'videopress'
+					] ) && (
+						<NavItem
+							path="#performance"
+							onClick={ this.handleClickForTracking( 'performance' ) }
+							selected={
+								this.props.route.path === '/performance'
+							}
+						>
+							{ __( 'Performance', { context: 'Navigation item.' } ) }
+						</NavItem>
+					) }
+					{ this.hasAnyOfThese( [
+						'seo-tools',
+						'wordads',
+						'stats',
+						'related-posts',
+						'verification-tools',
+						'sitemaps',
+						'google-analytics',
+					] ) && (
+						<NavItem
+							path="#traffic"
+							onClick={ this.handleClickForTracking( 'traffic' ) }
+							selected={ this.props.route.path === '/traffic' }
+						>
+							{ __( 'Traffic', { context: 'Navigation item.' } ) }
+						</NavItem>
+					) }
+					{ ( this.hasAnyOfThese( [ 'protect', 'sso', 'vaultpress' ] ) ||
+						this.props.isPluginActive( 'akismet/akismet.php' ) ) && (
+						<NavItem
+							path="#security"
+							onClick={ this.handleClickForTracking( 'security' ) }
+							selected={ this.props.route.path === '/security' }
+						>
+							{ __( 'Security', { context: 'Navigation item.' } ) }
+						</NavItem>
+					) }
 				</NavTabs>
 			);
 		} else if ( this.props.isSubscriber ) {
@@ -209,32 +215,29 @@ export const NavigationSettings = createReactClass( {
 			if ( ! this.props.isModuleActivated( 'publicize' ) || ! this.props.userCanPublish ) {
 				sharingTab = '';
 			} else {
-				sharingTab = this.hasAnyOfThese( [
-					'publicize'
-				] ) && (
+				sharingTab = this.hasAnyOfThese( [ 'publicize' ] ) && (
 					<NavItem
 						path="#sharing"
 						onClick={ this.handleClickForTracking( 'sharing' ) }
-						selected={ this.props.route.path === '/sharing' }>
+						selected={ this.props.route.path === '/sharing' }
+					>
 						{ __( 'Sharing', { context: 'Navigation item.' } ) }
 					</NavItem>
 				);
 			}
 			navItems = (
 				<NavTabs selectedText={ this.props.route.name }>
-					{
-						this.hasAnyOfThese( [
-							'after-the-deadline',
-							'post-by-email'
-						] ) && (
-							<NavItem
-								path="#writing"
-								onClick={ this.handleClickForTracking( 'writing' ) }
-								selected={ this.props.route.path === '/writing' || this.props.route.path === '/settings' }>
-								{ __( 'Writing', { context: 'Navigation item.' } ) }
-							</NavItem>
-						)
-					}
+					{ this.hasAnyOfThese( [ 'after-the-deadline', 'post-by-email' ] ) && (
+						<NavItem
+							path="#writing"
+							onClick={ this.handleClickForTracking( 'writing' ) }
+							selected={
+								this.props.route.path === '/writing' || this.props.route.path === '/settings'
+							}
+						>
+							{ __( 'Writing', { context: 'Navigation item.' } ) }
+						</NavItem>
+					) }
 					{
 						// Give only Publicize to non admin users
 						sharingTab
@@ -252,11 +255,11 @@ export const NavigationSettings = createReactClass( {
 				</SectionNav>
 			</div>
 		);
-	}
+	},
 } );
 
 NavigationSettings.contextTypes = {
-	router: PropTypes.object.isRequired
+	router: PropTypes.object.isRequired,
 };
 
 NavigationSettings.propTypes = {
@@ -266,7 +269,7 @@ NavigationSettings.propTypes = {
 	isLinked: PropTypes.bool.isRequired,
 	isSiteConnected: PropTypes.bool.isRequired,
 	isModuleActivated: PropTypes.func.isRequired,
-	searchHasFocus: PropTypes.bool.isRequired
+	searchHasFocus: PropTypes.bool.isRequired,
 };
 
 NavigationSettings.defaultProps = {
@@ -276,11 +279,11 @@ NavigationSettings.defaultProps = {
 	isLinked: false,
 	isSiteConnected: false,
 	isModuleActivated: noop,
-	searchHasFocus: false
+	searchHasFocus: false,
 };
 
 export default connect(
-	( state ) => {
+	state => {
 		return {
 			userCanManageModules: _userCanManageModules( state ),
 			isSubscriber: _userIsSubscriber( state ),
@@ -290,12 +293,12 @@ export default connect(
 			isModuleActivated: module => isModuleActivated( state, module ),
 			moduleList: getModules( state ),
 			isPluginActive: plugin_slug => isPluginActive( state, plugin_slug ),
-			searchTerm: getSearchTerm( state )
+			searchTerm: getSearchTerm( state ),
 		};
 	},
-	( dispatch ) => {
+	dispatch => {
 		return {
-			searchForTerm: ( term ) => dispatch( filterSearch( term ) )
+			searchForTerm: term => dispatch( filterSearch( term ) ),
 		};
 	}
 )( NavigationSettings );
diff --git a/_inc/client/components/non-admin-view/index.jsx b/_inc/client/components/non-admin-view/index.jsx
@@ -36,6 +36,7 @@ class NonAdminView extends React.Component {
 			case '/settings':
 			case '/writing':
 			case '/sharing':
+			case '/performance':
 				if ( ! this.props.isSubscriber ) {
 					navComponent = <NavigationSettings { ...this.props } />;
 					pageComponent = <SearchableSettings

diff --git a/_inc/client/main.jsx b/_inc/client/main.jsx
@@ -184,6 +184,7 @@ class Main extends React.Component {
 			case '/security':
 			case '/traffic':
 			case '/discussion':
+			case '/performance':
 			case '/writing':
 			case '/sharing':
 			case '/privacy':
@@ -281,6 +282,7 @@ window.wpNavMenuClassChange = function() {
 			'#/general',
 			'#/discussion',
 			'#/security',
+			'#/performance',
 			'#/traffic',
 			'#/writing',
 			'#/sharing',