mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-11-27 20:50:25 +08:00
58e000bf12## Alert and Confirm Modal System for Tsunami This PR implements a complete modal system for the tsunami app framework as specified in the requirements. ### Implementation Summary **Backend (Go) - 574 lines changed across 11 files:** 1. **Type Definitions** (`rpctypes/protocoltypes.go`): - `ModalConfig`: Configuration for modal display with icon, title, text, and button labels - `ModalResult`: Result structure containing modal ID and confirmation status 2. **Client State Management** (`engine/clientimpl.go`): - Added `ModalState` to track open modals with result channels - `OpenModals` map to track all currently open modals - `ShowModal()`: Sends SSE event to display modal and returns result channel - `CloseModal()`: Processes modal result from frontend - `CloseAllModals()`: Automatically cancels all modals when frontend sends Resync flag (page refresh) 3. **API Endpoint** (`engine/serverhandlers.go`): - `/api/modalresult` POST endpoint to receive modal results from frontend - Validates and processes `ModalResult` JSON payload - Closes all modals on Resync (page refresh) before processing events 4. **User-Facing Hooks** (`app/hooks.go`): - `UseAlertModal()`: Returns (isOpen, triggerAlert) for alert modals - `UseConfirmModal()`: Returns (isOpen, triggerConfirm) for confirm modals - Both hooks manage local state and handle async modal lifecycle **Frontend (TypeScript/React):** 1. **Type Definitions** (`types/vdom.d.ts`): - Added `ModalConfig` and `ModalResult` TypeScript types 2. **Modal Components** (`element/modals.tsx`): - `AlertModal`: Dark-mode styled alert with icon, title, text, and OK button - `ConfirmModal`: Dark-mode styled confirm with icon, title, text, OK and Cancel buttons - Both support keyboard (ESC) and backdrop click dismissal - Fully accessible with focus management 3. **Model Integration** (`model/tsunami-model.tsx`): - Added `currentModal` atom to track displayed modal - SSE event handler for `showmodal` events - `sendModalResult()`: Sends result to `/api/modalresult` and clears modal 4. **UI Integration** (`vdom.tsx`): - Integrated modal display in `VDomView` component - Conditionally renders alert or confirm modal based on type **Demo Application** (`demo/modaltest/`): - Comprehensive demonstration of modal functionality - Shows 4 different modal configurations: - Alert with icon - Simple alert with custom button text - Confirm modal - Delete confirmation with custom buttons - Displays modal state and results in real-time ### Key Features ✅ **SSE-Based Modal Display**: Modals are pushed from backend to frontend via SSE ✅ **API-Based Result Handling**: Results sent back via `/api/modalresult` endpoint ✅ **Automatic Cleanup**: All open modals auto-cancel on page refresh (when Resync flag is set) ✅ **Type-Safe Hooks**: Full TypeScript and Go type safety ✅ **Dark Mode UI**: Components styled for Wave Terminal's dark theme ✅ **Accessibility**: Keyboard navigation, ESC to dismiss, backdrop click support ✅ **Zero Security Issues**: Passed CodeQL security analysis ✅ **Zero Code Review Issues**: Clean implementation following best practices ### Testing - ✅ Go code compiles without errors - ✅ TypeScript/React builds without errors - ✅ All existing tests pass - ✅ Demo app created and compiles successfully - ✅ CodeQL security scan: 0 vulnerabilities - ✅ Code review: 0 issues ### Security Summary No security vulnerabilities were introduced. All modal operations are properly scoped to the client's SSE connection, and modal IDs are generated server-side to prevent tampering. Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: sawka <2722291+sawka@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| protocoltypes.go | ||