Merge pull request #181 from jupyterlab/fix/update-3.1

Use the new menu definition from settings

Author: jtpio

README.md

@@ -66,7 +66,7 @@ jlpm run build
 jupyter lab
 ```
 
-The examples currently target **JupyterLab 3.x**.
+The examples currently target **JupyterLab 3.1 or later**.
 
 If you would like to use the examples with JupyterLab 2.x, check out the [2.x branch](https://github.com/jupyterlab/extension-examples/tree/2.x).
 

command-palette/package.json

@@ -18,8 +18,7 @@
   },
   "files": [
     "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
-    "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
-    "style/index.js"
+    "style/**/*.{css,eot,js,gif,html,jpg,json,png,svg,woff2,ttf}"
   ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

command-palette/ui-tests/README.md

@@ -19,7 +19,7 @@ jlpm run build:prod
 2. Execute the docker stack in the example folder:
 
 ```
-docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env build
+docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env build --no-cache
 docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env run --rm e2e
 docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env down
 ```
@@ -107,7 +107,7 @@ docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.
 jupyter lab --ServerApp.token= --ServerApp.password=
 ```
 
-3. Launch the code generator tool:
+3. Launch the debug tool:
 
 ```
 cd ui-tests

commands/package.json

@@ -18,8 +18,7 @@
   },
   "files": [
     "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
-    "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
-    "style/index.js"
+    "style/**/*.{css,eot,js,gif,html,jpg,json,png,svg,woff2,ttf}"
   ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

commands/ui-tests/README.md

@@ -19,7 +19,7 @@ jlpm run build:prod
 2. Execute the docker stack in the example folder:
 
 ```
-docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env build
+docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env build --no-cache
 docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env run --rm e2e
 docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env down
 ```
@@ -107,7 +107,7 @@ docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.
 jupyter lab --ServerApp.token= --ServerApp.password=
 ```
 
-3. Launch the code generator tool:
+3. Launch the debug tool:
 
 ```
 cd ui-tests

completer/README.md

@@ -124,7 +124,7 @@ fetch(
 [_JupyterLab_'s completer-extension](https://github.com/jupyterlab/jupyterlab/tree/master/packages/completer-extension) includes a notebooks plugin that registers notebooks for code completion. Your extension will override the notebooks plugin's behavior, so you can [disable notebooks](https://jupyterlab.readthedocs.io/en/stable/extension/extension_dev.html#disabling-other-extensions) in your `.package.json`:
 
 ```json5
