Settings: highlight credentials settings section when redirected from…

… the site activity (#40018) * Adds contextual popover menu item to add site credentials * Update copy with the latest suggestions * Adds tracking to new option * Adds `is-highlighted` class if hash is "credentials” * Adds hash “credentials” to links * Adds highlight style * Increase highlight around the section wrapper * Fix the output of the function to always return a boolean Co-Authored-By: Enej Bajgoric <enej.bajgoric@gmail.com> * Return false as default as well Co-Authored-By: Enej Bajgoric <enej.bajgoric@gmail.com>
Automattic · Mar 12, 2020 · 815dc5f · 815dc5f
1 parent 4db7706
commit 815dc5f
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/client/blocks/jetpack-backup-creds-banner/index.jsx b/client/blocks/jetpack-backup-creds-banner/index.jsx
@@ -44,7 +44,7 @@ class JetpackBackupCredsBanner extends Component {
 						href={
 							rewindState.canAutoconfigure
 								? `/start/rewind-auto-config/?blogid=${ siteId }&siteSlug=${ siteSlug }`
-								: `/settings/security/${ siteSlug }`
+								: `/settings/security/${ siteSlug }#credentials`
 						}
 						title={ translate( 'Add your server credentials' ) }
 						description={ translate(

diff --git a/client/my-sites/activity/activity-log-item/index.jsx b/client/my-sites/activity/activity-log-item/index.jsx
@@ -265,7 +265,7 @@ class ActivityLogItem extends Component {
 							href={
 								canAutoconfigure
 									? `/start/rewind-auto-config/?blogid=${ siteId }&siteSlug=${ siteSlug }`
-									: `/settings/security/${ siteSlug }`
+									: `/settings/security/${ siteSlug }#credentials`
 							}
 							onClick={ trackAddCreds }
 						>

diff --git a/client/my-sites/site-settings/jetpack-credentials/index.jsx b/client/my-sites/site-settings/jetpack-credentials/index.jsx
@@ -5,6 +5,7 @@ import React, { Component } from 'react';
 import { localize } from 'i18n-calypso';
 import { connect } from 'react-redux';
 import { some } from 'lodash';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -25,13 +26,29 @@ import RewindCredentialsForm from 'components/rewind-credentials-form';
 import './style.scss';
 
 class JetpackCredentials extends Component {
+	isSectionHighlighted() {
+		if ( ! window.location.hash ) {
+			return false;
+		}
+
+		const hash = window.location.hash.substring( 1 );
+		if ( 'credentials' === hash ) {
+			return true;
+		}
+		return false;
+	}
+
 	render() {
 		const { credentials, rewindState, siteId, translate, siteSlug } = this.props;
+		const classes = classNames(
+			'jetpack-credentials',
+			this.isSectionHighlighted() && 'is-highlighted'
+		);
 		const hasAuthorized = rewindState === 'provisioning' || rewindState === 'active';
 		const hasCredentials = some( credentials, { role: 'main' } );
 
 		return (
-			<div className="jetpack-credentials">
+			<div className={ classes }>
 				<QueryRewindState siteId={ siteId } />
 				<SettingsSectionHeader title={ translate( 'Backups and security scans' ) }>
 					{ hasAuthorized && (

diff --git a/client/my-sites/site-settings/jetpack-credentials/style.scss b/client/my-sites/site-settings/jetpack-credentials/style.scss
@@ -1,5 +1,13 @@
 .jetpack-credentials {
 	margin-bottom: 15px;
+
+	&.is-highlighted {
+		box-shadow: 0 0 0 3px var( --color-accent );
+
+		.card {
+			box-shadow: 0 0 0 1px var( --color-accent );
+		}
+	}
 }
 
 .jetpack-credentials .foldable-card.card.is-expanded {