[CrOS cellular] Hide eSIM section when not supported by device

Screenshot: https://screenshot.googleplex.com/788UBYwsmiFUoQV.png

Bug: 1163556
Change-Id: I5724e5af92c02edd024cd93c3b2dbde7219704e0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2611615
Commit-Queue: Nnamdi Theodore Johnson-kanu <tjohnsonkanu@google.com>
Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#841343}

chrome/browser/resources/settings/chromeos/internet_page/cellular_networks_list.html

@@ -68,43 +68,45 @@
       }
 
     </style>
-    <div class="cellular-network-list-header esim-list-header flex">
-      <div class="esim-list-title">$i18n{cellularNetworkEsimLabel}</div>
-      <div class="flex-column">
-        <cr-icon-button
-            id="eidPopupButton"
-            iron-icon="cr:info-outline"
-            title="$i18n{showEidPopupButtonLabel}"
-            aria-label="$i18n{showEidPopupButtonLabel}"
-            on-click="toggleEidPopup_">
-        </cr-icon-button>
-        <template is="dom-if" if="[[shouldShowEidPopup_]]" restamp>
-          <cellular-eid-popup class="eid-popup">
-          </cellular-eid-popup>
-        </template>
-      </div>
-    </div>
-    <template is="dom-if"
-        if="[[shouldShowNetworkSublist_(eSimNetworks_, eSimPendingProfileItems_)]]" restamp>
-      <div class="cellular-network-content">
-        <network-list id="esimNetworkList" show-buttons
-            show-technology-badge="[[showTechnologyBadge]]"
-            networks="[[eSimNetworks_]]"
-            custom-items="[[eSimPendingProfileItems_]]"
-            device-state="[[deviceState]]">
-        </network-list>
-      </div>
-    </template>
-    <template
-        is="dom-if"
-        if="[[!shouldShowNetworkSublist_(eSimNetworks_, eSimPendingProfileItems_)]]" restamp>
-      <div id="eSimNoNetworkFound"
-          class="cellular-network-content cellular-not-setup">
-        <settings-localized-link
-            on-link-clicked="onEsimLearnMoreClicked_"
-            localized-string="$i18n{eSimNetworkNotSetup}">
-        </settings-localized-link>
+    <template is="dom-if" if="[[!!euicc_]]" restamp>
+      <div class="cellular-network-list-header esim-list-header flex">
+        <div class="esim-list-title">$i18n{cellularNetworkEsimLabel}</div>
+        <div class="flex-column">
+          <cr-icon-button
+              id="eidPopupButton"
+              iron-icon="cr:info-outline"
+              title="$i18n{showEidPopupButtonLabel}"
+              aria-label="$i18n{showEidPopupButtonLabel}"
+              on-click="toggleEidPopup_">
+          </cr-icon-button>
+          <template is="dom-if" if="[[shouldShowEidPopup_]]" restamp>
+            <cellular-eid-popup class="eid-popup">
+            </cellular-eid-popup>
+          </template>
+        </div>
       </div>
+      <template is="dom-if"
+          if="[[shouldShowNetworkSublist_(eSimNetworks_, eSimPendingProfileItems_)]]" restamp>
+        <div class="cellular-network-content">
+          <network-list id="esimNetworkList" show-buttons
+              show-technology-badge="[[showTechnologyBadge]]"
+              networks="[[eSimNetworks_]]"
+              custom-items="[[eSimPendingProfileItems_]]"
+              device-state="[[deviceState]]">
+          </network-list>
+        </div>
+      </template>
+      <template
+          is="dom-if"
+          if="[[!shouldShowNetworkSublist_(eSimNetworks_, eSimPendingProfileItems_)]]" restamp>
+        <div id="eSimNoNetworkFound"
+            class="cellular-network-content cellular-not-setup">
+          <settings-localized-link
+              on-link-clicked="onEsimLearnMoreClicked_"
+              localized-string="$i18n{eSimNetworkNotSetup}">
+          </settings-localized-link>
+        </div>
+      </template>
     </template>
     <div class="cellular-network-list-header">
       $i18n{cellularNetworkPsimLabel}

chrome/browser/resources/settings/chromeos/internet_page/cellular_networks_list.js

