Updates “No Results” UI to account for query filters

Previously if a queryFilter (eg: date range) caused there to be no Media returned then the UI would show “No photos in your library” (or simialr). Updates so that if there is no Media when a queryFilter is applied then this is treated as a “No results” rather than “No content” issue and the appropriate UI is displayed.
Automattic · Jan 25, 2019 · 867a2fe · 867a2fe
1 parent bb4df7e
commit 867a2fe
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 31 deletions.
diff --git a/client/my-sites/media-library/content.jsx b/client/my-sites/media-library/content.jsx
@@ -275,6 +275,7 @@ class MediaLibraryContent extends React.Component {
 						site={ this.props.site }
 						filter={ this.props.filter }
 						filterRequiresUpgrade={ this.props.filterRequiresUpgrade }
+						queryFilters={ this.props.queryFilters }
 						search={ this.props.search }
 						containerWidth={ this.props.containerWidth }
 						thumbnailType={ this.getThumbnailType() }

diff --git a/client/my-sites/media-library/list-no-results.jsx b/client/my-sites/media-library/list-no-results.jsx
@@ -5,6 +5,7 @@
  */
 
 import PropTypes from 'prop-types';
+import { isEmpty } from 'lodash';
 import { localize } from 'i18n-calypso';
 import React from 'react';
 
@@ -19,54 +20,72 @@ class MediaLibraryListNoResults extends React.Component {
 	static propTypes = {
 		filter: PropTypes.string,
 		search: PropTypes.string,
+		queryFilters: PropTypes.object,
 	};
 
 	static defaultProps = {
 		search: '',
+		queryFilters: null,
 	};
 
+	hasActiveQueryFilters() {
+		return this.props.queryFilters && ! isEmpty( this.props.queryFilters.dateRange );
+	}
+
 	getLabel = () => {
 		let label;
+		let searchOrQueryFilter;
+
+		const hasSearchOrFiltersText = this.props.translate( 'the search and/or filters you applied', {
+			context: 'Media no results due to search term or applied filters',
+		} );
+
+		const hasSearchTermText = this.props.translate( 'your search for "%s"', {
+			args: this.props.search,
+			context: 'Media no results due to search term',
+		} );
+
+		const hasQueryFilterText = this.props.translate( 'the filters you applied', {
+			context: 'Media no results due to applied filters',
+		} );
+
+		if ( this.props.search && this.hasActiveQueryFilters() ) {
+			searchOrQueryFilter = hasSearchOrFiltersText;
+		} else if ( this.props.search ) {
+			searchOrQueryFilter = hasSearchTermText;
+		} else {
+			searchOrQueryFilter = hasQueryFilterText;
+		}
 
 		switch ( this.props.filter ) {
 			case 'images':
-				label = this.props.translate( 'No images match your search for {{searchTerm/}}.', {
-					components: {
-						searchTerm: <em>{ this.props.search }</em>,
-					},
-					context: 'Media no search results',
+				label = this.props.translate( 'No images match %s.', {
+					args: searchOrQueryFilter,
+					context: 'Media no search or filter results',
 				} );
 				break;
 			case 'videos':
-				label = this.props.translate( 'No videos match your search for {{searchTerm/}}.', {
-					components: {
-						searchTerm: <em>{ this.props.search }</em>,
-					},
-					context: 'Media no search results',
+				label = this.props.translate( 'No videos match %s.', {
+					args: searchOrQueryFilter,
+					context: 'Media no search or filter results',
 				} );
 				break;
 			case 'audio':
-				label = this.props.translate( 'No audio files match your search for {{searchTerm/}}.', {
-					components: {
-						searchTerm: <em>{ this.props.search }</em>,
-					},
-					context: 'Media no search results',
+				label = this.props.translate( 'No audio files match %s.', {
+					args: searchOrQueryFilter,
+					context: 'Media no search or filter results',
 				} );
 				break;
 			case 'documents':
-				label = this.props.translate( 'No documents match your search for {{searchTerm/}}.', {
-					components: {
-						searchTerm: <em>{ this.props.search }</em>,
-					},
-					context: 'Media no search results',
+				label = this.props.translate( 'No documents match %s.', {
+					args: searchOrQueryFilter,
+					context: 'Media no search or filter results',
 				} );
 				break;
 			default:
-				label = this.props.translate( 'No media files match your search for {{searchTerm/}}.', {
-					components: {
-						searchTerm: <em>{ this.props.search }</em>,
-					},
-					context: 'Media no search results',
+				label = this.props.translate( 'No media files match %s.', {
+					args: searchOrQueryFilter,
+					context: 'Media no search or filter results',
 				} );
 				break;
 		}

diff --git a/client/my-sites/media-library/list.jsx b/client/my-sites/media-library/list.jsx
@@ -36,6 +36,7 @@ export class MediaLibraryList extends React.Component {
 		mediaLibrarySelectedItems: PropTypes.arrayOf( PropTypes.object ),
 		filter: PropTypes.string,
 		filterRequiresUpgrade: PropTypes.bool.isRequired,
+		queryFilters: PropTypes.object,
 		search: PropTypes.string,
 		containerWidth: PropTypes.number,
 		rowPadding: PropTypes.number,
@@ -59,6 +60,7 @@ export class MediaLibraryList extends React.Component {
 		single: false,
 		scrollable: false,
 		onEditItem: noop,
+		queryFilters: {},
 	};
 
 	state = {};
@@ -244,12 +246,16 @@ export class MediaLibraryList extends React.Component {
 		}
 
 		if ( ! this.props.mediaHasNextPage && this.props.media && 0 === this.props.media.length ) {
-			return React.createElement( this.props.search ? ListNoResults : ListNoContent, {
-				site: this.props.site,
-				filter: this.props.filter,
-				search: this.props.search,
-				source: this.props.source,
-			} );
+			return React.createElement(
+				this.props.search || this.props.queryFilters ? ListNoResults : ListNoContent,
+				{
+					site: this.props.site,
+					filter: this.props.filter,
+					search: this.props.search,
+					source: this.props.source,
+					queryFilters: this.props.queryFilters,
+				}
+			);
 		}
 
 		const onFetchNextPage = function() {