Add a unified search component.

_inc/client/admin.js

@@ -64,11 +64,9 @@ function render() {
 					<Route path='/apps' name={ i18n.translate( 'Apps', { context: 'Navigation item.' } ) } component={ Main } />
 					<Route path='/plans' name={ i18n.translate( 'Plans', { context: 'Navigation item.' } ) } component={ Main } />
 					<Route path='/settings' name={ i18n.translate( 'Settings', { context: 'Navigation item.' } ) } component={ Main } />
-					<Route path='/engagement' name={ i18n.translate( 'Engagement', { 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='/traffic' name={ i18n.translate( 'Traffic', { context: 'Navigation item.' } ) } component={ Main } />
-					<Route path='/appearance' name={ i18n.translate( 'Appearance', { context: 'Navigation item.' } ) } component={ Main } />
 					<Route path='/writing' name={ i18n.translate( 'Writing', { context: 'Navigation item.' } ) } component={ Main } />
 					<Route path='/search' component={ Main } />
 					<Route path="*" />

_inc/client/components/navigation-settings/index.jsx

@@ -17,7 +17,11 @@ import Gridicon from 'components/gridicon';
 /**
  * Internal dependencies
  */
-import { filterSearch } from 'state/search';
+import {
+	filterSearch,
+	focusSearch,
+	getSearchFocus as _getSearchFocus
+} from 'state/search';
 import {
 	userCanManageModules as _userCanManageModules,
 	userIsSubscriber as _userIsSubscriber
@@ -31,13 +35,26 @@ export const NavigationSettings = React.createClass( {
 		if ( currentHash.indexOf( 'search' ) === -1 ) {
 			window.location.hash = 'search';
 		}
+		this.props.onSearchFocus && this.props.onSearchFocus( true );
 	},
 
 	onSearch( term ) {
 		if ( term.length >= 3 ) {
 			analytics.tracks.recordEvent( 'jetpack_wpa_search_term', { term: term.toLowerCase() } );
 		}
+
 		this.props.searchForTerm( trim( term || '' ).toLowerCase() );
+
+		if ( 0 === term.length ) {
+
+			// Calling close handler to show what was previously shown to the user
+			this.onClose();
+		} else {
+
+			// Calling open handler in case the search was previously closed due to zero
+			// length search term
+			this.openSearch();
+		}
 	},
 
 	onClose: function() {
@@ -47,6 +64,17 @@ export const NavigationSettings = React.createClass( {
 		}
 	},
 
+	onBlur: function() {
+		let currentHash = window.location.hash;
+		this.props.onSearchFocus( false );
+
+		// If the user has navigated back a page, we discard the search term
+		// on blur
+		if ( currentHash.indexOf( 'search' ) === -1 ) {
+			this.props.searchForTerm( false );
+		}
+	},
+
 	maybeShowSearch: function() {
 		if ( this.props.userCanManageModules ) {
 			return (
@@ -58,7 +86,11 @@ export const NavigationSettings = React.createClass( {
 					onSearchOpen={ this.openSearch }
 					onSearch={ this.onSearch }
 					onSearchClose={ this.onClose }
-					isOpen={ '/search' === this.props.route.path }
+					onBlur={ this.onBlur }
+					isOpen={
+						'/search' === this.props.route.path
+						|| this.props.searchHasFocus
+					}
 				/>
 			);
 		}
@@ -143,12 +175,14 @@ export default connect(
 			userCanManageModules: _userCanManageModules( state ),
 			isSubscriber: _userIsSubscriber( state ),
 			siteConnectionStatus: getSiteConnectionStatus( state ),
-			isModuleActivated: module => isModuleActivated( state, module )
+			isModuleActivated: module => isModuleActivated( state, module ),
+			searchHasFocus: _getSearchFocus( state )
 		};
 	},
 	( dispatch ) => {
 		return {
-			searchForTerm: ( term ) => dispatch( filterSearch( term ) )
+			searchForTerm: ( term ) => dispatch( filterSearch( term ) ),
+			onSearchFocus: ( hasFocus ) => dispatch( focusSearch( hasFocus ) )
 		}
 	}
 )( NavigationSettings );

_inc/client/components/non-admin-view/index.jsx

@@ -15,7 +15,6 @@ import { isModuleActivated as _isModuleActivated } from 'state/modules';
 import Navigation from 'components/navigation';
 import NavigationSettings from 'components/navigation-settings';
 import AtAGlance from 'at-a-glance/index.jsx';
-import Engagement from 'engagement/index.jsx';
 import Writing from 'writing/index.jsx';
 import Apps from 'apps/index.jsx';
 import { getSiteConnectionStatus } from 'state/connection';
@@ -46,12 +45,6 @@ const NonAdminView = React.createClass( {
 			case '/apps':
 				pageComponent = <Apps { ...this.props } />;
 				break;
-			case '/engagement':
-				if ( ! this.props.isSubscriber ) {
-					navComponent = <NavigationSettings { ...this.props } />;
-					pageComponent = <Engagement { ...this.props } />;
-				}
-				break;
 			case '/settings':
 			case '/writing':
 				if ( ! this.props.isSubscriber ) {

_inc/client/discussion/index.jsx

@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
 import { getModule } from 'state/modules';
 import { getSettings } from 'state/settings';
 import { isDevMode, isUnavailableInDevMode } from 'state/connection';
+import { isModuleFound as _isModuleFound } from 'state/search';
 import QuerySite from 'components/data/query-site';
 import { Comments } from './comments';
 import { Subscriptions } from './subscriptions';
@@ -24,16 +25,37 @@ export const Discussion = React.createClass( {
 			isDevMode: this.props.isDevMode,
 			isUnavailableInDevMode: this.props.isUnavailableInDevMode
 		};
+
+		let found = {
+			comments: this.props.isModuleFound( 'comments' ),
+			subscriptions: this.props.isModuleFound( 'subscriptions' )
+		};
+
+		if ( ! this.props.searchTerm && ! this.props.active ) {
+			return null;
+		}
+
+		if ( ! found.comments && ! found.subscriptions ) {
+			return null;
+		}
+
+		let commentsSettings = (
+			<Comments
+				{ ...commonProps }
+			/>
+		);
+		let subscriptionsSettings = (
+			<Subscriptions
+				{ ...commonProps }
+				siteRawUrl={ this.props.siteRawUrl }
+			/>
+		);
+
 		return (
 			<div>
 				<QuerySite />
-				<Comments
-					{ ...commonProps }
-				/>
-				<Subscriptions
-					{ ...commonProps }
-					siteRawUrl={ this.props.siteRawUrl }
-				/>
+				{ found.comments && commentsSettings }
+				{ found.subscriptions && subscriptionsSettings }
 			</div>
 		);
 	}
@@ -45,7 +67,8 @@ export default connect(
 			module: module_name => getModule( state, module_name ),
 			settings: getSettings( state ),
 			isDevMode: isDevMode( state ),
-			isUnavailableInDevMode: module_name => isUnavailableInDevMode( state, module_name )
+			isUnavailableInDevMode: module_name => isUnavailableInDevMode( state, module_name ),
+			isModuleFound: ( module_name ) => _isModuleFound( state, module_name ),
 		}
 	}
 )( Discussion );