Adds quick settings button to the new launcher

src/commands.ts

@@ -76,4 +76,38 @@ export function addCommands(
       await settings.set('columnOrder', order);
     }
   });
+  app.commands.addCommand(CommandIDs.showStarred, {
+    isToggleable: true,
+    isToggled: () => {
+      return settings.composite
+        .starredSection as ISettingsLayout['starredSection'];
+    },
+    label: trans.__('Show Starred Section'),
+    execute: async () => {
+      const starredSection = settings.composite
+        .starredSection as ISettingsLayout['starredSection'];
+      await settings.set('starredSection', !starredSection);
+    }
+  });
+  app.commands.addCommand(CommandIDs.searchAllSections, {
+    isToggleable: true,
+    isToggled: () => {
+      return settings.composite
+        .searchAllSections as ISettingsLayout['searchAllSections'];
+    },
+    label: trans.__('Search in All Sections'),
+    execute: async () => {
+      const searchAllSections = settings.composite
+        .searchAllSections as ISettingsLayout['searchAllSections'];
+      await settings.set('searchAllSections', !searchAllSections);
+    }
+  });
+  app.commands.addCommand(CommandIDs.openSettings, {
+    label: trans.__('Open Settings Editor'),
+    execute: () => {
+      app.commands.execute('settingeditor:open', {
+        query: 'New Launcher'
+      });
+    }
+  });
 }

src/components/quick-settings.tsx

@@ -0,0 +1,48 @@
+import { TranslationBundle } from '@jupyterlab/translation';
+import type { CommandRegistry } from '@lumino/commands';
+import { MenuSvg, settingsIcon } from '@jupyterlab/ui-components';
+import * as React from 'react';
+
+import { CommandIDs } from '../types';
+
+export function QuickSettings(props: {
+  trans: TranslationBundle;
+  commands: CommandRegistry;
+}): React.ReactElement {
+  const { commands } = props;
+
+  const menu = new MenuSvg({ commands: commands });
+  menu.addItem({ command: CommandIDs.showStarred });
+  menu.addItem({ command: CommandIDs.searchAllSections });
+  menu.addItem({ command: CommandIDs.openSettings });
+
+  const iconRef = React.useRef<HTMLDivElement>(null);
+
+  const onClickHandler = (event: React.MouseEvent) => {
+    const current = iconRef.current;
+    let x, y;
+    if (current) {
+      const position = current.getBoundingClientRect();
+      x = position.left;
+      y = position.bottom;
+    } else {
+      x = event.clientX;
+      y = event.clientY;
+    }
+    menu.open(x, y);
+  };
+
+  return (
+    <div
+      className="jp-Launcher-TypeCard jp-LauncherCard jp-Launcher-QuickSettings"
+      ref={iconRef}
+      onClick={event => {
+        onClickHandler(event);
+      }}
+    >
+      <div className="jp-LauncherCard-icon">
+        <settingsIcon.react />
+      </div>
+    </div>
+  );
+}

src/launcher.tsx

@@ -10,6 +10,7 @@ import {
   notebookIcon,
   consoleIcon
 } from '@jupyterlab/ui-components';
+
 import * as React from 'react';
 import {
   IItem,
@@ -23,6 +24,7 @@ import { Item } from './item';
 import { KernelTable } from './components/table';
 import { CollapsibleSection } from './components/section';
 import { TypeCard } from './components/card';
+import { QuickSettings } from './components/quick-settings';
 
 function LauncherBody(props: {
   trans: TranslationBundle;
@@ -36,7 +38,8 @@ function LauncherBody(props: {
   favouritesChanged: ISignal<IFavoritesDatabase, void>;
   lastUsedChanged: ISignal<ILastUsedDatabase, void>;
 }): React.ReactElement {
-  const { trans, cwd, typeItems, otherItems, favouritesChanged } = props;
+  const { trans, cwd, typeItems, commands, otherItems, favouritesChanged } =
+    props;
   const [query, updateQuery] = React.useState<string>('');
   const [, forceUpdate] = React.useReducer(x => x + 1, 0);
   const [showStarred, updateShowStarred] = React.useState<
@@ -116,6 +119,7 @@ function LauncherBody(props: {
           {otherItems.map(item => (
             <TypeCard item={item} trans={trans} />
           ))}
+          <QuickSettings commands={commands} trans={trans} />
         </div>
       </div>
       {searchAll ? (

src/types.ts

@@ -14,6 +14,9 @@ export namespace CommandIDs {
   export const create = 'launcher:create';
   export const moveColumn = 'new-launcher:table-move-column';
   export const toggleColumn = 'new-launcher:table-toggle-column';
+  export const showStarred = 'new-launcher:show-starred';
+  export const searchAllSections = 'new-launcher:search-all-sections';
+  export const openSettings = 'new-launcher:open-settings';
 }
 
 export interface ISettingsLayout {

ui-tests/tests/jupyterlab_new_launcher.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test, galata } from '@jupyterlab/galata';
+import { Page } from '@playwright/test';
 
 const SETTINGS_ID = 'jupyterlab-new-launcher:plugin';
 
@@ -80,3 +81,25 @@ test.describe('Filter individual', () => {
     );
   });
 });
+
+test.describe('Quick Settings', () => {
+  test('open quick settings menu', async ({ page }) => {
+    const launcher = page.locator('.jp-LauncherBody');
+    await page.locator('.jp-Launcher-QuickSettings').click();
+    expect(await launcher.screenshot()).toMatchSnapshot(
+      'launcher_open_quicksettings.png'
+    );
+  });
+
+  test('show starred from quick settings', async ({ page }) => {
+    const launcher = page.locator('.jp-LauncherBody');
+    await page.locator('.jp-Launcher-QuickSettings').click();
+    await page
+      .locator('.lm-Menu-itemLabel:text("Show Starred Section")')
+      .click();
+    const starredSection = page.locator(
+      '.jp-CollapsibleSection-Title:has-text("starred")'
+    );
+    await expect(starredSection).toBeVisible();
+  });
+});