Update MissingResourceAlert to report sync status

kolibri/core/assets/src/core-app/apiSpec.js

@@ -105,6 +105,7 @@ import * as sync from '../views/sync/syncComponentSet';
 import PageRoot from '../views/PageRoot';
 import NotificationsRoot from '../views/NotificationsRoot';
 import useMinimumKolibriVersion from '../composables/useMinimumKolibriVersion';
+import useUserSyncStatus from '../composables/useUserSyncStatus';
 import useUser from '../composables/useUser';
 
 // webpack optimization
@@ -232,6 +233,7 @@ export default {
       useKShow,
       useMinimumKolibriVersion,
       useUser,
+      useUserSyncStatus,
     },
   },
   resources,

kolibri/plugins/learn/assets/src/views/ExamPage/index.vue

@@ -64,7 +64,7 @@
               :answerState="currentAttempt.answer"
               @interaction="saveAnswer"
             />
-            <MissingResourceAlert v-else :multiple="false" />
+            <ResourceSyncingUiAlert v-else :multiple="false" />
           </KPageContainer>
 
           <BottomAppBar :dir="bottomBarLayoutDirection" :maxWidth="null">
@@ -186,7 +186,7 @@
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
-  import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert';
+  import ResourceSyncingUiAlert from '../ResourceSyncingUiAlert';
   import useProgressTracking from '../../composables/useProgressTracking';
   import { PageNames, ClassesPageNames } from '../../constants';
   import { LearnerClassroomResource } from '../../apiResources';
@@ -208,7 +208,7 @@
       TimeDuration,
       SuggestedTime,
       ImmersivePage,
-      MissingResourceAlert,
+      ResourceSyncingUiAlert,
     },
     mixins: [responsiveWindowMixin, commonCoreStrings],
     setup() {

kolibri/plugins/learn/assets/src/views/HomePage/index.vue

@@ -2,7 +2,7 @@
 
   <LearnAppBarPage :appBarTitle="learnString('learnLabel')">
     <div v-if="!loading" id="main" role="main">
-      <MissingResourceAlert v-if="missingResources" />
+      <ResourceSyncingUiAlert v-if="missingResources" />
       <YourClasses
         v-if="displayClasses"
         class="section"
@@ -58,8 +58,8 @@
   import { get } from '@vueuse/core';
   import client from 'kolibri.client';
   import urls from 'kolibri.urls';
-  import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert';
   import useUser from 'kolibri.coreVue.composables.useUser';
+  import ResourceSyncingUiAlert from '../ResourceSyncingUiAlert';
   import useChannels from '../../composables/useChannels';
   import useDeviceSettings from '../../composables/useDeviceSettings';
   import useLearnerResources, {
@@ -91,7 +91,7 @@
       ContinueLearning,
       ExploreChannels,
       LearnAppBarPage,
-      MissingResourceAlert,
+      ResourceSyncingUiAlert,
     },
     mixins: [commonLearnStrings],
     setup() {

kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue

@@ -0,0 +1,66 @@
+<template>
+
+  <MissingResourceAlert
+    :multiple="multiple"
+  >
+    <template v-if="isSyncing && isLearnerOnlyImport" #syncAlert>
+      {{ syncMessage }}
+    </template>
+  </MissingResourceAlert>
+
+</template>
+
+
+<script>
+
+  import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert.vue';
+  import useUserSyncStatus from 'kolibri.coreVue.composables.useUserSyncStatus';
+  import { SyncStatus } from 'kolibri.coreVue.vuex.constants';
+  import { createTranslator } from 'kolibri.utils.i18n';
+  import useUser from 'kolibri.coreVue.composables.useUser';
+
+  const syncStatusDescriptionStrings = createTranslator('SyncStatusDescription', {
+    syncingDescription: {
+      message: 'The device is currently syncing.',
+      context: 'Description of the device syncing status.',
+    },
+    queuedDescription: {
+      message: 'The device is waiting to sync.',
+      context: 'Description of the device syncing status',
+    },
+  });
+
+  export default {
+    name: 'ResourceSyncingUiAlert',
+    components: {
+      MissingResourceAlert,
+    },
+    setup() {
+      const { status } = useUserSyncStatus();
+      const { isLearnerOnlyImport } = useUser();
+      return {
+        status,
+        isLearnerOnlyImport,
+      };
+    },
+    props: {
+      multiple: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    computed: {
+      isSyncing() {
+        return this.status == SyncStatus.QUEUED || this.status == SyncStatus.SYNCING;
+      },
+      syncMessage() {
+        /* eslint-disable kolibri/vue-no-undefined-string-uses */
+        return this.status == SyncStatus.QUEUED
+          ? syncStatusDescriptionStrings.$tr('queuedDescription')
+          : syncStatusDescriptionStrings.$tr('syncingDescription');
+        /* eslint-enable */
+      },
+    },
+  };
+
+</script>

kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue

@@ -26,7 +26,7 @@
             {{ currentLesson.description }}
           </p>
         </div>
-        <MissingResourceAlert v-if="lessonResources.length > contentNodes.length" />
+        <ResourceSyncingUiAlert v-if="lessonResources.length > contentNodes.length" />
       </section>
 
       <section v-if="lessonHasResources" class="content-cards">
@@ -57,7 +57,7 @@
   import ProgressIcon from 'kolibri.coreVue.components.ProgressIcon';
   import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert';
+  import ResourceSyncingUiAlert from '../ResourceSyncingUiAlert';
   import useContentLink from '../../composables/useContentLink';
   import useContentNodeProgress from '../../composables/useContentNodeProgress';
   import { PageNames, ClassesPageNames } from '../../constants';
@@ -78,7 +78,7 @@
       ContentIcon,
       ProgressIcon,
       LearnAppBarPage,
-      MissingResourceAlert,
+      ResourceSyncingUiAlert,
     },
     mixins: [commonCoreStrings, commonLearnStrings, responsiveWindowMixin],
     setup() {

packages/kolibri-common/components/MissingResourceAlert.vue

@@ -7,16 +7,21 @@
       type="warning"
       :style="{ marginBottom: 0, marginTop: '8px' }"
     >
-      <span>
-        {{ coreString(
-          multiple ? 'someResourcesMissingOrNotSupported' :
-          'resourceNotFoundOnDevice'
-        ) }}
+      <span v-if="$slots.syncAlert">
+        <slot name="syncAlert"></slot>
+      </span>
+      <span v-else>
+        <span>
+          {{ coreString(
+            multiple ? 'someResourcesMissingOrNotSupported' :
+            'resourceNotFoundOnDevice'
+          ) }}
+        &nbsp;
+          <KButton appearance="basic-link" @click="open = true">
+            {{ $tr('learnMore') }}
+          </KButton>
+        </span>
       </span>
-              &nbsp;
-      <KButton appearance="basic-link" @click="open = true">
-        {{ $tr('learnMore') }}
-      </KButton>
     </UiAlert>
     <KModal
       v-if="open"