Settings: highlight credentials settings section when redirected from the site activity

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(

client/my-sites/activity/activity-log-item/index.jsx

@@ -236,11 +236,15 @@ class ActivityLogItem extends Component {
 
 	renderRewindAction() {
 		const {
+			activity,
+			canAutoconfigure,
 			createBackup,
 			createRewind,
 			disableRestore,
 			disableBackup,
-			activity,
+			siteId,
+			siteSlug,
+			trackAddCreds,
 			translate,
 		} = this.props;
 
@@ -255,6 +259,20 @@ class ActivityLogItem extends Component {
 						{ translate( 'Restore to this point' ) }
 					</PopoverMenuItem>
 
+					{ disableRestore && (
+						<PopoverMenuItem
+							icon="plus"
+							href={
+								canAutoconfigure
+									? `/start/rewind-auto-config/?blogid=${ siteId }&siteSlug=${ siteSlug }`
+									: `/settings/security/${ siteSlug }#credentials`
+							}
+							onClick={ trackAddCreds }
+						>
+							{ translate( 'Add server credentials to enable restoring' ) }
+						</PopoverMenuItem>
+					) }
+
 					<PopoverMenuSeparator />
 
 					<PopoverMenuItem
@@ -471,6 +489,7 @@ const mapDispatchToProps = ( dispatch, { activity: { activityId }, siteId } ) =>
 		dispatch(
 			recordTracksEvent( 'calypso_activitylog_event_get_help', { activity_name: activityName } )
 		),
+	trackAddCreds: () => dispatch( recordTracksEvent( 'calypso_activitylog_event_add_credentials' ) ),
 	trackFixCreds: () => dispatch( recordTracksEvent( 'calypso_activitylog_event_fix_credentials' ) ),
 } );
 

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,28 @@ import RewindCredentialsForm from 'components/rewind-credentials-form';
 import './style.scss';
 
 class JetpackCredentials extends Component {
+	isSectionHighlighted() {
+		if ( ! window.location.hash ) {
+			return null;
+		}
+
+		const hash = window.location.hash.substring( 1 );
+		if ( 'credentials' === hash ) {
+			return true;
+		}
+	}
+
 	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 && (

client/my-sites/site-settings/jetpack-credentials/style.scss

@@ -1,5 +1,9 @@
 .jetpack-credentials {
 	margin-bottom: 15px;
+
+	&.is-highlighted .card {
+		box-shadow: 0 0 0 1px var( --color-accent );
+	}
 }
 
 .jetpack-credentials .foldable-card.card.is-expanded {