Fix no resources available" instead of the available libraries #13184

AllanOXDi · 2025-03-11T15:00:51Z

Summary

Fixes the showing of "No resources available" instead of the available other libraries.

Before

After

Library0.17.5.mp4

closes #13071

References

#13071

github-actions · 2025-03-11T15:33:05Z

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.18.0b1.dev0_git.146.gaad9b6a9.pex
Windows Installer (EXE)	kolibri-0.18.0b1.dev0+git.146.gaad9b6a9-windows-setup-unsigned.exe
Debian Package	kolibri_0.18.0b1.dev0+git.146.gaad9b6a9-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.18.0b1.dev0+git.146.gaad9b6a9.dmg
Android Package (APK)	kolibri-0.18.0b1.dev0+git.146.gaad9b6a9-0.1.4-debug.apk
Raspberry Pi Image	kolibri-pi-image-0.18.0b1.dev0+git.146.gaad9b6a9.zip
TAR file	kolibri-0.18.0b1.dev0+git.146.gaad9b6a9.tar.gz
WHL file	kolibri-0.18.0b1.dev0+git.146.gaad9b6a9-py2.py3-none-any.whl

LianaHarris360 · 2025-03-12T20:33:45Z

Tagging @radinamatic @pcenov for QA review

radinamatic · 2025-03-18T04:39:08Z

Assets from this PR were tested on both Ubuntu and Windows 11, and the originally reported issue is indeed corrected.

However, in the scenario that we were discussing on Slack with @rtibbles, when there are no resources in the library and no peers in the local network:

admin would (eventually) see the channels on Kolibri Studio (as in the screenshot), but
non-admin users would see a rather empty page, which is not ideal

For that reason @rtibbles suggested we would want that page to be more dynamic based on whether there are local libraries available, and preserve the messaging from the content unavailable page for the empty state.

So the idea is for the non-admin users to keep the current change from this PR IF there are other peers in the local network (and something does appear under the Other libraries). And in case there are no other peers around, and the class server has no channels, display the No resources available heading and Ask your coach or administrator for assistance below.

cc @marcellamaki @jtamiace

LianaHarris360

I’m seeing the CONTENT_UNAVAILABLE page as an admin when I should be able to browse channels on Kolibri Studio.

Based on Radina’s comment, I believe the CONTENT_UNAVAILABLE page should only displayed for non-admin users if there are no peers in the local network and no channels.

When there are no channels and no other libraries for the learner to browse, I currently see the LibraryPage:

But in this case, a learner should see the ContentUnavailablePage with the message Ask your coach or administrator for assistance instead:

radinamatic · 2025-03-19T18:33:48Z

Thank you @LianaHarris360 for including the screenhots of what @rtibbles was suggesting. I thought of trying to mock that alongside my description, but it would have certainly taken me much more time! 🙏🏽

rtibbles · 2025-03-20T00:00:13Z

I think let's pull the body of this component out into a separate component: https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/learn/assets/src/views/ContentUnavailablePage.vue - reuse it in the page there, and then also display it within the context of the LibraryPage.vue? That will allow us to continue to have the Content Unavailable page when we need to - but also mean we can show the appropriate language if there are no channels available, but also still display any locally available libraries (or Studio in the case of a super admin).

@AllanOXDi @LianaHarris360 does that make sense as an approach here?

rtibbles

Still not quite cleanly handling this empty state without side effects. I trust you are testing this with a clean Kolibri home directory to see how this renders?

The goal here is to retain our previous messaging in the case of a truly empty state, while also not blocking browsing of remote or local libraries when they are available.

rtibbles · 2025-03-20T19:05:25Z

kolibri/plugins/learn/assets/src/views/LibraryPage/NoResourcePage.vue

@@ -0,0 +1,90 @@
+<template>
+
+  <LearnAppBarPage :appBarTitle="learnString('learnLabel')">


Rather than duplicating the component completely - my suggestion was to make a component that represented the body of the ContentUnavailablePage component (everything but the LearnAppBarPage component) and then reuse it in the LibraryPage and the ContentUnavailablePage.

Doing this has caused us to have two LearnAppBarPage components, one nested inside the other:

rtibbles · 2025-03-20T19:05:50Z

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

@@ -77,7 +81,7 @@
          />
          <!-- Other Libraries -->
          <OtherLibraries
-            v-if="showOtherLibraries"
+            v-if="showOtherLibraries && !isLearner"


Not sure why we're now hiding the other libraries from learners?

This basically creates no change from the previous experience for learners, even though there are browsable libraries on the network:

rtibbles · 2025-03-20T19:08:34Z

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

