diff --git a/client/my-sites/stats/activity-log-tasklist/index.jsx b/client/my-sites/stats/activity-log-tasklist/index.jsx
index f196ac1cf1b880..a1e2637220093c 100644
--- 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 (
+
+ );
+ } );
+ }
+
+ showFooterToExpandAll( numberOfUpdates ) {
+ const { translate } = this.props;
+ const updatesHidden = numberOfUpdates - MaxUpdatedToShow;
+ return (
+
+
+ { translate( 'One more update available', ' %(updates)s more updates available', {
+ count: updatesHidden,
+ args: { updates: updatesHidden },
+ } ) }
+
+
+ { translate( 'Show All' ) }
+
+
+ );
+ }
+
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 (
@@ -359,33 +415,14 @@ class ActivityLogTasklist extends Component {
) }
- { // 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 (
-
- );
- } ) }
+ { showExpandedView && this.showAllItemsToUpdate( itemsToUpdate ) }
+ { ! showExpandedView &&
+ this.showAllItemsToUpdate( [
+ itemsToUpdate[ 0 ],
+ itemsToUpdate[ 1 ],
+ itemsToUpdate[ 2 ],
+ ] ) }
+ { ! showExpandedView && this.showFooterToExpandAll( numberOfUpdates ) }
);
}
diff --git a/client/my-sites/stats/activity-log-tasklist/style.scss b/client/my-sites/stats/activity-log-tasklist/style.scss
index d886ccf0f61546..27a23d2d8cf9e2 100644
--- 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
index 436c72606949ad..cc8f770eb0745f 100644
--- 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 (