feat: enhance CrowdSec configuration tests and add new import/export functionality

- Added comprehensive tests for CrowdSec configuration, including preset application and validation error handling.
- Introduced new test cases for importing CrowdSec configurations, ensuring backup creation and successful import.
- Updated existing tests to reflect changes in UI elements and functionality, including toggling CrowdSec mode and exporting configurations.
- Created utility functions for building export filenames and handling downloads, improving code organization and reusability.
- Refactored existing tests to use new test IDs and ensure accurate assertions for UI elements and API calls.

frontend/src/components/Layout.tsx

@@ -62,8 +62,8 @@ export default function Layout({ children }: LayoutProps) {
     { name: 'Domains', path: '/domains', icon: '🌍' },
     { name: 'Certificates', path: '/certificates', icon: '🔒' },
     { name: 'Uptime', path: '/uptime', icon: '📈' },
-    { name: 'Security', path: '/security', icon: '🛡️', children: [
-      { name: 'Overview', path: '/security', icon: '🛡️' },
+    { name: 'Cerberus', path: '/security', icon: '🛡️', children: [
+      { name: 'Dashboard', path: '/security', icon: '🛡️' },
       { name: 'CrowdSec', path: '/security/crowdsec', icon: '🛡️' },
       { name: 'Access Lists', path: '/security/access-lists', icon: '🔒' },
       { name: 'Rate Limiting', path: '/security/rate-limiting', icon: '⚡' },
@@ -104,7 +104,7 @@ export default function Layout({ children }: LayoutProps) {
     // Optional Features Logic
     // Default to visible (true) if flags are loading or undefined
     if (item.name === 'Uptime') return featureFlags?.['feature.uptime.enabled'] !== false
-    if (item.name === 'Security') return featureFlags?.['feature.cerberus.enabled'] !== false
+    if (item.name === 'Cerberus') return featureFlags?.['feature.cerberus.enabled'] !== false
     return true
   })
 

frontend/src/components/__tests__/Layout.test.tsx

@@ -149,7 +149,7 @@ describe('Layout', () => {
   })
 
   describe('Feature Flags - Conditional Sidebar Items', () => {
-    it('displays Security nav item when Cerberus is enabled', async () => {
+    it('displays Cerberus nav item when Cerberus is enabled', async () => {
       vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
         'feature.cerberus.enabled': true,
         'feature.uptime.enabled': true,
@@ -162,11 +162,11 @@ describe('Layout', () => {
       )
 
       await waitFor(() => {
-        expect(screen.getByText('Security')).toBeInTheDocument()
+        expect(screen.getByText('Cerberus')).toBeInTheDocument()
       })
     })
 
-    it('hides Security nav item when Cerberus is disabled', async () => {
+    it('hides Cerberus nav item when Cerberus is disabled', async () => {
       vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
         'feature.cerberus.enabled': false,
         'feature.uptime.enabled': true,
@@ -179,7 +179,7 @@ describe('Layout', () => {
       )
 
       await waitFor(() => {
-        expect(screen.queryByText('Security')).not.toBeInTheDocument()
+        expect(screen.queryByText('Cerberus')).not.toBeInTheDocument()
       })
     })
 
@@ -217,7 +217,7 @@ describe('Layout', () => {
       })
     })
 
-    it('shows Security and Uptime when both features are enabled', async () => {
+    it('shows Cerberus and Uptime when both features are enabled', async () => {
       vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
         'feature.cerberus.enabled': true,
         'feature.uptime.enabled': true,
@@ -230,12 +230,12 @@ describe('Layout', () => {
       )
 
       await waitFor(() => {
-        expect(screen.getByText('Security')).toBeInTheDocument()
+        expect(screen.getByText('Cerberus')).toBeInTheDocument()
         expect(screen.getByText('Uptime')).toBeInTheDocument()
       })
     })
 
-    it('hides both Security and Uptime when both features are disabled', async () => {
+    it('hides both Cerberus and Uptime when both features are disabled', async () => {
       vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
         'feature.cerberus.enabled': false,
         'feature.uptime.enabled': false,
@@ -248,12 +248,12 @@ describe('Layout', () => {
       )
 
       await waitFor(() => {
-        expect(screen.queryByText('Security')).not.toBeInTheDocument()
+        expect(screen.queryByText('Cerberus')).not.toBeInTheDocument()
         expect(screen.queryByText('Uptime')).not.toBeInTheDocument()
       })
     })
 
-    it('defaults to showing Security and Uptime when feature flags are loading', async () => {
+    it('defaults to showing Cerberus and Uptime when feature flags are loading', async () => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue(undefined as any)
 
@@ -265,7 +265,7 @@ describe('Layout', () => {
 
       // When flags are undefined, items should be visible by default (conservative approach)
       await waitFor(() => {
-        expect(screen.getByText('Security')).toBeInTheDocument()
+        expect(screen.getByText('Cerberus')).toBeInTheDocument()
         expect(screen.getByText('Uptime')).toBeInTheDocument()
       })
     })