Studio: Make the import process more verbose #1734

bcotrim · 2025-09-03T16:19:14Z

Related issues

Fixes STU-746

Proposed Changes

Added detailed progress tracking during import with file counts and type-specific messages
Added detailed progress tracking during site creation, with messages from Playground CLI.
Enhanced extraction progress to show "Extracting backup… (XX%)"
Added database import details showing "Importing database… (XX%)"
Implemented WordPress content breakdown by type: "Importing plugins… (XX%)", "Importing themes… (XX%)", "Importing media uploads… (XX%)"
Added new progress events: BACKUP_EXTRACT_FILE_START, IMPORT_DATABASE_PROGRESS, IMPORT_WP_CONTENT_PROGRESS
Updated backup handlers (ZIP, tar.gz) to emit granular progress data
Fixed unit test expectations for tar.gz handler

Testing Instructions

Create a test site with multiple plugins, themes, and content (use FakerPress for posts with images)
Verify the create site window shows detailed progress messages
Export the site as a backup
Import into a new site and observe detailed progress messages
Test with different backup types (ZIP, tar.gz, .wpress)
Verify progress shows file counts and content type information
For slower testing to observe messages, temporarily add delays in handlers (remove before merge)

Pre-merge Checklist

Have you checked for TypeScript, React or other console errors?

Copilot

Pull Request Overview

This PR enhances the import process with verbose progress tracking to provide more detailed feedback during backup extraction and import operations. The changes make the import process more transparent by showing file counts, content types, and granular progress updates.

Key changes:

Added granular progress tracking with file counts for extraction, database import, and WordPress content import
Implemented content categorization (plugins, themes, uploads, other) with type-specific progress messages
Enhanced backup handlers to emit detailed progress events with file counts and current file information

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/lib/import-export/import/types.ts	Added new interface types for detailed progress event data
src/lib/import-export/import/events.ts	Added new progress event constants for granular tracking
src/lib/import-export/import/importers/importer.ts	Implemented content categorization and progress events for database and WordPress content import
src/lib/import-export/import/handlers/backup-handler-zip.ts	Enhanced ZIP handler with file-level progress tracking
src/lib/import-export/import/handlers/backup-handler-tar-gz.ts	Enhanced tar.gz handler with file-level progress tracking
src/hooks/use-import-export.tsx	Updated UI progress handling to display detailed progress messages with file counts
src/lib/import-export/tests/import/importer/jetpack-importer.test.ts	Added comprehensive tests for WordPress content categorization
src/lib/import-export/tests/import/handlers/backup-handler.test.ts	Updated test expectations for tar.gz handler options
src/hooks/tests/use-import-export.test.tsx	Added extensive tests for verbose progress tracking scenarios

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/lib/import-export/import/handlers/backup-handler-tar-gz.ts

src/lib/import-export/import/importers/importer.ts

gcsecsey

This looks good and IMO the added progress steps make the import process much more "interactive" from a UX perspective, it's great to see what's happening under the hood.

To test the changes, I configured a site on playground.wordpress.net with fake data and plugins, and exported it both as .wpress and .zip.

When importing the .wpress I ran into an SQL parse error at the end of the import process. I could recreate this error on trunk, so I don't think this is related to these changes:

CleanShot.2025-09-10.at.12.00.12.mp4

error-log.log

Importing the .zip file worked well without errors:

CleanShot.2025-09-10.at.11.27.37.mp4

src/lib/import-export/import/importers/importer.ts

Copilot

Pull Request Overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/lib/import-export/import/handlers/backup-handler-wpress.ts

src/hooks/use-import-export.tsx

epeicher

Thanks @bcotrim! This now looks much better, I have tested with a .zip file and I have not found any issues, I can see the total file count and the progress is much better now

Importing a zip

CleanShot.2025-10-02.at.11.31.09.mp4

But I have found a small pause in the progress when importing a wpress file in this branch that I could not replicate in trunk. Please find videos below

Importing a wpress in this branch

CleanShot.2025-10-03.at.07.50.10.mp4

Importing a wpress in trunk

CleanShot.2025-10-03.at.07.51.27.mp4

Please ping me if you need the wpress file

wojtekn · 2025-10-03T06:20:33Z

@bcotrim, this will be a nice improvement!

It will prepare Studio for another change - at some point, we can consider redesigning how Studio displays progress, to:

display all steps on the screen upfront
preserve each completed step with something that marks it as complete

That way, Studio would set expectations, so users would see all the steps that will be performed to complete the import. (CC @Marinatsu )

One note so far regarding UI - would it be clearer to use a percentage in all those places? As a user, I wouldn't be interested in the file count, but rather in the overall process progress:

Extracting backup… (19%)
Importing database… (67%)
Importing plugins… (42%)
Importing themes… (67%)
Importing media uploads… (30%)

We could also consider changing labels for the create site steps to make them more meaningful. For now, ale steps from "Getting everything ready…" to "Nearly finished" add some impression of progress but they don't mean anything.

… emission, improve path categorization

…xtract progress helper, optimize typeLabels constant

bcotrim · 2025-10-07T19:10:59Z

@wojtekn @epeicher @gcsecsey Thanks for the reviews!

I addressed the comments and issues.
Added new behavior:

(XX%) instead of number of files
Detailed progress messages for site creation process

Can you take another look, please?

Copilot

