Add starred section

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/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) {
@@ -86,8 +123,28 @@ 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
+        >
+          <KernelTable
+            items={[...props.notebookItems, ...props.consoleItems].filter(
+              item => item.starred
+            )}
+            commands={props.commands}
+            showSearchBox={false}
+            query={query}
+            settings={props.settings}
+            trans={trans}
+            onClick={item => item.execute()}
+          />
+        </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 +160,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 +286,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>;
 }
 
 /**

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';
+
+describe('Default settings', () => {
+  test('should render new launcher', async ({ page }) => {
+    const launcher = page.locator('.jp-LauncherBody');
+    expect(await launcher.screenshot()).toMatchSnapshot('launcher.png');
+  });
+});
+
+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'
+    );
+  });
 });