Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

My Jetpack: Add Backup 'needs-attention' red bubble and notice banner #40512

Merged
merged 27 commits into from
Dec 19, 2024

Conversation

elliottprogrammer
Copy link
Contributor

@elliottprogrammer elliottprogrammer commented Dec 8, 2024

This PR add a red bubble and notice/banner when the backup 'needs-attention' status is triggered (when a backup failure is detected).

Screenshot:

Screen Shot 2024-12-11 at 08 20 58

Fixes: https://github.com/Automattic/jetpack-roadmap/issues/1430

Proposed changes:

  • Adds a red bubble when a BAckup failure is detected.
  • Displays a red bubble notice/banner (Top of My Jetpack page) with message, primary CTA the says "Read troubleshooting guide" and secondary CTA that says "Contact support".

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

Project Thread: pbNhbs-bJN-p2
Design post: p1HpG7-umC-p2

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

No

Testing instructions:

Testing notes: To test this PR, basically we need to force a backup to fail. I tried various ways to make a backup fail, but most my attempts were unsuccessful. The only way I've been able to make a failed backup is by making the site unaccessible, and then queueing the backup to run from the MC Rewind Debugger. To make the site unaccessible, I simply killed my Jurassic Tube tunneling, but there are other various ways to do this such as by stopping Apache, blocking port 80, inserting die() or exit() command in index.php, etc..
There is another promising way of making a backup fail due to a "No such file" error, but I believe the method only works on a self-hosted site that is Not running within a Docker container. (I was not able to get it to work on my local dev environment or with Jurassic Ninja (confirmed it does not work on a JN site here: p1733501055164569/1733349201.389539-slack-CS8UYNPEE )
Instructions on how to carry out this method are here: Generating “No such file” errors during backup: pbuNQi-1Wi-p2
If you know of any other ways to trigger a backup failure, please let me know!

Testing steps:

  • Run this PR branch locally in a local Jetpack dev environment (via Docker & JurassicTube or Ngrok tunneling).
  • Once Jetpack is up and running, ensure it is fully connected. (Also ensure you are NOT sandboxed, and NOT using STORE_SANDOX or anything like that.)
  • Purchase a Backup plan (using A11N credits).
  • Wait for your first full backup to complete.
  • Kill your Jurassic Tube or Ngrok tunneling, so the site is no longer accessible via the tunneling domain.
  • Open your site in the MC Rewind Debugger: PCYsg-lNo-p2
  • Queue up a new full backup on your site.
  • Wait until the full backup completes:
    • in the MC Rewind debugger page you can find the current backup in the "Recent Full Backup Attempts" section and wait for it to show that is done (it should finish with the status 'not-accessible').
    • You can also open the WPCOM API Developer Console: https://developer.wordpress.com/docs/api/console/. (sign in)
      • Check the rewind backups endpoint at wpcom/v2, endpoint: /sites/239657125/rewind/backups?force=wpcom, and verify the status of the last backup is not-available.
  • Now re-connect your Jurassic Tube or Ngrok tunneling.
  • Open your site ad go to My Jetpack page.
  • At the top of My Jetpack you should see a Red bubble and notice banner: (See screenshot)

Screen Shot 2024-12-18 at 12 17 54

  • Confirm the button to "Read troubleshooting guide" points to: https://jetpack.com/support/backup/troubleshooting-jetpack-backup/
  • Confirm the "Contact support" button points to: https://jetpack.com/support/
  • Ensure the Notice/banner looks good in all viewport sizes & mobile sizes.
  • Look at the Backup product card. The status of the backup card should be "Needs attention". The card should have a red border around it, and the CTA should say, "Troubleshoot" which points to the Jetpack.com Troubleshooting backup page.
  • Also the Backup card should say, "The last backup attempt failed." with a tooltip. And also say "Check out our troubleshooting guide" (see screenshot:)
  • Click to open the tooltip. Verify it looks like the screenshots below:

Screen Shot on 2024-12-18 at 12-15-52

Screen Shot on 2024-12-18 at 12-16-12

  • Next, disconnect Jetpack. The red bubble and notice should now be the "Missing site connection" notice. Verify there are no console errors.
  • Now establish a site-only connection. In this case there should now be 2 red bubbles. 1 for missing user connection, and 1 for Backup needs-attention, but the missing user connection notice is higher priority so it should be showing. Ensure there are no console errors.
  • Now re-establish user connection, and you should now see the Backup needs-attention notice again.

Note: In a followup PR I think I should implement allowing the user to optionally close(x) each red bubble notice (persistent for a temporary amount of time).

@elliottprogrammer elliottprogrammer self-assigned this Dec 8, 2024
@elliottprogrammer elliottprogrammer changed the base branch from trunk to add/backup-needs-attention-status December 8, 2024 05:16
Copy link
Contributor

github-actions bot commented Dec 8, 2024

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

  • To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the add/backup-redbubble-needs-attention-notice branch.

    • For jetpack-mu-wpcom changes, also add define( 'JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN', true ); to your wp-config.php file.
  • To test on Simple, run the following command on your sandbox:

    bin/jetpack-downloader test jetpack add/backup-redbubble-needs-attention-notice
    
    bin/jetpack-downloader test jetpack-mu-wpcom-plugin add/backup-redbubble-needs-attention-notice
    

Interested in more tips and information?

  • In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
  • Read more about our development workflow here: PCYsg-eg0-p2
  • Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

Copy link
Contributor

github-actions bot commented Dec 8, 2024

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.
  • ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  • 🔴 Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
  • ✅ 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.


Follow this PR Review Process:

  1. Ensure all required checks appearing at the bottom of this PR are passing.
  2. Choose a review path based on your changes:
    • A. Team Review: add the "[Status] Needs Team Review" label
      • For most changes, including minor cross-team impacts.
      • Example: Updating a team-specific component or a small change to a shared library.
    • B. Crew Review: add the "[Status] Needs Review" label
      • For significant changes to core functionality.
      • Example: Major updates to a shared library or complex features.
    • C. Both: Start with Team, then request Crew
      • For complex changes or when you need extra confidence.
      • Example: Refactor affecting multiple systems.
  3. Get at least one approval before merging.

Still unsure? Reach out in #jetpack-developers for guidance!

@github-actions github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Dec 8, 2024
@elliottprogrammer elliottprogrammer added [Status] In Progress [Feature] Backup & Scan and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Dec 8, 2024
@elliottprogrammer elliottprogrammer requested a review from a team December 8, 2024 15:18
@github-actions github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Dec 8, 2024
Copy link
Contributor

@CodeyGuyDylan CodeyGuyDylan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When testing this, I noticed that the Backup day in the body of the notice is a day ahead of my local day (i.e., it tested this on Dec 9th, but it's saying Dec 10th was the last time it tried to backup the site)
image

I assume it's going off UTC time, how hard would it be to localize this? I updated my site's timezone just to be safe, but the day was still wrong.

Also, I don't know if we've had a notice like this before with this much content, the mobile styling needs to be addressed because this looks pretty bad 😅
image

(I think I designed this so that's on me)

Other than those things, this tested correctly and I think the code looks great 😄

@CodeyGuyDylan
Copy link
Contributor

Note: In a followup PR I think I should implement allowing the user to optionally close(x) each red bubble notice (persistent for a temporary amount of time). What do you think? Any thoughts?

I think that would be a great idea! As a user, I hate non-dismissible notices

@elliottprogrammer
Copy link
Contributor Author

elliottprogrammer commented Dec 9, 2024

Note: In a followup PR I think I should implement allowing the user to optionally close(x) each red bubble notice (persistent for a temporary amount of time). What do you think? Any thoughts?

I think that would be a great idea! As a user, I hate non-dismissible notices

I'm just realizing that in my comment, I make it sound like this is All my idea, lol! 🤦‍♂️. This is unintentional and I want to clarify that @CodeyGuyDylan made this suggestion (allowing the notice to close) in a previous related PR (Displaying expired plan notices), and as I'm developing more of these notices, I'm agreeing more and more that it should be implemented. 😊

@CodeyGuyDylan
Copy link
Contributor

Note: In a followup PR I think I should implement allowing the user to optionally close(x) each red bubble notice (persistent for a temporary amount of time). What do you think? Any thoughts?

I think that would be a great idea! As a user, I hate non-dismissible notices

I'm just realizing that in my comment, I make it sound like this is All my idea, lol! 🤦‍♂️. This is unintentional and I want to clarify that @CodeyGuyDylan made this suggestion (allowing the notice to close) in a previous related PR (Displaying expired plan notices), and as I'm developing more of these notices, I'm agreeing more and more that it should be implemented. 😊

I did not remember suggesting this 😆

Copy link
Contributor

@CodeyGuyDylan CodeyGuyDylan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm still seeing some design issues on the specific screen widths of 481px-585px, below is the worst case scenario:
image

I think this looks alright, we may want to confirm with design before shipping though if you haven't already, they may have some tweaks 😄
image

Note: I think we could potentially replace Save every change with the error in this case 🤔 it looks a bit jumbled with both there

@elliottprogrammer
Copy link
Contributor Author

elliottprogrammer commented Dec 12, 2024

Hey @keoshi! 👋,
Design review requested:
From feedback it was suggested that we add some sort of content within the Backup product card stating the reason why Backup "Needs attention" & troubleshooting.
So from that, I added an error icon with text saying, "The last backup attempt failed". And below that I added the "Error code: [the error code/message returned from the server]"
Can you take a look and provide any feedback or suggestions? Thanks! 🙂

Screenshot:

Screen Shot on 2024-12-11 at 15-46-13

@keoshi
Copy link
Contributor

keoshi commented Dec 12, 2024

Thanks for the ping @elliottprogrammer, appreciate it!

I added an error icon with text saying, "The last backup attempt failed".

Love this and it more closely connects the card to the message above. Thanks for adding this!

And below that I added the "Error code: [the error code/message returned from the server]"

This one I have some reservations about, just because it makes it look more technical than it should be. If we can indeed point to a specific error — not-accessible in this case —, couldn't we just make that part of the message above, like so:

Backup failed: Your site was inaccessible during the last attempt.

This way we lead with the problem and then explain why that happened. This will clean up the card and, by consequence, make the troubleshoot button stand out that much more.

Also understand this could be a lot more work with mapping different sentences for every possible error state the API might throw, so feel free to push back on what I said above. :)

Thanks for being such good shepherds of great UX, @elliottprogrammer and @CodeyGuyDylan !

@elliottprogrammer
Copy link
Contributor Author

elliottprogrammer commented Dec 12, 2024

Awesome, thanks @keoshi for your quick response and feedback 🙌

Yes good point, I agree including the error code makes it unnecessarily technical (and not so user friendly).

We do provide the error code in this way in the "Backup failed" email we send to users, but it makes more sense there in that case because we are specifically telling the user that they should share the error code/message with their hosting provider who may be able to help them resolve the issue..

The not-accessible error code was used as an example because it is a common one, but there are various other error codes (Rewind errors) that either I don't know what they mean, or are too vague, such as: unknown_error, vp_can_transfer, host_not_supported, vp_active_on_site, and there are other various individual Backup error codes that come from the VaultPress API (which I don't have access to) so I don't even know what the error codes are. That would take additional time to reach out to the Backup team to ask them what all the possible error codes are, and what they mean, and IMO I thinking it's out of scope and not worth the time and effort. What are your thoughts @CodeyGuyDylan & @keoshi ?

Maybe the best route for now would be to just leave the error code/message out and not even mention it? So instead, if Rewind is throwing the error and unable to even attempt a backup, We can say, "Unable to create a backup", or if the Last backup attempt itself failed we can say, "The last backup attempt failed". So it would just be either one of those messages and the CTA that says "Troubleshoot", which links to: https://jetpack.com/support/backup/troubleshooting-jetpack-backup/
What do you think?

@elliottprogrammer
Copy link
Contributor Author

Update: I'm currently working to try to map all the possible Backup/Rewind error codes, and translate them into human readable descriptions... So we can at least give the user a basic idea/reason why the backup attempt failed. Standby...

@keoshi
Copy link
Contributor

keoshi commented Dec 13, 2024

@elliottprogrammer Thanks for doing that!

That would take additional time to reach out to the Backup team to ask them what all the possible error codes are, and what they mean, and IMO I thinking it's out of scope and not worth the time and effort.

Agreed this could either be tackled later or, anything that's super vague and/or doesn't make sense to expose, maybe we can just show a generic error?

there are various other error codes (Rewind errors) that either I don't know what they mean, or are too vague, such as: unknown_error, vp_can_transfer, host_not_supported, vp_active_on_site, and there are other various individual Backup error codes that come from the VaultPress API (which I don't have access to) so I don't even know what the error codes are.

