Change the label of a Toolbarbutton after creation / make a button inactive

[ocordes]

Problem

In my extension I have created a ToolbarButton for Notebooks:

const button = new ToolbarButton({
label: 'Validate',
className: 'myButton',
onClick: callback,
tooltip: 'Validate Notebook'
});

Since a validation will take some time, first I want to "deactivate" the button and change the label to "Validating ..." . Somehow I cannot find a good solution in the class members in ToolbarButton.

Proposed Solution

• add a method to change the label after the button was created
• add a method to "gray out" the button or to make it inactive/not clickable

Additional context

As fas as I can remember in the old notebook style this was possible due to directly changing the html-values of the button which is not possible in jupyterlab!

[welcome]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

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

Welcome to the Jupyter community! 🎉

[krassowski]

jupyterlab-git kind of workarounds a similar issue for file browser toolbar by wrapping the button component in a react widget, which might not work in your case: https://github.com/jupyterlab/jupyterlab-git/blob/9df356280b544b8f0e2236ef0757d57a6239ca7c/src/widgets/gitClone.tsx#L13-L42

Another workaround-idea - have you tried something like:

button.node.querySelector('button').disabled = true;

Even if the workaround works for you I agree it is a useful thing to have in the official API.

[ocordes]

Interesting ...

button.node.querySelector('button').disabled = true;

is disabling the button, but you can click and the callback is running again. I thought that this has something to do with the mouse handler, but setting actualClick to true gives the same result. I mean I can check if the first callback is still running, but this is not the best implementation. I'm not sure if this a typical behaviour of Chrome and Safari that a disabled button is still clickable. But anyway, to implement this correctly in the official API should be easy.

[krassowski]

What about something like the save button in notebook toolbar?

jupyterlab/packages/notebook/src/default-toolbar.tsx

Lines 82 to 97 in 2137872

	<ToolbarButtonComponent
	icon={saveIcon}
	onClick={onClick}
	tooltip={trans.__(
	'Save the notebook contents and create checkpoint'
	)}
	enabled={
	!!(
	panel &&
	panel.context &&
	panel.context.contentsModel &&
	panel.context.contentsModel.writable
	)
	}
	/>
	)}

(I still agree if would be handy to improve ToolbarButton, just looking for a backward compatible/existing way for you if you need it).