From dc1636f94694cdafc9579d5b5b5f5fdbbfa6030a Mon Sep 17 00:00:00 2001 From: miles-kt-inkeep <135626743+miles-kt-inkeep@users.noreply.github.com> Date: Tue, 30 Jun 2026 12:50:41 -0400 Subject: [PATCH] feat(open-knowledge): make sharing reachable from empty editor, file tree, and project root (#2286) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(open-knowledge): share project root when nothing is selected The editor-header Share trigger disabled whenever there was no active doc and no selected folder, so a freshly opened project (or one with everything deselected) had no way to share the project as a whole. Default the genuinely-empty editor to the folder-scope share's empty-string root sentinel so Share targets the content root instead of being a dead control. Non-shareable surfaces (asset previews, skill-bundle files, missing docs, managed skill/template tabs) keep the disabled trigger: each has a target or synthetic doc name set and never falls through to the new root default. * feat(open-knowledge): add Share to the file-tree right-click menu Add a Share item to the file-tree context menu, alongside the editor-header Share button. It builds the same share-link via runShareAction — folder rows share the folder (content-relative folderPath), doc rows share the doc — and copies the URL with a confirmation toast. Gating mirrors the header's shareable-surface rules: shown only for folders and real docs (never assets, which have no shareable doc path) and only when a GitHub remote exists (useGitSyncStatusDetailed().hasRemote). No-remote routing to the Publish wizard stays the header's job; the sidebar simply hides the item, matching the "if sharing is enabled" intent. The rare server-side no-remote divergence falls back to an explanatory toast. * feat(open-knowledge): share the project root from the sidebar root menu Right-clicking the project-root header row (the project name at the top of the file tree) previously did nothing — it's a CollapsibleTrigger button, so the sidebar's context-menu handler suppressed it as an interactive control. Exempt the root header (data-sidebar-root-context) so the right-click falls through to the existing project-scoped ContextMenu instead of being swallowed; left-click still toggles the group. Add a Share item to that project-root menu (the empty-space menu), gated on a GitHub remote like the header button and file-tree rows. It shares the content root via buildFolderShareInput('') and copies the link with a confirmation toast, reusing runShareAction. * refactor(open-knowledge): address share-menu review suggestions Apply the actionable suggestions from the PR review: - Hoist the duplicated Share menu-item JSX in FileTreeMenu into a single shareMenuItem const rendered in both the folder and file branches, so the item's icon/test-id/ordering has one source of truth. - Move the sidebar empty-space Share item above "Copy full path" so the project-root menu ordering (OpenInAgent -> Share -> Copy path) matches the file-tree row menu. - Add an EditorHeader test pinning the managed-artifact (skill/template) share-disable path — a skill doc name yields a null share input — covering the parseManagedArtifactName guard that was previously untested. Deferred (out of scope): extracting a shared makeShareDeps/useShareDispatch factory for the runShareAction wiring across FileTree, FileSidebar, and ShareButton. Worth a focused follow-up since ShareButton's clipboard-error toast suppression is a real variation to parameterize. * chore(open-knowledge): trim verbose share-feature comments Collapse the multi-line explanatory comments added for the share work down to single descriptive lines across EditorHeader, FileTree, FileSidebar, and their share tests. No behavior change. --------- GitOrigin-RevId: 147efaf2d619c5e2afce6a9aff1a1b1046dfde52 --- .changeset/share-button-root-fallback.md | 11 + .../src/components/EditorHeader.dom.test.tsx | 51 ++- packages/app/src/components/EditorHeader.tsx | 3 + .../components/FileSidebar.share.dom.test.tsx | 235 ++++++++++ packages/app/src/components/FileSidebar.tsx | 37 +- .../components/FileTree.share.dom.test.tsx | 415 ++++++++++++++++++ packages/app/src/components/FileTree.tsx | 51 +++ packages/app/src/locales/en/messages.json | 1 + packages/app/src/locales/en/messages.po | 7 + packages/app/src/locales/pseudo/messages.json | 1 + packages/app/src/locales/pseudo/messages.po | 7 + 11 files changed, 817 insertions(+), 2 deletions(-) create mode 100644 .changeset/share-button-root-fallback.md create mode 100644 packages/app/src/components/FileSidebar.share.dom.test.tsx create mode 100644 packages/app/src/components/FileTree.share.dom.test.tsx diff --git a/.changeset/share-button-root-fallback.md b/.changeset/share-button-root-fallback.md new file mode 100644 index 000000000..5d47af31f --- /dev/null +++ b/.changeset/share-button-root-fallback.md @@ -0,0 +1,11 @@ +--- +"@inkeep/open-knowledge-app": patch +--- + +Make sharing reachable from more places. + +Keep the editor-header Share button usable when nothing is open or selected. Previously the trigger was disabled whenever there was no active doc and no selected folder (a freshly opened project, or after deselecting everything), leaving no way to grab a link to the project as a whole. The genuinely-empty editor now defaults to sharing the content root via the folder-scope share's empty-string root sentinel, so Share is no longer a dead control just because nothing is focused. Non-shareable surfaces — asset previews, skill-bundle files, missing docs, and managed skill/template tabs — still keep the trigger disabled, since those have a target or synthetic doc name and never fall through to the root default. + +Add a Share item to the file-tree right-click menu. It appears for folders and docs (never assets) and only when the project has a GitHub remote, reusing the same share-link path as the header button — folder rows share the folder, doc rows share the doc, and the link is copied to the clipboard with a confirmation toast. + +Make the project-root context menu reachable. Right-clicking the project-root header row (the project name at the top of the sidebar) previously did nothing — it was suppressed as an interactive control. It now opens the existing project-scoped menu, which gains a Share item that shares the content root (and shows alongside New file/folder, Reveal, Copy path, etc.). Root Share is likewise gated on a GitHub remote. diff --git a/packages/app/src/components/EditorHeader.dom.test.tsx b/packages/app/src/components/EditorHeader.dom.test.tsx index 8395dddd8..f8670e519 100644 --- a/packages/app/src/components/EditorHeader.dom.test.tsx +++ b/packages/app/src/components/EditorHeader.dom.test.tsx @@ -19,6 +19,7 @@ let activeDocName: string | null = 'docs/notes'; let activeTarget: unknown = { kind: 'doc' }; let sidebarState: 'expanded' | 'collapsed' = 'expanded'; let isDraggingRail = false; +let lastShareInput: unknown; mock.module('@/editor/DocumentContext', () => ({ useDocumentContext: () => ({ activeDocName, activeTarget }), @@ -38,7 +39,14 @@ mock.module('./EditorTabs', () => ({ })); mock.module('./ShareButton', () => ({ - ShareButton: () => , + ShareButton: ({ input }: { input: unknown }) => { + lastShareInput = input; + return ( + + ); + }, })); mock.module('./PublishToGitHubDialog', () => ({ @@ -92,6 +100,7 @@ describe('EditorHeader runtime behavior', () => { activeTarget = { kind: 'doc' }; sidebarState = 'expanded'; isDraggingRail = false; + lastShareInput = undefined; }); test('exports the EditorHeader component', async () => { @@ -166,4 +175,44 @@ describe('EditorHeader runtime behavior', () => { expect(screen.queryByText('projectName')).toBeNull(); expect(screen.queryByText('assetFileName')).toBeNull(); }); + + test('an active doc yields a doc-scope share input', async () => { + activeDocName = 'docs/notes'; + activeTarget = { kind: 'doc' }; + await renderHeader(); + + expect(lastShareInput).toEqual({ kind: 'doc', docName: 'docs/notes' }); + }); + + test('a selected folder yields a folder-scope share input', async () => { + activeDocName = null; + activeTarget = { kind: 'folder', folderPath: 'guides' }; + await renderHeader(); + + expect(lastShareInput).toEqual({ kind: 'folder', folderRelativePath: 'guides' }); + }); + + test('nothing open or selected defaults to sharing the project root', async () => { + activeDocName = null; + activeTarget = null; + await renderHeader(); + + expect(lastShareInput).toEqual({ kind: 'folder', folderRelativePath: '' }); + }); + + test('a managed-artifact doc (skill/template) keeps the share trigger disabled', async () => { + activeDocName = '__skill__/project/my-skill'; + activeTarget = { kind: 'doc' }; + await renderHeader(); + + expect(lastShareInput).toBeNull(); + }); + + test('a non-shareable asset target keeps the share trigger disabled', async () => { + activeDocName = null; + activeTarget = { kind: 'asset', assetPath: 'img/logo.png' }; + await renderHeader(); + + expect(lastShareInput).toBeNull(); + }); }); diff --git a/packages/app/src/components/EditorHeader.tsx b/packages/app/src/components/EditorHeader.tsx index d190b73b3..d15937c35 100644 --- a/packages/app/src/components/EditorHeader.tsx +++ b/packages/app/src/components/EditorHeader.tsx @@ -46,6 +46,9 @@ export function EditorHeader({ onSignIn, onSetIdentity, onOpenSearch }: EditorHe if (activeDocName && !managedArtifact) { return buildDocShareInput(activeDocName); } + if (!activeTarget && !activeDocName) { + return buildFolderShareInput(''); + } return null; })(); diff --git a/packages/app/src/components/FileSidebar.share.dom.test.tsx b/packages/app/src/components/FileSidebar.share.dom.test.tsx new file mode 100644 index 000000000..44e2ec51b --- /dev/null +++ b/packages/app/src/components/FileSidebar.share.dom.test.tsx @@ -0,0 +1,235 @@ +import { afterEach, beforeEach, describe, expect, mock, test } from 'bun:test'; +import { cleanup, render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import type { ReactNode } from 'react'; + +let hasRemote = true; +let lastShareInput: unknown; +const runShareActionMock = mock(async (input: unknown) => { + lastShareInput = input; + return { kind: 'copied' as const, shareUrl: 'https://example.test/x', branch: 'main' }; +}); + +function PassThrough({ children }: { children?: ReactNode }) { + return <>{children}; +} + +function ElementPassThrough({ + children, + asChild: _asChild, + ...props +}: { + children?: ReactNode; + asChild?: boolean; + [key: string]: unknown; +}) { + return
{children}
; +} + +function Button({ + children, + asChild: _asChild, + onCheckedChange, + onSelect, + checked, + size: _size, + variant: _variant, + ...props +}: { + children?: ReactNode; + asChild?: boolean; + onCheckedChange?: (checked: boolean) => void; + onSelect?: () => void; + checked?: boolean; + size?: unknown; + variant?: unknown; + [key: string]: unknown; +}) { + return ( + + ); +} + +mock.module('@/lib/perf', () => ({ ProfilerBoundary: PassThrough })); + +mock.module('@/components/FileTree', () => ({ + FileTree: () =>
, +})); + +mock.module('@/components/ConflictsSection', () => ({ ConflictsSection: () => null })); + +mock.module('@/hooks/use-git-sync-status', () => ({ + useGitSyncStatusDetailed: () => ({ + status: { hasRemote, syncEnabled: hasRemote, behind: 0, ahead: 0 }, + fetchError: null, + }), + useGitSyncStatus: () => ({ hasRemote, syncEnabled: hasRemote, behind: 0, ahead: 0 }), +})); + +mock.module('@/lib/share/clipboard-adapter', () => ({ + scheduleClipboardWrite: async () => {}, +})); + +mock.module('@/lib/share/run-share-action', () => ({ + buildFolderShareInput: (folderRelativePath: string) => ({ kind: 'folder', folderRelativePath }), + runShareAction: runShareActionMock, +})); + +mock.module('@/components/ui/button', () => ({ Button })); + +mock.module('@/components/ui/collapsible', () => ({ + Collapsible: ({ children, defaultOpen: _defaultOpen, ...props }: Record) => ( +
{children as ReactNode}
+ ), + CollapsibleContent: ElementPassThrough, + CollapsibleTrigger: Button, +})); + +mock.module('@/components/ui/sidebar', () => ({ + Sidebar: ElementPassThrough, + SidebarContent: ElementPassThrough, + SidebarFooter: ElementPassThrough, + SidebarHeader: ElementPassThrough, + SidebarMenu: ElementPassThrough, + SidebarMenuItem: ElementPassThrough, + SidebarGroup: ElementPassThrough, + SidebarGroupContent: ElementPassThrough, + SidebarGroupLabel: ElementPassThrough, + SidebarRail: () => null, + useSidebar: () => ({ state: 'expanded', toggleSidebar: () => {} }), +})); + +mock.module('@/components/SkillsSidebarSection', () => ({ + SkillsSidebarSection: () => null, +})); + +mock.module('@/components/ui/context-menu', () => ({ + ContextMenu: PassThrough, + ContextMenuCheckboxItem: Button, + ContextMenuContent: ElementPassThrough, + ContextMenuItem: Button, + ContextMenuSeparator: () =>
, + ContextMenuSub: PassThrough, + ContextMenuSubContent: ElementPassThrough, + ContextMenuSubTrigger: Button, + ContextMenuTrigger: PassThrough, +})); + +mock.module('@/components/ui/dropdown-menu', () => ({ + DropdownMenu: PassThrough, + DropdownMenuContent: ElementPassThrough, + DropdownMenuItem: Button, + DropdownMenuSeparator: () => null, + DropdownMenuTrigger: PassThrough, +})); + +mock.module('@/components/ui/tooltip', () => ({ + Tooltip: PassThrough, + TooltipContent: ElementPassThrough, + TooltipTrigger: PassThrough, +})); + +mock.module('@/components/handoff/OpenInAgentEmptySpaceSubmenu', () => ({ + OpenInAgentEmptySpaceSubmenu: () => null, +})); + +mock.module('@/components/handoff/useHandoffDispatch', () => ({ + buildFolderHandoffInput: () => null, + buildHandoffInput: () => null, + buildProjectScopedHandoffInput: () => ({ docContext: null, docPath: '', projectDir: '/tmp/ok' }), + useHandoffDispatch: () => ({ dispatch: async () => ({ ok: true as const }) }), +})); + +mock.module('@/components/handoff/useInstalledAgents', () => ({ + useInstalledAgents: () => ({ states: {} }), +})); + +mock.module('@/components/ProjectSwitcher', () => ({ ProjectSwitcher: () => null })); + +mock.module('@/components/SidebarSearchBar', () => ({ + SidebarSearchBar: () => , + onPillRenderError: () => {}, +})); + +mock.module('@/components/UpdateNotices', () => ({ UpdateNotices: () => null })); + +mock.module('@/editor/DocumentContext', () => ({ + useDocumentContext: () => ({ + activeDocName: 'notes/source', + activeTarget: { kind: 'doc', target: 'notes/source', docName: 'notes/source' }, + }), +})); + +mock.module('@/hooks/use-folder-config', () => ({ + useFolderConfig: () => ({ + state: { status: 'ready', data: { folder: { templates_available: [] } } }, + }), +})); + +mock.module('@/lib/config-provider', () => ({ + useConfigContext: () => ({ + projectLocalBinding: { patch: () => ({ ok: true as const }) }, + merged: { appearance: { sidebar: { showHiddenFiles: false } } }, + }), +})); + +mock.module('@/lib/use-workspace', () => ({ + useWorkspace: () => ({ contentDir: '/tmp/open-knowledge', pathSeparator: '/' }), +})); + +mock.module('sonner', () => ({ + toast: { error: mock(() => {}), success: mock(() => {}) }, +})); + +const { FileSidebar } = await import('./FileSidebar'); + +describe('FileSidebar project-root Share', () => { + beforeEach(() => { + hasRemote = true; + lastShareInput = undefined; + runShareActionMock.mockClear(); + Object.defineProperty(window, 'okDesktop', { configurable: true, value: undefined }); + }); + + afterEach(() => { + cleanup(); + }); + + test('the project-root header is marked so right-clicks open the project menu', async () => { + render( {}} />); + const header = await screen.findByText('open-knowledge'); + expect(header.closest('[data-sidebar-root-context]')).not.toBeNull(); + }); + + test('empty-space menu shows Share and dispatches a root-scope share input', async () => { + const user = userEvent.setup(); + render( {}} />); + + const share = await screen.findByTestId('empty-space-menu-share'); + await user.click(share); + + expect(runShareActionMock).toHaveBeenCalledTimes(1); + expect(lastShareInput).toMatchObject({ + kind: 'folder', + folderRelativePath: '', + hasRemote: true, + }); + }); + + test('Share is hidden when the project has no GitHub remote', async () => { + hasRemote = false; + render( {}} />); + + await screen.findByTestId('empty-space-menu-new-file'); + expect(screen.queryByTestId('empty-space-menu-share')).toBeNull(); + }); +}); diff --git a/packages/app/src/components/FileSidebar.tsx b/packages/app/src/components/FileSidebar.tsx index 073c0115c..9c054f846 100644 --- a/packages/app/src/components/FileSidebar.tsx +++ b/packages/app/src/components/FileSidebar.tsx @@ -8,6 +8,7 @@ import { FolderPlus, FoldVertical, ListCollapse, + Share2, SquarePen, UnfoldVertical, } from 'lucide-react'; @@ -62,6 +63,7 @@ import { import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; import { useDocumentContext } from '@/editor/DocumentContext'; import { useFolderConfig } from '@/hooks/use-folder-config'; +import { useGitSyncStatusDetailed } from '@/hooks/use-git-sync-status'; import { useIsEmbedded } from '@/hooks/use-is-embedded'; import { useConfigContext } from '@/lib/config-provider'; import { subscribeToCreateTopLevelFile } from '@/lib/create-file-events'; @@ -77,6 +79,8 @@ import { } from '@/lib/file-tree-menu-action-events'; import { VISIBLE_TARGETS } from '@/lib/handoff/targets'; import { ProfilerBoundary } from '@/lib/perf'; +import { scheduleClipboardWrite } from '@/lib/share/clipboard-adapter'; +import { buildFolderShareInput, runShareAction } from '@/lib/share/run-share-action'; import { useWorkspace } from '@/lib/use-workspace'; import { cn } from '@/lib/utils'; @@ -184,6 +188,8 @@ function FileSidebarInner({ onOpenSearch }: FileSidebarProps) { const bridge = typeof window !== 'undefined' ? window.okDesktop : undefined; const workspace = useWorkspace(); + const { status: gitSyncStatus } = useGitSyncStatusDetailed(); + const hasRemote = gitSyncStatus?.hasRemote === true; const projectName = bridge?.config?.projectName || workspace?.contentDir.split('/').filter(Boolean).pop() || @@ -198,6 +204,9 @@ function FileSidebarInner({ onOpenSearch }: FileSidebarProps) { const showEmptySpaceTreeStateSection = showEmptySpaceExpandAll || showEmptySpaceCollapseAll; const handleSidebarSurfaceContextMenu: MouseEventHandler = (event) => { + if (event.target instanceof Element && event.target.closest('[data-sidebar-root-context]')) { + return; + } if (isInteractiveSidebarControl(event.target)) { event.preventDefault(); event.stopPropagation(); @@ -230,6 +239,23 @@ function FileSidebarInner({ onOpenSearch }: FileSidebarProps) { toast.error(t`Could not copy full path`); } }; + const handleEmptySpaceShare = () => { + void runShareAction( + { + ...buildFolderShareInput(''), + hasRemote, + onClickWhenNoRemote: () => { + toast.error(t`Connect this project to GitHub to share.`); + }, + }, + { + clipboardWrite: scheduleClipboardWrite, + toastSuccess: (msg) => toast.success(msg), + toastError: (msg) => toast.error(msg), + logEvent: (msg) => console.log(msg), + }, + ); + }; const handleEmptySpaceShowHiddenFilesToggle = (checked: boolean) => { if (projectLocalBinding === null) return; const result = projectLocalBinding.patch({ @@ -604,7 +630,10 @@ function FileSidebarInner({ onOpenSearch }: FileSidebarProps) { headers + their content share the same gutter alignment. */} - + {projectName} @@ -756,6 +785,12 @@ function FileSidebarInner({ onOpenSearch }: FileSidebarProps) { installStates={handoffInstallStates} dispatch={dispatchHandoff} /> + {hasRemote ? ( + + + ) : null} { + lastShareInput = input; + return { kind: 'copied' as const, shareUrl: 'https://example.test/x', branch: 'main' }; +}); + +type MenuItemProps = { + children?: ReactNode; + checked?: boolean; + disabled?: boolean; + onCheckedChange?: (checked: boolean) => void; + onSelect?: () => void; + [key: string]: unknown; +}; + +function PassThrough({ children }: { children?: ReactNode }) { + return <>{children}; +} + +function MenuItem({ + children, + checked, + disabled, + onCheckedChange, + onSelect, + variant: _variant, + ...props +}: MenuItemProps) { + const handleClick = () => { + onCheckedChange?.(!checked); + onSelect?.(); + }; + if (checked !== undefined) { + return ( + + ); + } + return ( + + ); +} + +function MenuContent({ children }: { children?: ReactNode }) { + return
{children}
; +} + +function MenuSeparator() { + return
; +} + +const toastSuccessMock = mock(() => {}); +const toastErrorMock = mock(() => {}); + +const DOCUMENTS: FileEntry[] = [ + { kind: 'folder', path: 'notes', size: 0, modified: '2026-05-18T00:00:00.000Z' }, + { + kind: 'document', + docName: 'notes/source', + docExt: '.mdx', + size: 1, + modified: '2026-05-18T00:00:00.000Z', + }, + { + kind: 'asset', + path: 'images/logo.png', + assetExt: '.png', + mediaKind: 'image', + referencedBy: ['notes/source'], + size: 1, + modified: '2026-05-18T00:00:00.000Z', + } as FileEntry, +]; + +class StubItem { + expanded = false; + selected = false; + constructor( + readonly path: string, + private readonly directory: boolean, + ) {} + getPath() { + return this.path; + } + isDirectory() { + return this.directory; + } + isExpanded() { + return this.expanded; + } + expand() { + this.expanded = true; + } + collapse() { + this.expanded = false; + } + isSelected() { + return this.selected; + } + select() { + this.selected = true; + } + deselect() { + this.selected = false; + } + focus() {} +} + +class StubModel { + focusedPath: string | null = null; + selectedPaths: string[] = []; + items = new Map(); + startRenaming = mock(() => {}); + getFocusedPath() { + return this.focusedPath; + } + getFocusedIndex() { + return -1; + } + getItemHeight() { + return 24; + } + getSelectedPaths() { + return this.selectedPaths; + } + getItem(path: string) { + return this.items.get(path) ?? null; + } + resetPaths(paths: string[]) { + this.items.clear(); + for (const path of paths) { + this.items.set(path, new StubItem(path, path.endsWith('/'))); + } + } + add(path: string) { + this.items.set(path, new StubItem(path, path.endsWith('/'))); + } + move() {} + remove() {} + subscribe() { + return () => {}; + } + onMutation() { + return () => {}; + } + isSearchOpen() { + return false; + } +} + +let model = new StubModel(); +let menuItem: { kind: 'file' | 'directory'; path: string }; +let closeMenuMock = mock(() => {}); + +function jsonResponse(body: unknown, status = 200): Response { + return new Response(JSON.stringify(body), { + status, + headers: { 'content-type': 'application/json' }, + }); +} + +function makeFetchMock() { + return mock(async (input: RequestInfo | URL) => { + const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url; + if (url.startsWith('/api/documents')) return jsonResponse({ documents: DOCUMENTS }); + if (url === '/api/workspace') { + return jsonResponse({ + contentDir: '/tmp/open-knowledge', + pathSeparator: '/', + symlinkResolved: true, + }); + } + return jsonResponse({}); + }); +} + +mock.module('sonner', () => ({ + toast: { success: toastSuccessMock, error: toastErrorMock }, +})); + +mock.module('next-themes', () => ({ + useTheme: () => ({ resolvedTheme: 'light' }), +})); + +mock.module('@/hooks/use-git-sync-status', () => ({ + useGitSyncStatusDetailed: () => ({ + status: { hasRemote, syncEnabled: hasRemote, behind: 0, ahead: 0 }, + fetchError: null, + }), + useGitSyncStatus: () => ({ hasRemote, syncEnabled: hasRemote, behind: 0, ahead: 0 }), +})); + +mock.module('@/lib/share/clipboard-adapter', () => ({ + scheduleClipboardWrite: async () => {}, +})); + +mock.module('@/lib/share/run-share-action', () => ({ + buildDocShareInput: (docName: string) => ({ kind: 'doc', docName }), + buildFolderShareInput: (folderRelativePath: string) => ({ kind: 'folder', folderRelativePath }), + runShareAction: runShareActionMock, +})); + +mock.module('@/editor/DocumentContext', () => ({ + useDocumentContext: () => ({ + activeDocName: 'notes/source', + activeTarget: { kind: 'doc', target: 'notes/source', docName: 'notes/source' }, + closeTabs: () => {}, + closeDocument: () => {}, + closeAndClearDocument: async () => {}, + closeAndClearForDelete: async () => {}, + closeAndClearForRename: async () => {}, + getPoolActiveDocName: () => 'notes/source', + poolHas: () => true, + isNewTabActive: false, + openTarget: () => {}, + prewarm: () => {}, + remapTabsForRename: () => {}, + }), +})); + +mock.module('@/components/PageListContext', () => ({ + usePageList: () => ({ addPage: () => {}, pageMeta: new Map() }), +})); + +mock.module('./ui/sidebar', () => ({ + useSidebar: () => ({ notifySidebarFileSelected: () => {} }), +})); + +mock.module('@/lib/config-provider', () => ({ + useConfigContext: () => ({ okignoreBinding: null, projectLocalBinding: null, merged: null }), +})); + +mock.module('./handoff/useInstalledAgents', () => ({ + useInstalledAgents: () => ({ states: {} }), +})); + +mock.module('./handoff/useHandoffDispatch', () => ({ + buildFolderHandoffInput: () => null, + buildHandoffInput: () => null, + useHandoffDispatch: () => ({ dispatch: async () => ({ ok: true as const }) }), +})); + +mock.module('./handoff/OpenInAgentContextSubmenu', () => ({ + OpenInAgentContextSubmenu: () => ( + + ), +})); + +mock.module('./sidebar-hover-prewarm', () => ({ + cancelHoverPrewarm: () => {}, + scheduleHoverPrewarm: () => {}, +})); + +mock.module('@/components/ui/button', () => ({ + Button: ({ children, ...props }: { children?: ReactNode; [key: string]: unknown }) => ( + + ), +})); + +mock.module('@/components/ui/dialog', () => ({ Dialog: PassThrough })); + +mock.module('@/components/ui/dropdown-menu', () => ({ + DropdownMenu: PassThrough, + DropdownMenuCheckboxItem: MenuItem, + DropdownMenuContent: MenuContent, + DropdownMenuItem: MenuItem, + DropdownMenuSeparator: MenuSeparator, + DropdownMenuSub: PassThrough, + DropdownMenuSubContent: MenuContent, + DropdownMenuSubTrigger: MenuItem, + DropdownMenuTrigger: PassThrough, +})); + +mock.module('@/components/ui/skeleton', () => ({ + Skeleton: ({ className }: { className?: string }) => , +})); + +mock.module('@/components/DeleteConfirmationDialog', () => ({ + DeleteConfirmationDialog: () => null, +})); + +mock.module('@/components/NewItemDialog', () => ({ NewItemDialog: () => null })); + +mock.module('@/components/TrashFailureModal', () => ({ + TrashFailureModal: () => null, + coerceTrashFailureReason: (reason: string) => reason, +})); + +mock.module('@/components/use-selection-mirror', () => ({ + asDirectoryHandle: (item: StubItem | null) => (item?.isDirectory() ? item : null), + useSelectionMirror: () => {}, +})); + +mock.module('@pierre/trees', () => ({ + FILE_TREE_TAG_NAME: 'ok-file-tree', + themeToTreeStyles: () => ({}), +})); + +mock.module('@pierre/trees/react', () => ({ + useFileTree: () => ({ model }), + FileTree: ({ + renderContextMenu, + onClickCapture, + onMouseMove, + onMouseLeave, + }: { + renderContextMenu?: ( + item: typeof menuItem, + context: { close: typeof closeMenuMock }, + ) => ReactNode; + onClickCapture?: MouseEventHandler; + onMouseMove?: MouseEventHandler; + onMouseLeave?: MouseEventHandler; + }) => ( +
+ {renderContextMenu?.(menuItem, { close: closeMenuMock })} +
+ ), +})); + +const { FileTree } = await import('./FileTree'); + +function renderFileTree() { + return render(); +} + +describe('FileTree context-menu Share action', () => { + let consoleLogSpy: ReturnType; + + beforeEach(() => { + model = new StubModel(); + menuItem = { kind: 'file', path: 'notes/source.mdx' }; + closeMenuMock = mock(() => {}); + hasRemote = true; + lastShareInput = undefined; + globalThis.fetch = makeFetchMock() as unknown as typeof fetch; + runShareActionMock.mockClear(); + toastSuccessMock.mockClear(); + toastErrorMock.mockClear(); + consoleLogSpy = spyOn(console, 'log').mockImplementation(() => {}); + }); + + afterEach(() => { + cleanup(); + consoleLogSpy.mockRestore(); + }); + + test('a doc row shows Share and dispatches a doc-scope share input', async () => { + const user = userEvent.setup(); + renderFileTree(); + + const share = await screen.findByTestId('file-tree-menu-share'); + expect(share.querySelector('svg[aria-hidden="true"]')).not.toBeNull(); + + await user.click(share); + + expect(closeMenuMock).toHaveBeenCalled(); + await waitFor(() => expect(runShareActionMock).toHaveBeenCalledTimes(1)); + expect(lastShareInput).toMatchObject({ kind: 'doc', docName: 'notes/source', hasRemote: true }); + }); + + test('a folder row dispatches a folder-scope share input', async () => { + menuItem = { kind: 'directory', path: 'notes/' }; + const user = userEvent.setup(); + renderFileTree(); + + await user.click(await screen.findByTestId('file-tree-menu-share')); + + await waitFor(() => expect(runShareActionMock).toHaveBeenCalledTimes(1)); + expect(lastShareInput).toMatchObject({ kind: 'folder', folderRelativePath: 'notes' }); + }); + + test('an asset row does not show Share (no shareable doc path)', async () => { + menuItem = { kind: 'file', path: 'images/logo.png' }; + renderFileTree(); + + await screen.findByText('Copy path'); + expect(screen.queryByTestId('file-tree-menu-share')).toBeNull(); + }); + + test('Share is hidden when the project has no GitHub remote', async () => { + hasRemote = false; + renderFileTree(); + + await screen.findByText('Copy path'); + expect(screen.queryByTestId('file-tree-menu-share')).toBeNull(); + }); +}); diff --git a/packages/app/src/components/FileTree.tsx b/packages/app/src/components/FileTree.tsx index 7842bd291..d204533a8 100644 --- a/packages/app/src/components/FileTree.tsx +++ b/packages/app/src/components/FileTree.tsx @@ -39,6 +39,7 @@ import { Info, Pencil, RefreshCw, + Share2, SquarePen, Trash2, TriangleAlert, @@ -179,6 +180,7 @@ import { captureRenameSnapshots } from '@/editor/editor-cache'; import { assetTabId, docTabId, folderTabId, remapPathForFolderRenames } from '@/editor/editor-tabs'; import { useConflicts } from '@/hooks/use-conflicts'; import { useFolderConfig } from '@/hooks/use-folder-config'; +import { useGitSyncStatusDetailed } from '@/hooks/use-git-sync-status'; import { useConfigContext } from '@/lib/config-provider'; import { hashFromAssetPath, @@ -195,6 +197,13 @@ import { import { parseServerResponse, parseSuccessOrWarn } from '@/lib/parse-server-response'; import { createRefreshScheduler } from '@/lib/refresh-scheduler'; import { getRelaunchInFlightSnapshot, useRelaunchInFlight } from '@/lib/relaunch-store'; +import { scheduleClipboardWrite } from '@/lib/share/clipboard-adapter'; +import { + buildDocShareInput, + buildFolderShareInput, + runShareAction, + type ShareTargetInput, +} from '@/lib/share/run-share-action'; import { consumeShowAllStream, isNdjsonResponse, @@ -656,6 +665,46 @@ function FileTreeMenu({ const closeForInlineSurface = () => context.close({ restoreFocus: false }); const close = () => context.close(); + const { status: gitSyncStatus } = useGitSyncStatusDetailed(); + const hasRemote = gitSyncStatus?.hasRemote === true; + const shareInput: ShareTargetInput | null = + isAsset || target.kind === 'asset' + ? null + : isFolder + ? buildFolderShareInput(treeDirectoryPathToFolderPath(item.path)) + : buildDocShareInput(treeFilePathToDocName(item.path)); + const canShare = hasRemote && shareInput !== null; + const handleShare = () => { + if (!shareInput) return; + void runShareAction( + { + ...shareInput, + hasRemote, + onClickWhenNoRemote: () => { + toast.error(t`Connect this project to GitHub to share.`); + }, + }, + { + clipboardWrite: scheduleClipboardWrite, + toastSuccess: (msg) => toast.success(msg), + toastError: (msg) => toast.error(msg), + logEvent: (msg) => console.log(msg), + }, + ); + }; + const shareMenuItem = canShare ? ( + { + close(); + handleShare(); + }} + > + + ) : null; + const handleShowHiddenFilesToggle = (checked: boolean) => { if (projectLocalBinding === null) return; const result = projectLocalBinding.patch({ @@ -753,6 +802,7 @@ function FileTreeMenu({ isElectronHost={handoff.isElectronHost} dispatch={handoff.dispatch} /> + {shareMenuItem}