Prevent page exit on the create page when there are unsaved changes

[avinashupadhya99]

Closes #3567

Changes -

• Created a canDeactivate route guard for the create route
• Added a listener for reload in the create page that asks for confirmation if there are unsaved changes
• No confirmation asked for rerouting after submit but confirmation asked for manual rerouting after submit if the form values are invalid

Included a short video explaining how the changes look like -

Kubernetes.Dashboard.changes.demo.mp4

Missed mentioning that there is no confirmation dialog if there are no changes to any of the forms or if the changes are reversed.

[k8s-ci-robot]

Welcome @avinashupadhya99!

It looks like this is your first PR to kubernetes/dashboard 🎉. Please refer to our pull request process documentation to help your PR have a smooth ride to approval.

You will be prompted by a bot to use commands during the review process. Do not be afraid to follow the prompts! It is okay to experiment. Here is the bot commands documentation.

You can also check if kubernetes/dashboard has its own contribution guidelines.

You may want to refer to our testing guide if you run into trouble with your tests not passing.

If you are having difficulty getting your pull request seen, please follow the recommended escalation practices. Also, for tips and tricks in the contribution process you may want to read the Kubernetes contributor cheat sheet. We want to make sure your contribution gets all the attention it needs!

Thank you, and welcome to Kubernetes. 😃

[avinashupadhya99]

/assign @maciaszczykm

[floreks]

I'd prefer to use a custom dialog that matches our UI design here.

[avinashupadhya99]

I'd prefer to use a custom dialog that matches our UI design here.

Is there an example I can look at? Thanks

[maciaszczykm]

@floreks meant a dialog like the one that shows up when the namespace already exists. It's in the video.

[avinashupadhya99]

We'll need to prevent the page reload in the browser when the reload button is clicked and display the dialog and do a manual reload if necessary but it looks like we cannot prevent the reload. I tried out a simple experiement and as far as I know, there is no way to prevent the reload of a page without the browser confirmation dialog. I tried inserting $event.preventDefault(); in

dashboard/src/app/frontend/common/components/can-deactivate/component-can-deactivate.ts

Line 26 in b125e66

$event.returnValue = true;

instead of $event.returnValue = true; but that did not prevent the page from reloading. Please correct me if I am wrong. I came across this SO answer which also states the same - https://stackoverflow.com/a/34415095.

[floreks]

I am not sure if you will be able to hijack and stop the browser refresh this way. I'd have to check to confirm. Will try to spend some time tomorrow on this.

[floreks]

It is indeed not possible to hijack the dialog that appears before unloading the page. It's not even possible to update the text that is displayed there and it was an intentional change done by the browser devs to avoid malicious usage of such popups.

I have refactored the code to match our style and used a custom dialog for the internal view change. The overall solution was good and I liked it.

Thanks!

[codecov]

Codecov Report

Merging #6566 (2fec5e1) into master (5106f87) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #6566   +/-   ##
=======================================
  Coverage   42.55%   42.55%           
=======================================
  Files         217      217           
  Lines       10644    10644           
  Branches      177      177           
=======================================
  Hits         4530     4530           
  Misses       5851     5851           
  Partials      263      263           

[floreks]

/lgtm

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: avinashupadhya99, floreks

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [floreks]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment