Bump Jupyterlab to >=4.1.0 and Notebook to >=7.1.0 (#1864)

* bump jupyterlab>=4.1.0

* Change toolbar buttons selectors

* Remove the use of deprecated waitforSelector in tests and improve a selector in formgrader test

* Fix notebbok cell locator and try to fix the breadcrumbs wait

nbgrader/tests/ui-tests/assignment_list.spec.ts

@@ -205,7 +205,7 @@ const expandFetched = async (
   await page
     .locator(`#fetched_assignments_list a:text("${assignment}")`)
     .click();
-  await page.waitForSelector(`${item_id}.collapse.in`);
+  await page.locator(`${item_id}.collapse.in`).waitFor();
 
   const rows = page.locator(`${item_id} .list_item`);
   for (var i = 1; i < (await rows.count()); i++) {
@@ -281,9 +281,9 @@ test("Show assignment list", async ({ page, request, tmpPath }) => {
   await openAssignmentList(page);
 
   // Wait for DOM of each status
-  await page.waitForSelector("#released_assignments_list");
-  await page.waitForSelector("#fetched_assignments_list");
-  await page.waitForSelector("#submitted_assignments_list");
+  await page.locator("#released_assignments_list").waitFor();
+  await page.locator("#fetched_assignments_list").waitFor();
+  await page.locator("#submitted_assignments_list").waitFor();
 
   // release an assignment
   await executeCommand("nbgrader generate_assignment 'Problem Set 1' --force");

nbgrader/tests/ui-tests/course_list.spec.ts

@@ -111,7 +111,7 @@ const openCoursesList = async (page: IJupyterLabPageFixture) => {
 
   var newTab_label = tabs.last().locator(".lm-TabBar-tabLabel");
   await expect(newTab_label).toHaveText("Courses");
-  await page.waitForSelector("#formgrader_list");
+  await page.locator("#formgrader_list").waitFor();
 };
 
 /*

nbgrader/tests/ui-tests/create_assignement.spec.ts

@@ -92,7 +92,7 @@ const openNotebook = async (page: IJupyterLabPageFixture, notebook: string) => {
   await expect(page.locator("#jp-main-dock-panel .lm-TabBar-tab")).toHaveCount(
     tab_count + 1
   );
-  await page.waitForSelector(".jp-Notebook-cell");
+  await page.locator(".jp-Notebook-cell").waitFor();
 };
 
 /*

nbgrader/tests/ui-tests/formgrader.spec.ts

@@ -353,30 +353,25 @@ test("Load manage assignments", async ({ page, baseURL, request, tmpPath }) => {
 
   // expect the current path in tree tab to be the tmpPath.
   await switchTab(page, 'Files');
-  await page.waitForSelector(
-    `.jp-FileBrowser-crumbs > span.jp-BreadCrumbs-item[title="${tmpPath}"]`
-  );
+  const breadCrumbs = page.locator('.jp-FileBrowser-crumbs');
+  await breadCrumbs.getByTitle(tmpPath).waitFor();
 
   // click on the "Problem Set 1" link and check if file browser has changed of directory
   await switchTab(page, 'Formgrader');
 
   await clickLink(iframe, "Problem Set 1");
   await switchTab(page, 'Files');
-  await page.waitForSelector(
-    `.jp-FileBrowser-crumbs > span.jp-BreadCrumbs-item[title="${tmpPath.concat(
-      "/source/Problem Set 1"
-    )}"]`
-  );
+  await breadCrumbs
+    .getByTitle(tmpPath.concat("/source/Problem Set 1"))
+    .waitFor();
 
   // click on preview link and check if file browser has changed of directory
   await switchTab(page, 'Formgrader');
   await iframe.locator("td.preview .glyphicon").click();
   await switchTab(page, 'Files');
-  await page.waitForSelector(
-    `.jp-FileBrowser-crumbs > span.jp-BreadCrumbs-item[title="${tmpPath.concat(
-      "/release/Problem Set 1"
-    )}"]`
-  );
+  await breadCrumbs
+    .getByTitle(tmpPath.concat("/release/Problem Set 1"))
+    .waitFor();
 
   // click on the first number of submissions and check that iframe has change URL
   await switchTab(page, 'Formgrader');

nbgrader/tests/ui-tests/utils/notebook_fixtures.ts

@@ -3,7 +3,7 @@ import { test as base } from '@jupyterlab/galata';
 export const test = base.extend({
   waitForApplication: async ({ baseURL }, use, testInfo) => {
     const waitIsReady = async (page): Promise<void> => {
-      await page.waitForSelector('#main-panel');
+      await page.locator('#main-panel').waitFor();
     };
     await use(waitIsReady);
   }

nbgrader/tests/ui-tests/validate_assignment.spec.ts

@@ -107,7 +107,7 @@ const openNotebook = async (page: IJupyterLabPageFixture, notebook: string) => {
   await expect(page.locator("#jp-main-dock-panel .lm-TabBar-tab")).toHaveCount(
     tab_count + 1
   );
-  await page.waitForSelector(".jp-Notebook-cell");
+  await page.locator(".jp-Notebook-cell").first().waitFor();
 };
 
 /*
@@ -123,7 +123,7 @@ test("Validation success", async ({ page, tmpPath }) => {
   }
 
   // click on validate, and expect a success modal
-  await page.locator("button.validate-button").click();
+  await page.locator("jp-button.validate-button").click();
   await waitForSuccessModal(page);
 
   // close the modal
@@ -143,10 +143,10 @@ test("Validation failure", async ({ page, tmpPath }) => {
   }
 
   // click on validate, and expect an error modal
-  await page.locator("button.validate-button").click();
+  await page.locator("jp-button.validate-button").click();
   await waitForErrorModal(page);
 
-  await page.waitForSelector(".nbgrader-ErrorDialog .validation-failed");
+  await page.locator(".nbgrader-ErrorDialog .validation-failed").waitFor();
 
   // close the modal
   await closeErrorModal(page);
@@ -165,10 +165,10 @@ test("Validation grade cell changed", async ({ page, tmpPath }) => {
   }
 
   // click on validate, and expect an error modal
-  await page.locator("button.validate-button").click();
+  await page.locator("jp-button.validate-button").click();
   await waitForErrorModal(page);
 
-  await page.waitForSelector(".nbgrader-ErrorDialog .validation-changed");
+  await page.locator(".nbgrader-ErrorDialog .validation-changed").waitFor();
 
   // close the modal
   await closeErrorModal(page);
@@ -187,10 +187,10 @@ test("Validation locked cell changed", async ({ page, tmpPath }) => {
   }
 
   // click on validate, and expect an error modal
-  await page.locator("button.validate-button").click();
+  await page.locator("jp-button.validate-button").click();
   await waitForErrorModal(page);
 
-  await page.waitForSelector(".nbgrader-ErrorDialog .validation-changed");
+  await page.locator(".nbgrader-ErrorDialog .validation-changed").waitFor();
 
   // close the modal
   await closeErrorModal(page);
@@ -209,10 +209,10 @@ test("Validation open relative file", async ({ page, tmpPath }) => {
   }
 
   // click on validate, and expect a success modal
-  await page.locator("button.validate-button").click();
+  await page.locator("jp-button.validate-button").click();
   await waitForSuccessModal(page);
 
-  await page.waitForSelector(".nbgrader-SuccessDialog .validation-success");
+  await page.locator(".nbgrader-SuccessDialog .validation-success").waitFor();
 
   // close the modal
   await closeSuccessModal(page);
@@ -231,10 +231,10 @@ test("Validation grade cell type changed", async ({ page, tmpPath }) => {
   }
 
   // click on validate, and expect an error modal
-  await page.locator("button.validate-button").click();
+  await page.locator("jp-button.validate-button").click();
   await waitForErrorModal(page);
 
-  await page.waitForSelector(".nbgrader-ErrorDialog .validation-type-changed");
+  await page.locator(".nbgrader-ErrorDialog .validation-type-changed").waitFor();
 
   // close the modal
   await closeErrorModal(page);
@@ -253,10 +253,10 @@ test("Validation answer cell type changed", async ({ page, tmpPath }) => {
   }
 
   // click on validate, and expect an error modal
-  await page.locator("button.validate-button").click();
+  await page.locator("jp-button.validate-button").click();
   await waitForErrorModal(page);
 
-  await page.waitForSelector(".nbgrader-ErrorDialog .validation-type-changed");
+  await page.locator(".nbgrader-ErrorDialog .validation-type-changed").waitFor();
 
   // close the modal
   await closeErrorModal(page);

package.json

@@ -44,29 +44,29 @@
     "watch:labextension": "jupyter labextension watch ."
   },
   "dependencies": {
-    "@jupyter-notebook/application": "^7.0.2",
-    "@jupyter-notebook/tree": "^7.0.2",
-    "@jupyter/ydoc": "^1.0.2",
-    "@jupyterlab/application": "^4.0.4",
-    "@jupyterlab/apputils": "^4.1.4",
-    "@jupyterlab/cells": "^4.0.4",
-    "@jupyterlab/coreutils": "^6.0.4",
-    "@jupyterlab/docregistry": "^4.0.4",
-    "@jupyterlab/mainmenu": "^4.0.4",
-    "@jupyterlab/nbformat": "^4.0.4",
-    "@jupyterlab/notebook": "^4.0.4",
-    "@jupyterlab/observables": "^5.0.4",
-    "@jupyterlab/services": "^7.0.4",
-    "@jupyterlab/settingregistry": "^4.0.4",
+    "@jupyter-notebook/application": "^7.1.0",
+    "@jupyter-notebook/tree": "^7.1.0",
+    "@jupyter/ydoc": "^1.1.1",
+    "@jupyterlab/application": "^4.1.0",
+    "@jupyterlab/apputils": "^4.2.0",
+    "@jupyterlab/cells": "^4.1.0",
+    "@jupyterlab/coreutils": "^6.1.0",
+    "@jupyterlab/docregistry": "^4.1.0",
+    "@jupyterlab/mainmenu": "^4.1.0",
+    "@jupyterlab/nbformat": "^4.1.0",
+    "@jupyterlab/notebook": "^4.1.0",
+    "@jupyterlab/observables": "^5.1.0",
+    "@jupyterlab/services": "^7.1.0",
+    "@jupyterlab/settingregistry": "^4.1.0",
     "@lumino/coreutils": "^2.1.2",
     "@lumino/disposable": "^2.1.2",
     "@lumino/messaging": "^2.0.1",
     "@lumino/signaling": "^2.1.2",
-    "@lumino/widgets": "^2.3.0"
+    "@lumino/widgets": "^2.3.1"
   },
   "devDependencies": {
-    "@jupyterlab/builder": "^4.0.4",
-    "@jupyterlab/galata": "^5.0.4",
+    "@jupyterlab/builder": "^4.1.0",
+    "@jupyterlab/galata": "^5.1.0",
     "@playwright/test": "^1.32.2",
     "@types/codemirror": "^5.60.5",
     "@typescript-eslint/eslint-plugin": "^5.0.0",

pyproject.toml

@@ -1,7 +1,7 @@
 [build-system]
 requires = [
     "hatchling>=1.10.0",
-    "jupyterlab>=4.0.2,<5",
+    "jupyterlab>=4.1.0,<5",
 ]
 build-backend = "hatchling.build"
 
@@ -38,7 +38,7 @@ dependencies = [
     "jsonschema>=3",
     "jupyter_client<9",
     "jupyter_server>=2",
-    "jupyterlab>=4.0.2,<5",
+    "jupyterlab>=4.1.0,<5",
     "jupyterlab_server",
     "nbclient>=0.6.1",
     "nbconvert>=6",

src/validate_assignment/index.ts

@@ -133,7 +133,7 @@ class ValidateButton extends ToolbarButton {
   }
 
   private setButtonDisabled(disabled: boolean = true): void {
-    const button = this.node.getElementsByTagName('button')[0];
+    const button = this.node.getElementsByTagName('jp-button')[0];
     if (disabled) {
       button.setAttribute('disabled', 'disabled');
     } else {