[CrOS Cellular] Add APN subpage description.

* Add APN subpage description with 'Learn more' link. https://screenshot.googleplex.com/AZkfPxPdw3NrxJT.png Old CL without Change-Id: crrev.com/c/3999584 Test: autoninja -C out/Default/ browser_tests && testing/xvfb.py ./out/Default/browser_tests --gtest_filter=*ApnList* Bug: b:162365553 Change-Id: I063bbd34aa8d55695d6e173c3abf7f3728131a51 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4001709 Reviewed-by: Chad Duffin <chadduffin@chromium.org> Reviewed-by: Gordon Seto <gordonseto@google.com> Commit-Queue: Antoni Dikov <adikov@google.com> Cr-Commit-Position: refs/heads/main@{#1067474}
chromium · Nov 4, 2022 · 8a97f77 · 8a97f77
1 parent 9ae2524
commit 8a97f77
Show file tree

Hide file tree

Showing 14 changed files with 104 additions and 6 deletions.
diff --git a/ash/webui/common/resources/BUILD.gn b/ash/webui/common/resources/BUILD.gn
@@ -62,6 +62,7 @@ web_component_files = [
   "network_health/network_health_container.js",
   "network_health/network_health_summary.js",
   "network_health/routine_group.js",
+  "network/apn_list.js",
   "network/cr_policy_network_indicator_mojo.js",
   "network/network_apnlist.js",
   "network/network_choose_mobile.js",
@@ -361,6 +362,7 @@ checked_in_dts_files = [
   "quick_unlock/pin_keyboard.d.ts",
   "quick_unlock/setup_pin_keyboard.d.ts",
 
+  "network/apn_list.d.ts",
   "network/cellular_utils.d.ts",
   "network/cr_policy_network_behavior_mojo.d.ts",
   "network/cr_policy_network_indicator_mojo.d.ts",

diff --git a/ash/webui/common/resources/network/BUILD.gn b/ash/webui/common/resources/network/BUILD.gn
@@ -11,6 +11,7 @@ js_type_check("closure_compile_module") {
   closure_flags = default_closure_args + mojom_js_args
 
   deps = [
+    ":apn_list",
     ":cellular_utils",
     ":cr_policy_network_behavior_mojo",
     ":cr_policy_network_indicator_mojo",
@@ -65,6 +66,15 @@ js_library("cr_policy_network_indicator_mojo") {
   ]
 }
 
+js_library("apn_list") {
+  deps = [
+    "//ash/webui/common/resources:i18n_behavior",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:load_time_data.m",
+  ]
+  externs_list = []
+}
+
 js_library("network_apnlist") {
   deps = [
     ":network_property_list_mojo",

diff --git a/ash/webui/common/resources/network/apn_list.d.ts b/ash/webui/common/resources/network/apn_list.d.ts
@@ -0,0 +1,5 @@
+// Copyright 2022 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export {};
diff --git a/ash/webui/common/resources/network/apn_list.html b/ash/webui/common/resources/network/apn_list.html
@@ -0,0 +1,17 @@
+<style include="network-shared">
+  #apnDescription {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-inline-end: 40px;
+    min-height: var(--cr-section-min-height);
+    padding: 0 var(--cr-section-padding);
+  }
+</style>
+<div id="apnDescription">
+  <localized-link
+      localized-string="[[i18nAdvanced('apnSettingsDescriptionWithLink')]]"
+      on-link-clicked="onLearnMoreClicked_">
+  </localized-link>
+</div>
diff --git a/ash/webui/common/resources/network/apn_list.js b/ash/webui/common/resources/network/apn_list.js
@@ -0,0 +1,30 @@
+// Copyright 2022 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview Polymer element for displaying a list of cellular
+ * APNs
+ */
+
+import './network_shared.css.js';
+import '//resources/polymer/v3_0/iron-list/iron-list.js';
+
+import {I18nBehavior} from '//resources/ash/common/i18n_behavior.js';
+import {Polymer} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {getTemplate} from './apn_list.html.js';
+
+Polymer({
+  _template: getTemplate(),
+  is: 'apn-list',
+
+  behaviors: [I18nBehavior],
+
+  /**
+   * Redirects to "Lean more about APN" page.
+   * TODO(b/162365553): Implement.
+   * @private
+   */
+  onLearnMoreClicked_() {},
+});
diff --git a/chrome/browser/resources/settings/chromeos/internet_page/BUILD.gn b/chrome/browser/resources/settings/chromeos/internet_page/BUILD.gn
@@ -38,6 +38,7 @@ js_type_check("closure_compile_module") {
 
 js_library("apn_subpage") {
   deps = [
+    "//ash/webui/common/resources/network:apn_list",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 

diff --git a/chrome/browser/resources/settings/chromeos/internet_page/apn_subpage.html b/chrome/browser/resources/settings/chromeos/internet_page/apn_subpage.html
@@ -1,5 +1,3 @@
 <style include="settings-shared">
 </style>
-<div id="container">
-   <!-- TODO(b/162365553): Add APN detail -->
-</div>
+<apn-list></apn-list>
diff --git a/chrome/browser/resources/settings/chromeos/internet_page/apn_subpage.js b/chrome/browser/resources/settings/chromeos/internet_page/apn_subpage.js
@@ -8,6 +8,7 @@
  */
 
 import './internet_shared_css.js';
+import 'chrome://resources/ash/common/network/apn_list.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 

diff --git a/chrome/test/data/webui/cr_components/chromeos/cr_components_chromeos_v3_browsertest.js b/chrome/test/data/webui/cr_components/chromeos/cr_components_chromeos_v3_browsertest.js
@@ -40,7 +40,8 @@ GEN('#include "content/public/test/browser_test.h"');
   ['SpinnerPage', 'bluetooth/bluetooth_spinner_page_test.js'],
  ].forEach(test => registerTest('Bluetooth', 'bluetooth-pairing', ...test));
 
-[['CrPolicyNetworkBehaviorMojo', 'network/cr_policy_network_behavior_mojo_tests.js'],
+[['ApnList', 'network/apn_list_test.js'],
+ ['CrPolicyNetworkBehaviorMojo', 'network/cr_policy_network_behavior_mojo_tests.js'],
  ['CrPolicyNetworkIndicatorMojo', 'network/cr_policy_network_indicator_mojo_tests.js'],
  ['NetworkApnlist', 'network/network_apnlist_test.js'],
  ['NetworkChooseMobile', 'network/network_choose_mobile_test.js'],
@@ -92,7 +93,7 @@ GEN('#include "content/public/test/browser_test.h"');
 ].forEach(test => registerTest('CellularSetup', 'os-settings', ...test));
 // clang-format on
 
-function registerTest(componentName, webuiHost, testName, module, caseName) {
+function registerTest(componentName, webuiHost, testName, module) {
   const className = `${componentName}${testName}TestV3`;
   this[className] = class extends PolymerTest {
     /** @override */

diff --git a/chrome/test/data/webui/cr_components/chromeos/network/apn_list_test.js b/chrome/test/data/webui/cr_components/chromeos/network/apn_list_test.js
@@ -0,0 +1,26 @@
+// Copyright 2022 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://os-settings/strings.m.js';
+import 'chrome://resources/ash/common/network/apn_list.js';
+
+import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {assertTrue} from '../../../chai_assert.js';
+
+suite('ApnListTest', function() {
+  /** @type {ApnListElement} */
+  let apnList = null;
+
+  setup(function() {
+    apnList = document.createElement('apn-list');
+    document.body.appendChild(apnList);
+    flush();
+  });
+
+  test('Check if APN description exists', async function() {
+    assertTrue(!!apnList);
+    assertTrue(!!apnList.shadowRoot.querySelector('localized-link'));
+  });
+});
diff --git a/chrome/test/data/webui/settings/chromeos/apn_subpage_tests.js b/chrome/test/data/webui/settings/chromeos/apn_subpage_tests.js
@@ -30,7 +30,8 @@ suite('ApnSubpageTest', function() {
     });
   });
 
-  test('Base Test', async function() {
+  test('Check if APN list exists', async function() {
     assertTrue(!!apnSubpage);
+    assertTrue(!!apnSubpage.shadowRoot.querySelector('apn-list'));
   });
 });
diff --git a/chromeos/chromeos_strings.grd b/chromeos/chromeos_strings.grd
@@ -3610,6 +3610,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_SETTINGS_ADD_NEW_APN" desc="Title for the button which opens the create new custom APN dialog.">
         New APN
       </message>
+      <message name="IDS_SETTINGS_APN_DESCRIPTION_WITH_LEARN_MORE_LINK" desc="Text describing APN settings menu with a link to more detailed information.">
+        Manage network APN settings. APNs establish a connection between a cellular network and the internet. <ph name="BEGIN_LINK">&lt;a href="#" &gt;</ph>Learn more<ph name="END_LINK">&lt;/a&gt;</ph>
+      </message>
       <!-- End of APN -->
     </messages>
   </release>

diff --git a/chromeos/chromeos_strings_grd/IDS_SETTINGS_APN_DESCRIPTION_WITH_LEARN_MORE_LINK.png.sha1 b/chromeos/chromeos_strings_grd/IDS_SETTINGS_APN_DESCRIPTION_WITH_LEARN_MORE_LINK.png.sha1
@@ -0,0 +1 @@
+5aabc82b0ee8a1b7091131be13921d9deb6b881c
diff --git a/ui/chromeos/strings/network/network_element_localized_strings_provider.cc b/ui/chromeos/strings/network/network_element_localized_strings_provider.cc
@@ -308,6 +308,8 @@ void AddDetailsLocalizedStrings(content::WebUIDataSource* html_source) {
   static constexpr webui::LocalizedString kLocalizedStrings[] = {
       {"internetApnPageTitle", IDS_SETTINGS_ACCESS_POINT_NAME_APN},
       {"apnPageAddNewApn", IDS_SETTINGS_ADD_NEW_APN},
+      {"apnSettingsDescriptionWithLink",
+       IDS_SETTINGS_APN_DESCRIPTION_WITH_LEARN_MORE_LINK},
       {"hidePassword", IDS_SETTINGS_PASSWORD_HIDE},
       {"showPassword", IDS_SETTINGS_PASSWORD_SHOW},
       {"networkProxy", IDS_SETTINGS_INTERNET_NETWORK_PROXY_PROXY},