From c2681f9399ab8f8951ac9aa5362345b786589757 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 19 Sep 2025 08:44:25 +0200
Subject: [PATCH] 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.

---
 components/settings/JiraConfigForm.tsx | 66 +++++++++++++++++---------
 1 file changed, 44 insertions(+), 22 deletions(-)

diff --git a/components/settings/JiraConfigForm.tsx b/components/settings/JiraConfigForm.tsx
index 9a77d2a..c952e88 100644
--- a/components/settings/JiraConfigForm.tsx
+++ b/components/settings/JiraConfigForm.tsx
@@ -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>
-        <Badge variant={isJiraConfigured ? 'success' : 'danger'}>
-          {isJiraConfigured ? '✓ Configuré' : '✗ Non configuré'}
-        </Badge>
+        <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,7 +384,27 @@ export function JiraConfigForm() {
             </Button>
           )}
         </div>
+
+        {/* Instructions */}
+        <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
+          <h3 className="font-medium mb-2">💡 Instructions de configuration</h3>
+          <div className="text-sm text-[var(--muted-foreground)] space-y-2">
+            <p><strong>1. URL de base:</strong> Votre domaine Jira Cloud (ex: https://monentreprise.atlassian.net)</p>
+            <p><strong>2. Email:</strong> L&apos;email de votre compte Jira/Atlassian</p>
+            <p><strong>3. Token API:</strong> Créez un token depuis votre profil Atlassian :</p>
+            <ul className="ml-4 space-y-1 list-disc">
+              <li>Allez sur <a href="https://id.atlassian.com/manage-profile/security/api-tokens" target="_blank" rel="noopener noreferrer" className="text-[var(--primary)] hover:underline">id.atlassian.com</a></li>
+              <li>Cliquez sur &quot;Create API token&quot;</li>
+              <li>Donnez un nom descriptif (ex: &quot;TowerControl&quot;)</li>
+              <li>Copiez le token généré</li>
+            </ul>
+            <p className="mt-3 text-xs">
+              <strong>Note:</strong> Ces variables doivent être configurées dans l&apos;environnement du serveur (JIRA_BASE_URL, JIRA_EMAIL, JIRA_API_TOKEN)
+            </p>
+          </div>
+        </div>
       </form>
+      )}
 
       {message && (
         <div className={`p-4 rounded border ${
@@ -374,25 +415,6 @@ export function JiraConfigForm() {
           {message.text}
         </div>
       )}
-
-      {/* Instructions */}
-      <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
-        <h3 className="font-medium mb-2">💡 Instructions de configuration</h3>
-        <div className="text-sm text-[var(--muted-foreground)] space-y-2">
-          <p><strong>1. URL de base:</strong> Votre domaine Jira Cloud (ex: https://monentreprise.atlassian.net)</p>
-          <p><strong>2. Email:</strong> L&apos;email de votre compte Jira/Atlassian</p>
-          <p><strong>3. Token API:</strong> Créez un token depuis votre profil Atlassian :</p>
-          <ul className="ml-4 space-y-1 list-disc">
-            <li>Allez sur <a href="https://id.atlassian.com/manage-profile/security/api-tokens" target="_blank" rel="noopener noreferrer" className="text-[var(--primary)] hover:underline">id.atlassian.com</a></li>
-            <li>Cliquez sur &quot;Create API token&quot;</li>
-            <li>Donnez un nom descriptif (ex: &quot;TowerControl&quot;)</li>
-            <li>Copiez le token généré</li>
-          </ul>
-          <p className="mt-3 text-xs">
-            <strong>Note:</strong> Ces variables doivent être configurées dans l&apos;environnement du serveur (JIRA_BASE_URL, JIRA_EMAIL, JIRA_API_TOKEN)
-          </p>
-        </div>
-      </div>
     </div>
   );
 }