EZP-30326: As a user I want to see if my search in UDW has no results

src/modules/universal-discovery/components/bookmarks/bookmarks.component.js

@@ -24,11 +24,6 @@ export default class BookmarksComponent extends Component {
             onItemRemove,
             multiple,
         } = this.props;
-        const noBookmarksMessage = Translator.trans(
-            /*@Desc("No content items. Content items you bookmark will appear here.")*/ 'bookmarks_table.no_bookmarks.message',
-            {},
-            'universal_discovery_widget'
-        );
         const tableTitle = Translator.trans(/*@Desc("Bookmarks")*/ 'bookmarks_table.title', {}, 'universal_discovery_widget');
 
         return (
@@ -41,7 +36,6 @@ export default class BookmarksComponent extends Component {
                 perPage={bookmarksPerPage}
                 contentTypesMap={contentTypesMap}
                 title={tableTitle}
-                noItemsMessage={noBookmarksMessage}
                 selectedContent={selectedContent}
                 onSelectContent={onSelectContent}
                 canSelectContent={canSelectContent}

src/modules/universal-discovery/components/content-table/content.table.component.js

@@ -82,6 +82,16 @@ export default class ContentTableComponent extends Component {
         this.setState(() => ({ activePage }));
     }
 
+    renderNoItemsMessage() {
+        const { count, noItemsMessage } = this.props;
+
+        if (count || !noItemsMessage) {
+            return null;
+        }
+
+        return <div className="c-content-table__no-items">{noItemsMessage}</div>;
+    }
+
     /**
      * Renders single item
      *
@@ -185,9 +195,9 @@ export default class ContentTableComponent extends Component {
     }
 
     render() {
-        const { title, count } = this.props;
+        const { title, count, noItemsMessage } = this.props;
 
-        if (!count) {
+        if (!count && !noItemsMessage) {
             return null;
         }
 
@@ -196,6 +206,7 @@ export default class ContentTableComponent extends Component {
                 <div className="c-content-table__title">
                     {title} ({count})
                 </div>
+                {this.renderNoItemsMessage()}
                 {this.renderHeader()}
                 <div className="c-content-table__list">{this.renderPage()}</div>
                 {this.renderPagination()}

src/modules/universal-discovery/components/content-table/css/content.table.component.css

@@ -5,10 +5,10 @@
 .c-content-table__title {
     font-size: 17px;
     border-radius: 4px 4px 0 0;
-    background-color: #445A64;
+    background-color: #445a64;
     color: #fff;
     line-height: 50px;
-    padding: 0 16px
+    padding: 0 16px;
 }
 
 .c-content-table__list-headers,
@@ -17,7 +17,7 @@
     flex-wrap: nowrap;
 }
 
-[class*="c-content-table__list-header--"] {
+[class*='c-content-table__list-header--'] {
     padding: 8px 16px;
     font-weight: 700;
     font-size: 15px;
@@ -46,3 +46,9 @@
     margin-top: 20px;
     margin-bottom: 20px;
 }
+
+.c-content-table__no-items {
+    background: white;
+    font-size: 14px;
+    padding: 11px 22px;
+}

src/modules/universal-discovery/components/search/css/search.component.css

@@ -45,7 +45,8 @@
 }
 
 .c-search__submit[disabled] {
-    opacity: 0.75;
+    opacity: 0.3;
+    cursor: not-allowed;
 }
 
 .c-search__submit--loading {
@@ -77,3 +78,7 @@
 .c-search__submit--loading .ez-icon {
     margin-right: 0;
 }
+
+.c-search__search-tips {
+    padding-top: 48px;
+}

src/modules/universal-discovery/components/search/search.component.js

@@ -10,7 +10,8 @@ export default class SearchComponent extends Component {
         super(props);
 
         this.state = {
-            items: [],
+            items: null,
+            lastSearchText: null,
             isSearching: false,
             submitDisabled: true,
         };
@@ -37,11 +38,13 @@ export default class SearchComponent extends Component {
             return;
         }
 
+        const searchText = this._refSearchInput.value;
+
         this.setState(
-            () => ({ isSearching: true }),
+            () => ({ isSearching: true, lastSearchText: searchText }),
             () => {
                 const promise = new Promise((resolve) =>
-                    this.props.findContentBySearchQuery(this.props.restInfo, this._refSearchInput.value, resolve, this.props.searchResultsLimit)
+                    this.props.findContentBySearchQuery(this.props.restInfo, searchText, resolve, this.props.searchResultsLimit)
                 );
 
                 promise
@@ -130,20 +133,93 @@ export default class SearchComponent extends Component {
         this._refSearchInput = ref;
     }
 
-    render() {
+    renderSearchTips() {
+        const { items } = this.state;
+
+        if (items === null || items.length) {
+            return null;
+        }
+
+        const searchTipsTitle = Translator.trans(/*@Desc("Some helpful search tips:")*/ 'search.tips.headline', {}, 'search');
+        const searchTipCheckSpelling = Translator.trans(
+            /*@Desc("Check spelling of keywords.")*/ 'search.tips.check_spelling',
+            {},
+            'search'
+        );
+        const searchTipDifferentKeywords = Translator.trans(
+            /*@Desc("Try different keywords.")*/ 'search.tips.different_keywords',
+            {},
+            'search'
+        );
+        const searchTipMoreGeneralKeywords = Translator.trans(
+            /*@Desc("Try more general keywords.")*/ 'search.tips.more_general_keywords',
+            {},
+            'search'
+        );
+        const searchTipFewerKeywords = Translator.trans(
+            /*@Desc("Try fewer keywords. Reducing keywords result in more matches.")*/ 'search.tips.fewer_keywords',
+            {},
+            'search'
+        );
+
+        return (
+            <div className="c-search__search-tips">
+                <h6>{searchTipsTitle}</h6>
+                <ul>
+                    <li>{searchTipCheckSpelling}</li>
+                    <li>{searchTipDifferentKeywords}</li>
+                    <li>{searchTipMoreGeneralKeywords}</li>
+                    <li>{searchTipFewerKeywords}</li>
+                </ul>
+            </div>
+        );
+    }
+
+    renderResultsTable() {
+        if (this.state.items === null) {
+            return null;
+        }
+
+        const { items, lastSearchText } = this.state;
         const {
             onItemSelect,
             searchResultsPerPage,
             contentTypesMap,
-            maxHeight,
             selectedContent,
             onSelectContent,
             canSelectContent,
             onItemRemove,
             multiple,
         } = this.props;
-        const title = Translator.trans(/*@Desc("Search")*/ 'search.title', {}, 'universal_discovery_widget');
         const tableTitle = Translator.trans(/*@Desc("Search results")*/ 'search.content_table.title', {}, 'universal_discovery_widget');
+        const noItemsMessage = Translator.trans(
+            /*@Desc("Sorry, no results were found for "%query%".")*/ 'search.no_result',
+            { query: lastSearchText },
+            'search'
+        );
+
+        return (
+            <ContentTableComponent
+                items={items}
+                count={items.length}
+                requireItemsCount={this.onRequireItemsCount}
+                onItemSelect={onItemSelect}
+                perPage={searchResultsPerPage}
+                contentTypesMap={contentTypesMap}
+                title={tableTitle}
+                selectedContent={selectedContent}
+                onSelectContent={onSelectContent}
+                canSelectContent={canSelectContent}
+                onItemRemove={onItemRemove}
+                multiple={multiple}
+                noItemsMessage={noItemsMessage}
+            />
+        );
+    }
+
+    render() {
+        const { maxHeight } = this.props;
+        const title = Translator.trans(/*@Desc("Search")*/ 'search.title', {}, 'universal_discovery_widget');
 
         return (
             <div className="c-search" style={{ maxHeight: `${maxHeight - 32}px` }}>
@@ -158,20 +234,8 @@ export default class SearchComponent extends Component {
                     />
                     {this.renderSubmitBtn()}
                 </div>
-                <ContentTableComponent
-                    items={this.state.items}
-                    count={this.state.items.length}
-                    requireItemsCount={this.onRequireItemsCount}
-                    onItemSelect={onItemSelect}
-                    perPage={searchResultsPerPage}
-                    contentTypesMap={contentTypesMap}
-                    title={tableTitle}
-                    selectedContent={selectedContent}
-                    onSelectContent={onSelectContent}
-                    canSelectContent={canSelectContent}
-                    onItemRemove={onItemRemove}
-                    multiple={multiple}
-                />
+                {this.renderResultsTable()}
+                {this.renderSearchTips()}
             </div>
         );
     }