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/pages/ImportCrowdSec.tsx

@@ -47,11 +47,11 @@ export default function ImportCrowdSec() {
 
   return (
     <div className="p-8">
-      <h1 className="text-3xl font-bold text-white mb-6">Import CrowdSec</h1>
+      <h1 className="text-3xl font-bold text-white mb-6">CrowdSec Configuration Packages</h1>
       <Card className="p-6">
         <div className="space-y-4">
-          <p className="text-sm text-gray-400">Upload a tar.gz or zip with your CrowdSec configuration. A backup will be created before importing.</p>
-          <input type="file" onChange={handleFile} accept=".tar.gz,.zip" />
+          <p className="text-sm text-gray-400">Upload a tar.gz or zip package. A backup is created before importing so you can roll back if needed. Export the current package from the Cerberus dashboard or CrowdSec config page.</p>
+          <input type="file" onChange={handleFile} accept=".tar.gz,.zip" data-testid="crowdsec-import-file" />
           <div className="flex gap-2">
             <Button onClick={() => handleImport()} isLoading={backupMutation.isPending || importMutation.isPending} disabled={!file}>Import</Button>
           </div>