Alert user if they have unsaved changes

[gerrycampion]

Howto: https://javascript.plainenglish.io/how-to-alert-a-user-before-leaving-a-page-in-react-a2858104ca94

AC

• If a rule is dirty (does not match the rule saved in the database) and the user tries to navigate away from the page, they should receive a notification that their progress has not been saved.
• Rule Editor should notify the user when they try to select a new rule if the current rule has been edited without being saved or discarded.

[gerrycampion]

Problem
The rue editor does not select any other rule if an opened rule is not according to schema . Clicking multiple times or idle waiting also does not work.

Steps To Reproduce

open rule editor
select any rule
in edit pane change to rule so it is not according to schema.
Now try selecting any other rule from the left rules pane
Following above steps you should be able to note that, selecting a new rule does not work anymore.

Recommendations
Rule Editor should notify the user when they try to select a new rule if the current rule has been edited without being saved or discarded.