Studio: Update import/export messaging and tooltips when sync is in progress

[ivan-ottinger]

Related issues

• Fixes https://github.com/Automattic/dotcom-forge/issues/10034

Proposed Changes

The proposed changes improve the user experience on the Import/Export tab when sync (push or pull) or import operation is in progress. The changes include:

• customization of the tooltip text depending whether sync or import is in progress; the tooltip text is different depending on the operation happens with the currently selected or another Studio site
• removal of duplicate tooltip from Export entire site and Export database buttons → Now there's just one tooltip for both buttons
• gray out of the "Drag a file" button when it is disabled
• update of the "Drag a file" button logic and styles when sync is in progress → It will no longer behave as if the site was being imported
• addition of a new tooltip to the "Drag a file" button

Testing Instructions

1. Check out the PR and build the app with npm start.
2. Test with a local Studio site that has been connected to a WPCOM site.
3. Initiate push or pull operation from the Sync tab and head over to the Import / Export tab.
4. All the buttons should be disabled and there should be a tooltip displayed on hover informing the user about the ongoing sync operation.
5. As soon as the sync operation finishes, the buttons should become available and tooltips shouldn't be there anymore.
6. Try out initiating sync operation using a different site and observe how the tooltip texts are different from when the sync operation is initiated from the selected site.
7. Try exporting a site. Relevant tooltip text should be provided on the "Drag a file" button.
8. There should be no regressions when importing or exporting local site.

Pre-merge Checklist

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

[wojtekn]

@ivan-ottinger Could we do the same for the Disconnect, Push, and Pull buttons?

[ivan-ottinger]

@ivan-ottinger Could we do the same for the Disconnect, Push, and Pull buttons?

Looks like @katinthehatsite is already graying out the Push and Pull buttons in #718 so maybe it would be worth to apply similar styling to the Disconnect button in her PR as well.

It would leave this PR focused on the changes on the Import / Export tab.

What do you think, Kat and Wojtek? 🙂

[wojtekn]

Sounds good @ivan-ottinger , let's handle that under the other PR.

[sejas]

Looks good!

I've found a small bug where we display the Sync tooltip in the drop down area when we should display a new message mentioning the site is being exported.

<Tooltip className={ 'w-full' } text={ siteSyncingMessage() } disabled={ ! disabled }>

I left other comments/suggestions, but they’re not strong opinions—feel free to make any decision you think is best.

[ivan-ottinger]

If the tooltip text isn't provided, the Tooltip component will make sure the tooltip gets hidden: #722 (I have separated the Tooltip component fix into its own PR).

[wojtekn]

Works as expected.