fix(web): replace broken Browse-for-folder with server-side directory picker#1850
Open
magyargergo wants to merge 10 commits into
Open
fix(web): replace broken Browse-for-folder with server-side directory picker#1850magyargergo wants to merge 10 commits into
magyargergo wants to merge 10 commits into
Conversation
… picker The "Browse for folder" button used `<input type="file" webkitdirectory>` which only exposes relative paths via `webkitRelativePath`. The code extracted just the folder name (e.g. `myproject`), causing the server to reject it with "path must be an absolute path". No browser API can expose absolute filesystem paths, so the approach was fundamentally broken on all platforms. - Add `GET /api/fs/list` endpoint that lists subdirectories at a given absolute server-side path (rate-limited, validated) - Add `listDirectories()` client function in backend-client.ts - Add `DirectoryPicker` modal component with breadcrumb navigation - Replace broken `webkitdirectory` input in RepoAnalyzer with the new server-side directory picker - Update i18n strings (en + zh-CN) - Add unit tests for the new endpoint (9 tests) Docker users can now browse `/workspace/` and other container paths directly from the UI. Manual path entry continues to work unchanged. Closes #1518
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
|
||
| let dirents; | ||
| try { | ||
| dirents = await fs.readdir(dir, { withFileTypes: true }); |
13 Playwright e2e tests covering the full DirectoryPicker flow: - Open/display: modal opens, shows root dirs, displays current path - Navigation: click into dirs, breadcrumb back-nav, home button - Selection: populates path input, returns absolute path, close without selecting - Edge cases: empty dir, API error, manual typing still works Also updates existing onboarding.spec.ts to match the renamed "Browse server directories" button, and adds data-testid attributes to DirectoryPicker and RepoAnalyzer for reliable e2e targeting.
Contributor
✨ PR AutofixFound fixable formatting / unused-import issues across 72 changed lines. Comment |
Contributor
CI Report✅ All checks passed Pipeline Status
Test Results
✅ All 10183 tests passed 7 test(s) skipped — expand for details
Code CoverageTests
📋 View full run · Generated by CI |
- Add role="dialog", aria-modal, aria-label to the modal panel - Add aria-label to close button, home button - Add aria-hidden to decorative icons (chevrons, backdrop) - Add role="status" to loading spinner with sr-only label - Add role="alert" to error state - Add aria-current="location" to active breadcrumb segment - Wrap breadcrumb in nav landmark with aria-label - Add Escape key handler to dismiss the modal - Auto-focus the modal panel on open - Add focus-visible ring styles to all interactive elements (matches existing focus-visible:ring-2 ring-accent/40 pattern) - Increase breadcrumb button padding (px-1.5 py-1) for better touch targets - Increase directory entry padding (py-2.5) for touch comfort - Add active:bg-hover/70 pressed state on directory entries - Add active:bg-accent/80 pressed state on select button
Collaborator
Author
|
/autofix |
Contributor
|
✅ Applied autofix and pushed a commit. (apply run) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes the "Browse for folder" button in the local path analysis UI, which was completely broken on all platforms (Docker, local Windows, local Linux). The button used
<input type="file" webkitdirectory>which only exposes relative paths viawebkitRelativePath— the code extracted just the folder name (e.g.myproject), causing the server to reject it with "path must be an absolute path". No browser API can expose absolute filesystem paths, so the approach was fundamentally unfixable.This PR replaces the broken browser-side directory picker with a server-side directory listing endpoint + a new
DirectoryPickermodal component. Docker users can now browse/workspace/and other container paths directly from the UI.Changes
GET /api/fs/listendpoint inapi.ts— lists subdirectories at a given absolute server-side path (rate-limited viacreateRouteLimiter, validates absolute path + rejects traversal)listDirectories()client function inbackend-client.tsDirectoryPickermodal component — breadcrumb navigation, sorted directory listing, folder selection, loading/error/empty statesRepoAnalyzer.tsx— removed brokenwebkitdirectoryfile input, wired inDirectoryPickerBefore / After
/workspace/,/data/gitnexus/, etc. directlyTest plan
npx vitest run test/unit/api-fs-list.test.ts— 9 tests passingapi-file-route,server-validation,rate-limit— 51 tests passing)tsc --noEmitfor both gitnexus and gitnexus-web)/workspace/<repo>, analyzeCloses #1518