Commit fe22a4ce authored by Gordon Seto's avatar Gordon Seto Committed by Commit Bot

[CrOS Settings] Add profile discovery page UI

Add UI with mock data for the eSIM Profile discovery page.

Screenshots:
https://screenshot.googleplex.com/6APFxT6GKtLqNNd.png
https://screenshot.googleplex.com/AMcw2z4myKRKQTs.png

Bug: 1093185
Change-Id: I5216bb2f91b58578bbf4f2918ab21f9a78727324
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2523521
Commit-Queue: Gordon Seto <gordonseto@google.com>
Reviewed-by: default avatarKyle Horimoto <khorimoto@chromium.org>
Reviewed-by: default avatarAzeem Arshad <azeemarshad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#826886}
parent da3a5ed7
......@@ -315,6 +315,9 @@
<message name="IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_MESSAGE" desc="Message for electronic SIM (eSIM) setup flow card radio select button during cellular setup, informing the user to establish an internet connection before proceeding.">
Establish an internet connection first
</message>
<message name="IDS_CELLULAR_SETUP_PROFILE_LIST_PAGE_MESSAGE" desc="Label informing the user that they are able to select multiple eSIM profiles for downloading.">
We've found multiple profiles available to download. Select the ones you would like to download before proceeding.
</message>
<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>
......
470635d780b6989e2238310bb55f2eab8863d0b1
\ No newline at end of file
......@@ -53,7 +53,8 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
{"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},
{"qrCodeRetry", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_RETRY}};
{"qrCodeRetry", IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE_RETRY},
{"profileListPageMessage", IDS_CELLULAR_SETUP_PROFILE_LIST_PAGE_MESSAGE}};
} // namespace
void AddLocalizedStrings(content::WebUIDataSource* html_source) {
......
......@@ -25,36 +25,40 @@ suite('CrComponentsEsimFlowUiTest', function() {
});
test('Forward navigation goes to final page', function() {
const activationCodePage = eSimPage.$$('#activationCodePage');
const profileDiscoveryPage = eSimPage.$$('#profileDiscoveryPage');
const finalPage = eSimPage.$$('#finalPage');
assertTrue(!!activationCodePage);
assertTrue(!!profileDiscoveryPage);
assertTrue(!!finalPage);
assertTrue(
eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.ESIM &&
eSimPage.selectedESimPageName_ === activationCodePage.id);
eSimPage.selectedESimPageName_ ===
cellular_setup.ESimPageName.PROFILE_DISCOVERY &&
eSimPage.selectedESimPageName_ === profileDiscoveryPage.id);
eSimPage.navigateForward();
Polymer.dom.flush();
// TODO(crbug.com/1093185) Update this test when the navigation between
// profile discovery and activation code pages is wired up.
assertTrue(
eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.FINAL &&
eSimPage.selectedESimPageName_ === finalPage.id);
});
test('Enable next button', function() {
assertTrue(
eSimPage.buttonState.next ===
cellularSetup.ButtonState.SHOWN_BUT_DISABLED);
// TODO(crbug.com/1093185) Update this test when the navigation between
// profile discovery and activation code pages is wired up.
test('Enable done button', function() {
assertTrue(eSimPage.buttonState.done === cellularSetup.ButtonState.HIDDEN);
const activationCodePage = eSimPage.$$('#activationCodePage');
activationCodePage.$$('#activationCode').value = 'ACTIVATION_CODE';
const profileDiscoveryPage = eSimPage.$$('#profileDiscoveryPage');
const profileList = profileDiscoveryPage.$$('#profileList');
profileList.selectItem(profileList.items[0]);
Polymer.dom.flush();
assertTrue(
eSimPage.buttonState.next ===
eSimPage.buttonState.done ===
cellularSetup.ButtonState.SHOWN_AND_ENABLED);
});
});
......@@ -91,6 +91,8 @@ preprocess_grit("preprocess_generated") {
"chromeos/cellular_setup/esim_flow_ui.m.js",
"chromeos/cellular_setup/final_page.m.js",
"chromeos/cellular_setup/mojo_interface_provider.m.js",
"chromeos/cellular_setup/profile_discovery_list_item.m.js",
"chromeos/cellular_setup/profile_discovery_list_page.m.js",
"chromeos/cellular_setup/provisioning_page.m.js",
"chromeos/cellular_setup/psim_flow_ui.m.js",
"chromeos/cellular_setup/setup_selection_flow.m.js",
......@@ -201,6 +203,10 @@ preprocess_grit("preprocess_polymer2") {
"chromeos/cellular_setup/final_page.js",
"chromeos/cellular_setup/mojo_interface_provider.html",
"chromeos/cellular_setup/mojo_interface_provider.js",
"chromeos/cellular_setup/profile_discovery_list_item.html",
"chromeos/cellular_setup/profile_discovery_list_item.js",
"chromeos/cellular_setup/profile_discovery_list_page.html",
"chromeos/cellular_setup/profile_discovery_list_page.js",
"chromeos/cellular_setup/provisioning_page.html",
"chromeos/cellular_setup/provisioning_page.js",
"chromeos/cellular_setup/psim_flow_ui.html",
......
......@@ -19,6 +19,8 @@ js_type_check("closure_compile") {
":cellular_types",
":final_page",
":mojo_interface_provider",
":profile_discovery_list_item",
":profile_discovery_list_page",
":provisioning_page",
":psim_flow_ui",
":setup_selection_flow",
......@@ -77,6 +79,17 @@ js_library("activation_code_page") {
]
}
js_library("profile_discovery_list_page") {
deps = [
"//third_party/polymer/v1_0/components-chromium/iron-list:iron-list-extracted",
"//ui/webui/resources/js:i18n_behavior",
]
}
js_library("profile_discovery_list_item") {
deps = [ "//ui/webui/resources/js:i18n_behavior" ]
}
js_library("psim_flow_ui") {
deps = [
":cellular_setup_delegate",
......@@ -96,6 +109,8 @@ js_library("esim_flow_ui") {
deps = [
":activation_code_page",
":cellular_setup_delegate",
":profile_discovery_list_item",
":profile_discovery_list_page",
":subflow_behavior",
"//ui/webui/resources/js:i18n_behavior",
]
......@@ -157,6 +172,8 @@ js_type_check("closure_compile_module") {
":esim_flow_ui.m",
":final_page.m",
":mojo_interface_provider.m",
":profile_discovery_list_item.m",
":profile_discovery_list_page.m",
":provisioning_page.m",
":psim_flow_ui.m",
":setup_selection_flow.m",
......@@ -196,6 +213,21 @@ js_library("activation_code_page.m") {
extra_deps = [ ":activation_code_page_module" ]
}
js_library("profile_discovery_list_item.m") {
sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/profile_discovery_list_item.m.js" ]
deps = [ "//ui/webui/resources/js:i18n_behavior.m" ]
extra_deps = [ ":profile_discovery_list_item_module" ]
}
js_library("profile_discovery_list_page.m") {
sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/profile_discovery_list_page.m.js" ]
deps = [
"//third_party/polymer/v3_0/components-chromium/iron-list:iron-list",
"//ui/webui/resources/js:i18n_behavior.m",
]
extra_deps = [ ":profile_discovery_list_page_module" ]
}
js_library("mojo_interface_provider.m") {
sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/mojo_interface_provider.m.js" ]
deps = [
......@@ -292,6 +324,8 @@ js_library("esim_flow_ui.m") {
":cellular_setup_delegate.m",
":cellular_types.m",
":final_page.m",
":profile_discovery_list_item.m",
":profile_discovery_list_page.m",
":subflow_behavior.m",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
"//ui/webui/resources/js:i18n_behavior.m",
......@@ -332,6 +366,8 @@ group("polymer3_elements") {
":esim_flow_ui_module",
":final_page_module",
":modulize",
":profile_discovery_list_item_module",
":profile_discovery_list_page_module",
":provisioning_page_module",
":psim_flow_ui_module",
":setup_selection_flow_module",
......@@ -379,6 +415,22 @@ polymer_modulizer("sim_detect_page") {
auto_imports = cr_components_chromeos_auto_imports
}
polymer_modulizer("profile_discovery_list_item") {
js_file = "profile_discovery_list_item.js"
html_file = "profile_discovery_list_item.html"
html_type = "dom-module"
namespace_rewrites = cr_components_chromeos_namespace_rewrites
auto_imports = cr_components_chromeos_auto_imports
}
polymer_modulizer("profile_discovery_list_page") {
js_file = "profile_discovery_list_page.js"
html_file = "profile_discovery_list_page.html"
html_type = "dom-module"
namespace_rewrites = cr_components_chromeos_namespace_rewrites
auto_imports = cr_components_chromeos_auto_imports
}
polymer_modulizer("provisioning_page") {
js_file = "provisioning_page.js"
html_file = "provisioning_page.html"
......
......@@ -6,6 +6,7 @@
<link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
<link rel="import" href="activation_code_page.html">
<link rel="import" href="final_page.html">
<link rel="import" href="profile_discovery_list_page.html">
<dom-module id="esim-flow-ui">
<template>
......@@ -19,6 +20,9 @@
</style>
<iron-pages attr-for-selected="id"
selected="[[selectedESimPageName_]]">
<profile-discovery-list-page id="profileDiscoveryPage"
selected-profiles="{{selectedProfiles_}}">
</profile-discovery-list-page>
<activation-code-page id="activationCodePage"></activation-code-page>
<final-page
id="finalPage"
......
......@@ -5,6 +5,7 @@
cr.define('cellular_setup', function() {
/** @enum{string} */
/* #export */ const ESimPageName = {
PROFILE_DISCOVERY: 'profileDiscoveryPage',
ESIM: 'activationCodePage',
FINAL: 'finalPage',
};
......@@ -31,7 +32,7 @@ cr.define('cellular_setup', function() {
*/
selectedESimPageName_: {
type: String,
value: ESimPageName.ESIM,
value: ESimPageName.PROFILE_DISCOVERY,
},
/**
......@@ -42,23 +43,36 @@ cr.define('cellular_setup', function() {
type: Boolean,
value: false,
},
/**
* @type {Array<!Object>}
* @private
*/
selectedProfiles_: {
type: Object,
},
},
listeners: {
'activation-code-updated': 'onActivationCodeUpdated_',
},
listeners: {'activation-code-updated': 'onActivationCodeUpdated_'},
observers: ['onSelectedProfilesChanged_(selectedProfiles_.splices)'],
initSubflow() {
this.buttonState = {
backward: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
backward: cellularSetup.ButtonState.HIDDEN,
cancel: this.delegate.shouldShowCancelButton() ?
cellularSetup.ButtonState.SHOWN_AND_ENABLED :
cellularSetup.ButtonState.HIDDEN,
done: cellularSetup.ButtonState.HIDDEN,
next: cellularSetup.ButtonState.SHOWN_BUT_DISABLED,
next: cellularSetup.ButtonState.HIDDEN,
tryAgain: cellularSetup.ButtonState.HIDDEN,
skipDiscovery: cellularSetup.ButtonState.HIDDEN,
skipDiscovery: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
};
},
/** @private */
onActivationCodeUpdated_(event) {
if (event.detail.activationCode) {
this.set(
......@@ -69,6 +83,21 @@ cr.define('cellular_setup', function() {
}
},
/** @private */
onSelectedProfilesChanged_() {
// TODO(crbug.com/1093185): Add navigation logic.
if (this.selectedProfiles_.length > 0) {
this.set('buttonState.skipDiscovery', cellularSetup.ButtonState.HIDDEN);
this.set(
'buttonState.done', cellularSetup.ButtonState.SHOWN_AND_ENABLED);
} else {
this.set(
'buttonState.skipDiscovery',
cellularSetup.ButtonState.SHOWN_AND_ENABLED);
this.set('buttonState.done', cellularSetup.ButtonState.HIDDEN);
}
},
navigateForward() {
this.selectedESimPageName_ = ESimPageName.FINAL;
},
......
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<dom-module id="profile-discovery-list-item">
<template>
<style include="iron-flex">
#details {
align-items: center;
display: flex;
flex: auto;
min-height: var(--cr-section-two-line-min-height);
}
#profileImage {
margin-inline-end: 16px;
}
#profileTitleLabel {
color: var(--cr-primary-text-color);
}
#checkmark {
-webkit-mask: url(activation_code_page_checked.svg) no-repeat center;
background-color: var(--google-blue-600);
height: 20px;
margin-inline-end: 8px;
mask: url(activation_code_page_checked.svg) no-repeat center;
padding-inline-end: var(--cr-section-padding);
width: 20px;
}
</style>
<div class="two-line no-padding" selectable>
<div class="flex layout horizontal center link-wrapper">
<div id="details" no-flex$="false">
<!-- TODO(crbug.com/1093185): Update with real profile image. -->
<img id="profileImage" src="../../../images/200-logo_googleg.png">
<div class="flex settings-box-text">
<div id="profileTitleLabel">
[[profile.name]]
</div>
<div id="profileProviderLabel">
[[profile.provider]]
</div>
</div>
</div>
<span id="checkmark" hidden$="[[!selected]]"
tabindex="-1">
</div>
</div>
</template>
<script src="profile_discovery_list_item.js"></script>
</dom-module>
\ No newline at end of file
// 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
* Item in the profile-discovery-list-page list displaying details of an eSIM
* profile.
*/
Polymer({
is: 'profile-discovery-list-item',
behaviors: [I18nBehavior],
properties: {
// TODO(crbug.com/1093185) Add type annotation when the real Profile struct
// is available.
profile: {
type: Object,
value: null,
},
selected: {
type: Boolean,
reflectToAttribute: true,
},
},
});
<link rel="import" href="../../../html/polymer.html">
<link rel="import" href="../../../html/i18n_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
<link rel="import" href="base_page.html">
<link rel="import" href="profile_discovery_list_item.html">
<dom-module id="profile-discovery-list-page">
<template>
<style include="cr-shared-style iron-flex">
[slot='page-body'] {
height: 300px;
margin-top: -20px;
}
profile-discovery-list-item {
height: 64px;
}
#container {
height: 230px;
margin-top: 20px;
overflow-x: hidden;
overflow-y: auto;
}
iron-list > *:not(:first-of-type) {
border-top: var(--cr-separator-line);
}
</style>
<base-page>
<div slot="page-body">
<div>[[i18n('profileListPageMessage')]]</div>
<div id="container" class="layout vertical flex" scrollable>
<iron-list id="profileList" items="[[profiles_]]"
scroll-target="container" selection-enabled
preserve-focus multi-selection
selected-items="{{selectedProfiles}}"
role="listbox"
aria-multiselectable="true">
<template>
<profile-discovery-list-item profile="[[item]]"
selected="[[isProfileSelected_(item, selectedProfiles.length)]]"
tabindex="0"
role="option"
aria-selected="[[isProfileSelected_(item, selectedProfiles.length)]]">
</profile-discovery-list-item>
</template>
</iron-list>
</div>
</div>
</base-page>
</template>
<script src="profile_discovery_list_page.js"></script>
</dom-module>
// 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
* Page in eSIM Setup flow that displays a choice of available eSIM Profiles.
*/
Polymer({
is: 'profile-discovery-list-page',
behaviors: [I18nBehavior],
properties: {
/**
* TODO(crbug.com/1093185) Fetch real profiles.
* @type {Array<!Object>}
* @private
*/
profiles_: {
type: Array,
value() {
return [
{
name: 'Profile 1',
provider: 'Google Fi',
},
{
name: 'Profile 2',
provider: 'Verizon',
},
{
name: 'Profile 3',
provider: 'Google Fi',
},
];
},
},
/**
* @type {Array<!Object>}
* @private
*/
selectedProfiles: {
type: Object,
notify: true,
},
},
/**
* @param {Object} profile
* @private
*/
isProfileSelected_(profile) {
return this.selectedProfiles.some(p => p === profile);
}
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment