@jupyterlab/apputils-extension 4.0.0-alpha.9 → 4.0.0-beta.1

package/src/themesplugins.ts

@@ -0,0 +1,290 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import {
+  ICommandPalette,
+  ISplashScreen,
+  IThemeManager,
+  ThemeManager
+} from '@jupyterlab/apputils';
+import { PageConfig, URLExt } from '@jupyterlab/coreutils';
+import { IMainMenu } from '@jupyterlab/mainmenu';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { ITranslator } from '@jupyterlab/translation';
+
+import scrollbarStyleText from '../style/scrollbar.raw.css';
+
+namespace CommandIDs {
+  export const changeTheme = 'apputils:change-theme';
+
+  export const themeScrollbars = 'apputils:theme-scrollbars';
+
+  export const changeFont = 'apputils:change-font';
+
+  export const incrFontSize = 'apputils:incr-font-size';
+
+  export const decrFontSize = 'apputils:decr-font-size';
+}
+
+function createStyleSheet(text: string): HTMLStyleElement {
+  const style = document.createElement('style');
+  style.setAttribute('type', 'text/css');
+  style.appendChild(document.createTextNode(text));
+  return style;
+}
+
+/**
+ * The default theme manager provider.
+ */
+export const themesPlugin: JupyterFrontEndPlugin<IThemeManager> = {
+  id: '@jupyterlab/apputils-extension:themes',
+  requires: [ISettingRegistry, JupyterFrontEnd.IPaths, ITranslator],
+  optional: [ISplashScreen],
+  activate: (
+    app: JupyterFrontEnd,
+    settings: ISettingRegistry,
+    paths: JupyterFrontEnd.IPaths,
+    translator: ITranslator,
+    splash: ISplashScreen | null
+  ): IThemeManager => {
+    const trans = translator.load('jupyterlab');
+    const host = app.shell;
+    const commands = app.commands;
+    const url = URLExt.join(PageConfig.getBaseUrl(), paths.urls.themes);
+    const key = themesPlugin.id;
+    const manager = new ThemeManager({
+      key,
+      host,
+      settings,
+      splash: splash ?? undefined,
+      url
+    });
+    let scrollbarsStyleElement: HTMLStyleElement | null = null;
+
+    // Keep a synchronously set reference to the current theme,
+    // since the asynchronous setting of the theme in `changeTheme`
+    // can lead to an incorrect toggle on the currently used theme.
+    let currentTheme: string;
+
+    manager.themeChanged.connect((sender, args) => {
+      // Set data attributes on the application shell for the current theme.
+      currentTheme = args.newValue;
+      document.body.dataset.jpThemeLight = String(
+        manager.isLight(currentTheme)
+      );
+      document.body.dataset.jpThemeName = currentTheme;
+      if (
+        document.body.dataset.jpThemeScrollbars !==
+        String(manager.themeScrollbars(currentTheme))
+      ) {
+        document.body.dataset.jpThemeScrollbars = String(
+          manager.themeScrollbars(currentTheme)
+        );
+        if (manager.themeScrollbars(currentTheme)) {
+          if (!scrollbarsStyleElement) {
+            scrollbarsStyleElement = createStyleSheet(scrollbarStyleText);
+          }
+          if (!scrollbarsStyleElement.parentElement) {
+            document.body.appendChild(scrollbarsStyleElement);
+          }
+        } else {
+          if (scrollbarsStyleElement && scrollbarsStyleElement.parentElement) {
+            scrollbarsStyleElement.parentElement.removeChild(
+              scrollbarsStyleElement
+            );
+          }
+        }
+      }
+
+      commands.notifyCommandChanged(CommandIDs.changeTheme);
+    });
+
+    commands.addCommand(CommandIDs.changeTheme, {
+      label: args => {
+        if (args.theme === undefined) {
+          return trans.__('Switch to the provided `theme`.');
+        }
+        const theme = args['theme'] as string;
+        const displayName = manager.getDisplayName(theme);
+        return args['isPalette']
+          ? trans.__('Use Theme: %1', displayName)
+          : displayName;
+      },
+      isToggled: args => args['theme'] === currentTheme,
+      execute: args => {
+        const theme = args['theme'] as string;
+        if (theme === manager.theme) {
+          return;
+        }
+        return manager.setTheme(theme);
+      }
+    });
+
+    commands.addCommand(CommandIDs.themeScrollbars, {
+      label: trans.__('Theme Scrollbars'),
+      isToggled: () => manager.isToggledThemeScrollbars(),
+      execute: () => manager.toggleThemeScrollbars()
+    });
+
+    commands.addCommand(CommandIDs.changeFont, {
+      label: args =>
+        args['enabled'] ? `${args['font']}` : trans.__('waiting for fonts'),
+      isEnabled: args => args['enabled'] as boolean,
+      isToggled: args => manager.getCSS(args['key'] as string) === args['font'],
+      execute: args =>
+        manager.setCSSOverride(args['key'] as string, args['font'] as string)
+    });
+
+    commands.addCommand(CommandIDs.incrFontSize, {
+      label: args => {
+        switch (args.key) {
+          case 'code-font-size':
+            return trans.__('Increase Code Font Size');
+          case 'content-font-size1':
+            return trans.__('Increase Content Font Size');
+          case 'ui-font-size1':
+            return trans.__('Increase UI Font Size');
+          default:
+            return trans.__('Increase Font Size');
+        }
+      },
+      execute: args => manager.incrFontSize(args['key'] as string)
+    });
+
+    commands.addCommand(CommandIDs.decrFontSize, {
+      label: args => {
+        switch (args.key) {
+          case 'code-font-size':
+            return trans.__('Decrease Code Font Size');
+          case 'content-font-size1':
+            return trans.__('Decrease Content Font Size');
+          case 'ui-font-size1':
+            return trans.__('Decrease UI Font Size');
+          default:
+            return trans.__('Decrease Font Size');
+        }
+      },
+      execute: args => manager.decrFontSize(args['key'] as string)
+    });
+
+    return manager;
+  },
+  autoStart: true,
+  provides: IThemeManager
+};
+
+/**
+ * The default theme manager's UI command palette and main menu functionality.
+ *
+ * #### Notes
+ * This plugin loads separately from the theme manager plugin in order to
+ * prevent blocking of the theme manager while it waits for the command palette
+ * and main menu to become available.
+ */
+export const themesPaletteMenuPlugin: JupyterFrontEndPlugin<void> = {
+  id: '@jupyterlab/apputils-extension:themes-palette-menu',
+  requires: [IThemeManager, ITranslator],
+  optional: [ICommandPalette, IMainMenu],
+  activate: (
+    app: JupyterFrontEnd,
+    manager: IThemeManager,
+    translator: ITranslator,
+    palette: ICommandPalette | null,
+    mainMenu: IMainMenu | null
+  ): void => {
+    const trans = translator.load('jupyterlab');
+
+    // If we have a main menu, add the theme manager to the settings menu.
+    if (mainMenu) {
+      void app.restored.then(() => {
+        const isPalette = false;
+
+        const themeMenu = mainMenu.settingsMenu.items.find(
+          item =>
+            item.type === 'submenu' &&
+            item.submenu?.id === 'jp-mainmenu-settings-apputilstheme'
+        )?.submenu;
+
+        // choose a theme
+        if (themeMenu) {
+          manager.themes.forEach((theme, index) => {
+            themeMenu.insertItem(index, {
+              command: CommandIDs.changeTheme,
+              args: { isPalette, theme }
+            });
+          });
+        }
+      });
+    }
+
+    // If we have a command palette, add theme switching options to it.
+    if (palette) {
+      void app.restored.then(() => {
+        const category = trans.__('Theme');
+        const command = CommandIDs.changeTheme;
+        const isPalette = true;
+
+        // choose a theme
+        manager.themes.forEach(theme => {
+          palette.addItem({ command, args: { isPalette, theme }, category });
+        });
+
+        // toggle scrollbar theming
+        palette.addItem({ command: CommandIDs.themeScrollbars, category });
+
+        // increase/decrease code font size
+        palette.addItem({
+          command: CommandIDs.incrFontSize,
+          args: {
+            key: 'code-font-size'
+          },
+          category
+        });
+        palette.addItem({
+          command: CommandIDs.decrFontSize,
+          args: {
+            key: 'code-font-size'
+          },
+          category
+        });
+        // increase/decrease content font size
+        palette.addItem({
+          command: CommandIDs.incrFontSize,
+          args: {
+            key: 'content-font-size1'
+          },
+          category
+        });
+        palette.addItem({
+          command: CommandIDs.decrFontSize,
+          args: {
+            key: 'content-font-size1'
+          },
+          category
+        });
+        // increase/decrease ui font size
+        palette.addItem({
+          command: CommandIDs.incrFontSize,
+          args: {
+            key: 'ui-font-size1'
+          },
+          category
+        });
+        palette.addItem({
+          command: CommandIDs.decrFontSize,
+          args: {
+            key: 'ui-font-size1'
+          },
+          category
+        });
+      });
+    }
+  },
+  autoStart: true
+};

