feat(editor): 文件树「在应用中打开」子菜单（外部编辑器/图钉固定/SSH 远端/自定义编辑器） (#334)
* feat(editor): file tree 'open with' submenu (external editors, pin, SSH-remote, custom editors) The file tree right-click menu gains an 'Open with >' submenu with the resource manager (reveal in file manager), VS Code, Cursor and Zed, plus user-defined custom editors (name + URL template + VSCode-family flag). Each submenu row carries a pushpin that promotes the target to a direct top-level menu item. A configurable SSH host (settings: Files card gear) switches VSCode-family openers to <scheme>://vscode-remote/ssh-remote+<host>/<path> and hides host-local targets (file manager / Zed / non-VSCode custom editors). External opens run through the new fenced /sidebar/api/open.external route which spawns the platform opener with an argv array (no shell); the client never navigates raw scheme URLs itself. The settings seam's render panel now appends after the declarative rows instead of replacing them. * feat(editor): polish open-with menu UI — brand icons, pushpin, chevron, row alignment - Submenu rows: the custom label is now a block-level flex row filling the primitives itemLabel, so the pushpin docks at the row's far right (matching the trailing check of every other menu); menu row icons normalized to 16px (DSH native menus use 16, ours were 14). - The submenu parent row gains a right-aligned chevron (the primitives Menu renders no arrow for submenu parents). - Icons via react-icons: codicons VscPin/VscPinned pushpins (replacing the hand-drawn pin), VscFile/VscFolder/VscFolderOpened tree glyphs (replacing the </> file mark), VscLinkExternal for the open-with parent and the browser tab's open-external button (globally), SiCursor/SiZedindustries brand silhouettes; the VS Code mark is inlined from simple-icons@11.0.0 (CC0) as IconVscode16 since later simple-icons releases dropped it. All monochrome currentColor to follow the active skin. - tsdown: pin react-icons si/vsc to their ESM entries via resolve.alias — the package's exports map lists require before import, so the shared conditionNames picked the unshakeable CJS entry and bloated the core bundle by ~6.4 MB; tree-shaken it now adds only ~12 KB.
This commit is contained in:
Atlas Zeng
@@ -94,6 +94,9 @@ describe('built-in tab registrations', () => {
|
||||
const options = toggles[0]?.options ?? []
|
||||
expect(options.map(o => o.value)).toEqual([true, false])
|
||||
expect(options.every(o => o.icon !== undefined && o.title !== undefined)).toBe(true)
|
||||
// The open-with configuration (SSH host + custom editors) is the custom
|
||||
// panel rendered below the declarative rows.
|
||||
expect(service.getTab('editor')?.settings?.render).toBeDefined()
|
||||
})
|
||||
|
||||
it('the terminal tab declares the model terminal-tools, auto-terminal, shell and custom-font settings', () => {
|
||||
|
||||
@@ -0,0 +1,202 @@
|
||||
/**
|
||||
* FileTree "open with" context menu: a file row's right-click menu gains the
|
||||
* pinned direct rows and the parent submenu row; the submenu lists every
|
||||
* resolved target with a per-row pushpin, pinning never selects/closes the
|
||||
* menu, and selecting a child invokes the caller's open handler with the
|
||||
* row's absolute path. When the caller wires nothing, the section is absent.
|
||||
*/
|
||||
// @vitest-environment jsdom
|
||||
import { beforeAll, afterEach, describe, expect, it, vi } from 'vitest'
|
||||
import { createElement } from 'react'
|
||||
import { createRoot, type Root } from 'react-dom/client'
|
||||
import { act } from 'react-dom/test-utils'
|
||||
import { FileTree } from '../src/client/FileTree.tsx'
|
||||
import type { OpenWithTarget } from '../src/client/open-with.ts'
|
||||
|
||||
// The act() environment flag (React 18.2 reads it before flushing effects).
|
||||
;(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true
|
||||
|
||||
// vitest 4.1.11+ follows the OS locale; pin en-US so menu copy is English.
|
||||
beforeAll(() => {
|
||||
Object.defineProperty(window.navigator, 'language', { value: 'en-US', configurable: true })
|
||||
})
|
||||
|
||||
vi.mock('../src/client/api.ts', () => ({
|
||||
api: {
|
||||
fsTree: async () => ({
|
||||
entries: [{ name: 'a.ts', path: '/tmp/a.ts', isDir: false }],
|
||||
}),
|
||||
},
|
||||
downloadUrl: () => '/sidebar/file',
|
||||
}))
|
||||
|
||||
/** The resolved target list a caller (EditorHost) would hand FileTree. */
|
||||
const targets: OpenWithTarget[] = [
|
||||
{ id: 'explorer', nameKey: 'openWithExplorer', name: '', kind: 'reveal', isVscodeFamily: false, localOnly: true },
|
||||
{ id: 'vscode', nameKey: 'openWithVscode', name: '', kind: 'url', urlTemplate: 'vscode://file/{path}', isVscodeFamily: true, localOnly: false },
|
||||
{ id: 'cursor', nameKey: 'openWithCursor', name: '', kind: 'url', urlTemplate: 'cursor://file/{path}', isVscodeFamily: true, localOnly: false },
|
||||
{ id: 'zed', nameKey: 'openWithZed', name: '', kind: 'url', urlTemplate: 'zed://file/{path}', isVscodeFamily: false, localOnly: true },
|
||||
{ id: 'custom:w', name: 'Windsurf', kind: 'url', urlTemplate: 'windsurf://file/{path}', isVscodeFamily: false, localOnly: false },
|
||||
]
|
||||
|
||||
interface Harness {
|
||||
container: HTMLDivElement
|
||||
onOpenWith: ReturnType<typeof vi.fn>
|
||||
onToggleOpenWithPin: ReturnType<typeof vi.fn>
|
||||
unmount: () => void
|
||||
}
|
||||
|
||||
async function mountTree(overrides: {
|
||||
openWithTargets?: OpenWithTarget[]
|
||||
openWithPinned?: string[]
|
||||
openWithSsh?: boolean
|
||||
} = {}): Promise<Harness> {
|
||||
const container = document.createElement('div')
|
||||
document.body.append(container)
|
||||
const root: Root = createRoot(container)
|
||||
const onOpenWith = vi.fn()
|
||||
const onToggleOpenWithPin = vi.fn()
|
||||
// Property-presence semantics: an explicit `openWithTargets: undefined`
|
||||
// must reach FileTree (the section hides) instead of falling back.
|
||||
const has = (key: 'openWithTargets' | 'openWithPinned' | 'openWithSsh'): boolean =>
|
||||
Object.prototype.hasOwnProperty.call(overrides, key)
|
||||
await act(async () => {
|
||||
root.render(createElement(FileTree, {
|
||||
sessionId: 's1',
|
||||
cwd: '/tmp',
|
||||
expanded: [],
|
||||
onToggle: () => {},
|
||||
onOpenFile: () => {},
|
||||
onOpenFileNewTab: () => {},
|
||||
onOpenFileSide: () => {},
|
||||
openWithTargets: has('openWithTargets') ? overrides.openWithTargets : targets,
|
||||
openWithPinned: has('openWithPinned') ? overrides.openWithPinned : ['vscode'],
|
||||
openWithSsh: has('openWithSsh') ? overrides.openWithSsh : false,
|
||||
onOpenWith,
|
||||
onToggleOpenWithPin,
|
||||
onReferenceFile: () => {},
|
||||
refreshTick: 0,
|
||||
onUploadRequest: () => {},
|
||||
busy: false,
|
||||
}))
|
||||
})
|
||||
return {
|
||||
container,
|
||||
onOpenWith,
|
||||
onToggleOpenWithPin,
|
||||
unmount: () => { act(() => { root.unmount() }) },
|
||||
}
|
||||
}
|
||||
|
||||
/** The file row of the one-level tree (role="button" with the name span). */
|
||||
function fileRow(container: HTMLDivElement): HTMLElement {
|
||||
const row = [...container.querySelectorAll<HTMLElement>('[role="button"]')]
|
||||
.find(el => el.querySelector('[class*="explorerName"]')?.textContent === 'a.ts')
|
||||
if (row === undefined) throw new Error('file row not found')
|
||||
return row
|
||||
}
|
||||
|
||||
/** Open the row's context menu at a fixed cursor position. */
|
||||
function openMenu(container: HTMLDivElement): void {
|
||||
const event = new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX: 20, clientY: 30 })
|
||||
act(() => { fileRow(container).dispatchEvent(event) })
|
||||
}
|
||||
|
||||
describe('FileTree open-with menu', () => {
|
||||
let harness: Harness
|
||||
afterEach(() => {
|
||||
harness.unmount()
|
||||
document.body.innerHTML = ''
|
||||
})
|
||||
|
||||
it('renders the pinned direct row and the submenu parent for a file row', async () => {
|
||||
harness = await mountTree()
|
||||
openMenu(harness.container)
|
||||
const items = [...document.querySelectorAll<HTMLElement>('[role="menuitem"]')]
|
||||
// The pinned VS Code sits at the top level (before the submenu parent).
|
||||
expect(items.map(item => item.textContent?.trim())).toContain('VS Code')
|
||||
const parent = items.find(item => item.getAttribute('aria-haspopup') === 'menu')
|
||||
expect(parent?.textContent).toContain('Open with')
|
||||
// The submenu parent carries the trailing chevron affordance (the
|
||||
// primitives Menu renders no arrow of its own), right-aligned inside a
|
||||
// full-width label row — the same structure the submenu children use.
|
||||
expect(parent?.querySelector('[class*="openWithChevron"]')).not.toBeNull()
|
||||
expect(parent?.querySelector('[class*="openWithLabel"]')).not.toBeNull()
|
||||
})
|
||||
|
||||
it('opens the submenu on click and lists every target with pin toggles', async () => {
|
||||
harness = await mountTree()
|
||||
openMenu(harness.container)
|
||||
const parent = [...document.querySelectorAll<HTMLElement>('[role="menuitem"]')]
|
||||
.find(item => item.getAttribute('aria-haspopup') === 'menu')
|
||||
expect(parent).toBeDefined()
|
||||
act(() => { parent!.click() })
|
||||
// Sub child rows = menuitems inside the nested menu.
|
||||
const children = [...document.querySelectorAll<HTMLElement>('[role="menu"] [role="menu"] [role="menuitem"]')]
|
||||
expect(children.map(item => item.textContent?.trim())).toEqual([
|
||||
'File Manager', 'VS Code', 'Cursor', 'Zed', 'Windsurf',
|
||||
])
|
||||
expect(children.every(item => item.querySelector('[class*="openWithPin"]') !== null)).toBe(true)
|
||||
// Pinned state is announced per row (and swaps the pushpin glyph).
|
||||
const vscodeRow = children.find(item => item.textContent?.trim() === 'VS Code')
|
||||
const cursorRow0 = children.find(item => item.textContent?.trim() === 'Cursor')
|
||||
expect(vscodeRow?.querySelector('[aria-label="Unpin"]')).not.toBeNull()
|
||||
expect(cursorRow0?.querySelector('[aria-label="Pin to menu"]')).not.toBeNull()
|
||||
})
|
||||
|
||||
it('pin click toggles without selecting the row or closing the menu', async () => {
|
||||
harness = await mountTree()
|
||||
openMenu(harness.container)
|
||||
const parent = [...document.querySelectorAll<HTMLElement>('[role="menuitem"]')]
|
||||
.find(item => item.getAttribute('aria-haspopup') === 'menu')
|
||||
act(() => { parent!.click() })
|
||||
const cursorRow = [...document.querySelectorAll<HTMLElement>('[role="menu"] [role="menu"] [role="menuitem"]')]
|
||||
.find(item => item.textContent?.trim() === 'Cursor')
|
||||
const pin = cursorRow!.querySelector<HTMLElement>('[class*="openWithPin"]')
|
||||
expect(pin).not.toBeNull()
|
||||
act(() => { pin!.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true })) })
|
||||
expect(harness.onToggleOpenWithPin).toHaveBeenCalledWith('cursor')
|
||||
expect(harness.onOpenWith).not.toHaveBeenCalled()
|
||||
// The menu (and the submenu) stayed open.
|
||||
expect(document.querySelector('[role="menu"] [role="menu"]')).not.toBeNull()
|
||||
})
|
||||
|
||||
it('selecting a submenu child invokes onOpenWith with the row path and closes the menu', async () => {
|
||||
harness = await mountTree()
|
||||
openMenu(harness.container)
|
||||
const parent = [...document.querySelectorAll<HTMLElement>('[role="menuitem"]')]
|
||||
.find(item => item.getAttribute('aria-haspopup') === 'menu')
|
||||
act(() => { parent!.click() })
|
||||
const zedRow = [...document.querySelectorAll<HTMLElement>('[role="menu"] [role="menu"] [role="menuitem"]')]
|
||||
.find(item => item.textContent?.trim() === 'Zed')
|
||||
act(() => { zedRow!.click() })
|
||||
expect(harness.onOpenWith).toHaveBeenCalledWith('zed', '/tmp/a.ts')
|
||||
// Selecting closes the row menu entirely.
|
||||
expect(document.querySelector('[role="menu"] [role="menu"]')).toBeNull()
|
||||
expect(document.querySelector('[role="menuitem"]')).toBeNull()
|
||||
})
|
||||
|
||||
it('appends the SSH hint to VSCode-family labels in remote mode', async () => {
|
||||
harness = await mountTree({
|
||||
openWithSsh: true,
|
||||
openWithTargets: targets.filter(target => !target.localOnly),
|
||||
openWithPinned: [],
|
||||
})
|
||||
openMenu(harness.container)
|
||||
const parent = [...document.querySelectorAll<HTMLElement>('[role="menuitem"]')]
|
||||
.find(item => item.getAttribute('aria-haspopup') === 'menu')
|
||||
act(() => { parent!.click() })
|
||||
const children = [...document.querySelectorAll<HTMLElement>('[role="menu"] [role="menu"] [role="menuitem"]')]
|
||||
expect(children.map(item => item.textContent?.trim())).toEqual([
|
||||
'VS Code (SSH)', 'Cursor (SSH)', 'Windsurf (SSH)',
|
||||
])
|
||||
})
|
||||
|
||||
it('hides the whole section when the caller wires no targets', async () => {
|
||||
harness = await mountTree({ openWithTargets: undefined })
|
||||
openMenu(harness.container)
|
||||
const items = [...document.querySelectorAll<HTMLElement>('[role="menuitem"]')]
|
||||
expect(items.some(item => item.textContent?.includes('Open with'))).toBe(false)
|
||||
expect(items.some(item => item.getAttribute('aria-haspopup') === 'menu')).toBe(false)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* Host external-open helpers: per-platform opener commands (pure, injected
|
||||
* platform) and the URL validation that guards the spawn route. The actual
|
||||
* spawns are not exercised — the route runs in the DSH host process and the
|
||||
* OS outcome is not testable here.
|
||||
*/
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { launchExternal, revealCommand, urlCommand, validateExternalUrl } from '../src/open-external.ts'
|
||||
import { SidebarError } from '../src/wire.ts'
|
||||
|
||||
describe('revealCommand', () => {
|
||||
it('darwin: `open -R <path>` selects the file in Finder', () => {
|
||||
expect(revealCommand('/a/b.txt', 'darwin')).toEqual({ command: 'open', args: ['-R', '/a/b.txt'] })
|
||||
})
|
||||
|
||||
it('win32: `explorer /select,<path>` selects the file', () => {
|
||||
expect(revealCommand('C:\\a\\b.txt', 'win32')).toEqual({ command: 'explorer.exe', args: ['/select,', 'C:\\a\\b.txt'] })
|
||||
})
|
||||
|
||||
it('linux: `xdg-open` opens the containing directory (no common select protocol)', () => {
|
||||
expect(revealCommand('/a/b.txt', 'linux')).toEqual({ command: 'xdg-open', args: ['/a'] })
|
||||
expect(revealCommand('/', 'linux')).toEqual({ command: 'xdg-open', args: ['/'] })
|
||||
})
|
||||
})
|
||||
|
||||
describe('urlCommand', () => {
|
||||
it('darwin: `open <url>` launches the registered protocol handler', () => {
|
||||
expect(urlCommand('vscode://file/x', 'darwin')).toEqual({ command: 'open', args: ['vscode://file/x'] })
|
||||
})
|
||||
|
||||
it('win32: rundll32 url.dll,FileProtocolHandler <url>', () => {
|
||||
expect(urlCommand('cursor://file/x', 'win32')).toEqual({
|
||||
command: 'rundll32.exe',
|
||||
args: ['url.dll,FileProtocolHandler', 'cursor://file/x'],
|
||||
})
|
||||
})
|
||||
|
||||
it('linux: `xdg-open <url>` launches the registered protocol handler', () => {
|
||||
expect(urlCommand('zed://file/x', 'linux')).toEqual({ command: 'xdg-open', args: ['zed://file/x'] })
|
||||
})
|
||||
})
|
||||
|
||||
describe('validateExternalUrl', () => {
|
||||
it('accepts custom-scheme URLs (incl. the SSH-remote form)', () => {
|
||||
expect(validateExternalUrl('vscode://vscode-remote/ssh-remote+dev/home/u/f.ts'))
|
||||
.toBe('vscode://vscode-remote/ssh-remote+dev/home/u/f.ts')
|
||||
expect(validateExternalUrl('myapp://file/{path}')).toBe('myapp://file/{path}')
|
||||
})
|
||||
|
||||
it('rejects http/https (only custom schemes make sense here)', () => {
|
||||
expect(() => validateExternalUrl('https://example.com')).toThrow(SidebarError)
|
||||
expect(() => validateExternalUrl('http://example.com')).toThrow(SidebarError)
|
||||
})
|
||||
|
||||
it('rejects non-URL / non-`scheme://` strings', () => {
|
||||
expect(() => validateExternalUrl('/home/u/f.ts')).toThrow(SidebarError)
|
||||
expect(() => validateExternalUrl('a:file/x')).toThrow(SidebarError)
|
||||
expect(() => validateExternalUrl('')).toThrow(SidebarError)
|
||||
})
|
||||
})
|
||||
|
||||
describe('launchExternal validation (pre-spawn)', () => {
|
||||
it('rejects relative reveal paths before anything is spawned', () => {
|
||||
expect(() => launchExternal('reveal', 'relative/path')).toThrow(SidebarError)
|
||||
})
|
||||
|
||||
it('rejects invalid URLs before anything is spawned', () => {
|
||||
expect(() => launchExternal('url', 'https://example.com')).toThrow(SidebarError)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,111 @@
|
||||
/**
|
||||
* The editor's "open with" settings panel: the SSH host row and the custom
|
||||
* editor list (name + URL template + VSCode-family flag, add/remove). Every
|
||||
* edit commits the whole `openWith` blob through the popup's
|
||||
* updatePluginSetting; removing an editor also prunes its pinned id.
|
||||
*/
|
||||
// @vitest-environment jsdom
|
||||
import { beforeAll, afterEach, describe, expect, it, vi } from 'vitest'
|
||||
import { createElement } from 'react'
|
||||
import { createRoot, type Root } from 'react-dom/client'
|
||||
import { act } from 'react-dom/test-utils'
|
||||
import { OpenWithSettings } from '../src/client/open-with-settings.tsx'
|
||||
|
||||
;(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true
|
||||
|
||||
beforeAll(() => {
|
||||
Object.defineProperty(window.navigator, 'language', { value: 'en-US', configurable: true })
|
||||
})
|
||||
|
||||
interface Harness {
|
||||
container: HTMLDivElement
|
||||
update: ReturnType<typeof vi.fn>
|
||||
unmount: () => void
|
||||
}
|
||||
|
||||
function mountSettings(rawOpenWith: unknown): Harness {
|
||||
const container = document.createElement('div')
|
||||
document.body.append(container)
|
||||
const root: Root = createRoot(container)
|
||||
const update = vi.fn()
|
||||
act(() => {
|
||||
root.render(createElement(OpenWithSettings, {
|
||||
pluginSettings: { openWith: rawOpenWith },
|
||||
updatePluginSetting: update,
|
||||
}))
|
||||
})
|
||||
return {
|
||||
container,
|
||||
update,
|
||||
unmount: () => { act(() => { root.unmount() }) },
|
||||
}
|
||||
}
|
||||
|
||||
const baseConfig = {
|
||||
sshHost: 'dev',
|
||||
customEditors: [
|
||||
{ id: 'a', name: 'Windsurf', urlTemplate: 'windsurf://file/{path}', isVscodeFamily: false },
|
||||
],
|
||||
pinned: ['vscode', 'custom:a'],
|
||||
}
|
||||
|
||||
describe('OpenWithSettings', () => {
|
||||
let harness: Harness
|
||||
afterEach(() => {
|
||||
harness.unmount()
|
||||
document.body.innerHTML = ''
|
||||
})
|
||||
|
||||
it('seeds the SSH host input from the persisted blob and commits edits', () => {
|
||||
harness = mountSettings(baseConfig)
|
||||
const input = harness.container.querySelector<HTMLInputElement>('input:not([type])')
|
||||
expect(input?.value).toBe('dev')
|
||||
// The native value setter (React's value tracker must see the change).
|
||||
const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!
|
||||
act(() => {
|
||||
setter.call(input, 'prod')
|
||||
input!.dispatchEvent(new Event('input', { bubbles: true }))
|
||||
})
|
||||
expect(harness.update.mock.calls[0]?.[0]).toBe('openWith')
|
||||
expect(harness.update.mock.calls[0]?.[1]).toMatchObject({ sshHost: 'prod' })
|
||||
})
|
||||
|
||||
it('adds a custom editor row and commits the extended list', () => {
|
||||
harness = mountSettings(baseConfig)
|
||||
const add = [...harness.container.querySelectorAll<HTMLButtonElement>('button')]
|
||||
.find(button => button.textContent?.trim() === 'Add')
|
||||
expect(add).toBeDefined()
|
||||
act(() => { add!.click() })
|
||||
const blob = harness.update.mock.calls[0]?.[1] as { customEditors: unknown[]; pinned: string[] }
|
||||
expect(blob.customEditors).toHaveLength(2)
|
||||
expect(blob.pinned).toEqual(['vscode', 'custom:a'])
|
||||
})
|
||||
|
||||
it('removes an editor and prunes its pinned id', () => {
|
||||
harness = mountSettings(baseConfig)
|
||||
const remove = harness.container.querySelector<HTMLButtonElement>('button[aria-label="Remove"]')
|
||||
expect(remove).toBeDefined()
|
||||
act(() => { remove!.click() })
|
||||
const blob = harness.update.mock.calls[0]?.[1] as { customEditors: unknown[]; pinned: string[] }
|
||||
expect(blob.customEditors).toHaveLength(0)
|
||||
expect(blob.pinned).toEqual(['vscode'])
|
||||
})
|
||||
|
||||
it('shows the validity hint when a row is incomplete', () => {
|
||||
harness = mountSettings({
|
||||
sshHost: '',
|
||||
customEditors: [{ id: 'x', name: 'Bad', urlTemplate: 'x://file/x', isVscodeFamily: true }],
|
||||
pinned: [],
|
||||
})
|
||||
expect(harness.container.textContent).toContain('are not shown in the menu')
|
||||
})
|
||||
|
||||
it('edits the VSCode-family flag of one row', () => {
|
||||
harness = mountSettings(baseConfig)
|
||||
const checkbox = harness.container.querySelector<HTMLInputElement>('input[type="checkbox"]')
|
||||
expect(checkbox?.checked).toBe(false)
|
||||
act(() => { checkbox!.click() })
|
||||
const blob = harness.update.mock.calls[0]?.[1] as { customEditors: { isVscodeFamily: boolean }[] }
|
||||
expect(blob.customEditors[0]?.isVscodeFamily).toBe(true)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* The file tree "open with" pure logic: config parsing (tolerant), target
|
||||
* resolution (built-ins + custom, SSH filtering), URL building (local file
|
||||
* URLs and VSCode-family SSH-remote URLs) and the custom-editor validators.
|
||||
*/
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import {
|
||||
isValidCustomEditor,
|
||||
newCustomEditorId,
|
||||
normalizeUrlPath,
|
||||
openWithSshActive,
|
||||
openWithUrl,
|
||||
parseOpenWithConfig,
|
||||
resolveOpenWithTargets,
|
||||
type CustomEditor,
|
||||
type OpenWithTarget,
|
||||
} from '../src/client/open-with.ts'
|
||||
|
||||
describe('parseOpenWithConfig', () => {
|
||||
it('returns the defaults for null / non-object / array values', () => {
|
||||
expect(parseOpenWithConfig(null)).toEqual({ sshHost: '', customEditors: [], pinned: [] })
|
||||
expect(parseOpenWithConfig('junk')).toEqual({ sshHost: '', customEditors: [], pinned: [] })
|
||||
expect(parseOpenWithConfig([])).toEqual({ sshHost: '', customEditors: [], pinned: [] })
|
||||
})
|
||||
|
||||
it('keeps structurally valid custom editors (incl. in-progress rows) and drops junk', () => {
|
||||
const config = parseOpenWithConfig({
|
||||
sshHost: 'dev',
|
||||
customEditors: [
|
||||
{ id: 'a', name: 'Windsurf', urlTemplate: 'windsurf://file/{path}', isVscodeFamily: false },
|
||||
{ id: 'b', name: '', urlTemplate: 'b://file/{path}', isVscodeFamily: true },
|
||||
{ id: 'c', name: 'Trae', urlTemplate: 'trae://file/{path}', isVscodeFamily: true },
|
||||
'junk',
|
||||
null,
|
||||
42,
|
||||
],
|
||||
pinned: ['vscode', 'custom:a', 42, '', 'custom:c'],
|
||||
})
|
||||
expect(config.sshHost).toBe('dev')
|
||||
expect(config.customEditors.map(editor => editor.id)).toEqual(['a', 'b', 'c'])
|
||||
expect(config.pinned).toEqual(['vscode', 'custom:a', 'custom:c'])
|
||||
})
|
||||
})
|
||||
|
||||
describe('resolveOpenWithTargets', () => {
|
||||
const localCustom: CustomEditor = { id: 'e1', name: 'Windsurf', urlTemplate: 'windsurf://file/{path}', isVscodeFamily: false }
|
||||
const familyCustom: CustomEditor = { id: 'e2', name: 'Zed-like fork', urlTemplate: 'x-zed://file/{path}', isVscodeFamily: true }
|
||||
|
||||
it('lists built-ins first, then custom editors (local mode)', () => {
|
||||
const targets = resolveOpenWithTargets(parseOpenWithConfig({ customEditors: [localCustom] }))
|
||||
expect(targets.map(target => target.id)).toEqual(['explorer', 'vscode', 'cursor', 'zed', 'custom:e1'])
|
||||
expect(targets[0]?.kind).toBe('reveal')
|
||||
expect(targets[1]?.urlTemplate).toBe('vscode://file/{path}')
|
||||
})
|
||||
|
||||
it('excludes incomplete custom-editor rows from the menu (they stay in the blob)', () => {
|
||||
const targets = resolveOpenWithTargets(parseOpenWithConfig({
|
||||
customEditors: [
|
||||
{ id: 'e1', name: 'Windsurf', urlTemplate: 'windsurf://file/{path}', isVscodeFamily: false },
|
||||
{ id: 'e2', name: '', urlTemplate: 'incomplete://file/{path}', isVscodeFamily: true },
|
||||
],
|
||||
}))
|
||||
expect(targets.map(target => target.id)).toEqual(['explorer', 'vscode', 'cursor', 'zed', 'custom:e1'])
|
||||
})
|
||||
|
||||
it('drops local-only targets in SSH mode (file manager, Zed, non-VSCode custom)', () => {
|
||||
const config = parseOpenWithConfig({ sshHost: 'dev', customEditors: [localCustom, familyCustom] })
|
||||
const targets = resolveOpenWithTargets(config)
|
||||
expect(targets.map(target => target.id)).toEqual(['vscode', 'cursor', 'custom:e2'])
|
||||
})
|
||||
|
||||
it('prunes unknown pinned ids only when resolving (the parse keeps them)', () => {
|
||||
const config = parseOpenWithConfig({ pinned: ['ghost'] })
|
||||
expect(config.pinned).toEqual(['ghost'])
|
||||
expect(resolveOpenWithTargets(config).map(target => target.id)).toContain('vscode')
|
||||
})
|
||||
})
|
||||
|
||||
describe('openWithUrl', () => {
|
||||
const targets = resolveOpenWithTargets(parseOpenWithConfig({}))
|
||||
const byId = (id: string): OpenWithTarget => {
|
||||
const target = targets.find(item => item.id === id)
|
||||
if (target === undefined) throw new Error(`no target ${id}`)
|
||||
return target
|
||||
}
|
||||
|
||||
it('builds local file URLs with the raw path (backslashes normalized)', () => {
|
||||
expect(openWithUrl(byId('vscode'), '/home/u/f.ts', parseOpenWithConfig({}))).toBe('vscode://file//home/u/f.ts')
|
||||
expect(openWithUrl(byId('vscode'), 'C:\\Users\\u\\f.ts', parseOpenWithConfig({}))).toBe('vscode://file/C:/Users/u/f.ts')
|
||||
expect(openWithUrl(byId('zed'), '/x/y', parseOpenWithConfig({}))).toBe('zed://file//x/y')
|
||||
})
|
||||
|
||||
it('builds SSH-remote URLs for VSCode-family targets in SSH mode', () => {
|
||||
const config = parseOpenWithConfig({ sshHost: 'dev' })
|
||||
expect(openWithUrl(byId('vscode'), '/home/u/f.ts', config))
|
||||
.toBe('vscode://vscode-remote/ssh-remote+dev/home/u/f.ts')
|
||||
expect(openWithUrl(byId('cursor'), '/home/u/f.ts', config))
|
||||
.toBe('cursor://vscode-remote/ssh-remote+dev/home/u/f.ts')
|
||||
})
|
||||
|
||||
it('keeps the local URL form for non-VSCode-family targets even in SSH mode', () => {
|
||||
// (Such targets are hidden from the SSH menu; the URL builder stays honest.)
|
||||
expect(openWithUrl(byId('zed'), '/x', parseOpenWithConfig({ sshHost: 'dev' }))).toBe('zed://file//x')
|
||||
})
|
||||
|
||||
it('returns undefined for reveal targets and malformed templates', () => {
|
||||
expect(openWithUrl(byId('explorer'), '/x', parseOpenWithConfig({}))).toBeUndefined()
|
||||
const noScheme: OpenWithTarget = { id: 'x', name: '', kind: 'url', urlTemplate: 'not-a-url {path}', isVscodeFamily: false, localOnly: false }
|
||||
expect(openWithUrl(noScheme, '/x', parseOpenWithConfig({}))).toBeUndefined()
|
||||
const noSlash: OpenWithTarget = { id: 'y', name: '', kind: 'url', urlTemplate: 'a:file/{path}', isVscodeFamily: false, localOnly: false }
|
||||
expect(openWithUrl(noSlash, '/x', parseOpenWithConfig({}))).toBeUndefined()
|
||||
})
|
||||
|
||||
it('uses the custom template scheme for SSH URLs of VSCode-family custom editors', () => {
|
||||
const config = parseOpenWithConfig({
|
||||
sshHost: 'dev',
|
||||
customEditors: [
|
||||
{ id: 'e', name: 'Fork', urlTemplate: 'myfork://file/{path}', isVscodeFamily: true },
|
||||
],
|
||||
})
|
||||
const targets = resolveOpenWithTargets(config)
|
||||
expect(openWithUrl(targets[targets.length - 1]!, '/r/f.ts', config))
|
||||
.toBe('myfork://vscode-remote/ssh-remote+dev/r/f.ts')
|
||||
})
|
||||
})
|
||||
|
||||
describe('helpers', () => {
|
||||
it('normalizeUrlPath converts backslashes to slashes', () => {
|
||||
expect(normalizeUrlPath('a\\b\\c')).toBe('a/b/c')
|
||||
})
|
||||
|
||||
it('openWithSshActive trims the host', () => {
|
||||
expect(openWithSshActive(parseOpenWithConfig({ sshHost: ' ' }))).toBe(false)
|
||||
expect(openWithSshActive(parseOpenWithConfig({ sshHost: ' dev ' }))).toBe(true)
|
||||
})
|
||||
|
||||
it('isValidCustomEditor requires a name, a {path} placeholder and a scheme:// prefix', () => {
|
||||
expect(isValidCustomEditor({ name: 'A', urlTemplate: 'a://file/{path}' })).toBe(true)
|
||||
expect(isValidCustomEditor({ name: '', urlTemplate: 'a://file/{path}' })).toBe(false)
|
||||
expect(isValidCustomEditor({ name: 'A', urlTemplate: 'a://file/x' })).toBe(false)
|
||||
expect(isValidCustomEditor({ name: 'A', urlTemplate: 'a:file/{path}' })).toBe(false)
|
||||
})
|
||||
|
||||
it('newCustomEditorId yields unique non-empty ids', () => {
|
||||
const first = newCustomEditorId()
|
||||
const second = newCustomEditorId()
|
||||
expect(first).not.toBe(second)
|
||||
expect(first.length).toBeGreaterThan(0)
|
||||
})
|
||||
})
|
||||
@@ -28,8 +28,9 @@ beforeAll(() => {
|
||||
})
|
||||
})
|
||||
import { createBetterSidebarService, type BetterSidebarService } from '../src/client/service.ts'
|
||||
import type { TabDescriptor } from '../src/client/service.ts'
|
||||
import { FeatureSettingsRows, mergePluginSetting, SettingsBody, SideCardSection, type SideCardSectionProps } from '../src/client/SideCardSection.tsx'
|
||||
import { SIDEBAR_PREFS_DEFAULTS } from '../src/prefs-shared.ts'
|
||||
import { FeatureSettingsRows, mergePluginSetting, SideCardSection, type SideCardSectionProps } from '../src/client/SideCardSection.tsx'
|
||||
|
||||
/** One tab + one viewer + the subagent-style nested toggle under a tab. */
|
||||
function mount(): { store: SidebarStore; service: BetterSidebarService } {
|
||||
@@ -347,3 +348,68 @@ describe('FeatureSettingsRows valueSource (v0.12.0, independent CR fix)', () =>
|
||||
expect(html).toContain('checked=""')
|
||||
})
|
||||
})
|
||||
|
||||
describe('SettingsBody rows + custom render panel (open-with seam)', () => {
|
||||
it('renders the declarative rows AND the custom panel when both are declared', () => {
|
||||
const { store, service } = mount()
|
||||
const feature = {
|
||||
id: 'demo',
|
||||
title: () => 'Demo',
|
||||
component: () => null,
|
||||
settings: {
|
||||
toggles: [{
|
||||
key: 'autoOpenSubagent',
|
||||
title: () => 'Auto row',
|
||||
desc: () => 'row description',
|
||||
}],
|
||||
render: () => createElement('div', { 'data-custom-panel': true }, 'custom panel'),
|
||||
},
|
||||
} as unknown as TabDescriptor
|
||||
const html = renderToString(createElement(SettingsBody, {
|
||||
feature,
|
||||
prefs: SIDEBAR_PREFS_DEFAULTS,
|
||||
store,
|
||||
service,
|
||||
onToggle: () => {},
|
||||
onCommit: () => '',
|
||||
onSelectValue: () => {},
|
||||
onPluginToggle: () => {},
|
||||
onPluginCommit: () => '',
|
||||
onPluginSelectValue: () => {},
|
||||
onPluginWrite: () => {},
|
||||
onClose: () => {},
|
||||
}))
|
||||
expect(html).toContain('Auto row')
|
||||
expect(html).toContain('row description')
|
||||
expect(html).toContain('data-custom-panel')
|
||||
expect(html).toContain('custom panel')
|
||||
})
|
||||
|
||||
it('renders ONLY the custom panel when no rows are declared (unchanged behavior)', () => {
|
||||
const { store, service } = mount()
|
||||
const feature = {
|
||||
id: 'demo',
|
||||
title: () => 'Demo',
|
||||
component: () => null,
|
||||
settings: {
|
||||
render: () => createElement('div', { 'data-custom-panel': true }, 'custom panel'),
|
||||
},
|
||||
} as unknown as TabDescriptor
|
||||
const html = renderToString(createElement(SettingsBody, {
|
||||
feature,
|
||||
prefs: SIDEBAR_PREFS_DEFAULTS,
|
||||
store,
|
||||
service,
|
||||
onToggle: () => {},
|
||||
onCommit: () => '',
|
||||
onSelectValue: () => {},
|
||||
onPluginToggle: () => {},
|
||||
onPluginCommit: () => '',
|
||||
onPluginSelectValue: () => {},
|
||||
onPluginWrite: () => {},
|
||||
onClose: () => {},
|
||||
}))
|
||||
expect(html).toContain('custom panel')
|
||||
expect(html).not.toContain('Auto row')
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user