Refactor WordPress integration service to use API key for connection testing
- Updated the `IntegrationService` to perform connection tests using only the API key, removing reliance on username and app password. - Simplified health check logic and improved error messaging for better clarity. - Added functionality to revoke API keys in the `WordPressIntegrationForm` component. - Enhanced site settings page with a site selector and improved integration status display. - Cleaned up unused code and improved overall structure for better maintainability.
This commit is contained in:
IGNY8 VPS (Salman)
179
INTEGRATION_REFACTOR.md
Normal file
179
INTEGRATION_REFACTOR.md
Normal file
@@ -0,0 +1,179 @@
|
||||
# Integration Settings Refactor & New Indicator
|
||||
|
||||
## Changes Summary
|
||||
|
||||
### 1. **Removed Integration Settings Card** ✅
|
||||
**File:** `frontend/src/components/sites/WordPressIntegrationForm.tsx`
|
||||
|
||||
**Removed:**
|
||||
- Entire "Integration Settings" card with checkboxes for "Enable Integration" and "Enable Two-Way Sync"
|
||||
- "Integration Status" card showing sync status and last sync time
|
||||
- "Test Connection" button
|
||||
- "Save Settings" button
|
||||
- Related functions: `handleSaveSettings()`, `handleTestConnection()`
|
||||
- Related state: `isActive`, `syncEnabled`, `loading`
|
||||
|
||||
### 2. **Added Toggle Switch in Header** ✅
|
||||
**File:** `frontend/src/components/sites/WordPressIntegrationForm.tsx`
|
||||
|
||||
**Added:**
|
||||
- Simple toggle switch in the WordPress Integration header (top right corner)
|
||||
- Toggle only appears if API key exists
|
||||
- Shows "Enabled" or "Disabled" label next to toggle
|
||||
- Clicking toggle calls `handleToggleIntegration()` which:
|
||||
- Updates integration's `is_active` status
|
||||
- Creates integration if it doesn't exist and user enables it
|
||||
- Shows toast notifications for success/error
|
||||
- Automatically reloads integration state
|
||||
|
||||
**UI:**
|
||||
```tsx
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-medium">
|
||||
{integrationEnabled ? 'Enabled' : 'Disabled'}
|
||||
</span>
|
||||
<button /* toggle switch styles */ />
|
||||
</div>
|
||||
```
|
||||
|
||||
### 3. **Completely New Simple Indicator** ✅
|
||||
**File:** `frontend/src/pages/Sites/Settings.tsx`
|
||||
|
||||
**Removed old complex indicator:**
|
||||
- `integrationTestStatus` state ('connected' | 'pending' | 'error' | 'not_configured')
|
||||
- `integrationLastChecked` state
|
||||
- `integrationCheckRef` for periodic checks (every 5 min)
|
||||
- `integrationErrorCooldownRef` for cooldown logic
|
||||
- `runIntegrationTest()` function with API calls
|
||||
- Multiple useEffect hooks for testing and periodic checks
|
||||
- "Refresh Status" button
|
||||
|
||||
**Added new simple indicator:**
|
||||
- `integrationStatus` state ('configured' | 'not_configured')
|
||||
- Simple check: Green if `wordPressIntegration.is_active` AND `site.wp_api_key` exists
|
||||
- No API calls
|
||||
- No periodic checks
|
||||
- No error states
|
||||
- No pending states
|
||||
|
||||
**Logic:**
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
if (wordPressIntegration && wordPressIntegration.is_active && site?.wp_api_key) {
|
||||
setIntegrationStatus('configured');
|
||||
} else {
|
||||
setIntegrationStatus('not_configured');
|
||||
}
|
||||
}, [wordPressIntegration, site]);
|
||||
```
|
||||
|
||||
**UI:**
|
||||
```tsx
|
||||
<span className={`inline-block w-6 h-6 rounded-full ${
|
||||
integrationStatus === 'configured' ? 'bg-green-500' : 'bg-gray-300'
|
||||
}`} />
|
||||
<span>{integrationStatus === 'configured' ? 'Configured' : 'Not configured'}</span>
|
||||
```
|
||||
|
||||
### 4. **Simplified Sync Handler** ✅
|
||||
**File:** `frontend/src/pages/Sites/Settings.tsx`
|
||||
|
||||
**Removed:**
|
||||
- Complex fallback logic for sites without integration
|
||||
- Collection-level test connection attempts
|
||||
- Multiple error handling paths with cooldowns
|
||||
- Integration status updates in sync handler
|
||||
|
||||
**New simplified logic:**
|
||||
```typescript
|
||||
const handleManualSync = async () => {
|
||||
if (wordPressIntegration && wordPressIntegration.id) {
|
||||
const res = await integrationApi.syncIntegration(wordPressIntegration.id, 'incremental');
|
||||
if (res && res.success) {
|
||||
toast.success('Sync started');
|
||||
setTimeout(() => loadContentTypes(), 1500);
|
||||
} else {
|
||||
toast.error(res?.message || 'Sync failed to start');
|
||||
}
|
||||
} else {
|
||||
toast.error('No integration configured. Please configure WordPress integration first.');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Benefits
|
||||
|
||||
### Performance
|
||||
- ✅ **No unnecessary API calls** - Indicator no longer polls every 5 minutes
|
||||
- ✅ **Instant status** - No waiting for "pending" state
|
||||
- ✅ **No cooldown complexity** - Removed 60-minute error cooldown logic
|
||||
|
||||
### User Experience
|
||||
- ✅ **Cleaner UI** - Removed cluttered cards and buttons
|
||||
- ✅ **Simple toggle** - One-click enable/disable instead of checkboxes + save button
|
||||
- ✅ **Clear status** - Green = configured & enabled, Gray = not configured
|
||||
- ✅ **Less confusion** - No "connected" vs "error" vs "pending" states
|
||||
|
||||
### Code Quality
|
||||
- ✅ **Reduced complexity** - Removed ~150 lines of complex test logic
|
||||
- ✅ **Single source of truth** - Status based on actual database state, not API tests
|
||||
- ✅ **Predictable** - No async operations affecting indicator state
|
||||
|
||||
## What the Indicator Now Shows
|
||||
|
||||
| Scenario | Indicator | Reason |
|
||||
|----------|-----------|--------|
|
||||
| API key exists + Integration enabled | 🟢 Configured | Both requirements met |
|
||||
| API key exists + Integration disabled | ⚪ Not configured | Integration not enabled |
|
||||
| No API key | ⚪ Not configured | No API key |
|
||||
| No integration record | ⚪ Not configured | Not set up |
|
||||
|
||||
## What Controls Communication
|
||||
|
||||
**Communication with WordPress plugin is now controlled by:**
|
||||
1. **Integration toggle** - Must be enabled (checked in `WordPressIntegrationForm`)
|
||||
2. **API key presence** - Must exist in `site.wp_api_key`
|
||||
3. **Backend validation** - Backend still validates credentials when actual sync/test happens
|
||||
|
||||
## Testing Instructions
|
||||
|
||||
1. **Toggle behavior:**
|
||||
- Go to Integrations tab
|
||||
- Generate API key if needed
|
||||
- Toggle should appear in header
|
||||
- Click to enable/disable
|
||||
- Indicator should update immediately
|
||||
|
||||
2. **Indicator behavior:**
|
||||
- With toggle ON + API key → Green "Configured"
|
||||
- With toggle OFF → Gray "Not configured"
|
||||
- Without API key → Gray "Not configured"
|
||||
|
||||
3. **Sync behavior:**
|
||||
- Can only sync if integration is enabled and API key exists
|
||||
- Clicking "Sync Now" without proper setup shows error toast
|
||||
|
||||
## Files Modified
|
||||
|
||||
1. `frontend/src/components/sites/WordPressIntegrationForm.tsx`
|
||||
- Removed Integration Settings card (~100 lines)
|
||||
- Added toggle switch in header
|
||||
- Added `handleToggleIntegration()` function
|
||||
|
||||
2. `frontend/src/pages/Sites/Settings.tsx`
|
||||
- Removed complex indicator logic (~80 lines)
|
||||
- Added simple `integrationStatus` state
|
||||
- Simplified `handleManualSync()`
|
||||
- Updated indicator UI
|
||||
|
||||
## Migration Notes
|
||||
|
||||
**Breaking changes:**
|
||||
- None - Toggle uses same backend field (`is_active`)
|
||||
- Existing integrations will maintain their state
|
||||
|
||||
**Behavioral changes:**
|
||||
- Indicator no longer attempts to test actual connection
|
||||
- Status is now instant (no API calls)
|
||||
- No more "error" or "pending" states
|
||||
|
||||
Reference in New Issue
Block a user