package/src/toolbarregistryplugin.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import {
+  createDefaultFactory,
+  IToolbarWidgetRegistry,
+  ToolbarWidgetRegistry
+} from '@jupyterlab/apputils';
+
+/**
+ * The default toolbar registry.
+ */
+export const toolbarRegistry: JupyterFrontEndPlugin<IToolbarWidgetRegistry> = {
+  id: '@jupyterlab/apputils-extension:toolbar-registry',
+  autoStart: true,
+  provides: IToolbarWidgetRegistry,
+  activate: (app: JupyterFrontEnd) => {
+    const registry = new ToolbarWidgetRegistry({
+      defaultFactory: createDefaultFactory(app.commands)
+    });
+    return registry;
+  }
+};

package/src/typings.d.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+declare module '*.raw.css' {
+  const script: string;
+  export default script;
+}

package/src/workspacesplugin.ts

@@ -0,0 +1,306 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+  IRouter,
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import { Dialog, IWindowResolver, showDialog } from '@jupyterlab/apputils';
+import { URLExt } from '@jupyterlab/coreutils';
+import {
+  ABCWidgetFactory,
+  DocumentRegistry,
+  DocumentWidget,
+  IDocumentWidget
+} from '@jupyterlab/docregistry';
+import { IDefaultFileBrowser } from '@jupyterlab/filebrowser';
+import { Contents, Workspace, WorkspaceManager } from '@jupyterlab/services';
+import { IStateDB } from '@jupyterlab/statedb';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import { Widget } from '@lumino/widgets';
+
+namespace CommandIDs {
+  export const saveWorkspace = 'workspace-ui:save';
+
+  export const saveWorkspaceAs = 'workspace-ui:save-as';
+}
+
+const WORKSPACE_NAME = 'jupyterlab-workspace';
+const WORKSPACE_EXT = '.' + WORKSPACE_NAME;
+const LAST_SAVE_ID = 'workspace-ui:lastSave';
+const ICON_NAME = 'jp-JupyterIcon';
+
+/**
+ * The workspace MIME renderer and save plugin.
+ */
+export const workspacesPlugin: JupyterFrontEndPlugin<void> = {
+  id: '@jupyterlab/apputils-extension:workspaces',
+  autoStart: true,
+  requires: [
+    IDefaultFileBrowser,
+    IWindowResolver,
+    IStateDB,
+    ITranslator,
+    JupyterFrontEnd.IPaths
+  ],
+  optional: [IRouter],
+  activate: (
+    app: JupyterFrontEnd,
+    fileBrowser: IDefaultFileBrowser,
+    resolver: IWindowResolver,
+    state: IStateDB,
+    translator: ITranslator,
+    paths: JupyterFrontEnd.IPaths,
+    router: IRouter | null
+  ): void => {
+    // The workspace factory creates dummy widgets to load a new workspace.
+    const factory = new Private.WorkspaceFactory({
+      workspaces: app.serviceManager.workspaces,
+      router,
+      state,
+      translator,
+      paths
+    });
+    const trans = translator.load('jupyterlab');
+
+    app.docRegistry.addFileType({
+      name: WORKSPACE_NAME,
+      contentType: 'file',
+      fileFormat: 'text',
+      displayName: trans.__('JupyterLab workspace File'),
+      extensions: [WORKSPACE_EXT],
+      mimeTypes: ['text/json'],
+      iconClass: ICON_NAME
+    });
+    app.docRegistry.addWidgetFactory(factory);
+    app.commands.addCommand(CommandIDs.saveWorkspaceAs, {
+      label: trans.__('Save Current Workspace As…'),
+      execute: async () => {
+        const data = app.serviceManager.workspaces.fetch(resolver.name);
+        await Private.saveAs(
+          fileBrowser,
+          app.serviceManager.contents,
+          data,
+          state,
+          translator
+        );
+      }
+    });
+
+    app.commands.addCommand(CommandIDs.saveWorkspace, {
+      label: trans.__('Save Current Workspace'),
+      execute: async () => {
+        const { contents } = app.serviceManager;
+        const data = app.serviceManager.workspaces.fetch(resolver.name);
+        const lastSave = (await state.fetch(LAST_SAVE_ID)) as string;
+        if (lastSave === undefined) {
+          await Private.saveAs(fileBrowser, contents, data, state, translator);
+        } else {
+          await Private.save(lastSave, contents, data, state);
+        }
+      }
+    });
+  }
+};
+
+namespace Private {
+  /**
+   * Save workspace to a user provided location
+   */
+  export async function save(
+    userPath: string,
+    contents: Contents.IManager,
+    data: Promise<Workspace.IWorkspace>,
+    state: IStateDB
+  ): Promise<void> {
+    let name = userPath.split('/').pop();
+
+    // Add extension if not provided or remove extension from name if it was.
+    if (name !== undefined && name.includes('.')) {
+      name = name.split('.')[0];
+    } else {
+      userPath = userPath + WORKSPACE_EXT;
+    }
+
+    // Save last save location, for save button to work
+    await state.save(LAST_SAVE_ID, userPath);
+
+    const resolvedData = await data;
+    resolvedData.metadata.id = `${name}`;
+    await contents.save(userPath, {
+      type: 'file',
+      format: 'text',
+      content: JSON.stringify(resolvedData)
+    });
+  }
+
+  /**
+   * Ask user for location, and save workspace.
+   * Default location is the current directory in the file browser
+   */
+  export async function saveAs(
+    browser: IDefaultFileBrowser,
+    contents: Contents.IManager,
+    data: Promise<Workspace.IWorkspace>,
+    state: IStateDB,
+    translator?: ITranslator
+  ): Promise<void> {
+    translator = translator || nullTranslator;
+    const lastSave = await state.fetch(LAST_SAVE_ID);
+
+    let defaultName;
+    if (lastSave === undefined) {
+      defaultName = 'new-workspace';
+    } else {
+      defaultName = (lastSave as string).split('/').pop()?.split('.')[0];
+    }
+
+    const defaultPath = browser.model.path + '/' + defaultName + WORKSPACE_EXT;
+    const userPath = await getSavePath(defaultPath, translator);
+
+    if (userPath) {
+      await save(userPath, contents, data, state);
+    }
+  }
+
+  /**
+   * This widget factory is used to handle double click on workspace
+   */
+  export class WorkspaceFactory extends ABCWidgetFactory<IDocumentWidget> {
+    /**
+     * Construct a widget factory that uploads a workspace and navigates to it.
+     *
+     * @param options - The instantiation options for a `WorkspaceFactory`.
+     */
+    constructor(options: WorkspaceFactory.IOptions) {
+      const trans = (options.translator || nullTranslator).load('jupyterlab');
+      super({
+        name: 'Workspace loader',
+        label: trans.__('Workspace loader'),
+        fileTypes: [WORKSPACE_NAME],
+        defaultFor: [WORKSPACE_NAME],
+        readOnly: true
+      });
+      this._application = options.paths.urls.app;
+      this._router = options.router;
+      this._state = options.state;
+      this._workspaces = options.workspaces;
+    }
+
+    /**
+     * Loads the workspace into load, and jump to it
+     * @param context This is used queried to query the workspace content
+     */
+    protected createNewWidget(
+      context: DocumentRegistry.Context
+    ): IDocumentWidget {
+      // Save a file's contents as a workspace and navigate to that workspace.
+      void context.ready.then(async () => {
+        const file = context.model;
+        const workspace = file.toJSON() as unknown as Workspace.IWorkspace;
+        const path = context.path;
+        const id = workspace.metadata.id;
+
+        // Save the file contents as a workspace.
+        await this._workspaces.save(id, workspace);
+
+        // Save last save location for the save command.
+        await this._state.save(LAST_SAVE_ID, path);
+
+        // Navigate to new workspace.
+        const url = URLExt.join(this._application, 'workspaces', id);
+        if (this._router) {
+          this._router.navigate(url, { hard: true });
+        } else {
+          document.location.href = url;
+        }
+      });
+      return dummyWidget(context);
+    }
+
+    private _application: string;
+    private _router: IRouter | null;
+    private _state: IStateDB;
+    private _workspaces: WorkspaceManager;
+  }
+
+  /**
+   * A namespace for `WorkspaceFactory`
+   */
+  export namespace WorkspaceFactory {
+    /**
+     * Instantiation options for a `WorkspaceFactory`
+     */
+    export interface IOptions {
+      paths: JupyterFrontEnd.IPaths;
+      router: IRouter | null;
+      state: IStateDB;
+      translator: ITranslator;
+      workspaces: WorkspaceManager;
+    }
+  }
+
+  /**
+   * Returns a dummy widget with disposed content that doesn't render in the UI.
+   *
+   * @param context - The file context.
+   */
+  function dummyWidget(context: DocumentRegistry.Context): IDocumentWidget {
+    const widget = new DocumentWidget({ content: new Widget(), context });
+    widget.content.dispose();
+    return widget;
+  }
+
+  /**
+   * Ask user for a path to save to.
+   * @param defaultPath Path already present when the dialog is shown
+   */
+  async function getSavePath(
+    defaultPath: string,
+    translator?: ITranslator
+  ): Promise<string | null> {
+    translator = translator || nullTranslator;
+    const trans = translator.load('jupyterlab');
+    const saveBtn = Dialog.okButton({ label: trans.__('Save') });
+    const result = await showDialog({
+      title: trans.__('Save Current Workspace As…'),
+      body: new SaveWidget(defaultPath),
+      buttons: [Dialog.cancelButton(), saveBtn]
+    });
+    if (result.button.label === trans.__('Save')) {
+      return result.value;
+    } else {
+      return null;
+    }
+  }
+
+  /**
+   * A widget that gets a file path from a user.
+   */
+  class SaveWidget extends Widget {
+    /**
+     * Gets a modal node for getting save location. Will have a default to the current opened directory
+     * @param path Default location
+     */
+    constructor(path: string) {
+      super({ node: createSaveNode(path) });
+    }
+
+    /**
+     * Gets the save path entered by the user
+     */
+    getValue(): string {
+      return (this.node as HTMLInputElement).value;
+    }
+  }
+
+  /**
+   * Create the node for a save widget.
+   */
+  function createSaveNode(path: string): HTMLElement {
+    const input = document.createElement('input');
+    input.value = path;
+    return input;
+  }
+}

