feedback: handle click event of continue button on search page

When description is not empty, clicking the button should take the user
to the second step: the share data page [1].

Empty description case has been handled in a previous CL [2].

[1] https://screenshot.googleplex.com/BUuqPxwb8X9KRXn.
[2] https://screenshot.googleplex.com/6PP6pxtmRR4QDmw.

Bug: b:185624798
Test: browser_tests --gtest_filter=OSFeedbackBrowserTest.*
Change-Id: Ib6a1ada1e9338ca8323fc3429007f0e662980b4c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3557973
Reviewed-by: Gavin Williams <gavinwill@chromium.org>
Commit-Queue: Xiangdong Kong <xiangdongkong@google.com>
Cr-Commit-Position: refs/heads/main@{#987355}

ash/webui/os_feedback_ui/resources/BUILD.gn

@@ -119,6 +119,7 @@ js_library("mojo_interface_provider") {
 
 js_library("search_page") {
   deps = [
+    ":feedback_flow",
     ":help_content",
     ":mojo_interface_provider",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",

ash/webui/os_feedback_ui/resources/feedback_flow.html

@@ -1,6 +1,7 @@
 <div>
   <iron-pages attr-for-selected="id" selected="[[currentState_]]">
-    <search-page id="searchPage"></search-page>
+    <search-page id="searchPage" on-continue-click="handleContinueClick_">
+    </search-page>
     <share-data-page id="shareDataPage"></share-data-page>
     <confirmation-page id="confirmationPage"></confirmation-page>
   </iron-pages>

ash/webui/os_feedback_ui/resources/feedback_flow.js

@@ -47,6 +47,20 @@ export class FeedbackFlowElement extends PolymerElement {
      */
     this.currentState_ = FeedbackFlowState.SEARCH;
   }
+
+  /**
+   * @param {!Event} event
+   * @protected
+   */
+  handleContinueClick_(event) {
+    switch (event.detail.currentState) {
+      case FeedbackFlowState.SEARCH:
+        this.currentState_ = FeedbackFlowState.SHARE_DATA;
+        break;
+      default:
+        console.warn('unexpected state: ', event.detail.currentState);
+    }
+  }
 }
 
 customElements.define(FeedbackFlowElement.is, FeedbackFlowElement);

ash/webui/os_feedback_ui/resources/search_page.html

@@ -17,7 +17,6 @@
     color: var(--google-red-600);
     font-weight: bold;
   }
-
 </style>
 <!--TODO(xiangdongkong): use localized strings -->
 <div id="container">

ash/webui/os_feedback_ui/resources/search_page.js

@@ -10,6 +10,7 @@ import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import {stringToMojoString16} from 'chrome://resources/ash/common/mojo_utils.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {FeedbackFlowState} from './feedback_flow.js';
 import {HelpContentList, HelpContentProviderInterface, SearchRequest, SearchResponse, SearchResult} from './feedback_types.js';
 import {getHelpContentProvider} from './mojo_interface_provider.js';
 
@@ -225,11 +226,17 @@ export class SearchPageElement extends PolymerElement {
    * @private
    */
   handleContinueButtonClicked_(e) {
+    e.stopPropagation();
+
     const textInput = this.getInputElement_().value;
     if (textInput.length === 0) {
       this.onInputInvalid_();
     } else {
-      // TODO(xiangdongkong): fire an event.
+      this.dispatchEvent(new CustomEvent('continue-click', {
+        composed: true,
+        bubbles: true,
+        detail: {currentState: FeedbackFlowState.SEARCH}
+      }));
     }
   }
 }

chrome/test/data/webui/chromeos/os_feedback_ui/BUILD.gn

@@ -82,6 +82,7 @@ js_library("search_page_test") {
   deps = [
     "../..:chai_assert",
     "../..:test_util",
+    "//ash/webui/os_feedback_ui/resources:feedback_flow",
     "//ash/webui/os_feedback_ui/resources:help_content",
     "//ash/webui/os_feedback_ui/resources:search_page",
   ]

chrome/test/data/webui/chromeos/os_feedback_ui/feedback_flow_test.js

@@ -114,4 +114,34 @@ export function FeedbackFlowTestSuite() {
     assertTrue(!!buttonNewReport);
     assertEquals('Send new report', buttonNewReport.textContent.trim());
   });
+
+  // Test the navigation from search page to share data page.
+  test('NavigateFromSearchPageToShareDataPage', async () => {
+    await initializePage();
+
+    let activePage = page.shadowRoot.querySelector('.iron-selected');
+    assertTrue(!!activePage);
+    assertEquals('searchPage', activePage.id);
+
+    const inputElement = activePage.shadowRoot.querySelector('textarea');
+    const continueButton =
+        activePage.shadowRoot.querySelector('#buttonContinue');
+
+    // Clear the description.
+    inputElement.value = '';
+    continueButton.click();
+    await flushTasks();
+    // Should stay on search page when click the continue button.
+    activePage = page.shadowRoot.querySelector('.iron-selected');
+    assertEquals('searchPage', activePage.id);
+
+    // Enter some text.
+    inputElement.value = 'abc';
+    continueButton.click();
+
+    await flushTasks();
+    // Should move to share data page when click the continue button.
+    activePage = page.shadowRoot.querySelector('.iron-selected');
+    assertEquals('shareDataPage', activePage.id);
+  });
 }

chrome/test/data/webui/chromeos/os_feedback_ui/search_page_test.js

@@ -4,7 +4,7 @@
 
 import {fakeSearchResponse} from 'chrome://os-feedback/fake_data.js';
 import {FakeHelpContentProvider} from 'chrome://os-feedback/fake_help_content_provider.js';
-import {HelpContentElement} from 'chrome://os-feedback/help_content.js';
+import {FeedbackFlowState} from 'chrome://os-feedback/feedback_flow.js';
 import {setHelpContentProviderForTesting} from 'chrome://os-feedback/mojo_interface_provider.js';
 import {OS_FEEDBACK_UNTRUSTED_ORIGIN, SearchPageElement} from 'chrome://os-feedback/search_page.js';
 
@@ -189,4 +189,29 @@ export function searchPageTestSuite() {
 
     assertTrue(errorMsg.hidden);
   });
