Alert admins about unsaved facility setting changes when they try to navigate away

[radinamatic]

Observed behavior

When admins or super admins make changes in facility settings, but then navigate away without saving, those changes get lost.

Expected behavior

There should be an alert (modal or snackbar) warning them that the changes are not saved yet, and offering to save or cancel.

User-facing consequences

Users might think that the changes are applied just by checking the checkbox, and be frustrated when they find out that is not the case.

[khangmach]

hey @radinamatic

finally addressing this issue lol. There are a few issues with the approach of [cancel][save changes]. In a scenario where that modal pops up for the user's attention, the user is reminded of their form actions and can:

1. Decide to save their changes based on the reminder
2. Cancel, which I assume closes the modal (this is ambiguous)
3. Want to stay on the page and continue to adjust their settings (there's no way to do this because the only options are via 'cancel' or 'save changes')

Some common conventions: (1) Want to save your changes? [Cancel/Stay on page] [No] [Yes]

(2) Are you sure you want to leave this page? [Stay on page][Leave page]

I would go with the second approach because I don't think we have room in our modal for 3 buttons

[khangmach]

ux stackexchange article for reference: https://ux.stackexchange.com/questions/83535/should-an-unsaved-changes-dialog-in-a-web-app-contain-a-save-option

[indirectlylit]

this is a bit subtle on both the ux and technical side...

Technical challenge:

there are two kinds of 'navigating away', one which keeps you within the JS app, and another which goes to a new page on the server. The distinction is meaningless to the user, but for us it means we won't be able to use a standard kolibri modal in some cases, and would need to use the browser native alert like this.

UX challenge:

It definitely seems like there's room for this kind of 'unsaved changes' type warning.

We've already got a few different patterns and it would be great to consolidate. Examples:

• managing resources in a lesson, auto-saves as you work
• creating a quiz, does not warn if you navigate away but saves state within certain pages
• importing content, does not warn if you navigate away but saves state within certain pages
• facility settings, in-page form with 'reset' and 'save' buttons
• user device permissions, in-page full-screen modal with 'save' and 'cancel' buttons

I'd be a little concerned about coupling the concept of 'leaving a page' with 'saving changes' because so many of our flows (quizzes, lessons, import, setup wizard) are multi-page steps...

[khangmach]

I'll add a trello todo card for establishing some kind of convention for 'Unsaved changes'. Is it my correct understanding that we'd only use the browser native alert for content import/facility settings and not the others since they invoke the server in some way?

[indirectlylit]

we'd only use the browser native alert

no it's more subtle than that. Basically it would be any time we navigate across "apps" - e.g. from Learn to Coach, or from Coach to www.google.com