Restore the use of contentHeader, make CI green, improve scripts (#263)

* Restore the use of `contentHeader`

* Correct range

* Update the preview GIF

* Test: ensure the main area does not get overridden

* Align

* Lint (unrelated) context-menu index

* Run embedme after lint

* Run lint:check before embedme because the former might

force us to reformat a file which would change ranges,
so checking embedme first is pointless

Author: krassowski

contentheader/README.md

@@ -11,19 +11,27 @@ This JupyterLab example extension is intended to demo one specific feature of `M
 In code: the command `jlab-examples:contentheader` creates a widget and check if it is an instance of `MainAreaWidget`. A specific text content is then added to this widget (here the current GMT time).
 
 ```ts
-// src/index.ts#L33-L50
+// src/index.ts#L33-L58
 
 commands.addCommand(command, {
   label: 'Populate content header (time example)',
   caption: 'Populate content header (time example)',
   execute: () => {
     // Check to ensure this is a MainAreaWidget
-    const widget = app.shell.currentWidget;
+    const main = app.shell.currentWidget;
 
-    if (widget instanceof MainAreaWidget) {
+    if (main instanceof MainAreaWidget) {
+      // Create a widget
+      const widget = new Widget();
       widget.addClass('example-extension-contentheader-widget');
       widget.node.textContent = generateContent();
 
+      // set the height so that it is visible
+      widget.node.style.minHeight = '20px';
+
+      // and insert it into the header
+      main.contentHeader.addWidget(widget);
+
       // Every so often, update the widget's contents
       setInterval(() => {
         widget.node.textContent = generateContent();

contentheader/preview.gif

@@ -2,7 +2,7 @@ import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
-
+import { Widget } from '@lumino/widgets';
 import { ICommandPalette, MainAreaWidget } from '@jupyterlab/apputils';
 
 /**
@@ -35,12 +35,20 @@ const plugin: JupyterFrontEndPlugin<void> = {
       caption: 'Populate content header (time example)',
       execute: () => {
         // Check to ensure this is a MainAreaWidget
-        const widget = app.shell.currentWidget;
+        const main = app.shell.currentWidget;
 
-        if (widget instanceof MainAreaWidget) {
+        if (main instanceof MainAreaWidget) {
+          // Create a widget
+          const widget = new Widget();
           widget.addClass('example-extension-contentheader-widget');
           widget.node.textContent = generateContent();
 
+          // set the height so that it is visible
+          widget.node.style.minHeight = '20px';
+
+          // and insert it into the header
+          main.contentHeader.addWidget(widget);
+
           // Every so often, update the widget's contents
           setInterval(() => {
             widget.node.textContent = generateContent();

contentheader/src/index.ts

@@ -15,4 +15,7 @@ test('should populate the contentheader', async ({ page }) => {
 
   // Ensure we see text from the extension example
   expect(await page.waitForSelector('text=Time in GMT is:')).toBeTruthy();
+
+  // Ensure that launcher was not overwritten
+  expect(await page.waitForSelector('.jp-Launcher-content')).toBeTruthy();
 });

contentheader/ui-tests/tests/contentheader.spec.ts

@@ -35,15 +35,16 @@ The first step is to define the command that will be executed when clicking on t
 
 <!-- prettier-ignore-start -->
 ```ts
-// src/index.ts#L15-L31
+// src/index.ts#L15-L32
 
 app.commands.addCommand('jlab-examples/context-menu:open', {
   label: 'Example',
   caption: "Example context menu button for file browser's items.",
   icon: buildIcon,
   execute: () => {
-    const file = factory.tracker.currentWidget?.selectedItems().next()
-      .value;
+    const file = factory.tracker.currentWidget
+      ?.selectedItems()
+      .next().value;
 
     if (file) {
       showDialog({

context-menu/README.md

@@ -17,8 +17,9 @@ const extension: JupyterFrontEndPlugin<void> = {
       caption: "Example context menu button for file browser's items.",
       icon: buildIcon,
       execute: () => {
-        const file = factory.tracker.currentWidget?.selectedItems().next()
-          .value;
+        const file = factory.tracker.currentWidget
+          ?.selectedItems()
+          .next().value;
 
         if (file) {
           showDialog({

context-menu/src/index.ts

@@ -7,8 +7,8 @@
     "embedme": "embedme \"[!n]*/README.md\" \"notifications/README.md\"",
     "install-py": "lerna exec --concurrency 4 -- touch yarn.lock && lerna exec --concurrency 4 -- python -m pip install \".\"",
     "install-ext": "lerna run install:extension",
-    "lint": "lerna run lint",
-    "lint:check": "jlpm run embedme --verify && lerna run lint:check",
+    "lint": "lerna run lint && jlpm run embedme",
+    "lint:check": "lerna run lint:check && jlpm run embedme --verify",
     "prettier": "prettier --write \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
     "prettier:check": "prettier --list-different \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\""
   },