Admin - AAG: link notices in dashboard items to screens where users c…

…an solve the issue (#5176) * Admin - AAG: link notice in Plugin Updates card to Plugins screen in WP Admin or Calypso Plugin management, based on whether the site is in Dev more or not, so user can solve the issue. * Admin - AAG: link invalid key notice in Akismet (dash item, card and search card) to its screen so user can solve it. * Admin - AAG: italicize only links in the card body content
Automattic · Nov 8, 2016 · 3c201cd · 3c201cd
1 parent 7c24905
commit 3c201cd
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 21 deletions.
diff --git a/_inc/client/at-a-glance/akismet.jsx b/_inc/client/at-a-glance/akismet.jsx
@@ -101,6 +101,7 @@ const DashAkismet = React.createClass( {
 					status="is-warning"
 					statusText={ __( 'Invalid Key' ) }
 					pro={ true }
+					siteAdminUrl={ this.props.siteAdminUrl }
 				>
 					<p className="jp-dash-item__description">
 						{

diff --git a/_inc/client/at-a-glance/plugins.jsx b/_inc/client/at-a-glance/plugins.jsx
@@ -54,7 +54,10 @@ const DashPluginUpdates = React.createClass( {
 				<DashItem
 					label={ labelName }
 					module="manage"
-					status="is-warning" >
+					status="is-warning"
+					siteRawUrl={ this.props.siteRawUrl }
+					siteAdminUrl={ this.props.siteAdminUrl }
+				>
 					<h2 className="jp-dash-item__count">
 						{
 							__( '%(number)s plugin', '%(number)s plugins', {

diff --git a/_inc/client/components/dash-item/index.jsx b/_inc/client/components/dash-item/index.jsx
@@ -70,13 +70,17 @@ const DashItem = React.createClass( {
 			if ( 'manage' === this.props.module ) {
 				if ( 'is-warning' === this.props.status ) {
 					toggle = (
-						<SimpleNotice
-							showDismiss={ false }
-							status={ this.props.status }
-							isCompact={ true }
-						>
-							{ __( 'Updates Needed' ) }
-						</SimpleNotice>
+						<a href={ this.props.isModuleActivated( 'manage' )
+							? 'https://wordpress.com/plugins/' + this.props.siteRawUrl
+							: this.props.siteAdminUrl + 'plugins.php' } >
+							<SimpleNotice
+								showDismiss={ false }
+								status={ this.props.status }
+								isCompact={ true }
+							>
+								{ __( 'Updates Needed' ) }
+							</SimpleNotice>
+						</a>
 					);
 				}
 				if ( 'is-working' === this.props.status ) {
@@ -95,7 +99,7 @@ const DashItem = React.createClass( {
 				</Button>
 			;
 
-			toggle = <ProStatus proFeature={ this.props.module } />;
+			toggle = <ProStatus proFeature={ this.props.module } siteAdminUrl={ this.props.siteAdminUrl } />;
 		}
 
 		return (

diff --git a/_inc/client/components/dash-item/style.scss b/_inc/client/components/dash-item/style.scss
@@ -1,5 +1,5 @@
 .jp-dash-item {
-	a {
+	.jp-dash-item__content a {
 		font-style: italic;
 	}
 	.dops-section-header__card-badge .dops-button {

diff --git a/_inc/client/main.jsx b/_inc/client/main.jsx
@@ -176,7 +176,7 @@ const Main = React.createClass( {
 				break;
 			case '/security':
 				navComponent = <NavigationSettings route={ this.props.route } />;
-				pageComponent = <Security route={ this.props.route } />;
+				pageComponent = <Security route={ this.props.route } siteAdminUrl={ this.props.siteAdminUrl } />;
 				break;
 			case '/traffic':
 				navComponent = <NavigationSettings route={ this.props.route } />;

diff --git a/_inc/client/pro-status/index.jsx b/_inc/client/pro-status/index.jsx
@@ -70,14 +70,16 @@ const ProStatus = React.createClass( {
 			if ( 'akismet' === feature ) {
 				const akismetData = this.props.getAkismetData();
 				if ( 'invalid_key' === akismetData ) {
-					return(
-						<SimpleNotice
-							showDismiss={ false }
-							status='is-warning'
-							isCompact={ true }
-						>
-							{ __( 'Invalid Key' ) }
-						</SimpleNotice>
+					return (
+						<a href={ this.props.siteAdminUrl + 'admin.php?page=akismet-key-config' } >
+							<SimpleNotice
+								showDismiss={ false }
+								status='is-warning'
+								isCompact={ true }
+							>
+								{ __( 'Invalid Key' ) }
+							</SimpleNotice>
+						</a>
 					);
 				}
 			}

diff --git a/_inc/client/search/index.jsx b/_inc/client/search/index.jsx
@@ -108,7 +108,7 @@ export const SearchResults = ( {
 				module: element[0],
 				configure_url: ''
 			};
-			toggle = <ProStatus proFeature={ element[0] } />;
+			toggle = <ProStatus proFeature={ element[0] } siteAdminUrl={ siteAdminUrl } />;
 
 			// Add a "pro" button next to the header title
 			element[1] = <span>

diff --git a/_inc/client/security/index.jsx b/_inc/client/security/index.jsx
@@ -69,7 +69,7 @@ export const Page = ( props ) => {
 				module: element[0],
 				configure_url: ''
 			};
-			toggle = <ProStatus proFeature={ element[0] } />;
+			toggle = <ProStatus proFeature={ element[0] } siteAdminUrl={ props.siteAdminUrl } />;
 
 			// Add a "pro" button next to the header title
 			element[1] = <span>