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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user