Remote connection status

[jredrejo]

Summary

Adds a connection status icon when browsing a remote library content

References

Closes: #9859

Reviewer guidance

As in the attached video, explore a remote library and connect and disconnect the remote device to test if it works fine.

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.0a11.dev0_git.9.g75e34a6a.pex
Windows Installer (EXE)	kolibri-0.16.0a11.dev0+git.9.g75e34a6a-unsigned.exe
Debian Package	kolibri_0.16.0a11.dev0+git.9.g75e34a6a-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0a11.dev0+git.9.g75e34a6a-0.3.0.dmg
Source Tarball	kolibri-0.16.0a11.dev0+git.9.g75e34a6a.tar.gz
WHL file	kolibri-0.16.0a11.dev0+git.9.g75e34a6a-py2.py3-none-any.whl

[marcellamaki]

This looks good to me and initial manual QA checks out. @radinamatic can @pcenov confirm this Monday morning his time?

[akolson]

Non-blocking, but just double checking you intentionally left out the color prop here :)

[akolson]

Thanks @jredrejo. This looks good and the implementation is very clear.

[pcenov]

Hi @jredrejo, I have some questions because while I am able to see the 'Disconnected' status icon as shown in your example I am also observing the following issues and it's not clear to me whether these are in scope of this PR or are separate issues:

1. Why is the 'Disconnected' status icon being displayed for channels and resources which are on my own device?
2. When I click on a channel on the remote device I can't see the channel's resources and therefore I can't test whether the 'Disconnected' status icon is being displayed there while viewing the resources as specified in Remote Content Browsing: Update UI to display connection errors #9859. The following error is displayed in the console: TypeError: Cannot read properties of undefined (reading 'page')
3. When I refresh the 'Explore libraries' page for a moment I see the 'Disconnected' status icon.

Video:

2023-04-03_13-16-00.mp4