-            router.replace({ name: PageNames.CONTENT_UNAVAILABLE });
-            return;
+          if (!channels.length) {
+            set(isChannelEmpty, true);


Don't need to add this, we're already tracking this with isLocalLibraryEmpty.

rtibbles · 2025-03-20T19:11:47Z

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

-          >
-            {{ coreString('nothingInLibraryLearner') }}
-          </p>
+          <NoResourcePage v-if="isChannelEmpty && isLearner" />


I think we probably want to conditionally show this based on whether there are any libraries around you or not. If there are, we should show the existing message below, if not, then we should show this component.

This will require us to communicate something out of the OtherLibraries component to dynamically update this based on whether any libraries are being shown.

Conditionalizing this on being a learner means that in the completely empty state, we're not showing proper messaging to an admin to prompt them to add resources to the device:

AllanOXDi · 2025-03-24T16:02:13Z

Hi @rtibbles I'm not sure, do we update the view as soon as we discover a library, learner initially doesn't have local libraries on the network but then one joins?

rtibbles · 2025-03-24T17:48:52Z

Yes, the OtherLibraries component is checking for other libraries on the network, so we would need a mechanism for it to communicate out when it is displaying libraries or not (probably by emitting an event and having the LibraryPage listening to that).

rtibbles · 2025-03-24T17:50:00Z

kolibri/plugins/learn/assets/src/views/LibraryPage/NoResourcePage.vue

+  import commonLearnStrings from '../commonLearnStrings';
+
+  export default {
+    name: 'NoResourcePage',


This is more like "NoResourceComponent" now, I think? And then we could import this into the ContentUnavailablePage to act as the body and avoid the duplication here.

rtibbles · 2025-03-24T17:50:16Z

kolibri/plugins/learn/assets/src/views/LibraryPage/NoResourcePage.vue

+      };
+    },
+    components: {
+      LearnAppBarPage,


This component is no longer used here, hence the linting errors.

…ility of network devices

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

LianaHarris360

This might not be blocking or could be fixed in a follow-up, but another thing I noticed is that the NoResources component and the OtherLibraries message 'No other libraries around you right now' are displayed before the correct components load, with no indication that the page is still loading. This is more noticeable at slower data speeds.

LibraryPageLoad.mov

rtibbles · 2025-03-26T21:06:41Z

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

@@ -427,6 +429,7 @@
        metadataSidePanelContent: null,
        mobileSidePanelIsOpen: false,
        usingMeteredConnection: true,
+        isNetworkLibraryAvailable: false,


I think maybe we could address part of @LianaHarris360's concern by defaulting this to true? Then once we've tried to load the network devices, the event you're emitting will then set this to false?

rtibbles · 2025-03-26T21:11:15Z

kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue

+        deep: true,
+      },
+    },
+    mounted() {


I suspect using mounted here might be a little flaky, as we don't actually know that the initial data has been loaded at the point of the component being mounted?

Maybe we can use the isLoadingChannels value from the useDevices composable to do an initial trigger here rather than mounted? So the first time that goes from true to false we can then trigger this method.

rtibbles · 2025-03-26T21:28:43Z

This is much closer - one other slight issue, when there are resources available on my device, I am seeing this.

I think a little bit more cleanup to take care of this, and the "not quite loaded" state that @LianaHarris360 flagged and we should be good to go.

The initially requested changes have been addressed.

LianaHarris360 · 2025-03-27T19:19:29Z

@radinamatic Tagging for a QA re-review

rtibbles

Issues I was seeing previously appear to be resolved - will leave for QA to give the final thumbs up here!

pcenov · 2025-03-28T16:35:44Z

I'll probably have to revisit this on Monday as it is getting late here but so far the only issues I am observing are on slow internet connection where if there are other libraries and I refresh the page I am seeing first the search panel, then "There's nothing in your library yet..." and "No other libraries around you right now", then "No resources available" and after that the correct state:

slow.connection.mp4

Similarly if there are no libraries:

slow.connection.-.no.libraries.mp4

rtibbles · 2025-03-28T19:22:39Z

I suspect that these loading state problems have probably been better surfaced by @AllanOXDi's work here, rather than created by it. We'll wait for the rest of @pcenov's review on Monday, but unless there are other significant issues we've not yet encountered, I'd rather put the loading state concerns into a follow up issue rather than block this PR any further.

pcenov · 2025-03-31T12:55:35Z

@rtibbles I have filled a follow-up for the loading state problems. ~~I didn't observe any other issues.~~

pcenov · 2025-03-31T13:04:51Z

Actually, I had it in my notes to double check how are we proceeding with the following issue where we are now not showing the "No resources available" page to a learner without resources or other libraries:

pcenov · 2025-03-31T13:12:27Z

OK - sorry for the confusion, this scenario is also handled correctly now by showing a modified text under "No resources available" which reads: "Ask your coach or administrator for assistance"

fixes seeing no available resources instead of libraries

d7acd34

github-actions bot added APP: Learn Re: Learn App (content, quizzes, lessons, etc.) DEV: frontend labels Mar 11, 2025

rtibbles assigned LianaHarris360 Mar 11, 2025

AllanOXDi requested a review from LianaHarris360 March 11, 2025 20:27

conditionalizes the display of no resources page to only admins

60eb931

LianaHarris360 previously requested changes Mar 19, 2025

View reviewed changes

reverts changes and reuses the contentunavaliable component

83bc7ff

AllanOXDi requested a review from LianaHarris360 March 20, 2025 15:18

rtibbles reviewed Mar 20, 2025

View reviewed changes

revert the the ublication of the componet

9d9f7d9

rtibbles added the P0 - critical Priority: Release blocker or regression label Mar 24, 2025

rtibbles reviewed Mar 24, 2025

View reviewed changes

conditionalizes the display of no resource component based on availab…

ebc2360

…ility of network devices

AllanOXDi requested a review from rtibbles March 26, 2025 17:01

LianaHarris360 reviewed Mar 26, 2025

View reviewed changes

kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue Show resolved Hide resolved

fixes failing test

1bea3a3

AllanOXDi requested a review from LianaHarris360 March 26, 2025 18:23

LianaHarris360 reviewed Mar 26, 2025

View reviewed changes

rtibbles reviewed Mar 26, 2025

View reviewed changes

changes updating the event basing on the devicesWithChannelsExist

5e95a05

AllanOXDi requested review from rtibbles and LianaHarris360 March 27, 2025 17:52

rtibbles reviewed Mar 27, 2025

View reviewed changes

pcenov mentioned this pull request Mar 31, 2025

Learn > Library - Loading state improvements #13276

Open

LianaHarris360 approved these changes Mar 31, 2025

View reviewed changes

AllanOXDi merged commit 02df77a into learningequality:develop Mar 31, 2025
51 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix no resources available" instead of the available libraries #13184

Fix no resources available" instead of the available libraries #13184

AllanOXDi commented Mar 11, 2025 •

edited

Loading

github-actions bot commented Mar 11, 2025 •

edited

Loading

LianaHarris360 commented Mar 12, 2025

radinamatic commented Mar 18, 2025

LianaHarris360 left a comment

radinamatic commented Mar 19, 2025

rtibbles commented Mar 20, 2025

rtibbles left a comment

rtibbles Mar 20, 2025

rtibbles Mar 20, 2025

rtibbles Mar 20, 2025

rtibbles Mar 20, 2025

rtibbles Mar 20, 2025

AllanOXDi commented Mar 24, 2025

rtibbles commented Mar 24, 2025

rtibbles Mar 24, 2025

rtibbles Mar 24, 2025

LianaHarris360 left a comment

rtibbles Mar 26, 2025

rtibbles Mar 26, 2025

rtibbles commented Mar 26, 2025

LianaHarris360 commented Mar 27, 2025

rtibbles left a comment

pcenov commented Mar 28, 2025

rtibbles commented Mar 28, 2025

pcenov commented Mar 31, 2025 •

edited

Loading

pcenov commented Mar 31, 2025

pcenov commented Mar 31, 2025

		@@ -0,0 +1,90 @@
		<template>

		<LearnAppBarPage :appBarTitle="learnString('learnLabel')">

Fix no resources available" instead of the available libraries #13184

Fix no resources available" instead of the available libraries #13184

Conversation

AllanOXDi commented Mar 11, 2025 • edited Loading

Summary

Before

After

References

github-actions bot commented Mar 11, 2025 • edited Loading

LianaHarris360 commented Mar 12, 2025

radinamatic commented Mar 18, 2025

LianaHarris360 left a comment

Choose a reason for hiding this comment

radinamatic commented Mar 19, 2025

rtibbles commented Mar 20, 2025

rtibbles left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AllanOXDi commented Mar 24, 2025

rtibbles commented Mar 24, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LianaHarris360 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rtibbles commented Mar 26, 2025

LianaHarris360 commented Mar 27, 2025

rtibbles left a comment

Choose a reason for hiding this comment

pcenov commented Mar 28, 2025

rtibbles commented Mar 28, 2025

pcenov commented Mar 31, 2025 • edited Loading

pcenov commented Mar 31, 2025

pcenov commented Mar 31, 2025

AllanOXDi commented Mar 11, 2025 •

edited

Loading

github-actions bot commented Mar 11, 2025 •

edited

Loading

pcenov commented Mar 31, 2025 •

edited

Loading