In parallel with the above, I wonder if there's anyone of your team @jwebbdev that would be able to support Bryan. We could even create a FG page document these errors, what they mean, and what the human equivalent copy should be? Thanks in advance!

@elliottprogrammer
Copy link
Contributor Author

elliottprogrammer commented Dec 13, 2024

there are various other error codes (Rewind errors) that either I don't know what they mean, or are too vague, such as: unknown_error, vp_can_transfer, host_not_supported, vp_active_on_site, and there are other various individual Backup error codes that come from the VaultPress API (which I don't have access to) so I don't even know what the error codes are.

In parallel with the above, I wonder if there's anyone of your team @jwebbdev that would be able to support Bryan. We could even create a FG page document these errors, what they mean, and what the human equivalent copy should be? Thanks in advance!

Thanks Filipe! Yeah, so I found human readable error descriptions for the (wpcom/v1.1) /sites/%d/rewind/ endpoint here:

case 'missing_plan':
	return 'The Jetpack site is missing a Backup subscription.';
case 'no_connected_jetpack':
	return 'The Jetpack site doesn\'t appear to be connected. It needs to be connected in order for Rewind to work.';
case 'no_connected_jetpack_with_credentials':
	return 'The Jetpack site doesn\'t appear to be connected. It needs to be connected in order for Rewind to work fully, although successful Backups may still appear in the logs.';