@@ -104,6 +104,15 @@ Polymer({
     shouldShowEidPopup_: {
       type: Boolean,
       value: false,
+    },
+
+    /**
+     * Euicc object representing the active euicc_ module on the device
+     * @private {?chromeos.cellularSetup.mojom.EuiccRemote}
+     */
+    euicc_: {
+      type: Object,
+      value: null,
     }
   },
 
@@ -156,13 +165,12 @@ Polymer({
         .getAvailableEuiccs()
         .then(response => {
           if (response.euiccs.length > 0) {
-            return this.fetchESimPendingProfileListForEuicc_(
-                response.euiccs[0]);
+            // Use first available euicc as current. Only single Euicc modules are
+            // currently supported.
+            this.euicc_ = response.euiccs[0];
+            return this.fetchESimPendingProfileListForEuicc_(this.euicc_);
           }
-          throw new Error('No EUICCs available.');
-        })
-        .catch(error => {
-          console.error(error);
+          this.euicc_ = null;
         });
   },
 

chrome/test/data/webui/settings/chromeos/cellular_networks_list_test.js

@@ -32,7 +32,9 @@ suite('CellularNetworkList', function() {
 
     eSimManagerRemote = new cellular_setup.FakeESimManagerRemote();
     cellular_setup.setESimManagerRemoteForTesting(eSimManagerRemote);
+  });
 
+  function init() {
     cellularNetworkList = document.createElement('cellular-networks-list');
     // iron-list will not create list items if the container of the list is of
     // size zero.
@@ -40,7 +42,7 @@ suite('CellularNetworkList', function() {
     cellularNetworkList.style.width = '100%';
     document.body.appendChild(cellularNetworkList);
     Polymer.dom.flush();
-  });
+  }
 
   function setNetworksForTest(type, networks) {
     mojoApi_.resetForTest();
@@ -57,6 +59,8 @@ suite('CellularNetworkList', function() {
   }
 
   test('Tether, cellular and eSIM profiles', async () => {
+    init();
+
     const eSimNetwork1 = OncMojo.getDefaultNetworkState(
         mojom.NetworkType.kCellular, 'cellular_esim1');
     const eSimNetwork2 = OncMojo.getDefaultNetworkState(
@@ -102,10 +106,12 @@ suite('CellularNetworkList', function() {
   test(
       'Fire show cellular setup event on eSim/psim no network link click',
       async () => {
+        eSimManagerRemote.addEuiccForTest(0);
+        init();
+
         setNetworksForTest(mojom.NetworkType.kCellular, [
           OncMojo.getDefaultNetworkState(mojom.NetworkType.kTether, 'tether1'),
         ]);
-        eSimManagerRemote.addEuiccForTest(0);
         Polymer.dom.flush();
 
         await flushAsync();
@@ -139,8 +145,8 @@ suite('CellularNetworkList', function() {
       });
 
   test('Show EID and QR code popup', async () => {
-    eSimManagerRemote.addEuiccForTest(0);
-
+    eSimManagerRemote.addEuiccForTest(1);
+    init();
     let eidPopup = cellularNetworkList.$$('.eid-popup');
     assertFalse(!!eidPopup);
     const eidPopupBtn = cellularNetworkList.$$('#eidPopupButton');
@@ -155,6 +161,7 @@ suite('CellularNetworkList', function() {
 
   test('Install pending eSIM profile', async () => {
     eSimManagerRemote.addEuiccForTest(1);
+    init();
     await flushAsync();
 
     let eSimNetworkList = cellularNetworkList.$$('#esimNetworkList');
@@ -177,4 +184,16 @@ suite('CellularNetworkList', function() {
                                     .shadowRoot.querySelector('a');
     assertTrue(!!esimNoNetworkAnchor);
   });
+  test('Hide esim section when no EUICC is found', async () => {
+    setNetworksForTest(mojom.NetworkType.kCellular, [
+      OncMojo.getDefaultNetworkState(mojom.NetworkType.kTether, 'tether1'),
+    ]);
+    init();
+    Polymer.dom.flush();
+    await flushAsync();
+    const esimNetworkList = cellularNetworkList.$$('#esimNetworkList');
+
+    assertFalse(!!esimNetworkList);
+  });
+
 });