Studio: Add failed state when the preview site fails to update

[katinthehatsite]

Related issues

Closes https://github.com/Automattic/dotcom-forge/issues/10384

Proposed Changes

This PR adds a failed state for when an update to a preview site fails due to an error. Currently it displays the Updated state / wording even when update fails due to an error:

Testing Instructions

• Pull the changes from this branch
• Make sure you have at least one preview site created
• Apply the following diff to simulate an error during update process:

index f55a9d1a..11d5f61e 100644
--- a/src/hooks/use-update-demo-site.tsx
+++ b/src/hooks/use-update-demo-site.tsx
@@ -83,6 +83,9 @@ export const DemoSiteUpdateProvider: React.FC< DemoSiteUpdateProviderProps > = (
                                        formData.push( [ 'wordpress_version', wordpressVersion ] );
                                }
 
+                               // Temporary: Simulate a failure for testing
+                               throw new Error( 'Artificial error for testing' );
+
                                const response = await client.req.post( {
                                        path: '/jurassic-ninja/update-site-from-zip',
                                        apiNamespace: 'wpcom/v2',

• Click on the Update button by a preview site in the preview actions menu
• Observe that when the error is triggered, you can see the failed state highlighted on the screenshot above
• Observe that the failed state gets removed after either 1 minute or when you switch tabs and come back
• Observe that the update time gets set back to what it was before the update was triggered

Pre-merge Checklist

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

[sejas]

The implementation works as expected, although it seems we have two states representing the same thing.

[sejas]

I believe we only add sites to errorSites and never remove them. Is that correct?

[katinthehatsite]

I think the state should be cleared by itself when the component unmounts. And the UI should be reset after 1 minute timeout:

		const timeoutId = setTimeout( () => {
			setShowUpdatedMessage( false );
			setShowFailedMessage( false );
		}, UPDATED_MESSAGE_DURATION_MS );

In any case, I added some clean up when we attemp another update: https://github.com/Automattic/studio/pull/977/commits/69c4b08f0e6ecfc1bd493fdf35a377d288d91d76k
Let me know what you think.

[sejas]

Would be possible to use only one state to represent the error message? For example removing hasDemoSiteError and using just hasDemoSiteError ?

[katinthehatsite]

I made some changes in 3f8cd26
Let me know what you think!

[sejas]

@katinthehatsite , everything works as expected and I'm able to see the errors.
Thanks for removing the "duplicated" state and handling the errors just in one place.

I left a suggestion about when removing the errors.

Otherwise it works as expected and I confirm I see the alert and error message:

[sejas]

Let's avoid removing the error automatically and instead clear it when the user retries the udpate on line 37.

Suggested change

	setTimeout( () => {
	setErrorSites( ( prev ) => {
	const next = new Set( prev );
	next.delete( snapshot.atomicSiteId );
	return next;
	} );
	}, UPDATED_MESSAGE_DURATION_MS );