@jupyterlab/running 4.0.0-alpha.2 → 4.0.0-alpha.21

package/lib/index.d.ts

@@ -3,7 +3,7 @@
  * @module running
  */
 import { ITranslator } from '@jupyterlab/translation';
-import { LabIcon, ReactWidget } from '@jupyterlab/ui-components';
+import { LabIcon, SidePanel } from '@jupyterlab/ui-components';
 import { Token } from '@lumino/coreutils';
 import { IDisposable } from '@lumino/disposable';
 import { ISignal } from '@lumino/signaling';
@@ -22,12 +22,20 @@ export interface IRunningSessionManagers {
      *
      */
     add(manager: IRunningSessions.IManager): IDisposable;
+    /**
+     * Signal emitted when a new manager is added.
+     */
+    added: ISignal<IRunningSessionManagers, IRunningSessions.IManager>;
     /**
      * Return an array of managers.
      */
     items(): ReadonlyArray<IRunningSessions.IManager>;
 }
 export declare class RunningSessionManagers implements IRunningSessionManagers {
+    /**
+     * Signal emitted when a new manager is added.
+     */
+    get added(): ISignal<this, IRunningSessions.IManager>;
     /**
      * Add a running item manager.
      *
@@ -39,18 +47,29 @@ export declare class RunningSessionManagers implements IRunningSessionManagers {
      * Return an iterator of launcher items.
      */
     items(): ReadonlyArray<IRunningSessions.IManager>;
+    private _added;
     private _managers;
 }
 /**
  * A class that exposes the running terminal and kernel sessions.
  */
-export declare class RunningSessions extends ReactWidget {
+export declare class RunningSessions extends SidePanel {
     /**
      * Construct a new running widget.
      */
     constructor(managers: IRunningSessionManagers, translator?: ITranslator);
-    protected render(): JSX.Element;
-    private managers;
+    /**
+     * Dispose the resources held by the widget
+     */
+    dispose(): void;
+    /**
+     * Add a section for a new manager.
+     *
+     * @param managers Managers
+     * @param manager New manager
+     */
+    protected addSection(_: unknown, manager: IRunningSessions.IManager): void;
+    protected managers: IRunningSessionManagers;
     protected translator: ITranslator;
 }
 /**
@@ -61,25 +80,85 @@ export declare namespace IRunningSessions {
      * A manager of running items grouped under a single section.
      */
     interface IManager {
+        /**
+         * Name that is shown to the user in plural.
+         */
         name: string;
+        /**
+         * Called when the shutdown all button is pressed.
+         */
         shutdownAll(): void;
+        /**
+         * List the running models.
+         */
         running(): IRunningItem[];
+        /**
+         * Force a refresh of the running models.
+         */
         refreshRunning(): void;
+        /**
+         * A signal that should be emitted when the item list has changed.
+         */
         runningChanged: ISignal<any, any>;
+        /**
+         * A string used to describe the shutdown action.
+         */
         shutdownLabel?: string;
+        /**
+         * A string used to describe the shutdown all action.
+         */
         shutdownAllLabel?: string;
+        /**
+         * A string used as the body text in the shutdown all confirmation dialog.
+         */
         shutdownAllConfirmationText?: string;
+        /**
+         * The icon to show for shutting down an individual item in this section.
+         */
         shutdownItemIcon?: LabIcon;
     }
     /**
      * A running item.
      */
     interface IRunningItem {
-        open: () => void;
-        shutdown: () => void;
-        icon: () => LabIcon;
+        /**
+         * Optional child nodes that belong to a top-level running item.
+         */
+        children?: IRunningItem[];
+        /**
+         * Optional CSS class name to add to the running item.
+         */
+        className?: string;
+        /**
+         * Optional context hint to add to the `data-context` attribute of an item.
+         */
+        context?: string;
+        /**
+         * Called when the running item is clicked.
+         */
+        open?: () => void;
+        /**
+         * Called when the shutdown button is pressed on a particular item.
+         */
+        shutdown?: () => void;
+        /**
+         * The `LabIcon` to use as the icon for the running item or the string
+         * `src` URL.
+         */
+        icon: () => LabIcon | string;
+        /**
+         * Called to determine the label for each item.
+         */
         label: () => string;
+        /**
+         * Called to determine the `title` attribute for each item, which is
+         * revealed on hover.
+         */
         labelTitle?: () => string;
+        /**
+         * Called to determine the `detail` attribute, which is shown optionally in
+         * a column after the label.
+         */
         detail?: () => string;
     }
 }

package/lib/index.js

@@ -6,26 +6,19 @@
  */
 import { Dialog, showDialog } from '@jupyterlab/apputils';
 import { nullTranslator } from '@jupyterlab/translation';
-import { closeIcon, ReactWidget, refreshIcon, ToolbarButtonComponent, UseSignal } from '@jupyterlab/ui-components';
+import { caretDownIcon, caretRightIcon, closeIcon, PanelWithToolbar, ReactWidget, refreshIcon, SidePanel, ToolbarButton, ToolbarButtonComponent, UseSignal } from '@jupyterlab/ui-components';
 import { Token } from '@lumino/coreutils';
 import { DisposableDelegate } from '@lumino/disposable';
+import { Signal } from '@lumino/signaling';
 import * as React from 'react';
 /**
  * The class name added to a running widget.
  */
 const RUNNING_CLASS = 'jp-RunningSessions';
