Push: Read and update the progress from the sync endpoint #1389

epeicher · 2025-05-13T17:24:37Z

Related issues

Relates STU-399

Proposed Changes

Calls the GET /sync/import using the importId to obtain the progress
Use the progress from the /sync/import endpoint to update the progress in the importing state
Splits the progress of the importing state between backup and import
The backup step will take 10 steps (from 100) in the progress bar, from 60 to 70, and it will be increased by the backup_progress returned by the endpoint.
The import step will take 30 steps in the progress bar, from 70 to 100, and it will be increased by the import_progress returned by the endpoint.

This is a video with the numeric progress added for debugging purposes:

CleanShot.2025-05-15.at.16.44.57.mp4

Testing Instructions

Apply the changes in 182803-ghe-Automattic/wpcom and sandbox your environment
Apply changes in this branch and run npm start
Create a site with studio or use an existing one, and connect it to a site in WordPress.com
Go to the Sync tab and run a Push
Check the progress moves in the Applying changes… after some seconds
Additionally, you can apply this diff for debugging purposes to see a numerical progress

diff --git i/src/components/sync-connected-sites.tsx w/src/components/sync-connected-sites.tsx
index c4bb29b1..a94b7c0c 100644
--- i/src/components/sync-connected-sites.tsx
+++ w/src/components/sync-connected-sites.tsx
@@ -248,6 +248,7 @@ const SyncConnectedSitesList = ( { selectedSite }: SyncConnectedSitesListProps )
 											sitePullState.status.message }
 									</div>
 									<ProgressBar value={ sitePullState.status.progress } maxValue={ 100 } />
+									<p>{ sitePullState.status.progress }</p>
 								</div>
 							) }
 							{ isPullError && (

Regression testing

Apply the changes in 182803-ghe-Automattic/wpcom and sandbox your environment
Open a production version of Studio
Create a site with studio or use an existing one, and connect it to a site in WordPress.com
Go to the Sync tab and run a Push
Check there are no unexpected errors

Pre-merge Checklist

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

…progress-hooks

sejas

I tested it with the backend API PR and it worked great. Here is a short video displaying the progress in number.

applying-changes-progress.mp4

Let's not merge this PR until the backend PR is merged.

sejas · 2025-05-14T14:11:56Z

src/hooks/use-sync-states-progress-info.ts

+		| 'finished'
+		| 'failed'
+		| 'initial_backup_started'
+		| 'archive_import_started'


I see this status is new.

Yes, I added archive_import_finished to handle it here, but as @wojtekn asks here, we can keep the progress under 100 % during that status and the finished one. What do you think?

wojtekn · 2025-05-14T14:59:23Z

Is it okay that we display '100%' and 'Applying changes...' for a while?

epeicher · 2025-05-14T15:03:15Z

Is it okay that we display '100%' and 'Applying changes...' for a while?

For the Pull process, we added one step Applying final details… for that. We can do a similar thing here, but in principle that 100% should not take more than some seconds.

src/hooks/sync-sites/use-sync-push.ts

Co-authored-by: Antonio Sejas <[email protected]>

…ibility Co-authored-by: Fredrik Rombach Ekelund <[email protected]>

Co-authored-by: Fredrik Rombach Ekelund <[email protected]>

sejas

@epeicher , great work!! 🙌
Thanks for iterating on this, I tested it with the endpoint and it works great.

I would like to divide the Applying changes… step by adding two more messages?

I would like to add a state saying Keeping your site safe… when initial_backup_started.
Let's add a final message when archive_import_finished saying something like: Last touches… and return progress of 99.

The last state will fix the problem mentioned by Wojtek where the bar is kept in 100% for a few seconds.

push-with-progress.mp4

src/hooks/use-sync-states-progress-info.ts

src/hooks/sync-sites/use-sync-push.ts

src/hooks/use-sync-states-progress-info.ts

…progress-hooks

…-for-push

epeicher · 2025-05-15T15:24:27Z

Thanks @sejas for all your suggestions! I think I've applied most of them, and this is ready for another review. I like that we are leaving the code in a much better position. And I also love the additional steps that will provide more feedback to the user.

sejas · 2025-05-15T15:40:28Z

@epeicher , should we update the base of this PR to point to trunk?

epeicher · 2025-05-15T16:02:41Z

@epeicher , should we update the base of this PR to point to trunk?

Yep, I had stacked these changes on top of #1380 to avoid distracting this with unrelated changes. Now that I have merged the base branch, this has been rebased to trunk and there should not be any additional changes

sejas

The new messages set better expectations for the user. Thanks for adding them!

Would be possible to add the messages inside the pushStatesProgressInfo object?
I was thinking maybe instead of having different variables like archiveInitialValue, we could use the object pushStatesProgressInfo.archiving.progress + STEP*X, pushStatesProgressInfo.importing.progress

Around the minute 1:30 , I see the progress goes backwards a bit.

studio-push-progress-more-messages.mp4

epeicher · 2025-05-16T08:37:00Z

Would be possible to add the messages inside the pushStatesProgressInfo object?

Sure, I thought about that but discarded initially because I didn't wanted to affect other areas and I interepreted them as substeps of the pushStatesProgressInfo object. But I totally see the reasoning of using that object as the source of truth of the states and avoiding the substeps approach. I will work on that.

I was thinking maybe instead of having different variables like archiveInitialValue, we could use the object pushStatesProgressInfo.archiving.progress + STEP*X, pushStatesProgressInfo.importing.progress

I will iterate over this, maybe I will ping you to check before committing any changes.

Around the minute 1:30 , I see the progress goes backwards a bit.

I see it in the video, thanks for that. I will have a look at it.

sejas · 2025-05-16T08:57:08Z

Sure! happy to pair or give early feedback.
Maybe the issue that the progress goes backwards is solved once we move the "base" progress to the object.

epeicher · 2025-05-16T09:05:13Z

@sejas a quick question on naming 😅 , what do you think about naming the two new steps:

creatingRemoteBackup
applyingChanges

They will be added to PushStateProgressInfo instead of the current importing step

Happy to update them to other suggestions

sejas · 2025-05-16T09:14:22Z

They look great! I think applying changes is better than importing 👍.
Could we also add the last step of last touches?
For that step the label could say: Almost there… and maybe the key… finishing or waitingToFinish …
Naming variables is hard! xD

epeicher · 2025-05-16T09:17:17Z

Could we also add the last step of last touches?

You read my mind! While changing the code I was just about to ask you about it 😄 . I think the approach of centralizing all the states in pushStatesProgressInfo is the proper one

epeicher · 2025-05-16T11:19:36Z

@sejas, I have applied your suggestions about the additional steps and the progress changes in aa2a0b3. I think is better than using the constants, we can apply the same approach to the Pull process (as part of a follow-up 😄).

I plan to add some tests that check at least that the ProgressBar appears when in progress, what do you think?

Regarding the progress moving backwards, I have not been able to reproduce the exact issue, but one hypothesis could be that the backend reports a decreasing percentage, in that case, the progress would represent that. If you are able to reproduce that consistently, could you please check the /sync/import endpoint call and check the backup_progress field in the Network tab?

Additionally, we can add a guard here that ensures that the progress only progresses forward but I would only add that if we confirm that the backend reports incorrect percentages.

sejas

I tested it by pushing a Pressable site and the progress bar works great! No more doubts that the push is progressing and not stuck at all. Great work!

studio-push-progress-kiss-chef.mp4

src/hooks/use-sync-states-progress-info.ts

sejas · 2025-05-16T11:38:07Z

src/hooks/sync-sites/use-sync-push.ts

+			} else if ( response.success && response.status === 'archive_import_started' ) {
+				status = pushStatesProgressInfo.applyingChanges;
+			} else if ( response.success && response.status === 'archive_import_finished' ) {
+				status = pushStatesProgressInfo.finishing;


sejas · 2025-05-16T11:52:23Z

For comparison, here is how the progress bar was before:

push-progress-before.mp4

Co-authored-by: Antonio Sejas <[email protected]>

* Calls the GET /sync/import using the importId to obtain the progress * Use the progress from the /sync/import endpoint to update the progress in the importing state * Splits the progress of the importing state between backup and import

commit d31733b Author: katinthehatsite <[email protected]> Date: Tue May 27 09:12:55 2025 +0200 Studio: Delete old proof-of-concept WP-CLI implementation (#1426) * Remove old scripts * Remove old cli.ts * Cleanup tests * Clean up terminal opening and feature flag * Cleanup assistant code * Clean shortcuts code * Cleanup feature flags * Cleanup feature flags * Cleanup shortcuts sessions * Removed unused feature flag for assistant * Assistant code block test fix * Adjust preload * Cleanup index file and tests * Refactor terminal usage * Add back the lock * Remove unintended change * Remove unnecesary type for warp * Use bundled Ids * Cleanup event parameter --------- Co-authored-by: Kateryna Kodonenko <[email protected]> commit 4fac446 Author: Volodymyr Makukha <[email protected]> Date: Mon May 26 20:19:35 2025 +0100 Update Ukrainian translations - May 26 (#1439) commit c7536ef Author: Antonio Sejas <[email protected]> Date: Mon May 26 18:34:28 2025 +0100 Load LTR and RTL stylesheets conditionally (#1429) * Add a new component * Load @wordpress/components css conditionally based on RTL and LTR. * Load index.css a.k.a main_window.css after loading the WordPress stylesheet commit c80b70e Author: Bero <[email protected]> Date: Mon May 26 19:20:42 2025 +0200 Update Playground packages to 1.0.38 and remove the Symlink manager (#1425) * Update Playground packages to 1.0.38 * Remove SymlinkManager * Activate Playground's followSymlinks feature * Remove @php-wasm/universal patch commit 5bfe676 Author: Wojtek Naruniec <[email protected]> Date: Mon May 26 15:40:18 2025 +0200 Sanitize regex in Win editor path (#1411) * Sanitize regex * Import only escapeRegExp function commit 2cd3e44 Author: Ivan Ottinger <[email protected]> Date: Mon May 26 13:18:02 2025 +0200 Bump version from 1.5.2-beta4 to 1.5.2 (#1436) commit f16865e Author: Ivan Ottinger <[email protected]> Date: Mon May 26 12:38:24 2025 +0200 Add release notes for 1.5.2 (#1434) * Add release notes for 1.5.2 * Reorder release notes * Update release notes order and formatting * Added latest UI fix to the release notes * Consolidate Studio CLI fixes into a single bullet point commit f6e48d5 Author: Ivan Ottinger <[email protected]> Date: Mon May 26 12:21:30 2025 +0200 Add translations for 1.5.2 (#1433) * Add translations for 1.5.2 * Add latest Polish and Spanish translations * Update spanish translations --------- Co-authored-by: Antonio Sejas <[email protected]> commit ae1d163 Author: Antonio Sejas <[email protected]> Date: Mon May 26 10:58:22 2025 +0100 Share same styles between preview and sync tabs (#1435) commit d6a7905 Author: Roberto Aranda <[email protected]> Date: Fri May 23 15:23:14 2025 +0200 Return original URL param when it cannot be parsed (#1420) * Return the passed URL parameter when it cannot be parsed instead of an empty string commit 91d04be Author: Antonio Sejas <[email protected]> Date: Fri May 23 14:22:34 2025 +0100 Update localized docs links for Studio Sync and Studio CLI (#1431) * Add translation link to new Spanish studio docs CLI * Add hash to Studio sync supported sites commit 6213094 Author: katinthehatsite <[email protected]> Date: Fri May 23 14:27:53 2025 +0200 Add patch to fix the accessibility with modals (#1423) Co-authored-by: Kateryna Kodonenko <[email protected]> commit b2724c0 Author: Rahul Gavande <[email protected]> Date: Fri May 23 14:45:11 2025 +0530 Use uri scheme to open Warp terminal app (#1428) commit 43c831b Author: Fredrik Rombach Ekelund <[email protected]> Date: Wed May 21 16:10:40 2025 +0200 CLI: Set UTF8 encoding for output on Windows (#1424) commit b1c0eeb Author: Volodymyr Makukha <[email protected]> Date: Wed May 21 10:34:47 2025 +0100 Fix hiding plugins spinner (#1419) commit 48988ed Author: Fredrik Rombach Ekelund <[email protected]> Date: Wed May 21 10:31:33 2025 +0200 Add migration to rename launch uniques stat (#1415) * Add migration to rename launch uniques stat * Fix CLI zod schema commit f363144 Author: Ivan Ottinger <[email protected]> Date: Tue May 20 18:24:00 2025 +0200 Bump version to 1.5.2-beta4 (#1421) commit 9768e67 Author: Ivan Ottinger <[email protected]> Date: Tue May 20 15:29:33 2025 +0200 Pressable Sync: Fix remaining Sync modal issues (#1416) * Use absolute path for `WordPressLogoCircle` import * Use separate `isDisabled` to makde WP logo gray * Remove trailing space in site selector helper text * Decrease font size of sync sites modal learn more link commit 9fab398 Author: Ian G. Maia <[email protected]> Date: Tue May 20 13:15:23 2025 +0200 [Tooling] Update code to DRY the Windows build PS1 (#1408) * Update code to DRY the Windows build PS1 * Update case of `Exit` command * Use `windows` instead of just `win` to prefix windows-related scripts * Add $LastExitCode check after `npm run make` commit e5d4006 Author: Ivan Ottinger <[email protected]> Date: Tue May 20 12:01:21 2025 +0200 Improve version comparison logic to handle prerelease transitions correctly (#1403) commit f0a282b Author: Rahul Gavande <[email protected]> Date: Tue May 20 15:15:25 2025 +0530 HTTPS: Convert domain name Unicode characters to ASCII characters (#1400) * Convert domain name unicode chars to ASCII * Do not use punnycode domain name for paths * Remove unncessary punnycode domain name commit 6cdc351 Author: Roberto Aranda <[email protected]> Date: Tue May 20 11:35:52 2025 +0200 Sync: Update notification to include Hostname (#1412) * Push: Update notification to include Hostname * Pull: Update notification to include hostname * Add hints for translators commit 69419a6 Author: Gergely Csécsey <[email protected]> Date: Tue May 20 10:30:57 2025 +0100 Increase HTTP request timeout to 60 seconds (#1407) * Increase HTTP request timeout to 60 seconds * Increase curl timeout to 60 seconds * update comments commit 6bcbbff Author: Antonio Sejas <[email protected]> Date: Tue May 20 09:36:18 2025 +0100 Update connect site text button when connecting another site (#1413) * Adapt the "Connect Site" button when connecting multiple sites on Sync. commit 60a9cab Author: Antonio Sejas <[email protected]> Date: Tue May 20 09:10:37 2025 +0100 Avoid orphan in sync title (#1414) commit 3b103cc Author: Antonio Sejas <[email protected]> Date: Mon May 19 10:39:12 2025 +0100 Release 1.5.2-beta3 (#1410) commit a109671 Author: Ivan Ottinger <[email protected]> Date: Mon May 19 09:45:17 2025 +0200 Sync: Update sync tab text and remove WordPress logo from title (#1405) * Update sync tab text and remove WordPress logo from title * Fix related test * Use comma * Update copy of the bullet points * Replace `WP.com` with `WordPress.com`. Co-authored-by: Antonio Sejas <[email protected]> * Replace WP.com with WordPress.com Co-authored-by: Antonio Sejas <[email protected]> * Delete unused WordPress short logo component --------- Co-authored-by: Antonio Sejas <[email protected]> commit 716bc7a Author: Ivan Ottinger <[email protected]> Date: Fri May 16 16:15:16 2025 +0200 Sync: Update Sync modal content (#1406) * Update WordPress logo component `viewBox` * Update Sync modal heading * Update text below Sync search field * Update Sync modal site logos * Replace hardcoded arrows with `ArrowIcon` component in sync sites modal links * Localize sync modal Read more link using `getLocalizedLink` utility commit 11b4302 Author: Roberto Aranda <[email protected]> Date: Fri May 16 15:14:40 2025 +0200 Push: Read and update the progress from the sync endpoint (#1389) * Calls the GET /sync/import using the importId to obtain the progress * Use the progress from the /sync/import endpoint to update the progress in the importing state * Splits the progress of the importing state between backup and import commit 7423bdf Author: katinthehatsite <[email protected]> Date: Fri May 16 11:40:18 2025 +0200 Studio: Fix no directory or file error on Windows (#1391) * Fix no directory or file error on Windows * Cleanup directories --------- Co-authored-by: Kateryna Kodonenko <[email protected]> commit 1661ac4 Author: Antonio Sejas <[email protected]> Date: Fri May 16 10:04:32 2025 +0100 Force display of what's new for minor version (#1404) * Force what's new display for minor version * Skip test that compares the patch version

epeicher added 3 commits May 13, 2025 10:27

Pull: Move progress functions to the existing progress custom hook

bb74677

Push: Read and update the progress from the sync endpoint

7540a42

Merge branch 'trunk' of github.com:Automattic/studio into update/get-…

a91a005

…progress-hooks

epeicher requested review from a team and removed request for a team May 13, 2025 17:43

sejas reviewed May 14, 2025

View reviewed changes

Do not save importId in the fontend as it will be saved in the backend

f3da616

epeicher added DO NOT MERGE and removed DO NOT MERGE labels May 15, 2025

sejas reviewed May 15, 2025

View reviewed changes

src/hooks/sync-sites/use-sync-push.ts Outdated Show resolved Hide resolved

epeicher and others added 4 commits May 15, 2025 13:37

Remove importId from previous commits

68fa5a4

Co-authored-by: Antonio Sejas <[email protected]>

Add backup progress to the import process

23e81af

Update the condition when getting the progress state from better read…

3594007

…ibility Co-authored-by: Fredrik Rombach Ekelund <[email protected]>

Avoid extra condition

d466c69

Co-authored-by: Fredrik Rombach Ekelund <[email protected]>

sejas reviewed May 15, 2025

View reviewed changes

epeicher added 6 commits May 15, 2025 15:29

Delete redundant type and add some comments

2241fd6

Merge branch 'trunk' of github.com:Automattic/studio into update/get-…

1ed43b1

…progress-hooks

Separate constants, add new messages to inner states

88a0363

Merge branch 'update/get-progress-hooks' into add/progress-percentage…

6bb6aa5

…-for-push

Revert non-required change to the call of getPushProgressInfo

0f14b46

Update type to const and remove non-required exports

332752a

Base automatically changed from update/get-progress-hooks to trunk May 15, 2025 15:47

Merge branch 'trunk' into add/progress-percentage-for-push

4ce300d

sejas reviewed May 15, 2025

View reviewed changes

Add additional steps to pushStatesProgressInfo

aa2a0b3

sejas approved these changes May 16, 2025

View reviewed changes

epeicher and others added 4 commits May 16, 2025 14:18

Add test to check the push progressbar

76dc020

Rename variable for better readability

7a95310

Co-authored-by: Antonio Sejas <[email protected]>

Rename variable for better readability

0135d26

Delete test debug statement. Rename test to a clearer description

53e2356

sejas merged commit 11b4302 into trunk May 16, 2025
8 checks passed

sejas deleted the add/progress-percentage-for-push branch May 16, 2025 13:14

epeicher self-assigned this May 16, 2025

Push: Read and update the progress from the sync endpoint #1389

Push: Read and update the progress from the sync endpoint #1389

Uh oh!

Conversation

epeicher commented May 13, 2025 • edited by wojtekn Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

Proposed Changes

Testing Instructions

Regression testing

Pre-merge Checklist

Uh oh!

sejas left a comment

Choose a reason for hiding this comment

Uh oh!

sejas May 14, 2025

Choose a reason for hiding this comment

Uh oh!

epeicher May 14, 2025

Choose a reason for hiding this comment

Uh oh!

wojtekn commented May 14, 2025

Uh oh!

epeicher commented May 14, 2025

Uh oh!

Uh oh!

sejas 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

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

epeicher commented May 15, 2025

Uh oh!

sejas commented May 15, 2025

Uh oh!

epeicher commented May 15, 2025

Uh oh!

sejas 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

Uh oh!

epeicher commented May 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sejas commented May 16, 2025

Uh oh!

epeicher commented May 16, 2025

Uh oh!

sejas commented May 16, 2025

Uh oh!

epeicher commented May 16, 2025

Uh oh!

epeicher commented May 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sejas left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sejas May 16, 2025

Choose a reason for hiding this comment

Uh oh!

sejas commented May 16, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

epeicher commented May 13, 2025 •

edited by wojtekn

Loading

sejas left a comment •

edited

Loading

sejas left a comment •

edited

Loading

epeicher commented May 16, 2025 •

edited

Loading

epeicher commented May 16, 2025 •

edited

Loading