Merge pull request #11683 from rtibbles/metered_connection

move MeteredConnectionNotificationModal to Library Page & conditionally render "Other Libraries"
learningequality · Jan 5, 2024 · f730c3d · f730c3d
2 parents 3f9b0b1 + 45d4580
commit f730c3d
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 8 deletions.
diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
@@ -51,8 +51,6 @@
       @cancel="languageModalShown = false"
     />
 
-    <MeteredConnectionNotificationModal />
-
   </div>
 
 </template>
@@ -69,7 +67,6 @@
   import { LearnerDeviceStatus } from 'kolibri.coreVue.vuex.constants';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { isTouchDevice } from 'kolibri.utils.browserInfo';
-  import MeteredConnectionNotificationModal from 'kolibri-common/components/MeteredConnectionNotificationModal';
   import AppBar from '../AppBar';
   import StorageNotification from '../StorageNotification';
   import useUserSyncStatus from '../../composables/useUserSyncStatus';
@@ -78,7 +75,6 @@
     name: 'AppBarPage',
     components: {
       AppBar,
-      MeteredConnectionNotificationModal,
       LanguageSwitcherModal,
       ScrollingHeader,
       SideNav,

diff --git a/kolibri/plugins/learn/assets/src/composables/useDeviceSettings.js b/kolibri/plugins/learn/assets/src/composables/useDeviceSettings.js
@@ -1,5 +1,8 @@
-import { computed } from 'kolibri.lib.vueCompositionApi';
+import { computed, ref } from 'kolibri.lib.vueCompositionApi';
 import store from 'kolibri.coreVue.vuex.store';
+import plugin_data from 'plugin_data';
+
+const allowDownloadOnMeteredConnection = ref(plugin_data.allowDownloadOnMeteredConnection);
 
 export default function useDeviceSettings() {
   const allowGuestAccess = computed(() => store.getters.allowGuestAccess);
@@ -8,5 +11,6 @@ export default function useDeviceSettings() {
   return {
     allowGuestAccess,
     canAccessUnassignedContent,
+    allowDownloadOnMeteredConnection,
   };
 }
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -10,6 +10,10 @@
         isOnMyOwnUser
         @cancel="hideWelcomeModal"
       />
+      <MeteredConnectionNotificationModal
+        v-else-if="usingMeteredConnection"
+        @update="(value) => allowDownloadOnMeteredConnection = value"
+      />
     </transition>
     <LearnAppBarPage
       :appBarTitle="appBarTitle"
@@ -76,7 +80,7 @@
           />
           <!-- Other Libraries -->
           <OtherLibraries
-            v-if="!deviceId && isUserLoggedIn"
+            v-if="showOtherLibraries"
             data-test="other-libraries"
             :injectedtr="injecttr"
           />
@@ -166,12 +170,15 @@
   import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
   import { ContentNodeResource } from 'kolibri.resources';
   import { mapState, mapGetters } from 'vuex';
+  import MeteredConnectionNotificationModal from 'kolibri-common/components/MeteredConnectionNotificationModal.vue';
+  import appCapabilities, { checkCapability } from 'kolibri.utils.appCapabilities';
   import SidePanelModal from '../SidePanelModal';
   import SearchFiltersPanel from '../SearchFiltersPanel';
   import { KolibriStudioId, PageNames } from '../../constants';
   import useCardViewStyle from '../../composables/useCardViewStyle';
   import useContentLink from '../../composables/useContentLink';
   import useCoreLearn from '../../composables/useCoreLearn';
+  import useDeviceSettings from '../../composables/useDeviceSettings';
   import {
     currentDeviceData,
     setCurrentDevice,
@@ -204,6 +211,7 @@
       ChannelCardGroupGrid,
       SidePanelModal,
       LearningActivityChip,
+      MeteredConnectionNotificationModal,
       ResumableContentGrid,
       SearchResultsGrid,
       SearchFiltersPanel,
@@ -218,6 +226,7 @@
       const router = currentInstance.$router;
 
       const { isUserLoggedIn, isCoach, isAdmin, isSuperuser } = useUser();
+      const { allowDownloadOnMeteredConnection } = useDeviceSettings();
       const {
         searchTerms,
         displayingSearchResults,
@@ -361,6 +370,7 @@
       showLibrary();
 
       return {
+        allowDownloadOnMeteredConnection,
         canAddDownloads,
         canDownloadExternally,
         displayingSearchResults,
@@ -402,6 +412,7 @@
         isLocalLibraryEmpty: false,
         metadataSidePanelContent: null,
         mobileSidePanelIsOpen: false,
+        usingMeteredConnection: true,
       };
     },
     computed: {
@@ -421,6 +432,19 @@
           window.localStorage.getItem(welcomeDismissalKey) !== 'true'
         );
       },
+      showOtherLibraries() {
+        const validUser = !this.deviceId && this.isUserLoggedIn;
+        if (!validUser) {
+          return false;
+        }
+        if (!checkCapability('check_is_metered')) {
+          return true;
+        }
+        if (this.allowDownloadOnMeteredConnection) {
+          return true;
+        }
+        return !this.usingMeteredConnection;
+      },
       channelsLabel() {
         if (this.deviceId) {
           if (this.deviceId === this.studioId) {
@@ -481,6 +505,18 @@
       if (window.sessionStorage.getItem(welcomeDismissalKey) !== 'true') {
         this.$store.commit('SET_WELCOME_MODAL_VISIBLE', true);
       }
+
+      // parallels logic for showOtherLibraries
+      if (
+        !this.deviceId &&
+        this.isUserLoggedIn &&
+        !this.allowDownloadOnMeteredConnection &&
+        checkCapability('check_is_metered')
+      ) {
+        appCapabilities.checkIsMetered().then(isMetered => {
+          this.usingMeteredConnection = isMetered;
+        });
+      }
     },
     methods: {
       hideWelcomeModal() {

diff --git a/kolibri/plugins/learn/kolibri_plugin.py b/kolibri/plugins/learn/kolibri_plugin.py
@@ -64,6 +64,9 @@ def plugin_data(self):
         from kolibri.core.discovery.well_known import CENTRAL_CONTENT_BASE_INSTANCE_ID
 
         return {
+            "allowDownloadOnMeteredConnection": get_device_setting(
+                "allow_download_on_metered_connection"
+            ),
             "allowGuestAccess": get_device_setting("allow_guest_access"),
             "allowLearnerDownloads": get_device_setting(
                 "allow_learner_download_resources"

diff --git a/packages/kolibri-common/components/MeteredConnectionNotificationModal.vue b/packages/kolibri-common/components/MeteredConnectionNotificationModal.vue
@@ -87,8 +87,6 @@
           // if we only include one of the keys for the extra_settings object
           client({ method: 'GET', url: this.settingsUrl })
             .then(({ data }) => {
-              console.log('mounted', isMetered);
-              console.log(data);
               this.extra_settings = data.extra_settings;
               this.selected = this.extra_settings.allow_download_on_metered_connection
                 ? Options.USE_METERED
@@ -116,6 +114,7 @@
           data: { extra_settings },
         })
           .then(() => {
+            this.$emit('update', allow_download_on_metered_connection);
             window.sessionStorage.setItem(meteredNetworkModalDismissedKey, true);
             this.dismissed = true;