Pull Request Overview

Copilot reviewed 19 out of 19 changed files in this pull request and generated 4 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/lib/wordpress-provider/playground-cli/playground-server-process.ts

src/lib/import-export/import/handlers/backup-handler-wpress.ts

src/hooks/use-import-export.tsx

epeicher

Thanks @bcotrim for continuing to improve this! I have tested it and it works great, I like the percentages, and when creating a site from an import, the progress is much nicer now.

CleanShot.2025-10-08.at.10.25.34.mp4

With regards to importing a backup to an existing site, I have found a couple of details that could be improved as part of this, or as follow-ups:

When importing a .wpress backup, I see a small pause in the import (you can see in the video around the second 3) that I don't see in trunk

CleanShot.2025-10-08.at.10.22.53.mp4

The progress bar goes backwards during the different states, as a user I don't like that, I would prefer an indeterminate progress bar or ideally a progress bar that only goes forward. Although, this could be a matter of preference, so happy to hear others thoughts.

src/lib/wordpress-provider/playground-cli/playground-server-process-child.ts

epeicher

Thanks @bcotrim for addressing the comments! I’ve given it another spin, and it works great. I don’t see any pauses in the progress, and I can see the progress bar is indeterminate, but the percentage gives a nice sense of progress. This LGTM!

Creating a new site by importing a wpress file

CleanShot.2025-10-09.at.10.36.08.mp4

Importing a wpress file into an existing site

CleanShot.2025-10-09.at.10.38.13.mp4

I have also tested with a jetpack backup and it works great too 🙌

epeicher · 2025-10-09T08:24:22Z

src/lib/wordpress-provider/playground-cli/playground-server-process.ts

-								siteId,
+					if ( this.siteId ) {
+						try {
+							const mainWindow = await getMainWindow();


bcotrim self-assigned this Sep 3, 2025

bcotrim requested a review from a team September 3, 2025 16:19

bcotrim marked this pull request as draft September 3, 2025 16:44

bcotrim requested a review from Copilot September 3, 2025 16:47

Copilot AI reviewed Sep 3, 2025

View reviewed changes

gcsecsey reviewed Sep 10, 2025

View reviewed changes

src/lib/import-export/import/importers/importer.ts Show resolved Hide resolved

bcotrim force-pushed the stu-746-studio-make-the-import-process-more-verbose branch from 30b52e7 to 4d64085 Compare October 1, 2025 17:25

bcotrim requested a review from Copilot October 1, 2025 17:25

Copilot AI reviewed Oct 1, 2025

View reviewed changes

src/lib/import-export/import/handlers/backup-handler-wpress.ts Show resolved Hide resolved

src/lib/import-export/import/handlers/backup-handler-wpress.ts Outdated Show resolved Hide resolved

src/hooks/use-import-export.tsx Outdated Show resolved Hide resolved

bcotrim marked this pull request as ready for review October 1, 2025 18:19

bcotrim requested a review from gcsecsey October 1, 2025 18:19

epeicher reviewed Oct 3, 2025

View reviewed changes

bcotrim added 11 commits October 7, 2025 09:33

make the import process more verbose

5cc3b79

update unit tests

d90bdf7

update handlers from wpress and sql

fa24f31

Address PR review comments: remove double file read, use proper event…

53b52c9

… emission, improve path categorization

Address additional PR comments: restore totalFiles for consistency, e…

cc2db35

…xtract progress helper, optimize typeLabels constant

Fix progress display to show file counts starting from 0

4a21c46

Emit progress event after file copy to prevent UI freeze appearance

f7b123b

add messages to create site

e5fdf23

fix lint

584f250

cleanup comments

d8b5d51

change to percentages

01caf03

bcotrim force-pushed the stu-746-studio-make-the-import-process-more-verbose branch from 191ffc6 to 01caf03 Compare October 7, 2025 15:19

add start site messages

d8be4d7

bcotrim requested review from Copilot, epeicher and wojtekn October 7, 2025 19:09

Copilot AI reviewed Oct 7, 2025

View reviewed changes

epeicher reviewed Oct 8, 2025

View reviewed changes

src/lib/wordpress-provider/playground-cli/playground-server-process-child.ts Outdated Show resolved Hide resolved

pr feedback

9e5ea20

bcotrim requested a review from epeicher October 8, 2025 15:50

fix unit tests

d79f9e7

epeicher approved these changes Oct 9, 2025

View reviewed changes

bcotrim merged commit 3348f90 into trunk Oct 9, 2025
12 checks passed

bcotrim deleted the stu-746-studio-make-the-import-process-more-verbose branch October 9, 2025 09:07

Studio: Make the import process more verbose #1734

Studio: Make the import process more verbose #1734

Uh oh!

Conversation

bcotrim commented Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

Proposed Changes

Testing Instructions

Pre-merge Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gcsecsey left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

epeicher left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Importing a zip

Importing a wpress in this branch

Importing a wpress in trunk

Uh oh!

wojtekn commented Oct 3, 2025

Uh oh!

bcotrim commented Oct 7, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

epeicher left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

epeicher left a comment

Choose a reason for hiding this comment

Creating a new site by importing a wpress file

Importing a wpress file into an existing site

Uh oh!

epeicher Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

bcotrim commented Sep 3, 2025 •

edited

Loading

epeicher left a comment •

edited

Loading