|
| 1 | +# flAPI Web UI Implementation Checklist |
| 2 | + |
| 3 | +## Phase 0: Backend Completion (Critical) |
| 4 | + |
| 5 | +### 1. Complete ConfigService Implementation |
| 6 | +- [x] Implement missing endpoint handlers in `config_service.cpp`: |
| 7 | + - [x] All endpoint handlers implemented |
| 8 | + |
| 9 | +### 2. Enhance Backend Testing |
| 10 | +- [x] Add test cases for all endpoint handlers |
| 11 | +- [x] Add test cases for error conditions and edge cases |
| 12 | +- [x] Add test cases for cache management |
| 13 | +- [x] Add test cases for schema management |
| 14 | +- [x] Add test cases to verify that the files on disk are kept in sync |
| 15 | + |
| 16 | +### 3. Backend Documentation |
| 17 | +- [x] Document the API response formats for each endpoint |
| 18 | +- [x] Document error codes and their meanings |
| 19 | +- [x] Document the template expansion syntax and rules |
| 20 | +- [x] Document the cache configuration options |
| 21 | + |
| 22 | +## Phase 1: Project Setup and Basic Structure |
| 23 | + |
| 24 | +### 1. Development Environment Setup |
| 25 | +- [x] Install Node.js and npm |
| 26 | +- [x] Set up SvelteKit project in `./web` directory |
| 27 | +- [x] Install and configure shadcn-svelte |
| 28 | +- [x] Set up TypeScript configuration |
| 29 | + |
| 30 | +### 2. Build Process Integration |
| 31 | +- [x] Set up basic build configuration |
| 32 | + - [x] Create svelte.config.js |
| 33 | + - [x] Create vite.config.ts |
| 34 | + - [x] Set up PostCSS and Tailwind |
| 35 | + - [x] Configure static build such that it produces a single output in `./web/dist/index.html` |
| 36 | +- [x] Review and understand current `web/CMakeLists.txt` and `web/generate_embedded_ui.cmake` |
| 37 | + - [x] Create CMakeLists.txt for web directory |
| 38 | + - [x] Create generate_embedded_ui.cmake script which embeds the single file output into the binary |
| 39 | + - [x] Fix dependency issues |
| 40 | +- [x] Ensure build process works on all platforms |
| 41 | + - [x] Test build on Linux |
| 42 | + - [x] Fix npm dependencies |
| 43 | + - [x] Fix CMake build scripts |
| 44 | + - [x] Test full build process |
| 45 | + - [o] Test build on Windows (later) |
| 46 | + - [o] Test build on MacOS (later) |
| 47 | +- [x] Ensure that the frontend application is served by the backend |
| 48 | + - [x] Add embedded file serving in config_service.cpp |
| 49 | + - [x] Add content-type mapping for static files |
| 50 | + - [x] Test serving the web UI |
| 51 | +- [x] Test whether a basic application works |
| 52 | + - [x] Test navigation between routes |
| 53 | + - [x] Test basic layout functionality |
| 54 | + - [x] Test embedded file serving |
| 55 | + - [x] Fix empty page issue |
| 56 | + - [x] Fix TypeScript/linter errors |
| 57 | + |
| 58 | +### 3. Basic Application Structure |
| 59 | +- [x] Create basic layout components |
| 60 | + - [x] Create `src/routes/+layout.svelte` for main layout |
| 61 | + - [x] Implement primary left sidebar |
| 62 | + - [x] Implement secondary right editor area |
| 63 | +- [x] Set up routing structure |
| 64 | + - [x] `/config` - General configuration |
| 65 | + - [x] `/endpoints` - Endpoint management |
| 66 | + - [x] `/connections` - Connection management |
| 67 | +- [x] Create TypeScript interfaces based on OpenAPI spec |
| 68 | + - [x] `ProjectConfig` interface |
| 69 | + - [x] `EndpointConfig` interface |
| 70 | + - [x] `CacheConfig` interface |
| 71 | + - [x] `ConnectionConfig` interface |
| 72 | + - [x] `AuthConfig` interface |
| 73 | + - [x] `RequestParameter` interface |
| 74 | + - [x] `RateLimitConfig` interface |
| 75 | + - [x] Add validation functions for all interfaces |
| 76 | + - [x] Add comprehensive test coverage |
| 77 | + |
| 78 | +### 4. UI Component Implementation |
| 79 | +- [ ] Set up shadcn-svelte components |
| 80 | + - [x] Install shadcn-svelte CLI |
| 81 | + - [x] Initialize shadcn-svelte |
| 82 | + - [x] Add button component |
| 83 | + - [x] Add sidebar component |
| 84 | + - [x] Set up theme configuration |
| 85 | + - [x] Create theme types and config |
| 86 | + - [x] Add theme store |
| 87 | + - [x] Add system theme detection |
| 88 | + |
| 89 | +### 4. UI Component Implementation |
| 90 | +- [ ] Set up shadcn-svelte components |
| 91 | + - [x] Install shadcn-svelte CLI |
| 92 | + - [x] Initialize shadcn-svelte |
| 93 | + - [x] Add button component |
| 94 | + - [x] Add sidebar component |
| 95 | + - [x] Set up theme configuration |
| 96 | + - [x] Create theme types and config |
| 97 | + - [x] Add theme store |
| 98 | + - [x] Add system theme detection |
| 99 | +- [x] Update layout components to use shadcn components |
| 100 | + - [x] Create navigation menu component |
| 101 | + - [x] Update App.svelte with shadcn components |
| 102 | + - [x] Update route pages with shadcn typography |
| 103 | + |
| 104 | +## Phase 2: API Integration |
| 105 | + |
| 106 | +### 1. API Client Implementation |
| 107 | +- [x] Create API client service (`src/lib/api.ts`) |
| 108 | + - [x] Project configuration endpoints |
| 109 | + - [x] Endpoint management endpoints |
| 110 | + - [x] Connection management endpoints |
| 111 | + - [x] Schema information endpoints |
| 112 | +- [x] Create a test suite for the API client |
| 113 | +- [x] Implement error handling |
| 114 | +- [x] Add request/response interceptors |
| 115 | + - [x] Add request interceptor support |
| 116 | + - [x] Add response interceptor support |
| 117 | + - [x] Add interceptor removal functionality |
| 118 | + - [x] Add comprehensive tests |
| 119 | +- [x] Add authentication handling |
| 120 | + - [x] Add basic auth support |
| 121 | + - [x] Add bearer token support |
| 122 | + - [x] Add AWS Secrets Manager configuration |
| 123 | + - [x] Add auth configuration endpoints |
| 124 | + - [x] Add comprehensive tests |
| 125 | +- [x] Add type definitions for expanded configuration |
| 126 | + - [x] Add server configuration types (server_name, http_port, cache_schema) |
| 127 | + - [x] Add DuckDB settings type with flexible additionalProperties |
| 128 | + - [x] Add AWS Secrets Manager authentication types |
| 129 | + - [x] Add connection logging configuration types |
| 130 | + - [x] Add comprehensive tests for all configurations |
| 131 | + |
| 132 | +### 2. State Management |
| 133 | +- [x] Set up stores for global state |
| 134 | + - [x] Create store factory with loading/error handling |
| 135 | + - [x] Add store types and interfaces |
| 136 | + - [x] Project configuration store |
| 137 | + - [x] Add comprehensive tests |
| 138 | +- [x] Endpoints store |
| 139 | + - [x] Basic CRUD operations |
| 140 | + - [x] Template management |
| 141 | + - [x] Add comprehensive tests |
| 142 | +- [x] Connections store |
| 143 | + - [x] Basic CRUD operations |
| 144 | + - [x] Add comprehensive tests |
| 145 | +- [x] Schema store |
| 146 | + - [x] Basic schema loading |
| 147 | + - [x] Add comprehensive tests |
| 148 | +- [x] Implement loading states |
| 149 | + - [x] Create global loading state store |
| 150 | + - [x] Add request tracking |
| 151 | + - [x] Add derived loading state |
| 152 | +- [x] Add error handling states |
| 153 | + - [x] Create global error state store |
| 154 | + - [x] Add error handling methods |
| 155 | + - [x] Add derived error state |
| 156 | + - [x] Add comprehensive tests |
| 157 | +- [x] Add stores for advanced configuration |
| 158 | + - [x] Server configuration store |
| 159 | + - [x] Basic CRUD operations |
| 160 | + - [x] Add comprehensive tests |
| 161 | + - [x] DuckDB settings store |
| 162 | + - [x] Basic CRUD operations |
| 163 | + - [x] Add comprehensive tests |
| 164 | + - [x] AWS Secrets Manager store |
| 165 | + - [x] Test connection functionality |
| 166 | + - [x] Configuration management |
| 167 | + - [x] Add comprehensive tests |
| 168 | +- [x] Add comprehensive store tests |
| 169 | + - [x] Add store interaction tests |
| 170 | + - [x] Test concurrent loading states |
| 171 | + - [x] Test error propagation |
| 172 | + - [x] Test store independence |
| 173 | + - [x] Add test coverage for edge cases |
| 174 | + |
| 175 | +## Phase 3: Core Components Implementation |
| 176 | + |
| 177 | +### 1. SQL Editor Component |
| 178 | +- [x] Set up CodeMirror integration |
| 179 | + ```bash |
| 180 | + npm install @codemirror/state @codemirror/view @codemirror/commands @codemirror/language @codemirror/lang-sql @codemirror/theme-one-dark |
| 181 | + ``` |
| 182 | +- [x] Create reusable SQL editor component |
| 183 | + - [x] Basic editor functionality |
| 184 | + - [x] Syntax highlighting |
| 185 | + - [x] Proper TypeScript types |
| 186 | + - [x] Template variable support |
| 187 | + - [x] Variable insertion buttons |
| 188 | + - [x] Variable tooltips |
| 189 | + - [x] Mustache template syntax |
| 190 | + - [x] Output display area |
| 191 | + - [x] Collapsible output panel |
| 192 | + - [x] Pre-formatted output text |
| 193 | + - [x] Proper styling |
| 194 | + - [x] Schema browser integration |
| 195 | + - [x] Schema tree view |
| 196 | + - [x] Table and column display |
| 197 | + - [x] Table insertion |
| 198 | + - [x] Schema store integration |
| 199 | + - [x] SQL execution preview |
| 200 | + - [x] Parameter input fields |
| 201 | + - [x] Preview button |
| 202 | + - [x] Loading state |
| 203 | + - [x] Error handling |
| 204 | + - [x] Result display |
| 205 | + |
| 206 | +### 2. Endpoint Editor Components |
| 207 | +- [~] Create base endpoint editor layout |
| 208 | + - [x] Create EndpointEditor.svelte component |
| 209 | + - [x] Implement left sidebar for sections |
| 210 | + - [x] Set up main content area |
| 211 | + - [~] Add tests for layout structure |
| 212 | + - [x] Basic rendering tests |
| 213 | + - [x] Section switching tests |
| 214 | + - [ ] Fix button component mocking in tests |
| 215 | +- [~] Implement general endpoint configuration section |
| 216 | + - [x] Create GeneralEndpointConfig.svelte |
| 217 | + - [x] Add fields from OpenAPI spec |
| 218 | + - [x] Endpoint path |
| 219 | + - [x] HTTP method |
| 220 | + - [x] Version |
| 221 | + - [x] Description |
| 222 | + - [x] Add validation |
| 223 | + - [~] Add tests |
| 224 | + - [x] Test component rendering |
| 225 | + - [x] Test value updates |
| 226 | + - [ ] Fix input component mocking in tests |
| 227 | +- [~] Implement parameters section |
| 228 | + - [x] Create ParametersConfig.svelte |
| 229 | + - [x] Support parameter types |
| 230 | + - [x] String |
| 231 | + - [x] Number |
| 232 | + - [x] Boolean |
| 233 | + - [x] Support parameter locations |
| 234 | + - [x] Query parameters |
| 235 | + - [x] Path parameters |
| 236 | + - [x] Header parameters |
| 237 | + - [x] Add parameter fields |
| 238 | + - [x] Name |
| 239 | + - [x] Type |
| 240 | + - [x] Location |
| 241 | + - [x] Required flag |
| 242 | + - [x] Description |
| 243 | + - [x] Add parameter management |
| 244 | + - [x] Add new parameter |
| 245 | + - [x] Remove parameter |
| 246 | + - [x] Update parameter |
| 247 | + - [x] Add parameter validation |
| 248 | + - [x] Name format validation |
| 249 | + - [x] Required path parameters |
| 250 | + - [x] Unique parameter names |
| 251 | + - [~] Add tests |
| 252 | + - [x] Test component rendering |
| 253 | + - [x] Test parameter CRUD operations |
| 254 | + - [~] Test validation |
| 255 | + - [x] Test name format validation |
| 256 | + - [x] Test path parameter validation |
| 257 | + - [ ] Test duplicate name validation |
| 258 | +- [ ] Implement query configuration |
| 259 | + - [ ] Create QueryConfig.svelte |
| 260 | + - [ ] Integrate SQL editor component |
| 261 | + - [ ] Add template variable support |
| 262 | + - [ ] Add tests |
| 263 | +- [ ] Implement cache configuration |
| 264 | + - [ ] Create CacheConfig.svelte |
| 265 | + - [ ] Add cache settings fields |
| 266 | + - [ ] Add validation |
| 267 | + - [ ] Add tests |
| 268 | + |
| 269 | +## Phase 4: Frontend Backend Integration |
| 270 | +- [x] Check in general that the frontend can reach the backend |
| 271 | + - [x] Check if backend is reachable in embedded mode (served by flAPI binary) |
| 272 | + - [x] Check if backend is reachable in dev mode (served by `npm run dev`) |
| 273 | +- [x] Add frontend backend integration |
| 274 | + - [x] Add frontend backend integration for project configuration |
| 275 | + - [x] Add frontend backend integration for connection configuration |
| 276 | + - [x] Ensure that existing connections are shown in the [navigation tree](../web/src/lib/components/navigation) |
| 277 | + - [x] Ensure that editing an existing connection works |
| 278 | + - [ ] Check that adding a new connection works |
| 279 | + - [ ] Ensure that new connections are added to the navigation tree |
| 280 | + - [ ] Add frontend backend integration for endpoint configuration |
| 281 | + - [ ] Ensure that existing endpoints are shown in the [navigation tree](../web/src/lib/components/navigation) |
| 282 | + - [ ] Ensure that editing an existing endpoint works |
| 283 | + - [ ] Ensure that adding a new endpoint works |
| 284 | + - [ ] Ensure that new endpoints are added to the navigation tree |
| 285 | + - [ ] Add frontend backend integration for query configuration |
| 286 | + - [ ] Add frontend backend integration for cache configuration |
| 287 | + - [ ] Add frontend backend integration for authentication configuration |
| 288 | + |
| 289 | +## Phase 5: Advanced Features |
| 290 | + |
| 291 | +### 1. Tree View Implementation |
| 292 | +- [ ] Create tree view component for sidebar |
| 293 | + - [ ] Project structure representation |
| 294 | + - [ ] Endpoints listing |
| 295 | + - [ ] Connections listing |
| 296 | +- [ ] Add context menus |
| 297 | +- [ ] Implement drag-and-drop functionality |
| 298 | + |
| 299 | +### 2. Testing Interface |
| 300 | +- [ ] Create endpoint testing UI |
| 301 | + - [ ] Parameter input form |
| 302 | + - [ ] Request builder |
| 303 | + - [ ] Response viewer |
| 304 | +- [ ] Implement connection testing UI |
| 305 | +- [ ] Add cache testing functionality |
| 306 | + |
| 307 | +### 3. Cache Management |
| 308 | +- [ ] Implement cache configuration UI |
| 309 | +- [ ] Add cache refresh controls |
| 310 | +- [ ] Create cache status viewer |
| 311 | + |
| 312 | +## Phase 6: Polish and Integration |
| 313 | + |
| 314 | +### 1. UI/UX Improvements |
| 315 | +- [ ] Add loading states |
| 316 | +- [ ] Implement error handling UI |
| 317 | +- [ ] Add success notifications |
| 318 | +- [ ] Improve responsive design |
| 319 | + |
| 320 | +### 2. Testing and Documentation |
| 321 | +- [ ] Write component tests |
| 322 | +- [ ] Add end-to-end tests |
| 323 | +- [ ] Create user documentation |
| 324 | +- [ ] Add inline help/tooltips |
| 325 | + |
| 326 | +### 3. Build and Deployment |
| 327 | +- [ ] Optimize build configuration |
| 328 | +- [ ] Test embedded UI in flAPI binary |
| 329 | +- [ ] Verify cross-platform functionality |
| 330 | +- [ ] Add production optimizations |
| 331 | + |
| 332 | +- [ ] Create authentication configuration component |
| 333 | + - [ ] Basic auth configuration |
| 334 | + - [ ] Bearer token configuration |
| 335 | + - [ ] AWS Secrets Manager configuration |
| 336 | + - [ ] Secret name input with validation |
| 337 | + - [ ] Region selector |
| 338 | + - [ ] Credentials input (secret_id, secret_key) |
| 339 | + - [ ] Secret table name configuration |
| 340 | + - [ ] Init SQL editor with template support |
| 341 | +- [ ] Add authentication testing interface |
| 342 | + - [ ] Test basic auth credentials |
| 343 | + - [ ] Test AWS Secrets Manager connection |
| 344 | + - [ ] Preview generated init SQL |
| 345 | + |
| 346 | +## Notes |
| 347 | +- Start with basic functionality and iterate |
| 348 | +- Follow shadcn-svelte component patterns |
| 349 | +- Maintain TypeScript type safety throughout |
| 350 | +- Regularly test on all supported platforms |
| 351 | +- Keep bundle size in mind for embedded distribution |
| 352 | + |
| 353 | +## Resources |
| 354 | +- [shadcn-svelte Documentation](https://next.shadcn-svelte.com/) |
| 355 | +- [SvelteKit Documentation](https://kit.svelte.dev/) |
| 356 | +- [CodeMirror Documentation](https://codemirror.net/) |
| 357 | +- [OpenAPI Specification](./10_openapi.yaml) |
0 commit comments