From 1ef9f6c64f6e0a59ceb3b94ab98db1bd4037f57a Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Thu, 16 Sep 2021 18:57:19 +0200
Subject: [PATCH 01/27] Add tests for recent lessons and quizzes sections

---
 .../__mocks__/useLearnerResources.js          |  3 +
 .../views/HomePage/__tests__/HomePage.spec.js | 78 +++++++++++++++++++
 .../learn/assets/src/views/HomePage/index.vue |  2 +
 3 files changed, 83 insertions(+)

diff --git a/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js b/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js
index 7132a190c09..44251e2c171 100644
--- a/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js
+++ b/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js
@@ -33,11 +33,14 @@
 
 const MOCK_DEFAULTS = {
   classes: [],
+  activeClassesLessons: [],
+  activeClassesQuizzes: [],
   resumableClassesQuizzes: [],
   resumableClassesResources: [],
   resumableNonClassesContentNodes: [],
   getClass: jest.fn(),
   getResumableContentNode: jest.fn(),
+  getClassLessonLink: jest.fn(),
   getClassQuizLink: jest.fn(),
   getClassResourceLink: jest.fn(),
   getTopicContentNodeLink: jest.fn(),
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js b/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js
index d1d6b615d20..c8f383a4ab9 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js
@@ -47,6 +47,14 @@ function getContinueLearningSection(wrapper) {
   return wrapper.find('[data-test="continueLearning"]');
 }
 
+function getRecentLessonsSection(wrapper) {
+  return wrapper.find('[data-test="recentLessons"]');
+}
+
+function getRecentQuizzesSection(wrapper) {
+  return wrapper.find('[data-test="recentQuizzes"]');
+}
+
 describe(`HomePage`, () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -266,4 +274,74 @@ describe(`HomePage`, () => {
       });
     });
   });
+
+  describe(`"Recent lessons" section`, () => {
+    it(`the section is not displayed for a guest user`, () => {
+      const wrapper = makeWrapper();
+      expect(getRecentLessonsSection(wrapper).exists()).toBe(false);
+    });
+
+    it(`the section is not displayed for a signed in user
+      who has no active lessons`, () => {
+      useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
+      const wrapper = makeWrapper();
+      expect(getRecentLessonsSection(wrapper).exists()).toBe(false);
+    });
+
+    it(`active lessons are displayed for a signed in user who has some`, () => {
+      useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
+      useLearnerResources.mockImplementation(() =>
+        useLearnerResourcesMock({
+          activeClassesLessons: [
+            { id: 'lesson-1', title: 'Lesson 1', is_active: true },
+            { id: 'lesson-2', title: 'Lesson 2', is_active: true },
+          ],
+          getClassLessonLink() {
+            return { path: '/class-lesson' };
+          },
+        })
+      );
+      const wrapper = makeWrapper();
+      expect(getRecentLessonsSection(wrapper).exists()).toBe(true);
+      const links = getRecentLessonsSection(wrapper).findAll('a');
+      expect(links.length).toBe(2);
+      expect(links.at(0).text()).toBe('Lesson 1');
+      expect(links.at(1).text()).toBe('Lesson 2');
+    });
+  });
+
+  describe(`"Recent quizzes" section`, () => {
+    it(`the section is not displayed for a guest user`, () => {
+      const wrapper = makeWrapper();
+      expect(getRecentQuizzesSection(wrapper).exists()).toBe(false);
+    });
+
+    it(`the section is not displayed for a signed in user
+      who has no active quizzes`, () => {
+      useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
+      const wrapper = makeWrapper();
+      expect(getRecentQuizzesSection(wrapper).exists()).toBe(false);
+    });
+
+    it(`active quizzes are displayed for a signed in user who has some`, () => {
+      useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
+      useLearnerResources.mockImplementation(() =>
+        useLearnerResourcesMock({
+          activeClassesQuizzes: [
+            { id: 'quiz-1', title: 'Quiz 1', active: true },
+            { id: 'quiz-2', title: 'Quiz 2', active: true },
+          ],
+          getClassQuizLink() {
+            return { path: '/class-quiz' };
+          },
+        })
+      );
+      const wrapper = makeWrapper();
+      expect(getRecentQuizzesSection(wrapper).exists()).toBe(true);
+      const links = getRecentQuizzesSection(wrapper).findAll('a');
+      expect(links.length).toBe(2);
+      expect(links.at(0).text()).toBe('Quiz 1');
+      expect(links.at(1).text()).toBe('Quiz 2');
+    });
+  });
 });
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
index eda5251f655..7afe3e760cf 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
@@ -20,6 +20,7 @@
       :lessons="activeClassesLessons"
       displayClassName
       recent
+      data-test="recentLessons"
     />
     <AssignedQuizzesCards
       v-if="hasActiveClassesQuizzes"
@@ -27,6 +28,7 @@
       :quizzes="activeClassesQuizzes"
       displayClassName
       recent
+      data-test="recentQuizzes"
     />
     <!--
       TODO: To be implemented, it's here only to get strings

From 340fedfb7266e5d200380fb0c04ffb822020f184 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Thu, 16 Sep 2021 19:54:47 +0200
Subject: [PATCH 02/27] Colorful progress icons

---
 kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue b/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
index 61169d379b6..a8ba7083469 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
@@ -35,13 +35,15 @@
       >
         <KLabeledIcon
           v-if="inProgressLabel"
-          icon="inProgress"
+          :color="$themeTokens.progress"
           :label="inProgressLabel"
+          icon="inProgress"
         />
         <KLabeledIcon
           v-else-if="completedLabel"
-          icon="mastered"
+          :color="$themeTokens.mastered"
           :label="completedLabel"
+          icon="mastered"
         />
       </div>
     </slot>

From f26416d54bf69bfbdf859c145e1db85e9e0c5c88 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Fri, 17 Sep 2021 15:29:55 +0200
Subject: [PATCH 03/27] Show resources progress

---
 .../__mocks__/useLearnerResources.js          |  1 +
 .../__tests__/useLearnerResources.spec.js     | 41 +++++++++++-
 .../src/composables/useLearnerResources.js    | 43 ++++++++++--
 .../src/views/HomePage/ContinueLearning.vue   |  3 +
 .../learn/assets/src/views/cards/BaseCard.vue | 65 ++++++++++---------
 .../src/views/cards/ResourceCard/index.vue    | 11 ++++
 6 files changed, 130 insertions(+), 34 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js b/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js
