[CrOS Settings] Profile discovery install and update eSIM strings.

Update profile discovery page to only select one profile at a
time. Add installing eSIM profiles from the profile discovery
page.
Update activation code page description when no eSIM profiles were
found, add message and error message to eSIM final page.

Screenshots:
https://screenshot.googleplex.com/BrmvC8t88ei2fZZ.png
https://screenshot.googleplex.com/gcHndSi2XtU4WUg.png
https://screenshot.googleplex.com/7Xz4oKQMeYdZ283.png
https://screenshot.googleplex.com/8NMh78dNWUNq5Gd.png

Bug: 1093185
Change-Id: I61628f012fb19d383260b3cf26a30a1c7cff6d07
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2561040Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Commit-Queue: Gordon Seto <gordonseto@google.com>
Cr-Commit-Position: refs/heads/master@{#832628}

chrome/app/chromeos_strings.grdp

@@ -303,6 +303,12 @@
   <message name="IDS_CELLULAR_SETUP_FINAL_PAGE_ERROR_MESSAGE" desc="Message displayed under title in final screen of cellular setup when ChromeOS encountered an error completing activation.">
     An error occured during activation.
   </message>
+  <message name="IDS_CELLULAR_SETUP_ESIM_FINAL_PAGE_MESSAGE" desc="Message displayed under title in final success screen of eSIM cellular setup that tells user that their profile has been activated.">
+    Profile has been added successfully.
+  </message>
+  <message name="IDS_CELLULAR_SETUP_ESIM_FINAL_PAGE_ERROR_MESSAGE" desc="Message displayed under title in final screen of eSIM cellular setup when ChromeOS encountered an error installing eSIM profiles.">
+    Unable to connect to a mobile network. For technical support, please contact your carrier.
+  </message>
   <message name="IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_PSIM_LABEL" desc="Label for physical SIM (pSIM) setup flow card radio select button during cellular setup">
     Physical SIM
   </message>
@@ -324,6 +330,9 @@
   <message name="IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE" desc="Label for informing the user on ways to retrieve an eSim profile">
     Scan QR code using device camera or enter activation code provided by your carrier.
   </message>
+  <message name="IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_NO_PROFILES" desc="Label for informing the user on ways to retrieve an eSim profile after no eSIM profiles have been found.">
+    No profiles were discovered. To setup a new network, scan QR code using device camera or enter activation code provided by your carrier.
+  </message>
   <message name="IDS_CELLULAR_SETUP_ESIM_PAGE_USE_CAMERA" desc="Label for button that uses the camera to scan for QR codes when clicked.">
     Use camera to scan QR code
   </message>

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_ESIM_FINAL_PAGE_ERROR_MESSAGE.png.sha1

+57b82e94e5ee46431fd4796fe0a7fb9aa101625a
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_ESIM_FINAL_PAGE_MESSAGE.png.sha1

+ee5a3f9282e24d012df8db178b9a93d764d48e07
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_NO_PROFILES.png.sha1

+1d5d372f5f8b4c6b4204871a459416e782363e09
\ No newline at end of file

chrome/browser/ui/webui/chromeos/cellular_setup/cellular_setup_localized_strings_provider.cc

@@ -49,9 +49,14 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
     {"finalPageMessage", IDS_CELLULAR_SETUP_FINAL_PAGE_MESSAGE},
     {"finalPageErrorTitle", IDS_CELLULAR_SETUP_FINAL_PAGE_ERROR_TITLE},
     {"finalPageErrorMessage", IDS_CELLULAR_SETUP_FINAL_PAGE_ERROR_MESSAGE},
+    {"eSimFinalPageMessage", IDS_CELLULAR_SETUP_ESIM_FINAL_PAGE_MESSAGE},
+    {"eSimFinalPageErrorMessage",
+     IDS_CELLULAR_SETUP_ESIM_FINAL_PAGE_ERROR_MESSAGE},
     {"eSimProfileDetectMessage",
      IDS_CELLULAR_SETUP_ESIM_PROFILE_DETECT_MESSAGE},
     {"scanQRCode", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE},
+    {"scanQRCodeNoProfiles",
+     IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_NO_PROFILES},
     {"switchCamera", IDS_CELLULAR_SETUP_ESIM_PAGE_SWITCH_CAMERA},
     {"useCamera", IDS_CELLULAR_SETUP_ESIM_PAGE_USE_CAMERA},
     {"scanQRCodeSuccess", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_SUCCESS},

chrome/test/data/webui/cr_components/chromeos/cellular_setup/esim_flow_ui_test.js

@@ -267,12 +267,22 @@ suite('CrComponentsEsimFlowUiTest', function() {
     profileList.selectItem(profileList.items[0]);
     Polymer.dom.flush();
 
-    // The 'Done' button should now be enabled.
+    // The 'Next' button should now be enabled.
     assertTrue(
-        eSimPage.buttonState.done ===
+        eSimPage.buttonState.next ===
         cellularSetup.ButtonState.SHOWN_AND_ENABLED);
     assertTrue(
         eSimPage.buttonState.skipDiscovery ===
         cellularSetup.ButtonState.HIDDEN);
+
+    // Simulate pressing 'Next'.
+    eSimPage.navigateForward();
+    await flushAsync();
+
+    // Should now be at the final page.
+    assertTrue(
+        eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.FINAL &&
+        eSimPage.selectedESimPageName_ === finalPage.id);
+    assertFalse(!!finalPage.$$('.error'));
   });
 });

ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.html

