feat(desktop): add right-click context menu to changes tab file items by Kitenite · Pull Request #658 · superset-sh/superset

Kitenite · 2026-01-07T23:29:22Z

Summary

Add right-click context menu to file items in the Changes tab with options for opening in split pane, external app, new/existing tab, and discarding changes (unstaged files only)
Use a shared FileContextMenuProps type throughout the component hierarchy to reduce code duplication and ensure consistency across all file categories (against-base, commits, staged, unstaged)

Summary by CodeRabbit

New Features
- Added right-click context menu for file items in the Changes view with actions to open in split pane (horizontal/vertical), open in app, switch to or create tabs, and discard changes for modified or untracked files.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Add a context menu for file items in the Changes tab with the following options: - Open in Split Pane (Horizontal/Vertical) - Open in App (external editor) - Open in Tab (existing or new tab) - Discard Changes (unstaged files only) Uses a shared FileContextMenuProps type throughout the component hierarchy to reduce code duplication. Context menu works for all file categories: against-base, commits, staged, and unstaged.

coderabbitai · 2026-01-07T23:29:33Z

📝 Walkthrough

Walkthrough

This PR introduces context menu support for file items in the Sidebar's ChangesView component. It defines a shared context menu contract, threads props through multiple file list components, creates a new FileItemContextMenu component for rendering contextual actions, adds mutations for discarding/deleting files, and integrates these handlers into the Sidebar to wire tab and file actions.

Changes

Cohort / File(s)	Summary
Type definitions and contracts `FileList.tsx`, `FileItem.tsx`, `FileItemContextMenu.tsx`	Introduces FileContextMenuProps and FileItemContextMenuProps interfaces defining callbacks for file actions (split pane, open in app, move to tab, discard changes).
New context menu component `FileItemContextMenu.tsx` (new)	New component rendering right-click context menu with horizontal/vertical split, open in app, tab management, and optional discard changes actions.
File list prop threading `FileList.tsx`, `FileListTree.tsx`, `FileListGrouped.tsx`	Adds contextMenuProps optional prop and propagates through tree and grouped render paths to enable per-file context menu callbacks.
File item prop threading `FileItem.tsx`, `CommitItem.tsx`	Updated to accept and forward contextMenuProps to enable context menu rendering on individual files and commit items.
Integration and mutations `ChangesView.tsx`	Adds discardChangesMutation and deleteUntrackedMutation hooks, implements handleDiscardChanges logic, creates getContextMenuProps helper, and threads contextMenuProps through FileList and CommitItem usages.
Sidebar integration `Sidebar/index.tsx`	Builds contextMenuProps by reading workspace/tab state; provides handlers for split pane, open in app, move to tab, and new tab actions; passes to ChangesView.
Export surface updates `FileItem/index.ts`, `FileList/index.ts`, `ChangesView/index.ts`, `Sidebar/index.tsx`	Re-exports new types FileContextMenuProps and FileItemContextMenu to extend public API.

Sequence Diagram

sequenceDiagram
    actor User
    participant Sidebar
    participant ChangesView
    participant FileList
    participant FileItem as FileItem/ContextMenu
    participant TabStore as TabsStore
    participant API

    User->>FileItem: Right-click file
    FileItem->>FileItem: Render context menu
    
    alt User selects "Open in Split"
        User->>FileItem: Click action
        FileItem->>Sidebar: onOpenInSplitHorizontal(file)
        Sidebar->>TabStore: splitPaneHorizontal()
        Sidebar->>TabStore: addFileViewerPane(file)
    else User selects "Open in App"
        User->>FileItem: Click action
        FileItem->>Sidebar: onOpenInApp(file)
        Sidebar->>API: openInApp mutation
    else User selects "Move to Tab"
        User->>FileItem: Click action
        FileItem->>Sidebar: onMoveToTab(tabId, file)
        Sidebar->>TabStore: addTab / switch tab
        Sidebar->>TabStore: addFileViewerPane(file)
    else User selects "Discard Changes"
        User->>FileItem: Click action
        FileItem->>ChangesView: onDiscardChanges(file)
        ChangesView->>API: discardChangesMutation / deleteUntrackedMutation
        API-->>ChangesView: Success, refetch
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

feat(desktop): add Kaleidoscope-style git diff viewer in Changes tab #310: Introduces foundational FileList/FileItem/CommitItem components that this PR extends with shared context menu props and mutations.
Changes tab UI beautification #317: Modifies the same ChangesView sidebar components (FileItem, CommitItem, FileList), indicating overlapping feature development in this area.

Poem

🐰 A menu blooms on right-click's call,
Files dance across split panes so tall,
Tabs shuffle, discard, and move with grace,
Context flows through every place!

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description provides a summary of changes but does not follow the required template structure with sections for Related Issues, Type of Change, Testing, Screenshots, and Additional Notes.	Provide a description that follows the template structure by adding sections for Related Issues, Type of Change (mark New feature), Testing, and any Additional Notes about the implementation.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and concisely summarizes the main feature: adding a right-click context menu to file items in the changes tab, which is the primary focus of all changes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In
@apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/ChangesView.tsx:
- Around line 212-227: handleDiscardChanges currently performs irreversible
actions without confirmation; before invoking deleteUntrackedMutation or
discardChangesMutation, show a confirmation dialog/modal (use the app's existing
confirmation UI or a simple window.confirm) that clearly states the file path
and whether it will be deleted (for untracked) or have changes discarded (for
modified), and only proceed to call deleteUntrackedMutation.mutate or
discardChangesMutation.mutate if the user confirms; for clarity, use distinct
messages for the untracked (delete) and tracked (discard) branches and abort on
cancel.

