[CrOS cellular] Update esim UI and button states

- Add close button functionality
- Update ESim flow ui to use iron pages

screenshot: https://screenshot.googleplex.com/A7ZxANAamWYTxs3.png

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

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

@@ -22,8 +22,17 @@ Polymer({
     this.delegate_ = new settings.CellularSetupSettingsDelegate();
   },
 
+  listeners: {
+    'exit-cellular-setup': 'onExitCellularSetup_',
+  },
+
   /** @override */
   attached() {
     this.$.dialog.showModal();
   },
+
+  onExitCellularSetup_() {
+    this.$.dialog.close();
+  }
+
 });

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

@@ -13,6 +13,11 @@ cr.define('settings', function() {
     shouldShowPageTitle() {
       return false;
     }
+
+    /** @override */
+    shouldShowCancelButton() {
+      return true;
+    }
   }
 
   // #cr_define_end

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

@@ -7,6 +7,8 @@
 // #import 'chrome://resources/cr_components/chromeos/cellular_setup/esim_flow_ui.m.js';
 
 // #import {flush, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {ButtonState} from 'chrome://resources/cr_components/chromeos/cellular_setup/cellular_types.m.js';
+// #import {ESimPageName} from 'chrome://resources/cr_components/chromeos/cellular_setup/esim_flow_ui.m.js';
 // #import {assertTrue} from '../../../chai_assert.js';
 // #import {FakeCellularSetupDelegate} from './fake_cellular_setup_delegate.m.js';
 // clang-format on
@@ -16,12 +18,33 @@ suite('CrComponentsEsimFlowUiTest', function() {
   setup(function() {
     eSimPage = document.createElement('esim-flow-ui');
     eSimPage.delegate = new cellular_setup.FakeCellularSetupDelegate();
+    eSimPage.initSubflow();
     document.body.appendChild(eSimPage);
     Polymer.dom.flush();
   });
 
-  test('Base test', function() {
-    const crInput = eSimPage.$$('cr-input');
-    assertTrue(!!crInput);
+  test('Forward navigation goes to final page', function() {
+    assertTrue(
+        eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.ESIM);
+
+    eSimPage.navigateForward();
+    Polymer.dom.flush();
+
+    assertTrue(
+        eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.FINAL);
+  });
+
+
+  test('Enable next button', function() {
+    assertTrue(
+        eSimPage.buttonState.next ===
+        cellularSetup.ButtonState.SHOWN_BUT_DISABLED);
+
+    eSimPage.activationCode_ = 'ACTIVATION CODE';
+    Polymer.dom.flush();
+
+    assertTrue(
+        eSimPage.buttonState.next ===
+        cellularSetup.ButtonState.SHOWN_AND_ENABLED);
   });
 });

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

@@ -13,6 +13,11 @@ cr.define('cellular_setup', function() {
     shouldShowPageTitle() {
       return false;
     }
+
+    /** @override */
+    shouldShowCancelButton() {
+      return true;
+    }
   }
 
   // #cr_define_end

ui/webui/resources/cr_components/chromeos/cellular_setup/BUILD.gn

@@ -87,6 +87,7 @@ js_library("esim_flow_ui") {
   deps = [
     ":cellular_setup_delegate",
     ":cellular_types",
+    ":final_page",
     ":subflow_behavior",
     "//ui/webui/resources/js:i18n_behavior",
   ]
@@ -269,7 +270,9 @@ js_library("esim_flow_ui.m") {
   deps = [
     ":cellular_setup_delegate.m",
     ":cellular_types.m",
+    ":final_page.m",
     ":subflow_behavior.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",
   ]
   extra_deps = [ ":esim_flow_ui_module" ]

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

@@ -46,7 +46,7 @@
       </cr-button>
     <cr-button id="cancel"
         class="cancel-button"
-        on-click="onBackwardButtonClicked_"
+        on-click="onCancelButtonClicked_"
         disabled="[[isButtonDisabled_(Button.CANCEL, buttonState.*)]]"
         hidden$="[[isButtonHidden_(Button.CANCEL, buttonState.*)]]">
       [[i18n('cancel')]]

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

@@ -51,6 +51,11 @@ Polymer({
     this.fire('backward-nav-requested');
   },
 
+  /** @private */
+  onCancelButtonClicked_() {
+    this.fire('cancel-requested');
+  },
+
   /** @private */
   onTryAgainButtonClicked_() {
     this.fire('retry-requested');

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

@@ -59,6 +59,7 @@ Polymer({
     'retry-requested': 'onRetryRequested_',
     'complete-flow-requested': 'onCompleteFlowRequested_',
     'forward-nav-requested': 'onForwardNavRequested_',
+    'cancel-requested': 'onCancelRequested_',
   },
 
   /** @private */
@@ -81,6 +82,10 @@ Polymer({
     }
   },
 
+  onCancelRequested_() {
+    this.fire('exit-cellular-setup');
+  },
+
   /** @private */
   onRetryRequested_() {
     // TODO(crbug.com/1093185): Add try again logic.

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

@@ -15,6 +15,11 @@ cr.define('cellular_setup', function() {
      * @return {boolean} true if base page title text should be visible.
      */
     shouldShowPageTitle() {}
+
+    /**
+     * @return {boolean} true if cancel button should be visible.
+     */
+    shouldShowCancelButton() {}
   }
 
   // #cr_define_end

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

@@ -4,6 +4,7 @@
 <link rel="import" href="subflow_behavior.html">
 <link rel="import" href="cellular_types.html">
 <link rel="import" href="cellular_setup_delegate.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
 
 <dom-module id="esim-flow-ui">
   <template>
@@ -22,13 +23,24 @@
         margin: 10px 0;
       }
     </style>
-    [[i18n('scanQRCode')]]
-    <!-- TODO(crbug.com/1093185): Add QR code detection-->
-    <div id="esim-qrcode-detection"></div>
-    <cr-input id="activation-code"
-        label="[[i18n('activationCode')]]"
-        value="{{activationCode_}}">
-    </cr-input>
+    <iron-pages attr-for-selected="id"
+        selected="[[selectedESimPageName_]]">
+      <!-- TODO(crbug.com/1093185): Move to separate page-->
+      <div id="qr-code-page">
+        [[i18n('scanQRCode')]]
+        <!-- TODO(crbug.com/1093185): Add QR code detection-->
+        <div id="esim-qrcode-detection"></div>
+        <cr-input id="activation-code"
+            label="[[i18n('activationCode')]]"
+            value="{{activationCode_}}">
+        </cr-input>
+      </div>
+      <final-page
+        id="final-page"
+        delegate="[[delegate]]" 
+        show-error="[[showError_]]">
+      </final-page>
+    </iron-pages>
   </template>
   <script src="esim_flow_ui.js"></script>
 </dom-module>
\ No newline at end of file

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

@@ -2,36 +2,93 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/**
- * Root element for the eSIM cellular setup flow. This element interacts with
- * the CellularSetup service to carry out the esim activation flow.
- */
-Polymer({
-  is: 'esim-flow-ui',
-
-  behaviors: [
-    I18nBehavior,
-    SubflowBehavior,
-  ],
-
-  properties: {
-    /** @type {!cellular_setup.CellularSetupDelegate} */
-    delegate: Object,
+cr.define('cellular_setup', function() {
+  /** @enum{string} */
+  /* #export */ const ESimPageName = {
+    ESIM: 'qr-code-page',
+    FINAL: 'final-page',
+  };
+  /**
+   * Root element for the eSIM cellular setup flow. This element interacts with
+   * the CellularSetup service to carry out the esim activation flow.
+   */
+  Polymer({
+    is: 'esim-flow-ui',
+
+    behaviors: [
+      I18nBehavior,
+      SubflowBehavior,
+    ],
+
+    properties: {
+      /** @type {!cellular_setup.CellularSetupDelegate} */
+      delegate: Object,
+
+      /**
+       * @type {string}
+       * @private
+       */
+      activationCode_: {
+        type: String,
+        value: '',
+        observer: 'onActivationCodeChanged_',
+      },
+
+      /**
+       * Element name of the current selected sub-page.
+       * @type {!cellular_setup.ESimPageName}
+       * @private
+       */
+      selectedESimPageName_: {
+        type: String,
+        value: ESimPageName.ESIM,
+      },
+
+      /**
+       * Whether error state should be shown for the current page.
+       * @private {boolean}
+       */
+      showError_: {
+        type: Boolean,
+        value: false,
+      },
+    },
+
+    initSubflow() {
+      this.buttonState = {
+        backward: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
+        cancel: this.delegate.shouldShowCancelButton() ?
+            cellularSetup.ButtonState.SHOWN_AND_ENABLED :
+            cellularSetup.ButtonState.HIDDEN,
+        done: cellularSetup.ButtonState.HIDDEN,
+        next: cellularSetup.ButtonState.SHOWN_BUT_DISABLED,
+        tryAgain: cellularSetup.ButtonState.HIDDEN
+      };
+    },
+
+    navigateForward() {
+      this.selectedESimPageName_ = ESimPageName.FINAL;
+    },
 
     /**
-     * @type {string}
-     * @private
+     * @returns {boolean} true if backward navigation was handled
      */
-    activationCode_: String,
-  },
-
-  initSubflow() {
-    this.buttonState = {
-      backward: cellularSetup.ButtonState.HIDDEN,
-      cancel: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
-      done: cellularSetup.ButtonState.HIDDEN,
-      next: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
-      tryAgain: cellularSetup.ButtonState.HIDDEN
-    };
-  },
-});
+    attemptBackwardNavigation() {
+      // TODO(crbug.com/1093185): Handle state when camera is used
+      return false;
+    },
+
+    /** @private */
+    onActivationCodeChanged_() {
+      if (!this.activationCode_) {
+        this.buttonState.next = cellularSetup.ButtonState.SHOWN_BUT_DISABLED;
+        return;
+      }
+
+      this.buttonState.next = cellularSetup.ButtonState.SHOWN_AND_ENABLED;
+    }
+  });
+
+  // #cr_define_end
+  return {ESimPageName: ESimPageName};
+});
\ No newline at end of file

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

@@ -15,6 +15,7 @@ Polymer({
   ],
 
   properties: {
+
     /**
      * Element name of the current selected sub-page.
      * @private {!cellularSetup.CellularSetupPageName}

ui/webui/resources/cr_components/chromeos/os_cr_components.gni

@@ -10,6 +10,7 @@ cr_components_chromeos_namespace_rewrites = [
   "cellularSetup.Button|Button",
   "cellularSetup.ButtonBarState|ButtonBarState",
   "cellularSetup.CellularSetupPageName|CellularSetupPageName",
+  "cellular_setup.ESimPageName|ESimPageName",
   "cellularSetup.PSimPageName|PSimPageName",
   "cellularSetup.PSimUIState|PSimUIState",
   "cellularSetup.getTimeoutMsForPSimUIState|getTimeoutMsForPSimUIState",