Update device settings page to better handle server reload and force page refresh for settings changes

[rtibbles]

Summary

• Updates the useDeviceRestart composable to play better with the Kolibri global disconnection state checking
• Prevent users from editing paths based on whether the device can be restarted, as well as whether content is remotely managed
• Remove restriction for content path editing for non-loopback IPs
• Do a proper PATCH in the device setting api.js to prevent unnecessary saves
• Display a modal to the user while the device is restarting
• If a save has happened, refresh the page - if the device was restarted, wait until the restart happened before refreshing.

References

Fixes #11400

Reviewer guidance

Go to the device settings page.
Press the save button, see that nothing happens (except a pop up - maybe we should stop that too?)
Make a change to the settings that doesn't require a restart - see that the page refreshes after.
Make a change to the settings that does require a restart - see that a modal displays while the restart is happening, and that the page refreshes after.

Screencast.from.10-12-2023.04.08.02.PM.webm

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0b6.dev0_git.152.gf7a60ef8.pex
Windows Installer (EXE)	kolibri-0.16.0b6.dev0+git.152.gf7a60ef8-unsigned.exe
Debian Package	kolibri_0.16.0b6.dev0+git.152.gf7a60ef8-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0b6.dev0+git.152.gf7a60ef8-0.3.0.dmg
Android Package (APK)	kolibri-0.16.0b6.dev0+git.152.gf7a60ef8-0.1.0-debug.apk
TAR file	kolibri-0.16.0b6.dev0+git.152.gf7a60ef8.tar.gz
WHL file	kolibri-0.16.0b6.dev0+git.152.gf7a60ef8-py2.py3-none-any.whl

[radinamatic]

Tested on Ubuntu 20.04:

Press the save button, see that nothing happens (except a pop up - maybe we should stop that too?) ✔️

Agreed on removing the snackbar notification that the settings have been updated when no changes were made. On another hand, snackbar notification is not appearing when other changes are made (like for External devices or Default landing page).

Make a change to the settings that doesn't require a restart - see that the page refreshes after. ✔️

Make a change to the settings that does require a restart - see that a modal displays while the restart is happening, and that the page refreshes after. ✔️

Will do the test on Android next.

[radinamatic]

snackbar notification is not appearing when other changes are made (like for External devices or Default landing page).

I did not see snackbar notifications for these 2 options on Ubuntu, but I do see a brief flash of them on Android, too brief to actually be readable... 🤔

Implemented fixes are working on Android too otherwise, My downloads option appears in the menu after the reload. 👍🏽
One thing I'm still unclear is if there's a plan to have the sticky bar at the bottom for the Save changes button on Android? On narrow screens it's a lot of scrolling and sometimes user may even forget to do it (happened to me too) 😅

[rtibbles]

snackbar notification is not appearing when other changes are made (like for External devices or Default landing page).

Interesting - I don't think anything I did would have caused that, but I'll fix it anyway, along with not showing the notification when no changes have actually been made.

[rtibbles]

One thing I'm still unclear is if there's a plan to have the sticky bar at the bottom for the Save changes button on Android? On narrow screens it's a lot of scrolling and sometimes user may even forget to do it (happened to me too) 😅

I think that should be addressed in ongoing Bottom Bar vs Bottom Navigation Bar discussions/fixes that @marcellamaki is doing in collaboration with @jtamiace

[rtibbles]

I did not see snackbar notifications for these 2 options on Ubuntu, but I do see a brief flash of them on Android, too brief to actually be readable... 🤔

I am seeing these - so I think it may just be a case of the refresh happening too fast before the snackbar appears.

[LianaHarris360]

One thing I noticed is that whenever I add a new storage location and save it, after the device restarts, the new storage location is shown. But if I navigate away from the page and go back, the storage location is no longer there.

I did not press the save changes button in the video but I do want to note that this happens even if that button is pressed after adding a new storage location.

devicesettings.mov

[rtibbles]

OK, behaviour should be updated now to make the snackbar work as expected, to prevent the issues that @LianaHarris360 reported which were caused by the cache object not being up to date.

[radinamatic]

Now we are talking, snackbars visible (and long enough to be read) on each settings change (and not appearing when no changes were made), prior to page reload. 👍🏽 Actually the latter could also be avoided by making the Save changes button disabled until there is an actual change in a setting 😉

Issue noted by @LianaHarris360 also confirmed as fixed.

Would it be possible to sneak in one more change, I'm guessing it's not a big push: when disabling/enabling pages the same message appears in the modal after unchecking and checking. Maybe when the user is re-enabling (checking) we could skip the first phrase: When you uncheck a page, it will become invisible to users even if they have permission to access it. ?

check-uncheck.mp4

[rtibbles]

Would it be possible to sneak in one more change, I'm guessing it's not a big push: when disabling/enabling pages the same message appears in the modal after unchecking and checking. Maybe when the user is re-enabling (checking) we could skip the first phrase: When you uncheck a page, it will become invisible to users even if they have permission to access it. ?

This would require a bit more of a rework than first appears, because we'd have to have the conditional for when plugins are disabled, plugins are enabled, and when plugins are being both enabled and disabled.

I also think the text is insufficient if we just remove the uncheck warning, and the unused string that is available is too verbose. I think let's file a follow up issue for this instead.

[radinamatic]

I also think the text is insufficient if we just remove the uncheck warning, and the unused string that is available is too verbose. I think let's file a follow up issue for this instead.

Agreed that it is not ideal, just enough for a temporary change that does not require a new string. All is good with this PR then, I'll open the issue for follow-up! 💯

[radinamatic]

Manual QA passes, good to go! 💯 🎉

[marcellamaki]

Code read through makes sense to me. Thanks @LianaHarris360 and @radinamatic for the reviews! Since manual QA passes, I think we can go ahead and merge this.