Repository: learningequality/kolibri

Issue:
Implement Side Informational Panel throughout new Learn experience
**Overview:**
While the container component is handled in #8107, the implementation of the component, and connection to relevant cards, toolbars, etc. still needs to be completed. 

The sidepanel can be accessed 3 ways:
- from the content renderer (as a resource informational panel) 
- from the content renderer (as a topic/lesson informational panel) 
- from a single card by the (i) icon (as a resource informational panel) 

**Done when:**
- The three interactions above all work and the correct metadata is displayed for each

<img width="443" alt="Screen Shot 2021-08-17 at 10 46 41 AM" src="https://user-images.githubusercontent.com/17235236/129748169-0dfa7378-e38a-45b1-8e96-7728e5311e6d.png">
<img width="466" alt="Screen Shot 2021-08-17 at 10 46 56 AM" src="https://user-images.githubusercontent.com/17235236/129748171-0eba9805-ce37-4b12-b3bf-0ac314aff1c7.png">
<img width="682" alt="Screen Shot 2021-08-17 at 10 45 15 AM" src="https://user-images.githubusercontent.com/17235236/129748166-0ff54a33-2ff2-459a-8666-965a97fc5284.png">



Discussion:

Resolving patch:
diff --git a/kolibri/core/content/api.py b/kolibri/core/content/api.py
--- a/kolibri/core/content/api.py
+++ b/kolibri/core/content/api.py
@@ -631,15 +631,19 @@ def copies_count(self, request, **kwargs):
 
     @detail_route(methods=["get"])
     def next_content(self, request, **kwargs):
-        # retrieve the "next" content node, according to depth-first tree traversal
+        # retrieve the "next" content node, according to depth-first tree traversal.
+        # topicOnly flag set to true will find the next topic node after the parent
+        # of this item. Will return this_item parent if nothing found
         this_item = self.get_object()
-        next_item = (
-            models.ContentNode.objects.filter(
-                available=True, tree_id=this_item.tree_id, lft__gt=this_item.rght
-            )
-            .order_by("lft")
-            .first()
+        topic_only = request.query_params.get("topicOnly")
+        next_item_query = models.ContentNode.objects.filter(
+            available=True, tree_id=this_item.tree_id, lft__gt=this_item.rght
         )
+        if topic_only:
+            next_item_query.filter(kind=content_kinds.TOPIC)
+
+        next_item = next_item_query.order_by("lft").first()
+
         if not next_item:
             next_item = this_item.get_root()
 


Test patch:
diff --git a/integration_testing/features/learner/learner-view-next-content-side-panel.feature b/integration_testing/features/learner/learner-view-next-content-side-panel.feature
new file mode 100644
--- /dev/null
+++ b/integration_testing/features/learner/learner-view-next-content-side-panel.feature
@@ -0,0 +1,47 @@
+Feature: Learner view selection of next content
+  In a lesson context, the learner needs to see the contents of the lesson
+  when opening the side panel.
+  In a regular context, the learner should see content also in the same topic
+  and be linked to the next topic when opening the side panel
+
+  Background:
+    Given that I am signed in as a Learner
+      And that I have been assigned a <lesson> with multiple items
+
+    Scenario: Opening the side panel and clicking another resource
+      Given I am viewing <resource-1> in <lesson>
+      When I click the the *View lesson resources* icon in the top menu
+      Then I see a side bar appear on the right
+        And it says *Also in this lesson*
+        And it lists resources, not including the one being currently viewed
+      When I click <resource-2>
+      Then I am redirected to view <resource-2>
+      When I click again on the *View lesson resources* icon in the top menu
+      Then I should see <resource-1> as an option, but not <resource-2>
+        And I should see my progress reflected next to the entry for <resource-1>
+      When I click on the gray area, hit the ESC key or click the X icon
+      Then the side bar is closed and I see <resource-2> unobstructed
+
+    Scenario: Viewing a resource whose sibling has a duration set
+      Given I am viewing <resource> in the same lesson as <resource-2>, which has a set duration property
+      When I click the *View lesson resources* icon in the top menu
+      Then I see a side bar appear on the right
+        And I see <resource-2> and it displays its duration under its title
+
+  Background:
+
+    Scenario: Viewing content as a guest users
+      Given I can view <channel> which has multiple resources nested in folders
+      When I view a <topic> which has no sibling topics in the same folder
+        And I click to view a <resource> within that <topic>
+        And I click to open the side panel while viewing <resource>
+      Then I will see all items belonging to <topic> except <resource>
+      When I view a <topic-2> which has another folder alongside it <topic-3>
+        And I click to view a <resource> within <topic-2>
+        And I click to open the side panel while viewing <resource>
+      Then I will see all items belonging to <topic-2> except <resource>
+        And I will see a link at the bottom, linking me to <topic-3>
+
+  Examples:
+  | channel     | resource  | topic-n | lesson          |
+  | KA English  | Counting  | Topic N | Counting Lesson |
diff --git a/kolibri/plugins/learn/assets/test/views/learn-immersive-layout.spec.js b/kolibri/plugins/learn/assets/test/views/learn-immersive-layout.spec.js
--- a/kolibri/plugins/learn/assets/test/views/learn-immersive-layout.spec.js
+++ b/kolibri/plugins/learn/assets/test/views/learn-immersive-layout.spec.js
@@ -30,6 +30,12 @@ store.state.topicsTree = {
   },
 };
 
+store.getters = {
+  isAdmin() {
+    return false;
+  },
+};
+
 function makeWrapper({ propsData } = {}) {
   return shallowMount(LearnImmersiveLayout, {
     propsData,