commit f9dbea87d0277dae63646e101639daccf7bf1e8b
parent 17f3f42d8253e4527eb796bd2c25e1818678d724
Author: Jason Prickett <jprickett@mozilla.com>
Date: Fri, 9 Jan 2026 23:11:25 +0000
Bug 2006739 - Allow in-message embedded migration wizard properties to be passed to migration wizard element r=omc-reviewers,mimi
Differential Revision: https://phabricator.services.mozilla.com/D278381
Diffstat:
3 files changed, 119 insertions(+), 4 deletions(-)
diff --git a/browser/components/aboutwelcome/content-src/components/EmbeddedMigrationWizard.jsx b/browser/components/aboutwelcome/content-src/components/EmbeddedMigrationWizard.jsx
@@ -4,9 +4,36 @@
import React, { useEffect, useRef } from "react";
+/**
+ * Embeds a migration wizard component within About:Welcome,
+ * and passes configuration options from content to the migration-wizard element
+ *
+ * @param {function} handleAction - The action handler function that processes migration events
+ * @param {object} content - The content object that contains tiles configuration
+ * @param {object} content.tiles - The tiles configuration object
+ * @param {object} content.tiles.migration_wizard_options - Configuration options for the migration wizard
+ * All options, including migration_wizard_options itself, are optional and have fallback values:
+ * - {boolean} force_show_import_all - Whether to force show import all option
+ * - {string} option_expander_title_string - Title string for the option expander
+ * - {boolean} hide_option_expander_subtitle - Whether or not to hide the option expander subtitle
+ * - {string} data_import_complete_success_string - Success message string after import completion
+ * - {string} selection_header_string - Header string for the selection section
+ * - {string} selection_subheader_string - Subheader string for the selection section
+ * - {boolean} hide_select_all - Whether to hide the select all option
+ * - {string} checkbox_margin_inline - Inline margin for checkboxes
+ * - {string} checkbox_margin_block - Block margin for checkboxes
+ * - {string} import_button_string - Text string for the import button
+ * - {string} import_button_class - CSS class for the import button
+ * - {string} header_font_size - Font size for the header
+ * - {string} header_font_weight - Font weight for the header
+ * - {string} header_margin_block - Block margin for the header
+ * - {string} subheader_font_size - Font size for the subheader
+ * - {string} subheader_font_weight - Font weight for the subheader
+ * - {string} subheader_margin_block - Block margin for the subheader
+ */
export const EmbeddedMigrationWizard = ({ handleAction, content }) => {
const ref = useRef();
- const options = content.migration_wizard_options;
+ const options = content.tiles?.migration_wizard_options;
useEffect(() => {
const handleBeginMigration = () => {
handleAction({
@@ -44,7 +71,7 @@ export const EmbeddedMigrationWizard = ({ handleAction, content }) => {
data-import-complete-success-string={
options?.data_import_complete_success_string || ""
}
- selection-header-string={options?.selection_header_string}
+ selection-header-string={options?.selection_header_string || ""}
selection-subheader-string={options?.selection_subheader_string || ""}
hide-select-all={options?.hide_select_all || false}
checkbox-margin-inline={options?.checkbox_margin_inline || ""}
diff --git a/browser/components/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/aboutwelcome/content/aboutwelcome.bundle.js
@@ -3344,12 +3344,40 @@ __webpack_require__.r(__webpack_exports__);
* You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * Embeds a migration wizard component within About:Welcome,
+ * and passes configuration options from content to the migration-wizard element
+ *
+ * @param {function} handleAction - The action handler function that processes migration events
+ * @param {object} content - The content object that contains tiles configuration
+ * @param {object} content.tiles - The tiles configuration object
+ * @param {object} content.tiles.migration_wizard_options - Configuration options for the migration wizard
+ * All options, including migration_wizard_options itself, are optional and have fallback values:
+ * - {boolean} force_show_import_all - Whether to force show import all option
+ * - {string} option_expander_title_string - Title string for the option expander
+ * - {boolean} hide_option_expander_subtitle - Whether or not to hide the option expander subtitle
+ * - {string} data_import_complete_success_string - Success message string after import completion
+ * - {string} selection_header_string - Header string for the selection section
+ * - {string} selection_subheader_string - Subheader string for the selection section
+ * - {boolean} hide_select_all - Whether to hide the select all option
+ * - {string} checkbox_margin_inline - Inline margin for checkboxes
+ * - {string} checkbox_margin_block - Block margin for checkboxes
+ * - {string} import_button_string - Text string for the import button
+ * - {string} import_button_class - CSS class for the import button
+ * - {string} header_font_size - Font size for the header
+ * - {string} header_font_weight - Font weight for the header
+ * - {string} header_margin_block - Block margin for the header
+ * - {string} subheader_font_size - Font size for the subheader
+ * - {string} subheader_font_weight - Font weight for the subheader
+ * - {string} subheader_margin_block - Block margin for the subheader
+ */
const EmbeddedMigrationWizard = ({
handleAction,
content
}) => {
const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
- const options = content.migration_wizard_options;
+ const options = content.tiles?.migration_wizard_options;
(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
const handleBeginMigration = () => {
handleAction({
@@ -3384,7 +3412,7 @@ const EmbeddedMigrationWizard = ({
"option-expander-title-string": options?.option_expander_title_string || "",
"hide-option-expander-subtitle": options?.hide_option_expander_subtitle || false,
"data-import-complete-success-string": options?.data_import_complete_success_string || "",
- "selection-header-string": options?.selection_header_string,
+ "selection-header-string": options?.selection_header_string || "",
"selection-subheader-string": options?.selection_subheader_string || "",
"hide-select-all": options?.hide_select_all || false,
"checkbox-margin-inline": options?.checkbox_margin_inline || "",
diff --git a/browser/components/aboutwelcome/tests/unit/ContentTiles.test.jsx b/browser/components/aboutwelcome/tests/unit/ContentTiles.test.jsx
@@ -4,6 +4,7 @@ import { ContentTiles } from "content-src/components/ContentTiles";
import { ActionChecklist } from "content-src/components/ActionChecklist";
import { MobileDownloads } from "content-src/components/MobileDownloads";
import { EmbeddedBackupRestore } from "content-src/components/EmbeddedBackupRestore";
+import { EmbeddedMigrationWizard } from "content-src/components/EmbeddedMigrationWizard";
import { AboutWelcomeUtils } from "content-src/lib/aboutwelcome-utils.mjs";
import { GlobalOverrider } from "asrouter/tests/unit/utils";
@@ -1062,4 +1063,63 @@ describe("ContentTiles component", () => {
mounted.unmount();
});
+
+ it("passes migration_wizard_options properties to migration-wizard element", () => {
+ const MIGRATION_WIZARD_TILE = {
+ type: "migration-wizard",
+ migration_wizard_options: {
+ force_show_import_all: true,
+ option_expander_title_string: "Custom title",
+ hide_option_expander_subtitle: true,
+ hide_select_all: true,
+ },
+ };
+
+ const content = {
+ tiles: [MIGRATION_WIZARD_TILE],
+ };
+
+ const mountedWrapper = mount(
+ <ContentTiles
+ content={content}
+ handleAction={handleAction}
+ activeMultiSelect={null}
+ setActiveMultiSelect={setActiveMultiSelect}
+ />
+ );
+
+ const embeddedMigrationWizard = mountedWrapper.find(
+ EmbeddedMigrationWizard
+ );
+ assert.ok(
+ embeddedMigrationWizard.exists(),
+ "EmbeddedMigrationWizard rendered"
+ );
+
+ const migrationWizardEl = mountedWrapper.find("migration-wizard");
+ assert.ok(migrationWizardEl.exists(), "migration-wizard element rendered");
+
+ assert.equal(
+ migrationWizardEl.prop("force-show-import-all"),
+ true,
+ "force-show-import-all is set"
+ );
+ assert.equal(
+ migrationWizardEl.prop("option-expander-title-string"),
+ "Custom title",
+ "option-expander-title-string is set"
+ );
+ assert.equal(
+ migrationWizardEl.prop("hide-option-expander-subtitle"),
+ true,
+ "hide-option-expander-subtitle is set"
+ );
+ assert.equal(
+ migrationWizardEl.prop("hide-select-all"),
+ true,
+ "hide-select-all is set"
+ );
+
+ mountedWrapper.unmount();
+ });
});
