[CrOS cellular] Add error message to rename profile dialog

- Before this CL, when rename fails the user is not shown any
  meaningful message, this CL shows the user a meaningful message.

Screenshot - https://screenshot.googleplex.com/4hCHuSsvU3fdHL9.png

Bug: 1154787
Change-Id: I82a164b062affa5fad686b72fdd56c2ea17b48f6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2600236
Commit-Queue: Nnamdi Theodore Johnson-kanu <tjohnsonkanu@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#839063}

chrome/app/os_settings_strings.grdp

@@ -2196,6 +2196,9 @@ Press an assigned switch to remove assignment.
   <message name="IDS_SETTINGS_INTERNET_NETWORK_RENAME_DIALOG_RENAME_PROFILE" desc="Settings > Internet > Network details > Rename profile dialog: Label for the dialog informing the user to rename an eSIM cellular network">
     Rename Profile
   </message>
+  <message name="IDS_SETTINGS_INTERNET_NETWORK_RENAME_DIALOG_ERROR_MESSAGE" desc="Settings > Internet > Network details > Rename eSIM cellular profile dialog: Error message shown when rename fails">
+    Profile could not be renamed. Please try again or contact your carrier for technical support.
+  </message>
   <message name="IDS_SETTINGS_INTERNET_NETWORK_RENAME_DIALOG_DONE" desc="Settings > Internet > Network details >Rename profile dialog: The Label for the dialog done button to rename an eSIM cellular network">
     Done
   </message>
@@ -2208,7 +2211,7 @@ Press an assigned switch to remove assignment.
   <message name="IDS_SETTINGS_INTERNET_NETWORK_REMOVE_PROFILE_DIALOG_CANCEL" desc="Settings > Internet > Network details >Remove profile dialog: The Label for the dialog cancel button to remove an eSIM cellular network">
     Cancel
   </message>
-  <message name="IDS_SETTINGS_INTERNET_NETWORK_REMOVE_PROFILE_DIALOG_REMOVE" desc="Settings > Internet > Network details >ReMOVE profile dialog: The Label for the dialog remove button to remove an eSIM cellular network">
+  <message name="IDS_SETTINGS_INTERNET_NETWORK_REMOVE_PROFILE_DIALOG_REMOVE" desc="Settings > Internet > Network details > Remove profile dialog: The Label for the dialog remove button to remove an eSIM cellular network">
     Remove
   </message>
   <message name="IDS_SETTINGS_INTERNET_BUTTON_ACTIVATE" desc="Settings > Internet > Network details: The label for the button to activate a Cellular network.">

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_NETWORK_RENAME_DIALOG_ERROR_MESSAGE.png.sha1

+91e9a55ef6ae4085c6332bcfac5c284041b8f462
\ No newline at end of file

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

@@ -20,17 +20,27 @@
     <cr-dialog id="profileRenameDialog" show-on-attach>
       <div slot="title">$i18n{eSimRenameProfileDialogLabel}</div>
       <div slot="body">
-        <cr-input value="{{esimProfileName_}}"
-            id="eSimprofileName"
+        <template is="dom-if" if="[[!errorMessage_]]" restamp>
+          <cr-input id="eSimprofileName"
+              value="{{esimProfileName_}}"
               spellcheck="false">
-        </cr-button>
+          </cr-input>
+        </template>
+        <div id="errorMessage" hidden$="[[!errorMessage_]]">
+          [[errorMessage_]]
+        </div>
       </div>
       <div slot="button-container">
-        <cr-button id="cancel" on-click="onCancelTap_"
+        <template is="dom-if" if="[[!errorMessage_]]" restamp>
+          <cr-button id="cancel"
+              on-click="onCancelTap_"
               class="cancel-button">
             $i18n{eSimRenameProfileDialogCancel}
           </cr-button>
-        <cr-button id="done" on-click="onRenameDialogDoneTap_"
+        </template>
+        <cr-button id="done"
+            on-click="onRenameDialogDoneTap_"
+            disabled="[[isRenameInProgress_]]"
             class="action-button">
           $i18n{eSimRenameProfileDialogDone}
         </cr-button>

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

