Discard rule changes modal

[samanthagottlieb]

What does this change?

This adds a Revert modal that allows the user to review their unpublished changes before discarding them.

Previously, when a live rule has unpublished changes, a Discard unpublished changes button would appear in the 'Rule Status' bar - button added here. Clicking this would immediately revert the draft rule to its previous state, before the changes were made. However, the user might not be sure which unpublished changes they are discarding. The Revert modal will show a before and after diff to the user on clicking the Discard unpublished changes button, allowing them to review before confirming discard.

How to test

To test this as a user:

• publish a draft rule
• make changes to the live rule - the Discard unpublished changes button should appear in the 'Rule Status' bar
• click the Discard unpublished changes button - the Revert modal should appear, showing a diff with before and after changes were made
• clicking Cancel should return you back to editing the rule, with the unpublished changes still there
• clicking Discard changes should revert to the most recently published state of the live rule

This can also be tested by running the client app tests with npm run test.

Images

Before

• clicking Discard unpublished changes would instantly discard changes

After

• a modal pops up for the user to review the changes they'll be discarding

[samanthagottlieb]

Tested locally, works great. Feels really good to see what's going to happen.

One general non-blocking comment – I was a bit confused to see that the left hand side column represented what would happen if I clicked revert, and the right hand side was what currently existed. It's the other way around in the 'publish' modal, I suspect b/c for left to right readers we associated time moving from left to right (left: what currently is, right: what will happen.)

Might be overthinking it, wonder if lhs as 'before revert' and rhs as 'after revert' would be clearer ↔️ 🤔

Yes I had wondered the same, and was on the fence about which way round was better. But that's a good point about moving from left to right - I've changed them around and made the modal text a bit more descriptive about what's going on.

It now looks like this (have also added more changes compared to the screenshot in original PR description):