diff --git a/src/commands.ts b/src/commands.ts index 1f134cd..8c454c4 100644 --- a/src/commands.ts +++ b/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' + }); + } + }); } diff --git a/src/components/quick-settings.tsx b/src/components/quick-settings.tsx new file mode 100644 index 0000000..6bdfe51 --- /dev/null +++ b/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(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 ( +
{ + onClickHandler(event); + }} + > +
+ +
+
+ ); +} diff --git a/src/launcher.tsx b/src/launcher.tsx index f334c8c..04f0761 100644 --- a/src/launcher.tsx +++ b/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; lastUsedChanged: ISignal; }): React.ReactElement { - const { trans, cwd, typeItems, otherItems, favouritesChanged } = props; + const { trans, cwd, typeItems, commands, otherItems, favouritesChanged } = + props; const [query, updateQuery] = React.useState(''); const [, forceUpdate] = React.useReducer(x => x + 1, 0); const [showStarred, updateShowStarred] = React.useState< @@ -116,6 +119,7 @@ function LauncherBody(props: { {otherItems.map(item => ( ))} + {searchAll ? ( diff --git a/src/types.ts b/src/types.ts index a8078c8..6e062a7 100644 --- a/src/types.ts +++ b/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 { diff --git a/ui-tests/tests/jupyterlab_new_launcher.spec.ts b/ui-tests/tests/jupyterlab_new_launcher.spec.ts index a3ec91e..f7aa18f 100644 --- a/ui-tests/tests/jupyterlab_new_launcher.spec.ts +++ b/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(); + }); +}); diff --git a/ui-tests/tests/jupyterlab_new_launcher.spec.ts-snapshots/launcher-linux.png b/ui-tests/tests/jupyterlab_new_launcher.spec.ts-snapshots/launcher-linux.png index 4043a38..a225e96 100644 Binary files a/ui-tests/tests/jupyterlab_new_launcher.spec.ts-snapshots/launcher-linux.png and b/ui-tests/tests/jupyterlab_new_launcher.spec.ts-snapshots/launcher-linux.png differ diff --git a/ui-tests/tests/jupyterlab_new_launcher.spec.ts-snapshots/launcher-open-quicksettings-linux.png b/ui-tests/tests/jupyterlab_new_launcher.spec.ts-snapshots/launcher-open-quicksettings-linux.png new file mode 100644 index 0000000..6fedadd Binary files /dev/null and b/ui-tests/tests/jupyterlab_new_launcher.spec.ts-snapshots/launcher-open-quicksettings-linux.png differ diff --git a/ui-tests/tests/jupyterlab_new_launcher.spec.ts-snapshots/launcher-search-in-individual-linux.png b/ui-tests/tests/jupyterlab_new_launcher.spec.ts-snapshots/launcher-search-in-individual-linux.png index 25b7721..35d8639 100644 Binary files a/ui-tests/tests/jupyterlab_new_launcher.spec.ts-snapshots/launcher-search-in-individual-linux.png and b/ui-tests/tests/jupyterlab_new_launcher.spec.ts-snapshots/launcher-search-in-individual-linux.png differ diff --git a/ui-tests/tests/jupyterlab_new_launcher.spec.ts-snapshots/launcher-with-starred-linux.png b/ui-tests/tests/jupyterlab_new_launcher.spec.ts-snapshots/launcher-with-starred-linux.png index abc175c..6aa2e10 100644 Binary files a/ui-tests/tests/jupyterlab_new_launcher.spec.ts-snapshots/launcher-with-starred-linux.png and b/ui-tests/tests/jupyterlab_new_launcher.spec.ts-snapshots/launcher-with-starred-linux.png differ