@jupyterlab/running 4.2.0-alpha.0 → 4.2.0-alpha.2

package/lib/index.js

@@ -6,15 +6,21 @@
  */
 import { Dialog, showDialog } from '@jupyterlab/apputils';
 import { nullTranslator } from '@jupyterlab/translation';
-import { caretDownIcon, caretRightIcon, closeIcon, PanelWithToolbar, ReactWidget, refreshIcon, SidePanel, ToolbarButton, ToolbarButtonComponent, UseSignal } from '@jupyterlab/ui-components';
+import { caretDownIcon, caretRightIcon, closeIcon, collapseAllIcon, expandAllIcon, FilterBox, PanelWithToolbar, ReactWidget, refreshIcon, SidePanel, tableRowsIcon, ToolbarButton, ToolbarButtonComponent, treeViewIcon, UseSignal } from '@jupyterlab/ui-components';
 import { Token } from '@lumino/coreutils';
 import { DisposableDelegate } from '@lumino/disposable';
+import { ElementExt } from '@lumino/domutils';
 import { Signal } from '@lumino/signaling';
-import * as React from 'react';
+import { Panel, Widget } from '@lumino/widgets';
+import React, { isValidElement } from 'react';
 /**
  * The class name added to a running widget.
  */
 const RUNNING_CLASS = 'jp-RunningSessions';
+/**
+ * The class name added to a searchable widget.
+ */
+const SEARCHABLE_CLASS = 'jp-SearchableSessions';
 /**
  * The class name added to the running terminal sessions section.
  */
@@ -48,9 +54,37 @@ const SHUTDOWN_BUTTON_CLASS = 'jp-RunningSessions-itemShutdown';
  */
 const SHUTDOWN_ALL_BUTTON_CLASS = 'jp-RunningSessions-shutdownAll';
 /**
- * The running sessions token.
+ * The class name added to a collapse/expand carets.
+ */
+const CARET_CLASS = 'jp-RunningSessions-caret';
+/**
+ * The class name added to icons.
+ */
+const ITEM_ICON_CLASS = 'jp-RunningSessions-icon';
+/**
+ * Modifier added to a section when flattened list view is requested.
+ */
+const LIST_VIEW_CLASS = 'jp-mod-running-list-view';
+/**
+ * The class name added to button switching between nested and flat view.
+ */
+const VIEW_BUTTON_CLASS = 'jp-RunningSessions-viewButton';
+/**
+ * The class name added to button switching between nested and flat view.
+ */
+const COLLAPSE_EXPAND_BUTTON_CLASS = 'jp-RunningSessions-collapseButton';
+/**
+ * Identifier used in the state database.
+ */
+const STATE_DB_ID = 'jp-running-sessions';
+/**
+ * The running sessions managers token.
  */
 export const IRunningSessionManagers = new Token('@jupyterlab/running:IRunningSessionManagers', 'A service to add running session managers.');