case 'vp_active_on_site':
	return 'VaultPress is currently active for the Jetpack site. VaultPress and Backup cannot be run simultaneously. ' .
		'In order to activate Backup the customer will need to deactive VaultPress.';
case 'vp_can_transfer':
	return 'VaultPress is currently active for the Jetpack site but we have the ability to automatically transfer it over to Rewind. ' .
	        'The customer will need to manually trigger the transfer.';
case 'host_not_supported':
	return 'Backup doesn\'t currently support the host that the Jetpack site is hosted on.';
case 'multisite_not_supported':
	return 'Backup can\'t be activated on multi-site installations, neither the network site or its sub-sites.';

But where I'm not finding much is for the (wpcom/v2) /sites/%d/rewind/backups endpoint:
In the response, each backup record has a status property that can be one of 'started', 'finished', 'no-credentials', 'backups-deactivated', 'no-credentials-atomic', 'credential-error', 'http-only-error', 'not-accessible', 'Kill switch active', 'error', 'error-will-retry'.

What I'm trying for, is to come up with human readable descriptions for 'no-credentials', 'backups-deactivated', 'no-credentials-atomic', 'credential-error', 'http-only-error', 'not-accessible', 'Kill switch active', 'error'. (Basically all of them Except 'started', 'finished', and `error-will-retry').
@jwebbdev, would you possibly be able to provide any insight or assistance translating these status/error codes into more helpful, somewhat human readable descriptions of what the status/error is? 😊