index 44251e2c171..a66dcc2de38 100644
--- a/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js
+++ b/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js
@@ -40,6 +40,7 @@ const MOCK_DEFAULTS = {
   resumableNonClassesContentNodes: [],
   getClass: jest.fn(),
   getResumableContentNode: jest.fn(),
+  getResumableContentNodeProgress: jest.fn(),
   getClassLessonLink: jest.fn(),
   getClassQuizLink: jest.fn(),
   getClassResourceLink: jest.fn(),
diff --git a/kolibri/plugins/learn/assets/src/composables/__tests__/useLearnerResources.spec.js b/kolibri/plugins/learn/assets/src/composables/__tests__/useLearnerResources.spec.js
index a7478dccd3f..a7ccfbd95b8 100644
--- a/kolibri/plugins/learn/assets/src/composables/__tests__/useLearnerResources.spec.js
+++ b/kolibri/plugins/learn/assets/src/composables/__tests__/useLearnerResources.spec.js
@@ -1,4 +1,4 @@
-import { ContentNodeResource } from 'kolibri.resources';
+import { ContentNodeResource, ContentNodeProgressResource } from 'kolibri.resources';
 
 import { PageNames, ClassesPageNames } from '../../constants';
 import { LearnerClassroomResource } from '../../apiResources';
@@ -13,6 +13,7 @@ const {
   resumableNonClassesContentNodes,
   getClass,
   getResumableContentNode,
+  getResumableContentNodeProgress,
   getClassLessonLink,
   getClassQuizLink,
   getClassResourceLink,
@@ -36,6 +37,37 @@ const TEST_RESUMABLE_CONTENT_NODES = [
   { id: 'resource-10-in-progress', title: 'Resource 10 (In Progress)' },
 ];
 
+const TEST_CONTENT_NODES_PROGRESSES = [
+  {
+    id: 'resource-1-in-progress',
+    progress_fraction: 0.2,
+  },
+  {
+    id: 'resource-3-in-progress',
+    progress_fraction: 0.74,
+  },
+  {
+    id: 'resource-5-in-progress',
+    progress_fraction: 0.04,
+  },
+  {
+    id: 'resource-6-in-progress',
+    progress_fraction: 0.1,
+  },
+  {
+    id: 'resource-8-in-progress',
+    progress_fraction: 0.9,
+  },
+  {
+    id: 'resource-9-in-progress',
+    progress_fraction: 0.87,
+  },
+  {
+    id: 'resource-10-in-progress',
+    progress_fraction: 0.02,
+  },
+];
+
 const TEST_CLASSES = [
   {
     id: 'class-1',
@@ -162,6 +194,7 @@ const TEST_CLASSES = [
 describe(`useLearnerResources`, () => {
   beforeAll(() => {
     ContentNodeResource.fetchResume.mockResolvedValue(TEST_RESUMABLE_CONTENT_NODES);
+    ContentNodeProgressResource.fetchCollection.mockResolvedValue(TEST_CONTENT_NODES_PROGRESSES);
     fetchResumableContentNodes();
 
     LearnerClassroomResource.fetchCollection.mockResolvedValue(TEST_CLASSES);
@@ -351,6 +384,12 @@ describe(`useLearnerResources`, () => {
     });
   });
 
+  describe(`getResumableContentNodeProgress`, () => {
+    it(`returns a resumable content node progress`, () => {
+      expect(getResumableContentNodeProgress('resource-3-in-progress')).toBe(0.74);
+    });
+  });
+
   describe(`getClassQuizLink`, () => {
     it(`returns a vue-router link to a quiz report page when the quiz is closed`, () => {
       expect(
diff --git a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
index 6e866585d7a..eac4a527670 100644
--- a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
+++ b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
@@ -9,12 +9,13 @@ import { computed, ref } from 'kolibri.lib.vueCompositionApi';
 import { get, set } from '@vueuse/core';
 import flatMap from 'lodash/flatMap';
 
-import { ContentNodeResource } from 'kolibri.resources';
+import { ContentNodeResource, ContentNodeProgressResource } from 'kolibri.resources';
 import { LearnerClassroomResource } from '../apiResources';
 import { PageNames, ClassesPageNames } from '../constants';
 
 // The refs are defined in the outer scope so they can be use as a store
 const _resumableContentNodes = ref([]);
+const _resumableContentNodesProgresses = ref([]);
 const classes = ref([]);
 
 export default function useLearnerResources() {
@@ -171,6 +172,21 @@ export default function useLearnerResources() {
     return get(_resumableContentNodes).find(contentNode => contentNode.id === contentNodeId);
   }
 
+  /**
+   * @param {String} contentNodeId
+   * @returns {Number} A content node progress as a fraction between 0 and 1
+   * @public
+   */
+  function getResumableContentNodeProgress(contentNodeId) {
+    const progressData = get(_resumableContentNodesProgresses).find(
+      item => item.id === contentNodeId
+    );
+    if (!progressData) {
+      return undefined;
+    }
+    return progressData.progress_fraction;
+  }
+
   /**
    * @param {Object} lesson
    * @returns {Object} vue-router link to a lesson page
@@ -253,22 +269,40 @@ export default function useLearnerResources() {
   }
 
   /**
+   * Fetches current learner's classes
+   * and saves data to this composable store
+   *
    * @returns {Promise}
    * @public
    */
   function fetchClasses() {
-    LearnerClassroomResource.fetchCollection().then(collection => {
+    return LearnerClassroomResource.fetchCollection().then(collection => {
       set(classes, collection);
     });
   }
 
   /**
+   * Fetches resumable content nodes with their progress data
+   * and saves data to this composable store
+   *
    * @returns {Promise}
    * @public
    */
   function fetchResumableContentNodes() {
-    ContentNodeResource.fetchResume().then(collection => {
-      set(_resumableContentNodes, collection);
+    return ContentNodeResource.fetchResume().then(contentNodes => {
+      if (!contentNodes) {
+        return [];
+      }
+      set(_resumableContentNodes, contentNodes);
+      const contentNodesIds = contentNodes.map(contentNode => contentNode.id);
+      return ContentNodeProgressResource.fetchCollection({
+        getParams: { ids: contentNodesIds },
+      }).then(progresses => {
+        if (progresses) {
+          set(_resumableContentNodesProgresses, progresses);
+        }
+        return contentNodes;
+      });
     });
   }
 
@@ -281,6 +315,7 @@ export default function useLearnerResources() {
     resumableNonClassesContentNodes,
     getClass,
     getResumableContentNode,
+    getResumableContentNodeProgress,
     getClassLessonLink,
     getClassQuizLink,
     getClassResourceLink,
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/ContinueLearning.vue b/kolibri/plugins/learn/assets/src/views/HomePage/ContinueLearning.vue
index 70f338f9ea5..994ee247fb3 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/ContinueLearning.vue
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/ContinueLearning.vue
@@ -14,6 +14,7 @@
           v-for="(resource, idx) in uniqueResumableClassesResources"
           :key="`resource-${idx}`"
           :contentNode="getResumableContentNode(resource.contentNodeId)"
+          :contentNodeProgress="getResumableContentNodeProgress(resource.contentNodeId)"
           :to="getClassResourceLink(resource)"
           :collectionTitle="getResourceClassName(resource)"
         />
@@ -69,6 +70,7 @@
         resumableNonClassesContentNodes,
         getClass,
         getResumableContentNode,
+        getResumableContentNodeProgress,
         getClassQuizLink,
         getClassResourceLink,
         getTopicContentNodeLink,
@@ -104,6 +106,7 @@
         resumableNonClassesContentNodes,
         uniqueResumableClassesResources,
         getResumableContentNode,
+        getResumableContentNodeProgress,
         getClassQuizLink,
         getClassResourceLink,
         getTopicContentNodeLink,
diff --git a/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue b/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
index a8ba7083469..d6cacea82df 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
@@ -4,35 +4,37 @@
     :to="to"
     class="base-card"
   >
-    <KFixedGrid
-      v-if="$slots.topLeft || $slots.topRight"
-      numCols="2"
-      :style="{ marginBottom: '12px' }"
-    >
-      <KFixedGridItem span="1">
-        <slot name="topLeft"></slot>
-      </KFixedGridItem>
-      <KFixedGridItem span="1">
-        <slot name="topRight"></slot>
-      </KFixedGridItem>
-    </KFixedGrid>
-
-    <div
-      v-if="collectionTitle"
-      data-test="collectionTitle"
-    >
-      {{ collectionTitle }}
-    </div>
-
-    <h3 class="title">
-      {{ title }}
-    </h3>
+    <div>
+      <KFixedGrid
+        v-if="$slots.topLeft || $slots.topRight"
+        numCols="2"
+        :style="{ marginBottom: '12px' }"
+      >
+        <KFixedGridItem span="1">
+          <slot name="topLeft"></slot>
+        </KFixedGridItem>
+        <KFixedGridItem span="1">
+          <slot name="topRight"></slot>
+        </KFixedGridItem>
+      </KFixedGrid>
 
-    <slot name="progress">
       <div
-        class="progress"
-        :class="themeClasses.progress"
+        v-if="collectionTitle"
+        data-test="collectionTitle"
       >
+        {{ collectionTitle }}
+      </div>
+
+      <h3 class="title">
+        {{ title }}
+      </h3>
+    </div>
+
+    <div
+      class="progress"
+      :class="themeClasses.progress"
+    >
+      <slot name="progress">
         <KLabeledIcon
           v-if="inProgressLabel"
           :color="$themeTokens.progress"
@@ -45,8 +47,8 @@
           :label="completedLabel"
           icon="mastered"
         />
-      </div>
-    </slot>
+      </slot>
+    </div>
   </CardLink>
 
 </template>
@@ -123,6 +125,9 @@
   $font-size-annotation: 14px;
 
   .base-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     font-size: $font-size-annotation;
   }
 
@@ -132,7 +137,9 @@
   }
 
   .progress {
-    margin-top: 16px;
+    display: flex;
+    align-items: center;
+    height: 18px;
   }
 
 </style>
diff --git a/kolibri/plugins/learn/assets/src/views/cards/ResourceCard/index.vue b/kolibri/plugins/learn/assets/src/views/cards/ResourceCard/index.vue
index c09c710479c..0bf9766856f 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/ResourceCard/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/ResourceCard/index.vue
@@ -10,6 +10,10 @@
     <template #topRight>
       <LearningActivityLabel :contentNode="contentNode" />
     </template>
+
+    <template v-if="contentNodeProgress" #progress>
+      <ProgressBar :progress="contentNodeProgress" />
+    </template>
   </BaseCard>
 
 </template>
@@ -18,6 +22,7 @@
 <script>
 
   import ContentNodeThumbnail from '../../thumbnails/ContentNodeThumbnail';
+  import ProgressBar from '../../ProgressBar';
   import BaseCard from '../BaseCard';
   import LearningActivityLabel from './LearningActivityLabel';
 
@@ -27,12 +32,18 @@
       BaseCard,
       ContentNodeThumbnail,
       LearningActivityLabel,
+      ProgressBar,
     },
     props: {
       contentNode: {
         type: Object,
         required: true,
       },
+      contentNodeProgress: {
+        type: Number,
+        required: false,
+        default: null,
+      },
       /**
        * vue-router link object
        */

From 8f0a1c463bdcd4583aea690eb6973c180bf4d356 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Fri, 1 Oct 2021 10:29:27 +0200
Subject: [PATCH 04/27] Truncate cards titles

---
 kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue b/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
index d6cacea82df..2f424870e5b 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
@@ -26,7 +26,10 @@
       </div>
 
       <h3 class="title">
-        {{ title }}
+        <TextTruncatorCss
+          :text="title"
+          :maxLines="2"
+        />
       </h3>
     </div>
 
@@ -56,6 +59,7 @@
 
 <script>
 
+  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import CardLink from './CardLink.vue';
 
   /**
@@ -68,6 +72,7 @@
   export default {
     name: 'BaseCard',
     components: {
+      TextTruncatorCss,
       CardLink,
     },
     props: {

From d1e89c6051f32ef22ec18e82248b8482fb82cb2e Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Thu, 30 Sep 2021 13:19:26 +0200
Subject: [PATCH 05/27] Use useLearnerResources composable

for the class assignments page.

Its subcomponents are already using the composable
instead of store. This removes some confusion and fragility
around fetching and storing data which was previously done
by both composable and Vuex.
---
 .../__mocks__/useLearnerResources.js          |  3 +
 .../__tests__/useLearnerResources.spec.js     | 58 ++++++++++++++
 .../src/composables/useLearnerResources.js    | 50 +++++++++++-
 .../src/modules/classAssignments/handlers.js  |  9 ++-
 .../views/classes/AssignedLessonsCards.vue    |  6 --
 .../views/classes/AssignedQuizzesCards.vue    |  6 --
 .../views/classes/ClassAssignmentsPage.vue    | 78 +++++++++++--------
 7 files changed, 161 insertions(+), 49 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js b/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js
index a66dcc2de38..d7f78d50e20 100644
--- a/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js
+++ b/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js
@@ -39,12 +39,15 @@ const MOCK_DEFAULTS = {
   resumableClassesResources: [],
   resumableNonClassesContentNodes: [],
   getClass: jest.fn(),
+  getClassActiveLessons: jest.fn(),
+  getClassActiveQuizzes: jest.fn(),
   getResumableContentNode: jest.fn(),
   getResumableContentNodeProgress: jest.fn(),
   getClassLessonLink: jest.fn(),
   getClassQuizLink: jest.fn(),
   getClassResourceLink: jest.fn(),
   getTopicContentNodeLink: jest.fn(),
+  fetchClass: jest.fn(),
   fetchClasses: jest.fn(),
   fetchResumableContentNodes: jest.fn(),
 };
diff --git a/kolibri/plugins/learn/assets/src/composables/__tests__/useLearnerResources.spec.js b/kolibri/plugins/learn/assets/src/composables/__tests__/useLearnerResources.spec.js
index a7ccfbd95b8..280f5466a37 100644
--- a/kolibri/plugins/learn/assets/src/composables/__tests__/useLearnerResources.spec.js
+++ b/kolibri/plugins/learn/assets/src/composables/__tests__/useLearnerResources.spec.js
@@ -12,6 +12,8 @@ const {
   resumableClassesResources,
   resumableNonClassesContentNodes,
   getClass,
+  getClassActiveLessons,
+  getClassActiveQuizzes,
   getResumableContentNode,
   getResumableContentNodeProgress,
   getClassLessonLink,
@@ -375,6 +377,62 @@ describe(`useLearnerResources`, () => {
     });
   });
 
+  describe(`getClassActiveLessons`, () => {
+    it(`returns all active lessons from a class`, () => {
+      expect(getClassActiveLessons('class-1')).toEqual([
+        {
+          id: 'class-1-active-lesson-1',
+          title: 'Class 1 - Active Lesson 1',
+          is_active: true,
+          collection: 'class-1',
+          resources: [
+            { contentnode_id: 'resource-1-in-progress' },
+            { contentnode_id: 'resource-2' },
+            { contentnode_id: 'resource-3-in-progress' },
+          ],
+        },
+        {
+          id: 'class-1-active-lesson-2',
+          title: 'Class 1 - Active Lesson 2',
+          is_active: true,
+          collection: 'class-1',
+          resources: [
+            { contentnode_id: 'resource-1-in-progress' },
+            { contentnode_id: 'resource-4' },
+            { contentnode_id: 'resource-5-in-progress' },
+          ],
+        },
+      ]);
+    });
+  });
+
+  describe(`getClassActiveQuizzes`, () => {
+    it(`returns all active quizzes from a class`, () => {
+      expect(getClassActiveQuizzes('class-1')).toEqual([
+        {
+          id: 'class-1-active-quiz-in-progress',
+          title: 'Class 1 - Active Quiz In Progress',
+          active: true,
+          collection: 'class-1',
+          progress: {
+            started: true,
+            closed: false,
+          },
+        },
+        {
+          id: 'class-1-active-finished-quiz',
+          title: 'Class 1 - Active Finished Quiz',
+          active: true,
+          collection: 'class-1',
+          progress: {
+            started: true,
+            closed: true,
+          },
+        },
+      ]);
+    });
+  });
+
   describe(`getResumableContentNode`, () => {
     it(`returns a resumable content node object by its ID`, () => {
       expect(getResumableContentNode('resource-6-in-progress')).toEqual({
diff --git a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
index eac4a527670..bf14147d06d 100644
--- a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
+++ b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
@@ -163,6 +163,32 @@ export default function useLearnerResources() {
     return get(classes).find(c => c.id === classId);
   }
 
+  /**
+   * @param {String} classId
+   * @returns {Array} All active lessons of a class
+   * @public
+   */
+  function getClassActiveLessons(classId) {
+    const classroom = getClass(classId);
+    if (!classroom || !classroom.assignments || !classroom.assignments.lessons) {
+      return [];
+    }
+    return classroom.assignments.lessons.filter(lesson => lesson.is_active);
+  }
+
+  /**
+   * @param {String} classId
+   * @returns {Array} All active quizzes of a class
+   * @public
+   */
+  function getClassActiveQuizzes(classId) {
+    const classroom = getClass(classId);
+    if (!classroom || !classroom.assignments || !classroom.assignments.exams) {
+      return [];
+    }
+    return classroom.assignments.exams.filter(exam => exam.active);
+  }
+
   /**
    * @param {String} contentNodeId
    * @returns {Object}
@@ -268,9 +294,26 @@ export default function useLearnerResources() {
     };
   }
 
+  /**
+   * Fetches a class by its ID and saves data
+   * to this composable's store
+   *
+   * @param {String} classId
+   * @param {Boolean} force Cache won't be used when `true`
+   * @returns  {Promise}
+   * @public
+   */
+  function fetchClass({ classId, force = false }) {
+    return LearnerClassroomResource.fetchModel({ id: classId, force }).then(classroom => {
+      const updatedClasses = [...get(classes).filter(c => c.id !== classId), classroom];
+      set(classes, updatedClasses);
+      return classroom;
+    });
+  }
+
   /**
    * Fetches current learner's classes
-   * and saves data to this composable store
+   * and saves data to this composable's store
    *
    * @returns {Promise}
    * @public
@@ -283,7 +326,7 @@ export default function useLearnerResources() {
 
   /**
    * Fetches resumable content nodes with their progress data
-   * and saves data to this composable store
+   * and saves data to this composable's store
    *
    * @returns {Promise}
    * @public
@@ -316,10 +359,13 @@ export default function useLearnerResources() {
     getClass,
     getResumableContentNode,
     getResumableContentNodeProgress,
+    getClassActiveLessons,
+    getClassActiveQuizzes,
     getClassLessonLink,
     getClassQuizLink,
     getClassResourceLink,
     getTopicContentNodeLink,
+    fetchClass,
     fetchClasses,
     fetchResumableContentNodes,
   };
diff --git a/kolibri/plugins/learn/assets/src/modules/classAssignments/handlers.js b/kolibri/plugins/learn/assets/src/modules/classAssignments/handlers.js
index dabd307d107..2858deb16ea 100644
--- a/kolibri/plugins/learn/assets/src/modules/classAssignments/handlers.js
+++ b/kolibri/plugins/learn/assets/src/modules/classAssignments/handlers.js
@@ -1,13 +1,14 @@
-import { LearnerClassroomResource } from '../../apiResources';
+import useLearnerResources from '../../composables/useLearnerResources';
 import { ClassesPageNames } from '../../constants';
 
+const { fetchClass } = useLearnerResources();
+
 // For a given Classroom, shows a list of all Exams and Lessons assigned to the Learner
 export function showClassAssignmentsPage(store, classId) {
   return store.dispatch('loading').then(() => {
-    return LearnerClassroomResource.fetchModel({ id: classId })
-      .then(classroom => {
+    return fetchClass({ classId })
+      .then(() => {
         store.commit('SET_PAGE_NAME', ClassesPageNames.CLASS_ASSIGNMENTS);
-        store.commit('classAssignments/SET_CURRENT_CLASSROOM', classroom);
         store.dispatch('notLoading');
       })
       .catch(error => {
diff --git a/kolibri/plugins/learn/assets/src/views/classes/AssignedLessonsCards.vue b/kolibri/plugins/learn/assets/src/views/classes/AssignedLessonsCards.vue
index d50aefec9af..434c00fd0b7 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/AssignedLessonsCards.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/AssignedLessonsCards.vue
@@ -44,12 +44,6 @@
     setup() {
       const { getClass, getClassLessonLink } = useLearnerResources();
 
-      // TODO: We only display class name for lessons on the home page
-      // that fetches classes data to `useLearnerResources`. To save some
-      // API calls, it's not fetched here again. However that creates a hidden
-      // dependency to `HomePage`. Make sure to check that classes are available
-      // when initializing the composable and if not, fetch them, or update
-      // `ClassAssignmentsPage` to use the composable too instead of Vuex.
       function getLessonClassName(lesson) {
         const lessonClass = getClass(lesson.collection);
         return lessonClass ? lessonClass.name : '';
diff --git a/kolibri/plugins/learn/assets/src/views/classes/AssignedQuizzesCards.vue b/kolibri/plugins/learn/assets/src/views/classes/AssignedQuizzesCards.vue
index a40428761e2..c959162c6c1 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/AssignedQuizzesCards.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/AssignedQuizzesCards.vue
@@ -61,12 +61,6 @@
         });
       });
 
-      // TODO: We only display class name for quizzes on the home page
-      // that fetches classes data to `useLearnerResources`. To save some
-      // API calls, it's not fetched here again. However that creates a hidden
-      // dependency to `HomePage`. Make sure to check that classes are available
-      // when initializing the composable and if not, fetch them, or update
-      // `ClassAssignmentsPage` to use the composable too instead of Vuex.
       function getQuizClassName(quiz) {
         const quizClass = getClass(quiz.collection);
         return quizClass ? quizClass.name : '';
diff --git a/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue b/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
index c0fbffad436..61c3e688b8d 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
@@ -2,11 +2,11 @@
 
   <div>
     <h1 class="classroom-name">
-      <KLabeledIcon icon="classes" :label="classroomName" />
+      <KLabeledIcon icon="classes" :label="className" />
     </h1>
 
-    <AssignedLessonsCards :lessons="lessons" />
-    <AssignedQuizzesCards :quizzes="exams" :style="{ marginTop: '44px' }" />
+    <AssignedLessonsCards :lessons="activeLessons" />
+    <AssignedQuizzesCards :quizzes="activeQuizzes" :style="{ marginTop: '44px' }" />
 
   </div>
 
@@ -15,9 +15,12 @@
 
 <script>
 
-  import { mapState } from 'vuex';
-  import AssignedQuizzesCards from './AssignedQuizzesCards.vue';
-  import AssignedLessonsCards from './AssignedLessonsCards.vue';
+  import { computed, onBeforeMount, onBeforeUnmount } from 'kolibri.lib.vueCompositionApi';
+  import { get } from '@vueuse/core';
+
+  import useLearnerResources from '../../composables/useLearnerResources';
+  import AssignedQuizzesCards from './AssignedQuizzesCards';
+  import AssignedLessonsCards from './AssignedLessonsCards';
 
   export default {
     name: 'ClassAssignmentsPage',
@@ -30,34 +33,47 @@
       AssignedQuizzesCards,
       AssignedLessonsCards,
     },
-    data() {
+    setup(_, { root }) {
+      const {
+        fetchClass,
+        getClass,
+        getClassActiveLessons,
+        getClassActiveQuizzes,
+      } = useLearnerResources();
+
+      const classId = root.$router.currentRoute.params.classId;
+      const classroom = computed(() => getClass(classId));
+      const className = computed(() => (get(classroom) ? get(classroom).name : ''));
+      const activeLessons = computed(() => getClassActiveLessons(get(classId)));
+      const activeQuizzes = computed(() => getClassActiveQuizzes(get(classId)));
+
+      function schedulePoll() {
+        const timeoutId = setTimeout(pollForUpdates, 30000);
+        return timeoutId;
+      }
+
+      function pollForUpdates() {
+        fetchClass({ classId, force: true }).then(() => {
+          schedulePoll();
+        });
+      }
+
+      let pollTimeoutId;
+
+      onBeforeMount(() => {
+        pollTimeoutId = schedulePoll();
+      });
+
+      onBeforeUnmount(() => {
+        clearTimeout(pollTimeoutId);
+      });
+
       return {
-        pollTimeoutId: null,
+        className,
+        activeLessons,
+        activeQuizzes,
       };
     },
-    computed: {
-      ...mapState('classAssignments', {
-        classroomName: state => state.currentClassroom.name,
-        exams: state => state.currentClassroom.assignments.exams,
-        lessons: state => state.currentClassroom.assignments.lessons,
-      }),
-    },
-    mounted() {
-      this.schedulePoll();
-    },
-    beforeDestroy() {
-      clearTimeout(this.pollTimeoutId);
-    },
-    methods: {
-      schedulePoll() {
-        this.pollTimeoutId = setTimeout(this.pollForUpdates, 30000);
-      },
-      pollForUpdates() {
-        this.$store.dispatch('classAssignments/updateWithChanges').then(() => {
-          this.schedulePoll();
-        });
-      },
-    },
     $trs: {
       documentTitle: {
         message: 'Class assignments',

From 85dfe6c787312c801a8facb8c0b9a0a7cff6b8df Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Sun, 3 Oct 2021 08:17:48 +0200
Subject: [PATCH 06/27] Fix loader on the home page and use API error handler

To be able to use loading and API error states properly
when initalliy loading a page, it needs to respect the standard
way pages are initialized in Kolibri - through a route handler.
---
 .../plugins/learn/assets/src/routes/index.js  | 22 ++++++++++++++--
 .../views/HomePage/__tests__/HomePage.spec.js | 25 -------------------
 .../learn/assets/src/views/HomePage/index.vue | 11 +-------
 3 files changed, 21 insertions(+), 37 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/routes/index.js b/kolibri/plugins/learn/assets/src/routes/index.js
index 0f7396f88f7..861bd37cc16 100644
--- a/kolibri/plugins/learn/assets/src/routes/index.js
+++ b/kolibri/plugins/learn/assets/src/routes/index.js
@@ -1,5 +1,8 @@
+import { get } from '@vueuse/core';
 import store from 'kolibri.coreVue.vuex.store';
 import router from 'kolibri.coreVue.router';
+import useUser from '../composables/useUser';
+import useLearnerResources from '../composables/useLearnerResources';
 import {
   showTopicsTopic,
   showTopicsChannel,
@@ -18,6 +21,9 @@ import HomePage from '../views/HomePage';
 import RecommendedSubpage from '../views/RecommendedSubpage';
 import classesRoutes from './classesRoutes';
 
+const { isUserLoggedIn } = useUser();
+const { fetchClasses, fetchResumableContentNodes } = useLearnerResources();
+
 function unassignedContentGuard() {
   const { canAccessUnassignedContent } = store.getters;
   if (!canAccessUnassignedContent) {
@@ -51,8 +57,20 @@ export default [
     path: '/home',
     component: HomePage,
     handler() {
-      store.commit('SET_PAGE_NAME', PageNames.HOME);
-      store.commit('CORE_SET_PAGE_LOADING', false);
+      let promises = [];
+      if (get(isUserLoggedIn)) {
+        promises = [fetchClasses(), fetchResumableContentNodes()];
+      }
+      return store.dispatch('loading').then(() => {
+        return Promise.all(promises)
+          .then(() => {
+            store.commit('SET_PAGE_NAME', PageNames.HOME);
+            store.dispatch('notLoading');
+          })
+          .catch(error => {
+            return store.dispatch('handleApiError', error);
+          });
+      });
     },
   },
   {
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js b/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js
index c8f383a4ab9..dbe604df87b 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js
@@ -69,31 +69,6 @@ describe(`HomePage`, () => {
     expect(wrapper.exists()).toBe(true);
   });
 
-  describe(`when loaded`, () => {
-    it(`fetches learner's classes and resumable resources when a user is signed in`, () => {
-      const fetchClasses = jest.fn();
-      const fetchResumableContentNodes = jest.fn();
-      useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
-      useLearnerResources.mockImplementation(() =>
-        useLearnerResourcesMock({ fetchClasses, fetchResumableContentNodes })
-      );
-      makeWrapper();
-      expect(fetchClasses).toHaveBeenCalledTimes(1);
-      expect(fetchResumableContentNodes).toHaveBeenCalledTimes(1);
-    });
-
-    it(`doesn't fetch learner's classes and resumable resources when a user is signed out`, () => {
-      const fetchClasses = jest.fn();
-      const fetchResumableContentNodes = jest.fn();
-      useLearnerResources.mockImplementation(() =>
-        useLearnerResourcesMock({ fetchClasses, fetchResumableContentNodes })
-      );
-      makeWrapper();
-      expect(fetchClasses).not.toHaveBeenCalled();
-      expect(fetchResumableContentNodes).not.toHaveBeenCalled();
-    });
-  });
-
   describe(`"Your classes" section`, () => {
     it(`the section is not displayed for a guest user`, () => {
       const wrapper = makeWrapper();
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
index 7afe3e760cf..74cec72eb94 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
@@ -46,7 +46,7 @@
 
 <script>
 
-  import { computed, onBeforeMount } from 'kolibri.lib.vueCompositionApi';
+  import { computed } from 'kolibri.lib.vueCompositionApi';
   import { get } from '@vueuse/core';
   import useDeviceSettings from '../../composables/useDeviceSettings';
   import useLearnerResources from '../../composables/useLearnerResources';
@@ -82,8 +82,6 @@
         resumableClassesQuizzes,
         resumableClassesResources,
         resumableNonClassesContentNodes,
-        fetchClasses,
-        fetchResumableContentNodes,
       } = useLearnerResources();
 
       const canResumeClasses = computed(() => {
@@ -108,13 +106,6 @@
           get(isUserLoggedIn) && get(activeClassesQuizzes) && get(activeClassesQuizzes).length > 0
       );
 
-      onBeforeMount(() => {
-        if (get(isUserLoggedIn)) {
-          fetchClasses();
-          fetchResumableContentNodes();
-        }
-      });
-
       return {
         isUserLoggedIn,
         classes,

From d8fbbb4ceed75d237778e3ad0c96e63714389c7d Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Thu, 7 Oct 2021 13:58:24 +0200
Subject: [PATCH 07/27] Add docstrings for card grid

---
 .../learn/assets/src/views/cards/CardGrid.vue | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/cards/CardGrid.vue b/kolibri/plugins/learn/assets/src/views/cards/CardGrid.vue
index 79789d8a228..8fc0ae9620d 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/CardGrid.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/CardGrid.vue
@@ -11,7 +11,6 @@
 
   import responsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
 
-  // Add new enums as the designs call for different grid styles
   const GRID_TYPE_1 = 1;
   const GRID_TYPE_2 = 2;
 
@@ -19,6 +18,24 @@
     name: 'CardGrid',
     mixins: [responsiveWindowMixin],
     props: {
+      /**
+       * `1` or `2`
+       *
+       * The following number of cards will
+       * be displayed on one row:
+       *
+       * Grid type `1`
+       *   Level 3+: 3 cards
+       *   Level 2: 2 cards
+       *   Level 1: 1 cards
+       *   Level 0: 1 card
+       *
+       * Grid type `2`
+       *   Level 3+: 4 cards
+       *   Level 2: 3 cards
+       *   Level 1: 2 cards
+       *   Level 0: 1 card
+       */
       gridType: {
         type: Number,
         required: false,

From 8cd95456f472fd9e03412071a9219b17f0db0f0e Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Mon, 4 Oct 2021 08:55:37 +0200
Subject: [PATCH 08/27] Add Explore channels section to the home page

---
 .../src/composables/__mocks__/useChannels.js  |  46 +++++++
 .../assets/src/composables/useChannels.js     |  32 +++++
 .../plugins/learn/assets/src/routes/index.js  |   6 +-
 .../src/views/HomePage/ExploreChannels.vue    |  26 ----
 .../__tests__/ExploreChannels.spec.js         | 122 ++++++++++++++++++
 .../views/HomePage/ExploreChannels/index.vue  | 106 +++++++++++++++
 .../views/HomePage/__tests__/HomePage.spec.js |  83 ++++++++++++
 .../learn/assets/src/views/HomePage/index.vue |  29 +++--
 .../src/views/cards/BaseChannelCard.vue       |  99 ++++++++++++++
 .../src/views/cards/LessonCard/index.vue      |   5 +-
 .../assets/src/views/cards/QuizCard/index.vue |   5 +-
 .../src/views/cards/ResourceCard/index.vue    |   5 +-
 .../src/views/thumbnails/ChannelThumbnail.vue |  49 +++++++
 13 files changed, 573 insertions(+), 40 deletions(-)
 create mode 100644 kolibri/plugins/learn/assets/src/composables/__mocks__/useChannels.js
 create mode 100644 kolibri/plugins/learn/assets/src/composables/useChannels.js
 delete mode 100644 kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels.vue
 create mode 100644 kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels/__tests__/ExploreChannels.spec.js
 create mode 100644 kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels/index.vue
 create mode 100644 kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue
 create mode 100644 kolibri/plugins/learn/assets/src/views/thumbnails/ChannelThumbnail.vue

diff --git a/kolibri/plugins/learn/assets/src/composables/__mocks__/useChannels.js b/kolibri/plugins/learn/assets/src/composables/__mocks__/useChannels.js
new file mode 100644
index 00000000000..24d5677ce1c
--- /dev/null
+++ b/kolibri/plugins/learn/assets/src/composables/__mocks__/useChannels.js
@@ -0,0 +1,46 @@
+/**
+ * `useChannels` composable function mock.
+ *
+ * If default values are sufficient for tests,
+ * you only need call `jest.mock('<useChannels file path>')`
+ * at the top of a test file.
+ *
+ * If you need to override some default values from some tests,
+ * you can import a helper function `useChannelsMock` that accepts
+ * an object with values to be overriden and use it together
+ * with  `mockImplementation` as follows:
+ *
+ * ```
+ * // eslint-disable-next-line import/named
+ * import useChannels, { useChannelsMock } from '<useChannels file path>';
+ *
+ * jest.mock('<useChannels file path>')
+ *
+ * it('test', () => {
+ *   useChannels.mockImplementation(
+ *    () => useChannelsMock({ channels: [{ id: 'channel-1' }] })
+ *   );
+ * })
+ * ```
+ *
+ * You can reset your mock implementation back to default values
+ * for other tests by calling the following in `beforeEach`:
+ *
+ * ```
+ * useChannels.mockImplementation(() => useChannelsMock())
+ * ```
+ */
+
+const MOCK_DEFAULTS = {
+  channels: [],
+  fetchChannels: jest.fn(),
+};
+
+export function useChannelsMock(overrides = {}) {
+  return {
+    ...MOCK_DEFAULTS,
+    ...overrides,
+  };
+}
+
+export default jest.fn(() => useChannelsMock());
diff --git a/kolibri/plugins/learn/assets/src/composables/useChannels.js b/kolibri/plugins/learn/assets/src/composables/useChannels.js
new file mode 100644
index 00000000000..340cf2d05ec
--- /dev/null
+++ b/kolibri/plugins/learn/assets/src/composables/useChannels.js
@@ -0,0 +1,32 @@
+/**
+ * A composable function containing logic related to channels
+ */
+
+import { ref } from 'kolibri.lib.vueCompositionApi';
+import { set } from '@vueuse/core';
+import { ChannelResource } from 'kolibri.resources';
+
+// The refs are defined in the outer scope so they can be use as a store
+const channels = ref([]);
+
+export default function useChannels() {
+  /**
+   * Fetches channels and saves data to this composable's store
+   *
+   * @param {Boolean} available only get the channels that are "available"
+   *                            (i.e. with resources on device) when `true`
+   * @returns {Promise}
+   * @public
+   */
+  function fetchChannels({ available = true } = {}) {
+    return ChannelResource.fetchCollection({ getParams: { available } }).then(collection => {
+      set(channels, collection);
+      return collection;
+    });
+  }
+
+  return {
+    channels,
+    fetchChannels,
+  };
+}
diff --git a/kolibri/plugins/learn/assets/src/routes/index.js b/kolibri/plugins/learn/assets/src/routes/index.js
index 861bd37cc16..eaedcce73cb 100644
--- a/kolibri/plugins/learn/assets/src/routes/index.js
+++ b/kolibri/plugins/learn/assets/src/routes/index.js
@@ -1,6 +1,7 @@
 import { get } from '@vueuse/core';
 import store from 'kolibri.coreVue.vuex.store';
 import router from 'kolibri.coreVue.router';
+import useChannels from '../composables/useChannels';
 import useUser from '../composables/useUser';
 import useLearnerResources from '../composables/useLearnerResources';
 import {
@@ -22,6 +23,7 @@ import RecommendedSubpage from '../views/RecommendedSubpage';
 import classesRoutes from './classesRoutes';
 
 const { isUserLoggedIn } = useUser();
+const { fetchChannels } = useChannels();
 const { fetchClasses, fetchResumableContentNodes } = useLearnerResources();
 
 function unassignedContentGuard() {
@@ -57,9 +59,9 @@ export default [
     path: '/home',
     component: HomePage,
     handler() {
-      let promises = [];
+      let promises = [fetchChannels()];
       if (get(isUserLoggedIn)) {
-        promises = [fetchClasses(), fetchResumableContentNodes()];
+        promises = [...promises, fetchClasses(), fetchResumableContentNodes()];
       }
       return store.dispatch('loading').then(() => {
         return Promise.all(promises)
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels.vue b/kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels.vue
deleted file mode 100644
index 592303275e6..00000000000
--- a/kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-
-  <section>
-    <h2>
-      <KLabeledIcon
-        icon="channel"
-        :label="$tr('header')"
-      />
-    </h2>
-  </section>
-
-</template>
-
-
-<script>
-
-  // TODO: To be implemented, it's here only to get strings
-  // in before the next major release
-  export default {
-    name: 'ExploreChannels',
-    $trs: {
-      header: 'Explore channels',
-    },
-  };
-
-</script>
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels/__tests__/ExploreChannels.spec.js b/kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels/__tests__/ExploreChannels.spec.js
new file mode 100644
index 00000000000..996541e6dc0
--- /dev/null
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels/__tests__/ExploreChannels.spec.js
@@ -0,0 +1,122 @@
+import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+
+import { PageNames } from '../../../../constants';
+import ExploreChannels from '../index';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+
+const TEST_CHANNELS = [
+  {
+    id: 'channel-1',
+    name: 'Channel 1',
+  },
+  {
+    id: 'channel-2',
+    name: 'Channel 2',
+  },
+  {
+    id: 'channel-3',
+    name: 'Channel 3',
+  },
+  {
+    id: 'channel-4',
+    name: 'Channel 4',
+  },
+];
+
+function getViewAllLink(wrapper) {
+  return wrapper.find('[data-test="viewAllLink"]');
+}
+
+function getChannelsLinks(wrapper) {
+  return wrapper.findAll('[data-test="channelLink"]');
+}
+
+function makeWrapper(propsData) {
+  const router = new VueRouter({
+    routes: [
+      {
+        name: PageNames.LIBRARY,
+        path: '/library',
+      },
+      {
+        name: PageNames.TOPICS_CHANNEL,
+        path: '/channel',
+      },
+    ],
+  });
+  router.push('/');
+
+  return mount(ExploreChannels, {
+    propsData,
+    localVue,
+    router,
+  });
+}
+
+describe(`ExploreChannels`, () => {
+  it(`smoke test`, () => {
+    const wrapper = shallowMount(ExploreChannels);
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  describe(`when 'short' is falsy`, () => {
+    it(`all channels are displayed`, () => {
+      const wrapper = makeWrapper({ channels: TEST_CHANNELS });
+      const links = getChannelsLinks(wrapper);
+      expect(links.length).toBe(4);
+      TEST_CHANNELS.forEach((testChannel, idx) => {
+        expect(links.at(idx).text()).toBe(testChannel.name);
+      });
+    });
+
+    it(`'View all' link is not displayed`, () => {
+      const wrapper = makeWrapper({ channels: TEST_CHANNELS });
+      expect(getViewAllLink(wrapper).exists()).toBe(false);
+    });
+  });
+
+  describe(`when 'short' is truthy`, () => {
+    it(`only first three channels are displayed`, () => {
+      const wrapper = makeWrapper({ channels: TEST_CHANNELS, short: true });
+      const links = getChannelsLinks(wrapper);
+      expect(links.length).toBe(3);
+      TEST_CHANNELS.slice(0, 3).forEach((testChannel, idx) => {
+        expect(
+          links
+            .at(idx)
+            .find('.title')
+            .text()
+        ).toBe(testChannel.name);
+      });
+    });
+
+    it(`'View all' link is not displayed when there are no more than three channels`, () => {
+      const wrapper = makeWrapper({ channels: TEST_CHANNELS.slice(0, 3), short: true });
+      expect(getViewAllLink(wrapper).exists()).toBe(false);
+    });
+
+    it(`'View all' link is displayed when there are more than three channels`, () => {
+      const wrapper = makeWrapper({ channels: TEST_CHANNELS, short: true });
+      expect(getViewAllLink(wrapper).exists()).toBe(true);
+    });
+
+    it(`clicking 'View all' link navigates to the library page`, () => {
+      const wrapper = makeWrapper({ channels: TEST_CHANNELS, short: true });
+      getViewAllLink(wrapper).trigger('click');
+      expect(wrapper.vm.$route.name).toBe(PageNames.LIBRARY);
+    });
+  });
+
+  it(`clicking a channel navigates to the channel page`, () => {
+    const wrapper = makeWrapper({ channels: TEST_CHANNELS });
+    expect(wrapper.vm.$route.path).toBe('/');
+    getChannelsLinks(wrapper)
+      .at(0)
+      .trigger('click');
+    expect(wrapper.vm.$route.name).toBe(PageNames.TOPICS_CHANNEL);
+    expect(wrapper.vm.$route.params).toEqual({ channel_id: 'channel-1' });
+  });
+});
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels/index.vue b/kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels/index.vue
new file mode 100644
index 00000000000..2954484acf0
--- /dev/null
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels/index.vue
@@ -0,0 +1,106 @@
+<template>
+
+  <section>
+    <KFixedGrid :numCols="3">
+      <KFixedGridItem :span="2">
+        <h2 :style="{ marginTop: 0 }">
+          <KLabeledIcon
+            icon="channel"
+            :label="$tr('header')"
+          />
+        </h2>
+      </KFixedGridItem>
+      <KFixedGridItem :span="1" alignment="right">
+        <KRouterLink
+          v-if="displayAllChannelsLink"
+          :text="crossComponentStrings.$tr('viewAll')"
+          :to="allChannelsLink"
+          data-test="viewAllLink"
+        />
+      </KFixedGridItem>
+    </KFixedGrid>
+
+    <CardGrid :gridType="1">
+      <BaseChannelCard
+        v-for="(channel, idx) in visibleChannels"
+        :key="idx"
+        data-test="channelLink"
+        :channel="channel"
+        :to="getChannelLink(channel)"
+      />
+    </CardGrid>
+  </section>
+
+</template>
+
+
+<script>
+
+  import { crossComponentTranslator } from 'kolibri.utils.i18n';
+  import { PageNames } from '../../../constants';
+  import CardGrid from '../../cards/CardGrid';
+  import BaseChannelCard from '../../cards/BaseChannelCard';
+  import YourClasses from '../../YourClasses';
+
+  export default {
+    name: 'ExploreChannels',
+    components: {
+      CardGrid,
+      BaseChannelCard,
+    },
+    props: {
+      channels: {
+        type: Array,
+        required: true,
+      },
+      /**
+       * If there are more than four channels, only first four of them
+       * and "View all" link will be displayed if `true`
+       */
+      short: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        crossComponentStrings: { $tr: () => null },
+      };
+    },
+    computed: {
+      visibleChannels() {
+        if (!this.channels) {
+          return [];
+        }
+        if (this.short) {
+          return this.channels.slice(0, 3);
+        }
+        return this.channels;
+      },
+      displayAllChannelsLink() {
+        return this.channels && this.channels.length > this.visibleChannels.length;
+      },
+      allChannelsLink() {
+        return { name: PageNames.LIBRARY };
+      },
+    },
+    mounted() {
+      // `crossComponentTranslator` needs to be used because it's after string freeze
+      // TODO: Add 'View all' string into this component after 0.15 release
+      this.crossComponentStrings = crossComponentTranslator(YourClasses);
+    },
+    methods: {
+      getChannelLink(channel) {
+        return {
+          name: PageNames.TOPICS_CHANNEL,
+          params: { channel_id: channel.id },
+        };
+      },
+    },
+    $trs: {
+      header: 'Explore channels',
+    },
+  };
+
+</script>
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js b/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js
index dbe604df87b..20c57a8f28d 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js
@@ -4,6 +4,7 @@ import VueRouter from 'vue-router';
 import { ClassesPageNames } from '../../../constants';
 import HomePage from '../index';
 /* eslint-disable import/named */
+import useChannels, { useChannelsMock } from '../../../composables/useChannels';
 import useUser, { useUserMock } from '../../../composables/useUser';
 import useDeviceSettings, { useDeviceSettingsMock } from '../../../composables/useDeviceSettings';
 import useLearnerResources, {
@@ -11,6 +12,7 @@ import useLearnerResources, {
 } from '../../../composables/useLearnerResources';
 /* eslint-enable import/named */
 
+jest.mock('../../../composables/useChannels');
 jest.mock('../../../composables/useUser');
 jest.mock('../../../composables/useDeviceSettings');
 jest.mock('../../../composables/useLearnerResources');
@@ -55,6 +57,10 @@ function getRecentQuizzesSection(wrapper) {
   return wrapper.find('[data-test="recentQuizzes"]');
 }
 
+function getExploreChannelsSection(wrapper) {
+  return wrapper.find('[data-test="exploreChannels"]');
+}
+
 describe(`HomePage`, () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -319,4 +325,81 @@ describe(`HomePage`, () => {
       expect(links.at(1).text()).toBe('Quiz 2');
     });
   });
+
+  describe(`"Explore channels" section`, () => {
+    it(`the section is not displayed when there are no channels available`, () => {
+      const wrapper = makeWrapper();
+      expect(getExploreChannelsSection(wrapper).exists()).toBe(false);
+    });
+
+    describe(`when there are some channels available`, () => {
+      beforeEach(() => {
+        useChannels.mockImplementation(() => useChannelsMock({ channels: [{ id: 'channel-1' }] }));
+      });
+
+      it(`the section is not displayed for a signed in user
+        who has some resumable classes resources`, () => {
+        useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
+        useLearnerResources.mockImplementation(() =>
+          useLearnerResourcesMock({
+            resumableClassesResources: [
+              { contentNodeId: 'class-resource-1', lessonId: 'class-1-lesson', classId: 'class-1' },
+              { contentNodeId: 'class-resource-2', lessonId: 'class-2-lesson', classId: 'class-2' },
+            ],
+            getClassResourceLink() {
+              return { path: '/class-resource' };
+            },
+          })
+        );
+
+        const wrapper = makeWrapper();
+        expect(getExploreChannelsSection(wrapper).exists()).toBe(false);
+      });
+
+      it(`the section is not displayed for a signed in user
+        who has some resumable quizzes`, () => {
+        useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
+        useLearnerResources.mockImplementation(() =>
+          useLearnerResourcesMock({
+            resumableClassesQuizzes: [
+              { id: 'class-quiz-1', title: 'Class quiz 1' },
+              { id: 'class-quiz-2', title: 'Class quiz 2' },
+            ],
+            getClassQuizLink() {
+              return { path: '/class-quiz' };
+            },
+          })
+        );
+
+        const wrapper = makeWrapper();
+        expect(getExploreChannelsSection(wrapper).exists()).toBe(false);
+      });
+
+      it(`the section is not displayed for a signed in user
+        who has no resumable classes resources or quizzes
+        when access to unassigned content is not allowed`, () => {
+        useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
+        const wrapper = makeWrapper();
+        expect(getExploreChannelsSection(wrapper).exists()).toBe(false);
+      });
+
+      it(`the section is displayed for a signed in user
+        who has no resumable classes resources or quizzes
+        when access to unassigned content is allowed`, () => {
+        useDeviceSettings.mockImplementation(() =>
+          useDeviceSettingsMock({
+            canAccessUnassignedContent: true,
+          })
+        );
+        useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
+        const wrapper = makeWrapper();
+        expect(getExploreChannelsSection(wrapper).exists()).toBe(true);
+      });
+
+      it(`the section is displayed for a guest user`, () => {
+        const wrapper = makeWrapper();
+        expect(getExploreChannelsSection(wrapper).exists()).toBe(true);
+      });
+    });
+  });
 });
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
index 74cec72eb94..5b105c3ca0e 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
@@ -30,15 +30,13 @@
       recent
       data-test="recentQuizzes"
     />
-    <!--
-      TODO: To be implemented, it's here only to get strings
-      in before the next major release
-      <ExploreChannels
-        v-if="!isUserLoggedIn || !canResumeClasses"
-        class="section"
-      />
-    -->
-    <ExploreChannels v-if="false" />
+    <ExploreChannels
+      v-if="displayExploreChannels"
+      :channels="channels"
+      class="section"
+      data-test="exploreChannels"
+      short
+    />
   </div>
 
 </template>
@@ -48,6 +46,7 @@
 
   import { computed } from 'kolibri.lib.vueCompositionApi';
   import { get } from '@vueuse/core';
+  import useChannels from '../../composables/useChannels';
   import useDeviceSettings from '../../composables/useDeviceSettings';
   import useLearnerResources from '../../composables/useLearnerResources';
   import useUser from '../../composables/useUser';
@@ -75,6 +74,7 @@
     setup() {
       const { isUserLoggedIn } = useUser();
       const { canAccessUnassignedContent } = useDeviceSettings();
+      const { channels } = useChannels();
       const {
         classes,
         activeClassesLessons,
@@ -105,9 +105,19 @@
         () =>
           get(isUserLoggedIn) && get(activeClassesQuizzes) && get(activeClassesQuizzes).length > 0
       );
+      const hasChannels = computed(() => {
+        return get(channels) && get(channels).length > 0;
+      });
+      const displayExploreChannels = computed(() => {
+        return (
+          get(hasChannels) &&
+          (!get(isUserLoggedIn) || (!get(canResumeClasses) && get(canAccessUnassignedContent)))
+        );
+      });
 
       return {
         isUserLoggedIn,
+        channels,
         classes,
         activeClassesLessons,
         activeClassesQuizzes,
@@ -116,6 +126,7 @@
         canResumeClasses,
         continueLearningFromClasses,
         continueLearningOnYourOwn,
+        displayExploreChannels,
       };
     },
   };
diff --git a/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue b/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue
new file mode 100644
index 00000000000..e581b030519
--- /dev/null
+++ b/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue
@@ -0,0 +1,99 @@
+<template>
+
+  <CardLink
+    v-if="channel"
+    :to="to"
+    class="base-channel-card"
+  >
+    <h3 class="title">
+      <TextTruncatorCss
+        :text="channel.name"
+        :maxLines="1"
+      />
+    </h3>
+
+    <KFixedGrid
+      numCols="4"
+      gutter="16"
+      class="content"
+      :style="{ borderTop: `1px solid ${$themeTokens.fineLine}` }"
+    >
+      <KFixedGridItem span="1">
+        <ChannelThumbnail
+          v-if="channel.thumbnail"
+          :thumbnailUrl="channel.thumbnail"
+          class="channel-thumbnail-wrapper"
+        />
+      </KFixedGridItem>
+      <KFixedGridItem span="3">
+        <TextTruncatorCss
+          v-if="description"
+          :text="description"
+          :maxLines="6"
+        />
+      </KFixedGridItem>
+    </KFixedGrid>
+  </CardLink>
+
+</template>
+
+
+<script>
+
+  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
+  import ChannelThumbnail from '../thumbnails/ChannelThumbnail';
+  import CardLink from './CardLink';
+
+  export default {
+    name: 'BaseChannelCard',
+    components: {
+      TextTruncatorCss,
+      ChannelThumbnail,
+      CardLink,
+    },
+    props: {
+      channel: {
+        type: Object,
+        required: true,
+      },
+      /**
+       * vue-router link object
+       */
+      to: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      description() {
+        return this.channel ? this.channel.tagline || this.channel.description : '';
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .base-channel-card {
+    height: 218px;
+  }
+
+  .title {
+    margin-top: 6px;
+    margin-bottom: 12px;
+  }
+
+  .content {
+    padding: 14px;
+    // make the top border take the full card width
+    margin-right: -16px;
+    margin-left: -16px;
+  }
+
+  .channel-thumbnail-wrapper {
+    height: 132px;
+  }
+
+</style>
diff --git a/kolibri/plugins/learn/assets/src/views/cards/LessonCard/index.vue b/kolibri/plugins/learn/assets/src/views/cards/LessonCard/index.vue
index 48f47f6e410..b218e75d052 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/LessonCard/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/LessonCard/index.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <BaseCard v-bind="{ to, title, collectionTitle, completedLabel, inProgressLabel }" />
+  <BaseCard
+    v-if="lesson"
+    v-bind="{ to, title, collectionTitle, completedLabel, inProgressLabel }"
+  />
 
 </template>
 
diff --git a/kolibri/plugins/learn/assets/src/views/cards/QuizCard/index.vue b/kolibri/plugins/learn/assets/src/views/cards/QuizCard/index.vue
index ddaad30e31b..fa90199de58 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/QuizCard/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/QuizCard/index.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <BaseCard v-bind="{ to, title, collectionTitle, completedLabel, inProgressLabel }">
+  <BaseCard
+    v-if="quiz"
+    v-bind="{ to, title, collectionTitle, completedLabel, inProgressLabel }"
+  >
     <template
       v-if="showThumbnail"
       #topLeft
diff --git a/kolibri/plugins/learn/assets/src/views/cards/ResourceCard/index.vue b/kolibri/plugins/learn/assets/src/views/cards/ResourceCard/index.vue
index 0bf9766856f..d4d6aed6989 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/ResourceCard/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/ResourceCard/index.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <BaseCard v-bind="{ to, title, collectionTitle }">
+  <BaseCard
+    v-if="contentNode"
+    v-bind="{ to, title, collectionTitle }"
+  >
     <template #topLeft>
       <ContentNodeThumbnail
         :contentNode="contentNode"
diff --git a/kolibri/plugins/learn/assets/src/views/thumbnails/ChannelThumbnail.vue b/kolibri/plugins/learn/assets/src/views/thumbnails/ChannelThumbnail.vue
new file mode 100644
index 00000000000..a1ddd57f7a2
--- /dev/null
+++ b/kolibri/plugins/learn/assets/src/views/thumbnails/ChannelThumbnail.vue
@@ -0,0 +1,49 @@
+<template>
+
+  <span class="channel-thumbnail">
+    <!--
+      we consider thumbnails decorative - empty `alt`
+      attribute to hide it from screen readers
+    -->
+    <img
+      v-if="thumbnailUrl"
+      class="image"
+      :src="thumbnailUrl"
+      alt=""
+    >
+  </span>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'ChannelThumbnail',
+    props: {
+      thumbnailUrl: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .channel-thumbnail {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .image {
+    width: 100%;
+    height: auto;
+  }
+
+</style>

From 8d856e7002ce585f7e984d32910badecc10af08b Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Thu, 14 Oct 2021 09:11:21 +0200
Subject: [PATCH 09/27] More precise tests for routing

---
 .../src/views/YourClasses/__tests__/YourClasses.spec.js      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/YourClasses/__tests__/YourClasses.spec.js b/kolibri/plugins/learn/assets/src/views/YourClasses/__tests__/YourClasses.spec.js
index 4d5983b7cf5..92067436a84 100644
--- a/kolibri/plugins/learn/assets/src/views/YourClasses/__tests__/YourClasses.spec.js
+++ b/kolibri/plugins/learn/assets/src/views/YourClasses/__tests__/YourClasses.spec.js
@@ -96,7 +96,7 @@ describe(`YourClasses`, () => {
     it(`clicking 'View all' link navigates to all classes page`, () => {
       const wrapper = makeWrapper({ classes: TEST_CLASSES, short: true });
       getViewAllLink(wrapper).trigger('click');
-      expect(wrapper.vm.$route.path).toBe('/all-classes');
+      expect(wrapper.vm.$route.name).toBe(ClassesPageNames.ALL_CLASSES);
     });
   });
 
@@ -106,6 +106,7 @@ describe(`YourClasses`, () => {
     getClassesLinks(wrapper)
       .at(0)
       .trigger('click');
-    expect(wrapper.vm.$route.path).toBe('/class');
+    expect(wrapper.vm.$route.name).toBe(ClassesPageNames.CLASS_ASSIGNMENTS);
+    expect(wrapper.vm.$route.params).toEqual({ classId: 'class-1' });
   });
 });

From a26c045ec1a7acb56ec10f35729c43bf4048fa59 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Thu, 14 Oct 2021 09:44:01 +0200
Subject: [PATCH 10/27] Redirect all types of learners to home

no matter of their classess memberships, access to unasigned resources
settings, or whether they're signed-in or anonymous. From now on,
everyone wil lbe taken to the home page which content will adjust
correspondingly.
---
 kolibri/plugins/learn/assets/src/routes/index.js | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/routes/index.js b/kolibri/plugins/learn/assets/src/routes/index.js
index eaedcce73cb..dda8ecafdd7 100644
--- a/kolibri/plugins/learn/assets/src/routes/index.js
+++ b/kolibri/plugins/learn/assets/src/routes/index.js
@@ -42,16 +42,7 @@ export default [
     name: PageNames.ROOT,
     path: '/',
     handler: () => {
-      const { memberships } = store.state;
-      const { canAccessUnassignedContent } = store.getters;
-
-      // If a registered user, go to Home Page, else go to Content
-      return router.replace({
-        name:
-          memberships.length > 0 || !canAccessUnassignedContent
-            ? PageNames.HOME
-            : PageNames.TOPICS_ROOT,
-      });
+      return router.replace({ name: PageNames.HOME });
     },
   },
   {

From c78cd4d06ae302dcc3be1ec29e3b81e5442f577d Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Thu, 14 Oct 2021 10:07:49 +0200
Subject: [PATCH 11/27] Show resources not available on the home page

when no channels are available
---
 kolibri/plugins/learn/assets/src/routes/index.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/routes/index.js b/kolibri/plugins/learn/assets/src/routes/index.js
index dda8ecafdd7..0bcb6df6e2b 100644
--- a/kolibri/plugins/learn/assets/src/routes/index.js
+++ b/kolibri/plugins/learn/assets/src/routes/index.js
@@ -56,7 +56,11 @@ export default [
       }
       return store.dispatch('loading').then(() => {
         return Promise.all(promises)
-          .then(() => {
+          .then(([channels]) => {
+            if (!channels || !channels.length) {
+              router.replace({ name: PageNames.CONTENT_UNAVAILABLE });
+              return;
+            }
             store.commit('SET_PAGE_NAME', PageNames.HOME);
             store.dispatch('notLoading');
           })

From 5850b8b633973303e03c252811853b70769e3f04 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Thu, 14 Oct 2021 13:34:28 +0200
Subject: [PATCH 12/27] Do not fetch progress when there are no content nodes

---
 .../plugins/learn/assets/src/composables/useLearnerResources.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
index bf14147d06d..ab2a3730646 100644
--- a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
+++ b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
@@ -333,7 +333,7 @@ export default function useLearnerResources() {
    */
   function fetchResumableContentNodes() {
     return ContentNodeResource.fetchResume().then(contentNodes => {
-      if (!contentNodes) {
+      if (!contentNodes || !contentNodes.length) {
         return [];
       }
       set(_resumableContentNodes, contentNodes);

From 1769002840277610ededabe7fb493d59be5364d9 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Thu, 14 Oct 2021 13:54:33 +0200
Subject: [PATCH 13/27] Navigate back to the home page when channel visited
 from the home page

---
 .../assets/src/views/HomePage/ExploreChannels/index.vue   | 7 ++++++-
 kolibri/plugins/learn/assets/src/views/LearnIndex.vue     | 8 +++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels/index.vue b/kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels/index.vue
index 2954484acf0..2725c1d9cbe 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/ExploreChannels/index.vue
@@ -94,7 +94,12 @@
       getChannelLink(channel) {
         return {
           name: PageNames.TOPICS_CHANNEL,
-          params: { channel_id: channel.id },
+          params: {
+            channel_id: channel.id,
+          },
+          query: {
+            last: PageNames.HOME,
+          },
         };
       },
     },
diff --git a/kolibri/plugins/learn/assets/src/views/LearnIndex.vue b/kolibri/plugins/learn/assets/src/views/LearnIndex.vue
index ca8d1de5993..23373a402c2 100644
--- a/kolibri/plugins/learn/assets/src/views/LearnIndex.vue
+++ b/kolibri/plugins/learn/assets/src/views/LearnIndex.vue
@@ -256,10 +256,16 @@
           this.pageName === PageNames.TOPICS_TOPIC ||
           this.pageName === PageNames.TOPICS_CHANNEL
         ) {
+          let immersivePageRoute;
+          if (this.$route.query.last == PageNames.HOME) {
+            immersivePageRoute = this.$router.getRoute(PageNames.HOME);
+          } else {
+            immersivePageRoute = this.$router.getRoute(PageNames.LIBRARY);
+          }
           return {
             appBarTitle: this.coreString('browseChannel'),
             immersivePage: true,
-            immersivePageRoute: this.$router.getRoute(PageNames.LIBRARY),
+            immersivePageRoute,
             immersivePagePrimary: true,
             immersivePageIcon: 'close',
             hasSidebar: true,

From 7a50ef2de7961d05f1cea0eae9d25d0e5974c5cd Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Mon, 18 Oct 2021 16:19:27 +0200
Subject: [PATCH 14/27] Add auto text directionality for user content

---
 kolibri/plugins/learn/assets/src/views/YourClasses/index.vue | 5 ++++-
 kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue    | 2 ++
 .../plugins/learn/assets/src/views/cards/BaseChannelCard.vue | 2 ++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/YourClasses/index.vue b/kolibri/plugins/learn/assets/src/views/YourClasses/index.vue
index c1cfd18cbdd..a9ad75d757b 100644
--- a/kolibri/plugins/learn/assets/src/views/YourClasses/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/YourClasses/index.vue
@@ -30,7 +30,10 @@
         data-test="classLink"
         :to="classAssignmentsLink(c.id)"
       >
-        <h3 :style="{ margin: 0, fontWeight: 'normal' }">
+        <h3
+          dir="auto"
+          :style="{ margin: 0, fontWeight: 'normal' }"
+        >
           {{ c.name }}
         </h3>
       </CardLink>
diff --git a/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue b/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
index 2f424870e5b..1acadcaee71 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
@@ -20,6 +20,7 @@
 
       <div
         v-if="collectionTitle"
+        dir="auto"
         data-test="collectionTitle"
       >
         {{ collectionTitle }}
@@ -27,6 +28,7 @@
 
       <h3 class="title">
         <TextTruncatorCss
+          dir="auto"
           :text="title"
           :maxLines="2"
         />
diff --git a/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue b/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue
index e581b030519..5d3d75c51d2 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue
@@ -7,6 +7,7 @@
   >
     <h3 class="title">
       <TextTruncatorCss
+        dir="auto"
         :text="channel.name"
         :maxLines="1"
       />
@@ -28,6 +29,7 @@
       <KFixedGridItem span="3">
         <TextTruncatorCss
           v-if="description"
+          dir="auto"
           :text="description"
           :maxLines="6"
         />

From bf853c1571ef3e1c8d5b46549d699f64e13886f8 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Mon, 18 Oct 2021 16:26:28 +0200
Subject: [PATCH 15/27] Pass attributes to the inner div

---
 kolibri/core/assets/src/views/TextTruncatorCss.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/kolibri/core/assets/src/views/TextTruncatorCss.vue b/kolibri/core/assets/src/views/TextTruncatorCss.vue
index ea6fd1920ea..c1df5330033 100644
--- a/kolibri/core/assets/src/views/TextTruncatorCss.vue
+++ b/kolibri/core/assets/src/views/TextTruncatorCss.vue
@@ -6,9 +6,16 @@
     of what truncating technique is used. Otherwise adding padding directly
     would break when using technique (B) since text that should be truncated
     would show in padding area.
+
+    Attributes are inherited by the inner `div` to emulate the same behavior
+    like if only one element would wrap the text to allow attributes be applied
+    as close as possible to the text element.
   -->
   <div>
-    <div :class="$computedClass(truncate)">
+    <div
+      v-bind="$attrs"
+      :class="$computedClass(truncate)"
+    >
       {{ text }}
     </div>
   </div>
@@ -28,6 +35,7 @@
    */
   export default {
     name: 'TextTruncatorCss',
+    inheritAttrs: false,
     props: {
       text: {
         type: String,

From 91f439ac695211d857f6d3fea7c51362218b64a7 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Mon, 18 Oct 2021 18:34:20 +0200
Subject: [PATCH 16/27] Fix automatic text directionality in KFixedGridItem

---
 .../learn/assets/src/views/cards/BaseChannelCard.vue     | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue b/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue
index 5d3d75c51d2..7349d5205c2 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue
@@ -26,7 +26,14 @@
           class="channel-thumbnail-wrapper"
         />
       </KFixedGridItem>
-      <KFixedGridItem span="3">
+      <!--
+        unset text-align to fix `KFixedGridItem`'s `text-align: right`
+        conflicting with  `dir="auto"`
+      -->
+      <KFixedGridItem
+        span="3"
+        :style="{ textAlign: unset }"
+      >
         <TextTruncatorCss
           v-if="description"
           dir="auto"

From 566c97139943058e3eb40a597161fbd214effaf2 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Tue, 19 Oct 2021 08:18:11 +0200
Subject: [PATCH 17/27] Make sure that home page is up-to-date

after navigation in 'Learn'
---
 kolibri/core/assets/src/api-resources/contentNode.js  |  4 ++--
 .../assets/src/composables/useLearnerResources.js     | 11 +++++++----
 kolibri/plugins/learn/assets/src/routes/index.js      |  9 ++++++++-
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/kolibri/core/assets/src/api-resources/contentNode.js b/kolibri/core/assets/src/api-resources/contentNode.js
index 57cd47e8d7c..db89e06f92d 100644
--- a/kolibri/core/assets/src/api-resources/contentNode.js
+++ b/kolibri/core/assets/src/api-resources/contentNode.js
@@ -104,8 +104,8 @@ export default new Resource({
   fetchRecommendationsFor(id, getParams) {
     return this.fetchDetailCollection('recommendations_for', id, getParams);
   },
-  fetchResume(getParams) {
-    return this.fetchDetailCollection('resume', Store.getters.currentUserId, getParams);
+  fetchResume(getParams, force) {
+    return this.fetchDetailCollection('resume', Store.getters.currentUserId, getParams, force);
   },
   fetchPopular(getParams) {
     return this.fetchListCollection('popular', getParams);
diff --git a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
index ab2a3730646..e98429e4fc8 100644
--- a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
+++ b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
@@ -315,11 +315,12 @@ export default function useLearnerResources() {
    * Fetches current learner's classes
    * and saves data to this composable's store
    *
+   * @param {Boolean} force Cache won't be used when `true`
    * @returns {Promise}
    * @public
    */
-  function fetchClasses() {
-    return LearnerClassroomResource.fetchCollection().then(collection => {
+  function fetchClasses({ force = false } = {}) {
+    return LearnerClassroomResource.fetchCollection({ force }).then(collection => {
       set(classes, collection);
     });
   }
@@ -328,11 +329,12 @@ export default function useLearnerResources() {
    * Fetches resumable content nodes with their progress data
    * and saves data to this composable's store
    *
+   * @param {Boolean} force Cache won't be used when `true`
    * @returns {Promise}
    * @public
    */
-  function fetchResumableContentNodes() {
-    return ContentNodeResource.fetchResume().then(contentNodes => {
+  function fetchResumableContentNodes({ force = false } = {}) {
+    return ContentNodeResource.fetchResume({}, force).then(contentNodes => {
       if (!contentNodes || !contentNodes.length) {
         return [];
       }
@@ -340,6 +342,7 @@ export default function useLearnerResources() {
       const contentNodesIds = contentNodes.map(contentNode => contentNode.id);
       return ContentNodeProgressResource.fetchCollection({
         getParams: { ids: contentNodesIds },
+        force,
       }).then(progresses => {
         if (progresses) {
           set(_resumableContentNodesProgresses, progresses);
diff --git a/kolibri/plugins/learn/assets/src/routes/index.js b/kolibri/plugins/learn/assets/src/routes/index.js
index 0bcb6df6e2b..6bfef9e778e 100644
--- a/kolibri/plugins/learn/assets/src/routes/index.js
+++ b/kolibri/plugins/learn/assets/src/routes/index.js
@@ -51,8 +51,15 @@ export default [
     component: HomePage,
     handler() {
       let promises = [fetchChannels()];
+      // force fetch classes and resumable content nodes to make sure that the home
+      // page is up-to-date when navigating to other 'Learn' pages and then back
+      // to the home page
       if (get(isUserLoggedIn)) {
-        promises = [...promises, fetchClasses(), fetchResumableContentNodes()];
+        promises = [
+          ...promises,
+          fetchClasses({ force: true }),
+          fetchResumableContentNodes({ force: true }),
+        ];
       }
       return store.dispatch('loading').then(() => {
         return Promise.all(promises)

From ee1f394635687cd5f98985e1f58ada159732a27a Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Tue, 19 Oct 2021 11:38:35 +0200
Subject: [PATCH 18/27] Fix bugs caused by not accepting 0 as a valid resource
 index

---
 .../learn/assets/src/composables/useLearnerResources.js    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
index e98429e4fc8..f4a7dd46518 100644
--- a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
+++ b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
@@ -104,7 +104,10 @@ export default function useLearnerResources() {
     if (!lesson) {
       return undefined;
     }
-    return lesson.resources.findIndex(r => r.contentnode_id === resource.contentNodeId);
+    const lessonResourceIdx = lesson.resources.findIndex(
+      r => r.contentnode_id === resource.contentNodeId
+    );
+    return lessonResourceIdx === -1 ? undefined : lessonResourceIdx;
   }
 
   /**
@@ -269,7 +272,7 @@ export default function useLearnerResources() {
    */
   function getClassResourceLink(resource) {
     const lessonResourceIdx = _getLessonResourceIdx(resource);
-    if (!lessonResourceIdx) {
+    if (lessonResourceIdx === undefined) {
       return undefined;
     }
     return {

From afc3e36fe314e12c5a8f9ed0c7d957a449a327b3 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Tue, 19 Oct 2021 16:56:52 +0200
Subject: [PATCH 19/27] Fix criteria for displaying sections with non-classes
 content

'Continue learning on your own' and 'Explore channels'
should be displayed only after learner finished all their classes
resources and quizzes rather than when not having any classes
resources or quizzes in progress
---
 .../__mocks__/useLearnerResources.js          |   1 +
 .../__tests__/useLearnerResources.spec.js     | 108 ++++++++-
 .../src/composables/useLearnerResources.js    |  16 ++
 .../views/HomePage/__tests__/HomePage.spec.js | 219 ++++++++----------
 .../learn/assets/src/views/HomePage/index.vue |  18 +-
 5 files changed, 234 insertions(+), 128 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js b/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js
index d7f78d50e20..125251880f7 100644
--- a/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js
+++ b/kolibri/plugins/learn/assets/src/composables/__mocks__/useLearnerResources.js
@@ -38,6 +38,7 @@ const MOCK_DEFAULTS = {
   resumableClassesQuizzes: [],
   resumableClassesResources: [],
   resumableNonClassesContentNodes: [],
+  learnerFinishedAllClasses: false,
   getClass: jest.fn(),
   getClassActiveLessons: jest.fn(),
   getClassActiveQuizzes: jest.fn(),
diff --git a/kolibri/plugins/learn/assets/src/composables/__tests__/useLearnerResources.spec.js b/kolibri/plugins/learn/assets/src/composables/__tests__/useLearnerResources.spec.js
index 280f5466a37..a2c72215cc5 100644
--- a/kolibri/plugins/learn/assets/src/composables/__tests__/useLearnerResources.spec.js
+++ b/kolibri/plugins/learn/assets/src/composables/__tests__/useLearnerResources.spec.js
@@ -1,5 +1,6 @@
-import { ContentNodeResource, ContentNodeProgressResource } from 'kolibri.resources';
+import cloneDeep from 'lodash/cloneDeep';
 
+import { ContentNodeResource, ContentNodeProgressResource } from 'kolibri.resources';
 import { PageNames, ClassesPageNames } from '../../constants';
 import { LearnerClassroomResource } from '../../apiResources';
 import useLearnerResources from '../useLearnerResources';
@@ -11,6 +12,7 @@ const {
   resumableClassesQuizzes,
   resumableClassesResources,
   resumableNonClassesContentNodes,
+  learnerFinishedAllClasses,
   getClass,
   getClassActiveLessons,
   getClassActiveQuizzes,
@@ -118,6 +120,10 @@ const TEST_CLASSES = [
             { contentnode_id: 'resource-2' },
             { contentnode_id: 'resource-3-in-progress' },
           ],
+          progress: {
+            resource_progress: 0,
+            total_resources: 3,
+          },
         },
         {
           id: 'class-1-active-lesson-2',
@@ -129,6 +135,10 @@ const TEST_CLASSES = [
             { contentnode_id: 'resource-4' },
             { contentnode_id: 'resource-5-in-progress' },
           ],
+          progress: {
+            resource_progress: 1,
+            total_resources: 3,
+          },
         },
         {
           id: 'class-1-inactive-lesson',
@@ -136,6 +146,10 @@ const TEST_CLASSES = [
           is_active: false,
           collection: 'class-1',
           resources: [{ contentnode_id: 'resource-5-in-progress' }],
+          progress: {
+            resource_progress: 0,
+            total_resources: 1,
+          },
         },
       ],
     },
@@ -177,6 +191,10 @@ const TEST_CLASSES = [
             { contentnode_id: 'resource-2' },
             { contentnode_id: 'resource-1-in-progress' },
           ],
+          progress: {
+            resource_progress: 1,
+            total_resources: 3,
+          },
         },
         {
           id: 'class-2-inactive-lesson',
@@ -187,14 +205,50 @@ const TEST_CLASSES = [
             { contentnode_id: 'resource-7' },
             { contentnode_id: 'resource-8-in-progress' },
           ],
+          progress: {
+            resource_progress: 0,
+            total_resources: 2,
+          },
         },
       ],
     },
   },
 ];
 
+// A helper that takes an object with test classes
+// and returns its copy with all lessons and quizzes
+// progress changed to complete
+function finishClasses(classes) {
+  const finishedClasses = cloneDeep(classes);
+  return finishedClasses.map(c => {
+    c.assignments.exams.forEach(quiz => {
+      quiz.progress.closed = true;
+    });
+    c.assignments.lessons.forEach(lesson => {
+      lesson.progress.resource_progress = lesson.progress.total_resources;
+    });
+    return c;
+  });
+}
+
+// A helper that takes an object with test classes
+// and returns its copy with all lessons and quizzes
+// changed to inactive
+function inactivateClasses(classes) {
+  const inactiveClasses = cloneDeep(classes);
+  return inactiveClasses.map(c => {
+    c.assignments.exams.forEach(quiz => {
+      quiz.active = false;
+    });
+    c.assignments.lessons.forEach(lesson => {
+      lesson.is_active = false;
+    });
+    return c;
+  });
+}
+
 describe(`useLearnerResources`, () => {
-  beforeAll(() => {
+  beforeEach(() => {
     ContentNodeResource.fetchResume.mockResolvedValue(TEST_RESUMABLE_CONTENT_NODES);
     ContentNodeProgressResource.fetchCollection.mockResolvedValue(TEST_CONTENT_NODES_PROGRESSES);
     fetchResumableContentNodes();
@@ -222,6 +276,10 @@ describe(`useLearnerResources`, () => {
             { contentnode_id: 'resource-2' },
             { contentnode_id: 'resource-3-in-progress' },
           ],
+          progress: {
+            resource_progress: 0,
+            total_resources: 3,
+          },
         },
         {
           id: 'class-1-active-lesson-2',
@@ -233,6 +291,10 @@ describe(`useLearnerResources`, () => {
             { contentnode_id: 'resource-4' },
             { contentnode_id: 'resource-5-in-progress' },
           ],
+          progress: {
+            resource_progress: 1,
+            total_resources: 3,
+          },
         },
         {
           id: 'class-2-active-lesson-1',
@@ -244,6 +306,10 @@ describe(`useLearnerResources`, () => {
             { contentnode_id: 'resource-2' },
             { contentnode_id: 'resource-1-in-progress' },
           ],
+          progress: {
+            resource_progress: 1,
+            total_resources: 3,
+          },
         },
       ]);
     });
@@ -371,6 +437,36 @@ describe(`useLearnerResources`, () => {
     });
   });
 
+  describe(`learnerFinishedAllClasses`, () => {
+    it(`returns 'true' if a learner has no classes`, () => {
+      LearnerClassroomResource.fetchCollection.mockResolvedValue([]);
+      fetchClasses().then(() => {
+        expect(learnerFinishedAllClasses.value).toBe(true);
+      });
+    });
+
+    it(`returns 'true' if a learner has no active lessons and quizzes`, () => {
+      LearnerClassroomResource.fetchCollection.mockResolvedValue(inactivateClasses(TEST_CLASSES));
+      fetchClasses().then(() => {
+        expect(learnerFinishedAllClasses.value).toBe(true);
+      });
+    });
+
+    it(`returns 'false' if a learner hasn't finished all lessons and quizzes yet`, () => {
+      LearnerClassroomResource.fetchCollection.mockResolvedValue(TEST_CLASSES);
+      fetchClasses().then(() => {
+        expect(learnerFinishedAllClasses.value).toBe(false);
+      });
+    });
+
+    it(`returns 'true' if a learner finished all lessons and quizzes`, () => {
+      LearnerClassroomResource.fetchCollection.mockResolvedValue(finishClasses(TEST_CLASSES));
+      fetchClasses().then(() => {
+        expect(learnerFinishedAllClasses.value).toBe(true);
+      });
+    });
+  });
+
   describe(`getClass`, () => {
     it(`returns a class`, () => {
       expect(getClass('class-2')).toEqual(TEST_CLASSES[1]);
@@ -390,6 +486,10 @@ describe(`useLearnerResources`, () => {
             { contentnode_id: 'resource-2' },
             { contentnode_id: 'resource-3-in-progress' },
           ],
+          progress: {
+            resource_progress: 0,
+            total_resources: 3,
+          },
         },
         {
           id: 'class-1-active-lesson-2',
@@ -401,6 +501,10 @@ describe(`useLearnerResources`, () => {
             { contentnode_id: 'resource-4' },
             { contentnode_id: 'resource-5-in-progress' },
           ],
+          progress: {
+            resource_progress: 1,
+            total_resources: 3,
+          },
         },
       ]);
     });
diff --git a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
index f4a7dd46518..447273b1358 100644
--- a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
+++ b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
@@ -157,6 +157,21 @@ export default function useLearnerResources() {
     );
   });
 
+  /**
+   * @returns {Boolean} - `true` if a learner finished all active
+   *                       classes lessons and quizzes (or when there are none)
+   * @public
+   */
+  const learnerFinishedAllClasses = computed(() => {
+    const hasUnfinishedLesson = get(activeClassesLessons).some(lesson => {
+      return lesson.progress.resource_progress < lesson.progress.total_resources;
+    });
+    const hasUnfinishedQuiz = get(activeClassesQuizzes).some(quiz => {
+      return !quiz.progress.closed;
+    });
+    return !(hasUnfinishedLesson || hasUnfinishedQuiz);
+  });
+
   /**
    * @param {String} classId
    * @returns {Object} A class
@@ -362,6 +377,7 @@ export default function useLearnerResources() {
     resumableClassesQuizzes,
     resumableClassesResources,
     resumableNonClassesContentNodes,
+    learnerFinishedAllClasses,
     getClass,
     getResumableContentNode,
     getResumableContentNodeProgress,
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js b/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js
index 20c57a8f28d..c26158d264b 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js
@@ -45,8 +45,8 @@ function getClassesSection(wrapper) {
   return wrapper.find('[data-test="classes"]');
 }
 
-function getContinueLearningSection(wrapper) {
-  return wrapper.find('[data-test="continueLearning"]');
+function getContinueLearningFromClassesSection(wrapper) {
+  return wrapper.find('[data-test="continueLearningFromClasses"]');
 }
 
 function getRecentLessonsSection(wrapper) {
@@ -57,6 +57,10 @@ function getRecentQuizzesSection(wrapper) {
   return wrapper.find('[data-test="recentQuizzes"]');
 }
 
+function getContinueLearningOnYourOwnSection(wrapper) {
+  return wrapper.find('[data-test="continueLearningOnYourOwn"]');
+}
+
 function getExploreChannelsSection(wrapper) {
   return wrapper.find('[data-test="exploreChannels"]');
 }
@@ -105,20 +109,20 @@ describe(`HomePage`, () => {
     });
   });
 
-  describe(`"Continue learning from classes/on your own" section`, () => {
+  describe(`"Continue learning from classes" section`, () => {
     it(`the section is not displayed for a guest user`, () => {
       const wrapper = makeWrapper();
-      expect(getContinueLearningSection(wrapper).exists()).toBe(false);
+      expect(getContinueLearningFromClassesSection(wrapper).exists()).toBe(false);
     });
 
     it(`the section is not displayed for a signed in user who has
-      no resources or quizzes in progress`, () => {
+      no classes resources or quizzes in progress`, () => {
       useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
       const wrapper = makeWrapper();
-      expect(getContinueLearningSection(wrapper).exists()).toBe(false);
+      expect(getContinueLearningFromClassesSection(wrapper).exists()).toBe(false);
     });
 
-    describe(`for a signed in user who has some classes resources or quizzes in progress`, () => {
+    describe(`for a signed in user who has some resources or quizzes in progress`, () => {
       beforeEach(() => {
         useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
         useLearnerResources.mockImplementation(() =>
@@ -152,25 +156,9 @@ describe(`HomePage`, () => {
         );
       });
 
-      it(`"Continue learning on your own" section is not displayed`, () => {
-        const wrapper = makeWrapper();
-        expect(wrapper.text()).not.toContain('Continue learning on your own');
-      });
-
-      it(`"Continue learning from your classes" section is displayed`, () => {
+      it(`the section is displayed and contains classes resources and quizzes in progress`, () => {
         const wrapper = makeWrapper();
-        expect(wrapper.text()).toContain('Continue learning from your classes');
-      });
-
-      it(`resources in progress outside of classes are not displayed`, () => {
-        const wrapper = makeWrapper();
-        expect(getContinueLearningSection(wrapper).text()).not.toContain('Non-class resource 1');
-        expect(getContinueLearningSection(wrapper).text()).not.toContain('Non-class resource 2');
-      });
-
-      it(`classes resources and quizzes in progress are displayed`, () => {
-        const wrapper = makeWrapper();
-        const links = getContinueLearningSection(wrapper).findAll('a');
+        const links = getContinueLearningFromClassesSection(wrapper).findAll('a');
         expect(links.length).toBe(4);
         expect(links.at(0).text()).toBe('Class resource 1');
         expect(links.at(1).text()).toBe('Class resource 2');
@@ -178,10 +166,20 @@ describe(`HomePage`, () => {
         expect(links.at(3).text()).toBe('Class quiz 2');
       });
 
+      it(`non-classes resources in progress  are not displayed`, () => {
+        const wrapper = makeWrapper();
+        expect(getContinueLearningFromClassesSection(wrapper).text()).not.toContain(
+          'Non-class resource 1'
+        );
+        expect(getContinueLearningFromClassesSection(wrapper).text()).not.toContain(
+          'Non-class resource 2'
+        );
+      });
+
       it(`clicking a resource navigates to the class resource page`, () => {
         const wrapper = makeWrapper();
         expect(wrapper.vm.$route.path).toBe('/');
-        const links = getContinueLearningSection(wrapper).findAll('a');
+        const links = getContinueLearningFromClassesSection(wrapper).findAll('a');
         links.at(0).trigger('click');
         expect(wrapper.vm.$route.path).toBe('/class-resource');
       });
@@ -189,71 +187,11 @@ describe(`HomePage`, () => {
       it(`clicking a quiz navigates to the class quiz page`, () => {
         const wrapper = makeWrapper();
         expect(wrapper.vm.$route.path).toBe('/');
-        const links = getContinueLearningSection(wrapper).findAll('a');
+        const links = getContinueLearningFromClassesSection(wrapper).findAll('a');
         links.at(2).trigger('click');
         expect(wrapper.vm.$route.path).toBe('/class-quiz');
       });
     });
-
-    describe(`for a signed in user who doesn't have any classes resources or quizzes in progress
-      and has some resources in progress outside of classes`, () => {
-      beforeEach(() => {
-        useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
-        useLearnerResources.mockImplementation(() =>
-          useLearnerResourcesMock({
-            resumableNonClassesContentNodes: [
-              { id: 'non-class-resource-1', title: 'Non-class resource 1' },
-              { id: 'non-class-resource-2', title: 'Non-class resource 2' },
-            ],
-            getTopicContentNodeLink() {
-              return { path: '/topic-resource' };
-            },
-          })
-        );
-      });
-
-      it(`"Continue learning from your classes" section is not displayed`, () => {
-        const wrapper = makeWrapper();
-        expect(wrapper.text()).not.toContain('Continue learning from your classes');
-      });
-
-      it(`"Continue learning on your own" section is not displayed
-        when access to unassigned content is not allowed`, () => {
-        const wrapper = makeWrapper();
-        expect(wrapper.text()).not.toContain('Continue learning on your own');
-      });
-
-      describe(`when access to unassigned content is allowed`, () => {
-        beforeEach(() => {
-          useDeviceSettings.mockImplementation(() =>
-            useDeviceSettingsMock({
-              canAccessUnassignedContent: true,
-            })
-          );
-        });
-
-        it(`"Continue learning on your own" section is displayed`, () => {
-          const wrapper = makeWrapper();
-          expect(wrapper.text()).toContain('Continue learning on your own');
-        });
-
-        it(`resources in progress outside of classes are displayed`, () => {
-          const wrapper = makeWrapper();
-          const links = getContinueLearningSection(wrapper).findAll('a');
-          expect(links.length).toBe(2);
-          expect(links.at(0).text()).toBe('Non-class resource 1');
-          expect(links.at(1).text()).toBe('Non-class resource 2');
-        });
-
-        it(`clicking a resource navigates to the topic resource page`, () => {
-          const wrapper = makeWrapper();
-          expect(wrapper.vm.$route.path).toBe('/');
-          const links = getContinueLearningSection(wrapper).findAll('a');
-          links.at(0).trigger('click');
-          expect(wrapper.vm.$route.path).toBe('/topic-resource');
-        });
-      });
-    });
   });
 
   describe(`"Recent lessons" section`, () => {
@@ -326,72 +264,117 @@ describe(`HomePage`, () => {
     });
   });
 
-  describe(`"Explore channels" section`, () => {
-    it(`the section is not displayed when there are no channels available`, () => {
+  describe(`"Continue learning on your own" section`, () => {
+    it(`the section is not displayed for a guest user`, () => {
       const wrapper = makeWrapper();
-      expect(getExploreChannelsSection(wrapper).exists()).toBe(false);
+      expect(getContinueLearningOnYourOwnSection(wrapper).exists()).toBe(false);
     });
 
-    describe(`when there are some channels available`, () => {
-      beforeEach(() => {
-        useChannels.mockImplementation(() => useChannelsMock({ channels: [{ id: 'channel-1' }] }));
-      });
+    it(`the section is not displayed for a signed in user
+      who hasn't finished all their classes resources and quizzes yet`, () => {
+      useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
+      const wrapper = makeWrapper();
+      expect(getContinueLearningOnYourOwnSection(wrapper).exists()).toBe(false);
+    });
 
-      it(`the section is not displayed for a signed in user
-        who has some resumable classes resources`, () => {
+    describe(`for a signed in user
+      who has finished all their classes resources and quizzes
+      and has some non-classes resources in progress`, () => {
+      beforeEach(() => {
         useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
         useLearnerResources.mockImplementation(() =>
           useLearnerResourcesMock({
-            resumableClassesResources: [
-              { contentNodeId: 'class-resource-1', lessonId: 'class-1-lesson', classId: 'class-1' },
-              { contentNodeId: 'class-resource-2', lessonId: 'class-2-lesson', classId: 'class-2' },
+            learnerFinishedAllClasses: true,
+            resumableNonClassesContentNodes: [
+              { id: 'non-class-resource-1', title: 'Non-class resource 1' },
+              { id: 'non-class-resource-2', title: 'Non-class resource 2' },
             ],
-            getClassResourceLink() {
-              return { path: '/class-resource' };
+            getTopicContentNodeLink() {
+              return { path: '/topic-resource' };
             },
           })
         );
+      });
 
+      it(`the section is not displayed when access to unassigned content is not allowed`, () => {
         const wrapper = makeWrapper();
-        expect(getExploreChannelsSection(wrapper).exists()).toBe(false);
+        expect(getContinueLearningOnYourOwnSection(wrapper).exists()).toBe(false);
+      });
+
+      describe(`when access to unassigned content is allowed`, () => {
+        beforeEach(() => {
+          useDeviceSettings.mockImplementation(() =>
+            useDeviceSettingsMock({
+              canAccessUnassignedContent: true,
+            })
+          );
+        });
+
+        it(`the section is displayed and contains non-classes resources in progress`, () => {
+          const wrapper = makeWrapper();
+          expect(getContinueLearningOnYourOwnSection(wrapper).exists()).toBe(true);
+          const links = getContinueLearningOnYourOwnSection(wrapper).findAll('a');
+          expect(links.length).toBe(2);
+          expect(links.at(0).text()).toBe('Non-class resource 1');
+          expect(links.at(1).text()).toBe('Non-class resource 2');
+        });
+
+        it(`clicking a resource navigates to the topic resource page`, () => {
+          const wrapper = makeWrapper();
+          expect(wrapper.vm.$route.path).toBe('/');
+          const links = getContinueLearningOnYourOwnSection(wrapper).findAll('a');
+          links.at(0).trigger('click');
+          expect(wrapper.vm.$route.path).toBe('/topic-resource');
+        });
+      });
+    });
+  });
+
+  describe(`"Explore channels" section`, () => {
+    it(`the section is not displayed when there are no channels available`, () => {
+      const wrapper = makeWrapper();
+      expect(getExploreChannelsSection(wrapper).exists()).toBe(false);
+    });
+
+    describe(`when there are some channels available`, () => {
+      beforeEach(() => {
+        useChannels.mockImplementation(() => useChannelsMock({ channels: [{ id: 'channel-1' }] }));
       });
 
       it(`the section is not displayed for a signed in user
-        who has some resumable quizzes`, () => {
+        who hasn't finished all their classes resources and quizzes yet`, () => {
         useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
-        useLearnerResources.mockImplementation(() =>
-          useLearnerResourcesMock({
-            resumableClassesQuizzes: [
-              { id: 'class-quiz-1', title: 'Class quiz 1' },
-              { id: 'class-quiz-2', title: 'Class quiz 2' },
-            ],
-            getClassQuizLink() {
-              return { path: '/class-quiz' };
-            },
-          })
-        );
-
         const wrapper = makeWrapper();
         expect(getExploreChannelsSection(wrapper).exists()).toBe(false);
       });
 
       it(`the section is not displayed for a signed in user
-        who has no resumable classes resources or quizzes
+        who has finished all their classes resources and quizzes
         when access to unassigned content is not allowed`, () => {
         useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
+        useLearnerResources.mockImplementation(() =>
+          useLearnerResourcesMock({
+            learnerFinishedAllClasses: true,
+          })
+        );
         const wrapper = makeWrapper();
         expect(getExploreChannelsSection(wrapper).exists()).toBe(false);
       });
 
       it(`the section is displayed for a signed in user
-        who has no resumable classes resources or quizzes
+        who has finished all their classes resources and quizzes
         when access to unassigned content is allowed`, () => {
+        useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
+        useLearnerResources.mockImplementation(() =>
+          useLearnerResourcesMock({
+            learnerFinishedAllClasses: true,
+          })
+        );
         useDeviceSettings.mockImplementation(() =>
           useDeviceSettingsMock({
             canAccessUnassignedContent: true,
           })
         );
-        useUser.mockImplementation(() => useUserMock({ isUserLoggedIn: true }));
         const wrapper = makeWrapper();
         expect(getExploreChannelsSection(wrapper).exists()).toBe(true);
       });
diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
index 5b105c3ca0e..e57adecc763 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/index.vue
@@ -12,7 +12,9 @@
       v-if="continueLearningFromClasses || continueLearningOnYourOwn"
       class="section"
       :fromClasses="continueLearningFromClasses"
-      data-test="continueLearning"
+      :data-test="continueLearningFromClasses ?
+        'continueLearningFromClasses' :
+        'continueLearningOnYourOwn'"
     />
     <AssignedLessonsCards
       v-if="hasActiveClassesLessons"
@@ -82,19 +84,19 @@
         resumableClassesQuizzes,
         resumableClassesResources,
         resumableNonClassesContentNodes,
+        learnerFinishedAllClasses,
       } = useLearnerResources();
 
-      const canResumeClasses = computed(() => {
-        return get(resumableClassesQuizzes).length > 0 || get(resumableClassesResources).length > 0;
-      });
       const continueLearningFromClasses = computed(
-        () => get(isUserLoggedIn) && get(canResumeClasses)
+        () =>
+          (get(isUserLoggedIn) && get(resumableClassesQuizzes).length > 0) ||
+          get(resumableClassesResources).length > 0
       );
       const continueLearningOnYourOwn = computed(
         () =>
           get(isUserLoggedIn) &&
+          get(learnerFinishedAllClasses) &&
           get(canAccessUnassignedContent) &&
-          !get(canResumeClasses) &&
           get(resumableNonClassesContentNodes).length > 0
       );
       const hasActiveClassesLessons = computed(
@@ -111,7 +113,8 @@
       const displayExploreChannels = computed(() => {
         return (
           get(hasChannels) &&
-          (!get(isUserLoggedIn) || (!get(canResumeClasses) && get(canAccessUnassignedContent)))
+          (!get(isUserLoggedIn) ||
+            (get(learnerFinishedAllClasses) && get(canAccessUnassignedContent)))
         );
       });
 
@@ -123,7 +126,6 @@
         activeClassesQuizzes,
         hasActiveClassesLessons,
         hasActiveClassesQuizzes,
-        canResumeClasses,
         continueLearningFromClasses,
         continueLearningOnYourOwn,
         displayExploreChannels,

From b16ae6288726170dd7e283ffbe17130c4c26e530 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Mon, 25 Oct 2021 11:13:14 +0200
Subject: [PATCH 20/27] Fix comments

---
 kolibri/plugins/learn/assets/src/composables/useChannels.js     | 2 +-
 .../plugins/learn/assets/src/composables/useLearnerResources.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/composables/useChannels.js b/kolibri/plugins/learn/assets/src/composables/useChannels.js
index 340cf2d05ec..12fd182de21 100644
--- a/kolibri/plugins/learn/assets/src/composables/useChannels.js
+++ b/kolibri/plugins/learn/assets/src/composables/useChannels.js
@@ -6,7 +6,7 @@ import { ref } from 'kolibri.lib.vueCompositionApi';
 import { set } from '@vueuse/core';
 import { ChannelResource } from 'kolibri.resources';
 
-// The refs are defined in the outer scope so they can be use as a store
+// The refs are defined in the outer scope so they can be used as a shared store
 const channels = ref([]);
 
 export default function useChannels() {
diff --git a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
index 447273b1358..9d6aedafeac 100644
--- a/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
+++ b/kolibri/plugins/learn/assets/src/composables/useLearnerResources.js
@@ -13,7 +13,7 @@ import { ContentNodeResource, ContentNodeProgressResource } from 'kolibri.resour
 import { LearnerClassroomResource } from '../apiResources';
 import { PageNames, ClassesPageNames } from '../constants';
 
-// The refs are defined in the outer scope so they can be use as a store
+// The refs are defined in the outer scope so they can be used as a shared store
 const _resumableContentNodes = ref([]);
 const _resumableContentNodesProgresses = ref([]);
 const classes = ref([]);

From 83f51cf55fbe4581161b379643512abab0bfde39 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Mon, 25 Oct 2021 11:14:37 +0200
Subject: [PATCH 21/27] Add a grid type validator

---
 kolibri/plugins/learn/assets/src/views/cards/CardGrid.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/kolibri/plugins/learn/assets/src/views/cards/CardGrid.vue b/kolibri/plugins/learn/assets/src/views/cards/CardGrid.vue
index 8fc0ae9620d..4995db01217 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/CardGrid.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/CardGrid.vue
@@ -40,6 +40,9 @@
         type: Number,
         required: false,
         default: GRID_TYPE_1,
+        validator(value) {
+          return [GRID_TYPE_1, GRID_TYPE_2].includes(value);
+        },
       },
     },
     computed: {

From d16411b9393f495c2437ce73a093f3fef8a817d6 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Mon, 25 Oct 2021 13:09:59 +0200
Subject: [PATCH 22/27] Use text annotation token for collection name color

---
 kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue b/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
index 1acadcaee71..c1f15a8f19b 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
@@ -20,6 +20,7 @@
 
       <div
         v-if="collectionTitle"
+        :style="{ color: $themeTokens.annotation }"
         dir="auto"
         data-test="collectionTitle"
       >

From ad3f98192403fbc7fdb540e9d553cee67e3d574e Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Mon, 25 Oct 2021 13:14:45 +0200
Subject: [PATCH 23/27] Fix missing quotes in style value

---
 .../plugins/learn/assets/src/views/cards/BaseChannelCard.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue b/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue
index 7349d5205c2..3ed6c7d75f6 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue
@@ -32,7 +32,7 @@
       -->
       <KFixedGridItem
         span="3"
-        :style="{ textAlign: unset }"
+        :style="{ textAlign: 'unset' }"
       >
         <TextTruncatorCss
           v-if="description"

From c7714203d11bc2778e94421ee3a3ff7b2e95977d Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Mon, 25 Oct 2021 13:18:14 +0200
Subject: [PATCH 24/27] Fix bad property name

---
 .../learn/assets/src/views/HomePage/ContinueLearning.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/HomePage/ContinueLearning.vue b/kolibri/plugins/learn/assets/src/views/HomePage/ContinueLearning.vue
index 994ee247fb3..da6648f214a 100644
--- a/kolibri/plugins/learn/assets/src/views/HomePage/ContinueLearning.vue
+++ b/kolibri/plugins/learn/assets/src/views/HomePage/ContinueLearning.vue
@@ -33,7 +33,7 @@
           :key="idx"
           :contentNode="contentNode"
           :to="getTopicContentNodeLink(contentNode.id)"
-          :collectionName="getContentNodeTopicName(contentNode)"
+          :collectionTitle="getContentNodeTopicName(contentNode)"
         />
       </template>
     </CardGrid>

From 996f67dcc605adea2ea654971bf6990213dc8b67 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Tue, 26 Oct 2021 09:50:33 +0200
Subject: [PATCH 25/27] Fix ellipsis character not being covered fully by white
 rectangle

when ellipsis should be hidden in IE
---
 kolibri/core/assets/src/views/TextTruncatorCss.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/core/assets/src/views/TextTruncatorCss.vue b/kolibri/core/assets/src/views/TextTruncatorCss.vue
index c1df5330033..05eb673054c 100644
--- a/kolibri/core/assets/src/views/TextTruncatorCss.vue
+++ b/kolibri/core/assets/src/views/TextTruncatorCss.vue
@@ -122,7 +122,7 @@
               position: 'absolute',
               right: 0,
               width: ellipsisWidth,
-              height: '50%',
+              height: '100%',
               background: 'white',
             },
           };

From da5e269fc37c1cc2594fde9405a5d4afc4313118 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Tue, 26 Oct 2021 10:42:59 +0200
Subject: [PATCH 26/27] Fix channel thumbnails images overflowing container in
 IE

---
 .../learn/assets/src/views/thumbnails/ChannelThumbnail.vue       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/kolibri/plugins/learn/assets/src/views/thumbnails/ChannelThumbnail.vue b/kolibri/plugins/learn/assets/src/views/thumbnails/ChannelThumbnail.vue
index a1ddd57f7a2..3c9c528e62f 100644
--- a/kolibri/plugins/learn/assets/src/views/thumbnails/ChannelThumbnail.vue
+++ b/kolibri/plugins/learn/assets/src/views/thumbnails/ChannelThumbnail.vue
@@ -42,6 +42,7 @@
   }
 
   .image {
+    flex-shrink: 0; // IE fix
     width: 100%;
     height: auto;
   }

From f07d662f361e615acf483a36afef60a3ac5a646b Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Tue, 26 Oct 2021 11:36:30 +0200
Subject: [PATCH 27/27] Keep proper image ratio

---
 .../learn/assets/src/views/thumbnails/ChannelThumbnail.vue   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/thumbnails/ChannelThumbnail.vue b/kolibri/plugins/learn/assets/src/views/thumbnails/ChannelThumbnail.vue
index 3c9c528e62f..1261c7319f6 100644
--- a/kolibri/plugins/learn/assets/src/views/thumbnails/ChannelThumbnail.vue
+++ b/kolibri/plugins/learn/assets/src/views/thumbnails/ChannelThumbnail.vue
@@ -43,8 +43,11 @@
 
   .image {
     flex-shrink: 0; // IE fix
-    width: 100%;
+    align-self: center;
+    width: auto;
+    max-width: 100%;
     height: auto;
+    max-height: 100%;
   }
 
 </style>