Bump to JupyterLab 4.1.0a4

[jtpio]

Update to the freshly released 4.1.0a4: https://github.com/jupyterlab/jupyterlab/releases/tag/v4.1.0a4

[github-actions]

👈 Launch a Binder on branch jtpio/notebook/update-lab-410a4

[jtpio]

Ouch a couple of breakages in that one it seems...

Breaking change in Galata?

Icons are now placed on the left?

Some extra label:

[krassowski]

I believe this is mostly jupyterlab/jupyterlab#15021 CC @brichet

[brichet]

I believe this is mostly jupyterlab/jupyterlab#15021 CC @brichet

Yes probably, I'll look at it @jtpio

[jtpio]

Bumping the latest @jupyterlab/galata helps get past the await page.filebrowser.refresh() error, which makes sense as the selector was changed in jupyterlab/jupyterlab#15021.

Now some tests are failing when trying to do file manipulations via the file browser toolbar:

notebook/ui-tests/test/filebrowser.spec.ts

Lines 20 to 83 in ef1f8db

	test('Select one folder', async ({ page, tmpPath }) => {
	await page.filebrowser.refresh();
	await page.getByText('folder1').last().click();
	const toolbar = page.getByRole('navigation');
	expect(toolbar.getByText('Rename')).toBeVisible();
	expect(toolbar.getByText('Delete')).toBeVisible();
	});
	test('Select one file', async ({ page, tmpPath }) => {
	await page.filebrowser.refresh();
	await page.getByText('empty.ipynb').last().click();
	const toolbar = page.getByRole('navigation');
	['Rename', 'Delete', 'Open', 'Download', 'Delete'].forEach(async (text) => {
	expect(toolbar.getByText(text)).toBeVisible();
	});
	});
	test('Select files and folders', async ({ page, tmpPath }) => {
	await page.filebrowser.refresh();
	await page.keyboard.down('Control');
	await page.getByText('folder1').last().click();
	await page.getByText('folder2').last().click();
	await page.getByText('empty.ipynb').last().click();
	const toolbar = page.getByRole('navigation');
	expect(toolbar.getByText('Rename')).toBeHidden();
	expect(toolbar.getByText('Open')).toBeHidden();
	expect(toolbar.getByText('Delete')).toBeVisible();
	});
	test('Select files and open', async ({ page, tmpPath }) => {
	// upload an additional notebook
	await page.contents.uploadFile(
	path.resolve(__dirname, './notebooks/simple.ipynb'),
	`${tmpPath}/simple.ipynb`
	);
	await page.filebrowser.refresh();
	await page.keyboard.down('Control');
	await page.getByText('simple.ipynb').last().click();
	await page.getByText('empty.ipynb').last().click();
	const toolbar = page.getByRole('navigation');
	const [nb1, nb2] = await Promise.all([
	page.waitForEvent('popup'),
	page.waitForEvent('popup'),
	toolbar.getByText('Open').last().click(),
	]);
	await nb1.waitForLoadState();
	await nb1.close();
	await nb2.waitForLoadState();
	await nb2.close();
	});

d3efbeff9e3336758817295039be2073bc8d89e4.webm

[jtpio]

So the remaining issue now are:

Refresh File List button label

Probably related to the switch to jupyter-ui-toolkit?

Left icon for the interface switcher toolbar button

If this is the way to go or if there are reasons to do this w.r.t accessibility then it's fine to leave it this way (we'll just update the reference snapshots)

Some CSS inconsistencies on the file action buttons (wrong height)

---

Some other tests are failing due to snapshot comparison because of some minor style update, but we can just update the reference snapshots.

[brichet]

Icons are now placed on the left?

The web components embed the content into shadow DOM, which change the CSS selectors.

To fix it for the Switch to jupyterlab icon, the selector .jp-nb-interface-switcher-button > .jp-ToolbarButtonComponent must be change with .jp-nb-interface-switcher-button > .jp-ToolbarButtonComponent::part(content) at

notebook/packages/lab-extension/style/base.css

Line 17 in ef1f8db

.jp-nb-interface-switcher-button > .jp-ToolbarButtonComponent {

[brichet]

Refresh File List button label

Also a selector to change at

notebook/packages/tree/style/base.css

Line 45 in ef1f8db

button[data-command='filebrowser:refresh'] .jp-ToolbarButtonComponent-label {

to jp-button[data-command='filebrowser:refresh'] .jp-ToolbarButtonComponent-label

[brichet]

There will probably be some other side effect, like the padding left of the interface switcher icon

notebook/packages/lab-extension/style/base.css

Lines 21 to 25 in ef1f8db

	.jp-nb-interface-switcher-button
	> .jp-ToolbarButtonComponent
	> .jp-ToolbarButtonComponent-icon {
	padding-left: 3px;
	}

which should be

.jp-nb-interface-switcher-button
  > .jp-ToolbarButtonComponent
  > svg {
  padding-left: 3px;
}

[brichet]

Some CSS inconsistencies on the file action buttons (wrong height)

That one is more tricky, since it's not only about style but also about accessibility.

Currently these FileActions buttons are included in a widget, adding a dom node to the main toolbar.
Therefore, the buttons cannot be focused like the other toolbar button.

We should include these buttons as direct child of the filebrowser toolbar.

[jtpio]

OK that makes sense, thanks @brichet for providing these details 👍

[krassowski]

There is also #7137 about the interface switcher that was created during review.

@brichet would you have time to add the example style changes that extension authors may need to make to the extension migration guide section? https://jupyterlab.readthedocs.io/en/latest/extension/extension_migration.html#use-of-ui-toolkit-for-toolbar-and-toolbarbuttoncomponent

[jtpio]

Closing in favor of #7172.