Studio: The "Add site" action doesn't work if there is no site

[katinthehatsite]

Closes #377

Proposed Changes

This PR does the following:

• when the user has no sites, is on onboarding screen and they click on File > Add site in the topbar menu, the menu option is disabled
• when the user has some sites and they click on File > Add site in the topbar menu, that menu option is enabled ,and they can open the modal for adding a site

It addresses the current issue when the File > Add site looks enabled when the user has no sites and is on onboarding screen but clicking on it does nothing.

Testing Instructions

• Pull the changes from this branch
• Start the app with nvm use && npm install && npm start
• Delete all sites and ensure that you see the onboarding screen
• Click on File > Add site option in the topbar menu
• Observe that that menu is disabled
• Create a site through onboarding screen so that you have at least one site
• Click on File > Add site option in the topbar menu
• Observe that Add site menu item is enabled
• Confirm that you can click it and it opens the modal to add a new site

Pre-merge Checklist

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

[fluiddot]

I wouldn't expect that refreshing the app menu requires passing the entire config parameters, like needsOnboarding. That said, I wonder if we could create a React context to manage the app menu from a global perspective instead.

The provider will use the hook useOnboarding to retrieve needsOnboarding, and set a side effect to update that app menu as we do in:

studio/src/components/app.tsx

Lines 24 to 26 in c444a1c

	useEffect( () => {
	getIpcApi().setupAppMenu( { needsOnboarding } );
	}, [ needsOnboarding ] );

Additionally, the provider will expose a function to refresh the app menu that will be consumed here. We could also expose other functions in the future to make updates in the app bar in a reactive way.

With the above approach, we'll unlock updating the app menu from anywhere on the app. WDYT?

[sejas]

Maybe another alternative would be reading the number of sites directly on IPC?

Something like (I didn't try the code):

export async function setupAppMenu( _event: IpcMainInvokeEvent ) {
	const userData = await loadUserData();
	const needsOnboarding = userData.sites.length === 0;
	setupMenu( { needsOnboarding } );
}

[katinthehatsite]

Since we need to manipulate just one menu item for now, I am going to merge this as this will have an immediate positive effect on the user experience. Let's open a separate issue to create a React context and make this more adaptable for future implementations.

[katinthehatsite]

I created the issue related to this here: https://github.com/Automattic/dotcom-forge/issues/9313

[wojtekn]

Feature-wise works as expected, thanks!

[sejas]

It works as expected. I see the add site menu item is disabled for onboarding, and enabled when we have one site or more.
Changing the language respects the correct state.

[sejas]

Maybe another alternative would be reading the number of sites directly on IPC?

Something like (I didn't try the code):

export async function setupAppMenu( _event: IpcMainInvokeEvent ) {
	const userData = await loadUserData();
	const needsOnboarding = userData.sites.length === 0;
	setupMenu( { needsOnboarding } );
}

[katinthehatsite]

Thanks @sejas - that is what I was planning to do initially (meaning reading the amount of sites) but I found that it works similarly 👍