28a9444dd7
Corrected JSX syntax errors in CrowdSecConfig and ProxyHostForm Refactored ProxyHostForm to use shadcn Dialog, fixing z-index issues and unclickable modals Removed duplicate logic blocks causing YAML errors in crowdsec-integration and e2e-tests workflows Synced .version file with current git tag to satisfy validation checks
93 lines
4.1 KiB
Markdown
93 lines
4.1 KiB
Markdown
# Remediation Plan: Stability & E2E Regressions
|
|
|
|
**Objective**: Restore system stability by fixing pre-commit failures, resolving E2E regressions in the frontend, and correcting CI workflow configurations.
|
|
|
|
## 1. Findings (Current State)
|
|
|
|
| Issue | Location | Description | Severity |
|
|
|-------|----------|-------------|----------|
|
|
| **Syntax Error** | `frontend/src/pages/CrowdSecConfig.tsx` | Missing fragment closing tag (`</>`) at the end of the `showBanModal` conditional block. | **Critical** (Build Failure) |
|
|
| **UX/E2E Regression** | `frontend/src/components/ProxyHostForm.tsx` | Manual `fixed z-50` overlay causes stacking context issues, preventing interaction with nested modals (e.g., "Add Proxy Host"). | **High** (E2E Failure) |
|
|
| **CI Misconfiguration** | `.github/workflows/crowdsec-integration.yml` | Duplicate logic block for tag determination and mismatched step identifiers (`id: image` vs `steps.determine-tag`). | **Medium** (CI Failure) |
|
|
| **Version Mismatch** | `.version` | File contains `v0.17.0`, but git tag is `v0.17.1`. | **Low** (Inconsistency) |
|
|
|
|
## 2. Technical Specifications
|
|
|
|
### 2.1. Frontend: Proxy Host Form Refactor
|
|
**Goal**: Replace manual overlay implementation with standardized Shadcn UI components to resolve stacking context issues.
|
|
|
|
- **Component**: `frontend/src/components/ProxyHostForm.tsx`
|
|
- **Change**:
|
|
- Remove manual overlay logic:
|
|
```tsx
|
|
<div className="fixed inset-0 bg-black/50 z-40" onClick={onCancel} />
|
|
<div className="fixed inset-0 flex items-center justify-center ... z-50">...</div>
|
|
```
|
|
- Implement `Dialog` component (Shadcn UI):
|
|
```tsx
|
|
<Dialog open={true} onOpenChange={(open) => !open && onCancel()}>
|
|
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto bg-dark-card border-gray-800 p-0 gap-0">
|
|
<DialogHeader className="p-6 border-b border-gray-800">
|
|
<DialogTitle className="text-2xl font-bold text-white">
|
|
{host ? 'Edit Proxy Host' : 'Add Proxy Host'}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
{/* Form Content */}
|
|
</DialogContent>
|
|
</Dialog>
|
|
```
|
|
- Ensure all form logic remains intact within the Dialog content.
|
|
|
|
### 2.2. Frontend: CrowdSec Config Fix
|
|
**Goal**: Fix JSX syntax error.
|
|
|
|
- **Component**: `frontend/src/pages/CrowdSecConfig.tsx`
|
|
- **Change**: Add missing `</>` tag to close the Fragment wrapping the Ban IP Modal.
|
|
```tsx
|
|
{showBanModal && (
|
|
<>
|
|
{/* ... Modal Content ... */}
|
|
</> // <-- Add this
|
|
)}
|
|
```
|
|
|
|
### 2.3. CI Workflow Cleanup
|
|
**Goal**: Remove redundancy and fix references.
|
|
|
|
- **File**: `.github/workflows/crowdsec-integration.yml`
|
|
- **Changes**:
|
|
- Rename step `id: image` to `id: determine-tag`.
|
|
- Update all references from `steps.image.outputs...` to `steps.determine-tag.outputs...`.
|
|
- Review file for duplicate "Determine image tag" logic blocks and remove the redundant one.
|
|
|
|
### 2.4. Versioning
|
|
**Goal**: Sync version file.
|
|
|
|
- **File**: `.version`
|
|
- **Change**: Update content to `v0.17.1`.
|
|
|
|
## 3. Implementation Plan
|
|
|
|
### Phase 1: Quick Fixes (Ops)
|
|
- [ ] **Task 1.1**: Update `.version` to `v0.17.1`.
|
|
- [ ] **Task 1.2**: Fix `.github/workflows/crowdsec-integration.yml` (Rename ID, remove duplicates).
|
|
|
|
### Phase 2: Frontend Syntax Repair
|
|
- [ ] **Task 2.1**: Add missing `</>` to `frontend/src/pages/CrowdSecConfig.tsx`.
|
|
- [ ] **Task 2.2**: Verify frontend build (`npm run build` in frontend) to ensure no other syntax errors.
|
|
|
|
### Phase 3: Frontend Component Refactor
|
|
- [ ] **Task 3.1**: Verify `Dialog` components are available in codebase (`components/ui/dialog`).
|
|
- [ ] **Task 3.2**: Refactor `ProxyHostForm.tsx` to use `Dialog`.
|
|
- [ ] **Task 3.3**: Verify "Add Proxy Host" modal interactions manually or via E2E test.
|
|
|
|
### Phase 4: Verification
|
|
- [ ] **Task 4.1**: Run Playwright E2E tests for Dashboard/Proxy Hosts.
|
|
- [ ] **Task 4.2**: Run Lint/Pre-commit checks.
|
|
|
|
## 4. Acceptance Criteria
|
|
- [ ] `npm run lint` passes in `frontend/`.
|
|
- [ ] `.github/workflows/crowdsec-integration.yml` parses correctly (no YAML errors).
|
|
- [ ] E2E tests for Proxy Host management pass.
|
|
- [ ] `.version` matches git tag.
|