[Emoji Picker] Avoid sending empty search queries to backend.

Bug: b:283175843
Change-Id: Id322607e6efc4f9b3dc391b62d102c9b4120156c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4564898
Reviewed-by: John Palmer <jopalmer@chromium.org>
Commit-Queue: Grey Wang <greywang@google.com>
Cr-Commit-Position: refs/heads/main@{#1150200}

chrome/browser/resources/chromeos/emoji_picker/emoji_picker_api_proxy.ts

@@ -101,6 +101,18 @@ export class EmojiPickerApiProxyImpl implements EmojiPickerApiProxy {
         },
       });
     }
+
+    // Avoid sending blank queries to the backend.
+    if (query.trim().length === 0) {
+      return Promise.resolve({
+        status: Status.kHttpOk,
+        searchGifs: {
+          next: '',
+          results: [],
+        },
+      });
+    }
+
     return this.handler.searchGifs(query, pos || null);
   }
 

chrome/browser/resources/chromeos/emoji_picker/emoji_search.html

@@ -183,7 +183,7 @@
       </template>
     </div>
     <div class="no-result">
-      <template is="dom-if" if="[[noResults(searchResults)]]">
+      <template is="dom-if" if="[[noResults(status, searchResults)]]">
         <picture>
           <source srcset="no_results_dark.svg"
               media="(prefers-color-scheme: dark)">

chrome/browser/resources/chromeos/emoji_picker/emoji_search.ts

@@ -89,10 +89,19 @@ export class EmojiSearch extends PolymerElement {
   }
 
   private onSearch(newSearch: string): void {
-    this.set('searchResults', this.computeLocalSearchResults(newSearch));
-    if (this.gifSupport) {
+    const localSearchResults = this.computeLocalSearchResults(newSearch);
+    if (!this.gifSupport) {
+      this.set('searchResults', localSearchResults);
+    } else {
+      // With GIF support, we will progressively show local search results first
+      // and more online GIFs after. To avoid displaying a "no results" screen in
+      // the middle, we only do this update when local search results are not
+      // empty.
+      if (localSearchResults.length > 0) {
+        this.set('searchResults', localSearchResults);
+      }
       this.computeInitialGifSearchResults(newSearch).then((searchResults) => {
-        this.push('searchResults', ...searchResults);
+        this.set('searchResults', [...localSearchResults, ...searchResults]);
       });
     }
   }
@@ -319,12 +328,16 @@ export class EmojiSearch extends PolymerElement {
     const {status, searchGifs} = await apiProxy.searchGifs(search);
     this.status = status;
     this.nextGifPos = searchGifs.next;
-    searchResults.push({
-      'category': CategoryEnum.GIF,
-      'group': '',
-      'emoji': apiProxy.convertTenorGifsToEmoji(searchGifs),
-      'searchOnly': false,
-    });
+
+    if (searchGifs.results.length > 0) {
+      searchResults.push({
+        'category': CategoryEnum.GIF,
+        'group': '',
+        'emoji': apiProxy.convertTenorGifsToEmoji(searchGifs),
+        'searchOnly': false,
+      });
+    }
+
     return searchResults;
   }
 
@@ -387,12 +400,9 @@ export class EmojiSearch extends PolymerElement {
     return this.$.search.getValue() !== '';
   }
 
-  /**
-   * Display no results if `gifSupport` flag is off and `searchResults` are
-   * empty. If `gifSupport` flag is on it will always have gifs to display.
-   */
-  noResults(searchResults: EmojiGroupData): boolean {
-    return !this.gifSupport && searchResults.length === 0;
+  noResults(status: Status, searchResults: EmojiGroupData): boolean {
+    return (!this.gifSupport || status === Status.kHttpOk) &&
+        searchResults.length === 0;
   }
 
   isGifInErrorState(status: Status, searchResults: EmojiGroupData): boolean {

chrome/test/data/webui/chromeos/emoji_picker/emoji_picker_search_gif_test.ts

@@ -207,4 +207,17 @@ suite('emoji-search-gif', () => {
     assertEmojiImageAlt(rightColResults[4], 'Right 5');
     assertEmojiImageAlt(rightColResults[5], 'Right 6');
   });
+
+  test('Blank search queries should be prevented in API Proxy', async () => {
+    // Given a real API proxy.
+    const apiProxy = new EmojiPickerApiProxyImpl();
+
+    // When blank queries are sent.
+    const {status, searchGifs} = await apiProxy.searchGifs('   ');
+
+    // Then empty result should be returned.
+    assertEquals(status, 0);
+    assertEquals(searchGifs.next, '');
+    assertEquals(searchGifs.results.length, 0);
+  });
 });