fix(team): dedupe project path options
This commit is contained in:
777genius
parent
358496c353
commit
83748673af
3 changed files with 238 additions and 120 deletions
|
|
@ -8,6 +8,8 @@ import { Label } from '@renderer/components/ui/label';
|
|||
import { cn } from '@renderer/lib/utils';
|
||||
import { Check, FolderOpen } from 'lucide-react';
|
||||
|
||||
import { buildProjectPathOptions } from './projectPathOptions';
|
||||
|
||||
import type { Project } from '@shared/types';
|
||||
|
||||
function escapeRegExp(value: string): string {
|
||||
|
|
@ -69,131 +71,134 @@ export const ProjectPathSelector = ({
|
|||
projectsLoading,
|
||||
projectsError,
|
||||
fieldError,
|
||||
}: ProjectPathSelectorProps): React.JSX.Element => (
|
||||
<div className="space-y-1.5">
|
||||
<Label>Project</Label>
|
||||
<div className="space-y-2">
|
||||
<div className="flex flex-col gap-2 md:flex-row md:items-start">
|
||||
<div className="inline-flex shrink-0 rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] p-0.5">
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'rounded-[3px] px-3 py-1 text-xs font-medium transition-colors',
|
||||
cwdMode === 'project'
|
||||
? 'bg-[var(--color-surface-raised)] text-[var(--color-text)] shadow-sm'
|
||||
: 'text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
|
||||
)}
|
||||
onClick={() => onCwdModeChange('project')}
|
||||
>
|
||||
From project list
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'rounded-[3px] px-3 py-1 text-xs font-medium transition-colors',
|
||||
cwdMode === 'custom'
|
||||
? 'bg-[var(--color-surface-raised)] text-[var(--color-text)] shadow-sm'
|
||||
: 'text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
|
||||
)}
|
||||
onClick={() => onCwdModeChange('custom')}
|
||||
>
|
||||
Custom path
|
||||
</button>
|
||||
</div>
|
||||
}: ProjectPathSelectorProps): React.JSX.Element => {
|
||||
const projectOptions = React.useMemo(
|
||||
() => buildProjectPathOptions(projects, selectedProjectPath),
|
||||
[projects, selectedProjectPath]
|
||||
);
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
{cwdMode === 'project' ? (
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<FolderOpen size={16} className="shrink-0 text-[var(--color-text-muted)]" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<Combobox
|
||||
options={projects.map((project) => ({
|
||||
value: project.path,
|
||||
label: project.name,
|
||||
description: project.path,
|
||||
}))}
|
||||
value={selectedProjectPath}
|
||||
onValueChange={onSelectedProjectPathChange}
|
||||
placeholder={projectsLoading ? 'Loading projects...' : 'Select a project...'}
|
||||
searchPlaceholder="Search project by name or path"
|
||||
emptyMessage="Nothing found"
|
||||
disabled={projectsLoading || projects.length === 0}
|
||||
renderOption={(option, isSelected, query) => (
|
||||
<>
|
||||
<Check
|
||||
className={cn(
|
||||
'mr-2 size-3.5 shrink-0',
|
||||
isSelected ? 'opacity-100' : 'opacity-0'
|
||||
)}
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate font-medium text-[var(--color-text)]">
|
||||
{renderHighlightedText(option.label, query)}
|
||||
</p>
|
||||
<p className="truncate text-[var(--color-text-muted)]">
|
||||
{renderHighlightedText(option.description ?? '', query)}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<Label>Project</Label>
|
||||
<div className="space-y-2">
|
||||
<div className="flex flex-col gap-2 md:flex-row md:items-start">
|
||||
<div className="inline-flex shrink-0 rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] p-0.5">
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'rounded-[3px] px-3 py-1 text-xs font-medium transition-colors',
|
||||
cwdMode === 'project'
|
||||
? 'bg-[var(--color-surface-raised)] text-[var(--color-text)] shadow-sm'
|
||||
: 'text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
|
||||
)}
|
||||
onClick={() => onCwdModeChange('project')}
|
||||
>
|
||||
From project list
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'rounded-[3px] px-3 py-1 text-xs font-medium transition-colors',
|
||||
cwdMode === 'custom'
|
||||
? 'bg-[var(--color-surface-raised)] text-[var(--color-text)] shadow-sm'
|
||||
: 'text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
|
||||
)}
|
||||
onClick={() => onCwdModeChange('custom')}
|
||||
>
|
||||
Custom path
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
{cwdMode === 'project' ? (
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<FolderOpen size={16} className="shrink-0 text-[var(--color-text-muted)]" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<Combobox
|
||||
options={projectOptions}
|
||||
value={selectedProjectPath}
|
||||
onValueChange={onSelectedProjectPathChange}
|
||||
placeholder={projectsLoading ? 'Loading projects...' : 'Select a project...'}
|
||||
searchPlaceholder="Search project by name or path"
|
||||
emptyMessage="Nothing found"
|
||||
disabled={projectsLoading || projectOptions.length === 0}
|
||||
renderOption={(option, isSelected, query) => (
|
||||
<>
|
||||
<Check
|
||||
className={cn(
|
||||
'mr-2 size-3.5 shrink-0',
|
||||
isSelected ? 'opacity-100' : 'opacity-0'
|
||||
)}
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate font-medium text-[var(--color-text)]">
|
||||
{renderHighlightedText(option.label, query)}
|
||||
</p>
|
||||
<p className="truncate text-[var(--color-text-muted)]">
|
||||
{renderHighlightedText(option.description ?? '', query)}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{!selectedProjectPath ? (
|
||||
<p className="text-[11px] text-[var(--color-text-muted)]">
|
||||
Select a project from the list
|
||||
</p>
|
||||
) : null}
|
||||
{projectsError ? <p className="text-[11px] text-red-300">{projectsError}</p> : null}
|
||||
{!projectsLoading && projectOptions.length === 0 ? (
|
||||
<p className="text-[11px]" style={{ color: 'var(--warning-text)' }}>
|
||||
No projects found, switch to custom path.
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
{!selectedProjectPath ? (
|
||||
<p className="text-[11px] text-[var(--color-text-muted)]">
|
||||
Select a project from the list
|
||||
</p>
|
||||
) : null}
|
||||
{projectsError ? <p className="text-[11px] text-red-300">{projectsError}</p> : null}
|
||||
{!projectsLoading && projects.length === 0 ? (
|
||||
<p className="text-[11px]" style={{ color: 'var(--warning-text)' }}>
|
||||
No projects found, switch to custom path.
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<FolderOpen size={16} className="shrink-0 text-[var(--color-text-muted)]" />
|
||||
<Input
|
||||
className="h-8 flex-1 text-xs"
|
||||
value={customCwd}
|
||||
aria-label="Custom working directory"
|
||||
onChange={(event) => onCustomCwdChange(event.target.value)}
|
||||
placeholder="/absolute/path/to/project"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
void (async () => {
|
||||
try {
|
||||
const paths = await api.config.selectFolders();
|
||||
if (paths.length > 0) {
|
||||
onCustomCwdChange(paths[0]);
|
||||
) : (
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<FolderOpen size={16} className="shrink-0 text-[var(--color-text-muted)]" />
|
||||
<Input
|
||||
className="h-8 flex-1 text-xs"
|
||||
value={customCwd}
|
||||
aria-label="Custom working directory"
|
||||
onChange={(event) => onCustomCwdChange(event.target.value)}
|
||||
placeholder="/absolute/path/to/project"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
void (async () => {
|
||||
try {
|
||||
const paths = await api.config.selectFolders();
|
||||
if (paths.length > 0) {
|
||||
onCustomCwdChange(paths[0]);
|
||||
}
|
||||
} catch {
|
||||
// IPC error - dialog may have been cancelled or failed
|
||||
}
|
||||
} catch {
|
||||
// IPC error — dialog may have been cancelled or failed
|
||||
}
|
||||
})();
|
||||
}}
|
||||
>
|
||||
Browse
|
||||
</Button>
|
||||
})();
|
||||
}}
|
||||
>
|
||||
Browse
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-[11px] text-[var(--color-text-muted)]">
|
||||
If the directory does not exist, it will be created automatically.
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-[11px] text-[var(--color-text-muted)]">
|
||||
If the directory does not exist, it will be created automatically.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{fieldError ? (
|
||||
<p className="text-[11px]" style={{ color: 'var(--field-error-text)' }}>
|
||||
{fieldError}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
{fieldError ? (
|
||||
<p className="text-[11px]" style={{ color: 'var(--field-error-text)' }}>
|
||||
{fieldError}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
|
|
|||
45
src/renderer/components/team/dialogs/projectPathOptions.ts
Normal file
45
src/renderer/components/team/dialogs/projectPathOptions.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import { normalizePath } from '@renderer/utils/pathNormalize';
|
||||
|
||||
import type { ComboboxOption } from '@renderer/components/ui/combobox';
|
||||
import type { Project } from '@shared/types';
|
||||
|
||||
function toProjectOption(project: Project): ComboboxOption {
|
||||
return {
|
||||
value: project.path,
|
||||
label: project.name,
|
||||
description: project.path,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Collapse duplicate project entries that resolve to the same filesystem path.
|
||||
* This keeps combobox item values unique even when scanner sources overlap.
|
||||
*/
|
||||
export function buildProjectPathOptions(
|
||||
projects: Project[],
|
||||
preferredPath?: string
|
||||
): ComboboxOption[] {
|
||||
const options: ComboboxOption[] = [];
|
||||
const optionIndexByNormalizedPath = new Map<string, number>();
|
||||
const normalizedPreferredPath = preferredPath ? normalizePath(preferredPath) : null;
|
||||
|
||||
for (const project of projects) {
|
||||
const normalizedProjectPath = normalizePath(project.path);
|
||||
const existingIndex = optionIndexByNormalizedPath.get(normalizedProjectPath);
|
||||
|
||||
if (existingIndex === undefined) {
|
||||
optionIndexByNormalizedPath.set(normalizedProjectPath, options.length);
|
||||
options.push(toProjectOption(project));
|
||||
continue;
|
||||
}
|
||||
|
||||
const shouldPreferCurrentOption =
|
||||
normalizedPreferredPath === normalizedProjectPath && project.path === preferredPath;
|
||||
|
||||
if (shouldPreferCurrentOption) {
|
||||
options[existingIndex] = toProjectOption(project);
|
||||
}
|
||||
}
|
||||
|
||||
return options;
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import { buildProjectPathOptions } from '@renderer/components/team/dialogs/projectPathOptions';
|
||||
|
||||
import type { Project } from '@shared/types';
|
||||
|
||||
function createProject(overrides: Partial<Project>): Project {
|
||||
return {
|
||||
id: 'project-id',
|
||||
name: 'project',
|
||||
path: '/Users/test/project',
|
||||
sessions: [],
|
||||
totalSessions: 0,
|
||||
createdAt: 1,
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe('buildProjectPathOptions', () => {
|
||||
it('removes duplicate projects that point to the same path', () => {
|
||||
const options = buildProjectPathOptions([
|
||||
createProject({
|
||||
id: 'project-1',
|
||||
name: 'lintai',
|
||||
path: '/Users/belief/dev/projects/lintai',
|
||||
}),
|
||||
createProject({
|
||||
id: 'project-2',
|
||||
name: 'lintai duplicate',
|
||||
path: '/Users/belief/dev/projects/lintai',
|
||||
}),
|
||||
]);
|
||||
|
||||
expect(options).toEqual([
|
||||
{
|
||||
value: '/Users/belief/dev/projects/lintai',
|
||||
label: 'lintai',
|
||||
description: '/Users/belief/dev/projects/lintai',
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it('prefers the currently selected variant when duplicate paths normalize equally', () => {
|
||||
const options = buildProjectPathOptions(
|
||||
[
|
||||
createProject({
|
||||
id: 'project-1',
|
||||
name: 'LintAI',
|
||||
path: '/Users/Belief/dev/projects/lintai',
|
||||
}),
|
||||
createProject({
|
||||
id: 'project-2',
|
||||
name: 'lintai',
|
||||
path: '/Users/belief/dev/projects/lintai/',
|
||||
}),
|
||||
],
|
||||
'/Users/belief/dev/projects/lintai/'
|
||||
);
|
||||
|
||||
expect(options).toEqual([
|
||||
{
|
||||
value: '/Users/belief/dev/projects/lintai/',
|
||||
label: 'lintai',
|
||||
description: '/Users/belief/dev/projects/lintai/',
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue