[CrOS Settings] Show tether section in networks list only if enabled.

Hide instant tethering section in cellular-networks-list if the multidevice featured is not enabled. Fixed: 1182888 Change-Id: Idd6594a2e6a87c3208a2e815ca91088d080d95da Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2728098 Commit-Queue: Gordon Seto <gordonseto@google.com> Reviewed-by: Kyle Horimoto <khorimoto@chromium.org> Cr-Commit-Position: refs/heads/master@{#859115}
chromium · Mar 2, 2021 · 47f50fa · 47f50fa
1 parent af92713
commit 47f50fa
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 22 deletions.
diff --git a/chrome/browser/resources/settings/chromeos/internet_page/BUILD.gn b/chrome/browser/resources/settings/chromeos/internet_page/BUILD.gn
@@ -293,6 +293,8 @@ js_library("cellular_networks_list.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/internet_page/cellular_networks_list.m.js" ]
   deps = [
     ":esim_install_error_dialog.m",
+    "../multidevice_page:multidevice_browser_proxy.m",
+    "../multidevice_page:multidevice_constants.m",
     "//chrome/browser/resources/settings/chromeos/localized_link:localized_link.m",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_components/chromeos/cellular_setup:cellular_types.m",
@@ -301,6 +303,7 @@ js_library("cellular_networks_list.m") {
     "//ui/webui/resources/cr_components/chromeos/network:network_list_types.m",
     "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
     "//ui/webui/resources/js:i18n_behavior.m",
+    "//ui/webui/resources/js:web_ui_listener_behavior.m",
   ]
   extra_deps = [ ":cellular_networks_list_module" ]
 }

diff --git a/chrome/browser/resources/settings/chromeos/internet_page/cellular_networks_list.html b/chrome/browser/resources/settings/chromeos/internet_page/cellular_networks_list.html
@@ -12,8 +12,11 @@
 <link rel="import" href="chrome://resources/cr_components/chromeos/cellular_setup/cellular_types.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="../multidevice_page/multidevice_browser_proxy.html">
+<link rel="import" href="../multidevice_page/multidevice_constants.html">
 <link rel="import" href="../../chromeos/os_settings_icons_css.html">
 <link rel="import" href="esim_install_error_dialog.html">
 
@@ -144,29 +147,33 @@
         </settings-localized-link>
       </div>
     </template>
-    <div class="cellular-network-list-separator"></div>
-    <div class="cellular-network-list-header">
-      $i18n{cellularNetworkTetherLabel}
-    </div>
-    <template is="dom-if"
-        if="[[shouldShowNetworkSublist_(tetherNetworks_)]]" restamp>
-      <div class="cellular-network-content">
-        <network-list
-            id="tetherNetworkList" show-buttons
-            class="cellular-network-content"
-            show-technology-badge="[[showTechnologyBadge]]"
-            networks="[[tetherNetworks_]]"
-            device-state="[[deviceState]]">
-        </network-list>
-      </div>
-    </template>
     <template is="dom-if"
-        if="[[!shouldShowNetworkSublist_(tetherNetworks_)]]" restamp>
-      <div class="cellular-network-content cellular-not-setup">
-        <settings-localized-link
-            localized-string="[[i18nAdvanced('tetherNetworkNotSetup')]]">
-        </settings-localized-link>
+        if="[[shouldShowTetherSection_(multiDevicePageContentData_)]]" restamp>
+      <div class="cellular-network-list-separator"></div>
+      <div class="cellular-network-list-header">
+        $i18n{cellularNetworkTetherLabel}
       </div>
+      <template is="dom-if"
+          if="[[shouldShowNetworkSublist_(tetherNetworks_)]]" restamp>
+        <div class="cellular-network-content">
+          <network-list
+              id="tetherNetworkList" show-buttons
+              class="cellular-network-content"
+              show-technology-badge="[[showTechnologyBadge]]"
+              networks="[[tetherNetworks_]]"
+              device-state="[[deviceState]]">
+          </network-list>
+        </div>
+      </template>
+      <template is="dom-if"
+          if="[[!shouldShowNetworkSublist_(tetherNetworks_)]]" restamp>
+        <div id="tetherNetworksNotSetup"
+            class="cellular-network-content cellular-not-setup">
+          <settings-localized-link
+              localized-string="[[i18nAdvanced('tetherNetworkNotSetup')]]">
+          </settings-localized-link>
+        </div>
+      </template>
     </template>
 
     <template is="dom-if" if="[[shouldShowInstallErrorDialog_]]" restamp>

diff --git a/chrome/browser/resources/settings/chromeos/internet_page/cellular_networks_list.js b/chrome/browser/resources/settings/chromeos/internet_page/cellular_networks_list.js
@@ -13,6 +13,7 @@ Polymer({
   behaviors: [
     ESimManagerListenerBehavior,
     I18nBehavior,
+    WebUIListenerBehavior,
   ],
 
   properties: {
@@ -140,6 +141,17 @@ Polymer({
       type: Object,
       value: null,
     },
+
+    /**
+     * Multi-device page data used to determine if the tether section should be
+     * shown or not.
+     * @type {?settings.MultiDevicePageContentData}
+     * @private
+     */
+    multiDevicePageContentData_: {
+      type: Object,
+      value: null,
+    },
   },
 
   listeners: {
@@ -157,6 +169,17 @@ Polymer({
     this.fetchESimPendingProfileList_();
   },
 
+  /** @override */
+  ready() {
+    this.addWebUIListener(
+        'settings.updateMultidevicePageContentData',
+        this.onMultiDevicePageContentDataChanged_.bind(this));
+
+    const browserProxy = settings.MultiDeviceBrowserProxyImpl.getInstance();
+    browserProxy.getPageContentData().then(
+        this.onMultiDevicePageContentDataChanged_.bind(this));
+  },
+
   /**
    * @param {!chromeos.cellularSetup.mojom.EuiccRemote} euicc
    * ESimManagerListenerBehavior override
@@ -299,6 +322,27 @@ Polymer({
     return totalListLength > 0;
   },
 
+  /**
+   * @param {!settings.MultiDevicePageContentData} newData
+   * @private
+   */
+  onMultiDevicePageContentDataChanged_(newData) {
+    this.multiDevicePageContentData_ = newData;
+  },
+
+  /**
+   * @param {?settings.MultiDevicePageContentData} pageContentData
+   * @returns {boolean}
+   * @private
+   */
+  shouldShowTetherSection_(pageContentData) {
+    if (!pageContentData) {
+      return false;
+    }
+    return pageContentData.instantTetheringState ===
+        settings.MultiDeviceFeatureState.ENABLED_BY_USER;
+  },
+
   /**
    * @param {Event} event
    * @private

diff --git a/chrome/test/data/webui/settings/chromeos/cellular_networks_list_test.js b/chrome/test/data/webui/settings/chromeos/cellular_networks_list_test.js
@@ -8,14 +8,16 @@
 // #import {MojoInterfaceProviderImpl} from 'chrome://resources/cr_components/chromeos/network/mojo_interface_provider.m.js';
 // #import {setESimManagerRemoteForTesting} from 'chrome://resources/cr_components/chromeos/cellular_setup/mojo_interface_provider.m.js';
 // #import {FakeESimManagerRemote} from 'chrome://test/cr_components/chromeos/cellular_setup/fake_esim_manager_remote.m.js';
+// #import {MultiDeviceFeatureState, MultiDeviceBrowserProxyImpl} from 'chrome://os-settings/chromeos/os_settings.js';
+// #import {TestMultideviceBrowserProxy} from './test_multidevice_browser_proxy.m.js';
 // #import {flush, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // #import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 // #import {OncMojo} from 'chrome://resources/cr_components/chromeos/network/onc_mojo.m.js';
 // #import {eventToPromise} from 'chrome://test/test_util.m.js';
 // #import {CellularSetupPageName} from 'chrome://resources/cr_components/chromeos/cellular_setup/cellular_types.m.js';
 // clang-format on
 
-suite('CellularNetworkList', function() {
+suite('CellularNetworksList', function() {
   let cellularNetworkList;
 
   let mojom;
@@ -24,6 +26,7 @@ suite('CellularNetworkList', function() {
   let mojoApi_;
 
   let eSimManagerRemote;
+  let browserProxy;
 
   setup(function() {
     mojom = chromeos.networkConfig.mojom;
@@ -32,6 +35,9 @@ suite('CellularNetworkList', function() {
 
     eSimManagerRemote = new cellular_setup.FakeESimManagerRemote();
     cellular_setup.setESimManagerRemoteForTesting(eSimManagerRemote);
+
+    browserProxy = new multidevice.TestMultideviceBrowserProxy();
+    settings.MultiDeviceBrowserProxyImpl.instance_ = browserProxy;
   });
 
   function init() {
@@ -60,6 +66,8 @@ suite('CellularNetworkList', function() {
 
   test('Tether, cellular and eSIM profiles', async () => {
     init();
+    browserProxy.setInstantTetheringStateForTest(
+        settings.MultiDeviceFeatureState.ENABLED_BY_USER);
 
     const eSimNetwork1 = OncMojo.getDefaultNetworkState(
         mojom.NetworkType.kCellular, 'cellular_esim1');
@@ -197,4 +205,18 @@ suite('CellularNetworkList', function() {
     assertFalse(!!esimNetworkList);
   });
 
+  test('Hide instant tethering section when not enabled', async () => {
+    init();
+    assertFalse(!!cellularNetworkList.$$('#tetherNetworksNotSetup'));
+
+    browserProxy.setInstantTetheringStateForTest(
+        settings.MultiDeviceFeatureState.ENABLED_BY_USER);
+    await flushAsync();
+    assertTrue(!!cellularNetworkList.$$('#tetherNetworksNotSetup'));
+
+    browserProxy.setInstantTetheringStateForTest(
+        settings.MultiDeviceFeatureState.UNAVAILABLE_NO_VERIFIED_HOST);
+    await flushAsync();
+    assertFalse(!!cellularNetworkList.$$('#tetherNetworksNotSetup'));
+  });
 });
diff --git a/chrome/test/data/webui/settings/chromeos/test_multidevice_browser_proxy.js b/chrome/test/data/webui/settings/chromeos/test_multidevice_browser_proxy.js
@@ -125,6 +125,16 @@ cr.define('multidevice', function() {
     cancelNotificationSetup() {
       this.methodCalled('cancelNotificationSetup');
     }
+
+    /**
+     * @param {settings.MultiDeviceFeature} state
+     */
+    setInstantTetheringStateForTest(state) {
+      this.data.instantTetheringState = state;
+      cr.webUIListenerCallback(
+          'settings.updateMultidevicePageContentData',
+          Object.assign({}, this.data));
+    }
   }
 
   // #cr_define_end