+/**
+ * The running sessions token.
+ */
+export const IRunningSessionSidebar = new Token('@jupyterlab/running:IRunningSessionsSidebar', 'A token allowing to modify the running sessions sidebar.');
 export class RunningSessionManagers {
     constructor() {
         this._added = new Signal(this);
@@ -97,37 +131,112 @@ function Item(props) {
     // Handle shutdown requests.
     let stopPropagation = false;
     const shutdownItemIcon = props.shutdownItemIcon || closeIcon;
-    const shutdownLabel = props.shutdownLabel || trans.__('Shut Down');
+    const shutdownLabel = (_b = (typeof props.shutdownLabel === 'function'
+        ? props.shutdownLabel(runningItem)
+        : props.shutdownLabel)) !== null && _b !== void 0 ? _b : trans.__('Shut Down');
     const shutdown = () => {
         var _a;
         stopPropagation = true;
         (_a = runningItem.shutdown) === null || _a === void 0 ? void 0 : _a.call(runningItem);
     };
+    // Materialise getter to avoid triggering it repeatedly
+    const children = runningItem.children;
     // 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 collapsible = !!(children === null || children === void 0 ? void 0 : children.length);
     const onClick = collapsible
         ? () => !stopPropagation && collapse(!collapsed)
         : undefined;
+    // Listen to signal to collapse from outside
+    props.collapseToggled.connect((_emitter, newCollapseState) => collapse(newCollapseState));
     if (runningItem.className) {
         classList.push(runningItem.className);
     }
     if (props.child) {
         classList.push('jp-mod-running-child');
     }
+    if (props.child && !children) {
+        classList.push('jp-mod-running-leaf');
+    }
     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" }))),
-                icon ? (typeof icon === 'string' ? (React.createElement("img", { src: icon })) : (React.createElement(icon.react, { tag: "span", stylesheet: "runningItem" }))) : undefined,
+                    (collapsed ? (React.createElement(caretRightIcon.react, { tag: "span", className: CARET_CLASS })) : (React.createElement(caretDownIcon.react, { tag: "span", className: CARET_CLASS }))),
+                icon ? (typeof icon === 'string' ? (React.createElement("img", { src: icon, className: ITEM_ICON_CLASS })) : (React.createElement(icon.react, { tag: "span", className: ITEM_ICON_CLASS }))) : undefined,
                 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 })))));
