[CrOS Settings] Add dynamic 'Forward' button label to button_bar.

Update 'Forward' button to have a dynamic label. Remove 'Done' and
'Skip Discovery' buttons and replace instances with 'Forward' button.

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

chrome/app/chromeos_strings.grdp

@@ -267,6 +267,9 @@
   <message name="IDS_CELLULAR_SETUP_SKIP_DISCOVERY_LABEL" desc="Label for button that skips the multiple profile selection step and sets up a new profile during eSIM cellular setup">
     Skip &amp; Set up new profile
   </message>
+  <message name="IDS_CELLULAR_SETUP_CONFIRM_LABEL" desc="Label for button that verifies the confirmation code entered during cellular setup">
+    Confirm
+  </message>
   <message name="IDS_CELLULAR_SETUP_ESIM_PAGE_ACTIVATION_CODE" desc="Label for activation code input box">
     Activation code
   </message>

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_CONFIRM_LABEL.png.sha1

+e233dccc6953231ac3359a0af5186962e5913311
\ No newline at end of file

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

@@ -33,6 +33,7 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
     {"next", IDS_CELLULAR_SETUP_NEXT_LABEL},
     {"tryAgain", IDS_CELLULAR_SETUP_TRY_AGAIN_LABEL},
     {"skipDiscovery", IDS_CELLULAR_SETUP_SKIP_DISCOVERY_LABEL},