package/style/base.css

@@ -4,5 +4,6 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-@import './redirect.css';
+@import './notification.css';
 @import './splash.css';
+@import './contextualhelp.css';

package/style/contextualhelp.css

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+:root {
+  --jp-private-shortcuts-key-padding-horizontal: 0.47em;
+  --jp-private-shortcuts-key-padding-vertical: 0.28em;
+  --jp-private-shortcuts-label-padding-horizontal: 0.47em;
+}
+
+.jp-ContextualShortcut-TableRow {
+  font-size: var(--jp-ui-font-size1);
+  font-family: var(--jp-ui-font-family);
+}
+
+.jp-ContextualShortcut-TableItem {
+  margin-left: auto;
+  margin-right: auto;
+  color: var(--jp-inverse-layout-color0);
+  font-size: var(--jp-ui-font-size1);
+  line-height: 2em;
+  padding-right: var(--jp-private-shortcuts-label-padding-horizontal);
+}
+
+.jp-ContextualShortcut-TableLastRow {
+  height: 2em;
+}
+
+.jp-ContextualShortcut-Key {
+  font-family: var(--jp-code-font-family);
+  border-width: var(--jp-border-width);
+  border-radius: var(--jp-border-radius);
+  border-style: solid;
+  border-color: var(--jp-border-color1);
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color1);
+  padding-left: var(--jp-private-shortcuts-key-padding-horizontal);
+  padding-right: var(--jp-private-shortcuts-key-padding-horizontal);
+  padding-top: var(--jp-private-shortcuts-key-padding-vertical);
+  padding-bottom: var(--jp-private-shortcuts-key-padding-vertical);
+}