Add starred section (#8)

* Add starred section

* Use `test.describe`

* Distinguish between notebook/console in starred

* Hotfix for JupyterLab 4.2

* Harmonise border color between versions

* Update snapshots

schema/plugin.json

@@ -7,6 +7,7 @@
   "type": "object",
   "properties": {
     "hiddenColumns": {
+      "title": "Hidden columns",
       "type": "object",
       "default": {
         "conda_env_path": "hidden",
@@ -18,10 +19,15 @@
       }
     },
     "columnOrder": {
+      "title": "Column order",
       "type": "array",
       "items": {
         "type": "string"
       }
+    },
+    "starredSection": {
+      "type": "boolean",
+      "title": "Show starred section"
     }
   },
   "additionalProperties": false

src/components/table.tsx

@@ -50,6 +50,7 @@ export function KernelTable(props: {
   query: string;
   onClick: (item: IKernelItem) => void;
   hideColumns?: string[];
+  showWidgetType?: boolean;
 }) {
   const { trans } = props;
   let query: string;
@@ -121,6 +122,18 @@ export function KernelTable(props: {
     }
   );
 
+  if (props.showWidgetType) {
+    extraColumns.push({
+      id: 'widget-type',
+      label: trans.__('Type'),
+      renderCell: (row: IKernelItem) => {
+        return row.command.split(':')[0];
+      },
+      sort: (a: IKernelItem, b: IKernelItem) =>
+        a.command.localeCompare(b.command)
+    });
+  }
+
   const availableColumns: Table.IColumn<IKernelItem>[] = [
     {
       id: 'kernel',

src/database.ts

@@ -1,5 +1,6 @@
 import { IStateDB } from '@jupyterlab/statedb';
 import { ReadonlyPartialJSONValue, PromiseDelegate } from '@lumino/coreutils';
+import { Signal } from '@lumino/signaling';
 import { ILauncher } from '@jupyterlab/launcher';
 import {
   ILastUsedDatabase,
@@ -94,7 +95,14 @@ export class FavoritesDatabase
 
   async set(item: ILauncher.IItemOptions, isFavourite: boolean) {
     this._set(item, isFavourite);
+    this._changed.emit();
   }
+
+  get changed() {
+    return this._changed;
+  }
+
+  private _changed = new Signal<FavoritesDatabase, void>(this);
 }
 
 /**

src/launcher.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) Nebari Development Team.
 // Distributed under the terms of the Modified BSD License.
 import type { CommandRegistry } from '@lumino/commands';
+import type { ISignal } from '@lumino/signaling';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { ILauncher, Launcher } from '@jupyterlab/launcher';
 import { TranslationBundle } from '@jupyterlab/translation';
@@ -14,9 +15,10 @@ import {
   IItem,
   IKernelItem,
   ILastUsedDatabase,
-  IFavoritesDatabase
+  IFavoritesDatabase,
+  ISettingsLayout
 } from './types';
-import { fileIcon } from './icons';
+import { fileIcon, starIcon } from './icons';
 import { Item } from './item';
 import { KernelTable } from './components/table';
 import { CollapsibleSection } from './components/section';
@@ -31,9 +33,44 @@ function LauncherBody(props: {
   otherItems: IItem[];
   commands: CommandRegistry;
   settings: ISettingRegistry.ISettings;
+  favouritesChanged?: ISignal<IFavoritesDatabase, void>;
 }): React.ReactElement {
-  const { trans, cwd, typeItems, otherItems } = props;
+  const { trans, cwd, typeItems, otherItems, favouritesChanged } = props;
   const [query, updateQuery] = React.useState<string>('');
+  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+  const [showStarred, updateShowStarred] = React.useState<
+    ISettingsLayout['starredSection']
+  >(
+    props.settings.composite.starredSection as ISettingsLayout['starredSection']
+  );
+
+  const syncSettings = () => {
+    updateShowStarred(
+      props.settings.composite
+        .starredSection as ISettingsLayout['starredSection']
+    );
+  };
+
+  React.useEffect(() => {
+    props.settings.changed.connect(syncSettings);
+    return () => {
+      props.settings.changed.disconnect(syncSettings);
+    };
+  });
+
+  if (favouritesChanged) {
+    const updateIfNeeded = () => {
+      if (showStarred) {
+        forceUpdate();
+      }
+    };
+    React.useEffect(() => {
+      favouritesChanged.connect(updateIfNeeded);
+      return () => {
+        favouritesChanged.disconnect(updateIfNeeded);
+      };
+    });
+  }
 
   const metadataAvailable = new Set<string>();
   for (const item of props.notebookItems) {
@@ -46,6 +83,10 @@ function LauncherBody(props: {
     }
   }
 
+  const starred = [...props.notebookItems, ...props.consoleItems].filter(
+    item => item.starred
+  );
+
   return (
     <div className="jp-LauncherBody">
       <div className="jp-NewLauncher-TopBar">
@@ -86,8 +127,31 @@ function LauncherBody(props: {
             <TypeCard item={item} trans={trans} />
           ))}
       </CollapsibleSection>
+      {showStarred ? (
+        <CollapsibleSection
+          className="jp-Launcher-openByKernel"
+          title={trans.__('Starred')}
+          icon={starIcon}
+          open={true} // TODO: store this in layout/state higher up
+        >
+          {starred.length > 0 ? (
+            <KernelTable
+              items={starred}
+              commands={props.commands}
+              showSearchBox={false}
+              showWidgetType={true}
+              query={query}
+              settings={props.settings}
+              trans={trans}
+              onClick={item => item.execute()}
+            />
+          ) : (
+            'No starred items'
+          )}
+        </CollapsibleSection>
+      ) : null}
       <CollapsibleSection
-        className="jp-Launcher-openByKernel"
+        className="jp-Launcher-openByKernel jp-Launcher-launchNotebook"
         title={trans.__('Launch Notebook')}
         icon={notebookIcon}
         open={true} // TODO: store this in layout/state higher up
@@ -103,7 +167,7 @@ function LauncherBody(props: {
         />
       </CollapsibleSection>
       <CollapsibleSection
-        className="jp-Launcher-openByKernel"
+        className="jp-Launcher-openByKernel jp-Launcher-launchConsole"
         title={trans.__('Launch Console')}
         icon={consoleIcon}
         open={false}
@@ -229,6 +293,7 @@ export class NewLauncher extends Launcher {
         consoleItems={consoleItems}
         otherItems={otherItems}
         settings={this._settings}
+        favouritesChanged={this._favoritesDatabase.changed}
       />
     );
   }

src/types.ts

@@ -19,6 +19,7 @@ export namespace CommandIDs {
 export interface ISettingsLayout {
   hiddenColumns: Record<string, 'visible' | 'hidden'>;
   columnOrder: string[];
+  starredSection: boolean;
 }
 
 export interface IItem extends ILauncher.IItemOptions {
@@ -47,6 +48,7 @@ export interface IFavoritesDatabase {
   ready: Promise<void>;
   get(item: ILauncher.IItemOptions): boolean | null;
   set(item: ILauncher.IItemOptions, isFavourite: boolean): Promise<void>;
+  changed: ISignal<IFavoritesDatabase, void>;
 }
 
 /**

style/base.css

@@ -47,10 +47,19 @@
 }
 
 .jp-Launcher-searchBox input {
+  /* (no longer needed in lab 4.2+) */
   box-shadow: none;
+}
+
+.jp-Launcher-searchBox input,
+.jp-Launcher-searchBox jp-search::part(root) {
   border: var(--jp-border-width) solid var(--jp-border-color1);
 }
 
+.jp-Launcher-searchBox .jp-FilterBox {
+  width: 100%;
+}
+
 .jp-CollapsibleSection > summary {
   cursor: pointer;
   transition: margin var(--jp-animation-time) ease-out;

ui-tests/tests/jupyterlab_new_launcher.spec.ts

@@ -1,6 +1,36 @@
-import { expect, test } from '@jupyterlab/galata';
+import { expect, test, galata } from '@jupyterlab/galata';
 
-test('should render new launcher', async ({ page }) => {
-  const launcher = page.locator('.jp-LauncherBody');
-  expect(await launcher.screenshot()).toMatchSnapshot('launcher.png');
+const SETTINGS_ID = 'jupyterlab-new-launcher:plugin';
+
+test.describe('Default settings', () => {
+  test('should render new launcher', async ({ page }) => {
+    const launcher = page.locator('.jp-LauncherBody');
+    expect(await launcher.screenshot()).toMatchSnapshot('launcher.png');
+  });
+});
+
+test.describe('With starred section', () => {
+  test.use({
+    mockSettings: {
+      ...galata.DEFAULT_SETTINGS,
+      [SETTINGS_ID]: {
+        ...galata.DEFAULT_SETTINGS[SETTINGS_ID],
+        starredSection: true
+      }
+    }
+  });
+
+  test('should render new launcher with starred section', async ({ page }) => {
+    const launcher = page.locator('.jp-LauncherBody');
+    // expand the console section
+    await page.locator('.jp-Launcher-launchConsole summary').click();
+    // star some items
+    await page
+      .locator('.jp-Launcher-launchNotebook .jp-starIconButton')
+      .click();
+    await page.locator('.jp-Launcher-launchConsole .jp-starIconButton').click();
+    expect(await launcher.screenshot()).toMatchSnapshot(
+      'launcher-with-starred.png'
+    );
+  });
 });