From 3c201cd1b32f9fc34d17adac6246b3b5b3fca898 Mon Sep 17 00:00:00 2001
From: Elio Rivero <eliorivero@gmail.com>
Date: Tue, 8 Nov 2016 00:41:41 -0300
Subject: [PATCH] Admin - AAG: link notices in dashboard items to screens where
 users can 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
---
 _inc/client/at-a-glance/akismet.jsx         |  1 +
 _inc/client/at-a-glance/plugins.jsx         |  5 ++++-
 _inc/client/components/dash-item/index.jsx  | 20 ++++++++++++--------
 _inc/client/components/dash-item/style.scss |  2 +-
 _inc/client/main.jsx                        |  2 +-
 _inc/client/pro-status/index.jsx            | 18 ++++++++++--------
 _inc/client/search/index.jsx                |  2 +-
 _inc/client/security/index.jsx              |  2 +-
 8 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/_inc/client/at-a-glance/akismet.jsx b/_inc/client/at-a-glance/akismet.jsx
index 121c8bf857b85..cbae14b295f95 100644
--- 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
index 0dc8372c89122..832cbf728258f 100644
--- 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
index b3d93bc860860..54a9b8a63ff40 100644
--- 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
index 129ab7881bd8b..58d4f4330765d 100644
--- 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
index 4fd02e95fb59c..2c28ede885705 100644
--- 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
index 049b36217fc06..b975e928e8ad4 100644
--- 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
index c341cbf1e2b8d..2ae5de90046f8 100644
--- 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
index 7e4992a4e9483..480ec38dbd0c5 100644
--- 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>