Site migration: lock the UI immediately the migration starts

[andfinally]

Note: This change is behind a feature flag and is part of an in-progress larger project. For context, see pbkcP4-8-p2.

Changes proposed in this Pull Request

• Sets the migrationStatus state to backing-up as soon as the user clicks the "Start Migration" button, so the UI locks before we make a request to the migration status endpoint.
• Includes done among the statuses indicating that a migration is not in progress, so the UI unlocks at the end of a migration without the user needing to dismiss the success message.

Testing instructions

(Note: most of these instructions are general instructions for testing migration. The bolded steps are the ones specific to this change)

• Check out this pull request and run Calypso locally, or run it on calypso.live.
• Viewing calypso.localhost:3000/migrate/, you should see a SiteSelector component allowing you to choose a site to migrate a Jetpack site into.
• When you select a site, you should see another SiteSelector component, listing all the Jetpack sites your account has access to.
• Selecting one of those sites should take you to a confirmation screen.
• Click the "Start Migration" button.
• You'll see a confirm modal. Click the "Overwrite this site" button.
• The migration should start and the UI should lock immediately.
• When the migration is finished, the UI should unlock.

[matticbot]

Test live: https://calypso.live/?branch=update/migration--lock-immediately

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Webpack Runtime (~2798 bytes removed 📉 [gzipped])

name      parsed_size            gzip_size
manifest     +36362 B  (+27.2%)    -2798 B  (-8.3%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

App Entrypoints (~11 bytes added 📈 [gzipped])

name        parsed_size           gzip_size
entry-main        +22 B  (+0.0%)      +11 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~198 bytes removed 📉 [gzipped])

name     parsed_size           gzip_size
migrate       -818 B  (-0.7%)     -198 B  (-0.7%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[mattsherman]

This feels so much better. Thanks for the fix. Approved.