+    {"confirm", IDS_CELLULAR_SETUP_CONFIRM_LABEL},
     {"simDetectPageTitle", IDS_CELLULAR_SETUP_SIM_DETECT_PAGE_TITLE},
     {"simDetectPageErrorTitle", IDS_CELLULAR_SETUP_SIM_DETECT_PAGE_ERROR_TITLE},
     {"simDetectPageErrorMessage",

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

@@ -33,8 +33,6 @@ suite('CellularSetupButtonBarTest', function() {
       cancel: state,
       forward: state,
       tryAgain: state,
-      done: state,
-      skipDiscovery: state,
     };
     Polymer.dom.flush();
   }
@@ -69,8 +67,6 @@ suite('CellularSetupButtonBarTest', function() {
     assertTrue(isButtonShownAndEnabled(buttonBar.$$('#cancel')));
     assertTrue(isButtonShownAndEnabled(buttonBar.$$('#tryAgain')));
     assertTrue(isButtonShownAndEnabled(buttonBar.$$('#forward')));
-    assertTrue(isButtonShownAndEnabled(buttonBar.$$('#done')));
-    assertTrue(isButtonShownAndEnabled(buttonBar.$$('#skipDiscovery')));
   });
 
   test('individual buttons appear but are diabled', function() {
@@ -79,8 +75,6 @@ suite('CellularSetupButtonBarTest', function() {
     assertTrue(isButtonShownAndDisabled(buttonBar.$$('#cancel')));
     assertTrue(isButtonShownAndDisabled(buttonBar.$$('#tryAgain')));
     assertTrue(isButtonShownAndDisabled(buttonBar.$$('#forward')));
-    assertTrue(isButtonShownAndDisabled(buttonBar.$$('#done')));
-    assertTrue(isButtonShownAndDisabled(buttonBar.$$('#skipDiscovery')));
   });
 
   test('individual buttons are hidden', function() {
@@ -89,7 +83,5 @@ suite('CellularSetupButtonBarTest', function() {
     assertTrue(isButtonHidden(buttonBar.$$('#cancel')));
     assertTrue(isButtonHidden(buttonBar.$$('#tryAgain')));
     assertTrue(isButtonHidden(buttonBar.$$('#forward')));
-    assertTrue(isButtonHidden(buttonBar.$$('#done')));
-    assertTrue(isButtonHidden(buttonBar.$$('#skipDiscovery')));
   });
 });

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

@@ -282,8 +282,7 @@ suite('CrComponentsEsimFlowUiTest', function() {
     test('Skip discovery flow', async function() {
       // Simulate pressing 'Skip'.
       assertTrue(
-          eSimPage.buttonState.skipDiscovery ===
-          cellularSetup.ButtonState.ENABLED);
+          eSimPage.buttonState.forward === cellularSetup.ButtonState.ENABLED);
       eSimPage.navigateForward();
       Polymer.dom.flush();
 
@@ -313,7 +312,6 @@ suite('CrComponentsEsimFlowUiTest', function() {
       // The 'Forward' button should now be enabled.
       assertTrue(
           eSimPage.buttonState.forward === cellularSetup.ButtonState.ENABLED);
-      assertFalse(!!eSimPage.buttonState.skipDiscovery);
 
       // Simulate pressing 'Forward'.
       eSimPage.navigateForward();
@@ -339,7 +337,6 @@ suite('CrComponentsEsimFlowUiTest', function() {
       // The 'Forward' button should now be enabled.
       assertTrue(
           eSimPage.buttonState.forward === cellularSetup.ButtonState.ENABLED);
-      assertFalse(!!eSimPage.buttonState.skipDiscovery);
 
       // Simulate pressing 'Forward'.
       eSimPage.navigateForward();

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

@@ -44,26 +44,12 @@
         hidden$="[[isButtonHidden_(Button.TRY_AGAIN, buttonState.*)]]">
       [[i18n('tryAgain')]]
     </cr-button>
-    <cr-button id="done"
-        class="action-button"
-        on-click="onDoneButtonClicked_"
-        disabled="[[isButtonDisabled_(Button.DONE, buttonState.*)]]"
-        hidden$="[[isButtonHidden_(Button.DONE, buttonState.*)]]">
-      [[i18n('done')]]
-    </cr-button>
-    <cr-button id="skipDiscovery"
-        class="action-button"
-        on-click="onNextButtonClicked_"
-        disabled="[[isButtonDisabled_(Button.SKIP_DISCOVERY, buttonState.*)]]"
-        hidden$="[[isButtonHidden_(Button.SKIP_DISCOVERY, buttonState.*)]]">
-      [[i18n('skipDiscovery')]]
-    </cr-button>
     <cr-button id="forward"
         class="action-button"
         on-click="onForwardButtonClicked_"
         disabled="[[isButtonDisabled_(Button.FORWARD, buttonState.*)]]"
         hidden$="[[isButtonHidden_(Button.FORWARD, buttonState.*)]]">
-      [[i18n('next')]]
+      [[forwardButtonLabel]]
     </cr-button>
   </template>
   <script src="button_bar.js"></script>

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

@@ -24,6 +24,11 @@ Polymer({
       type: Object,
       value: cellularSetup.Button,
     },
+
+    forwardButtonLabel: {
+      type: String,
+      value: '',
+    }
   },
 
   /**
@@ -60,11 +65,6 @@ Polymer({
     this.fire('retry-requested');
   },
 
-  /** @private */
-  onDoneButtonClicked_() {
-    this.fire('complete-flow-requested');
-  },
-
   /** @private */
   onForwardButtonClicked_() {
     this.fire('forward-nav-requested');
@@ -82,14 +82,10 @@ Polymer({
         return this.buttonState.backward;
       case cellularSetup.Button.CANCEL:
         return this.buttonState.cancel;
-      case cellularSetup.Button.DONE:
-        return this.buttonState.done;
       case cellularSetup.Button.FORWARD:
         return this.buttonState.forward;
       case cellularSetup.Button.TRY_AGAIN:
         return this.buttonState.tryAgain;
-      case cellularSetup.Button.SKIP_DISCOVERY:
-        return this.buttonState.skipDiscovery;
       default:
         assertNotReached();
         return cellularSetup.ButtonState.ENABLED;

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

@@ -17,7 +17,8 @@
       <setup-selection-flow
           selected-page="{{selectedFlow_}}"
           button-state="{{buttonState_}}"
-          id="setup-selection-flow">
+          id="setup-selection-flow"
+          forward-button-label="{{forwardButtonLabel_}}">
       </setup-selection-flow>
       <template is="dom-if"
           if="[[isPSimSelected_(currentPageName)]]" restamp>
@@ -25,7 +26,8 @@
             button-state="{{buttonState_}}"
             name-of-carrier-pending-setup="{{flowTitle}}"
             delegate="[[delegate]]"
-            id="psim-flow-ui">
+            id="psim-flow-ui"
+            forward-button-label="{{forwardButtonLabel_}}">
         </psim-flow-ui>
       </template>
       <template is="dom-if"
@@ -33,11 +35,14 @@
         <esim-flow-ui
             button-state="{{buttonState_}}"
             delegate="[[delegate]]"
-            id="esim-flow-ui">
+            id="esim-flow-ui"
+            forward-button-label="{{forwardButtonLabel_}}">
         </esim-flow-ui>
       </template>
     </iron-pages>
-    <button-bar button-state="[[buttonState_]]">
+    <button-bar
+        button-state="[[buttonState_]]"
+        forward-button-label="[[forwardButtonLabel_]]">
     </button-bar>
   </template>
   <script src="cellular_setup.js"></script>

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

@@ -57,12 +57,19 @@ Polymer({
       type: Object,
       observer: 'onPageChange_',
     },
+
+    /**
+     * Text for the button_bar's 'Forward' button.
+     * @private {string}
+     */
+    forwardButtonLabel_: {
+      type: String,
+    }
   },
 
   listeners: {
     'backward-nav-requested': 'onBackwardNavRequested_',
     'retry-requested': 'onRetryRequested_',
-    'complete-flow-requested': 'onCompleteFlowRequested_',
     'forward-nav-requested': 'onForwardNavRequested_',
     'cancel-requested': 'onCancelRequested_',
   },
@@ -97,11 +104,6 @@ Polymer({
     // TODO(crbug.com/1093185): Add try again logic.
   },
 
-  /** @private */
-  onCompleteFlowRequested_() {
-    // TODO(crbug.com/1093185): Add completion logic.
-  },
-
   /** @private */
   onForwardNavRequested_() {
     // Switch current page to user selected flow when navigating forward from

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

@@ -23,20 +23,16 @@ cr.define('cellularSetup', function() {
   /* #export */ const Button = {
     BACKWARD: 1,
     CANCEL: 2,
-    DONE: 3,
-    FORWARD: 4,
-    TRY_AGAIN: 5,
-    SKIP_DISCOVERY: 6,
+    FORWARD: 3,
+    TRY_AGAIN: 4,
   };
 
   /**
    * @typedef {{
    *   backward: (!cellularSetup.ButtonState|undefined),
    *   cancel: (!cellularSetup.ButtonState|undefined),
-   *   done: (!cellularSetup.ButtonState|undefined),
    *   forward: (!cellularSetup.ButtonState|undefined),
    *   tryAgain: (!cellularSetup.ButtonState|undefined),
-   *   skipDiscovery: (!cellularSetup.ButtonState|undefined),
    * }}
    */
   /* #export */ let ButtonBarState;

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

@@ -37,6 +37,11 @@ cr.define('cellular_setup', function() {
       /** @type {!cellular_setup.CellularSetupDelegate} */
       delegate: Object,
 
+      forwardButtonLabel: {
+        type: String,
+        notify: true,
+      },
+
       /**
        * @type {!cellular_setup.ESimUiState}
        * @private
@@ -230,6 +235,7 @@ cr.define('cellular_setup', function() {
       switch (this.state_) {
         case ESimUiState.PROFILE_SEARCH:
         case ESimUiState.ACTIVATION_CODE_ENTRY:
+          this.forwardButtonLabel = this.i18n('next');
           buttonState = {
             backward: cellularSetup.ButtonState.ENABLED,
             cancel: this.delegate.shouldShowCancelButton() ?
@@ -239,26 +245,28 @@ cr.define('cellular_setup', function() {
           };
           break;
         case ESimUiState.CONFIRMATION_CODE_ENTRY:
+          this.forwardButtonLabel = this.i18n('confirm');
           buttonState = {
             backward: cellularSetup.ButtonState.ENABLED,
             cancel: this.delegate.shouldShowCancelButton() ?
                 cellularSetup.ButtonState.ENABLED :
                 undefined,
-            // TODO(crbug.com/1093185) Add a "Confirm" button state.
             forward: cellularSetup.ButtonState.DISABLED,
           };
           break;
         case ESimUiState.PROFILE_SELECTION:
+          this.forwardButtonLabel = this.i18n('skipDiscovery');
           buttonState = {
             cancel: this.delegate.shouldShowCancelButton() ?
                 cellularSetup.ButtonState.ENABLED :
                 undefined,
-            skipDiscovery: cellularSetup.ButtonState.ENABLED,
+            forward: cellularSetup.ButtonState.ENABLED,
           };
           break;
         case ESimUiState.SETUP_FINISH:
+          this.forwardButtonLabel = this.i18n('done');
           buttonState = {
-            done: cellularSetup.ButtonState.ENABLED,
+            forward: cellularSetup.ButtonState.ENABLED,
           };
           break;
         default:
@@ -270,34 +278,25 @@ cr.define('cellular_setup', function() {
 
     /** @private */
     onActivationCodeUpdated_(event) {
-      if (event.detail.activationCode) {
-        this.set('buttonState.forward', cellularSetup.ButtonState.ENABLED);
-      } else {
-        this.set('buttonState.forward', cellularSetup.ButtonState.DISABLED);
-      }
+      this.set(
+          'buttonState.forward',
+          event.detail.activationCode ? cellularSetup.ButtonState.ENABLED :
+                                        cellularSetup.ButtonState.DISABLED);
     },
 
     /** @private */
     onSelectedProfileChanged_() {
-      if (this.selectedProfile_) {
-        this.set('buttonState.skipDiscovery', undefined);
-        this.set('buttonState.forward', cellularSetup.ButtonState.ENABLED);
-      } else {
-        this.set('buttonState.forward', undefined);
-        this.set(
-            'buttonState.skipDiscovery', cellularSetup.ButtonState.ENABLED);
-      }
+      this.forwardButtonLabel = this.selectedProfile_ ?
+          this.i18n('next') :
+          this.i18n('skipDiscovery');
     },
 
     /** @private */
     onConfirmationCodeUpdated_() {
-      // TODO(crbug.com/1093185) Change this to updating a "Confirm" button's
-      // state.
-      if (this.confirmationCode_) {
-        this.set('buttonState.forward', cellularSetup.ButtonState.ENABLED);
-      } else {
-        this.set('buttonState.forward', cellularSetup.ButtonState.DISABLED);
-      }
+      this.set(
+          'buttonState.forward',
+          this.confirmationCode_ ? cellularSetup.ButtonState.ENABLED :
+                                   cellularSetup.ButtonState.DISABLED);
     },
 
     /** SubflowBehavior override */

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

@@ -82,6 +82,11 @@ cr.define('cellularSetup', function() {
             'selectedPSimPageName_, cellularMetadata_.*)',
       },
 
+      forwardButtonLabel: {
+        type: String,
+        notify: true,
+      },
+
       /**
        * @type {!cellularSetup.PSimUIState}
        * @private
@@ -223,8 +228,9 @@ cr.define('cellularSetup', function() {
           break;
         case PSimUIState.WAITING_FOR_ACTIVATION_TO_FINISH:
         case PSimUIState.TIMEOUT_FINISH_ACTIVATION:
+          this.forwardButtonLabel = this.i18n('done');
           buttonState = {
-            done: cellularSetup.ButtonState.ENABLED,
+            forward: cellularSetup.ButtonState.ENABLED,
           };
           break;
         default:

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

@@ -17,11 +17,16 @@ Polymer({
   properties: {
     /**
      * Element name of the current selected sub-page.
-     * @private {!cellularSetup.CellularSetupPageName}
+     * @type {!cellularSetup.CellularSetupPageName}
      */
     selectedPage: {
       type: String,
       notify: true,
+    },
+
+    forwardButtonLabel: {
+      type: String,
+      notify: true,
     }
   },
 
@@ -43,6 +48,7 @@ Polymer({
    * @private
    */
   updateButtonState_(selectedPage) {
+    this.forwardButtonLabel = this.i18n('next');
     this.buttonState = {
       cancel: cellularSetup.ButtonState.ENABLED,
     };