In
@apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx:
- Around line 109-119: The dependency array for the contextMenuProps recreates
on each render because it includes the unstable mutation object openInApp;
destructure the mutate function from openInApp (e.g., const { mutate:
openInAppMutate } = openInApp) and replace openInApp in the dependency list with
openInAppMutate (or, if your react-query version guarantees a stable function,
use openInApp.mutate directly) so that contextMenuProps only updates when the
actual mutate function reference changes; update any uses inside
contextMenuProps to call the destructured mutate symbol instead of openInApp.

🧹 Nitpick comments (3)

apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx (1)

177-184: Consider simplifying the actions object creation.

The explicit mapping is clear, but could be simplified using object rest destructuring if desired.

♻️ Optional simplification

 	if (contextMenuProps) {
-		const actions: FileItemContextMenuActions = {
-			onOpenInSplitHorizontal: contextMenuProps.onOpenInSplitHorizontal,
-			onOpenInSplitVertical: contextMenuProps.onOpenInSplitVertical,
-			onOpenInApp: contextMenuProps.onOpenInApp,
-			onOpenInNewTab: contextMenuProps.onOpenInNewTab,
-			onMoveToTab: contextMenuProps.onMoveToTab,
-			onDiscardChanges: contextMenuProps.onDiscardChanges,
-		};
+		const { currentTabId, availableTabs, ...actions } = contextMenuProps;

 		return (
 			<FileItemContextMenu
 				actions={actions}
-				currentTabId={contextMenuProps.currentTabId}
-				availableTabs={contextMenuProps.availableTabs}
+				currentTabId={currentTabId}
+				availableTabs={availableTabs}
 			>
 				<ContextMenuTrigger asChild>{content}</ContextMenuTrigger>
 			</FileItemContextMenu>
 		);
 	}

apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx (1)

84-87: Consider making the external app configurable.

The app name "cursor" is hardcoded. This should be extracted to a constant or made configurable to support different editors.
💡 Suggested improvement
+const DEFAULT_EXTERNAL_APP = "cursor";
+
 // ... in contextMenuProps
 onOpenInApp: (file: ChangedFile) => {
 	const fullPath = `${worktreePath}/${file.path}`;
-	openInApp.mutate({ path: fullPath, app: "cursor" });
+	openInApp.mutate({ path: fullPath, app: DEFAULT_EXTERNAL_APP });
 },

apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileList/FileListGrouped.tsx (1)

110-128: Consider extracting the per-file context menu props transformation.

This exact transformation logic is duplicated in FileListTree.tsx (lines 160-178). Consider extracting a helper function to reduce duplication and ensure consistency.

💡 Example helper function

// In FileList.tsx or a shared utils file
export function createFileItemContextMenuProps(
  contextMenuProps: FileContextMenuProps,
  file: ChangedFile
): FileItemContextMenuProps {
  return {
    currentTabId: contextMenuProps.currentTabId,
    availableTabs: contextMenuProps.availableTabs,
    onOpenInSplitHorizontal: () => contextMenuProps.onOpenInSplitHorizontal(file),
    onOpenInSplitVertical: () => contextMenuProps.onOpenInSplitVertical(file),
    onOpenInApp: () => contextMenuProps.onOpenInApp(file),
    onOpenInNewTab: () => contextMenuProps.onOpenInNewTab(file),
    onMoveToTab: (tabId) => contextMenuProps.onMoveToTab(file, tabId),
    onDiscardChanges: contextMenuProps.onDiscardChanges
      ? () => contextMenuProps.onDiscardChanges?.(file)
      : undefined,
  };
}

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 72d19fb and 31ad98f.

📒 Files selected for processing (11)

apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/ChangesView.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/CommitItem/CommitItem.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItemContextMenu.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/index.ts
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileList/FileList.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileList/FileListGrouped.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileList/FileListTree.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileList/index.ts
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/index.ts
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx

🧰 Additional context used

📓 Path-based instructions (6)

apps/desktop/**/*.{ts,tsx}

📄 CodeRabbit inference engine (apps/desktop/AGENTS.md)

apps/desktop/**/*.{ts,tsx}: For Electron interprocess communication, ALWAYS use tRPC as defined in src/lib/trpc
Use alias as defined in tsconfig.json when possible
Prefer zustand for state management if it makes sense. Do not use effect unless absolutely necessary.
For tRPC subscriptions with trpc-electron, ALWAYS use the observable pattern from @trpc/server/observable instead of async generators, as the library explicitly checks isObservable(result) and throws an error otherwise

Files:

apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileList/index.ts
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/index.ts
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileList/FileList.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/index.ts
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/ChangesView.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileList/FileListGrouped.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileList/FileListTree.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/CommitItem/CommitItem.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItemContextMenu.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx

**/*.{ts,tsx}