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 (