Studio: Allow blocking user from adding demo sites

[katinthehatsite]

Related to https://github.com/Automattic/dotcom-forge/issues/7370

Proposed Changes

This PR implements the UI for when the user is blocked from creating a demo site:

Testing Instructions

• Navigate to the User Report Card for your own user
• Use the Disable site creation button (at the bottom of the User Report Card) to block your user from creating demo sites
• Pull the changes from this branch
• Start the app with nvm use && npm install && npm start
• Make sure to log in with the user that you just blocked from creating sites
• Navigate to Share tab
• Confirm that Add demo site button is disabled
• Hover over the button and confirm that it displays a message about demo sites being disabled for this account

Pre-merge Checklist

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

[wojtekn]

@katinthehatsite could we also account for a case in which we disable demo sites for the user who has Studio already open? Currently, when such a user tries to add a demo site, they will get a proper error message, but the button won't be disabled:

[katinthehatsite]

Hmm let me check what is happening there 👀

[katinthehatsite]

@wojtekn I made some updates, would you be able to give it another try?

[fluiddot]

I noticed that if the user being blocked already has demo sites created, the Update demo site button is enabled. I'd apply the same approach we've done for the Add button there.

Additionally, when updating a demo site, I think the error message for blocked users should mention the failure reason

[katinthehatsite]

Thanks for the review @fluiddot ! I made some changes to block the Update site button when the user is blocked in 0b95433

I tried the alternative solution but I think at the end, it comes to the same thing that @wojtekn mentioned initially with the app not updating the data in real-time. I left it as is for now, let's wait for some comments and see if we should change the approach of polling the endpoint.

[sejas]

I've created a PR to simplify the logic of the update demo site button. Let me know what do you think. #388

I've tested login in, loging out, enabling and disabling my user RC setting, and it works as expected. Great job!

Uwi625.mp4

From my point of view I would avoid adding the active listening. I see it as a corner case.
I like how we refresh the state when the user starts the app or logs in. We should use a similar criteria as we do with the quota of demo sites.

Instead of adding an active listening, I would disable the button after the first fail. Not a strong opinion.

[katinthehatsite]

From my point of view I would avoid adding the active listening. I see it as a corner case.
I like how we refresh the state when the user starts the app or logs in. We should use a similar criteria as we do with the quota of demo sites.

Based on our discussions of this issue, I have implemented the behaviour mentioned in the comment above. Since it is more of an edge case, I would be okay not to poll the endpoint and update the information in real-time.

@sejas could you please give it another test and let me know what you think? Thanks!

[sejas]

Kat!, thanks for applying the suggested cahnges.

I've tested the edge case when a user gets blocked and it has Studio running.
As shown in the video, the create demo site will fail and immediately will see the tooltip 👍 .

zo12GS.mp4

[fluiddot]

Thanks for the review @fluiddot ! I made some changes to block the Update site button when the user is blocked in 0b95433

Thanks @katinthehatsite for addressing the comments I shared. I've tested the changes in trunk and confirmed it worked as expected 🎊 .