#7904 #6893 fix publishing missing widgets (#8103)

* #7904 save widget state before publishing

* #6894 add @phosphor/commands

* #6894 WIP

* #6894 publish beakerx_tabledisplay as it is needed by nbviewer

* #6894 save widget state before publishing

* #6894 modify release instruction

* #6894 fix missing icons in lab

RELEASE.md

@@ -96,6 +96,7 @@ Publish on npmjs
 
 To update the embedded version of our widget library, and our Lab extension:
 ```
+(cd js/beakerx_tabledisplay; npm publish)
 (cd js/notebook; npm publish)
 (cd js/lab; npm publish)
 ```

js/beakerx_tabledisplay/package.json

@@ -30,7 +30,8 @@
     "build:prod": "yarn run test && webpack --config webpack.prod.js",
     "test": "cross-os test",
     "coverage": "cross-os coverage",
-    "stats": "webpack --env production --profile --json > stats.json"
+    "stats": "webpack --env production --profile --json > stats.json",
+    "prepublishOnly": "yarn run build:prod"
   },
   "cross-os": {
     "test": {

js/beakerx_tabledisplay/webpack.config.js

@@ -15,6 +15,7 @@
  */
 
 const webpack = require('webpack');
+const pkg = require('./package.json');
 const path = require('path');
 
 // Custom webpack loaders are generally the same for all webpack bundles, hence
@@ -92,6 +93,21 @@ module.exports = [
         },
         plugins: plugins
     },
+    {
+        entry: './src/embed.ts',
+        output: {
+            filename: 'index.js',
+            path: path.resolve(__dirname, './dist/'),
+            libraryTarget: 'amd',
+            publicPath: 'https://unpkg.com/' + pkg.name + '@' + pkg.version + '/dist/'
+        },
+        module: {
+            rules: rules
+        },
+        resolve: resolve,
+        externals: externals,
+        plugins: plugins
+    },
     {
         entry: './src/embed.ts',
         output: {

js/lab/package.json

@@ -37,6 +37,7 @@
     "@jupyterlab/services": "^4.0.0",
     "@phosphor/application": "^1.6.4",
     "@phosphor/coreutils": "^1.3.1",
+    "@phosphor/commands": "^1.7.0",
     "@phosphor/datagrid": "^0.1.10",
     "@types/node": "^12.0.10",
     "@types/codemirror": "^0.0.76",

js/lab/src/plugin/UIOptionFeaturesHelper.ts

@@ -38,7 +38,7 @@ export default class UIOptionFeaturesHelper {
 
   public registerFeatures(): void {
 
-    this.showPublicationFeature = new ShowPublicationFeature(this.panel);
+    this.showPublicationFeature = new ShowPublicationFeature(this.panel, this.app.commands);
     this.autoCloseBracketsFeature = new AutoCloseBracketsFeature(this.panel);
     this.autoSaveFeature = new AutoSaveFeature(this.settings, this.app.commands);
     this.improveFontsFeature = new ImproveFontsFeature();
@@ -107,14 +107,14 @@ interface IUIOptionsFeature {
 
 class ShowPublicationFeature implements IUIOptionsFeature {
 
-  constructor(private panel: NotebookPanel) {}
+  constructor(private panel: NotebookPanel, private commands) {}
 
   public init(isEnabled: boolean) {
-    GistPublish.registerFeature(this.panel, isEnabled);
+    GistPublish.registerFeature(this.panel, this.commands, isEnabled);
   }
 
   public update(isEnabled: boolean): void {
-    GistPublish.registerFeature(this.panel, isEnabled);
+    GistPublish.registerFeature(this.panel, this.commands, isEnabled);
   }
 }
 

js/lab/src/plugin/gistPublish/index.ts

@@ -20,22 +20,23 @@ import beakerx from "../../beakerx";
 import GistPublishModal from './gistPublishModal';
 import AccessTokenProvider from "../../AccessTokenProvider";
 import { CodeCell, Cell } from "@jupyterlab/cells";
+import {CommandRegistry} from "@phosphor/commands";
 
-export function registerFeature(panel: NotebookPanel, showPublication: boolean) {
+export function registerFeature(panel: NotebookPanel, commands: CommandRegistry, showPublication: boolean) {
   if (showPublication) {
-    addActionButton(panel);
-    setupPublisher(panel);
+    addActionButton(panel, commands);
+    setupPublisher(panel, commands);
   } else {
     removeActionButton(panel);
   }
 }
 
-function addActionButton(panel: NotebookPanel): void {
+function addActionButton(panel: NotebookPanel, commands: CommandRegistry): void {
   if (panel.toolbar.isDisposed) { return; }
   const action = {
-    className: 'fa fa-share-alt',
+    iconClassName: 'bx-PublishIcon fa fa-share-alt',
     tooltip: 'Publish...',
-    onClick: () => openPublishDialog(panel)
+    onClick: () => openPublishDialog(panel, commands)
   };
 
   let button = new ToolbarButton(action);
@@ -55,11 +56,11 @@ function removeActionButton(panel: NotebookPanel): void {
   }
 }
 
-function setupPublisher(panel: NotebookPanel) {
+function setupPublisher(panel: NotebookPanel, commands: CommandRegistry) {
 
   let options = {
     accessTokenProvider: new AccessTokenProvider(),
-    saveWidgetsStateHandler: saveWidgetsState.bind(undefined, panel),
+    saveWidgetsStateHandler: saveWidgetsState.bind(undefined, panel, commands),
     prepareContentToPublish: (scope) => {
       let el = scope.node || scope.element[0];
       let cell: CodeCell;
@@ -79,9 +80,12 @@ function setupPublisher(panel: NotebookPanel) {
   beakerx.GistPublisherUtils.setup(options);
 }
 
-function openPublishDialog(panel: NotebookPanel) {
+function openPublishDialog(panel: NotebookPanel, commands: CommandRegistry) {
   new GistPublishModal()
-    .show(personalAccessToken => doPublish(panel, personalAccessToken));
+    .show(async (personalAccessToken) => {
+      await saveWidgetsState(panel, commands);
+      return doPublish(panel, personalAccessToken)
+    });
 }
 
 function showErrorDialog(errorMsg) {
@@ -92,18 +96,11 @@ function showErrorDialog(errorMsg) {
   });
 }
 
-export function saveWidgetsState(panel): Promise<string> {
-  return new Promise((resolve, reject) => {
-    panel.context.save().then(() => {
-      console.log("widgets state has been saved");
+export async function saveWidgetsState (panel: NotebookPanel, commands: CommandRegistry): Promise<string> {
+  await commands.execute('docmanager:save');
+  console.log("widgets state has been saved");
+  return panel.context.contentsModel.name;
 
-      if (!panel.isDisposed) {
-        resolve(panel.context.contentsModel.name);
-      } else {
-        reject();
-      }
-    }, reject);
-  })
 }
 
 function doPublish(panel: NotebookPanel, personalAccessToken: string|null): void {

js/lab/src/plugin/initializationCells.ts

@@ -84,7 +84,7 @@ export function registerNotebookInitCellsAction(
   options: IInitCellsOptions
 ): void {
   const action = {
-    className: 'fa fa-calculator',
+    iconClassName: 'bx-RunInitializationCellsIcon fa fa-calculator',
     tooltip: 'Run all initialization cells',
     onClick: () => runInitCells(panel,{ ...options, run_untrusted: true })
   };

js/notebook/src/extension/gistPublish/index.ts

@@ -74,7 +74,11 @@ function setupPublisher() {
 
 function openPublishDialog(): void {
   new GistPublishModal()
-    .show(personalAccessToken => doPublish(personalAccessToken));
+    .show(personalAccessToken => {
+      saveWidgetsState()
+          .then(() => { doPublish(personalAccessToken); })
+          .catch((reason => console.log(reason)))
+    });
 }
 
 function showErrorDialog(errorMsg) {