Devin/1758953243 vite frontend refactor #75
Merged
Conversation
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
- Refactor server-side HTML generation to React components - Create comprehensive React app with authentication, file management, and real-time updates - Implement all existing functionality: login, file operations, search, API keys, SSE - Clean up old HTML generation code from utils/htmlGenerator.js and utils/loginPage.js - Update backend routes to serve React app instead of generating HTML - Enable Vite builds in GitHub Actions workflows - Preserve all existing API endpoints and functionality - Maintain dark theme and responsive design with React Bootstrap Components created: - Authentication: LoginPage, AuthContext, ProtectedRoute - Layout: Header, Footer, Layout, Breadcrumbs - File Management: FileManager, FileTable, FileRow, UploadZone, UploadProgress - Search: SearchBar, SearchResults - API Management: ApiKeysPage - Utilities: useSSE hook, useFileOperations hook, API client Backend changes: - Remove unused HTML generation functions - Update routes to redirect to React frontend - Preserve generate404Page and getUserDisplayName functions - Clean separation between frontend (React) and backend (API only) Co-Authored-By: mark.gilbert@prominic.net <mark.gilbert@prominic.net>
- Remove incorrect /api/files prefix from all React components - Fix search to use POST method with correct endpoints - Fix upload, delete, rename, and folder creation endpoints - Add StartCloud logo to header - Fix breadcrumb styling with proper icons - Remove automatic redirect from root to /browse/ - Add /auth/status endpoint for React authentication - Update constants for correct API structure Co-Authored-By: mark.gilbert@prominic.net <mark.gilbert@prominic.net>
- Add Type column to file table showing Folder/File - Remove copy checksum buttons from folder rows - Fix delete functionality with proper confirmation modal - Update footer to show 'Powered by STARTcloud' with logo - Swap button positions: create folder first, upload second - Add search icon and proper placeholder text - Add page margins using container-fluid px-4 - Change folder icons to white outlined style - Fix API routing to use /api/files prefix for all file operations - Ensure all lint and format checks pass (0 errors, 0 warnings) - Test all functionality in browser and verify working correctly Co-Authored-By: mark.gilbert@prominic.net <mark.gilbert@prominic.net>
Co-Authored-By: mark.gilbert@prominic.net <mark.gilbert@prominic.net>
- Update FileTable component to show headers even when no files present - Add conditional rendering for empty state within table body - Restore static content check in fileServer routing before React app - Ensure index.html files in subfolders display content instead of listings - Maintain proper base URL handling for relative links in static content Co-Authored-By: mark.gilbert@prominic.net <mark.gilbert@prominic.net>
- Remove all batching delays from databaseOperationService for immediate execution - Fix SSE endpoint URL from /api/sse to /api/sse/events in useSSE hook - Disable Chokidar awaitWriteFinish delays for instant file detection - Keep checksum service batched with 5-second intervals as intended - File operations now appear in UI within seconds instead of minutes Co-Authored-By: mark.gilbert@prominic.net <mark.gilbert@prominic.net>
…verify search functionality - Remove card borders from SearchResults component for cleaner UI - Update Breadcrumbs component to fetch and use login_primary_color from backend config - Add login_primary_color to /auth/methods endpoint response for frontend access - Verify search functionality is working correctly with proper 'No Results Found' UI - All SSE performance improvements from previous commits are working correctly Co-Authored-By: mark.gilbert@prominic.net <mark.gilbert@prominic.net>
…cessibility issues - Remove batching delays from databaseOperationService for immediate file operations - Fix unused variable and add proper accessibility attributes to FileRow.jsx - Maintain proper import order in Breadcrumbs.jsx - Reduce lint issues from 9 to 1 warning - All SSE performance improvements now complete for real-time UI updates Co-Authored-By: mark.gilbert@prominic.net <mark.gilbert@prominic.net>
- Maintain checksum service batching while removing all other artificial delays - Fix remaining lint issues and accessibility warnings - Complete UI improvements for card borders, breadcrumb colors, and search functionality - Ensure all file operations update in real-time within seconds - All SSE performance issues resolved for immediate UI responsiveness Co-Authored-By: mark.gilbert@prominic.net <mark.gilbert@prominic.net>
- Remove massive API key management HTML template from fileServer.js - Replace with redirect to React app for /api-keys route - Fix SSE routing to mount under /api/sse prefix to match frontend expectations - Optimize database operations to be async for better performance - This resolves SSE MIME type issues and enables real-time file updates Co-Authored-By: mark.gilbert@prominic.net <mark.gilbert@prominic.net>
…e updates - Update compression middleware to skip /api/events instead of /events - Fix SSE endpoint route from /events to / in sse.js to align with /api/events mounting - Add missing sendFileRenamed import to fileWatcher.js - Update FileManager.jsx to use filePath instead of directory for SSE events - Add rename event handlers to file watcher for complete SSE coverage This addresses SSE connection issues where the endpoint was serving text/html instead of text/event-stream MIME type, preventing real-time file updates. Co-Authored-By: mark.gilbert@prominic.net <mark.gilbert@prominic.net>
… functionality - Fixed path matching logic in FileManager.jsx to convert filesystem paths to web paths - SSE events now properly trigger UI updates when files are added/deleted/renamed - Preserved automatic custom index.html detection and serving functionality - Verified real-time updates work correctly in browser without manual refresh - Removed debug logging from useSSE.js after confirming functionality works - All existing functionality (search, folder creation, subfolder navigation) remains working
- Fixed app.js middleware to allow directory requests to pass through for custom index.html - Updated fileServer.js to check for custom index.html after JSON handling - Preserved automatic custom index.html detection while fixing SSE routing - Removed unused import from fileServer.js to resolve lint issues
…routing condition - Removed condition that prevented directory paths from reaching custom index.html logic - Custom index.html files in subdirectories now display correctly - Maintains working folder creation, SSE updates, and folder share links - Fixed folder creation API URL format in useFileOperations.js - Added folder share link functionality to FileRow.jsx - Enhanced SSE event handling with proper path conversion in FileManager.jsx
- Updated search components with improved functionality and styling - Enhanced file watcher service for better SSE integration - Improved database operation service performance - All changes support the restored custom index.html functionality
…and delete operations - Add multi-select checkboxes to FileTable header and FileRow components - Implement select all/none functionality with proper indeterminate state - Add multi-select delete operations with confirmation modal - Extend useFileOperations hook with deleteMultipleFiles function - Add selectedFiles state management in FileManager - Add multi-select action buttons (Delete Selected, Clear Selection) - Preserve existing Bootstrap styling and component patterns - Maintain SSE integration for real-time updates - Add useSearchParams for ?view=index parameter handling Tested functionality: - Individual file selection and deselection - Select all/clear all functionality - Multi-select delete confirmation with proper messaging - Upload functionality with drag/drop zone - Navigation between directories preserves multi-select UI - ?view=index parameter handling works correctly
…nality - Fix checkbox column width to 5% while keeping other columns responsive - Implement landing page functionality from htmlGenerator.js in React frontend - Add proper CSS styling with centered layout and dark background - Fix shield icon navigation to properly navigate to ?view=index - Update backend /auth/methods endpoint to include landing page config values from dev.config.yaml - Improve text visibility with text-secondary class for better contrast - Ensure landing page shows at root URL without navigation bar - Preserve multi-select functionality and existing file operations - Use Footer component for consistent STARTcloud branding
- Show '🛡 Armor / ⌂ Home' breadcrumbs when at /?view=index - Make shield icon/armor text clickable to navigate back to landing page - Add house icon for Home breadcrumb with proper styling - Improve text visibility on landing page with better grey colors
- Implement parent directory row that only appears when files are selected - Add drag/drop functionality to move selected files to parent directory - Extend useFileOperations hook with moveFilesToParent function - Add move API endpoint in fileServer.js with conflict resolution - Update FileTable with drag/drop handlers and visual feedback - Add multi-select checkboxes with proper styling (5% width) - Implement parameterized confirmation modal for both delete and move operations - Add visual styling for drag/drop operations - Test upload functionality and confirm it works correctly - Fix linting issues and apply proper formatting
- Fix consistent-return errors by ensuring all code paths return values consistently - Change const newFullPath to let newFullPath to fix no-const-assign error - Add eslint-disable comment for no-await-in-loop in conflict resolution - Add else clause for invalid action types - Update parent directory row visibility logic in FileTable.jsx
- Remove unused searchParams import from FileManager.jsx - Fix nested ternary expressions in Breadcrumbs.jsx by using conditional rendering - Reduce complexity in LandingPage.jsx by extracting helper functions - Add missing prop validations for results.results and results.pagination in SearchResults.jsx - All linting warnings now resolved, npm run lint:fix:all returns exit code 0
- Change frontend no-unused-vars from 'warn' to 'error' - Apply stricter configuration: vars: 'all', args: 'all', caughtErrors: 'all' - Remove ignore patterns by setting ignoreRestSiblings: false - Remove unused _uploadCredentials parameter from handleLandingPageResponse function - Ensure consistent strict linting across backend and frontend - All linting tests pass with stricter configuration
…ure parity - Fix API endpoint mismatch (/api/keys -> /api/api-keys) - Remove duplicate header and breadcrumb elements from rendered page - Fix API key display bug in success modal and usage example - Widen modal with modal-lg class for better text wrapping - Add proper CSS styling for usage example text formatting - Remove unused authenticateApiKeyAccess import from fileServer.js - Remove automatic redirect interceptor from api.js to prevent loops - Update SearchBar placeholder text for API keys context - Maintain consistent dark theme styling and Bootstrap integration
…ent dynamic profile dropdown - Update api-keys.css with more specific column width rules using !important - Fix SearchBar to trigger search on every keystroke for real-time filtering - Add dynamic profile dropdown logic to Header component based on current page - Show Dashboard link (/?view=index) when not on root directory - Show contextual navigation links based on current page location
…lumn widths - Remove 'Delete' text from bulk delete button, show only trash icon and count - Adjust key preview column width (20% narrower: 12% -> 10%) - Increase last used column width (19% -> 21%) to use space from key preview - Maintain multi-select functionality and color-coded permission badges
- Fix no-use-before-define error in handleSelectAll function - Update import order in Header component - Apply Prettier formatting fixes - All lint checks now pass successfully
- Reduce key preview column from 10% to 8% (20% narrower) - Increase last used column from 21% to 23% (gets extra space) - Maintains total 100% width allocation across all columns - Completes user-requested table layout optimization
…lity - Fix infinite redirect loop in /login route by serving index.html directly - Add logoutLocal function to AuthContext for local session logout - Update Header component to display both Logout and Logout (Local) options - Use req parameter in log statement to satisfy ESLint no-unused-vars rule Comprehensive API testing completed with OIDC-generated API key: - All file operations (upload/download/delete) working correctly - Directory and subdirectory operations functional - API key authentication and permissions verified - Invalid authentication properly rejected
- Fix bug where empty relativePath caused ACCESS_DENIED for root directory - Enables /api/files/ endpoint to return JSON instead of HTML - Resolves file manager showing 0 items when files exist - Consolidate api-keys.css styles into index.css for better organization - Fix ESLint unused parameter in /login route handler Tested: - Directory listing API now returns proper JSON file list - File manager UI displays files correctly (no more 0 items) - All file operations (upload/download/delete/rename/search) working - Custom index.html files in subdirectories still work - API key authentication with OIDC users functional - All lint and format checks passing
- Apply exact background colors (#212529 body, #343a40 card) - Implement proper divider styling between OIDC and Basic Auth - Ensure config color theming is applied correctly - Fix formatting issues for lint compliance - Update landing page card background to match login page - Fix contact button styling to use page background color for contrast
- Update Swagger HTML template to use /static paths instead of /web/public/ paths - Fix favicon, CSS, and JS asset references to work with Vite frontend setup - Resolves /api-docs page loading issue after Vite frontend refactor The static asset serving infrastructure was already correctly configured to serve files from web/public via the /static route, but the Swagger HTML template was hardcoding /web/public/ paths which caused 404 errors after the Vite refactor.
- Install swagger-ui-react package for React-based API documentation - Create SwaggerDocsPage component with dark theme styling - Add ProtectedSwaggerRoute for authenticated access - Remove server-side Swagger HTML implementation from app.js - Add /api/swagger.json endpoint to serve OpenAPI spec - Update React Router to handle /api-docs route - Preserve API key integration and authentication - Eliminate Bootstrap styling conflicts with custom dark theme
- Remove unused swaggerUi import from app.js - Fix ESLint errors in SwaggerDocsPage.jsx (unused variables, formatting) - Eliminate Bootstrap styling conflicts in React implementation - Preserve all API key authentication functionality - Clean dark theme styling without server-side dependencies
…and translations, fix api docs
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
No description provided.