Remote content browsing final polish

[akolson]

Summary

This pr polishes the remote content browsing UI

References

Resolves #10448

Reviewer guidance

UI should respond as specified in the mockups

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0a12.dev0_git.236.g72b4a153.pex
Windows Installer (EXE)	kolibri-0.16.0a12.dev0+git.236.g72b4a153-unsigned.exe
Debian Package	kolibri_0.16.0a12.dev0+git.236.g72b4a153-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0a12.dev0+git.236.g72b4a153-0.3.0.dmg
Source Tarball	kolibri-0.16.0a12.dev0+git.236.g72b4a153.tar.gz
WHL file	kolibri-0.16.0a12.dev0+git.236.g72b4a153-py2.py3-none-any.whl

[marcellamaki]

I've done a very quick code read through and nothing sticks out - and some of the vue component clean up looks 💯 - nice job @akolson

I also did some preliminary manual QA with pinned/ no pinned devices, as a guest user, and as a learner. So far looking good.

I feel okay about merging this and getting some good testing/feedback in during the bug catch tomorrow if @rtibbles doesn't see anything blocking in the code.

[rtibbles]

We can merge this as is, but we should revisit the back links (as they will be broken on page refresh), and the delayed loading/loading state of the Explore libraries page.

Plus we should come back and fix the skipped tests too.

[rtibbles]

Hrm, this doesn't seem quite right to me. The goBackRoute prop of the LibraryPage is a route object, but route params are strings, so I don't quite see how this is meant to be working.

[rtibbles]

Ah, I see how this is kind of working - the underlying params object does get modified, but it doesn't get encoded in the URL. Unfortunately, it means if the page is refreshed the back link no longer works.

I think this is probably best handled in a similar way to the other back links in Learn, by encoding the name of the page in the query parameters.

Can add an additional function to this composable for creating the library page back links: https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/learn/assets/src/composables/useContentLink.js#L7

[rtibbles]

There's no loading state in the page while this is happening, and because one of the devices was taking a very long time to respond, I was just looking at a blank Explore Libraries page with no indication what was happening.

I think this change to waiting until all the channel fetches have been resolved makes a worse user experience, because it means that seeing other libraries is limited by the loading speed of the slowest library to load.