[waffle]Enable submit button on choice click

Screen recording: https://drive.google.com/file/d/17zEK5l6-OqnP3GC76Z0zHxWAWDBaA0dE/view?usp=sharing

Bug: b/280753754
Change-Id: I0c7d5b8b47c79f61f6ce3eadcb53d3b4ddc68600
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4793794
Commit-Queue: Jack Yammine <jyammine@google.com>
Reviewed-by: Nicolas Dossou-Gbété <dgn@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1187300}

chrome/browser/resources/search_engine_choice/BUILD.gn

@@ -25,4 +25,6 @@ build_webui("build") {
     "//ui/webui/resources/js:build_ts",
     "//ui/webui/resources/mojo:build_ts",
   ]
+
+  ts_composite = true
 }

chrome/browser/resources/search_engine_choice/app.html

@@ -11,7 +11,7 @@
     content: url(images/right_illustration.svg);
   }
 
-  cr-button {
+  #submitButton {
     bottom: 0;
     height: unset;
     margin: 40px;
@@ -23,7 +23,7 @@
     right: 0;
   }
 
-  :host-context([dir='rtl']) .button {
+  :host-context([dir='rtl']) #submitButton {
     left: 0;
     right: initial;
   }
@@ -171,7 +171,7 @@ <h1 class="title">$i18n{title}</h1>
       $i18n{subtitleInfoLink}
     </a>
   </p>
-  <cr-radio-group>
+  <cr-radio-group class="choice-list" selected="{{selectedChoice_}}">
     <template is="dom-repeat" items="[[choiceList_]]">
       <cr-radio-button class="label-first" name="[[item.id]]">
         <div class="choice">
@@ -182,7 +182,8 @@ <h1 class="title">$i18n{title}</h1>
     </template>
   </cr-radio-group>
 </div>
-<cr-button class="action-button" disabled>
+<cr-button class="action-button" id="submitButton"
+    disabled="[[isSubmitDisabled_]]">
   $i18n{buttonText}
 </cr-button>
 

chrome/browser/resources/search_engine_choice/app.ts

@@ -14,6 +14,7 @@ import 'chrome://resources/cr_elements/icons.html.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import './strings.m.js';
 
+import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.js';
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {afterNextRender, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -24,6 +25,7 @@ import {SearchEngineChoice, SearchEngineChoiceBrowserProxy} from './browser_prox
 export interface SearchEngineChoiceAppElement {
   $: {
     infoDialog: CrDialogElement,
+    submitButton: CrButtonElement,
   };
 }
 
@@ -49,10 +51,21 @@ export class SearchEngineChoiceAppElement extends PolymerElement {
           return JSON.parse(loadTimeData.getString('choiceList'));
         },
       },
+
+      selectedChoice_: {
+        type: String,
+        value: '',
+      },
+
+      isSubmitDisabled_: {
+        type: Boolean,
+        computed: 'isSubmitButtonDisabled_(selectedChoice_)',
+      },
     };
   }
 
   private choiceList_: SearchEngineChoice[];
