[2.x] Disable the copy button in insecure contexts

[keerthi-swarna]

• Closes [2.x] Disable the copy button in insecure contexts #1265

Problem Statement

The "Copy to Clipboard" button fails to function when the JupyterLab server is accessed over HTTP (insecure context). Clipboard functionality requires a secure context (HTTPS or localhost), and when the server runs on HTTP, the copy action is disabled. This can cause confusion for users who may expect the button to work even in insecure contexts. To improve the user experience and minimize confusion, the copy button should be disabled when the server is served over HTTP, with a tooltip explaining that copying requires a secure context.

Changes Made

• Updated the useCopy hook to include an additional boolean parameter that controls the button's enabled/disabled state.
• Added a new status, Disabled, to indicate the copy status along with an appropriate label.
• Modified Icon's to have extra parameter indicating button disabled status

Expected Behavior

• The copy button will be disabled when accessed over HTTP, and a clear message will be displayed indicating the button's disabled status with a meaningful explanation.

Testing

• Changes were tested locally.

[dlqqq]

@keerthi-swarna Thanks for working on this! Left a few suggestions on how to improve this PR below.

[dlqqq]

I don't think adding isCopyDisabled is necessary here, since consumers can already check if the status is disabled by using this condition:

disabled={copyStatus === CopyStatus.Disabled}

Generally, we should avoid having 2 sources of truth for the same thing, since a future change might accidentally cause the two to differ.

[dlqqq]

We should provide more helpful information to users in the tooltip, since many users will not know what an insecure context is.

Suggested change

	[CopyStatus.Disabled]: 'Copy to clipboard disabled in insecure context'
	[CopyStatus.Disabled]: 'The clipboard is disabled by your browser because you are accessing this page outside of a secure context. To enable the clipboard, you must access this page through a HTTPS connection.'

You may have to adjust the CSS set by the sx prop in MUI React Elements to get this to render in a readable way.

[dlqqq]

@keerthi-swarna It looks like the Git history of this branch is weird. I recommend that in the future, you should avoid merging 2.x back into your feature branch, and instead prefer rebasing to update your feature branch.

Rebasing essentially means taking your PR branch and moving it to the head of a base branch, which updates your PR branch to include changes in the base branch. You will want to rebase this branch onto 2.x & fix any merge conflicts that arose in the last 3 weeks.

You can do so by running the following:

# update your copy of 2.x branch
git switch 2.x
git pull
git switch disable-copy-button-v1

# rebase your branch onto the latest 2.x branch
# this is saying "take all the commits that differ b/w 2.x and this branch,"
# "then, put them back *onto* the latest 2.x branch"
#
# you will likely have to address merge conflicts here.
git rebase 2.x disable-copy-button-v1 --onto 2.x

# verify your branch state
git status

# then, push and override the remote branch used in this PR
git push -f

[Jiya873]

Hi @dlqqq and @keerthi-swarna,

My name is Jiya Gupta. I would like to work on this issue as well, but I'm unable to see the copy button inside the cell, even in a secure context (HTTPS or localhost). Additionally, when the server runs on HTTP, I still don't see the button.

[dlqqq]

@Jiya873 The screenshot you're looking at is the JupyterLab cell toolbar, which is different from the toolbar we offer underneath code blocks in the Jupyter AI chat panel.

If you're interested in contributing, you can look through our issues to find one you want to work on, then ping me to assign yourself to it. If you have questions, feel free to ping me or join our community calls every week on Wednesdays at 0830 Pacific Time. 🤗

[Jiya873]

@dlqqq thanks for clearing. I’ll go through the issues and let you know which one I’d like to take on. Excited to contribute!!