@@ -113,7 +113,7 @@
     <base-page>
       <div slot="page-body">
         <span id="scanQrCodeDescription">
-          [[i18n('scanQRCode')]]
+          [[getDescription_(showNoProfilesMessage)]]
         </span>
         <div id="esimQrCodeDetection">
           <cr-button id="switchCameraButton"

ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.js

@@ -79,6 +79,11 @@ Polymer({
       type: Object,
       value: UiElement,
     },
+
+    /** @private */
+    showNoProfilesMessage: {
+      type: Boolean,
+    }
   },
 
   /**
@@ -325,4 +330,10 @@ Polymer({
         return false;
     }
   },
+
+  /** @private */
+  getDescription_() {
+    return this.showNoProfilesMessage ? this.i18n('scanQRCodeNoProfiles') :
+                                        this.i18n('scanQRCode');
+  },
 });

ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.html

@@ -29,16 +29,19 @@
       </setup-loading-page>
       <profile-discovery-list-page id="profileDiscoveryPage"
           pending-profiles="[[pendingProfiles_]]"
-          selected-profiles="{{selectedProfiles_}}">
+          selected-profile="{{selectedProfile_}}">
       </profile-discovery-list-page>
       <activation-code-page id="activationCodePage"
           activation-code="{{activationCode_}}"
+          show-no-profiles-message="[[getShowNoProfilesMessage_(pendingProfiles_)]]"
           show-error="{{showError_}}">
       </activation-code-page>
       <final-page
         id="finalPage"
         delegate="[[delegate]]"
-        show-error="[[showError_]]">
+        show-error="[[showError_]]"
+        message="[[i18n('eSimFinalPageMessage')]]"
+        error-message="[[i18n('eSimFinalPageErrorMessage')]]">
       </final-page>
     </iron-pages>
   </template>

ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.js

