This commit is contained in:
IGNY8 VPS (Salman)
2026-01-13 01:23:54 +00:00
parent 78c9cd38e0
commit 47a5a8b1da
10 changed files with 343 additions and 488 deletions

View File

@@ -398,7 +398,6 @@ const SEARCH_ITEMS: SearchResult[] = [
keywords: ['usage', 'analytics', 'stats', 'consumption', 'credits spent', 'reports', 'metrics'],
content: 'View detailed credit usage analytics. Charts and graphs showing daily/weekly/monthly consumption. Filter by action type (content generation, images, clustering). Export usage reports.',
quickActions: [
{ label: 'View Logs', path: '/account/usage/logs' },
{ label: 'Plans & Billing', path: '/account/plans' },
]
},

View File

@@ -142,10 +142,13 @@ export default function WordPressIntegrationForm({
}
};
// Auto-test connection when API key changes
// DON'T auto-test - only test when user clicks Test button
// Just set status based on whether key exists
useEffect(() => {
if (apiKey && siteUrl) {
testConnection();
// Key exists - show as configured, but not yet tested/connected
setConnectionStatus('unknown');
setConnectionMessage('Click Test to verify connection');
} else {
setConnectionStatus('unknown');
setConnectionMessage('');
@@ -278,42 +281,42 @@ export default function WordPressIntegrationForm({
</div>
</div>
{/* Connection Status */}
{/* Connection Status & Test Button */}
{apiKey && (
<div className="flex items-center gap-2">
{/* Status Badge */}
<div className="flex items-center gap-3">
{/* Status Indicator - Uses theme colors from design-system */}
<div className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border ${
connectionStatus === 'connected'
? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
? 'bg-success-50 dark:bg-success-900/20 border-success-200 dark:border-success-800'
: connectionStatus === 'testing'
? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
? 'bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800'
: connectionStatus === 'api_key_pending'
? 'bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800'
? 'bg-warning-50 dark:bg-warning-900/20 border-warning-200 dark:border-warning-800'
: connectionStatus === 'plugin_missing'
? 'bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800'
? 'bg-warning-50 dark:bg-warning-900/20 border-warning-200 dark:border-warning-800'
: connectionStatus === 'error'
? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800'
? 'bg-error-50 dark:bg-error-900/20 border-error-200 dark:border-error-800'
: 'bg-gray-50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700'
}`}>
{connectionStatus === 'connected' && (
<><CheckCircleIcon className="w-4 h-4 text-green-600 dark:text-green-400" />
<span className="text-sm font-medium text-green-700 dark:text-green-300">Connected</span></>
<><CheckCircleIcon className="w-4 h-4 text-success-600 dark:text-success-400" />
<span className="text-sm font-medium text-success-700 dark:text-success-300">Connected</span></>
)}
{connectionStatus === 'testing' && (
<><RefreshCwIcon className="w-4 h-4 text-blue-600 dark:text-blue-400 animate-spin" />
<span className="text-sm font-medium text-blue-700 dark:text-blue-300">Testing...</span></>
<><RefreshCwIcon className="w-4 h-4 text-brand-600 dark:text-brand-400 animate-spin" />
<span className="text-sm font-medium text-brand-700 dark:text-brand-300">Testing...</span></>
)}
{connectionStatus === 'api_key_pending' && (
<><AlertIcon className="w-4 h-4 text-amber-600 dark:text-amber-400" />
<span className="text-sm font-medium text-amber-700 dark:text-amber-300">Pending Setup</span></>
<><AlertIcon className="w-4 h-4 text-warning-600 dark:text-warning-400" />
<span className="text-sm font-medium text-warning-700 dark:text-warning-300">Pending Setup</span></>
)}
{connectionStatus === 'plugin_missing' && (
<><AlertIcon className="w-4 h-4 text-amber-600 dark:text-amber-400" />
<span className="text-sm font-medium text-amber-700 dark:text-amber-300">Plugin Missing</span></>
<><AlertIcon className="w-4 h-4 text-warning-600 dark:text-warning-400" />
<span className="text-sm font-medium text-warning-700 dark:text-warning-300">Plugin Missing</span></>
)}
{connectionStatus === 'error' && (
<><AlertIcon className="w-4 h-4 text-red-600 dark:text-red-400" />
<span className="text-sm font-medium text-red-700 dark:text-red-300">Error</span></>
<><AlertIcon className="w-4 h-4 text-error-600 dark:text-error-400" />
<span className="text-sm font-medium text-error-700 dark:text-error-300">Error</span></>
)}
{connectionStatus === 'unknown' && (
<><InfoIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
@@ -321,16 +324,15 @@ export default function WordPressIntegrationForm({
)}
</div>
{/* Test Connection Button */}
<Button
{/* Test Connection Button - IconButton only */}
<IconButton
onClick={testConnection}
variant="outline"
size="sm"
tone="brand"
disabled={testingConnection || !apiKey}
startIcon={<RefreshCwIcon className={`w-4 h-4 ${testingConnection ? 'animate-spin' : ''}`} />}
>
Test
</Button>
title="Test Connection"
icon={<RefreshCwIcon className={`w-4 h-4 ${testingConnection ? 'animate-spin' : ''}`} />}
/>
</div>
)}
</div>