feat: enhance JiraConfigForm with conditional display and instructions

- Added state management for form visibility with `showForm` to toggle display based on Jira configuration.
- Implemented instructions for configuration, detailing base URL, email, and API token setup.
- Updated UI to improve user interaction with a button to show/hide the form.
This commit is contained in:
Julien Froidefond
2025-09-19 08:44:25 +02:00
parent 5a6d907006
commit c2681f9399

View File

@@ -20,6 +20,7 @@ export function JiraConfigForm() {
const [isValidating, setIsValidating] = useState(false);
const [validationResult, setValidationResult] = useState<{ type: 'success' | 'error', text: string } | null>(null);
const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
const [showForm, setShowForm] = useState(false);
// Charger les données existantes dans le formulaire
useEffect(() => {
@@ -34,6 +35,14 @@ export function JiraConfigForm() {
}
}, [config]);
// Afficher le formulaire par défaut si Jira n'est pas configuré
useEffect(() => {
const isConfigured = config?.enabled && (config?.baseUrl || config?.email);
if (!configLoading && !isConfigured) {
setShowForm(true);
}
}, [config, configLoading]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
@@ -47,6 +56,8 @@ export function JiraConfigForm() {
type: 'success',
text: result.message
});
// Masquer le formulaire après une sauvegarde réussie
setShowForm(false);
} else {
setMessage({
type: 'error',
@@ -154,9 +165,18 @@ export function JiraConfigForm() {
}
</p>
</div>
<div className="flex items-center gap-3">
<Badge variant={isJiraConfigured ? 'success' : 'danger'}>
{isJiraConfigured ? '✓ Configuré' : '✗ Non configuré'}
</Badge>
<Button
variant="secondary"
size="sm"
onClick={() => setShowForm(!showForm)}
>
{showForm ? 'Masquer' : (isJiraConfigured ? 'Modifier' : 'Configurer')}
</Button>
</div>
</div>
{isJiraConfigured && (
@@ -206,6 +226,7 @@ export function JiraConfigForm() {
)}
{/* Formulaire de configuration */}
{showForm && (
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-sm font-medium mb-2">
@@ -363,17 +384,6 @@ export function JiraConfigForm() {
</Button>
)}
</div>
</form>
{message && (
<div className={`p-4 rounded border ${
message.type === 'success'
? 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200'
: 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200'
}`}>
{message.text}
</div>
)}
{/* Instructions */}
<div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
@@ -393,6 +403,18 @@ export function JiraConfigForm() {
</p>
</div>
</div>
</form>
)}
{message && (
<div className={`p-4 rounded border ${
message.type === 'success'
? 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200'
: 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200'
}`}>
{message.text}
</div>
)}
</div>
);
}