Skip to content

fix(ui): handle undefined branch names in autocomplete components #752

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wcpaxx wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(ui): handle undefined branch names in autocomplete components #752

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c40583a
fix(ui): handle undefined branch names in autocomplete components
wcpaxx Feb 4, 2026
c690bab
docs: add missing docstrings to fix coverage warning
wcpaxx Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 22 additions & 4 deletions apps/ui/src/components/ui/autocomplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import {
} from '@/components/ui/command';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';

/**
* Option item for the Autocomplete component
*/
export interface AutocompleteOption {
value: string;
label?: string;
Expand Down Expand Up @@ -44,6 +47,19 @@ function normalizeOption(opt: string | AutocompleteOption): AutocompleteOption {
return { ...opt, label: opt.label ?? opt.value };
}

/**
* A generic Autocomplete/Combobox component built on top of shadcn/ui.
*
* Features:
* - Searchable options list
* - Support for creating new values that don't exist in options
* - Custom icons and badges
* - Accessible Popover + Command implementation
* - Responsive width handling
*
* @param props - Component props
* @returns The rendered autocomplete component
*/
export function Autocomplete({
value,
onChange,
Expand Down Expand Up @@ -87,9 +103,11 @@ export function Autocomplete({

// Filter options based on input
const filteredOptions = React.useMemo(() => {
if (!inputValue) return normalizedOptions;
// Filter out options with undefined/null values
const validOptions = normalizedOptions.filter((opt) => opt.value != null);
if (!inputValue) return validOptions;
const lower = inputValue.toLowerCase();
return normalizedOptions.filter(
return validOptions.filter(
(opt) => opt.value.toLowerCase().includes(lower) || opt.label?.toLowerCase().includes(lower)
);
}, [normalizedOptions, inputValue]);
Expand All @@ -98,7 +116,7 @@ export function Autocomplete({
const isNewValue =
allowCreate &&
inputValue.trim() &&
!normalizedOptions.some((opt) => opt.value.toLowerCase() === inputValue.toLowerCase());
!normalizedOptions.some((opt) => opt.value?.toLowerCase() === inputValue.toLowerCase());

// Get display value
const displayValue = React.useMemo(() => {
Expand Down Expand Up @@ -184,7 +202,7 @@ export function Autocomplete({
setInputValue('');
setOpen(false);
}}
data-testid={`${itemTestIdPrefix}-${option.value.toLowerCase().replace(/[\s/\\]+/g, '-')}`}
data-testid={`${itemTestIdPrefix}-${(option.value ?? '').toLowerCase().replace(/[\s/\\]+/g, '-')}`}
>
{Icon && <Icon className="w-4 h-4 mr-2" />}
{option.label}
Expand Down
16 changes: 15 additions & 1 deletion apps/ui/src/components/ui/branch-autocomplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,18 @@ interface BranchAutocompleteProps {
'data-testid'?: string;
}

/**
* A specialized Autocomplete component for selecting git branches.
*
* Features:
* - Always shows 'main' at the top of the list
* - Displays card counts badges for branches if provided
* - Allows creating new branches (via allowCreate prop passed to Autocomplete)
* - Includes a GitBranch icon
*
* @param props - Component props
* @returns The rendered branch selection component
*/
export function BranchAutocomplete({
value,
onChange,
Expand All @@ -27,7 +39,9 @@ export function BranchAutocomplete({
}: BranchAutocompleteProps) {
// Always include "main" at the top of suggestions
const branchOptions: AutocompleteOption[] = React.useMemo(() => {
const branchSet = new Set(['main', ...branches]);
// Filter out undefined/null branches
const validBranches = branches.filter((b): b is string => b != null && b !== '');
const branchSet = new Set(['main', ...validBranches]);
return Array.from(branchSet).map((branch) => {
const cardCount = branchCardCounts?.[branch];
// Show card count if available, otherwise show "default" for main branch only
Expand Down
16 changes: 15 additions & 1 deletion apps/ui/src/components/views/board-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,20 @@ const EMPTY_WORKTREES: ReturnType<ReturnType<typeof useAppStore.getState>['getWo

const logger = createLogger('Board');

/**
* The main board view component.
*
* Displays the project board in either Kanban or List layout.
* Manages all board state including:
* - Feature lists and categories
* - Drag and drop operations
* - Worktree management and panel
* - Dialogs (add feature, edit, pipeline settings, etc.)
* - Keyboard shortcuts
* - Auto-mode integration
*
* @returns The rendered Board view
*/
export function BoardView() {
const {
currentProject,
Expand Down Expand Up @@ -349,7 +363,7 @@ export function BoardView() {
const result = await api.worktree.listBranches(currentProject.path);
if (result.success && result.result?.branches) {
const localBranches = result.result.branches
.filter((b) => !b.isRemote)
.filter((b) => !b.isRemote && b.name)
.map((b) => b.name);
setBranchSuggestions(localBranches);
}
Expand Down
19 changes: 18 additions & 1 deletion apps/ui/src/components/views/board-view/dialogs/create-pr-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,20 @@ interface CreatePRDialogProps {
defaultBaseBranch?: string;
}

/**
* Dialog for creating a GitHub Pull Request from a worktree.
*
* Features:
* - Automatically commits changes if needed
* - Pushes the branch to remote
* - Creates PR via GitHub CLI
* - Supports draft PRs
* - Allows selecting base branch
* - Fallback to browser if gh CLI is missing/failing
*
* @param props - Component props
* @returns The rendered Create PR dialog
*/
export function CreatePRDialog({
open,
onOpenChange,
Expand Down Expand Up @@ -67,7 +81,10 @@ export function CreatePRDialog({
// Filter out current worktree branch from the list
const branches = useMemo(() => {
if (!branchesData?.branches) return [];
return branchesData.branches.map((b) => b.name).filter((name) => name !== worktree?.branch);
return branchesData.branches
.filter((b) => b.name)
.map((b) => b.name)
.filter((name) => name !== worktree?.branch);
}, [branchesData?.branches, worktree?.branch]);

// Common state reset function to avoid duplication
Expand Down
14 changes: 13 additions & 1 deletion apps/ui/src/components/views/board-view/dialogs/merge-worktree-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,18 @@ interface MergeWorktreeDialogProps {
onCreateConflictResolutionFeature?: (conflictInfo: MergeConflictInfo) => void;
}

/**
* Dialog for merging a worktree branch into another branch (typically main).
*
* Features:
* - Select target branch (defaults to main)
* - Option to delete worktree and branch after merge
* - Conflict detection and resolution workflow
* - Warnings for uncommitted changes
*
* @param props - Component props
* @returns The rendered Merge Worktree dialog
*/
export function MergeWorktreeDialog({
open,
onOpenChange,
Expand Down Expand Up @@ -56,7 +68,7 @@ export function MergeWorktreeDialog({
if (result.success && result.result?.branches) {
// Filter out the source branch (can't merge into itself) and remote branches
const branches = result.result.branches
.filter((b: BranchInfo) => !b.isRemote && b.name !== worktree.branch)
.filter((b: BranchInfo) => !b.isRemote && b.name && b.name !== worktree.branch)
.map((b: BranchInfo) => b.name);
setAvailableBranches(branches);
}
Expand Down
15 changes: 14 additions & 1 deletion apps/ui/src/components/views/graph-view-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,19 @@ const logger = createLogger('GraphViewPage');
// Stable empty array to avoid infinite loop in selector
const EMPTY_WORKTREES: ReturnType<ReturnType<typeof useAppStore.getState>['getWorktrees']> = [];

/**
* The Graph View page component.
*
* Displays the project's features in a dependency graph visualization.
* Integrates with:
* - D3-based graph rendering (GraphView)
* - Worktree management
* - Feature management (Add, Edit, Delete)
* - Backlog planning
* - Auto-mode task execution
*
* @returns The rendered Graph View page
*/
export function GraphViewPage() {
const {
currentProject,
Expand Down Expand Up @@ -134,7 +147,7 @@ export function GraphViewPage() {
const result = await api.worktree.listBranches(currentProject.path);
if (result.success && result.result?.branches) {
const localBranches = result.result.branches
.filter((b) => !b.isRemote)
.filter((b) => !b.isRemote && b.name)
.map((b) => b.name);
setBranchSuggestions(localBranches);
}
Expand Down