Rename variable to make it clear it is always a folder.

Add backlink utility for adding the previous back link.
Use it in for Folder links from the TopicsContentPage.

kolibri/plugins/learn/assets/src/composables/useContentLink.js

@@ -4,6 +4,10 @@ import pick from 'lodash/pick';
 import { computed, getCurrentInstance } from 'kolibri.lib.vueCompositionApi';
 import { ExternalPagePaths, PageNames } from '../constants';
 
+function _decodeBackLinkQuery(query) {
+  return query && query.prevQuery ? JSON.parse(decodeURI(query.prevQuery)) : {};
+}
+
 export default function useContentLink(store) {
   // Get store reference from the curent instance
   // but allow it to be passed in to allow for dependency
@@ -91,15 +95,33 @@ export default function useContentLink(store) {
     return _makeNodeLink(id, isResource, query, deviceId);
   }
 
+  /**
+   * A function to generate a VueRouter link object that links to
+   * a topic, and decodes previous query parameters
+   * created by generateContentBackLinkCurrentPage if they exist,
+   * allowing e.g. a resource page to link to a topic page
+   * while maintaining the conceptual model of a single immersive overlay
+   * that can be closed out, returning to the originating page that linked
+   * to the original parent topic of the resource.
+   * @param {string} id - the id of the node
+   * @return {Object} VueRouter link object
+   */
+  function genContentLinkKeepPreviousBackLink(id, deviceId) {
+    if (!route) {
+      return null;
+    }
+    const oldQuery = _decodeBackLinkQuery(get(route).query);
+    const query = pick(oldQuery, ['prevName', 'prevQuery', 'prevParams']);
+
+    return _makeNodeLink(id, false, query, deviceId);
+  }
+
   const back = computed(() => {
     const routeValue = get(route);
     if (!routeValue) {
       return null;
     }
-    const query =
-      routeValue.query && routeValue.query.prevQuery
-        ? JSON.parse(decodeURI(routeValue.query.prevQuery))
-        : {};
+    const query = _decodeBackLinkQuery(routeValue.query);
     const name = (routeValue.query || {}).prevName || PageNames.HOME;
     const params =
       routeValue.query && routeValue.query.prevParams
@@ -154,6 +176,7 @@ export default function useContentLink(store) {
   return {
     genContentLinkBackLinkCurrentPage,
     genContentLinkKeepCurrentBackLink,
+    genContentLinkKeepPreviousBackLink,
     genExternalContentURLBackLinkCurrentPage,
     genExternalBackURL,
     genLibraryPageBackLink,

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

@@ -5,12 +5,14 @@
     <div
       v-if="contentNodes.length"
       class="content-list"
-      :class="nextContent ? 'bottom-link' : ''"
+      :class="nextFolder ? 'bottom-link' : ''"
     >
       <KRouterLink
         v-for="content in contentNodes"
         :key="content.id"
-        :to="genContentLinkKeepCurrentBackLink(content.id, content.is_leaf)"
+        :to="content.is_leaf ?
+          genContentLinkKeepCurrentBackLink(content.id, content.is_leaf) :
+          genContentLinkKeepPreviousBackLink(content.id)"
         class="item"
         :class="[windowIsSmall && 'small',
                  content.id === currentResourceId &&
@@ -67,8 +69,8 @@
     </div>
 
     <KRouterLink
-      v-if="nextContent"
-      :to="genContentLinkKeepCurrentBackLink(nextContent.id, nextContent.is_leaf)"
+      v-if="nextFolder"
+      :to="genContentLinkKeepPreviousBackLink(nextFolder.id)"
       class="next-content-link"
       :style="{
         borderTop: '1px solid ' + $themeTokens.fineLine,
@@ -81,7 +83,7 @@
         {{ nextFolderMessage }}
       </div>
       <div class="next-title">
-        {{ nextContent.title }}
+        {{ nextFolder.title }}
       </div>
       <KIcon class="forward-icon" icon="forward" />
     </KRouterLink>
@@ -114,8 +116,15 @@
     mixins: [KResponsiveWindowMixin],
     setup() {
       const { contentNodeProgressMap } = useContentNodeProgress();
-      const { genContentLinkKeepCurrentBackLink } = useContentLink();
-      return { contentNodeProgressMap, genContentLinkKeepCurrentBackLink };
+      const {
+        genContentLinkKeepCurrentBackLink,
+        genContentLinkKeepPreviousBackLink,
+      } = useContentLink();
+      return {
+        contentNodeProgressMap,
+        genContentLinkKeepCurrentBackLink,
+        genContentLinkKeepPreviousBackLink,
+      };
     },
     props: {
       /**
@@ -128,7 +137,7 @@
         default: () => [],
       },
       /** Content node with the following properties: id, is_leaf, title */
-      nextContent: {
+      nextFolder: {
         type: Object, // or falsy
         required: false,
         default: () => {},
@@ -188,16 +197,12 @@
         };
       },
       emptyMessage() {
-        /* eslint-disable kolibri/vue-no-undefined-string-uses */
         return this.isLesson
           ? this.$tr('noOtherLessonResources')
           : this.$tr('noOtherTopicResources');
-        /* eslint-enable */
       },
       nextFolderMessage() {
-        /* eslint-disable kolibri/vue-no-undefined-string-uses */
         return this.$tr('nextFolder');
-        /* eslint-enable */
       },
     },
     methods: {

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

@@ -129,7 +129,7 @@
       <AlsoInThis
         style="margin-top: 8px"
         :contentNodes="viewResourcesContents"
-        :nextContent="nextContent"
+        :nextFolder="nextFolder"
         :isLesson="lessonContext"
         :loading="resourcesSidePanelLoading"
         :currentResourceId="currentResourceId"
@@ -369,7 +369,7 @@
         bookmark: null,
         sidePanelContent: null,
         showViewResourcesSidePanel: false,
-        nextContent: null,
+        nextFolder: null,
         viewResourcesContents: [],
         resourcesSidePanelFetched: false,
         resourcesSidePanelLoading: false,
@@ -513,7 +513,7 @@
       initializeState() {
         this.bookmark = null;
         this.showViewResourcesSidePanel = false;
-        this.nextContent = null;
+        this.nextFolder = null;
         this.viewResourcesContents = [];
         this.resourcesSidePanelFetched = false;
         this.resourcesSidePanelLoading = false;
@@ -579,7 +579,7 @@
        * is a topic.
        *
        * @modifies this.viewResourcesContents - Sets it to the progress-mapped nodes
-       * @modifies this.nextContent - Sets the value with this.content's parents next sibling folder
+       * @modifies this.nextFolder - Sets the value with this.content's parents next sibling folder
        * if found
        * @modifies useContentNodeProgress.contentNodeProgressMap (indirectly) if the user
        * is logged in
@@ -603,19 +603,19 @@
         }
         return ContentNodeResource.fetchTree(treeParams).then(ancestor => {
           let parent;
-          let nextContents;
+          let nextFolders;
           if (fetchGrandparent) {
             const parentIndex = ancestor.children.results.findIndex(
               c => c.id === this.content.parent
             );
             parent = ancestor.children.results[parentIndex];
-            nextContents = ancestor.children.results.slice(parentIndex + 1);
+            nextFolders = ancestor.children.results.slice(parentIndex + 1);
           } else {
             parent = ancestor;
             const contentIndex = ancestor.children.results.findIndex(c => c.id === this.content.id);
-            nextContents = ancestor.children.results.slice(contentIndex + 1);
+            nextFolders = ancestor.children.results.slice(contentIndex + 1);
           }
-          this.nextContent = nextContents.find(c => c.kind === ContentNodeKinds.TOPIC) || null;
+          this.nextFolder = nextFolders.find(c => c.kind === ContentNodeKinds.TOPIC) || null;
           this.viewResourcesContents = parent.children.results.filter(n => n.id);
         });
       },