At a glance: add Activity Log card (#8199)

* At a glance: add Activity Log card

* Pass down site urls to DashActivity component

* Pass only siteRawUrl prop

* Introduce property isModule in DashItem so cards for elements that are not modules, like Activity Log, can opt out of the toggle/button on the right of the header of the cards in dashboard

_inc/client/at-a-glance/activity.jsx

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import DashItem from 'components/dash-item';
+import { translate as __ } from 'i18n-calypso';
+import get from 'lodash/get';
+import includes from 'lodash/includes';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { getSitePlan } from 'state/site';
+import { isDevMode } from 'state/connection';
+import { PLAN_JETPACK_BUSINESS, PLAN_JETPACK_BUSINESS_MONTHLY } from 'lib/plans/constants';
+
+class DashActivity extends Component {
+	static propTypes = {
+		inDevMode: PropTypes.bool.isRequired,
+		siteRawUrl: PropTypes.string.isRequired,
+		sitePlan: PropTypes.object.isRequired
+	};
+
+	static defaultProps = {
+		inDevMode: false,
+		siteRawUrl: '',
+		sitePlan: ''
+	};
+
+	render() {
+		const { siteRawUrl, inDevMode } = this.props;
+		const sitePlan = get( this.props.sitePlan, 'product_slug', 'jetpack_free' );
+		const activityLogLink = <a href={ `https://wordpress.com/stats/activity/${ siteRawUrl }` } />;
+		const hasBackups = includes( [ PLAN_JETPACK_BUSINESS, PLAN_JETPACK_BUSINESS_MONTHLY ], sitePlan );
+		const maybeUpgrade = hasBackups
+			? __( "{{a}}View your site's activity{{/a}} in a single feed where you can see when events occur and rewind them if you need to.", {
+				components: {
+					a: activityLogLink
+				}
+			} )
+			: __( "{{a}}View your site's activity{{/a}} in a single feed where you can see when events occur and, {{plan}}with a plan{{/plan}}, rewind them if you need to.", {
+				components: {
+					a: activityLogLink,
+					plan: <a href={ `https://jetpack.com/redirect/?source=plans-main-bottom&site=${ siteRawUrl }` } />
+				}
+			} );
+
+		return (
+			<div className="jp-dash-item__interior">
+				<DashItem
+					label={ __( 'Activity' ) }
+					isModule={ false }
+					className={ classNames( {
+						'jp-dash-item__is-inactive': inDevMode
+					} ) }
+					pro={ ! hasBackups }
+					>
+					<p className="jp-dash-item__description">
+						{
+							inDevMode
+								? __( 'Unavailable in Dev Mode.' )
+								: maybeUpgrade
+						}
+					</p>
+				</DashItem>
+			</div>
+		);
+	}
+}
+
+export default connect(
+	state => ( {
+		sitePlan: getSitePlan( state ),
+		inDevMode: isDevMode( state ),
+	} )
+)( DashActivity );

_inc/client/at-a-glance/index.jsx

@@ -12,6 +12,7 @@ import analytics from 'lib/analytics';
 import { ModuleSettingsForm as moduleSettingsForm } from 'components/module-settings/module-settings-form';
 import DashSectionHeader from 'components/dash-section-header';
 import DashStats from './stats/index.jsx';
+import DashActivity from './activity';
 import DashProtect from './protect';
 import DashMonitor from './monitor';
 import DashScan from './scan';
@@ -77,29 +78,33 @@ class AtAGlance extends Component {
 					}
 					<div className="jp-at-a-glance__item-grid">
 						<div className="jp-at-a-glance__left">
-							<DashProtect { ...settingsProps } />
+							<DashActivity { ...settingsProps } siteRawUrl={ this.props.siteRawUrl } />
 						</div>
 						<div className="jp-at-a-glance__right">
-							<DashScan { ...settingsProps } siteRawUrl={ this.props.siteRawUrl } />
+							<DashProtect { ...settingsProps } />
 						</div>
 					</div>
 					<div className="jp-at-a-glance__item-grid">
 						<div className="jp-at-a-glance__left">
 							<DashBackups { ...settingsProps } siteRawUrl={ this.props.siteRawUrl } />
 						</div>
 						<div className="jp-at-a-glance__right">
-							<DashMonitor { ...settingsProps } />
+							<DashScan { ...settingsProps } siteRawUrl={ this.props.siteRawUrl } />
 						</div>
 					</div>
 					<div className="jp-at-a-glance__item-grid">
 						<div className="jp-at-a-glance__left">
 							<DashAkismet { ...urls } />
 						</div>
 						<div className="jp-at-a-glance__right">
+							<DashMonitor { ...settingsProps } />
+						</div>
+					</div>
+					<div className="jp-at-a-glance__item-grid">
+						<div className="jp-at-a-glance__left">
 							<DashPluginUpdates { ...settingsProps } { ...urls } />
 						</div>
 					</div>
-
 					{
 						<DashSectionHeader
 							label={ __( 'Performance' ) }

_inc/client/components/dash-item/index.jsx

@@ -110,7 +110,9 @@ export class DashItem extends Component {
 				</Button>
 			;
 
-			toggle = <ProStatus proFeature={ this.props.module } siteAdminUrl={ this.props.siteAdminUrl } />;
+			if ( this.props.isModule ) {
+				toggle = <ProStatus proFeature={ this.props.module } siteAdminUrl={ this.props.siteAdminUrl } />;
+			}
 		}
 
 		return (
@@ -137,13 +139,15 @@ DashItem.propTypes = {
 	statusText: React.PropTypes.string,
 	disabled: React.PropTypes.bool,
 	module: React.PropTypes.string,
-	pro: React.PropTypes.bool
+	pro: React.PropTypes.bool,
+	isModule: React.PropTypes.bool,
 };
 
 DashItem.defaultProps = {
 	label: '',
 	module: '',
-	pro: false
+	pro: false,
+	isModule: true,
 };
 
 export default connect(

package.json

@@ -94,6 +94,7 @@
     "json-loader": "^0.5.7",
     "lodash": "^4.9.0",
     "node-sass": "4.5.3",
+    "prop-types": "15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-hot-loader": "^1.3.0",

yarn.lock

@@ -6871,6 +6871,13 @@ promise@^8.0.1:
   dependencies:
     asap "~2.0.3"
 
+prop-types@15.5.10:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
 prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"