@elliottprogrammer
Copy link
Contributor Author

elliottprogrammer commented Dec 17, 2024

I don't seem to be getting a response to the question above, so I asked this same question in the #yamato-backups channel in Slack, here: p1734441559123969-slack-CS8UYNPEE

@elliottprogrammer
Copy link
Contributor Author

@CodeyGuyDylan ,
I pinged the Backup team and they provided me with a better understanding and descriptions of all the possible backup error codes. - here: p1734441559123969-slack-CS8UYNPEE

I've updated the code, to display more human readable descriptions (when a Backup failure occurs) within a tooltip in the Backup product card, as well as in the red bubble Notice/banner. (See screenshots:)

Screen Shot on 2024-12-18 at 12-15-52

Screen Shot on 2024-12-18 at 12-16-12

Screen Shot 2024-12-18 at 12 17 54

I've updated the PR testing instructions & screenshots. 👍

@elliottprogrammer elliottprogrammer removed the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Dec 18, 2024
CodeyGuyDylan
CodeyGuyDylan previously approved these changes Dec 18, 2024
Copy link
Contributor

@CodeyGuyDylan CodeyGuyDylan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for all your hard work on getting human readable errors! I think it looks great and functions great!

Below is the only blocking change that I found, I left a few other comments but overall this looks great! I am going to throw an approval on this as I don't want to hold up the deployment any longer. If the tooltip issue gets fixed I think this is good to go 😄 But if you'd like me to check it out again after changes just let me know

I am seeing certain screen sizes where the tooltip is off the screen like this:
image

</InfoTooltip>
</Text>
<Text variant="body-small" className={ styles.error_description }>
{ __( 'Check out our troubleshooting guide.', 'jetpack-my-jetpack' ) }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not a strong opinion, but I think this text may be unnecessary since the CTA says troubleshoot. What do you think?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, well that text is in the Figma design, so I think I should maybe keep it there, at least for now.

Screen Shot 2024-12-18 at 20 32 57

Figma design: v1IWiVmOAvI8yT8CCa4b1I-fi-4398_7392

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a copy doc? I've been told the designs aren't always the be-all end-all when it comes to copy 😅

status: status,
backup_status: lastBackupStatus,
feature: 'jetpack-backup',
message: '', //errorDescription,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we remove that commented out variable by chance?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch thanks!

*
* @return {Date} a JavaScript Date object
*/
function applyTimezone( date: string, offset: number ): Date {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could be a good util function perhaps 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, good point, moved to the utils folder. 👍

@github-actions github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Dec 19, 2024
Base automatically changed from add/backup-needs-attention-status to trunk December 19, 2024 03:44
@elliottprogrammer elliottprogrammer dismissed CodeyGuyDylan’s stale review December 19, 2024 03:44

The base branch was changed.

@elliottprogrammer elliottprogrammer merged commit 56c0fbc into trunk Dec 19, 2024
75 checks passed
@elliottprogrammer elliottprogrammer deleted the add/backup-redbubble-needs-attention-notice branch December 19, 2024 05:01
@github-actions github-actions bot removed [Status] Needs Team Review [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Dec 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants