MSD: Show version switch progress when changing WordPress version by arthur791004 · Pull Request #109795 · Automattic/wp-calypso

arthur791004 · 2026-04-02T07:36:00Z

Fixes DOTCOM-16577

Summary

When switching WordPress version, show contextual notices tracking the full lifecycle: backup queuing → backup progress → switching version → success/error
Keep the Save button disabled throughout the switch
After backup completes, poll the WP version endpoint until the switch is confirmed
Reuses existing useBackupState hook for backup lifecycle tracking

Depends on: #109747

Demo

demo.mov

Test plan

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you tested accessibility for your changes?
Have you used memoizing on expensive computations?
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

🤖 Generated with Claude Code

github-actions · 2026-04-02T07:36:12Z

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174625

Jetpack Cloud Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174625&env=jetpack

Automattic for Agencies Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174625&env=a8c-for-agencies

Dashboard Live (dotcom) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174625&env=dashboard

Dashboard Live (CIAB) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174625&env=dashboard-ciab

matticbot · 2026-04-02T07:43:37Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

agents-manager
help-center
notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/wp-version-backup-notices on your sandbox.

claude · 2026-04-02T13:45:57Z

client/dashboard/sites/settings-wordpress/use-version-switch.ts

+	const mutation = useMutation( {
+		...siteWordPressVersionMutation( site.ID ),
+		onSuccess: () => {
+			backupState.setEnqueued( true );
+			setIsSwitched( false );
+			queryClient.invalidateQueries( sitePendingWordPressVersionQuery( site.ID ) );
+		},
+		meta: {
+			snackbar: {
+				error: __( 'Failed to save WordPress version.' ),
+			},
+		},
+	} );


Spreading siteWordPressVersionMutation and then declaring onSuccess at the same level silently replaces the mutation's own onSuccess, so queryClient.invalidateQueries( siteWordPressVersionQuery( siteId ) ) defined there is never called.

❌ Incorrect - overrides mutation option callbacks
onSuccess: () => setShowSuccessMessage( true ), // Breaks cache updates!

(api-queries README)

The component-specific side-effects should be passed as a callback to mutate(). Since the callbacks reference hook-internal state, expose a switchVersion wrapper from this hook instead of the raw mutation:

Suggested change

const mutation = useMutation( {

...siteWordPressVersionMutation( site.ID ),

onSuccess: () => {

backupState.setEnqueued( true );

setIsSwitched( false );

queryClient.invalidateQueries( sitePendingWordPressVersionQuery( site.ID ) );

},

meta: {

snackbar: {

error: __( 'Failed to save WordPress version.' ),

},

},

} );

const mutation = useMutation( {

...siteWordPressVersionMutation( site.ID ),

meta: {

snackbar: {

error: __( 'Failed to save WordPress version.' ),

},

},

} );

const switchVersion = ( version: string ) => {

mutation.mutate( version, {

onSuccess: () => {

backupState.setEnqueued( true );

setIsSwitched( false );

},

} );

};

Then update VersionSwitchState to expose switchVersion (and isPending from mutation.isPending) instead of the raw mutation, and call versionSwitch.switchVersion( formData.version ) from VersionForm.