@@ -14,16 +14,28 @@ Polymer({
   ],
 
   properties: {
+    /** @type {string} */
+    iccid: {
+      type: String,
+      value: '',
+    },
+
     /** @private {string} */
     esimProfileName_: {
       type: String,
       value: '',
     },
 
-    /** @type {string} */
-    iccid: {
+    /** @private {string} */
+    errorMessage_: {
       type: String,
       value: '',
+    },
+
+    /** @private {boolean} */
+    isRenameInProgress_: {
+      type: Boolean,
+      value: false,
     }
   },
 
@@ -83,18 +95,33 @@ Polymer({
    * @private
    */
   async onRenameDialogDoneTap_(event) {
+    if (this.errorMessage_) {
+      this.$.profileRenameDialog.close();
+      return;
+    }
+
+    this.isRenameInProgress_ = true;
+
     // The C++ layer uses base::string16, which use 16 bit characters. JS
     // strings support either 8 or 16 bit characters, and must be converted
     // to an array of 16 bit character codes that match base::string16.
     const name = {data: Array.from(this.esimProfileName_, c => c.charCodeAt())};
-    const response = await this.esimProfileRemote_.setProfileNickname(name);
-    if (response.result ===
-        chromeos.cellularSetup.mojom.ESimOperationResult.kFailure) {
-      console.error(
-          'Unable to update profile Nickname: ' + this.esimProfileName_);
-      // TODO(crbug.com/1093185): Show useful error to user when rename fails
-    }
 
+    this.esimProfileRemote_.setProfileNickname(name).then(response => {
+      this.handleSetProfileNicknameResponse_(response.result);
+    });
+  },
+
+  /**
+   * @param {chromeos.cellularSetup.mojom.ESimOperationResult} result
+   * @private
+   */
+  handleSetProfileNicknameResponse_(result) {
+    this.isRenameInProgress_ = false;
+    if (result === chromeos.cellularSetup.mojom.ESimOperationResult.kFailure) {
+      this.errorMessage_ = this.i18n('eSimRenameProfileDialogError');
+      return;
+    }
     this.$.profileRenameDialog.close();
   },
 
@@ -104,5 +131,5 @@ Polymer({
    */
   onCancelTap_(event) {
     this.$.profileRenameDialog.close();
-  }
+  },
 });

chrome/browser/ui/webui/settings/chromeos/internet_section.cc

@@ -714,6 +714,8 @@ void InternetSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
        IDS_SETTINGS_INTERNET_NETWORK_RENAME_DIALOG_DONE},
       {"eSimRenameProfileDialogCancel",
        IDS_SETTINGS_INTERNET_NETWORK_RENAME_DIALOG_CANCEL},
+      {"eSimRenameProfileDialogError",
+       IDS_SETTINGS_INTERNET_NETWORK_RENAME_DIALOG_ERROR_MESSAGE},
       {"eSimRemoveProfileDialogCancel",
        IDS_SETTINGS_INTERNET_NETWORK_REMOVE_PROFILE_DIALOG_CANCEL},
       {"esimRemoveProfileDialogTitle",

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

@@ -59,8 +59,15 @@ cr.define('cellular_setup', function() {
     }
 
     /**
-     * @private
+     * @param {chromeos.cellularSetup.mojom.ESimOperationResult} result
+     */
+    setEsimOperationResultForTest(result) {
+      this.esimOperationResult_ = result;
+    }
+
+    /**
      * @param {string} string
+     * @private
      */
     stringToCharCodeArray_(string) {
       const res = [];
@@ -70,6 +77,20 @@ cr.define('cellular_setup', function() {
       return res;
     }
 
+    /**
+     * @return {Object}
+     * @private
+     */
+    deferedPromise_() {
+      let deferred = {};
+      let promise = new Promise(function(resolve, reject) {
+        deferred.resolve = resolve;
+        deferred.reject = reject;
+      });
+      deferred.promise = promise;
+      return deferred;
+    }
+
     /**
      * @override
      * @param {?mojoBase.mojom.String16} nickname
@@ -77,11 +98,22 @@ cr.define('cellular_setup', function() {
      *     chromeos.cellularSetup.mojom.ESimOperationResult},}>}
      */
     setProfileNickname(nickname) {
+      if (!this.esimOperationResult_ ||
+          this.esimOperationResult_ ===
+              chromeos.cellularSetup.mojom.ESimOperationResult.kSuccess) {
         this.properties_.nickname = nickname;
-      return new Promise((res) => {
-        res({
-          result: chromeos.cellularSetup.mojom.ESimOperationResult.kSuccess
-        });
+      }
+
+      this.deferredSetProfileNicknamePromise_ = this.deferedPromise_();
+      return this.deferredSetProfileNicknamePromise_.promise;
+    }
+
+    /** @private */
+    resolveSetProfileNicknamePromise_() {
+      this.deferredSetProfileNicknamePromise_.resolve({
+        result: this.esimOperationResult_ ?
+            this.esimOperationResult_ :
+            chromeos.cellularSetup.mojom.ESimOperationResult.kSuccess
       });
     }
 

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

@@ -80,4 +80,53 @@ suite('EsimRenameDialog', function() {
           'new profile nickname');
     });
   });
+
+  test('Rename esim profile fails', async function() {
+    eSimManagerRemote.addEuiccForTest(1);
+    await flushAsync();
+    init('1');
+
+    return flushAsync().then(async () => {
+      const inputBox = esimRenameDialog.$$('#eSimprofileName');
+      assertTrue(!!inputBox);
+      const profileName = inputBox.value;
+
+      assertEquals(profileName, 'profile1');
+
+      assertEquals(
+          'none',
+          window.getComputedStyle(esimRenameDialog.$$('#errorMessage'))
+              .display);
+
+      const euicc = (await eSimManagerRemote.getAvailableEuiccs()).euiccs[0];
+      const profile = (await euicc.getProfileList()).profiles[0];
+
+      profile.setEsimOperationResultForTest(
+          chromeos.cellularSetup.mojom.ESimOperationResult.kFailure);
+
+      inputBox.value = 'new profile nickname';
+      await flushAsync();
+
+      const doneBtn = esimRenameDialog.$$('#done');
+      assertTrue(!!doneBtn);
+      assertFalse(doneBtn.disabled);
+      doneBtn.click();
+      await flushAsync();
+      assertTrue(doneBtn.disabled);
+
+      profile.resolveSetProfileNicknamePromise_();
+      await flushAsync();
+      assertFalse(doneBtn.disabled);
+
+      const profileProperties = (await profile.getProperties()).properties;
+
+      assertEquals(
+          'block',
+          window.getComputedStyle(esimRenameDialog.$$('#errorMessage'))
+              .display);
+      assertNotEquals(
+          convertString16ToJSString_(profileProperties.nickname),
+          'new profile nickname');
+    });
+  });
 });
\ No newline at end of file