From 32a030b88462924ade8c982637b235e70ad4c8c9 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 19 Oct 2023 12:57:21 -0400
Subject: [PATCH 1/9] Create ResourceSyncingUiAlert around MissingResourceAlert
 to use in Learn Plugin

---
 kolibri/core/assets/src/core-app/apiSpec.js   |  2 +
 .../learn/assets/src/views/ExamPage/index.vue |  6 +-
 .../learn/assets/src/views/HomePage/index.vue |  6 +-
 .../src/views/ResourceSyncingUiAlert.vue      | 55 +++++++++++++++++++
 .../src/views/classes/LessonPlaylistPage.vue  |  6 +-
 .../components/MissingResourceAlert.vue       |  5 +-
 6 files changed, 70 insertions(+), 10 deletions(-)
 create mode 100644 kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue

diff --git a/kolibri/core/assets/src/core-app/apiSpec.js b/kolibri/core/assets/src/core-app/apiSpec.js
index 10b6b1ca069..8d64a667011 100644
--- a/kolibri/core/assets/src/core-app/apiSpec.js
+++ b/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,
diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
index fee9d2e0948..6256beac76e 100644
--- a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
+++ b/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() {
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
index db4eb3cff59..e402033f473 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
+++ b/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() {
diff --git a/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
new file mode 100644
index 00000000000..594a61b4b51
--- /dev/null
+++ b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
@@ -0,0 +1,55 @@
+<template>
+
+  <MissingResourceAlert>
+    <template v-if="isSyncing" #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';
+
+  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();
+      return {
+        status,
+      };
+    },
+    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>
diff --git a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
index c819b8f0961..9f9fd4de11f 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
+++ b/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() {
diff --git a/packages/kolibri-common/components/MissingResourceAlert.vue b/packages/kolibri-common/components/MissingResourceAlert.vue
index d826540f64f..2d92840c69a 100644
--- a/packages/kolibri-common/components/MissingResourceAlert.vue
+++ b/packages/kolibri-common/components/MissingResourceAlert.vue
@@ -7,7 +7,10 @@
       type="warning"
       :style="{ marginBottom: 0, marginTop: '8px' }"
     >
-      <span>
+      <span v-if="$slots.syncAlert">
+        <slot name="syncAlert"></slot>
+      </span>
+      <span v-else>
         {{ coreString(
           multiple ? 'someResourcesMissingOrNotSupported' :
           'resourceNotFoundOnDevice'

From 304b9c638a91a5896e247c24f5e161684f87afc6 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 19 Oct 2023 15:46:36 -0400
Subject: [PATCH 2/9] Conditionalize for LODs

---
 .../plugins/learn/assets/src/views/ExamPage/index.vue    | 5 ++++-
 .../plugins/learn/assets/src/views/HomePage/index.vue    | 5 +++--
 .../assets/src/views/classes/LessonPlaylistPage.vue      | 9 +++++++--
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
index 6256beac76e..d31ced59269 100644
--- a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
@@ -64,7 +64,7 @@
               :answerState="currentAttempt.answer"
               @interaction="saveAnswer"
             />
-            <ResourceSyncingUiAlert v-else :multiple="false" />
+            <ResourceSyncingUiAlert v-else-if="isLearnerOnlyImport" :multiple="false" />
           </KPageContainer>
 
           <BottomAppBar :dir="bottomBarLayoutDirection" :maxWidth="null">
@@ -186,6 +186,7 @@
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
+  import useUser from 'kolibri.coreVue.composables.useUser';
   import ResourceSyncingUiAlert from '../ResourceSyncingUiAlert';
   import useProgressTracking from '../../composables/useProgressTracking';
   import { PageNames, ClassesPageNames } from '../../constants';
@@ -220,6 +221,7 @@
         startTrackingProgress,
         stopTrackingProgress,
       } = useProgressTracking();
+      const { isLearnerOnlyImport } = useUser();
       return {
         pastattempts,
         time_spent,
@@ -227,6 +229,7 @@
         updateContentSession,
         startTrackingProgress,
         stopTrackingProgress,
+        isLearnerOnlyImport,
       };
     },
     data() {
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
index e402033f473..fe7320fba0a 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
+++ b/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">
-      <ResourceSyncingUiAlert v-if="missingResources" />
+      <ResourceSyncingUiAlert v-if="missingResources && isLearnerOnlyImport" />
       <YourClasses
         v-if="displayClasses"
         class="section"
@@ -99,7 +99,7 @@
       const store = currentInstance.$store;
       const router = currentInstance.$router;
 
-      const { isUserLoggedIn } = useUser();
+      const { isUserLoggedIn, isLearnerOnlyImport } = useUser();
       const { canAccessUnassignedContent } = useDeviceSettings();
       const { localChannelsCache, fetchChannels } = useChannels();
       const {
@@ -195,6 +195,7 @@
 
       return {
         isUserLoggedIn,
+        isLearnerOnlyImport,
         channels: localChannelsCache,
         classes,
         activeClassesLessons,
diff --git a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
index 9f9fd4de11f..504b9e33da7 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
@@ -26,7 +26,10 @@
             {{ currentLesson.description }}
           </p>
         </div>
-        <ResourceSyncingUiAlert v-if="lessonResources.length > contentNodes.length" />
+        <ResourceSyncingUiAlert
+          v-if="lessonResources.length > contentNodes.length &&
+            isLearnerOnlyImport"
+        />
       </section>
 
       <section v-if="lessonHasResources" class="content-cards">
@@ -57,6 +60,7 @@
   import ProgressIcon from 'kolibri.coreVue.components.ProgressIcon';
   import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import useUser from 'kolibri.coreVue.composables.useUser';
   import ResourceSyncingUiAlert from '../ResourceSyncingUiAlert';
   import useContentLink from '../../composables/useContentLink';
   import useContentNodeProgress from '../../composables/useContentNodeProgress';
@@ -84,7 +88,8 @@
     setup() {
       const { genContentLinkBackLinkCurrentPage } = useContentLink();
       const { contentNodeProgressMap } = useContentNodeProgress();
-      return { contentNodeProgressMap, genContentLinkBackLinkCurrentPage };
+      const { isLearnerOnlyImport } = useUser();
+      return { contentNodeProgressMap, genContentLinkBackLinkCurrentPage, isLearnerOnlyImport };
     },
     computed: {
       ...mapState('lessonPlaylist', ['contentNodesMap', 'currentLesson']),

From 549cdd2879ea87cd17ff1dddc105cd3ddd9e6ff0 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 19 Oct 2023 17:26:58 -0400
Subject: [PATCH 3/9] Update display conditions to include whether or not the
 sync has completed, not only if it has been initiated

---
 .../src/views/ResourceSyncingUiAlert.vue      | 13 +++++++++-
 .../components/MissingResourceAlert.vue       | 24 ++++++++++++-------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
index 594a61b4b51..f1d6cd1c45a 100644
--- a/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
+++ b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <MissingResourceAlert>
+  <MissingResourceAlert
+    v-if="isSyncing || syncCouldNotComplete"
+    :syncCouldNotComplete="syncCouldNotComplete"
+  >
     <template v-if="isSyncing" #syncAlert>
       {{ syncMessage }}
     </template>
@@ -42,6 +45,14 @@
       isSyncing() {
         return this.status == SyncStatus.QUEUED || this.status == SyncStatus.SYNCING;
       },
+      syncCouldNotComplete() {
+        console.log(this.status);
+        return (
+          this.status == SyncStatus.UNABLE_TO_SYNC ||
+          this.status == SyncStatus.INSUFFICIENT_STORAGE ||
+          this.status == SyncStatus.NOT_CONNECTED
+        );
+      },
       syncMessage() {
         /* eslint-disable kolibri/vue-no-undefined-string-uses */
         return this.status == SyncStatus.QUEUED
diff --git a/packages/kolibri-common/components/MissingResourceAlert.vue b/packages/kolibri-common/components/MissingResourceAlert.vue
index 2d92840c69a..e41937c1637 100644
--- a/packages/kolibri-common/components/MissingResourceAlert.vue
+++ b/packages/kolibri-common/components/MissingResourceAlert.vue
@@ -10,16 +10,18 @@
       <span v-if="$slots.syncAlert">
         <slot name="syncAlert"></slot>
       </span>
-      <span v-else>
-        {{ coreString(
-          multiple ? 'someResourcesMissingOrNotSupported' :
-          'resourceNotFoundOnDevice'
-        ) }}
+      <span v-else-if="syncCouldNotComplete">
+        <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"
@@ -52,6 +54,10 @@
         type: Boolean,
         default: true,
       },
+      syncCouldNotComplete: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return { open: false };

From fb20f2ebee5da3392abb54862d7642f58663aef2 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 19 Oct 2023 17:42:12 -0400
Subject: [PATCH 4/9] Fix condition so the slot is conditional to LOD not the
 entire banner

---
 .../plugins/learn/assets/src/views/ExamPage/index.vue    | 5 +----
 .../plugins/learn/assets/src/views/HomePage/index.vue    | 5 ++---
 .../learn/assets/src/views/ResourceSyncingUiAlert.vue    | 5 ++++-
 .../assets/src/views/classes/LessonPlaylistPage.vue      | 9 ++-------
 4 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
index d31ced59269..6256beac76e 100644
--- a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
@@ -64,7 +64,7 @@
               :answerState="currentAttempt.answer"
               @interaction="saveAnswer"
             />
-            <ResourceSyncingUiAlert v-else-if="isLearnerOnlyImport" :multiple="false" />
+            <ResourceSyncingUiAlert v-else :multiple="false" />
           </KPageContainer>
 
           <BottomAppBar :dir="bottomBarLayoutDirection" :maxWidth="null">
@@ -186,7 +186,6 @@
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
-  import useUser from 'kolibri.coreVue.composables.useUser';
   import ResourceSyncingUiAlert from '../ResourceSyncingUiAlert';
   import useProgressTracking from '../../composables/useProgressTracking';
   import { PageNames, ClassesPageNames } from '../../constants';
@@ -221,7 +220,6 @@
         startTrackingProgress,
         stopTrackingProgress,
       } = useProgressTracking();
-      const { isLearnerOnlyImport } = useUser();
       return {
         pastattempts,
         time_spent,
@@ -229,7 +227,6 @@
         updateContentSession,
         startTrackingProgress,
         stopTrackingProgress,
-        isLearnerOnlyImport,
       };
     },
     data() {
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
index fe7320fba0a..e402033f473 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
+++ b/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">
-      <ResourceSyncingUiAlert v-if="missingResources && isLearnerOnlyImport" />
+      <ResourceSyncingUiAlert v-if="missingResources" />
       <YourClasses
         v-if="displayClasses"
         class="section"
@@ -99,7 +99,7 @@
       const store = currentInstance.$store;
       const router = currentInstance.$router;
 
-      const { isUserLoggedIn, isLearnerOnlyImport } = useUser();
+      const { isUserLoggedIn } = useUser();
       const { canAccessUnassignedContent } = useDeviceSettings();
       const { localChannelsCache, fetchChannels } = useChannels();
       const {
@@ -195,7 +195,6 @@
 
       return {
         isUserLoggedIn,
-        isLearnerOnlyImport,
         channels: localChannelsCache,
         classes,
         activeClassesLessons,
diff --git a/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
index f1d6cd1c45a..7131c11e22a 100644
--- a/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
+++ b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
@@ -4,7 +4,7 @@
     v-if="isSyncing || syncCouldNotComplete"
     :syncCouldNotComplete="syncCouldNotComplete"
   >
-    <template v-if="isSyncing" #syncAlert>
+    <template v-if="isSyncing && isLearnerOnlyImport" #syncAlert>
       {{ syncMessage }}
     </template>
   </MissingResourceAlert>
@@ -18,6 +18,7 @@
   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: {
@@ -37,8 +38,10 @@
     },
     setup() {
       const { status } = useUserSyncStatus();
+      const { isLearnerOnlyImport } = useUser();
       return {
         status,
+        isLearnerOnlyImport,
       };
     },
     computed: {
diff --git a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
index 504b9e33da7..9f9fd4de11f 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
@@ -26,10 +26,7 @@
             {{ currentLesson.description }}
           </p>
         </div>
-        <ResourceSyncingUiAlert
-          v-if="lessonResources.length > contentNodes.length &&
-            isLearnerOnlyImport"
-        />
+        <ResourceSyncingUiAlert v-if="lessonResources.length > contentNodes.length" />
       </section>
 
       <section v-if="lessonHasResources" class="content-cards">
@@ -60,7 +57,6 @@
   import ProgressIcon from 'kolibri.coreVue.components.ProgressIcon';
   import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import useUser from 'kolibri.coreVue.composables.useUser';
   import ResourceSyncingUiAlert from '../ResourceSyncingUiAlert';
   import useContentLink from '../../composables/useContentLink';
   import useContentNodeProgress from '../../composables/useContentNodeProgress';
@@ -88,8 +84,7 @@
     setup() {
       const { genContentLinkBackLinkCurrentPage } = useContentLink();
       const { contentNodeProgressMap } = useContentNodeProgress();
-      const { isLearnerOnlyImport } = useUser();
-      return { contentNodeProgressMap, genContentLinkBackLinkCurrentPage, isLearnerOnlyImport };
+      return { contentNodeProgressMap, genContentLinkBackLinkCurrentPage };
     },
     computed: {
       ...mapState('lessonPlaylist', ['contentNodesMap', 'currentLesson']),

From 208e757c06c7c81f955da4b9d56c4e2cbff8dcad Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Fri, 20 Oct 2023 12:26:45 -0400
Subject: [PATCH 5/9] Update conditions to be less restrictive. Syncing status
 updates to be made in backend in follow up, that will prevent over-reporting
 on the frontend

---
 .../assets/src/views/ResourceSyncingUiAlert.vue | 17 +++++++----------
 .../components/MissingResourceAlert.vue         |  6 +-----
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
index 7131c11e22a..24ce5a1f540 100644
--- a/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
+++ b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
@@ -1,8 +1,7 @@
 <template>
 
   <MissingResourceAlert
-    v-if="isSyncing || syncCouldNotComplete"
-    :syncCouldNotComplete="syncCouldNotComplete"
+    :multiple="multiple"
   >
     <template v-if="isSyncing && isLearnerOnlyImport" #syncAlert>
       {{ syncMessage }}
@@ -44,18 +43,16 @@
         isLearnerOnlyImport,
       };
     },
+    props: {
+      multiple: {
+        type: Boolean,
+        default: true,
+      },
+    },
     computed: {
       isSyncing() {
         return this.status == SyncStatus.QUEUED || this.status == SyncStatus.SYNCING;
       },
-      syncCouldNotComplete() {
-        console.log(this.status);
-        return (
-          this.status == SyncStatus.UNABLE_TO_SYNC ||
-          this.status == SyncStatus.INSUFFICIENT_STORAGE ||
-          this.status == SyncStatus.NOT_CONNECTED
-        );
-      },
       syncMessage() {
         /* eslint-disable kolibri/vue-no-undefined-string-uses */
         return this.status == SyncStatus.QUEUED
diff --git a/packages/kolibri-common/components/MissingResourceAlert.vue b/packages/kolibri-common/components/MissingResourceAlert.vue
index e41937c1637..488865d6aa1 100644
--- a/packages/kolibri-common/components/MissingResourceAlert.vue
+++ b/packages/kolibri-common/components/MissingResourceAlert.vue
@@ -10,7 +10,7 @@
       <span v-if="$slots.syncAlert">
         <slot name="syncAlert"></slot>
       </span>
-      <span v-else-if="syncCouldNotComplete">
+      <span v-else>
         <span>
           {{ coreString(
             multiple ? 'someResourcesMissingOrNotSupported' :
@@ -54,10 +54,6 @@
         type: Boolean,
         default: true,
       },
-      syncCouldNotComplete: {
-        type: Boolean,
-        default: false,
-      },
     },
     data() {
       return { open: false };

From 5b13effd0fa4bf60433d250a502072a13d9c928a Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Sun, 22 Oct 2023 15:23:26 -0700
Subject: [PATCH 6/9] Ensure that we only filter content download requests when
 there is a matched reason on the removal.

---
 kolibri/core/content/api.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/kolibri/core/content/api.py b/kolibri/core/content/api.py
index 4f96e283f26..a5399d3076c 100644
--- a/kolibri/core/content/api.py
+++ b/kolibri/core/content/api.py
@@ -1368,6 +1368,7 @@ def annotate_queryset(self, queryset):
                     source_id=OuterRef("source_id"),
                     contentnode_id=OuterRef("contentnode_id"),
                     requested_at__gte=OuterRef("requested_at"),
+                    reason=OuterRef("reason"),
                 ).exclude(status=ContentRequestStatus.Failed)
             )
         ).filter(has_removal=False)

From a1df76f2b54162826fbe4b79a248c55f9bf8a6aa Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Sun, 22 Oct 2023 15:25:55 -0700
Subject: [PATCH 7/9] Update user sync status endpoint to return if sync
 initiated downloads are pending.

---
 kolibri/core/device/api.py           | 31 +++++++++++++-
 kolibri/core/device/test/test_api.py | 60 +++++++++++++++++++++++++++-
 2 files changed, 88 insertions(+), 3 deletions(-)

diff --git a/kolibri/core/device/api.py b/kolibri/core/device/api.py
index 79be3a9bfa8..6d2e30142ef 100644
--- a/kolibri/core/device/api.py
+++ b/kolibri/core/device/api.py
@@ -47,6 +47,7 @@
 from kolibri.core.content.models import ContentDownloadRequest
 from kolibri.core.content.models import ContentRemovalRequest
 from kolibri.core.content.models import ContentRequestReason
+from kolibri.core.content.models import ContentRequestStatus
 from kolibri.core.content.permissions import CanManageContent
 from kolibri.core.content.utils.channels import get_mounted_drive_by_id
 from kolibri.core.content.utils.channels import get_mounted_drives_with_channel_info
@@ -302,6 +303,7 @@ class UserSyncStatusViewSet(ReadOnlyValuesViewset):
         "user",
         "has_downloads",
         "last_download_removed",
+        "sync_downloads_in_progress",
     )
 
     field_map = {
@@ -338,14 +340,40 @@ def annotate_queryset(self, queryset):
             instance_id=OuterRef("sync_session__client_instance_id"),
         )
 
+        # Use the same condition used in the ContentRequest API endpoint
+        # otherwise, this will signal that users have downloads
+        # but when they navigate to the Downloads page, they may not see
+        # any downloads.
+        downloads_without_removals_queryset = ContentDownloadRequest.objects.annotate(
+            has_removal=Exists(
+                ContentRemovalRequest.objects.filter(
+                    source_model=OuterRef("source_model"),
+                    source_id=OuterRef("source_id"),
+                    contentnode_id=OuterRef("contentnode_id"),
+                    requested_at__gte=OuterRef("requested_at"),
+                    reason=OuterRef("reason"),
+                ).exclude(status=ContentRequestStatus.Failed)
+            )
+        ).filter(has_removal=False)
+
         has_download = Exists(
-            ContentDownloadRequest.objects.filter(
+            downloads_without_removals_queryset.filter(
                 source_id=OuterRef("user_id"),
                 source_model=FacilityUser.morango_model_name,
                 reason=ContentRequestReason.UserInitiated,
             )
         )
 
+        has_in_progress_sync_initiated_download = Exists(
+            downloads_without_removals_queryset.filter(
+                source_id=OuterRef("user_id"),
+                source_model=FacilityUser.morango_model_name,
+                reason=ContentRequestReason.SyncInitiated,
+            ).exclude(
+                status__in=[ContentRequestStatus.Failed, ContentRequestStatus.Completed]
+            )
+        )
+
         last_download_removal = Subquery(
             ContentRemovalRequest.objects.filter(
                 source_id=OuterRef("user_id"),
@@ -366,6 +394,7 @@ def annotate_queryset(self, queryset):
             ),
             has_downloads=has_download,
             last_download_removed=last_download_removal,
+            sync_downloads_in_progress=has_in_progress_sync_initiated_download,
         )
         return queryset
 
diff --git a/kolibri/core/device/test/test_api.py b/kolibri/core/device/test/test_api.py
index 867b258e2b7..78deffc71bd 100644
--- a/kolibri/core/device/test/test_api.py
+++ b/kolibri/core/device/test/test_api.py
@@ -32,6 +32,8 @@
 from kolibri.core.auth.test.test_api import FacilityFactory
 from kolibri.core.auth.test.test_api import FacilityUserFactory
 from kolibri.core.content.models import ContentDownloadRequest
+from kolibri.core.content.models import ContentRemovalRequest
+from kolibri.core.content.models import ContentRequestReason
 from kolibri.core.device.models import DevicePermissions
 from kolibri.core.device.models import DeviceSettings
 from kolibri.core.device.models import DeviceStatus
@@ -929,10 +931,64 @@ def test_downloads_queryset(self):
         device_status = self._create_device_status("oopsie", StatusSentiment.Neutral)
         self.syncsession1.client_instance_id = device_status.instance_id
         self.syncsession1.save()
-        response = self.client.get(reverse("kolibri:core:usersyncstatus-list"))
         content_request.save()
+        response = self.client.get(reverse("kolibri:core:usersyncstatus-list"))
         self.assertEqual(len(response.data), 1)
         self.assertEqual(response.data[0]["user"], self.user1.id)
         self.assertEqual(response.data[0]["status"], user_sync_statuses.RECENTLY_SYNCED)
-        self.assertFalse(response.data[0]["has_downloads"])
+        self.assertTrue(response.data[0]["has_downloads"])
         self.assertIsNone(response.data[0]["last_download_removed"])
+
+    def test_downloads_queryset__content_request_removed(self):
+        self.client.login(
+            username=self.user1.username,
+            password=DUMMY_PASSWORD,
+            facility=self.facility,
+        )
+        self._create_transfer_session(
+            active=False,
+        )
+        content_request = ContentDownloadRequest.build_for_user(self.user1)
+        content_request.contentnode_id = uuid.uuid4().hex
+        content_request.save()
+        content_removal_request = ContentRemovalRequest.build_for_user(self.user1)
+        content_removal_request.contentnode_id = content_request.contentnode_id
+        content_removal_request.save()
+        response = self.client.get(reverse("kolibri:core:usersyncstatus-list"))
+        self.assertFalse(response.data[0]["has_downloads"])
+
+    def test_downloads_queryset__sync_downloads_in_progress(self):
+        self.client.login(
+            username=self.user1.username,
+            password=DUMMY_PASSWORD,
+            facility=self.facility,
+        )
+        self._create_transfer_session(
+            active=False,
+        )
+        content_request = ContentDownloadRequest.build_for_user(self.user1)
+        content_request.contentnode_id = uuid.uuid4().hex
+        content_request.reason = ContentRequestReason.SyncInitiated
+        content_request.save()
+        response = self.client.get(reverse("kolibri:core:usersyncstatus-list"))
+        self.assertTrue(response.data[0]["sync_downloads_in_progress"])
+
+    def test_downloads_queryset__sync_downloads_in_progress_removed(self):
+        self.client.login(
+            username=self.user1.username,
+            password=DUMMY_PASSWORD,
+            facility=self.facility,
+        )
+        self._create_transfer_session(
+            active=False,
+        )
+        content_request = ContentDownloadRequest.build_for_user(self.user1)
+        content_request.contentnode_id = uuid.uuid4().hex
+        content_request.reason = ContentRequestReason.SyncInitiated
+        content_request.save()
+        content_removal_request = ContentRemovalRequest.build_for_user(self.user1)
+        content_removal_request.contentnode_id = content_request.contentnode_id
+        content_removal_request.reason = ContentRequestReason.SyncInitiated
+        content_removal_request.save()
+        response = self.client.get(reverse("kolibri:core:usersyncstatus-list"))
+        self.assertFalse(response.data[0]["sync_downloads_in_progress"])

From ca33e2791f54053bf919bff27a8a2a2ed6daa9f0 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Sun, 22 Oct 2023 15:26:24 -0700
Subject: [PATCH 8/9] Use sync downloads being in progress to conditionalize
 message display when resources are missing.

---
 kolibri/core/assets/src/composables/useUserSyncStatus.js     | 3 +++
 .../learn/assets/src/views/ResourceSyncingUiAlert.vue        | 5 +++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/kolibri/core/assets/src/composables/useUserSyncStatus.js b/kolibri/core/assets/src/composables/useUserSyncStatus.js
index 4c1213f7aba..503ad479c07 100644
--- a/kolibri/core/assets/src/composables/useUserSyncStatus.js
+++ b/kolibri/core/assets/src/composables/useUserSyncStatus.js
@@ -14,6 +14,7 @@ const deviceStatus = ref(null);
 const deviceStatusSentiment = ref(null);
 const hasDownloads = ref(false);
 const lastDownloadRemoved = ref(null);
+const syncDownloadsInProgress = ref(false);
 const timeoutInterval = computed(() => {
   return get(status) === SyncStatus.QUEUED ? 1000 : 10000;
 });
@@ -51,6 +52,7 @@ export function pollUserSyncStatusTask() {
       lastDownloadRemoved.value = syncData[0].last_download_removed
         ? new Date(syncData[0].last_download_removed)
         : null;
+      syncDownloadsInProgress.value = syncData[0].sync_downloads_in_progress;
     } else {
       status.value = SyncStatus.NOT_CONNECTED;
     }
@@ -83,5 +85,6 @@ export default function useUserSyncStatus() {
     deviceStatusSentiment,
     hasDownloads,
     lastDownloadRemoved,
+    syncDownloadsInProgress,
   };
 }
diff --git a/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
index 24ce5a1f540..81e918370fe 100644
--- a/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
+++ b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
@@ -3,7 +3,7 @@
   <MissingResourceAlert
     :multiple="multiple"
   >
-    <template v-if="isSyncing && isLearnerOnlyImport" #syncAlert>
+    <template v-if="isLearnerOnlyImport && (isSyncing || syncDownloadsInProgress)" #syncAlert>
       {{ syncMessage }}
     </template>
   </MissingResourceAlert>
@@ -36,10 +36,11 @@
       MissingResourceAlert,
     },
     setup() {
-      const { status } = useUserSyncStatus();
+      const { status, syncDownloadsInProgress } = useUserSyncStatus();
       const { isLearnerOnlyImport } = useUser();
       return {
         status,
+        syncDownloadsInProgress,
         isLearnerOnlyImport,
       };
     },

From bd1b33361ab8afda0147effa0cb3ae3691365ba0 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Mon, 23 Oct 2023 11:26:04 -0700
Subject: [PATCH 9/9] Rehydrate the home page when syncing has completed to
 refresh missing resources.

---
 .../learn/assets/src/views/HomePage/index.vue |  6 ++++-
 .../src/views/ResourceSyncingUiAlert.vue      | 24 +++++++++++++++----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
index e402033f473..aa640671a3c 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
@@ -2,7 +2,10 @@
 
   <LearnAppBarPage :appBarTitle="learnString('learnLabel')">
     <div v-if="!loading" id="main" role="main">
-      <ResourceSyncingUiAlert v-if="missingResources" />
+      <ResourceSyncingUiAlert
+        v-if="missingResources"
+        @syncComplete="hydrateHomePage"
+      />
       <YourClasses
         v-if="displayClasses"
         class="section"
@@ -206,6 +209,7 @@
         displayExploreChannels,
         displayClasses,
         missingResources,
+        hydrateHomePage,
       };
     },
     props: {
diff --git a/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
index 81e918370fe..a1a13d4c71b 100644
--- a/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
+++ b/kolibri/plugins/learn/assets/src/views/ResourceSyncingUiAlert.vue
@@ -3,7 +3,7 @@
   <MissingResourceAlert
     :multiple="multiple"
   >
-    <template v-if="isLearnerOnlyImport && (isSyncing || syncDownloadsInProgress)" #syncAlert>
+    <template v-if="isLearnerOnlyImport && isSyncing" #syncAlert>
       {{ syncMessage }}
     </template>
   </MissingResourceAlert>
@@ -13,6 +13,8 @@
 
 <script>
 
+  import { get } from '@vueuse/core';
+  import { computed, watch } from 'kolibri.lib.vueCompositionApi';
   import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert.vue';
   import useUserSyncStatus from 'kolibri.coreVue.composables.useUserSyncStatus';
   import { SyncStatus } from 'kolibri.coreVue.vuex.constants';
@@ -35,13 +37,28 @@
     components: {
       MissingResourceAlert,
     },
-    setup() {
+    setup(props, { emit }) {
       const { status, syncDownloadsInProgress } = useUserSyncStatus();
       const { isLearnerOnlyImport } = useUser();
+      const isSyncing = computed(() => {
+        return (
+          get(status) === SyncStatus.QUEUED ||
+          get(status) === SyncStatus.SYNCING ||
+          get(syncDownloadsInProgress)
+        );
+      });
+
+      watch(isSyncing, (newVal, oldVal) => {
+        if (newVal === false && oldVal === true) {
+          emit('syncComplete');
+        }
+      });
+
       return {
         status,
         syncDownloadsInProgress,
         isLearnerOnlyImport,
+        isSyncing,
       };
     },
     props: {
@@ -51,9 +68,6 @@
       },
     },
     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