When changing the WordPress version, show contextual notices that track the full switch lifecycle: - "Switching to WordPress X..." while backup is queued - Progress percentage while backup runs - "Backup completed. Now switching..." after backup finishes - "Your site is now running WordPress X." once the version changes - Error notice if the backup fails The Save button stays disabled throughout the switch. After backup completes, the WP version is polled until the switch is confirmed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Wrap form in a fieldset that disables both the dropdown and Save button while the version switch is in progress. - Show backup progress in the notice content ("Generating backup... (X% progress)") with a clean title ("Switching to WordPress X..."). - Poll backups throughout the entire switch, not just during backup. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Add fetchPendingWordPressVersion and sitePendingWordPressVersionQuery to poll /hosting/wp-version/pending for in-progress updates. - Split settings-wordpress into index.tsx (page shell), version-form.tsx (form with version switch logic), and version-switch-notice.tsx. - Track isSwitched as the transition from switching to not switching (wasSwitching && !isSwitching) so it works even if the page loads mid-switch. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Add fetchPendingWordPressVersion and sitePendingWordPressVersionQuery to poll /hosting/wp-version/pending for in-progress updates. - Split settings-wordpress into index.tsx (page shell), version-form.tsx (form), use-version-switch.ts (hook), and version-switch-notice.tsx (notices). - Track isSwitched via usePrevious (wasSwitching && !isSwitching). - Resolve version tag ("beta") to display string ("7.0-RC2") via wpOrgCoreVersionQuery. Show actual software_version in success notice. - Re-fetch site data after switch completes to get latest software_version for the success notice. - Show fallback notice when pending version exists but backup is idle. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

StevenDufresne · 2026-04-03T01:37:56Z

client/dashboard/sites/settings-wordpress/use-version-switch.ts

+	// Check if there's a pending version switch.
+	const { data: pendingVersion } = useQuery( sitePendingWordPressVersionQuery( site.ID ) );
+	const isSwitching = !! pendingVersion;
+	const wasSwitching = usePrevious( isSwitching );


I think using useReducer could simplify state handling. Let me spin up a branch to test that.

fushar

I'm not sure why, but I can't see the new backup if I test this on an A4A dev site. But on regular Business site, it appears correctly 🤔 can anyone also test (cc @StevenDufresne), maybe we need to exclude A4A from the beta program.

fushar · 2026-04-03T10:41:52Z

client/dashboard/sites/settings-wordpress/version-form.tsx

+								<Button
+									variant="primary"
+									type="submit"
+									isBusy={ isPending }


I think it's visually nicer if we keep the button busy until the version switch actually finishes.

arthur791004 self-assigned this Apr 2, 2026

arthur791004 marked this pull request as ready for review April 2, 2026 13:40

arthur791004 requested a review from a team as a code owner April 2, 2026 13:40

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 2, 2026

claude bot reviewed Apr 2, 2026

View reviewed changes

Base automatically changed from wp-beta-program-poc to trunk April 2, 2026 15:53

arthur791004 and others added 4 commits April 2, 2026 22:56

fushar force-pushed the add/wp-version-backup-notices branch from 32e9f5e to cfe227c Compare April 2, 2026 15:56

StevenDufresne reviewed Apr 3, 2026

View reviewed changes

StevenDufresne mentioned this pull request Apr 3, 2026

MSD: Add version switch notices and beta program enrollment UI #109813

Open

9 tasks

fushar reviewed Apr 3, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MSD: Show version switch progress when changing WordPress version#109795

MSD: Show version switch progress when changing WordPress version#109795
arthur791004 wants to merge 4 commits intotrunkfrom
add/wp-version-backup-notices

arthur791004 commented Apr 2, 2026 •

edited by fushar

Loading

Uh oh!

github-actions bot commented Apr 2, 2026 •

edited by matticbot

Loading

Uh oh!

matticbot commented Apr 2, 2026 •

edited

Loading

Uh oh!

claude bot Apr 2, 2026

Uh oh!

StevenDufresne Apr 3, 2026

Uh oh!

fushar left a comment

Uh oh!

fushar Apr 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

arthur791004 commented Apr 2, 2026 • edited by fushar Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Pre-merge Checklist

Uh oh!

github-actions bot commented Apr 2, 2026 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

claude bot Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

StevenDufresne Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

fushar left a comment

Choose a reason for hiding this comment

Uh oh!

fushar Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

arthur791004 commented Apr 2, 2026 •

edited by fushar

Loading

github-actions bot commented Apr 2, 2026 •

edited by matticbot

Loading

matticbot commented Apr 2, 2026 •

edited

Loading