Turn terminal links into anchors using xterm addon

[mgcth]

References

Fixes #5489.

Code changes

Adding xterm-addon-web-links addon to packages.json and to widget.ts, and loading it below the FitAddon.

User-facing changes

Turn terminal hyperlinks into anchors users can click and be taken to that link in a new tab.

Backwards-incompatible changes

None, as far as I know.

[jupyterlab-probot]

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

[welcome]

Thanks for submitting your first pull request! You are awesome! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please make sure you followed the pull request template, as this will help us review your contribution more quickly.

You can meet the other Jovyans by joining our Discourse forum. There is also a intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[fcollonval]

Thanks a lot @mgcth

Would you mind adding a test for this feature?
You can add it in galata/test/jupyterlab/terminal.test.ts by starting with a copy of that test:

jupyterlab/galata/test/jupyterlab/terminal.test.ts

Line 92 in 10c16e8

test('Terminal should open in Launcher cwd', async ({ page, tmpPath }) => {

[mgcth]

@fcollonval, thanks for pointing me in the right direction.

Would something like this be enough?

A mouse hover shows it's a link. That's implemented in 91184ff (snapshot not yet uploaded).

[fcollonval]

@fcollonval, thanks for pointing me in the right direction.

Would something like this be enough?

A mouse hover shows it's a link. That's implemented in 91184ff (snapshot not yet uploaded).

You 🚀

Thanks a lot for adding the test.

The snapshots are very sensitive especially for terminals as their configuration highly depends on the OS. Therefore to get the correct reference snapshot for the CI OS setup, we use a bot that can be triggered by commenting on a PR:

bot please update snapshots

It will take ~1h to push a new commit with the update snapshots. In this particular case, it may be though to get the hover effect.

[fcollonval]

You can see the status of the bot job there: https://github.com/jupyterlab/jupyterlab/actions/workflows/galata-update.yml

[github-actions]

Documentation snapshots updated.

[github-actions]

Galata snapshots updated.

[mgcth]

Looks like 38b142c didn't activate the underline. It does when I run the test locally with both click and hover. If it makes any difference, I'm running the tests locally on a mac. However, comparing both pngs, they look very similar. Would a waitForTimeout after the hover help?

[krassowski]

bot please update snapshots

[github-actions]

Documentation snapshots updated.

[github-actions]

Galata snapshots updated.

[mgcth]

Is there a way to debug this other than trying it on a Linux machine? I tried creating a Ubuntu 20.04 developer environment through VirtualBox on my mac but during the jupyterlab install pip install -e . failed while installing canvas.

[krassowski]

Well, maybe a screenshot test is not the way to go forward if it is problematic. We can try two things:

• xterm.js allows to copy text. If we copy the text including link, will we see the URL?
• xterm.js supports accessibility mode via screenReaderMode option. We should enable it (potentially under an option). This will expose visible the text content in DOM/accessibility tree.

[mgcth]

Trying the exact code codegen gives in 61b2f4f with more vertical centering.

If it doesn't work, I can try the suggestions but would need some help with where to put those tests.

bot please update snapshots

[github-actions]

Documentation snapshots updated.

[github-actions]

Galata snapshots updated.

[krassowski]

I checked and neither of the suggestions I proposed works:

• the accessibility tree only includes plain text, no links (this may be unexpected)
• term.selectAll() followed by term.getSelection() copies plain text, no links (this is probably expected)

Since there is no good way to test this, I would propose:

• let's open an issue in xterm (first double checking if there is not any) proposing that links could be included in accessibility tree
• open an issue in JupyterLab to track adding a test using accessibility mode. This test would probably go to terminal.spec.ts.

[mgcth]

@fcollonval, looking at the test report it seems like your trial succeeds (underline is visible). Thanks for the help!

bot please update snapshots

[github-actions]

Documentation snapshots updated.

[github-actions]

Galata snapshots updated.

[github-actions]

Documentation snapshots updated.

[github-actions]

Galata snapshots updated.

[fcollonval]

Thanks @mgcth

[welcome]

Congrats on your first merged pull request in this project! 🎉

Thank you for contributing, we are very proud of you! ❤️

[fcollonval]

@meeseeksdev please backport to 3.6.x

I realize I forget to backport this.