-/**
- * The class name added to a running widget header.
- */
-const HEADER_CLASS = 'jp-RunningSessions-header';
 /**
  * The class name added to the running terminal sessions section.
  */
 const SECTION_CLASS = 'jp-RunningSessions-section';
-/**
- * The class name added to the running sessions section header.
- */
-const SECTION_HEADER_CLASS = 'jp-RunningSessions-sectionHeader';
 /**
  * The class name added to a section container.
  */
@@ -54,15 +47,21 @@ const SHUTDOWN_BUTTON_CLASS = 'jp-RunningSessions-itemShutdown';
  * The class name added to a running session item shutdown button.
  */
 const SHUTDOWN_ALL_BUTTON_CLASS = 'jp-RunningSessions-shutdownAll';
-/* tslint:disable */
 /**
  * The running sessions token.
  */
 export const IRunningSessionManagers = new Token('@jupyterlab/running:IRunningSessionManagers');
 export class RunningSessionManagers {
     constructor() {
+        this._added = new Signal(this);
         this._managers = [];
     }
+    /**
+     * Signal emitted when a new manager is added.
+     */
+    get added() {
+        return this._added;
+    }
     /**
      * Add a running item manager.
      *
@@ -71,6 +70,7 @@ export class RunningSessionManagers {
      */
     add(manager) {
         this._managers.push(manager);
+        this._added.emit(manager);
         return new DisposableDelegate(() => {
             const i = this._managers.indexOf(manager);
             if (i > -1) {
@@ -86,25 +86,108 @@ export class RunningSessionManagers {
     }
 }
 function Item(props) {
-    var _a;
+    var _a, _b;
     const { runningItem } = props;
-    const icon = runningItem.icon();
+    const classList = [ITEM_CLASS];
     const detail = (_a = runningItem.detail) === null || _a === void 0 ? void 0 : _a.call(runningItem);
+    const icon = runningItem.icon();
+    const title = runningItem.labelTitle ? runningItem.labelTitle() : '';
     const translator = props.translator || nullTranslator;
     const trans = translator.load('jupyterlab');
-    const shutdownLabel = props.shutdownLabel || trans.__('Shut Down');
+    // Handle shutdown requests.
+    let stopPropagation = false;
     const shutdownItemIcon = props.shutdownItemIcon || closeIcon;
-    return (React.createElement("li", { className: ITEM_CLASS },
-        React.createElement(icon.react, { tag: "span", stylesheet: "runningItem" }),
-        React.createElement("span", { className: ITEM_LABEL_CLASS, title: runningItem.labelTitle ? runningItem.labelTitle() : '', onClick: () => runningItem.open() }, runningItem.label()),
-        detail && React.createElement("span", { className: ITEM_DETAIL_CLASS }, detail),
-        React.createElement(ToolbarButtonComponent, { className: SHUTDOWN_BUTTON_CLASS, icon: shutdownItemIcon, onClick: () => runningItem.shutdown(), tooltip: shutdownLabel })));
-}
-function ListView(props) {
-    return (React.createElement("ul", { className: LIST_CLASS }, props.runningItems.map((item, i) => (React.createElement(Item, { key: i, runningItem: item, shutdownLabel: props.shutdownLabel, shutdownItemIcon: props.shutdownItemIcon, translator: props.translator })))));
+    const shutdownLabel = props.shutdownLabel || trans.__('Shut Down');
+    const shutdown = () => {
+        var _a;
+        stopPropagation = true;
+        (_a = runningItem.shutdown) === null || _a === void 0 ? void 0 : _a.call(runningItem);
+    };
+    // Manage collapsed state. Use the shutdown flag in lieu of `stopPropagation`.
+    const [collapsed, collapse] = React.useState(false);
+    const collapsible = !!((_b = runningItem.children) === null || _b === void 0 ? void 0 : _b.length);
+    const onClick = collapsible
+        ? () => !stopPropagation && collapse(!collapsed)
+        : undefined;
+    if (runningItem.className) {
+        classList.push(runningItem.className);
+    }
+    if (props.child) {
+        classList.push('jp-mod-running-child');
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("li", null,
+            React.createElement("div", { className: classList.join(' '), onClick: onClick, "data-context": runningItem.context || '' },
+                collapsible &&
+                    (collapsed ? (React.createElement(caretRightIcon.react, { tag: "span", stylesheet: "runningItem" })) : (React.createElement(caretDownIcon.react, { tag: "span", stylesheet: "runningItem" }))),
+                typeof icon === 'string' ? (icon ? (React.createElement("img", { src: icon })) : undefined) : (React.createElement(icon.react, { tag: "span", stylesheet: "runningItem" })),
+                React.createElement("span", { className: ITEM_LABEL_CLASS, title: title, onClick: runningItem.open && (() => runningItem.open()) }, runningItem.label()),
+                detail && React.createElement("span", { className: ITEM_DETAIL_CLASS }, detail),
+                runningItem.shutdown && (React.createElement(ToolbarButtonComponent, { className: SHUTDOWN_BUTTON_CLASS, icon: shutdownItemIcon, onClick: shutdown, tooltip: shutdownLabel }))),
+            collapsible && !collapsed && (React.createElement(List, { child: true, runningItems: runningItem.children, shutdownItemIcon: shutdownItemIcon, translator: translator })))));
 }
 function List(props) {
-    return (React.createElement(UseSignal, { signal: props.manager.runningChanged }, () => (React.createElement(ListView, { runningItems: props.manager.running(), shutdownLabel: props.shutdownLabel, shutdownAllLabel: props.shutdownAllLabel, shutdownItemIcon: props.manager.shutdownItemIcon, translator: props.translator }))));
+    return (React.createElement("ul", { className: LIST_CLASS }, props.runningItems.map((item, i) => (React.createElement(Item, { child: props.child, key: i, runningItem: item, shutdownLabel: props.shutdownLabel, shutdownItemIcon: props.shutdownItemIcon, translator: props.translator })))));
+}
+class ListWidget extends ReactWidget {
+    constructor(_options) {
+        super();
+        this._options = _options;
+        this._update = new Signal(this);
+        _options.manager.runningChanged.connect(this._emitUpdate, this);
+    }
+    dispose() {
+        this._options.manager.runningChanged.disconnect(this._emitUpdate, this);
+        super.dispose();
+    }
+    onBeforeShow(msg) {
+        super.onBeforeShow(msg);
+        this._update.emit();
+    }
+    render() {
+        const options = this._options;
+        let cached = true;
+        return (React.createElement(UseSignal, { signal: this._update }, () => {
+            // Cache the running items for the intial load and request from
+            // the service every subsequent load.
+            if (cached) {
+                cached = false;
+            }
+            else {
+                options.runningItems = options.manager.running();
+            }
+            return (React.createElement("div", { className: CONTAINER_CLASS },
+                React.createElement(List, { runningItems: options.runningItems, shutdownLabel: options.manager.shutdownLabel, shutdownAllLabel: options.shutdownAllLabel, shutdownItemIcon: options.manager.shutdownItemIcon, translator: options.translator })));
+        }));
+    }
+    /**
+     * Check if the widget or any of it's parents is hidden.
+     *
+     * Checking parents is necessary as lumino does not propagate visibility
+     * changes from parents down to children (although it does notify parents
+     * about changes to children visibility).
+     */
+    _isAnyHidden() {
+        let isHidden = this.isHidden;
+        if (isHidden) {
+            return isHidden;
+        }
+        let parent = this.parent;
+        while (parent != null) {
+            if (parent.isHidden) {
+                isHidden = true;
+                break;
+            }
+            parent = parent.parent;
+        }
+        return isHidden;
+    }
+    _emitUpdate() {
+        if (this._isAnyHidden()) {
+            return;
+        }
+        this._update.emit();
+    }
 }
 /**
  * The Section component contains the shared look and feel for an interactive
@@ -112,62 +195,105 @@ function List(props) {
  *
  * It is specialized for each based on its props.
  */
-function Section(props) {
-    const translator = props.translator || nullTranslator;
-    const trans = translator.load('jupyterlab');
-    const shutdownAllLabel = props.manager.shutdownAllLabel || trans.__('Shut Down All');
-    const shutdownTitle = `${shutdownAllLabel}?`;
-    const shutdownAllConfirmationText = props.manager.shutdownAllConfirmationText ||
-        `${shutdownAllLabel} ${props.manager.name}`;
-    function onShutdown() {
-        void showDialog({
-            title: shutdownTitle,
-            body: shutdownAllConfirmationText,
-            buttons: [
-                Dialog.cancelButton({ label: trans.__('Cancel') }),
-                Dialog.warnButton({ label: shutdownAllLabel })
-            ]
-        }).then(result => {
-            if (result.button.accept) {
-                props.manager.shutdownAll();
-            }
+class Section extends PanelWithToolbar {
+    constructor(options) {
+        super();
+        this._manager = options.manager;
+        const translator = options.translator || nullTranslator;
+        const trans = translator.load('jupyterlab');
+        const shutdownAllLabel = options.manager.shutdownAllLabel || trans.__('Shut Down All');
+        const shutdownTitle = `${shutdownAllLabel}?`;
+        const shutdownAllConfirmationText = options.manager.shutdownAllConfirmationText ||
+            `${shutdownAllLabel} ${options.manager.name}`;
+        this.addClass(SECTION_CLASS);
+        this.title.label = options.manager.name;
+        function onShutdown() {
+            void showDialog({
+                title: shutdownTitle,
+                body: shutdownAllConfirmationText,
+                buttons: [
+                    Dialog.cancelButton(),
+                    Dialog.warnButton({ label: shutdownAllLabel })
+                ]
+            }).then(result => {
+                if (result.button.accept) {
+                    options.manager.shutdownAll();
+                }
+            });
+        }
+        let runningItems = options.manager.running();
+        const enabled = runningItems.length > 0;
+        this._button = new ToolbarButton({
+            label: shutdownAllLabel,
+            className: `${SHUTDOWN_ALL_BUTTON_CLASS} jp-mod-styled ${!enabled && 'jp-mod-disabled'}`,
+            enabled,
+            onClick: onShutdown
         });
+        this._manager.runningChanged.connect(this._updateButton, this);
+        this.toolbar.addItem('shutdown-all', this._button);
+        this.addWidget(new ListWidget({ runningItems, shutdownAllLabel, ...options }));
+    }
+    /**
+     * Dispose the resources held by the widget
+     */
+    dispose() {
+        if (this.isDisposed) {
+            return;
+        }
+        this._manager.runningChanged.disconnect(this._updateButton, this);
+        super.dispose();
+    }
+    _updateButton() {
+        var _a, _b;
+        const button = this._button;
+        button.enabled = this._manager.running().length > 0;
+        if (button.enabled) {
+            (_a = button.node.querySelector('button')) === null || _a === void 0 ? void 0 : _a.classList.remove('jp-mod-disabled');
+        }
+        else {
+            (_b = button.node.querySelector('button')) === null || _b === void 0 ? void 0 : _b.classList.add('jp-mod-disabled');
+        }
     }
-    return (React.createElement("div", { className: SECTION_CLASS },
-        React.createElement(React.Fragment, null,
-            React.createElement("div", { className: `${SECTION_HEADER_CLASS} jp-stack-panel-header` },
-                React.createElement("h2", null, props.manager.name),
-                React.createElement(UseSignal, { signal: props.manager.runningChanged }, () => {
-                    const disabled = props.manager.running().length === 0;
-                    return (React.createElement("button", { className: `${SHUTDOWN_ALL_BUTTON_CLASS} jp-mod-styled ${disabled && 'jp-mod-disabled'}`, disabled: disabled, onClick: onShutdown }, shutdownAllLabel));
-                })),
-            React.createElement("div", { className: CONTAINER_CLASS },
-                React.createElement(List, { manager: props.manager, shutdownLabel: props.manager.shutdownLabel, shutdownAllLabel: shutdownAllLabel, translator: props.translator })))));
-}
-function RunningSessionsComponent(props) {
-    const translator = props.translator || nullTranslator;
-    const trans = translator.load('jupyterlab');
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: HEADER_CLASS },
-            React.createElement(ToolbarButtonComponent, { tooltip: trans.__('Refresh List'), icon: refreshIcon, onClick: () => props.managers.items().forEach(manager => manager.refreshRunning()) })),
-        props.managers.items().map(manager => (React.createElement(Section, { key: manager.name, manager: manager, translator: props.translator })))));
 }
 /**
  * A class that exposes the running terminal and kernel sessions.
  */
-export class RunningSessions extends ReactWidget {
+export class RunningSessions extends SidePanel {
     /**
      * Construct a new running widget.
      */
     constructor(managers, translator) {
         super();
         this.managers = managers;
-        this.translator = translator || nullTranslator;
-        // this can't be in the react element, because then it would be too nested
+        this.translator = translator !== null && translator !== void 0 ? translator : nullTranslator;
+        const trans = this.translator.load('jupyterlab');
         this.addClass(RUNNING_CLASS);
+        this.toolbar.addItem('refresh', new ToolbarButton({
+            tooltip: trans.__('Refresh List'),
+            icon: refreshIcon,
+            onClick: () => managers.items().forEach(manager => manager.refreshRunning())
+        }));
+        managers.items().forEach(manager => this.addSection(managers, manager));
+        managers.added.connect(this.addSection, this);
     }
-    render() {
-        return (React.createElement(RunningSessionsComponent, { managers: this.managers, translator: this.translator }));
+    /**
+     * Dispose the resources held by the widget
+     */
+    dispose() {
+        if (this.isDisposed) {
+            return;
+        }
+        this.managers.added.disconnect(this.addSection, this);
+        super.dispose();
+    }
+    /**
+     * Add a section for a new manager.
+     *
+     * @param managers Managers
+     * @param manager New manager
+     */
+    addSection(_, manager) {
+        this.addWidget(new Section({ manager, translator: this.translator }));
     }
 }
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyterlab/running",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.21",
   "description": "JupyterLab - Running Sessions Panel",
   "homepage": "https://github.com/jupyterlab/jupyterlab",
   "bugs": {
@@ -27,7 +27,8 @@
     "lib/*.js.map",
     "lib/*.js",
     "style/*.css",
-    "style/index.js"
+    "style/index.js",
+    "src/**/*.{ts,tsx}"
   ],
   "scripts": {
     "build": "tsc -b",
@@ -36,18 +37,20 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
-    "@jupyterlab/apputils": "^4.0.0-alpha.2",
-    "@jupyterlab/translation": "^4.0.0-alpha.2",
-    "@jupyterlab/ui-components": "^4.0.0-alpha.17",
-    "@lumino/coreutils": "^1.11.1",
-    "@lumino/disposable": "^1.10.1",
-    "@lumino/signaling": "^1.10.1",
-    "react": "^17.0.1"
+    "@jupyterlab/apputils": "^4.0.0-alpha.21",
+    "@jupyterlab/translation": "^4.0.0-alpha.21",
+    "@jupyterlab/ui-components": "^4.0.0-alpha.36",
+    "@lumino/coreutils": "^2.0.0-rc.1",
+    "@lumino/disposable": "^2.0.0-rc.1",
+    "@lumino/messaging": "^2.0.0-rc.1",
+    "@lumino/signaling": "^2.0.0-rc.1",
+    "@lumino/widgets": "^2.0.0-rc.1",
+    "react": "^18.2.0"
   },
   "devDependencies": {
     "rimraf": "~3.0.0",
-    "typedoc": "~0.21.2",
-    "typescript": "~4.5.2"
+    "typedoc": "~0.23.25",
+    "typescript": "~5.0.1-rc"
   },
   "publishConfig": {
     "access": "public"

package/src/index.tsx

@@ -0,0 +1,585 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+/**
+ * @packageDocumentation
+ * @module running
+ */
+
+import { Dialog, showDialog } from '@jupyterlab/apputils';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import {
+  caretDownIcon,
+  caretRightIcon,
+  closeIcon,
+  LabIcon,
+  PanelWithToolbar,
+  ReactWidget,
+  refreshIcon,
+  SidePanel,
+  ToolbarButton,
+  ToolbarButtonComponent,
+  UseSignal
+} from '@jupyterlab/ui-components';
+import { Token } from '@lumino/coreutils';
+import { DisposableDelegate, IDisposable } from '@lumino/disposable';
+import { Message } from '@lumino/messaging';
+import { ISignal, Signal } from '@lumino/signaling';
+import { Widget } from '@lumino/widgets';
+import * as React from 'react';
+
+/**
+ * The class name added to a running widget.
+ */
+const RUNNING_CLASS = 'jp-RunningSessions';
+
+/**
+ * The class name added to the running terminal sessions section.
+ */
+const SECTION_CLASS = 'jp-RunningSessions-section';
+
+/**
+ * The class name added to a section container.
+ */
+const CONTAINER_CLASS = 'jp-RunningSessions-sectionContainer';
+
+/**
+ * The class name added to the running kernel sessions section list.
+ */
+const LIST_CLASS = 'jp-RunningSessions-sectionList';
+
+/**
+ * The class name added to the running sessions items.
+ */
+const ITEM_CLASS = 'jp-RunningSessions-item';
+
+/**
+ * The class name added to a running session item label.
+ */
+const ITEM_LABEL_CLASS = 'jp-RunningSessions-itemLabel';
+
+/**
+ * The class name added to a running session item detail.
+ */
+const ITEM_DETAIL_CLASS = 'jp-RunningSessions-itemDetail';
+
+/**
+ * The class name added to a running session item shutdown button.
+ */
+const SHUTDOWN_BUTTON_CLASS = 'jp-RunningSessions-itemShutdown';
+
+/**
+ * The class name added to a running session item shutdown button.
+ */
+const SHUTDOWN_ALL_BUTTON_CLASS = 'jp-RunningSessions-shutdownAll';
+
+/**
+ * The running sessions token.
+ */
+export const IRunningSessionManagers = new Token<IRunningSessionManagers>(
+  '@jupyterlab/running:IRunningSessionManagers'
+);
+
+/**
+ * The running interface.
+ */
+export interface IRunningSessionManagers {
+  /**
+   * Add a running item manager.
+   *
+   * @param manager - The running item manager.
+   *
+   */
+  add(manager: IRunningSessions.IManager): IDisposable;
+
+  /**
+   * Signal emitted when a new manager is added.
+   */
+  added: ISignal<IRunningSessionManagers, IRunningSessions.IManager>;
+
+  /**
+   * Return an array of managers.
+   */
+  items(): ReadonlyArray<IRunningSessions.IManager>;
+}
+
+export class RunningSessionManagers implements IRunningSessionManagers {
+  /**
+   * Signal emitted when a new manager is added.
+   */
+  get added(): ISignal<this, IRunningSessions.IManager> {
+    return this._added;
+  }
+
+  /**
+   * Add a running item manager.
+   *
+   * @param manager - The running item manager.
+   *
+   */
+  add(manager: IRunningSessions.IManager): IDisposable {
+    this._managers.push(manager);
+    this._added.emit(manager);
+    return new DisposableDelegate(() => {
+      const i = this._managers.indexOf(manager);
+
+      if (i > -1) {
+        this._managers.splice(i, 1);
+      }
+    });
+  }
+
+  /**
+   * Return an iterator of launcher items.
+   */
+  items(): ReadonlyArray<IRunningSessions.IManager> {
+    return this._managers;
+  }
+
+  private _added = new Signal<this, IRunningSessions.IManager>(this);
+  private _managers: IRunningSessions.IManager[] = [];
+}
+
+function Item(props: {
+  child?: boolean;
+  runningItem: IRunningSessions.IRunningItem;
+  shutdownLabel?: string;
+  shutdownItemIcon?: LabIcon;
+  translator?: ITranslator;
+}) {
+  const { runningItem } = props;
+  const classList = [ITEM_CLASS];
+  const detail = runningItem.detail?.();
+  const icon = runningItem.icon();
+  const title = runningItem.labelTitle ? runningItem.labelTitle() : '';
+  const translator = props.translator || nullTranslator;
+  const trans = translator.load('jupyterlab');
+
+  // Handle shutdown requests.
+  let stopPropagation = false;
+  const shutdownItemIcon = props.shutdownItemIcon || closeIcon;
+  const shutdownLabel = props.shutdownLabel || trans.__('Shut Down');
+  const shutdown = () => {
+    stopPropagation = true;
+    runningItem.shutdown?.();
+  };
+
+  // Manage collapsed state. Use the shutdown flag in lieu of `stopPropagation`.
+  const [collapsed, collapse] = React.useState(false);
+  const collapsible = !!runningItem.children?.length;
+  const onClick = collapsible
+    ? () => !stopPropagation && collapse(!collapsed)
+    : undefined;
+
+  if (runningItem.className) {
+    classList.push(runningItem.className);
+  }
+  if (props.child) {
+    classList.push('jp-mod-running-child');
+  }
+
+  return (
+    <>
+      <li>
+        <div
+          className={classList.join(' ')}
+          onClick={onClick}
+          data-context={runningItem.context || ''}
+        >
+          {collapsible &&
+            (collapsed ? (
+              <caretRightIcon.react tag="span" stylesheet="runningItem" />
+            ) : (
+              <caretDownIcon.react tag="span" stylesheet="runningItem" />
+            ))}
+          {typeof icon === 'string' ? (
+            icon ? (
+              <img src={icon} />
+            ) : undefined
+          ) : (
+            <icon.react tag="span" stylesheet="runningItem" />
+          )}
+          <span
+            className={ITEM_LABEL_CLASS}
+            title={title}
+            onClick={runningItem.open && (() => runningItem.open!())}
+          >
+            {runningItem.label()}
+          </span>
+          {detail && <span className={ITEM_DETAIL_CLASS}>{detail}</span>}
+          {runningItem.shutdown && (
+            <ToolbarButtonComponent
+              className={SHUTDOWN_BUTTON_CLASS}
+              icon={shutdownItemIcon}
+              onClick={shutdown}
+              tooltip={shutdownLabel}
+            />
+          )}
+        </div>
+        {collapsible && !collapsed && (
+          <List
+            child={true}
+            runningItems={runningItem.children!}
+            shutdownItemIcon={shutdownItemIcon}
+            translator={translator}
+          />
+        )}
+      </li>
+    </>
+  );
+}
+
+function List(props: {
+  child?: boolean;
+  runningItems: IRunningSessions.IRunningItem[];
+  shutdownLabel?: string;
+  shutdownAllLabel?: string;
+  shutdownItemIcon?: LabIcon;
+  translator?: ITranslator;
+}) {
+  return (
+    <ul className={LIST_CLASS}>
+      {props.runningItems.map((item, i) => (
+        <Item
+          child={props.child}
+          key={i}
+          runningItem={item}
+          shutdownLabel={props.shutdownLabel}
+          shutdownItemIcon={props.shutdownItemIcon}
+          translator={props.translator}
+        />
+      ))}
+    </ul>
+  );
+}
+
+class ListWidget extends ReactWidget {
+  constructor(
+    private _options: {
+      manager: IRunningSessions.IManager;
+      runningItems: IRunningSessions.IRunningItem[];
+      shutdownAllLabel: string;
+      translator?: ITranslator;
+    }
+  ) {
+    super();
+    _options.manager.runningChanged.connect(this._emitUpdate, this);
+  }
+
+  dispose() {
+    this._options.manager.runningChanged.disconnect(this._emitUpdate, this);
+    super.dispose();
+  }
+
+  protected onBeforeShow(msg: Message): void {
+    super.onBeforeShow(msg);
+    this._update.emit();
+  }
+
+  render(): JSX.Element {
+    const options = this._options;
+    let cached = true;
+    return (
+      <UseSignal signal={this._update}>
+        {() => {
+          // Cache the running items for the intial load and request from
+          // the service every subsequent load.
+          if (cached) {
+            cached = false;
+          } else {
+            options.runningItems = options.manager.running();
+          }
+          return (
+            <div className={CONTAINER_CLASS}>
+              <List
+                runningItems={options.runningItems}
+                shutdownLabel={options.manager.shutdownLabel}
+                shutdownAllLabel={options.shutdownAllLabel}
+                shutdownItemIcon={options.manager.shutdownItemIcon}
+                translator={options.translator}
+              />
+            </div>
+          );
+        }}
+      </UseSignal>
+    );
+  }
+
+  /**
+   * Check if the widget or any of it's parents is hidden.
+   *
+   * Checking parents is necessary as lumino does not propagate visibility
+   * changes from parents down to children (although it does notify parents
+   * about changes to children visibility).
+   */
+  private _isAnyHidden() {
+    let isHidden = this.isHidden;
+    if (isHidden) {
+      return isHidden;
+    }
+    let parent: Widget | null = this.parent;
+    while (parent != null) {
+      if (parent.isHidden) {
+        isHidden = true;
+        break;
+      }
+      parent = parent.parent;
+    }
+    return isHidden;
+  }
+
+  private _emitUpdate() {
+    if (this._isAnyHidden()) {
+      return;
+    }
+    this._update.emit();
+  }
+
+  private _update: Signal<ListWidget, void> = new Signal(this);
+}
+
+/**
+ * The Section component contains the shared look and feel for an interactive
+ * list of kernels and sessions.
+ *
+ * It is specialized for each based on its props.
+ */
+class Section extends PanelWithToolbar {
+  constructor(options: {
+    manager: IRunningSessions.IManager;
+    translator?: ITranslator;
+  }) {
+    super();
+    this._manager = options.manager;
+    const translator = options.translator || nullTranslator;
+    const trans = translator.load('jupyterlab');
+    const shutdownAllLabel =
+      options.manager.shutdownAllLabel || trans.__('Shut Down All');
+    const shutdownTitle = `${shutdownAllLabel}?`;
+    const shutdownAllConfirmationText =
+      options.manager.shutdownAllConfirmationText ||
+      `${shutdownAllLabel} ${options.manager.name}`;
+
+    this.addClass(SECTION_CLASS);
+    this.title.label = options.manager.name;
+
+    function onShutdown() {
+      void showDialog({
+        title: shutdownTitle,
+        body: shutdownAllConfirmationText,
+        buttons: [
+          Dialog.cancelButton(),
+          Dialog.warnButton({ label: shutdownAllLabel })
+        ]
+      }).then(result => {
+        if (result.button.accept) {
+          options.manager.shutdownAll();
+        }
+      });
+    }
+
+    let runningItems = options.manager.running();
+    const enabled = runningItems.length > 0;
+    this._button = new ToolbarButton({
+      label: shutdownAllLabel,
+      className: `${SHUTDOWN_ALL_BUTTON_CLASS} jp-mod-styled ${
+        !enabled && 'jp-mod-disabled'
+      }`,
+      enabled,
+      onClick: onShutdown
+    });
+    this._manager.runningChanged.connect(this._updateButton, this);
+
+    this.toolbar.addItem('shutdown-all', this._button);
+
+    this.addWidget(
+      new ListWidget({ runningItems, shutdownAllLabel, ...options })
+    );
+  }
+
+  /**
+   * Dispose the resources held by the widget
+   */
+  dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    this._manager.runningChanged.disconnect(this._updateButton, this);
+    super.dispose();
+  }
+
+  private _updateButton(): void {
+    const button = this._button;
+    button.enabled = this._manager.running().length > 0;
+    if (button.enabled) {
+      button.node.querySelector('button')?.classList.remove('jp-mod-disabled');
+    } else {
+      button.node.querySelector('button')?.classList.add('jp-mod-disabled');
+    }
+  }
+
+  private _button: ToolbarButton;
+  private _manager: IRunningSessions.IManager;
+}
+
+/**
+ * A class that exposes the running terminal and kernel sessions.
+ */
+export class RunningSessions extends SidePanel {
+  /**
+   * Construct a new running widget.
+   */
+  constructor(managers: IRunningSessionManagers, translator?: ITranslator) {
+    super();
+    this.managers = managers;
+    this.translator = translator ?? nullTranslator;
+    const trans = this.translator.load('jupyterlab');
+
+    this.addClass(RUNNING_CLASS);
+
+    this.toolbar.addItem(
+      'refresh',
+      new ToolbarButton({
+        tooltip: trans.__('Refresh List'),
+        icon: refreshIcon,
+        onClick: () =>
+          managers.items().forEach(manager => manager.refreshRunning())
+      })
+    );
+
+    managers.items().forEach(manager => this.addSection(managers, manager));
+
+    managers.added.connect(this.addSection, this);
+  }
+
+  /**
+   * Dispose the resources held by the widget
+   */
+  dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    this.managers.added.disconnect(this.addSection, this);
+    super.dispose();
+  }
+
+  /**
+   * Add a section for a new manager.
+   *
+   * @param managers Managers
+   * @param manager New manager
+   */
+  protected addSection(_: unknown, manager: IRunningSessions.IManager) {
+    this.addWidget(new Section({ manager, translator: this.translator }));
+  }
+
+  protected managers: IRunningSessionManagers;
+  protected translator: ITranslator;
+}
+
+/**
+ * The namespace for the `IRunningSessions` class statics.
+ */
+export namespace IRunningSessions {
+  /**
+   * A manager of running items grouped under a single section.
+   */
+  export interface IManager {
+    /**
+     * Name that is shown to the user in plural.
+     */
+    name: string;
+
+    /**
+     * Called when the shutdown all button is pressed.
+     */
+    shutdownAll(): void;
+
+    /**
+     * List the running models.
+     */
+    running(): IRunningItem[];
+
+    /**
+     * Force a refresh of the running models.
+     */
+    refreshRunning(): void;
+
+    /**
+     * A signal that should be emitted when the item list has changed.
+     */
+    runningChanged: ISignal<any, any>;
+
+    /**
+     * A string used to describe the shutdown action.
+     */
+    shutdownLabel?: string;
+
+    /**
+     * A string used to describe the shutdown all action.
+     */
+    shutdownAllLabel?: string;
+
+    /**
+     * A string used as the body text in the shutdown all confirmation dialog.
+     */
+    shutdownAllConfirmationText?: string;
+
+    /**
+     * The icon to show for shutting down an individual item in this section.
+     */
+    shutdownItemIcon?: LabIcon;
+  }
+
+  /**
+   * A running item.
+   */
+  export interface IRunningItem {
+    /**
+     * Optional child nodes that belong to a top-level running item.
+     */
+    children?: IRunningItem[];
+
+    /**
+     * Optional CSS class name to add to the running item.
+     */
+    className?: string;
+
+    /**
+     * Optional context hint to add to the `data-context` attribute of an item.
+     */
+    context?: string;
+
+    /**
+     * Called when the running item is clicked.
+     */
+    open?: () => void;
+
+    /**
+     * Called when the shutdown button is pressed on a particular item.
+     */
+    shutdown?: () => void;
+
+    /**
+     * The `LabIcon` to use as the icon for the running item or the string
+     * `src` URL.
+     */
+    icon: () => LabIcon | string;
+
+    /**
+     * Called to determine the label for each item.
+     */
+    label: () => string;
+
+    /**
+     * Called to determine the `title` attribute for each item, which is
+     * revealed on hover.
+     */
+    labelTitle?: () => string;
+
+    /**
+     * Called to determine the `detail` attribute, which is shown optionally in
+     * a column after the label.
+     */
+    detail?: () => string;
+  }
+}

package/style/base.css

@@ -1,12 +1,14 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
 /*-----------------------------------------------------------------------------
 | Variables
 |----------------------------------------------------------------------------*/
 
 :root {
-  --jp-private-running-button-height: 28px;
-  --jp-private-running-button-width: 48px;
   --jp-private-running-item-height: 24px;
-  --jp-private-running-shutdown-button-height: 24px;
 }
 
 /*-----------------------------------------------------------------------------
@@ -20,57 +22,29 @@
   min-width: var(--jp-sidebar-min-width);
   color: var(--jp-ui-font-color1);
   background: var(--jp-layout-color1);
+
   /* This is needed so that all font sizing of children done in ems is
    * relative to this base size */
   font-size: var(--jp-ui-font-size1);
 }
 
-.jp-RunningSessions-header {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: row;
+.jp-RunningSessions > .jp-SidePanel-toolbar {
   justify-content: flex-end;
 }
 
 .jp-RunningSessions-section {
-  display: flex;
-  flex: 0 1 auto;
-  flex-direction: column;
+  min-height: 50px;
   overflow: auto;
 }
 
-.jp-RunningSessions-sectionHeader {
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: space-between;
-  height: 28px;
-  display: flex;
-  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
-  margin-top: 8px;
-}
-
-.jp-RunningSessions-sectionHeader h2 {
-  flex: 0 0 auto;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  font-size: var(--jp-ui-font-size0);
-  padding: 8px 8px 8px 12px;
-  margin: 0px;
-}
-
-.jp-RunningSessions-sectionHeader .jp-ToolbarButtonComponent {
-  flex: 0 0 auto;
-}
-
 .jp-RunningSessions-sectionContainer {
-  flex: 1 1 auto;
   margin: 0;
   padding: 0;
   overflow: auto;
 }
 
 .jp-RunningSessions-sectionList {
+  display: block;
   margin: 0;
   padding: 0;
   list-style-type: none;
@@ -82,17 +56,26 @@
   color: var(--jp-ui-font-color1);
   height: var(--jp-private-running-item-height);
   line-height: var(--jp-private-running-item-height);
-  padding: 0 8px 0 8px;
+  padding: 0 8px;
 }
 
 .jp-RunningSessions-item:hover {
   background-color: var(--jp-layout-color2);
 }
 
+.jp-RunningSessions-item.jp-mod-running-child {
+  padding-left: 40px;
+}
+
+.jp-RunningSessions-item img {
+  height: 16px;
+  margin-top: 4px;
+}
+
 .jp-RunningSessions-itemLabel {
   font-size: var(--jp-ui-font-size1);
   flex: 1 1 55%;
-  padding: 0 4px 0 4px;
+  padding: 0 4px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -105,19 +88,18 @@
 .jp-RunningSessions-itemDetail {
   font-size: var(--jp-ui-font-size1);
   flex: 1 1 45%;
-  padding: 0 4px 0 4px;
+  padding: 0 4px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
 
 .jp-RunningSessions-item .jp-RunningSessions-itemShutdown {
-  border-radius: 0px;
+  border-radius: 0;
 }
 
 .jp-RunningSessions-item:not(:hover) .jp-RunningSessions-itemShutdown {
   visibility: hidden;
-  /* display: none; */
 }
 
 .jp-RunningSessions-sectionList
@@ -126,32 +108,34 @@
   background: var(--jp-layout-color3);
 }
 
-.jp-RunningSessions-shutdownAll.jp-mod-styled {
-  margin: 0px 8px;
+.jp-RunningSessions-shutdownAll.jp-mod-styled
+  > .jp-ToolbarButtonComponent-label {
   color: var(--jp-warn-color1);
   background-color: transparent;
-  height: var(--jp-private-running-shutdown-button-height);
-  line-height: var(--jp-private-running-shutdown-button-height);
   border-radius: 2px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.jp-RunningSessions-shutdownAll.jp-mod-styled:hover {
+.jp-RunningSessions-shutdownAll.jp-mod-styled:hover
+  > .jp-ToolbarButtonComponent-label {
   background-color: var(--jp-layout-color2);
 }
 
-.jp-RunningSessions-shutdownAll.jp-mod-styled:focus {
+.jp-RunningSessions-shutdownAll.jp-mod-styled:focus
+  > .jp-ToolbarButtonComponent-label {
   border: none;
   box-shadow: none;
   background-color: var(--jp-layout-color2);
 }
 
-.jp-RunningSessions-shutdownAll.jp-mod-styled.jp-mod-disabled {
+.jp-RunningSessions-shutdownAll.jp-mod-styled.jp-mod-disabled
+  > .jp-ToolbarButtonComponent-label {
   color: var(--jp-ui-font-color2);
 }
 
-.jp-RunningSessions-shutdownAll.jp-mod-styled.jp-mod-disabled:hover {
+.jp-RunningSessions-shutdownAll.jp-mod-styled.jp-mod-disabled:hover
+  > .jp-ToolbarButtonComponent-label {
   background: none;
 }

package/style/index.css

@@ -4,6 +4,7 @@
 |----------------------------------------------------------------------------*/
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+@import url('~@lumino/widgets/style/index.css');
 @import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 

package/style/index.js

@@ -4,6 +4,7 @@
 |----------------------------------------------------------------------------*/
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+import '@lumino/widgets/style/index.js';
 import '@jupyterlab/ui-components/style/index.js';
 import '@jupyterlab/apputils/style/index.js';