move MeteredConnectionNotificationModal to Library Page & conditionally render "Other Libraries"

[rtibbles]

This PR supersedes #11602 for more convenient rebasing.

This PR is based off of release-v0.16.x and is intended for the planned patch 1 release

Summary

This PR relocates the MeteredConnectionNotificationModal that was previously added to the codebase and adjusts the logic for rendering the "Other Libraries" component in Learn > Library.

With these changes, "Other Libraries" will not render for a user on a metered connection unless they choose "Allow download on metered connection" on the MeteredConnectionNotificationModal that now appears on the Learn > Library page. If the user chooses "Do not allow download..." the OtherLibraries component should not render unless & until the user on a metered connection later changes this choice in their device settings. After dismissing the modal, it should not pop up for users again.

This PR represents a departure from the initial issue spec, as it was determined that prior plans to have the MeteredConnectionNotificationModal appear at point of download would not actually save users any data, as the content had already been loaded on their device for viewing. The solution presented here appeared to be the swiftest way to avoid unnecessarily expending a user's data without their explicit agreement.

References

• Closes Ensure metered connection notification appears at point of bandwidth usage #10662
• Extends functionality of Feature metered connection capability #10624

Reviewer guidance

There are several conditions to explore once the testing setup steps are followed:

• user is on metered connection
  • has not yet dismissed MeteredConnectionNotificationModal:
    • chooses "Allow download on metered connection":
      • upon dismissal of the modal, OtherLibraries component renders & is navigable
    • chooses "Do not allow download on metered connection":
      • upon dismissal of the modal, OtherLibraries component does not render
  • has already dismissed MeteredConnectionNotificationModal:
    • OtherLibraries only visible if "Allow download on metered connection" previously selected
    • user does not encounter modal again after dismissing
• user is not on metered connection
  • MeteredConnectionNotificationModal does not render
  • OtherLibraries renders (when applicable/available to user)

Testing as a dev -- instructions borrowed from #10624

Run yarn app-devserver to run Kolibri in the app mode. Be sure to click the initialize/ url that will come up in your console. If you want to test with the connection not being metered, update the run_kolibri_app_mode.py file's check_is_metered function to return False and restart the yarn app-devserver.

Log in as a superuser and you should see the modal the first time and never again after. The key is stored in session storage, clear it and you'll see it again if you selected to not allow connections. As is, if you click "Allow..." then you'll never see the modal again no matter what per the expected logic of the modal not showing whenever they've already said it was allowed. Until the Device Settings page is updated you won't be able to change this directly without going into the Kolibri shell and running:

from kolibri.core.device.models import DeviceSettings
settings = DeviceSettings.objects.first()
ex = settings.extra_settings
ex["allow_download_on_metered_connection"] = False
settings.extra_settings = ex
settings.save()

---

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.0b10.dev0_git.56.g0ce4fd18.pex
Windows Installer (EXE)	kolibri-0.16.0b10.dev0+git.56.g0ce4fd18-unsigned.exe
Debian Package	kolibri_0.16.0b10.dev0+git.56.g0ce4fd18-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0b10.dev0+git.56.g0ce4fd18-0.3.0.dmg
Android Package (APK)	kolibri-0.16.0b10.dev0+git.56.g0ce4fd18-0.1.0-debug.apk
TAR file	kolibri-0.16.0b10.dev0+git.56.g0ce4fd18.tar.gz
WHL file	kolibri-0.16.0b10.dev0+git.56.g0ce4fd18-py2.py3-none-any.whl

[marcellamaki]

The code here makes sense, although I did make one nice-to-have/non-blocking comment suggestion.

I have had some trouble running in app mode that I have been unable to resolve so far, but I will come back to this in the afternoon and see if I can troubleshoot to finish the manual QA portion. Otherwise will ask QA team to review

[marcellamaki]

It took me a bit to understand why !this.usingMeteredConnection was the default return here, even though when I realized, it felt "oh, duh!". The other conditional checks are very easy to follow just by reading through, and I think a very brief comment above would make this easier to understand... even something as basic (and somewhat redundant) as
// other libraries shouldn't display on metered connections unless explicitly permitted
or something along these lines

[marcellamaki]

Following up to confirm that modal pops up correctly on Library page as it should, and that the studio library doesn't load if "do not allow mobile data" selection is made. going back to the device settings and updating, the studio library then appears

[pcenov]

Hi @rtibbles, initially if I select Do not allow Kolibri to use mobile data then the 'Other libraries' section of the Library page is not being displayed as expected. However if I clear the cookies and site data, and then go back to the Library page then I am able to see the 'Other libraries' section so I'm not sure whether your instructions above are incorrect or this is an issue:

2024-01-11_16-03-23.mp4

@marcellamaki - I was not able to replicate the issue mentioned by you in Slack, but I am happy to retest this using actual devices once we have this feature enabled. :)