+            collapsible && !collapsed && (React.createElement(List, { child: true, runningItems: children, shutdownItemIcon: shutdownItemIcon, translator: translator, collapseToggled: props.collapseToggled })))));
 }
 function List(props) {
-    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 })))));
+    const filter = props.filter;
+    const items = filter
+        ? props.runningItems
+            .map(item => {
+            return {
+                item,
+                score: filter(item)
+            };
+        })
+            .filter(({ score }) => score !== null)
+            .sort((a, b) => {
+            return a.score.score - b.score.score;
+        })
+            .map(({ item }) => item)
+        : props.runningItems;
+    return (React.createElement("ul", { className: LIST_CLASS }, items.map((item, i) => (React.createElement(Item, { child: props.child, key: i, runningItem: item, shutdownLabel: props.shutdownLabel, shutdownItemIcon: props.shutdownItemIcon, translator: props.translator, collapseToggled: props.collapseToggled })))));
+}
+class FilterWidget extends ReactWidget {
+    constructor(translator) {
+        super();
+        this._filterFn = (_) => {
+            return { score: 0 };
+        };
+        this._filterChanged = new Signal(this);
+        this.filter = this.filter.bind(this);
+        this._updateFilter = this._updateFilter.bind(this);
+        this._trans = translator.load('jupyterlab');
+        this.addClass('jp-SearchableSessions-filter');
+    }
+    get filterChanged() {
+        return this._filterChanged;
+    }
+    render() {
+        return (React.createElement(FilterBox, { placeholder: this._trans.__('Search'), updateFilter: this._updateFilter, useFuzzyFilter: false, caseSensitive: false }));
+    }
+    filter(item) {
+        var _a;
+        const labels = [this._getTextContent(item.label())];
+        for (const child of (_a = item.children) !== null && _a !== void 0 ? _a : []) {
+            labels.push(this._getTextContent(child.label()));
+        }
+        return this._filterFn(labels.join(' '));
+    }
+    _getTextContent(node) {
+        if (typeof node === 'string') {
+            return node;
+        }
+        if (typeof node === 'number') {
+            return '' + node;
+        }
+        if (typeof node === 'boolean') {
+            return '' + node;
+        }
+        if (Array.isArray(node)) {
+            return node.map(n => this._getTextContent(n)).join(' ');
+        }
+        if (node && isValidElement(node)) {
+            return node.props.children
+                .map((n) => this._getTextContent(n))
+                .join(' ');
+        }
+        return '';
+    }
+    _updateFilter(filterFn) {
+        this._filterFn = filterFn;
+        this._filterChanged.emit();
+    }
 }
 class ListWidget extends ReactWidget {
     constructor(_options) {
@@ -135,9 +244,12 @@ class ListWidget extends ReactWidget {
         this._options = _options;
         this._update = new Signal(this);
         _options.manager.runningChanged.connect(this._emitUpdate, this);
+        if (_options.filterProvider) {
+            _options.filterProvider.filterChanged.connect(this._emitUpdate, this);
+        }
     }
     dispose() {
-        this._options.manager.runningChanged.disconnect(this._emitUpdate, this);
+        Signal.clearData(this);
         super.dispose();
     }
     onBeforeShow(msg) {
@@ -148,7 +260,8 @@ class ListWidget extends ReactWidget {
         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
+            var _a;
+            // Cache the running items for the initial load and request from
             // the service every subsequent load.
             if (cached) {
                 cached = false;
@@ -157,7 +270,7 @@ class ListWidget extends ReactWidget {
                 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 })));
+                React.createElement(List, { runningItems: options.runningItems, shutdownLabel: options.manager.shutdownLabel, shutdownAllLabel: options.shutdownAllLabel, shutdownItemIcon: options.manager.shutdownItemIcon, filter: (_a = options.filterProvider) === null || _a === void 0 ? void 0 : _a.filter, translator: options.translator, collapseToggled: options.collapseToggled })));
         }));
     }
     /**
@@ -198,15 +311,66 @@ class ListWidget extends ReactWidget {
 class Section extends PanelWithToolbar {
     constructor(options) {
         super();
+        this._buttons = null;
+        this._listView = false;
+        this._collapseToggled = new Signal(this);
+        this._viewChanged = new Signal(this);
         this._manager = options.manager;
+        this._filterProvider = options.filterProvider;
         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._trans = translator.load('jupyterlab');
         this.addClass(SECTION_CLASS);
         this.title.label = options.manager.name;
+        this._manager.runningChanged.connect(this._onListChanged, this);
+        if (options.filterProvider) {
+            options.filterProvider.filterChanged.connect(this._onListChanged, this);
+        }
+        this._updateEmptyClass();
+        let runningItems = options.manager.running();
+        if (options.showToolbar !== false) {
+            this._initializeToolbar(runningItems);
+        }
+        this.addWidget(new ListWidget({
+            runningItems,
+            shutdownAllLabel: this._shutdownAllLabel,
+            collapseToggled: this._collapseToggled,
+            ...options
+        }));
+    }
+    /**
+     * Toggle between list and tree view.
+     */
+    toggleListView(forceOn) {
+        const newState = typeof forceOn !== 'undefined' ? forceOn : !this._listView;
+        this._listView = newState;
+        if (this._buttons) {
+            const switchViewButton = this._buttons['switch-view'];
+            switchViewButton.pressed = newState;
+        }
+        this._collapseToggled.emit(false);
+        this.toggleClass(LIST_VIEW_CLASS, newState);
+        this._updateButtons();
+        this._viewChanged.emit({ mode: newState ? 'list' : 'tree' });
+    }
+    /**
+     * Dispose the resources held by the widget
+     */
+    dispose() {
+        if (this.isDisposed) {
+            return;
+        }
+        Signal.clearData(this);
+        super.dispose();
+    }
+    get _shutdownAllLabel() {
+        return this._manager.shutdownAllLabel || this._trans.__('Shut Down All');
+    }
+    _initializeToolbar(runningItems) {
+        const enabled = runningItems.length > 0;
+        const shutdownAllLabel = this._shutdownAllLabel;
+        const shutdownTitle = `${shutdownAllLabel}?`;
+        const shutdownAllConfirmationText = this._manager.shutdownAllConfirmationText ||
+            `${shutdownAllLabel} ${this._manager.name}`;
         function onShutdown() {
             void showDialog({
                 title: shutdownTitle,
@@ -217,43 +381,87 @@ class Section extends PanelWithToolbar {
                 ]
             }).then(result => {
                 if (result.button.accept) {
-                    options.manager.shutdownAll();
+                    this._manager.shutdownAll();
                 }
             });
         }
-        let runningItems = options.manager.running();
-        const enabled = runningItems.length > 0;
-        this._button = new ToolbarButton({
+        const shutdownAllButton = new ToolbarButton({
             label: shutdownAllLabel,
             className: `${SHUTDOWN_ALL_BUTTON_CLASS}${!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;
+        const switchViewButton = new ToolbarButton({
+            className: VIEW_BUTTON_CLASS,
+            enabled,
+            icon: tableRowsIcon,
+            pressedIcon: treeViewIcon,
+            onClick: () => this.toggleListView(),
+            tooltip: this._trans.__('Switch to List View'),
+            pressedTooltip: this._trans.__('Switch to Tree View')
+        });
+        const collapseExpandAllButton = new ToolbarButton({
+            className: COLLAPSE_EXPAND_BUTTON_CLASS,
+            enabled,
+            icon: collapseAllIcon,
+            pressedIcon: expandAllIcon,
+            onClick: () => {
+                const newState = !collapseExpandAllButton.pressed;
+                this._collapseToggled.emit(newState);
+                collapseExpandAllButton.pressed = newState;
+            },
+            tooltip: this._trans.__('Collapse All'),
+            pressedTooltip: this._trans.__('Expand All')
+        });
+        this._buttons = {
+            'switch-view': switchViewButton,
+            'collapse-expand': collapseExpandAllButton,
+            'shutdown-all': shutdownAllButton
+        };
+        // Update buttons once defined and before adding to DOM
+        this._updateButtons();
+        this._manager.runningChanged.connect(this._updateButtons, this);
+        for (const name of ['collapse-expand', 'switch-view', 'shutdown-all']) {
+            this.toolbar.addItem(name, this._buttons[name]);
         }
-        this._manager.runningChanged.disconnect(this._updateButton, this);
-        super.dispose();
+        this.toolbar.addClass('jp-RunningSessions-toolbar');
+    }
+    _onListChanged() {
+        this._updateButtons();
+        this._updateEmptyClass();
     }
-    _updateButton() {
-        var _a, _b;
-        const button = this._button;
-        button.enabled = this._manager.running().length > 0;
-        if (button.enabled) {
-            (_a = button.node
-                .querySelector('jp-button')) === null || _a === void 0 ? void 0 : _a.classList.remove('jp-mod-disabled');
+    _updateEmptyClass() {
+        if (this._filterProvider) {
+            const items = this._manager.running().filter(this._filterProvider.filter);
+            const empty = items.length === 0;
+            if (empty) {
+                this.node.classList.toggle('jp-mod-empty', true);
+            }
+            else {
+                this.node.classList.toggle('jp-mod-empty', false);
+            }
         }
-        else {
-            (_b = button.node.querySelector('jp-button')) === null || _b === void 0 ? void 0 : _b.classList.add('jp-mod-disabled');
+    }
+    get viewChanged() {
+        return this._viewChanged;
+    }
+    _updateButtons() {
+        if (!this._buttons) {
+            return;
         }
+        let runningItems = this._manager.running();
+        const enabled = runningItems.length > 0;
+        const hasNesting = runningItems.filter(item => item.children).length !== 0;
+        const inTreeView = hasNesting && !this._buttons['switch-view'].pressed;
+        this._buttons['switch-view'].node.style.display = hasNesting
+            ? 'block'
+            : 'none';
+        this._buttons['collapse-expand'].node.style.display = inTreeView
+            ? 'block'
+            : 'none';
+        this._buttons['collapse-expand'].enabled = enabled;
+        this._buttons['switch-view'].enabled = enabled;
+        this._buttons['shutdown-all'].enabled = enabled;
     }
 }
 /**
@@ -263,9 +471,10 @@ export class RunningSessions extends SidePanel {
     /**
      * Construct a new running widget.
      */
-    constructor(managers, translator) {
+    constructor(managers, translator, stateDB) {
         super();
         this.managers = managers;
+        this._stateDB = stateDB !== null && stateDB !== void 0 ? stateDB : null;
         this.translator = translator !== null && translator !== void 0 ? translator : nullTranslator;
         const trans = this.translator.load('jupyterlab');
         this.addClass(RUNNING_CLASS);
@@ -287,6 +496,225 @@ export class RunningSessions extends SidePanel {
         this.managers.added.disconnect(this.addSection, this);
         super.dispose();
     }
+    /**
+     * Add a section for a new manager.
+     *
+     * @param managers Managers
+     * @param manager New manager
+     */
+    async addSection(_, manager) {
+        const section = new Section({ manager, translator: this.translator });
+        this.addWidget(section);
+        const state = await this._getState();
+        const sectionsInListView = state.listViewSections;
+        const sectionId = manager.name;
+        if (sectionsInListView && sectionsInListView.includes(sectionId)) {
+            section.toggleListView(true);
+        }
+        section.viewChanged.connect(async (_emitter, viewState) => {
+            await this._updateState(sectionId, viewState.mode);
+        });
+    }
+    /**
+     * Update state database with the new state of a given section.
+     */
+    async _updateState(sectionId, mode) {
+        var _a;
+        const state = await this._getState();
+        let listViewSections = (_a = state.listViewSections) !== null && _a !== void 0 ? _a : [];
+        if (mode === 'list' && !listViewSections.includes(sectionId)) {
+            listViewSections.push(sectionId);
+        }
+        else {
+            listViewSections = listViewSections.filter(e => e !== sectionId);
+        }
+        const newState = { listViewSections };
+        if (this._stateDB) {
+            await this._stateDB.save(STATE_DB_ID, newState);
+        }
+    }
+    /**
+     * Get current state from the state database.
+     */
+    async _getState() {
+        var _a;
+        if (!this._stateDB) {
+            return {};
+        }
+        return ((_a = (await this._stateDB.fetch(STATE_DB_ID))) !== null && _a !== void 0 ? _a : {});
+    }
+}
+/**
+ * Section but rendering its own title before the content
+ */
+class TitledSection extends Section {
+    constructor(options) {
+        super(options);
+        const titleNode = document.createElement('h3');
+        titleNode.className = 'jp-SearchableSessions-title';
+        const label = titleNode.appendChild(document.createElement('span'));
+        label.className = 'jp-SearchableSessions-titleLabel';
+        label.textContent = this.title.label;
+        this.node.insertAdjacentElement('afterbegin', titleNode);
+    }
+}
+class EmptyIndicator extends Widget {
+    constructor(translator) {
+        super();
+        const trans = translator.load('jupyterlab');
+        this.addClass('jp-SearchableSessions-emptyIndicator');
+        this.node.textContent = trans.__('No matches');
+    }
+}
+/**
+ * A panel intended for use within `Dialog` to allow searching tabs and running sessions.
+ */
+export class SearchableSessions extends Panel {
+    constructor(managers, translator) {
+        super();
+        this._activeIndex = 0;
+        this._translator = translator !== null && translator !== void 0 ? translator : nullTranslator;
+        this.addClass(RUNNING_CLASS);
+        this.addClass(SEARCHABLE_CLASS);
+        this._filterWidget = new FilterWidget(this._translator);
+        this.addWidget(this._filterWidget);
+        this._list = new SearchableSessionsList(managers, this._filterWidget, translator);
+        this.addWidget(this._list);
+        this._filterWidget.filterChanged.connect(() => {
+            this._activeIndex = 0;
+            this._updateActive(0);
+        }, this);
+    }
+    /**
+     * Dispose the resources held by the widget
+     */
+    dispose() {
+        if (this.isDisposed) {
+            return;
+        }
+        Signal.clearData(this);
+        super.dispose();
+    }
+    /**
+     * Click active element when the user confirmed the choice in the dialog.
+     */
+    getValue() {
+        const items = [
+            ...this.node.querySelectorAll('.' + ITEM_LABEL_CLASS)
+        ];
+        const pos = Math.min(Math.max(this._activeIndex, 0), items.length - 1);
+        items[pos].click();
+    }
+    /**
+     * Handle incoming events.
+     */
+    handleEvent(event) {
+        switch (event.type) {
+            case 'keydown':
+                this._evtKeydown(event);
+                break;
+        }
+    }
+    /**
+     * A message handler invoked on an `'after-attach'` message.
+     */
+    onAfterAttach(_) {
+        this._forceFocusInput();
+        this.node.addEventListener('keydown', this);
+        setTimeout(() => {
+            this._updateActive(0);
+        }, 0);
+    }
+    /**
+     * A message handler invoked on an `'after-detach'` message.
+     */
+    onAfterDetach(_) {
+        this.node.removeEventListener('keydown', this);
+    }
+    /**
+     * Force focus on the filter input.
+     *
+     * Note: forces focus because this widget is intended to be used in `Dialog`,
+     * which does not support focusing React widget nested within a non-React
+     * widget (a limitation of `focusNodeSelector` option implementation).
+     */
+    _forceFocusInput() {
+        var _a;
+        (_a = this._filterWidget.renderPromise) === null || _a === void 0 ? void 0 : _a.then(() => {
+            var _a;
+            (_a = this._filterWidget.node.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
+        }).catch(console.warn);
+    }
+    /**
+     * Navigate between items using up/down keys by shifting focus.
+     */
+    _evtKeydown(event) {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            const direction = event.key === 'ArrowDown' ? +1 : -1;
+            const wasSet = this._updateActive(direction);
+            if (wasSet) {
+                event.preventDefault();
+            }
+        }
+    }
+    /**
+     * Set and mark active item relative to the current.
+     *
+     * Returns whether an active item was set.
+     */
+    _updateActive(direction) {
+        const items = [...this.node.querySelectorAll('.' + ITEM_CLASS)].filter(e => e.checkVisibility());
+        if (!items.length) {
+            return false;
+        }
+        for (const item of items) {
+            if (item.classList.contains('jp-mod-active')) {
+                item.classList.toggle('jp-mod-active', false);
+            }
+        }
+        const currentIndex = this._activeIndex;
+        let newIndex = null;
+        if (currentIndex === -1) {
+            // First or last
+            newIndex = direction === +1 ? 0 : items.length - 1;
+        }
+        else {
+            newIndex = Math.min(Math.max(currentIndex + direction, 0), items.length - 1);
+        }
+        if (newIndex !== null) {
+            items[newIndex].classList.add('jp-mod-active');
+            ElementExt.scrollIntoViewIfNeeded(this._list.node, items[newIndex]);
+            this._activeIndex = newIndex;
+            return true;
+        }
+        return false;
+    }
+}
+/**
+ * A panel list of searchable sessions.
+ */
+export class SearchableSessionsList extends Panel {
+    constructor(managers, filterWidget, translator) {
+        super();
+        this._managers = managers;
+        this._translator = translator !== null && translator !== void 0 ? translator : nullTranslator;
+        this._filterWidget = filterWidget;
+        this.addClass('jp-SearchableSessions-list');
+        this._emptyIndicator = new EmptyIndicator(this._translator);
+        this.addWidget(this._emptyIndicator);
+        managers.items().forEach(manager => this.addSection(managers, manager));
+        managers.added.connect(this.addSection, this);
+    }
+    /**
+     * 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.
      *
@@ -294,7 +722,17 @@ export class RunningSessions extends SidePanel {
      * @param manager New manager
      */
     addSection(_, manager) {
-        this.addWidget(new Section({ manager, translator: this.translator }));
+        const section = new TitledSection({
+            manager,
+            translator: this._translator,
+            showToolbar: false,
+            filterProvider: this._filterWidget
+        });
+        // Do not use tree view in searchable list
+        section.toggleListView(true);
+        this.addWidget(section);
+        // Move empty indicator to the end
+        this.addWidget(this._emptyIndicator);
     }
 }
 //# sourceMappingURL=index.js.map