Improve error displayed when pushing large site

[sejas]

Related issues

• Fixes STU-737

Proposed Changes

• Disable the push button and display a warning notice when the user's selection exceeds our 2GB limit for push.

Testing Instructions

• Run npm start
• Create a new site
• Move a big file into a specific folder
• Go to the Sync tab and connect a remote site
• Click on Push
• Select any folder
• Observe the push is enabled
• Select the folder containing the big file, or the file itself.
• Observe that the push is disabled and a warning notice appears, suggesting to change your selection.

push-selection-over-size-limit.mp4

Pre-merge Checklist

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

[sejas]

The warning is similar to the one being added on staging sites for a different purpose. Automattic/wp-calypso#105448

[katinthehatsite]

I think this works well, I did not spot any weird behaviours. I left one comment with a suggestion for visual improvements.

[epeicher]

Thanks Antonio for improving this! I have tested it, and I can see the error message indicating the size limit working as expected, also disabling the button. LGTM!

Over the limit	Less than the limit

[wojtekn]

@sejas, this is a great step to improve UX around the size limits.

How does it work for the database?

[sejas]

Thanks @wojtekn 🙌.
For the database, it checks the size of the .ht.sqlite file as a rough estimate.

[wojtekn]

Thanks for the clarification, makes sense.