Activity Log: Tasklist restict the task list to 3 items on page load (#…

…26710)
Automattic · Aug 15, 2018 · 55c0879 · 55c0879
1 parent 9604812
commit 55c0879
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 39 deletions.
diff --git a/client/my-sites/stats/activity-log-tasklist/index.jsx b/client/my-sites/stats/activity-log-tasklist/index.jsx
@@ -1,4 +1,5 @@
 /** @format */
+/* eslint-disable wpcalypso/i18n-mismatched-placeholders */
 /**
  * External dependencies
  */
@@ -47,6 +48,8 @@ const isItemUpdating = updatables =>
  */
 const isItemEnqueued = ( updateSlug, updateQueue ) => !! find( updateQueue, { slug: updateSlug } );
 
+const MaxUpdatedToShow = 3;
+
 class ActivityLogTasklist extends Component {
 	static propTypes = {
 		siteId: PropTypes.number,
@@ -85,6 +88,7 @@ class ActivityLogTasklist extends Component {
 	state = {
 		dismissed: [],
 		queued: [],
+		expandedView: false,
 	};
 
 	/**
@@ -202,6 +206,16 @@ class ActivityLogTasklist extends Component {
 			this.continueQueue
 		);
 	};
+	/**
+	 * Expand the list of updates to show all of them
+	 *
+	 * @param {object} event Synthetic event
+	 */
+	showAllUpdates = event => {
+		recordTracksEvent( 'calypso_activitylog_tasklist_expand_view' );
+		this.setState( { expandedView: true } );
+		event.preventDefault();
+	};
 
 	/**
 	 * Starts the update process for a specified plugin/theme. Displays an informational notice.
@@ -305,6 +319,47 @@ class ActivityLogTasklist extends Component {
 		} );
 	}
 
+	showAllItemsToUpdate( itemsToUpdate ) {
+		// Show if plugin update didn't start, is still running or errored,
+		// but hide plugin if it was updated successfully.
+		return itemsToUpdate.map( item => {
+			return (
+				<ActivityLogTaskUpdate
+					key={ item.slug }
+					toUpdate={ item }
+					name={ item.name }
+					slug={ item.slug }
+					version={ item.version }
+					type={ item.type }
+					linked={ 'core' !== item.type }
+					goToPage={ this.goToPage }
+					siteSlug={ this.props.siteSlug }
+					enqueue={ this.enqueue }
+					dismiss={ this.dismiss }
+					disable={ isItemEnqueued( item.slug, this.state.queued ) }
+				/>
+			);
+		} );
+	}
+
+	showFooterToExpandAll( numberOfUpdates ) {
+		const { translate } = this.props;
+		const updatesHidden = numberOfUpdates - MaxUpdatedToShow;
+		return (
+			<div className="activity-log-tasklist__footer">
+				<span>
+					{ translate( 'One more update available', ' %(updates)s more updates available', {
+						count: updatesHidden,
+						args: { updates: updatesHidden },
+					} ) }
+				</span>
+				<a onClick={ this.showAllUpdates } href="?expandedView" borderless>
+					{ translate( 'Show All' ) }
+				</a>
+			</div>
+		);
+	}
+
 	render() {
 		const itemsToUpdate = union(
 			this.props.coreWithUpdate,
@@ -319,6 +374,7 @@ class ActivityLogTasklist extends Component {
 		const { translate } = this.props;
 		const numberOfUpdates = itemsToUpdate.length;
 		const queued = this.state.queued;
+		const showExpandedView = this.state.expandedView || numberOfUpdates <= MaxUpdatedToShow;
 		return (
 			<Card className="activity-log-tasklist" highlight="warning">
 				<TrackComponentView eventName={ 'calypso_activitylog_tasklist_update_impression' } />
@@ -359,33 +415,14 @@ class ActivityLogTasklist extends Component {
 						</SplitButton>
 					) }
 				</div>
-				{ // Show if plugin update didn't start, is still running or errored,
-				// but hide plugin if it was updated successfully.
-				itemsToUpdate.map( item => {
-					let updateType = translate( 'Plugin update available' );
-					if ( 'theme' === item.type ) {
-						updateType = translate( 'Theme update available' );
-					} else if ( 'core' === item.type ) {
-						updateType = translate( 'Core update available' );
-					}
-					return (
-						<ActivityLogTaskUpdate
-							key={ item.slug }
-							toUpdate={ item }
-							name={ item.name }
-							slug={ item.slug }
-							version={ item.version }
-							type={ item.type }
-							updateType={ updateType }
-							linked={ 'core' !== item.type }
-							goToPage={ this.goToPage }
-							siteSlug={ this.props.siteSlug }
-							enqueue={ this.enqueue }
-							dismiss={ this.dismiss }
-							disable={ isItemEnqueued( item.slug, queued ) }
-						/>
-					);
-				} ) }
+				{ showExpandedView && this.showAllItemsToUpdate( itemsToUpdate ) }
+				{ ! showExpandedView &&
+					this.showAllItemsToUpdate( [
+						itemsToUpdate[ 0 ],
+						itemsToUpdate[ 1 ],
+						itemsToUpdate[ 2 ],
+					] ) }
+				{ ! showExpandedView && this.showFooterToExpandAll( numberOfUpdates ) }
 			</Card>
 		);
 	}

diff --git a/client/my-sites/stats/activity-log-tasklist/style.scss b/client/my-sites/stats/activity-log-tasklist/style.scss
@@ -77,3 +77,15 @@
 .activity-log-tasklist__unlinked {
 	cursor: default;
 }
+
+.activity-log-tasklist__footer {
+	display: flex;
+	justify-content: space-between;
+	box-shadow: 0 -1px 0 transparentize( $gray-lighten-20, .5 );
+	padding: 16px 0;
+	color: $gray-text-min;
+
+	a {
+		text-decoration: underline;
+	}
+}
diff --git a/client/my-sites/stats/activity-log-tasklist/update.jsx b/client/my-sites/stats/activity-log-tasklist/update.jsx
@@ -22,7 +22,6 @@ class ActivityLogTaskUpdate extends Component {
 		slug: PropTypes.string,
 		version: PropTypes.string,
 		type: PropTypes.string,
-		updateType: PropTypes.string,
 
 		linked: PropTypes.bool,
 		goToPage: PropTypes.func,
@@ -42,17 +41,15 @@ class ActivityLogTaskUpdate extends Component {
 	handleNameClick = () => this.props.goToPage( this.props.slug, this.props.type );
 
 	render() {
-		const {
-			translate,
-			name,
-			version,
-			type,
-			updateType,
-			disable,
-			linked,
-			slug,
-			siteSlug,
-		} = this.props;
+		const { translate, name, version, type, disable, linked, slug, siteSlug } = this.props;
+
+		let updateType = translate( 'Plugin update available' );
+		if ( 'theme' === type ) {
+			updateType = translate( 'Theme update available' );
+		} else if ( 'core' === type ) {
+			updateType = translate( 'Core update available' );
+		}
+
 		const url =
 			'plugin' === type ? `/plugins/${ slug }/${ siteSlug }` : `/theme/${ slug }/${ siteSlug }`;
 		return (