+  private selectedChoice_: string;
 
   override connectedCallback() {
     super.connectedCallback();
@@ -69,6 +82,10 @@ export class SearchEngineChoiceAppElement extends PolymerElement {
   private onLinkClicked_() {
     this.$.infoDialog.showModal();
   }
+
+  private isSubmitButtonDisabled_() {
+    return this.selectedChoice_.length === 0;
+  }
 }
 
 declare global {

chrome/browser/ui/webui/search_engine_choice/search_engine_choice_handler.cc

@@ -12,10 +12,6 @@ SearchEngineChoiceHandler::SearchEngineChoiceHandler(
     : receiver_(this, std::move(receiver)),
       display_dialog_callback_(std::move(display_dialog_callback)) {
   CHECK(base::FeatureList::IsEnabled(switches::kSearchEngineChoice));
-  // `display_dialog_callback` being null would indicate that the handler is
-  // created before calling `SearchEngineChoiceUI::Initialize()`, which should
-  // never happen.
-  CHECK(display_dialog_callback_);
 }
 
 SearchEngineChoiceHandler::~SearchEngineChoiceHandler() = default;

chrome/test/data/webui/BUILD.gn

@@ -72,6 +72,10 @@ source_set("browser_tests") {
     sources += [ "tab_strip/tab_strip_browsertest.cc" ]
   }
 
+  if (enable_search_engine_choice) {
+    sources += [ "search_engine_choice/search_engine_choice_js_browsertest.cc" ]
+  }
+
   if (!is_chromeos_ash) {
     sources += [
       "intro/intro_browsertest.cc",
@@ -550,6 +554,11 @@ generate_grd("build_grd") {
     grdp_files += [ "$target_gen_dir/../pdf/resources.grdp" ]
   }
 
+  if (enable_search_engine_choice) {
+    deps += [ "search_engine_choice:build_grdp" ]
+    grdp_files += [ "$target_gen_dir/search_engine_choice/resources.grdp" ]
+  }
+
   if (is_chrome_branded) {
     deps += [ "media_router:build_grdp" ]
     grdp_files += [ "$target_gen_dir/media_router/resources.grdp" ]

chrome/test/data/webui/search_engine_choice/BUILD.gn

@@ -0,0 +1,24 @@
+# Copyright 2023 The Chromium Authors
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+import("//components/signin/features.gni")
+import("../build_webui_tests.gni")
+
+assert(enable_search_engine_choice)
+
+build_webui_tests("build") {
+  resource_path_prefix = "search_engine_choice"
+
+  files = [ "search_engine_choice_test.ts" ]
+
+  ts_path_mappings =
+      [ "chrome://search-engine-choice/*|" +
+        rebase_path(
+            "$root_gen_dir/chrome/browser/resources/search_engine_choice/tsc/*",
+            target_gen_dir) ]
+  ts_deps = [
+    "//chrome/browser/resources/search_engine_choice:build_ts",
+    "//ui/webui/resources/js:build_ts",
+  ]
+}

chrome/test/data/webui/search_engine_choice/DIR_METADATA

@@ -0,0 +1 @@
+mixins: "//chrome/browser/search_engine_choice/COMMON_METADATA"

chrome/test/data/webui/search_engine_choice/OWNERS

@@ -0,0 +1 @@
+file://chrome/browser/search_engine_choice/OWNERS

chrome/test/data/webui/search_engine_choice/search_engine_choice_js_browsertest.cc

@@ -0,0 +1,25 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "base/test/scoped_feature_list.h"
+#include "chrome/common/webui_url_constants.h"
+#include "chrome/test/base/web_ui_mocha_browser_test.h"
+#include "components/signin/public/base/signin_switches.h"
+#include "content/public/test/browser_test.h"
+
+class SearchEngineChoiceJsBrowserTest : public WebUIMochaBrowserTest {
+ protected:
+  SearchEngineChoiceJsBrowserTest() {
+    set_test_loader_host(chrome::kChromeUISearchEngineChoiceHost);
+  }
+
+ private:
+  base::test::ScopedFeatureList scoped_feature_list_{
+      switches::kSearchEngineChoice};
+};
+
+IN_PROC_BROWSER_TEST_F(SearchEngineChoiceJsBrowserTest,
+                       SearchEngineChoiceTest) {
+  RunTest("search_engine_choice/search_engine_choice_test.js", "mocha.run()");
+}

chrome/test/data/webui/search_engine_choice/search_engine_choice_test.ts

@@ -0,0 +1,35 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'chrome://search-engine-choice/app.js';
+
+import {SearchEngineChoiceAppElement} from 'chrome://search-engine-choice/app.js';
+import {assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
+import {waitBeforeNextRender} from 'chrome://webui-test/polymer_test_util.js';
+
+suite('SearchEngineChoiceTest', function() {
+  let testElement: SearchEngineChoiceAppElement;
+
+  setup(function() {
+    document.body.innerHTML = window.trustedTypes!.emptyHTML;
+    testElement = document.createElement('search-engine-choice-app');
+    document.body.appendChild(testElement);
+    return waitBeforeNextRender(testElement);
+  });
+
+  teardown(function() {
+    testElement.remove();
+  });
+
+  test('Submit button enabled on choice click', function() {
+    assertTrue(testElement.$.submitButton.disabled);
+
+    const radioButtons =
+        testElement.shadowRoot!.querySelectorAll('cr-radio-button');
+
+    assertTrue(radioButtons.length > 0);
+    radioButtons[0]!.click();
+    assertFalse(testElement.$.submitButton.disabled);
+  });
+});