[CrOS Settings] Activate button for unactivated pSIM network-list-item.

Add 'Activate' button to network-list-items containing an item that is a pSIM network that is unactivated with a valid payment url. Screenshot: https://screenshot.googleplex.com/7QWY3cHSuZbwzHz.png (cherry picked from commit e5fc96d) Bug: 1196507 Change-Id: Iecd4a6c623bef2826142b07ff38b5972886fdbe3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2816200 Commit-Queue: Gordon Seto <gordonseto@google.com> Reviewed-by: Kyle Horimoto <khorimoto@chromium.org> Cr-Original-Commit-Position: refs/heads/master@{#871190} Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2826670 Commit-Queue: Kyle Horimoto <khorimoto@chromium.org> Auto-Submit: Kyle Horimoto <khorimoto@chromium.org> Reviewed-by: Gordon Seto <gordonseto@google.com> Cr-Commit-Position: refs/branch-heads/4472@{#64} Cr-Branched-From: 3d60439-refs/heads/master@{#870763}
chromium · Apr 14, 2021 · 7fd14ac · 7fd14ac
1 parent 9042b94
commit 7fd14ac
Show file tree

Hide file tree

Showing 9 changed files with 211 additions and 45 deletions.
diff --git a/chrome/app/chromeos_strings.grdp b/chrome/app/chromeos_strings.grdp
@@ -1706,6 +1706,12 @@
   <message name="IDS_NETWORK_LIST_ITEM_LABEL_ESIM_PENDING_PROFILE_WITH_PROVIDER_NAME_INSTALLING" desc="A11y label for an eSIM profile that is currently installing, shown in a list in settings and oobe. Includes the provider name.">
     Installing mobile profile, Network <ph name="NETWORK_INDEX">$1<ex>1</ex></ph> of <ph name="NETWORK_COUNT">$2<ex>10</ex></ph>, <ph name="NETWORK_NAME">$3<ex>Verizon Wireless</ex></ph>, <ph name="NETWORK_PROVIDER_NAME">$4<ex>Verizon LTE</ex></ph>
   </message>
+  <message name="IDS_NETWORK_LIST_ITEM_ACTIVATE" desc="Text for the button displayed for SIM networks that haven't been setup that opens the SIM setup dialog when clicked." translateable="false">
+    Activate
+  </message>
+  <message name="IDS_NETWORK_LIST_ITEM_ACTIVATE_A11Y_LABEL" desc="A11Y label for the button displayed for SIM networks that haven't been setup that opens the SIM setup dialog when clicked. Includes network name." translateable="false">
+    Activate, <ph name="NETWORK_NAME">$1<ex>Verizon</ex></ph>
+  </message>
   <message name="IDS_NETWORK_LIST_ITEM_DOWNLOAD" desc="Text for the button displayed for pending eSIM profiles that installs the profile when pressed.">
     Download
   </message>

diff --git a/chrome/app/chromeos_strings_grdp/IDS_NETWORK_LIST_ITEM_ACTIVATE.png.sha1 b/chrome/app/chromeos_strings_grdp/IDS_NETWORK_LIST_ITEM_ACTIVATE.png.sha1
@@ -0,0 +1 @@
+b5a4c73dfabb7e6be7df49de5ee412356c2ba013
diff --git a/chrome/app/chromeos_strings_grdp/IDS_NETWORK_LIST_ITEM_ACTIVATE_A11Y_LABEL.png.sha1 b/chrome/app/chromeos_strings_grdp/IDS_NETWORK_LIST_ITEM_ACTIVATE_A11Y_LABEL.png.sha1
@@ -0,0 +1 @@
+b5a4c73dfabb7e6be7df49de5ee412356c2ba013
diff --git a/chrome/browser/ui/webui/chromeos/network_element_localized_strings_provider.cc b/chrome/browser/ui/webui/chromeos/network_element_localized_strings_provider.cc
@@ -96,6 +96,9 @@ constexpr webui::LocalizedString kElementLocalizedStrings[] = {
      IDS_NETWORK_LIST_UPDATED_CELLULAR_SIM_CARD_LOCKED},
     {"networkListItemNotConnected", IDS_NETWORK_LIST_NOT_CONNECTED},
     {"networkListItemNoNetwork", IDS_NETWORK_LIST_NO_NETWORK},
