[CrOS settings] Add rename profile dialog

- Adds a dialog which allows the user to rename an esim profile

screenshot: https://screenshot.googleplex.com/A6TtGk554XoETAr.png
Reference: https://docs.google.com/presentation/d/1Mfk5ZMEmeHwSbadUbyRU0Si5k6XDIvw-j4u7TUaCIGY/edit#slide=id.gac80715f79_2_7

Bug: 1093185
Change-Id: I60b6780c28c603db1a35fb65733919b03bf92dd3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2555470
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@{#833151}

chrome/app/os_settings_strings.grdp

@@ -2156,6 +2156,15 @@
   <message name="IDS_SETTINGS_INTERNET_NETWORK_MENU_RENAME" desc="Settings > Internet > Network details > Dot menu: Label for the button to rename an eSIM cellular network">
     Rename
   </message>
+  <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_DONE" desc="Settings > Internet > Network details >Rename profile dialog: The Label for the dialog done button to rename an eSIM cellular network">
+    Done
+  </message>
+  <message name="IDS_SETTINGS_INTERNET_NETWORK_RENAME_DIALOG_CANCEL" desc="Settings > Internet > Network details >Rename profile dialog: The Label for the dialog cancel button to rename an eSIM cellular network">
+    Cancel
+  </message>
   <message name="IDS_SETTINGS_INTERNET_BUTTON_ACTIVATE" desc="Settings > Internet > Network details: The label for the button to activate a Cellular network.">
     Activate
   </message>

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_NETWORK_RENAME_DIALOG_CANCEL.png.sha1

+ef26abd2aaab1cbe0943c1e379edfe1c08e76057
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_NETWORK_RENAME_DIALOG_DONE.png.sha1

+953871cb6bdea473b735a9ffb4254ae06ebea0d1
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_INTERNET_NETWORK_RENAME_DIALOG_RENAME_PROFILE.png.sha1

+953871cb6bdea473b735a9ffb4254ae06ebea0d1
\ No newline at end of file

chrome/browser/resources/settings/chromeos/BUILD.gn

@@ -307,6 +307,7 @@ preprocess_grit("preprocess_gen_v3") {
     "chromeos/deep_linking_behavior.m.js",
     "chromeos/google_assistant_page/google_assistant_browser_proxy.m.js",
     "chromeos/google_assistant_page/google_assistant_page.m.js",
+    "chromeos/internet_page/esim_rename_dialog.m.js",
     "chromeos/internet_page/cellular_networks_list.m.js",
     "chromeos/internet_page/cellular_eid_popup.m.js",
     "chromeos/internet_page/cellular_setup_dialog.m.js",
@@ -582,6 +583,8 @@ preprocess_grit("preprocess_v2") {
     "chromeos/google_assistant_page/google_assistant_browser_proxy.js",
     "chromeos/google_assistant_page/google_assistant_page.html",
     "chromeos/google_assistant_page/google_assistant_page.js",
+    "chromeos/internet_page/esim_rename_dialog.js",
+    "chromeos/internet_page/esim_rename_dialog.html",
     "chromeos/internet_page/cellular_networks_list.js",
     "chromeos/internet_page/cellular_networks_list.html",
     "chromeos/internet_page/cellular_eid_popup.html",

chrome/browser/resources/settings/chromeos/internet_page/BUILD.gn

@@ -11,6 +11,7 @@ js_type_check("closure_compile") {
     ":cellular_eid_popup",
     ":cellular_networks_list",
     ":cellular_setup_dialog",
+    ":esim_rename_dialog",
     ":internet_config",
     ":internet_detail_menu",
     ":internet_detail_page",
@@ -28,6 +29,7 @@ js_type_check("closure_compile") {
 js_library("internet_page") {
   deps = [
     ":cellular_setup_dialog",
+    ":esim_rename_dialog",
     ":internet_config",
     ":internet_page_browser_proxy",
     "..:deep_linking_behavior",
@@ -219,6 +221,16 @@ js_library("cellular_eid_popup") {
   deps = [ "//ui/webui/resources/js:i18n_behavior" ]
 }
 
+js_library("esim_rename_dialog") {
+  deps = [
+    "//ui/webui/resources/cr_components/chromeos/cellular_setup:mojo_interface_provider",
+    "//ui/webui/resources/cr_components/chromeos/network:mojo_interface_provider",
+    "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog",
+    "//ui/webui/resources/cr_elements/cr_input:cr_input",
+    "//ui/webui/resources/js:i18n_behavior",
+  ]
+}
+
 # TODO: Uncomment as the Polymer3 migration makes progress.
 js_type_check("closure_compile_module") {
   is_polymer3 = true
@@ -227,6 +239,7 @@ js_type_check("closure_compile_module") {
     ":cellular_networks_list.m",
     ":cellular_setup_dialog.m",
     ":cellular_setup_settings_delegate.m",
+    ":esim_rename_dialog.m",
     ":internet_config.m",
     ":internet_detail_menu.m",
     ":internet_detail_page.m",
@@ -353,6 +366,7 @@ js_library("internet_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/internet_page/internet_page.m.js" ]
   deps = [
     ":cellular_setup_dialog.m",
+    ":esim_rename_dialog.m",
     ":internet_config.m",
     ":internet_detail_page.m",
     ":internet_known_networks_page.m",
@@ -517,6 +531,18 @@ js_library("cellular_eid_popup.m") {
   extra_deps = [ ":cellular_eid_popup_module" ]
 }
 
+js_library("esim_rename_dialog.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/internet_page/esim_rename_dialog.m.js" ]
+  deps = [
+    "//ui/webui/resources/cr_components/chromeos/cellular_setup:mojo_interface_provider.m",
+    "//ui/webui/resources/cr_components/chromeos/network:mojo_interface_provider.m",
+    "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
+    "//ui/webui/resources/cr_elements/cr_input:cr_input.m",
+    "//ui/webui/resources/js:i18n_behavior.m",
+  ]
+  extra_deps = [ ":esim_rename_dialog_module" ]
+}
+
 import("//tools/polymer/polymer.gni")
 
 group("polymer3_elements") {
@@ -524,6 +550,7 @@ group("polymer3_elements") {
     ":cellular_eid_popup_module",
     ":cellular_networks_list_module",
     ":cellular_setup_dialog_module",
+    ":esim_rename_dialog_module",
     ":internet_config_module",
     ":internet_detail_menu_module",
     ":internet_detail_page_module",
@@ -650,6 +677,14 @@ polymer_modulizer("cellular_eid_popup") {
   namespace_rewrites = os_settings_namespace_rewrites
 }
 
+polymer_modulizer("esim_rename_dialog") {
+  js_file = "esim_rename_dialog.js"
+  html_file = "esim_rename_dialog.html"
+  html_type = "dom-module"
+  auto_imports = os_settings_auto_imports
+  namespace_rewrites = os_settings_namespace_rewrites
+}
+
 js_modulizer("modulize") {
   input_files = [
     "internet_page_browser_proxy.js",

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_components/chromeos/cellular_setup/mojo_interface_provider.html">
+<link rel="import" href="chrome://resources/cr_components/chromeos/network/mojo_interface_provider.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+
+<dom-module id="esim-rename-dialog">
+  <template>
+    <style>
+      #cancel {
+        margin-inline-end: 8px;
+      }
+    </style>
+    <cr-dialog id="profileRenameDialog" show-on-attach>
+      <div slot="title">$i18n{eSimRenameProfileDialogLabel}</div>
+      <div slot="body">
+        <cr-input value="{{esimProfileName_}}"
+            spellcheck="false">
+        </cr-button>
+      </div>
+      <div slot="button-container">
+        <cr-button id="cancel" on-click="onCancelTap_"
+            class="cancel-button">
+          $i18n{eSimRenameProfileDialogCancel}
+        </cr-button>
+        <cr-button id="done" on-click="onRenameDialogDoneTap_"
+            class="action-button">
+          $i18n{eSimRenameProfileDialogDone}
+        </cr-button>
+      </div>
+    </cr-dialog>
+  </template>
+  <script src="esim_rename_dialog.js"></script>
+</dom-module>
\ No newline at end of file

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

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview Polymer element to rename eSIM profile name
+ */
+
+Polymer({
+  is: 'esim-rename-dialog',
+
+  behaviors: [
+    I18nBehavior,
+  ],
+
+  properties: {
+    /** @private {string} */
+    esimProfileName_: {
+      type: String,
+      value: '',
+    },
+
+    /** @type {string} */
+    iccid: {
+      type: String,
+      value: '',
+    }
+  },
+
+  /**
+   * Provides an interface to the ESimManager Mojo service.
+   * @private {?chromeos.cellularSetup.mojom.ESimManagerRemote}
+   */
+  eSimManagerRemote_: null,
+
+  /** @private {?chromeos.networkConfig.mojom.CrosNetworkConfigRemote} */
+  networkConfig_: null,
+
+  /** @private {?chromeos.cellularSetup.mojom.ESimProfileRemote} */
+  esimProfileRemote_: null,
+
+  /** @override */
+  created() {
+    this.eSimManagerRemote_ = cellular_setup.getESimManagerRemote();
+    this.networkConfig_ = network_config.MojoInterfaceProviderImpl.getInstance()
+                              .getMojoServiceRemote();
+    this.init_();
+  },
+
+  /** @private */
+  async init_() {
+    const response = await this.eSimManagerRemote_.getAvailableEuiccs();
+    const euicc = response.euiccs[0];
+
+    const esimProfilesRemotes = await euicc.getProfileList();
+
+    for (const profileRemote of esimProfilesRemotes.profiles) {
+      const profileProperties = await profileRemote.getProperties();
+
+      if (profileProperties.properties.iccid !== this.iccid) {
+        continue;
+      }
+
+      this.esimProfileRemote_ = profileRemote;
+      this.esimProfileName_ = profileProperties.properties.nickname ?
+          this.convertString16ToJSString_(
+              profileProperties.properties.nickname) :
+          this.convertString16ToJSString_(profileProperties.properties.name);
+    }
+  },
+
+  /**
+   * Converts a mojoBase.mojom.String16 to a JavaScript String.
+   * @param {?mojoBase.mojom.String16} str
+   * @return {string}
+   */
+  convertString16ToJSString_(str) {
+    return str.data.map(ch => String.fromCodePoint(ch)).join('');
+  },
+
+  /**
+   * @param {Event} event
+   * @private
+   */
+  async onRenameDialogDoneTap_(event) {
+    // 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.$.profileRenameDialog.close();
+  },
+
+  /**
+   * @param {Event} event
+   * @private
+   */
+  onCancelTap_(event) {
+    this.$.profileRenameDialog.close();
+  }
+});

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

@@ -24,7 +24,7 @@
         margin: 6px 0 0 0;
       }
     </style>
-    <template is="dom-if" if="[[showDotsButton_]]">
+    <template is="dom-if" if="[[shouldShowDotsMenuButton_(iccid_)]]">
       <cr-icon-button class="icon-more-vert"
           title="$i18n{moreActions}"
           id="moreNetworkDetail"
@@ -35,6 +35,7 @@
       <template>
         <cr-action-menu role-description="$i18n{menu}">
           <button class="dropdown-item"
+              on-click="onRenameESimProfileTap_"
               role="menuitem"
               title="$i18n{networkDetailMenuRenameESim}">
             $i18n{networkDetailMenuRenameESim}

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

@@ -16,14 +16,10 @@ Polymer({
   ],
 
   properties: {
-    /**
-     * Set in currentRouteChanged() if the network's GUID corresponds
-     * with a Cellular eSIM network.
-     * @private
-     */
-    showDotsButton_: {
-      type: Boolean,
-      value: false,
+    /** @private */
+    iccid_: {
+      type: String,
+      value: '',
     },
   },
 
@@ -34,7 +30,6 @@ Polymer({
    * @protected
    */
   currentRouteChanged(route, oldRoute) {
-    this.showDotsButton_ = false;
     if (route !== settings.routes.NETWORK_DETAIL ||
         !loadTimeData.getBoolean('updatedCellularActivationUi')) {
       return;
@@ -53,10 +48,28 @@ Polymer({
     const networkConfig = network_config.MojoInterfaceProviderImpl.getInstance()
                               .getMojoServiceRemote();
     networkConfig.getNetworkState(guid).then(response => {
-      // TODO(crbug.com/1093185): Add check for specifically eSIM when cellular
-      // has an EID property.
-      this.showDotsButton_ = response.result.type ===
-          chromeos.networkConfig.mojom.NetworkType.kCellular;
+      // TODO(crbug.com/1093185): Add check for specifically eSIM when
+      // cellular has an EID property.
+      if (response.result.type !==
+          chromeos.networkConfig.mojom.NetworkType.kCellular) {
+        return;
+      }
+      this.setESimIccid_(networkConfig, guid);
+    });
+  },
+
+  /**
+   * @param {!chromeos.networkConfig.mojom.CrosNetworkConfigRemote}
+   *     networkConfig
+   * @param {string} guid
+   * @private
+   */
+  setESimIccid_(networkConfig, guid) {
+    networkConfig.getManagedProperties(guid).then(response => {
+      const managedProperty = response.result;
+      if (managedProperty.typeProperties.cellular.iccid) {
+        this.iccid_ = managedProperty.typeProperties.cellular.iccid;
+      }
     });
   },
 
@@ -68,4 +81,20 @@ Polymer({
     const menu = /** @type {!CrActionMenuElement} */ (this.$.menu.get());
     menu.showAt(/** @type {!Element} */ (e.target));
   },
+
+  /**
+   * @returns {boolean}
+   * @private
+   */
+  shouldShowDotsMenuButton_() {
+    return !!this.iccid_;
+  },
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onRenameESimProfileTap_(e) {
+    this.fire('show-esim-profile-rename-dialog', {iccid: this.iccid_});
+  }
 });
\ No newline at end of file

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

@@ -28,6 +28,7 @@
 <link rel="import" href="internet_page_browser_proxy.html">
 <link rel="import" href="internet_subpage.html">
 <link rel="import" href="network_summary.html">
+<link rel="import" href="esim_rename_dialog.html">
 
 <dom-module id="settings-internet-page">
   <template>
@@ -114,7 +115,8 @@
 
       <template is="dom-if" route-path="/networkDetail" no-search restamp>
         <settings-subpage page-title="$i18n{internetDetailPageTitle}">
-          <settings-internet-detail-menu slot="subpage-title-extra">
+          <settings-internet-detail-menu
+              slot="subpage-title-extra">
           </settings-internet-detail-menu>
           <settings-internet-detail-page prefs="{{prefs}}"
               default-network="[[defaultNetwork]]"
@@ -160,6 +162,13 @@
           page-name="[[cellularSetupDialogPageName_]]">
       </os-settings-cellular-setup-dialog>
     </template>
+
+    <template is="dom-if" if="[[showESimProfileRenameDialog_]]" restamp>
+      <esim-rename-dialog id="esimRenameDialog"
+          on-close="onCloseESimProfileRenameDialog_"
+          iccid="[[esimProfileIccid_]]">
+      </esim-rename-dialog>
+    </template>
   </template>
   <script src="internet_page.js"></script>
 </dom-module>

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

@@ -131,6 +131,21 @@ Polymer({
      */
     cellularSetupDialogPageName_: String,
 
+    /** @private {boolean} */
+    showESimProfileRenameDialog_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * Iccid of an esim profile, used in internet detail menu.
+     * @private {string}
+     */
+    esimProfileIccid_: {
+      type: String,
+      value: '',
+    },
+
     /** @private {!Map<string, Element>} */
     focusConfig_: {
       type: Object,
@@ -167,6 +182,7 @@ Polymer({
     'show-detail': 'onShowDetail_',
     'show-known-networks': 'onShowKnownNetworks_',
     'show-networks': 'onShowNetworks_',
+    'show-esim-profile-rename-dialog': 'onShowESimProfileRenameDialog_',
   },
 
   /** @private  {?settings.InternetPageBrowserProxy} */
@@ -381,6 +397,20 @@ Polymer({
         settings.routes.NETWORK_DETAIL, params);
   },
 
+  /**
+   * @param {!CustomEvent<!{iccid: string}>} event
+   * @private
+   */
+  onShowESimProfileRenameDialog_(event) {
+    this.esimProfileIccid_ = event.detail.iccid;
+    this.showESimProfileRenameDialog_ = true;
+  },
+
+  /** @private */
+  onCloseESimProfileRenameDialog_() {
+    this.showESimProfileRenameDialog_ = false;
+  },
+
   /**
    * @param {!CustomEvent<chromeos.networkConfig.mojom.NetworkType>} event
    * @private

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

@@ -707,6 +707,12 @@ void InternetSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
       {"eidPopupDescription", IDS_SETTINGS_INTERNET_EID_POPUP_DESCRIPTION},
       {"closeEidPopupButtonLabel",
        IDS_SETTINGS_INTERNET_CLOSE_EID_POPUP_BUTTON_LABEL},
+      {"eSimRenameProfileDialogLabel",
+       IDS_SETTINGS_INTERNET_NETWORK_RENAME_DIALOG_RENAME_PROFILE},
+      {"eSimRenameProfileDialogDone",
+       IDS_SETTINGS_INTERNET_NETWORK_RENAME_DIALOG_DONE},
+      {"eSimRenameProfileDialogCancel",
+       IDS_SETTINGS_INTERNET_NETWORK_RENAME_DIALOG_CANCEL},
   };
   AddLocalizedStringsBulk(html_source, kLocalizedStrings);