@jupyterlab/running 4.2.0-alpha.1 → 4.2.0-beta.0

package/src/index.tsx

@@ -6,32 +6,50 @@
  */
 
 import { Dialog, showDialog } from '@jupyterlab/apputils';
-import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import {
+  ITranslator,
+  nullTranslator,
+  TranslationBundle
+} from '@jupyterlab/translation';
 import {
   caretDownIcon,
   caretRightIcon,
   closeIcon,
+  collapseAllIcon,
+  expandAllIcon,
+  FilterBox,
+  IScore,
   LabIcon,
   PanelWithToolbar,
   ReactWidget,
   refreshIcon,
   SidePanel,
+  tableRowsIcon,
+  Toolbar,
   ToolbarButton,
   ToolbarButtonComponent,
+  treeViewIcon,
   UseSignal
 } from '@jupyterlab/ui-components';
+import { IStateDB } from '@jupyterlab/statedb';
 import { Token } from '@lumino/coreutils';
 import { DisposableDelegate, IDisposable } from '@lumino/disposable';
+import { ElementExt } from '@lumino/domutils';
 import { Message } from '@lumino/messaging';
 import { ISignal, Signal } from '@lumino/signaling';
-import { Widget } from '@lumino/widgets';
-import * as React from 'react';
+import { Panel, Widget } from '@lumino/widgets';
+import React, { isValidElement, ReactNode } 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.
  */
@@ -73,13 +91,51 @@ 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<IRunningSessionManagers>(
   '@jupyterlab/running:IRunningSessionManagers',
   'A service to add running session managers.'
 );
 
+/**
+ * The running sessions token.
+ */
+export const IRunningSessionSidebar = new Token<IRunningSessionSidebar>(
+  '@jupyterlab/running:IRunningSessionsSidebar',
+  'A token allowing to modify the running sessions sidebar.'
+);
+
 /**
  * The running interface.
  */