+
+  /**
+   * Test that when there are certain text entered and the continue button is
+   * clicked, an on-continue is fired.
+   */
+  test('Continue', async () => {
+    await initializePage();
+
+    const textInput = page.shadowRoot.querySelector('#descriptionText');
+    textInput.value = 'hello';
+
+    const clickPromise = eventToPromise('continue-click', page);
+    let actualCurrentState;
+
+    page.addEventListener('continue-click', (event) => {
+      actualCurrentState = event.detail.currentState;
+    });
+
+    const buttonContinue = page.shadowRoot.querySelector('#buttonContinue');
+    buttonContinue.click();
+
+    await clickPromise;
+    assertTrue(!!actualCurrentState);
+    assertEquals(FeedbackFlowState.SEARCH, actualCurrentState);
+  });
 }

chrome/test/data/webui/chromeos/os_feedback_ui/share_data_page_test.js

@@ -40,11 +40,11 @@ export function shareDataPageTestSuite() {
     // Verify the back button is in the page.
     const buttonBack = page.shadowRoot.querySelector('#buttonBack');
     assertTrue(!!buttonBack);
-    assertEquals('Back', buttonBack.textContent);
+    assertEquals('Back', buttonBack.textContent.trim());
 
     // Verify the send button is in the page.
     const buttonSend = page.shadowRoot.querySelector('#buttonSend');
     assertTrue(!!buttonSend);
-    assertEquals('Send', buttonSend.textContent);
+    assertEquals('Send', buttonSend.textContent.trim());
   });
 }