Studio: Add notification when the preview site is created

[katinthehatsite]

Related issues

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

Proposed Changes

This PR adds a notification when a new preview site has been successfully created:

Testing Instructions

• Pull the changes from this branch
• Start the app with npm start
• Navigate to the Previews tab
• Click on Create preview site
• Once the process is finished and the loading bar is not present anymore, observe that there is a notification about new site being created

Pre-merge Checklist

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

[ivan-ottinger]

The notification loads nicely. 👌🏼🙂 I just noticed that it gets triggered twice in my tests:

I have also shared a couple inline comments we could consider below.

[katinthehatsite]

I just noticed that it gets triggered twice in my tests

Hmm, let me check 👀

[katinthehatsite]

I just noticed that it gets triggered twice in my tests

I fixed it in c5b7b08#diff-c73dac73b6601c39fc7747afaaa6a9c8d31b5960efd0bf65a7fd96e7c21f9410 - I realized that the issue was related to React re-renders. It should work now 🙇

[sejas]

I've tested it and confirmed the notification is sent correctly after creating a preview site.
I think we don't need the activeSnapshot variable.
Let's see if we an avoid saving the localSiteName in appData.
Maybe we can use snapshot.name and snapshot.url instead. Something like:

getIpcApi().showNotification( {
	title: snapshot.name,
	body: sprintf( __( "Preview site '%s' has been created." ), snapshot.url ),
} );

[sejas]

Why we save the activeSnapshot variable here, instead of sending the notification in this line?

[katinthehatsite]

This is what I did initially but I found out that this results in sending the notification twice and is related to the issue Ivan mentioned with double notification.

I think this is what happens based on the console.log I tested with after adding it inside the loop:

• When we set isLoading: false, React re-renders
• The effect cleanup runs (because dependencies changed)
• Then the effect runs again with new state with the new snapshots value
• This triggers the second notification

Does it make sense?

[sejas]

@katinthehatsite, please remove activeSnapshot and move the getIpcApi().showNotification call to this line. While debugging, I discovered that this hook is a regular hook and does not reside within the context. As a result, it displays the notification multiple times and makes several calls to the JN/status endpoint. Additionally, useArchiveSite is used in both content-tab-previwes and create-preview-button, causing the notification to execute twice.

Let's move this useEffect inside the useSnapshots context. I've tested it and it works as expected 👍

[katinthehatsite]

Maybe we can use snapshot.name and snapshot.url instead. Something like:

Sounds good, I updated this in 76b67a7 to look like this:

[sejas]

Kat, let's move the useEffect inside the useSnapshots context.
Let's make sure we identify the purpose of the hook correctly.

[sejas]

@katinthehatsite, please remove activeSnapshot and move the getIpcApi().showNotification call to this line. While debugging, I discovered that this hook is a regular hook and does not reside within the context. As a result, it displays the notification multiple times and makes several calls to the JN/status endpoint. Additionally, useArchiveSite is used in both content-tab-previwes and create-preview-button, causing the notification to execute twice.

Let's move this useEffect inside the useSnapshots context. I've tested it and it works as expected 👍