Using metadataform for default notebooktools (jupyterlab#14026)

* Copy common tools using metadataform extension

* Create extended tools using metadataform extensions

* Add the active cell tool to the common tool

* update metadata usage to the latest interface

* update on RJSF 5, fromRenderer and metadataEditorTool

* Remove former commonTools

* Removes unused classes and function after former commonTool has been removed

* Remove former advancedTools

* Automatic application of license header

* Fix lint and docs

* update snapshots and selectors

* updates snapshot and locator, change active cell widget css and field order in common tool

* update snapshot

* Add metadataform and metadataform-extension dependencies to relevant examples

* Improves style

* Removes padding on description fields

* Change CSS of errors list and on highlight controls on hover

* Avoids XSS attack in cellTags, adds a label and handles copy/paste resize

* Restores the label's font and makes it match the widget's label

* Update Playwright Snapshots

* Regularly updates the ActiveCellTool to match the current content and execution count

* Fix integrity

* Fix lint and move widgets to dedicated directory

* Add UI tests on notebook tools

* prettier

* Includes toolWidgets files in lib

* lint

* Removes unused class and adds UI tests on ActiveCellTool

* integrity

* Update snapshot

* Adds constants for class names

* Adds some migration information and renames some variables in notebooktools

* Uses variables to define add tag width

* Removes a leftover after rebase

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/labeler.yml

@@ -57,8 +57,6 @@ pkg:cells:
   - packages/cells/*
 
 pkg:celltags:
-  - packages/celltags/**/*
-  - packages/celltags/*
   - packages/celltags-extension/**/*
   - packages/celltags-extension/*
 

buildutils/src/ensure-repo.ts

@@ -193,7 +193,6 @@ const SKIP_CSS: Dict<string[]> = {
     '@jupyterlab/notebook',
     '@jupyterlab/cell-toolbar',
     '@jupyterlab/cell-toolbar-extension',
-    '@jupyterlab/celltags',
     '@jupyterlab/celltags-extension',
     '@jupyterlab/fileeditor',
     '@jupyterlab/codemirror-extension',

dev_mode/package.json

@@ -320,7 +320,6 @@
       "@jupyterlab/cell-toolbar": "../packages/cell-toolbar",
       "@jupyterlab/cell-toolbar-extension": "../packages/cell-toolbar-extension",
       "@jupyterlab/cells": "../packages/cells",
-      "@jupyterlab/celltags": "../packages/celltags",
       "@jupyterlab/celltags-extension": "../packages/celltags-extension",
       "@jupyterlab/codeeditor": "../packages/codeeditor",
       "@jupyterlab/codemirror": "../packages/codemirror",

docs/source/extension/extension_migration.rst

@@ -48,6 +48,9 @@ bumped their major version (following semver convention). We want to point out p
    * ``InputArea.defaultContentFactory`` and ``Cell.defaultContentFactory`` have been removed. If you need it, you
      can request the token ``IEditorServices`` from ``@jupyterlab/codeeditor``. Then you can use
      ``new Cell.ContentFactory({ editorFactory: token.factoryService.newInlineEditor });``.
+- ``@jupyterlab/celltags`` from 3.x to 4.0
+  The ``@jupyterlab/celltags`` package has been removed and replaced by a widget in ``@jupyterlab/celltags-extension``.
+  This widget is now rendered using ``@jupyterlab/metadataform``.
 - ``@jupyterlab/codeeditor`` from 3.x to 4.0
    * ``CodeEditor.IEditor`` has changed:
       - ``resizeToFit()`` is removed
@@ -160,6 +163,11 @@ bumped their major version (following semver convention). We want to point out p
 - ``@jupyterlab/docprovider`` from 3.x to 4.x
    This package is no longer present in JupyterLab. For documentation related to Real-Time Collaboration, please check out
    `RTC's documentation <https://jupyterlab.readthedocs.io/en/latest/user/rtc.html>`_
+- ``@jupyterlab/docregistry`` from 3.x to 4.x
+   * Removed the property ``docProviderFactory`` from the interface ``Context.IOptions``.
+   * The constructor of the class ``DocumentModel`` receives a parameter ``DocumentModel.IOptions``.
+   * The method ``IModelFactory.createNew`` receives a parameter ``DocumentRegistry.IModelOptions``.
+   * The method ``TextModelFactory.createNew`` receives a parameter ``DocumentModel.IOptions``.
 - ``@jupyterlab/documentsearch`` from 3.x to 4.x
    * ``@jupyterlab/documentsearch:plugin`` has been renamed to ``@jupyterlab/documentsearch-extension:plugin``
    * ``@jupyterlab/documentsearch:labShellWidgetListener`` has been renamed to ``@jupyterlab/documentsearch-extension:labShellWidgetListener``
@@ -182,11 +190,9 @@ bumped their major version (following semver convention). We want to point out p
 - ``@jupyterlab/filebrowser-extension`` from 3.x to 4.x
    Remove command ``filebrowser:create-main-launcher``. You can replace by ``launcher:create`` (same behavior)
    All launcher creation actions are moved to ``@jupyterlab/launcher-extension``.
-- ``@jupyterlab/docregistry`` from 3.x to 4.x
-   * Removed the property ``docProviderFactory`` from the interface ``Context.IOptions``.
-   * The constructor of the class ``DocumentModel`` receives a parameter ``DocumentModel.IOptions``.
-   * The method ``IModelFactory.createNew`` receives a parameter ``DocumentRegistry.IModelOptions``.
-   * The method ``TextModelFactory.createNew`` receives a parameter ``DocumentModel.IOptions``.
+- ``@jupyterlab/mainmenu`` from 3.x to 4.x
+   * ``IMainMenu.addMenu`` signature changed from ``addMenu(menu: Menu, options?: IMainMenu.IAddOptions): void``
+     to ``addMenu(menu: Menu, update?: boolean, options?: IMainMenu.IAddOptions): void``
 - ``@jupyterlab/notebook`` from 3.x to 4.x
    * The ``NotebookPanel._onSave`` method is now ``private``.
    * ``NotebookActions.collapseAll`` method renamed to ``NotebookActions.collapseAllHeadings``.
@@ -210,9 +216,11 @@ bumped their major version (following semver convention). We want to point out p
    * ``StaticNotebook.defaultContentFactory`` has been removed. If you need it, you can request the token
      ``IEditorServices`` from ``@jupyterlab/codeeditor``. You can obtain it by requested
      ``new NotebookPanel.ContentFactory({ editorFactory: token.factoryService.newInlineEditor });``
-- ``@jupyterlab/mainmenu`` from 3.x to 4.x
-   - ``IMainMenu.addMenu`` signature changed from ``addMenu(menu: Menu, options?: IMainMenu.IAddOptions): void``
-     to ``addMenu(menu: Menu, update?: boolean, options?: IMainMenu.IAddOptions): void``
+   * ``notebooktools`` module does not provides anymore the ``ActiveCellTool``, the ``NotebookMetadataEditorTool``
+     and the ``CellMetadataEditorTool``. All these widget are replaced by widgets in ``@jupyterlab/notebook-extension``,
+     and are rendered using ``@jupyterlab/metadataform``.
+     The ``KeySelector`` has also been removed as not used anymore, replaced by the use of ``@jupyterlab/metadataform``
+     to provides selection for metadata keys.
 - ``@jupyterlab/rendermime`` from 3.x to 4.x
   The markdown parser has been extracted to its own plugin ``@jupyterlab/markedparser-extension:plugin``
   that provides a new token ``IMarkdownParser`` (defined in ``@jupyterlab/rendermime``).

examples/app/index.js

@@ -37,6 +37,7 @@ const extensions = [
   import('@jupyterlab/markdownviewer-extension'),
   import('@jupyterlab/markedparser-extension'),
   import('@jupyterlab/mathjax2-extension'),
+  import('@jupyterlab/metadataform-extension'),
   import('@jupyterlab/notebook-extension').then(plugins =>
     plugins.default.filter(({ id }) => !id.includes(':language-server'))
   ),

examples/app/package.json

@@ -26,6 +26,7 @@
     "@jupyterlab/mainmenu-extension": "^4.0.0-alpha.20",
     "@jupyterlab/markdownviewer-extension": "^4.0.0-alpha.20",
     "@jupyterlab/mathjax2-extension": "^4.0.0-alpha.20",
+    "@jupyterlab/metadataform-extension": "^4.0.0-alpha.20",
     "@jupyterlab/notebook-extension": "^4.0.0-alpha.20",
     "@jupyterlab/rendermime-extension": "^4.0.0-alpha.20",
     "@jupyterlab/running-extension": "^4.0.0-alpha.20",
@@ -75,6 +76,7 @@
       "@jupyterlab/mainmenu-extension",
       "@jupyterlab/markdownviewer-extension",
       "@jupyterlab/mathjax2-extension",
+      "@jupyterlab/metadataform-extension",
       "@jupyterlab/notebook-extension",
       "@jupyterlab/pdf-extension",
       "@jupyterlab/rendermime-extension",

examples/federated/core_package/package.json

@@ -14,7 +14,6 @@
     "@jupyterlab/apputils-extension": "~4.0.0-alpha.20",
     "@jupyterlab/attachments": "^4.0.0-alpha.15",
     "@jupyterlab/cells": "~4.0.0-alpha.3",
-    "@jupyterlab/celltags": "~4.0.0-alpha.3",
     "@jupyterlab/celltags-extension": "~4.0.0-alpha.20",
     "@jupyterlab/codeeditor": "^4.0.0-alpha.15",
     "@jupyterlab/codemirror-extension": "~4.0.0-alpha.20",
@@ -55,6 +54,8 @@
     "@jupyterlab/mainmenu-extension": "~4.0.0-alpha.20",
     "@jupyterlab/markedparser-extension": "~4.0.0-alpha.15",
     "@jupyterlab/mathjax2-extension": "~4.0.0-alpha.20",
+    "@jupyterlab/metadataform": "^4.0.0-alpha.15",
+    "@jupyterlab/metadataform-extension": "~4.0.0-alpha.20",
     "@jupyterlab/notebook": "^4.0.0-alpha.15",
     "@jupyterlab/notebook-extension": "~4.0.0-alpha.20",
     "@jupyterlab/pdf-extension": "~4.0.0-alpha.20",
@@ -122,6 +123,7 @@
     "@jupyterlab/lsp-extension": "^4.0.0-alpha.20",
     "@jupyterlab/mainmenu-extension": "^4.0.0-alpha.20",
     "@jupyterlab/mathjax2-extension": "^4.0.0-alpha.20",
+    "@jupyterlab/metadataform-extension": "^4.0.0-alpha.20",
     "@jupyterlab/notebook-extension": "^4.0.0-alpha.20",
     "@jupyterlab/pdf-extension": "^4.0.0-alpha.20",
     "@jupyterlab/rendermime-extension": "^4.0.0-alpha.20",
@@ -230,6 +232,7 @@
       "@jupyterlab/lsp-extension",
       "@jupyterlab/mainmenu-extension",
       "@jupyterlab/mathjax2-extension",
+      "@jupyterlab/metadataform-extension",
       "@jupyterlab/notebook-extension",
       "@jupyterlab/pdf-extension",
       "@jupyterlab/rendermime-extension",

galata/test/documentation/export_notebook.test.ts

@@ -53,7 +53,7 @@ test.describe('Export Notebook', () => {
     await page.click('.jp-PropertyInspector >> text=Common Tools');
 
     await page.selectOption(
-      '.jp-PropertyInspector >> text=Slide Type >> select',
+      '#jp-MetadataForm-\\@jupyterlab\\/notebook-extension\\:tools_\\/slideshow\\/slide_type',
       { label: 'Slide' }
     );
     // Wait for Latex renderer

galata/test/documentation/general.test.ts

@@ -129,11 +129,101 @@ test.describe('General', () => {
 
     await page.click('.jp-PropertyInspector >> text=Common Tools');
 
+    await expect(
+      page.locator('.jp-ActiveCellTool .jp-InputPrompt')
+    ).not.toBeEmpty();
+
     expect(
       await page.screenshot({
         clip: { y: 32, x: 997, width: 283, height: 400 }
       })
     ).toMatchSnapshot('interface_right_common.png');
+
+    // Expect the 'Raw NbConvert Format' field to be displayed only on raw cells
+    await expect(
+      page.locator(
+        '.jp-NotebookTools-tool .jp-FormGroup-fieldLabel:text("Raw NBConvert Format")'
+      )
+    ).toHaveCount(0);
+    await page.notebook.addCell('raw', 'Raw cell');
+    await expect(
+      page.locator(
+        '.jp-NotebookTools-tool .jp-FormGroup-fieldLabel:text("Raw NBConvert Format")'
+      )
+    ).toHaveCount(1);
+
+    // Open Advanced tools and get metadata content
+    await page.click('.jp-PropertyInspector >> text=Advanced Tools');
+    await expect(
+      page.locator('.jp-MetadataForm .jp-MetadataEditorTool')
+    ).toHaveCount(2);
+    const cellMetadata = await page
+      .locator('.jp-MetadataForm .jp-MetadataEditorTool')
+      .first()
+      .textContent();
+    const notebookMetadata = await page
+      .locator('.jp-MetadataForm .jp-MetadataEditorTool')
+      .last()
+      .textContent();
+    expect(cellMetadata).toContain('"tags": []');
+    expect(notebookMetadata).not.toContain('"base_numbering"');
+
+    // Expect adding tag is reflected in CellMetadataEditor
+    await page.click('.jp-CellTags .jp-CellTags-Add');
+    await page.keyboard.type('test-tag');
+    await page.keyboard.press('Enter');
+    await expect(
+      page.locator('.jp-CellTags .jp-CellTags-Holder span').first()
+    ).toHaveText('test-tag');
+
+    const newCellMetadata = (
+      await page
+        .locator('.jp-MetadataForm .jp-MetadataEditorTool')
+        .first()
+        .textContent()
+    )?.replace(/\s/g, '');
+    expect(newCellMetadata).toContain('"tags":["test-tag"]');
+
+    // Expect modifying 'toc base number' value is reflected in NotebookMetadataEditor
+    await page
+      .locator('.jp-MetadataForm input[label="Table of content - Base number"]')
+      .fill('3');
+    const newNotebookMetadata = (
+      await page
+        .locator('.jp-MetadataForm .jp-MetadataEditorTool')
+        .last()
+        .textContent()
+    )?.replace(/\s/g, '');
+    expect(newNotebookMetadata).toContain('"base_numbering":3');
+
+    // Test the active cell widget
+    await expect(
+      page.locator('.jp-ActiveCellTool .jp-ActiveCellTool-Content pre')
+    ).toHaveText('Raw cell');
+    await expect(
+      page.locator('.jp-ActiveCellTool .jp-InputPrompt')
+    ).toHaveClass(/lm-mod-hidden/);
+    await (await page.notebook.getCellInput(1))?.click();
+    await page.keyboard.type(' content');
+    await expect(
+      page.locator('.jp-ActiveCellTool .jp-ActiveCellTool-Content pre')
+    ).toHaveText('Raw cell content');
+
+    await page.notebook.addCell('code', 'print("test")');
+    await expect(
+      page.locator('.jp-ActiveCellTool .jp-ActiveCellTool-Content pre')
+    ).toHaveText('print("test")');
+    await expect(
+      page.locator('.jp-ActiveCellTool .jp-InputPrompt')
+    ).not.toHaveClass(/lm-mod-hidden/);
+    await expect(page.locator('.jp-ActiveCellTool .jp-InputPrompt')).toHaveText(
+      '[ ]:'
+    );
+
+    await page.notebook.runCell(2, true);
+    await expect(page.locator('.jp-ActiveCellTool .jp-InputPrompt')).toHaveText(
+      '[1]:'
+    );
   });
 
   test('Open tabs', async ({ page }) => {

packages/celltags-extension/README.md

@@ -1,4 +1,3 @@
 # @jupyterlab/celltags-extension
 
-A JupyterLab extension which provides an entry point for
-[@jupyterlab/celltags](../celltags).
+A JupyterLab extension which provides a form renderer for NotebookTools common tool.

packages/celltags-extension/package.json

@@ -31,7 +31,8 @@
     "lib/*.{d.ts,js,js.map}",
     "style/*.css",
     "style/index.js",
-    "src/**/*.{ts,tsx}"
+    "src/**/*.{ts,tsx}",
+    "schema/*.json"
   ],
   "scripts": {
     "build": "tsc",
@@ -40,9 +41,12 @@
   },
   "dependencies": {
     "@jupyterlab/application": "^4.0.0-alpha.20",
-    "@jupyterlab/celltags": "^4.0.0-alpha.20",
     "@jupyterlab/notebook": "^4.0.0-alpha.20",
-    "@jupyterlab/translation": "^4.0.0-alpha.20"
+    "@jupyterlab/translation": "^4.0.0-alpha.20",
+    "@jupyterlab/ui-components": "^4.0.0-alpha.35",
+    "@lumino/algorithm": "^2.0.0-rc.0",
+    "@rjsf/utils": "^5.1.0",
+    "react": "^18.2.0"
   },
   "devDependencies": {
     "rimraf": "~3.0.0",
@@ -52,7 +56,8 @@
     "access": "public"
   },
   "jupyterlab": {
-    "extension": true
+    "extension": true,
+    "schemaDir": "schema"
   },
   "styleModule": "style/index.js"
 }

packages/celltags-extension/schema/plugin.json

@@ -0,0 +1,33 @@
+{
+  "type": "object",
+  "title": "Common tools",
+  "description": "Setting for the common tools",
+  "jupyter.lab.metadataforms": [
+    {
+      "id": "commonToolsSection",
+      "label": "Common tools",
+      "metadataSchema": {
+        "type": "object",
+        "properties": {
+          "/tags": {
+            "title": "Cell tag",
+            "type": "array",
+            "default": [],
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      },
+      "uiSchema": {
+        "ui:order": ["_CELL-TOOL", "/tags", "*"]
+      },
+      "metadataOptions": {
+        "/tags": {
+          "customRenderer": "celltags-extension:plugin.renderer"
+        }
+      }
+    }
+  ],
+  "additionalProperties": false
+}