@@ -143,9 +199,10 @@ export class RunningSessionManagers implements IRunningSessionManagers {
 function Item(props: {
   child?: boolean;
   runningItem: IRunningSessions.IRunningItem;
-  shutdownLabel?: string;
+  shutdownLabel?: string | ((item: IRunningSessions.IRunningItem) => string);
   shutdownItemIcon?: LabIcon;
   translator?: ITranslator;
+  collapseToggled: ISignal<Section, boolean>;
 }) {
   const { runningItem } = props;
   const classList = [ITEM_CLASS];
@@ -158,25 +215,39 @@ function Item(props: {
   // Handle shutdown requests.
   let stopPropagation = false;
   const shutdownItemIcon = props.shutdownItemIcon || closeIcon;
-  const shutdownLabel = props.shutdownLabel || trans.__('Shut Down');
+  const shutdownLabel =
+    (typeof props.shutdownLabel === 'function'
+      ? props.shutdownLabel(runningItem)
+      : props.shutdownLabel) ?? trans.__('Shut Down');
   const shutdown = () => {
     stopPropagation = true;
     runningItem.shutdown?.();
   };
 
+  // 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 = !!runningItem.children?.length;
+  const collapsible = !!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 (
     <>
@@ -188,15 +259,15 @@ function Item(props: {
         >
           {collapsible &&
             (collapsed ? (
-              <caretRightIcon.react tag="span" stylesheet="runningItem" />
+              <caretRightIcon.react tag="span" className={CARET_CLASS} />
             ) : (
-              <caretDownIcon.react tag="span" stylesheet="runningItem" />
+              <caretDownIcon.react tag="span" className={CARET_CLASS} />
             ))}
           {icon ? (
             typeof icon === 'string' ? (
-              <img src={icon} />
+              <img src={icon} className={ITEM_ICON_CLASS} />
             ) : (
-              <icon.react tag="span" stylesheet="runningItem" />
+              <icon.react tag="span" className={ITEM_ICON_CLASS} />
             )
           ) : undefined}
           <span
@@ -219,9 +290,10 @@ function Item(props: {
         {collapsible && !collapsed && (
           <List
             child={true}
-            runningItems={runningItem.children!}
+            runningItems={children!}
             shutdownItemIcon={shutdownItemIcon}
             translator={translator}
+            collapseToggled={props.collapseToggled}
           />
         )}
       </li>
@@ -232,14 +304,31 @@ function Item(props: {
 function List(props: {
   child?: boolean;
   runningItems: IRunningSessions.IRunningItem[];
-  shutdownLabel?: string;
+  shutdownLabel?: string | ((item: IRunningSessions.IRunningItem) => string);
   shutdownAllLabel?: string;
   shutdownItemIcon?: LabIcon;
+  filter?: (item: IRunningSessions.IRunningItem) => Partial<IScore> | null;
   translator?: ITranslator;
+  collapseToggled: ISignal<Section, boolean>;
 }) {
+  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 (
     <ul className={LIST_CLASS}>
-      {props.runningItems.map((item, i) => (
+      {items.map((item, i) => (
         <Item
           child={props.child}
           key={i}
@@ -247,27 +336,105 @@ function List(props: {
           shutdownLabel={props.shutdownLabel}
           shutdownItemIcon={props.shutdownItemIcon}
           translator={props.translator}
+          collapseToggled={props.collapseToggled}
         />
       ))}
     </ul>
   );
 }
 
+interface IFilterProvider {
+  filter(item: IRunningSessions.IRunningItem): Partial<IScore> | null;
+  filterChanged: ISignal<IFilterProvider, void>;
+}
+
+class FilterWidget extends ReactWidget implements IFilterProvider {
+  constructor(translator: ITranslator) {
+    super();
+    this.filter = this.filter.bind(this);
+    this._updateFilter = this._updateFilter.bind(this);
+    this._trans = translator.load('jupyterlab');
+    this.addClass('jp-SearchableSessions-filter');
+  }
+
+  get filterChanged(): ISignal<FilterWidget, void> {
+    return this._filterChanged;
+  }
+
+  render(): JSX.Element {
+    return (
+      <FilterBox
+        placeholder={this._trans.__('Search')}
+        updateFilter={this._updateFilter}
+        useFuzzyFilter={false}
+        caseSensitive={false}
+      />
+    );
+  }
+
+  filter(item: IRunningSessions.IRunningItem): Partial<IScore> | null {
+    const labels: string[] = [this._getTextContent(item.label())];
+    for (const child of item.children ?? []) {
+      labels.push(this._getTextContent(child.label()));
+    }
+    return this._filterFn(labels.join(' '));
+  }
+
+  private _getTextContent(node: ReactNode): string {
+    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: ReactNode) => this._getTextContent(n))
+        .join(' ');
+    }
+    return '';
+  }
+
+  private _updateFilter(
+    filterFn: (item: string) => Partial<IScore> | null
+  ): void {
+    this._filterFn = filterFn;
+    this._filterChanged.emit();
+  }
+
+  private _filterFn: (item: string) => Partial<IScore> | null = (_: string) => {
+    return { score: 0 };
+  };
+  private _filterChanged = new Signal<FilterWidget, void>(this);
+  private _trans: TranslationBundle;
+}
+
 class ListWidget extends ReactWidget {
   constructor(
     private _options: {
       manager: IRunningSessions.IManager;
       runningItems: IRunningSessions.IRunningItem[];
       shutdownAllLabel: string;
+      filterProvider?: IFilterProvider;
       translator?: ITranslator;
+      collapseToggled: ISignal<Section, boolean>;
     }
   ) {
     super();
     _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();
   }
 
@@ -282,7 +449,7 @@ class ListWidget extends ReactWidget {
     return (
       <UseSignal signal={this._update}>
         {() => {
-          // Cache the running items for the intial load and request from
+          // Cache the running items for the initial load and request from
           // the service every subsequent load.
           if (cached) {
             cached = false;
@@ -296,7 +463,9 @@ class ListWidget extends ReactWidget {
                 shutdownLabel={options.manager.shutdownLabel}
                 shutdownAllLabel={options.shutdownAllLabel}
                 shutdownItemIcon={options.manager.shutdownItemIcon}
+                filter={options.filterProvider?.filter}
                 translator={options.translator}
+                collapseToggled={options.collapseToggled}
               />
             </div>
           );
@@ -345,25 +514,79 @@ class ListWidget extends ReactWidget {
  * It is specialized for each based on its props.
  */
 class Section extends PanelWithToolbar {
-  constructor(options: {
-    manager: IRunningSessions.IManager;
-    translator?: ITranslator;
-  }) {
+  constructor(options: Section.IOptions) {
     super();
     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;
 
-    function onShutdown() {
+    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?: boolean): void {
+    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(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    Signal.clearData(this);
+    super.dispose();
+  }
+
+  private get _shutdownAllLabel(): string {
+    return this._manager.shutdownAllLabel || this._trans.__('Shut Down All');
+  }
+
+  private _initializeToolbar(runningItems: IRunningSessions.IRunningItem[]) {
+    const enabled = runningItems.length > 0;
+
+    const shutdownAllLabel = this._shutdownAllLabel;
+    const shutdownTitle = `${shutdownAllLabel}?`;
+    const shutdownAllConfirmationText =
+      this._manager.shutdownAllConfirmationText ||
+      `${shutdownAllLabel} ${this._manager.name}`;
+
+    const onShutdown = () => {
       void showDialog({
         title: shutdownTitle,
         body: shutdownAllConfirmationText,
@@ -373,67 +596,168 @@ 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
+      onClick: onShutdown.bind(this)
+    });
+    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._manager.runningChanged.connect(this._updateButton, this);
 
-    this.toolbar.addItem('shutdown-all', this._button);
+    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 as keyof typeof this._buttons]
+      );
+    }
+    this.toolbar.addClass('jp-RunningSessions-toolbar');
+  }
 
-    this.addWidget(
-      new ListWidget({ runningItems, shutdownAllLabel, ...options })
-    );
+  private _onListChanged(): void {
+    this._updateButtons();
+    this._updateEmptyClass();
   }
 
-  /**
-   * Dispose the resources held by the widget
-   */
-  dispose(): void {
-    if (this.isDisposed) {
-      return;
+  private _updateEmptyClass(): void {
+    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);
+      }
     }
-    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('jp-button')
-        ?.classList.remove('jp-mod-disabled');
-    } else {
-      button.node.querySelector('jp-button')?.classList.add('jp-mod-disabled');
+  get viewChanged(): ISignal<Section, Section.IViewState> {
+    return this._viewChanged;
+  }
+
+  private _updateButtons(): void {
+    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;
   }
 
-  private _button: ToolbarButton;
+  private _buttons: {
+    'collapse-expand': ToolbarButton;
+    'switch-view': ToolbarButton;
+    'shutdown-all': ToolbarButton;
+  } | null = null;
   private _manager: IRunningSessions.IManager;
+  private _listView: boolean = false;
+  private _filterProvider?: IFilterProvider;
+  private _collapseToggled = new Signal<Section, boolean>(this);
+  private _viewChanged = new Signal<Section, Section.IViewState>(this);
+  private _trans: TranslationBundle;
+}
+
+/**
+ * Statics for Section.
+ */
+namespace Section {
+  /**
+   * Initialisation options for section.
+   */
+  export interface IOptions {
+    manager: IRunningSessions.IManager;
+    showToolbar?: boolean;
+    filterProvider?: IFilterProvider;
+    translator?: ITranslator;
+  }
+  /**
+   * Information about section view state.
+   */
+  export interface IViewState {
+    /**
+     * View mode
+     */
+    mode: 'tree' | 'list';
+  }
+}
+
+/**
+ * The interface exposing the running sessions sidebar widget properties.
+ */
+export interface IRunningSessionSidebar {
+  /**
+   * The toolbar of the running sidebar.
+   */
+  readonly toolbar: Toolbar;
 }
 
 /**
  * A class that exposes the running terminal and kernel sessions.
  */
-export class RunningSessions extends SidePanel {
+export class RunningSessions
+  extends SidePanel
+  implements IRunningSessionSidebar
+{
   /**
    * Construct a new running widget.
    */
-  constructor(managers: IRunningSessionManagers, translator?: ITranslator) {
+  constructor(
+    managers: IRunningSessionManagers,
+    translator?: ITranslator,
+    stateDB?: IStateDB | null
+  ) {
     super();
     this.managers = managers;
+    this._stateDB = stateDB ?? null;
     this.translator = translator ?? nullTranslator;
     const trans = this.translator.load('jupyterlab');
 
@@ -450,7 +774,6 @@ export class RunningSessions extends SidePanel {
     );
 
     managers.items().forEach(manager => this.addSection(managers, manager));
-
     managers.added.connect(this.addSection, this);
   }
 
@@ -471,12 +794,302 @@ export class RunningSessions extends SidePanel {
    * @param managers Managers
    * @param manager New manager
    */
-  protected addSection(_: unknown, manager: IRunningSessions.IManager) {
-    this.addWidget(new Section({ manager, translator: this.translator }));
+  protected async addSection(_: unknown, manager: IRunningSessions.IManager) {
+    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: Section.IViewState) => {
+        await this._updateState(sectionId, viewState.mode);
+      }
+    );
+  }
+
+  /**
+   * Update state database with the new state of a given section.
+   */
+  private async _updateState(sectionId: string, mode: 'list' | 'tree') {
+    const state = await this._getState();
+    let listViewSections = state.listViewSections ?? [];
+    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.
+   */
+  private async _getState(): Promise<RunningSessions.IStateDBLayout> {
+    if (!this._stateDB) {
+      return {};
+    }
+    return (
+      ((await this._stateDB.fetch(
+        STATE_DB_ID
+      )) as RunningSessions.IStateDBLayout) ?? {}
+    );
   }
 
   protected managers: IRunningSessionManagers;
   protected translator: ITranslator;
+  private _stateDB: IStateDB | null;
+}
+
+/**
+ * Interfaces for RunningSessions implementation.
+ */
+namespace RunningSessions {
+  /**
+   * Layout of the state database.
+   */
+  export interface IStateDBLayout {
+    /**
+     * Names of sections to be presented in the list view.
+     */
+    listViewSections?: string[];
+  }
+}
+
+/**
+ * Section but rendering its own title before the content
+ */
+class TitledSection extends Section {
+  constructor(options: Section.IOptions) {
+    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: ITranslator) {
+    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: IRunningSessionManagers, translator?: ITranslator) {
+    super();
+    this._translator = 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(): void {
+    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)
+    ] as HTMLElement[];
+    const pos = Math.min(Math.max(this._activeIndex, 0), items.length - 1);
+    items[pos].click();
+  }
+
+  /**
+   * Handle incoming events.
+   */
+  handleEvent(event: Event): void {
+    switch (event.type) {
+      case 'keydown':
+        this._evtKeydown(event as KeyboardEvent);
+        break;
+    }
+  }
+
+  /**
+   * A message handler invoked on an `'after-attach'` message.
+   */
+  protected onAfterAttach(_: Message): void {
+    this._forceFocusInput();
+    this.node.addEventListener('keydown', this);
+    setTimeout(() => {
+      this._updateActive(0);
+    }, 0);
+  }
+  /**
+   * A message handler invoked on an `'after-detach'` message.
+   */
+  protected onAfterDetach(_: Message): void {
+    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).
+   */
+  private _forceFocusInput(): void {
+    this._filterWidget.renderPromise
+      ?.then(() => {
+        this._filterWidget.node.querySelector('input')?.focus();
+      })
+      .catch(console.warn);
+  }
+
+  /**
+   * Navigate between items using up/down keys by shifting focus.
+   */
+  private _evtKeydown(event: KeyboardEvent) {
+    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.
+   */
+  private _updateActive(direction: -1 | 0 | 1): boolean {
+    const items = [...this.node.querySelectorAll('.' + ITEM_CLASS)].filter(e =>
+      e.checkVisibility()
+    ) as HTMLElement[];
+    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: number | null = 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;
+  }
+
+  private _translator: ITranslator;
+  private _filterWidget: FilterWidget;
+  private _activeIndex = 0;
+  private _list: SearchableSessionsList;
+}
+
+/**
+ * A panel list of searchable sessions.
+ */
+export class SearchableSessionsList extends Panel {
+  constructor(
+    managers: IRunningSessionManagers,
+    filterWidget: FilterWidget,
+    translator?: ITranslator
+  ) {
+    super();
+    this._managers = managers;
+    this._translator = 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(): 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) {
+    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);
+  }
+
+  private _managers: IRunningSessionManagers;
+  private _translator: ITranslator;
+  private _emptyIndicator: EmptyIndicator;
+  private _filterWidget: FilterWidget;
 }
 
 /**
@@ -515,7 +1128,7 @@ export namespace IRunningSessions {
     /**
      * A string used to describe the shutdown action.
      */
-    shutdownLabel?: string;
+    shutdownLabel?: string | ((item: IRunningSessions.IRunningItem) => string);
 
     /**
      * A string used to describe the shutdown all action.
@@ -571,7 +1184,7 @@ export namespace IRunningSessions {
     /**
      * Called to determine the label for each item.
      */
-    label: () => string;
+    label: () => ReactNode;
 
     /**
      * Called to determine the `title` attribute for each item, which is