+    {"networkListItemActivate", IDS_NETWORK_LIST_ITEM_ACTIVATE},
+    {"networkListItemActivateA11yLabel",
+     IDS_NETWORK_LIST_ITEM_ACTIVATE_A11Y_LABEL},
     {"networkListItemDownload", IDS_NETWORK_LIST_ITEM_DOWNLOAD},
     {"networkListItemDownloadA11yLabel",
      IDS_NETWORK_LIST_ITEM_DOWNLOAD_A11Y_LABEL},

diff --git a/chrome/test/data/webui/cr_components/chromeos/network/network_list_item_test.js b/chrome/test/data/webui/cr_components/chromeos/network/network_list_item_test.js
@@ -14,6 +14,7 @@
 
 // #import {OncMojo} from 'chrome://resources/cr_components/chromeos/network/onc_mojo.m.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {FakeNetworkConfig} from 'chrome://test/chromeos/fake_network_config_mojom.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 {MojoInterfaceProviderImpl} from 'chrome://resources/cr_components/chromeos/network/mojo_interface_provider.m.js';
@@ -28,6 +29,9 @@ suite('NetworkListItemTest', function() {
   let mojom;
   let eSimManagerRemote = null;
 
+  /** @type {!chromeos.networkConfig.mojom.CrosNetworkConfigRemote|undefined} */
+  let mojoApi_;
+
   let eventTriggered;
 
   setup(function() {
@@ -36,6 +40,8 @@ suite('NetworkListItemTest', function() {
     });
 
     mojom = chromeos.networkConfig.mojom;
+    mojoApi_ = new FakeNetworkConfig();
+    network_config.MojoInterfaceProviderImpl.getInstance().remote_ = mojoApi_;
     eSimManagerRemote = new FakeESimManagerRemote();
     setESimManagerRemoteForTesting(eSimManagerRemote);
     listItem = document.createElement('network-list-item');
@@ -47,12 +53,13 @@ suite('NetworkListItemTest', function() {
   });
 
   function initCellularNetwork(iccid, eid, simLocked) {
-    const networkState =
-        OncMojo.getDefaultNetworkState(mojom.NetworkType.kCellular);
-    networkState.typeState.cellular.iccid = iccid;
-    networkState.typeState.cellular.eid = eid;
-    networkState.typeState.cellular.simLocked = simLocked;
-    return networkState;
+    const properties = OncMojo.getDefaultManagedProperties(
+        mojom.NetworkType.kCellular, 'cellular');
+    properties.typeProperties.cellular.iccid = iccid;
+    properties.typeProperties.cellular.eid = eid;
+    properties.typeProperties.cellular.simLocked = simLocked;
+    mojoApi_.setManagedPropertiesForTest(properties);
+    return OncMojo.managedPropertiesToNetworkState(properties);
   }
 
   function setEventListeners() {
@@ -85,7 +92,10 @@ suite('NetworkListItemTest', function() {
     let networkIcon = listItem.$$('network-icon');
     assertFalse(!!networkIcon);
 
-    listItem.item = OncMojo.getDefaultNetworkState(mojom.NetworkType.kEthernet, 'eth0');
+    const properties = OncMojo.getDefaultManagedProperties(
+        mojom.NetworkType.kEthernet, 'eth0');
+    mojoApi_.setManagedPropertiesForTest(properties);
+    listItem.item = OncMojo.managedPropertiesToNetworkState(properties);
 
     // Update the network state.
     Polymer.dom.flush();
@@ -96,8 +106,10 @@ suite('NetworkListItemTest', function() {
   });
 
   test('Network provider name visibilty', async () => {
-    listItem.item =
-        OncMojo.getDefaultNetworkState(mojom.NetworkType.kEthernet, 'eth0');
+    const properties = OncMojo.getDefaultManagedProperties(
+        mojom.NetworkType.kEthernet, 'eth0');
+    mojoApi_.setManagedPropertiesForTest(properties);
+    listItem.item = OncMojo.managedPropertiesToNetworkState(properties);
     await flushAsync();
 
     let providerName = listItem.$$('#subtitle');
@@ -113,6 +125,45 @@ suite('NetworkListItemTest', function() {
     assertEquals('provider1', providerName.textContent.trim());
   });
 
+  test('Unactivated pSIM activate button visibility', async () => {
+    assertFalse(!!listItem.$$('#activateButton'));
+
+    // Set item to an activated pSIM network first.
+    const managedPropertiesActivated = OncMojo.getDefaultManagedProperties(
+        mojom.NetworkType.kCellular, 'cellular');
+    managedPropertiesActivated.typeProperties.cellular.activationState =
+        mojom.ActivationStateType.kActivated;
+    mojoApi_.setManagedPropertiesForTest(managedPropertiesActivated);
+
+    listItem.item =
+        OncMojo.managedPropertiesToNetworkState(managedPropertiesActivated);
+    await flushAsync();
+
+    // Activate button should not be showing.
+    assertFalse(!!listItem.$$('#activateButton'));
+
+    // Set item to an unactivated pSIM network with a payment URL.
+    const managedPropertiesNotActivated = OncMojo.getDefaultManagedProperties(
+        mojom.NetworkType.kCellular, 'cellular');
+    managedPropertiesNotActivated.typeProperties.cellular.activationState =
+        mojom.ActivationStateType.kNotActivated;
+    managedPropertiesNotActivated.typeProperties.cellular.paymentPortal = {
+      url: 'url'
+    };
+    mojoApi_.setManagedPropertiesForTest(managedPropertiesNotActivated);
+
+    listItem.item =
+        OncMojo.managedPropertiesToNetworkState(managedPropertiesNotActivated);
+    await flushAsync();
+
+    // Activate button should now be showing.
+    assertTrue(!!listItem.$$('#activateButton'));
+
+    // Arrow button should also be visible.
+    let arrow = listItem.$$('#subpageButton');
+    assertTrue(!!arrow);
+  });
+
   test(
       'Pending eSIM profile name, provider, install button visibilty',
       async () => {
@@ -226,7 +277,7 @@ suite('NetworkListItemTest', function() {
     let unlockBtn = listItem.$$('#unlockButton');
 
     // Arrow button should be visible when unlock button is not visible.
-    let arrow = listItem.$$('#subpage-button');
+    let arrow = listItem.$$('#subpageButton');
     assertTrue(!!arrow);
 
     assertFalse(!!unlockBtn);
@@ -238,7 +289,7 @@ suite('NetworkListItemTest', function() {
     listItem.set('networkState.typeState.cellular.simLocked', true);
     await flushAsync();
     // Arrow button should be hidden when unlock button is visible.
-    arrow = listItem.$$('#subpage-button');
+    arrow = listItem.$$('#subpageButton');
     assertFalse(!!arrow);
 
     await flushAsync();
@@ -317,15 +368,18 @@ suite('NetworkListItemTest', function() {
   test(
       'Network disabled, no arrow and enter and click does not fire events',
       async () => {
+        const properties = OncMojo.getDefaultManagedProperties(
+            mojom.NetworkType.kCellular, 'cellular');
+        mojoApi_.setManagedPropertiesForTest(properties);
         listItem.networkState =
-            OncMojo.getDefaultNetworkState(mojom.NetworkType.kCellular, name);
+            OncMojo.managedPropertiesToNetworkState(properties);
         listItem.deviceState = {
           type: mojom.NetworkType.kCellular,
           inhibitedReason: mojom.InhibitReason.kInstallingProfile,
         };
         await flushAsync();
 
-        let arrow = listItem.$$('#subpage-button');
+        let arrow = listItem.$$('#subpageButton');
         assertFalse(!!arrow);
 
         listItem.$$('#divOuter').click();

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
@@ -40,6 +40,11 @@ suite('CellularNetworksList', function() {
     settings.MultiDeviceBrowserProxyImpl.instance_ = browserProxy;
   });
 
+  teardown(function() {
+    cellularNetworkList.remove();
+    cellularNetworkList = null;
+  });
+
   function init() {
     cellularNetworkList = document.createElement('cellular-networks-list');
     // iron-list will not create list items if the container of the list is of
@@ -50,10 +55,14 @@ suite('CellularNetworksList', function() {
     Polymer.dom.flush();
   }
 
-  function setNetworksForTest(type, networks) {
+  function setManagedPropertiesForTest(type, properties) {
     mojoApi_.resetForTest();
     mojoApi_.setNetworkTypeEnabledState(type, true);
-    mojoApi_.addNetworksForTest(networks);
+    const networks = [];
+    for (let i = 0; i < properties.length; i++) {
+      mojoApi_.setManagedPropertiesForTest(properties[i]);
+      networks.push(OncMojo.managedPropertiesToNetworkState(properties[i]));
+    }
     cellularNetworkList.cellularDeviceState =
         mojoApi_.getDeviceStateForTest(type);
     cellularNetworkList.networks = networks;
@@ -82,19 +91,23 @@ suite('CellularNetworksList', function() {
     browserProxy.setInstantTetheringStateForTest(
         settings.MultiDeviceFeatureState.ENABLED_BY_USER);
 
-    const eSimNetwork1 = OncMojo.getDefaultNetworkState(
+    const eSimNetwork1 = OncMojo.getDefaultManagedProperties(
         mojom.NetworkType.kCellular, 'cellular_esim1');
-    eSimNetwork1.typeState.cellular.eid = '11111111111111111111111111111111';
-    const eSimNetwork2 = OncMojo.getDefaultNetworkState(
+    eSimNetwork1.typeProperties.cellular.eid =
+        '11111111111111111111111111111111';
+    const eSimNetwork2 = OncMojo.getDefaultManagedProperties(
         mojom.NetworkType.kCellular, 'cellular_esim2');
-    eSimNetwork2.typeState.cellular.eid = '22222222222222222222222222222222';
-    setNetworksForTest(mojom.NetworkType.kCellular, [
-      OncMojo.getDefaultNetworkState(mojom.NetworkType.kCellular, 'cellular1'),
-      OncMojo.getDefaultNetworkState(mojom.NetworkType.kCellular, 'cellular2'),
+    eSimNetwork2.typeProperties.cellular.eid =
+        '22222222222222222222222222222222';
+    setManagedPropertiesForTest(mojom.NetworkType.kCellular, [
+      OncMojo.getDefaultManagedProperties(
+          mojom.NetworkType.kCellular, 'cellular1'),
+      OncMojo.getDefaultManagedProperties(
+          mojom.NetworkType.kCellular, 'cellular2'),
       eSimNetwork1,
       eSimNetwork2,
-      OncMojo.getDefaultNetworkState(mojom.NetworkType.kTether, 'tether1'),
-      OncMojo.getDefaultNetworkState(mojom.NetworkType.kTether, 'tether2'),
+      OncMojo.getDefaultManagedProperties(mojom.NetworkType.kTether, 'tether1'),
+      OncMojo.getDefaultManagedProperties(mojom.NetworkType.kTether, 'tether2'),
     ]);
 
     eSimManagerRemote.addEuiccForTest(2);
@@ -182,10 +195,10 @@ suite('CellularNetworksList', function() {
   });
 
   test('Hide esim section when no EUICC is found', async () => {
-    setNetworksForTest(mojom.NetworkType.kCellular, [
-      OncMojo.getDefaultNetworkState(mojom.NetworkType.kTether, 'tether1'),
-    ]);
     init();
+    setManagedPropertiesForTest(mojom.NetworkType.kCellular, [
+      OncMojo.getDefaultManagedProperties(mojom.NetworkType.kTether, 'tether1'),
+    ]);
     Polymer.dom.flush();
     await flushAsync();
     const esimNetworkList = cellularNetworkList.$$('#esimNetworkList');
@@ -195,8 +208,8 @@ suite('CellularNetworksList', function() {
 
   test('Hide pSIM section when no pSIM slots', async () => {
     init();
-    setNetworksForTest(mojom.NetworkType.kCellular, [
-      OncMojo.getDefaultNetworkState(mojom.NetworkType.kTether, 'tether1'),
+    setManagedPropertiesForTest(mojom.NetworkType.kCellular, [
+      OncMojo.getDefaultManagedProperties(mojom.NetworkType.kTether, 'tether1'),
     ]);
     await flushAsync();
     assertFalse(!!cellularNetworkList.$$('#pSimNoNetworkFound'));

diff --git a/ui/webui/resources/cr_components/chromeos/network/network_list_item.html b/ui/webui/resources/cr_components/chromeos/network/network_list_item.html
@@ -13,13 +13,14 @@
 <link rel="import" href="../../../html/i18n_behavior.html">
 <link rel="import" href="../../../html/cr/ui/focus_row_behavior.html">
 <link rel="import" href="cr_policy_network_behavior_mojo.html">
+<link rel="import" href="mojo_interface_provider.html">
 <link rel="import" href="network_icon.html">
 <link rel="import" href="network_list_types.html">
 <link rel="import" href="onc_mojo.html">
 
 <dom-module id="network-list-item">
   <template>
-    <style include="cr-shared-style iron-flex">
+    <style include="cr-shared-style internet-shared iron-flex">
       :host {
         display: inline-flex;
         outline: none;
@@ -50,7 +51,9 @@
       :host([disabled_]) #networkStateText,
       :host([disabled_]) #divText,
       :host([is-e-sim-pending-profile_]) #divText,
-      :host([is-e-sim-pending-profile_]) #divIcon {
+      :host([is-e-sim-pending-profile_]) #divIcon,
+      :host([is-p-sim-unactivated-network_]) #divText,
+      :host([is-p-sim-unactivated-network_]) #networkIconContainer {
         opacity: var(--network-list-item-disabled-opacity);
       }
 
@@ -115,6 +118,10 @@
         margin-inline-end: 16px;
         width: 20px;
       }
+
+      .separator {
+        margin: 0 0 0 32px;
+      }
     </style>
     <div id="wrapper" focus-row-container
          class="layout horizontal center flex">
@@ -163,12 +170,22 @@
               networkState.source)]]">
           </cr-policy-indicator>
         </template>
+        <!-- This can only be shown if isUpdatedCellularUiEnabled_ is enabled. -->
+        <template is="dom-if" if="[[isPSimUnactivatedNetwork_]]" restamp>
+          <!-- TODO(crbug.com/1196507) Add on-click listener to button-->
+          <cr-button id="activateButton"
+              aria-label$="[[getActivateBtnA11yLabel_(item)]]"
+              disabled="[[disabled_]]">
+            [[i18n('networkListItemActivate')]]
+          </cr-button>
+          <div class="separator"></div>
+        </template>
         <template is="dom-if"
             if="[[isSubpageButtonVisible_(networkState, showButtons, disabled_,
-              networkState.typeState.cellular.simLocked)]]" restamp>
+              networkState.typeState.cellular.simLocked, isPSimUnactivatedNetwork_)]]" restamp>
           <div>
             <cr-icon-button class="subpage-arrow"
-                id="subpage-button"
+                id="subpageButton"
                 on-click="onSubpageArrowClick_"
                 tabindex$="[[tabindex]]"
                 aria-label$="[[buttonLabel]]"