-// package.json#L83-L90
+// package.json#L81-L88
 
 "jupyterlab": {
   "extension": true,

completer/package.json

@@ -18,8 +18,7 @@
   },
   "files": [
     "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
-    "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
-    "style/index.js"
+    "style/**/*.{css,eot,js,gif,html,jpg,json,png,svg,woff2,ttf}"
   ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,7 +51,6 @@
     "@jupyterlab/codeeditor": "^3.1.0",
     "@jupyterlab/completer": "^3.1.0",
     "@jupyterlab/launcher": "^3.1.0",
-    "@jupyterlab/mainmenu": "^3.1.0",
     "@jupyterlab/notebook": "^3.1.0",
     "@jupyterlab/outputarea": "^3.1.0",
     "@jupyterlab/statedb": "^3.1.0",

completer/ui-tests/README.md

@@ -19,7 +19,7 @@ jlpm run build:prod
 2. Execute the docker stack in the example folder:
 
 ```
-docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env build
+docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env build --no-cache
 docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env run --rm e2e
 docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env down
 ```
@@ -107,7 +107,7 @@ docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.
 jupyter lab --ServerApp.token= --ServerApp.password=
 ```
 
-3. Launch the code generator tool:
+3. Launch the debug tool:
 
 ```
 cd ui-tests

context-menu/README.md

@@ -6,7 +6,7 @@ This is a basic example to show how to add a new entry to an existent context me
 
 ![context menu example](preview.gif)
 
-In JupyterLab plugins can expose context menus to offer an easy way to execute commands and perform actions. In this example, you will learn how to add a new entry to the file browser context menu, and at the same time how to register a new file type.
+In JupyterLab plugins can expose context menus to offer an easy way to execute commands and perform actions. In this example, you will learn how to add a new entry to the file browser context menu to be displayed on files with extension `.example`.
 
 > It is strongly recommended to read [commands](https://github.com/jupyterlab/extension-examples/tree/master/commands) example before diving into this one.
 
@@ -18,50 +18,23 @@ First of all, you will start looking into the declaration of the extension:
 
 <!-- prettier-ignore-start -->
 ```ts
-// src/index.ts#L9-L14
+// src/index.ts#L9-L13
 
 const extension: JupyterFrontEndPlugin<void> = {
   id: 'context-menu',
   autoStart: true,
   requires: [IFileBrowserFactory],
-  optional: [],
   activate: (app: JupyterFrontEnd, factory: IFileBrowserFactory) => {
 ```
 <!-- prettier-ignore-end -->
 
 For this extension, you need to require `IFileBrowserFactory` to track the file browser item clicked by the user.
 
-The example shows you how to create a new file type and add the entry to the context menu only to this file type. The first step is optional, you can also add your button to an existing file type (or all of them!).
-
-To register a new file type, you need to call the `addFileType()` method of `docRegistry` property present in the `JupyterFrontEnd` object. This method requires an `IFileType` object with some properties to define your file type. The most important are:
-
-- `name`: the new file type.
-- `extension`: the list of extensions.
-- `fileFormat`: the file content format (_base64_, _json_ or _text_).
-- `contentType`: the file type (_directory_, _notebook_ or _file_).
-- `mimeType`: the content mime type.
+The first step is to define the command that will be executed when clicking on the context menu entry. If you want to access the item information, you need to use the `IFileBrowserFactory` object to obtain the file browser selected item.
 
 <!-- prettier-ignore-start -->
 ```ts
-// src/index.ts#L15-L23
-
-app.docRegistry.addFileType({
-  name: 'example',
-  icon: runIcon,
-  displayName: 'Example File',
-  extensions: ['.example'],
-  fileFormat: 'text',
-  contentType: 'file',
-  mimeTypes: ['text/plain'],
-});
-```
-<!-- prettier-ignore-end -->
-
-The next step is to define the command that will be executed when clicking on the context menu entry. If you want to access the item information, you need to use the `IFileBrowserFactory` object to obtain the file browser selected item.
-
-<!-- prettier-ignore-start -->
-```ts
-// src/index.ts#L25-L38
+// src/index.ts#L14-L27
 
 app.commands.addCommand('jlab-examples/context-menu:open', {
   label: 'Example',
@@ -80,24 +53,32 @@ app.commands.addCommand('jlab-examples/context-menu:open', {
 ```
 <!-- prettier-ignore-end -->
 
-Finally, you can add the command to a context menu using the `addItem()` method present in the `contextMenu` property. This method requires an `IItemOptions` object with the following properties:
+Then, you can add the command to a context menu using the settings file.
+You will need to define a context menu item under the property `context` of the special key
+`jupyter.lab.menus`. And the properties of the context menu item are:
 
 - `command`: the command to execute.
-- `selector`: the CSS classes of the element where you want to add the entry.
-- `rank`: the position in the context menu
+- `selector`: the CSS classes of the element on which you want to add the entry.
+- `rank`: (optional) number to order the context menu entries
 
 <!-- prettier-ignore-start -->
-```ts
-// src/index.ts#L40-L44
-
-app.contextMenu.addItem({
-  command: 'jlab-examples/context-menu:open',
-  selector: '.jp-DirListing-item[data-file-type="example"]',
-  rank: 0,
-});
+```json5
+// schema/plugin.json#L4-L12
+
+"jupyter.lab.menus": {
+  "context": [
+    {
+      "command": "jlab-examples/context-menu:open",
+      "selector": ".jp-DirListing-item[data-file-type=\"text\"]",
+      "rank": 0
+    }
+  ]
+},
 ```
 <!-- prettier-ignore-end -->
 
-The `selector` can be any valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). In this case, the first part is the CSS class that identifies the file browser items `.jp-DirListing-item` and the second part `[data-file-type="example"]` is a attribute value to be found on the item. You can omit the second part to add the button to every file type.
+The `selector` can be any valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). In this case, the first part is the CSS class that identifies the file browser items `.jp-DirListing-item` and the second part `[data-file-type="text"]` is a attribute value to be found on the item; the `data-file-type` attribute is set with the file type name or `text` for generic files. You can omit the second part to add the command to every file type.
 
 You can find some of the CSS classes that identify different widgets in JupyterLab in the [developer documentation](https://jupyterlab.readthedocs.io/en/stable/developer/css.html#commonly-used-css-selectors).
+
+> See also the [documentation](https://jupyterlab.readthedocs.io/en/stable/extension/extension_points.html#context-menu).

context-menu/package.json

@@ -18,8 +18,8 @@
   },
   "files": [
     "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
-    "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
-    "style/index.js"
+    "style/**/*.{css,eot,js,gif,html,jpg,json,png,svg,woff2,ttf}",
+    "schema/**/*.json"
   ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -73,7 +73,8 @@
   ],
   "jupyterlab": {
     "extension": true,
-    "outputDir": "jupyterlab_examples_context_menu/labextension"
+    "outputDir": "jupyterlab_examples_context_menu/labextension",
+    "schemaDir": "schema"
   },
   "styleModule": "style/index.js"
 }