Backup: Add backup storage UI

[Initsogar]

Changes proposed in this Pull Request:

• Add site storage size and storage limit on backup admin page
• Add progress bar with different colors based on % of storage usage
• Adjust new layout to include the new storage UI
• When storage usage is above 65%, show a CUT with add-on storage upgrade

What's next?

The following features will be address in a new PR:

• Add days of backups saved below the storage meter.
• Backups stopped related messages on main title and CUT.

Screenshots

Description	Screenshot
Admin page
Normal (< 65% used storage)
Warning (65% - 80% used storage)
Critical (80%-100% used storage)
Full (> 100% used storage)

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

• peaFOp-wy-p2
• p1HpG7-jQY-p2

Does this pull request change what data or activity we track or use?

No

Unit testing:

You can run unit testing using the following command:

• JS: jetpack test packages/backup js
• PHP: jetpack test packages/backup php

Testing instructions:

• Spin up a Jurassic Ninja site with Jetpack Beta, using Backup branch add/backup-storage-ui with a backup plan like Jetpack Backup (1 GB or 10 GB).
• Navigate to Jetpack -> VautlPress Backup
• Once the first backup completes, you should see the main page of the plugin, including the storage meter.
• Given it is a new site, it will be ~0GB used and no upsell prompt should be displayed.

To try different scenarios for the storage meter, you could try to upload big files to your site or dispatch the events using Redux DevTools (chrome extension). After installing it, follow these steps:

• Open the extension in Chrome
• In the dropdown in the top right, select jetpack-backup-plugin
• In the bottom, click on >_ option to show the dispatcher.
  
• It should look like this:

• Then in the dispatcher editor, you can set the used storage like this (the size is represented in bytes):

{
    type: 'SITE_BACKUP_SIZE_GET_SUCCESS',
    payload: {
        size: 10737418240
    }
}

• So if you have a site with 10 GB, you can use the following sizes to test the different scenarios:
  • Normal (< 65%): 1073741824 (1GB)
  • Warning (65% - 80%): 7516192768 (7GB)
  • Critical (80%-100%): 9663676416 (9GB)
  • Full (> 100%): 10737418240 (10 GB)

[github-actions]

Are you an Automattician? You can now test your Pull Request on WordPress.com. On your sandbox, run bin/jetpack-downloader test jetpack add/backup-storage-ui to get started. More details: p9dueE-5Nn-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ⚠️ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: February 7, 2023.
• Scheduled code freeze: January 31, 2023.

---

Backup plugin:

• Next scheduled release: February 7, 2023.
• Scheduled code freeze: January 31, 2023.

[keoshi]

First off, thank you so much for all the work that went into this, @Initsogar! The detailed instructions are wonderful as well.

Everything looks great to me in the testing that I did. Noticed some minor things which I'll list below, but none are blocking; more like nice to haves if we want to create follow-up PRs.

Zero character shows up — bug?

While the first backup is being created a zero (0) appears in the section created for the storage UI; see below:

Grid positioning

The new storage UI seems to take 6 columns of the existing grid, instead of the last 5 as intended. This one is on me for not having documented this more in detail...sorry about that.

See the following image where the top is the design and below what's in the PR right now, with a red rectangle of where the storage UI should be placed.

This might seem confusing or counter-intuitive, but by adding a full empty column in between the left and right sections, we're creating more opportunities to draw the eye to the storage UI.

Heading in warning state

Saw that you added variable headings for different states — very nice touch. The warning state is missing a custom heading though. Wonder if we could add this one:

Cloud storage is almost full

[Initsogar]

I was thinking that Cloud storage is almost full fits better for storage usage between 80%-100% (Critical).

@Initsogar This sounds wonderful to me!

@keoshi Great! Thanks for the feedback.

• Heading in warning state
  Just added the Cloud storage is almost full when the storage usage is 80%-100% (Critical).

[jwebbdev]

Looks good to me!

[anomiex]

One minor suggestion inline. Otherwise looks ok to me from a monorepo perspective.