@@ -15,7 +15,7 @@ cr.define('cellular_setup', function() {
   /* #export */ const ESimUiState = {
     PROFILE_SEARCH: 'profile-search',
     ACTIVATION_CODE_ENTRY: 'activation-code-entry',
-    MULTI_PROFILE_SELECTION: 'multi-profile-selection',
+    PROFILE_SELECTION: 'profile-selection',
     SETUP_FINISH: 'setup-finish',
   };
 
@@ -73,12 +73,12 @@ cr.define('cellular_setup', function() {
       },
 
       /**
-       * Profiles selected in profileDiscoveryPage to be installed.
-       * @type {!Array<!chromeos.cellularSetup.mojom.ESimProfileRemote>}
+       * Profile selected in profileDiscoveryPage to be installed.
+       * @type {?chromeos.cellularSetup.mojom.ESimProfileRemote}
        * @private
        */
-      selectedProfiles_: {
-        type: Array,
+      selectedProfile_: {
+        type: Object,
       },
 
       /** @private */
@@ -103,7 +103,7 @@ cr.define('cellular_setup', function() {
 
     observers: [
       'updateSelectedPage_(state_)', 'updateButtonBarState_(state_)',
-      'onSelectedProfilesChanged_(selectedProfiles_.splices)'
+      'onSelectedProfileChanged_(selectedProfile_)'
     ],
 
     /** @override */
@@ -148,7 +148,7 @@ cr.define('cellular_setup', function() {
                     this.handleProfileInstallResponse_.bind(this));
                 break;
               default:
-                this.state_ = ESimUiState.MULTI_PROFILE_SELECTION;
+                this.state_ = ESimUiState.PROFILE_SELECTION;
                 break;
             }
           });
@@ -203,7 +203,7 @@ cr.define('cellular_setup', function() {
         case ESimUiState.ACTIVATION_CODE_ENTRY:
           this.selectedESimPageName_ = ESimPageName.ACTIVATION_CODE;
           break;
-        case ESimUiState.MULTI_PROFILE_SELECTION:
+        case ESimUiState.PROFILE_SELECTION:
           this.selectedESimPageName_ = ESimPageName.PROFILE_DISCOVERY;
           break;
         case ESimUiState.SETUP_FINISH:
@@ -232,7 +232,7 @@ cr.define('cellular_setup', function() {
             skipDiscovery: cellularSetup.ButtonState.HIDDEN,
           };
           break;
-        case ESimUiState.MULTI_PROFILE_SELECTION:
+        case ESimUiState.PROFILE_SELECTION:
           buttonState = {
             backward: cellularSetup.ButtonState.HIDDEN,
             cancel: this.delegate.shouldShowCancelButton() ?
@@ -273,17 +273,16 @@ cr.define('cellular_setup', function() {
     },
 
     /** @private */
-    onSelectedProfilesChanged_() {
-      if (this.selectedProfiles_.length > 0) {
+    onSelectedProfileChanged_() {
+      if (this.selectedProfile_) {
         this.set('buttonState.skipDiscovery', cellularSetup.ButtonState.HIDDEN);
-        // TODO(crbug.com/1093185): Install the profiles when 'Done' is pressed.
         this.set(
-            'buttonState.done', cellularSetup.ButtonState.SHOWN_AND_ENABLED);
+            'buttonState.next', cellularSetup.ButtonState.SHOWN_AND_ENABLED);
       } else {
         this.set(
             'buttonState.skipDiscovery',
             cellularSetup.ButtonState.SHOWN_AND_ENABLED);
-        this.set('buttonState.done', cellularSetup.ButtonState.HIDDEN);
+        this.set('buttonState.next', cellularSetup.ButtonState.HIDDEN);
       }
     },
 
@@ -297,8 +296,13 @@ cr.define('cellular_setup', function() {
                   this.activationCode_, /*confirmationCode=*/ '')
               .then(this.handleProfileInstallResponse_.bind(this));
           break;
-        case ESimUiState.MULTI_PROFILE_SELECTION:
-          this.state_ = ESimUiState.ACTIVATION_CODE_ENTRY;
+        case ESimUiState.PROFILE_SELECTION:
+          if (this.selectedProfile_) {
+            this.selectedProfile_.installProfile('').then(
+                this.handleProfileInstallResponse_.bind(this));
+          } else {
+            this.state_ = ESimUiState.ACTIVATION_CODE_ENTRY;
+          }
           break;
         default:
           assertNotReached();
@@ -313,6 +317,11 @@ cr.define('cellular_setup', function() {
       // TODO(crbug.com/1093185): Handle state when camera is used
       return false;
     },
+
+    /** @private */
+    getShowNoProfilesMessage_() {
+      return !(this.pendingProfiles_ && this.pendingProfiles_.length > 0);
+    },
   });
 
   // #cr_define_end

ui/webui/resources/cr_components/chromeos/cellular_setup/final_page.js

@@ -21,6 +21,12 @@ Polymer({
      * @type {boolean}
      */
     showError: Boolean,
+
+    /** @type {string} */
+    message: String,
+
+    /** @type {string} */
+    errorMessage: String,
   },
 
   /**
@@ -42,8 +48,7 @@ Polymer({
    * @private
    */
   getMessage_(showError) {
-    return showError ? this.i18n('finalPageErrorMessage') :
-                       this.i18n('finalPageMessage');
+    return showError ? this.errorMessage : this.message;
   },
 
   /**

ui/webui/resources/cr_components/chromeos/cellular_setup/profile_discovery_list_page.html

@@ -35,16 +35,15 @@
         <div id="container" class="layout vertical flex" scrollable>
           <iron-list id="profileList" items="[[pendingProfiles]]"
               scroll-target="container" selection-enabled
-              preserve-focus multi-selection
-              selected-items="{{selectedProfiles}}"
-              role="listbox"
-              aria-multiselectable="true">
+              preserve-focus
+              selected-item="{{selectedProfile}}"
+              role="listbox">
             <template>
               <profile-discovery-list-item profile="[[item]]"
-                  selected="[[isProfileSelected_(item, selectedProfiles.length)]]"
+                  selected="[[isProfileSelected_(item, selectedProfile)]]"
                   tabindex="0"
                   role="option"
-                  aria-selected="[[isProfileSelected_(item, selectedProfiles.length)]]">
+                  aria-selected="[[isProfileSelected_(item, selectedProfile)]]">
               </profile-discovery-list-item>
             </template>
           </iron-list>

ui/webui/resources/cr_components/chromeos/cellular_setup/profile_discovery_list_page.js

@@ -22,11 +22,11 @@ Polymer({
     },
 
     /**
-     * @type {Array<!chromeos.cellularSetup.mojom.ESimProfileRemote>}
+     * @type {?chromeos.cellularSetup.mojom.ESimProfileRemote}
      * @private
      */
-    selectedProfiles: {
-      type: Array,
+    selectedProfile: {
+      type: Object,
       notify: true,
     },
   },
@@ -36,6 +36,6 @@ Polymer({
    * @private
    */
   isProfileSelected_(profile) {
-    return this.selectedProfiles.some(p => p === profile);
+    return this.selectedProfile === profile;
   }
 });

ui/webui/resources/cr_components/chromeos/cellular_setup/psim_flow_ui.html

@@ -38,7 +38,9 @@
       </provisioning-page>
       <final-page id="finalPage"
           delegate="[[delegate]]"
-          show-error="[[showError_]]">
+          show-error="[[showError_]]"
+          message="[[i18n('finalPageMessage')]]"
+          error-message="[[i18n('finalPageErrorMessage')]]">
       </final-page>
     </iron-pages>
   </template>