Add: Ability to download backups for expired Atomic sites

[villanovachile]

Related to pIFnH-7g8-p2

Proposed Changes

• Currently there is not a way for users to download backups (if they exist) from their expired Atomic site. This PR will introduce a card on the /backup/{siteSlug}/ page for simple sites that have been reverted and have a valid backup, that will allow users to download the latest valid backup.

Why are these changes being made?

• When sites are reverted, a lossless import will trigger, however, all plugins, custom themes, theme customizations, custom post types (such as Woo products), and files stored outside of the media library are all lost, as they are not supported on simple plans. This change allows users to download a backup from the Jetpack > Backup page, so as long as it exists.

Testing Instructions

• Visit /backup/{siteSlug}/ on a simple site that has never been Atomic - only the upgrade card should appear
• Visit /backup/{siteSlug}/ on a simple site that was Atomic and has been reverted, and has a valid backup - the download flow should appear under the upgrade card, and should display the date of the backup.
• Test downloading the backup flow

Download Screens:

To-do

• Make styling changes requested here: pIFnH-7g8-p2#comment-27853
• Add collapsible section if confirmed that this should be added to Jetpack sites as well: pIFnH-7g8-p2#comment-27855
• The wording for email notifications has been commented out, as currently this functionality is not supported on simple sites, as they face rewind authorization issues. We'll need to look into how feasible this is.
• We'll need to split up the existing download.tsx component and abstract the header/body content to make it dynamic, while keeping the download functionality itself separate, ensuring that we can remove download-expired-plan.tsx, as it duplicates functionality.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-122034

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-122034&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-122034&env=a8c-for-agencies

[matticbot]

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

Sections (~1415 bytes added 📈 [gzipped])

name                    parsed_size           gzip_size
backup                      +5489 B  (+0.5%)    +1415 B  (+0.4%)
a8c-for-agencies-sites      +5489 B  (+0.3%)    +1415 B  (+0.2%)

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.

[Initsogar]

@villanovachile Thanks for working on this! It looks good overall.

As you mention, it would be nice if we refactor our download process to avoid duplicating code, but I'm fine with proceeding with this PR first, as this is something that will add value to our customers in the short term.

I just left some comments that would be nice to address, so let me know if you have any thoughts. We can also jump into a call if needed.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/add-download-backup-to-expired-atomic-sites on your sandbox.

[villanovachile]

@Initsogar I've gone ahead and pushed the changes, but the refresh bug you mentioned also brought to mind another bug that @ash1eygrace found while testing: pdtR3Z-3do-p2#comment-3047:

Like wise if I prepare a download, and get the button to download my file, if I refresh the page I only have the option to prepare the download again.

It looks like this bug is actually present in the production download component that is live for Atomic/Self-hosted as well.

I did some debugging and it appears that although the logic is in place to determine if a download is in progress, once the download finishes, it will automatically return renderConfirm() because the following conditions are being met, and the order of the if statements in this block on lines 259-276:

	const render = () => {
		if ( ! isDownloadInfoRequestComplete ) {
			return <Loading />;
		} else if (
			( isOtherDownloadInfo && ! isGranularRestore ) ||
			( downloadProgress === undefined && isDownloadURLNotReady )
		) {
			return renderConfirm();
		} else if ( downloadProgress !== undefined && isDownloadURLNotReady ) {
			if ( ! userRequestedDownload ) {
				setUserRequestedDownload( true );
			}
			return renderInProgress( downloadProgress );
		} else if ( ! isDownloadURLNotReady ) {
			return renderReady();
		}
		return renderError();
	};

Again, this really only happens if you click "Create download", then refresh the page, and wait for the download to complete. I was able to resolve this by ordering the if statements as follows (and adding && userRequestedDownload to the condition for renderReady()):

	const render = () => {
		if ( ! isDownloadInfoRequestComplete ) {
			return <Loading />;
		}
		if ( downloadProgress !== undefined && isDownloadURLNotReady ) {
			if ( ! userRequestedDownload ) {
				setUserRequestedDownload( true );
				setDownloadFlowImageSrc( JetpackDownloadReadySVG );
			}
			return renderInProgress( downloadProgress );
		} else if ( ! isDownloadURLNotReady && userRequestedDownload ) {
			return renderReady();
		} else if (
			( isOtherDownloadInfo && ! isGranularRestore ) ||
			( downloadProgress === undefined && isDownloadURLNotReady )
		) {
			return renderConfirm();
		}
		return renderError();
	};

This way, the order of precedence is renderInProgress > renderReady > renderConfirm. This makes sense to me because it will also ensure that the correct renderInProgress card is rendered correctly when a download is indeed in progress. Currently if you refresh the page, it will display the renderReady card even if a download is already in progress.

I'd be curious on your thoughts and if you think this is a good approach for correcting this issue as well as implementing this on the download component that is live in production now.