@friggframework/devtools 2.0.0--canary.398.dd443c7.0 → 2.0.0--canary.402.d2f4ae6.0

package/management-ui/src/components/connections/ConnectionTester.jsx

@@ -0,0 +1,200 @@
+import React, { useState } from 'react'
+import { Button } from '../Button'
+import LoadingSpinner from '../LoadingSpinner'
+import StatusBadge from '../StatusBadge'
+import api from '../../services/api'
+
+const ConnectionTester = ({ connection, onTestComplete }) => {
+  const [testing, setTesting] = useState(false)
+  const [testResult, setTestResult] = useState(null)
+  const [testDetails, setTestDetails] = useState([])
+
+  const runConnectionTest = async () => {
+    setTesting(true)
+    setTestResult(null)
+    setTestDetails([])
+
+    const steps = [
+      { id: 'auth', name: 'Validating authentication', status: 'pending' },
+      { id: 'api', name: 'Testing API connectivity', status: 'pending' },
+      { id: 'permissions', name: 'Checking permissions', status: 'pending' },
+      { id: 'data', name: 'Fetching sample data', status: 'pending' }
+    ]
+
+    setTestDetails(steps)
+
+    try {
+      // Run comprehensive connection test
+      const response = await api.post(`/api/connections/${connection.id}/test`, {
+        comprehensive: true
+      })
+
+      const { results, summary } = response.data
+
+      // Update test details with results
+      const updatedSteps = steps.map(step => {
+        const result = results[step.id]
+        return {
+          ...step,
+          status: result?.success ? 'success' : 'failed',
+          message: result?.message,
+          latency: result?.latency,
+          error: result?.error
+        }
+      })
+
+      setTestDetails(updatedSteps)
+      setTestResult(summary)
+
+      if (onTestComplete) {
+        onTestComplete(summary)
+      }
+
+    } catch (error) {
+      setTestResult({
+        success: false,
+        error: error.response?.data?.error || 'Connection test failed'
+      })
+
+      // Mark all steps as failed
+      setTestDetails(steps.map(step => ({
+        ...step,
+        status: 'failed',
+        error: 'Test aborted due to error'
+      })))
+    } finally {
+      setTesting(false)
+    }
+  }
+
+  const getStatusColor = (status) => {
+    switch (status) {
+      case 'success':
+        return 'text-green-600'
+      case 'failed':
+        return 'text-red-600'
+      case 'pending':
+        return 'text-gray-400'
+      default:
+        return 'text-gray-600'
+    }
+  }
+
+  const getStatusIcon = (status) => {
+    switch (status) {
+      case 'success':
+        return (
+          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+          </svg>
+        )
+      case 'failed':
+        return (
+          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+          </svg>
+        )
+      case 'pending':
+        return <LoadingSpinner size="sm" />
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h3 className="text-lg font-semibold text-gray-900">Connection Test</h3>
+        {testResult && (
+          <StatusBadge 
+            status={testResult.success ? 'success' : 'error'}
+            text={testResult.success ? 'Passed' : 'Failed'}
+          />
+        )}
+      </div>
+
+      {!testing && !testResult && (
+        <div>
+          <p className="text-sm text-gray-600 mb-4">
+            Run a comprehensive test to validate this connection's authentication,
+            API access, and permissions.
+          </p>
+          <Button onClick={runConnectionTest} variant="primary">
+            Run Connection Test
+          </Button>
+        </div>
+      )}
+
+      {(testing || testDetails.length > 0) && (
+        <div className="space-y-3">
+          {testDetails.map((step) => (
+            <div key={step.id} className="flex items-start space-x-3">
+              <div className={`flex-shrink-0 ${getStatusColor(step.status)}`}>
+                {getStatusIcon(step.status)}
+              </div>
+              <div className="flex-1">
+                <p className="text-sm font-medium text-gray-900">{step.name}</p>
+                {step.message && (
+                  <p className="text-sm text-gray-600 mt-1">{step.message}</p>
+                )}
+                {step.error && (
+                  <p className="text-sm text-red-600 mt-1">{step.error}</p>
+                )}
+                {step.latency && (
+                  <p className="text-xs text-gray-500 mt-1">
+                    Response time: {step.latency}ms
+                  </p>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {testResult && (
+        <div className="mt-6 pt-6 border-t border-gray-200">
+          <h4 className="text-sm font-semibold text-gray-900 mb-3">Test Summary</h4>
+          
+          {testResult.success ? (
+            <div className="bg-green-50 border border-green-200 rounded-md p-4">
+              <p className="text-sm text-green-800">
+                All tests passed successfully. The connection is working properly.
+              </p>
+              {testResult.avgLatency && (
+                <p className="text-xs text-green-700 mt-2">
+                  Average response time: {testResult.avgLatency}ms
+                </p>
+              )}
+            </div>
+          ) : (
+            <div className="bg-red-50 border border-red-200 rounded-md p-4">
+              <p className="text-sm text-red-800">
+                {testResult.error || 'One or more tests failed. Please check the connection configuration.'}
+              </p>
+              {testResult.suggestion && (
+                <p className="text-xs text-red-700 mt-2">
+                  Suggestion: {testResult.suggestion}
+                </p>
+              )}
+            </div>
+          )}
+
+          {!testing && (
+            <div className="mt-4 flex space-x-3">
+              <Button onClick={runConnectionTest} variant="secondary" size="sm">
+                Run Again
+              </Button>
+              {testResult.success && testResult.canRefreshToken && (
+                <Button variant="secondary" size="sm">
+                  Refresh Token
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ConnectionTester

package/management-ui/src/components/connections/EntityRelationshipMapper.jsx

@@ -0,0 +1,292 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { Button } from '../Button'
+import LoadingSpinner from '../LoadingSpinner'
+import api from '../../services/api'
+
+const EntityRelationshipMapper = ({ connectionId }) => {
+  const [entities, setEntities] = useState([])
+  const [relationships, setRelationships] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [selectedEntity, setSelectedEntity] = useState(null)
+  const [viewMode, setViewMode] = useState('graph') // graph or list
+  const canvasRef = useRef(null)
+
+  useEffect(() => {
+    fetchEntityData()
+  }, [connectionId])
+
+  useEffect(() => {
+    if (viewMode === 'graph' && entities.length > 0) {
+      drawEntityGraph()
+    }
+  }, [entities, relationships, viewMode, selectedEntity])
+
+  const fetchEntityData = async () => {
+    setLoading(true)
+    try {
+      const [entitiesRes, relationshipsRes] = await Promise.all([
+        api.get(`/api/connections/${connectionId}/entities`),
+        api.get(`/api/connections/${connectionId}/relationships`)
+      ])
+
+      setEntities(entitiesRes.data.entities || [])
+      setRelationships(relationshipsRes.data.relationships || [])
+    } catch (error) {
+      console.error('Failed to fetch entity data:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const drawEntityGraph = () => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const ctx = canvas.getContext('2d')
+    const width = canvas.width = canvas.offsetWidth
+    const height = canvas.height = canvas.offsetHeight
+
+    // Clear canvas
+    ctx.clearRect(0, 0, width, height)
+
+    // Calculate positions for entities (simple circular layout)
+    const centerX = width / 2
+    const centerY = height / 2
+    const radius = Math.min(width, height) * 0.35
+
+    const entityPositions = {}
+    entities.forEach((entity, index) => {
+      const angle = (index / entities.length) * 2 * Math.PI
+      entityPositions[entity.id] = {
+        x: centerX + radius * Math.cos(angle),
+        y: centerY + radius * Math.sin(angle),
+        entity
+      }
+    })
+
+    // Draw relationships (lines)
+    ctx.strokeStyle = '#e5e7eb'
+    ctx.lineWidth = 1
+    relationships.forEach(rel => {
+      const from = entityPositions[rel.fromId]
+      const to = entityPositions[rel.toId]
+      if (from && to) {
+        ctx.beginPath()
+        ctx.moveTo(from.x, from.y)
+        ctx.lineTo(to.x, to.y)
+        ctx.stroke()
+
+        // Draw relationship label
+        const midX = (from.x + to.x) / 2
+        const midY = (from.y + to.y) / 2
+        ctx.fillStyle = '#6b7280'
+        ctx.font = '10px sans-serif'
+        ctx.textAlign = 'center'
+        ctx.fillText(rel.type, midX, midY)
+      }
+    })
+
+    // Draw entities (circles)
+    Object.values(entityPositions).forEach(({ x, y, entity }) => {
+      const isSelected = selectedEntity?.id === entity.id
+      
+      // Draw circle
+      ctx.beginPath()
+      ctx.arc(x, y, 30, 0, 2 * Math.PI)
+      ctx.fillStyle = isSelected ? '#2563eb' : '#ffffff'
+      ctx.fill()
+      ctx.strokeStyle = isSelected ? '#2563eb' : '#d1d5db'
+      ctx.lineWidth = 2
+      ctx.stroke()
+
+      // Draw entity name
+      ctx.fillStyle = isSelected ? '#ffffff' : '#111827'
+      ctx.font = '12px sans-serif'
+      ctx.textAlign = 'center'
+      ctx.textBaseline = 'middle'
+      ctx.fillText(entity.name || entity.type, x, y)
+
+      // Draw entity type
+      ctx.fillStyle = isSelected ? '#dbeafe' : '#6b7280'
+      ctx.font = '10px sans-serif'
+      ctx.fillText(entity.type, x, y + 40)
+    })
+  }
+
+  const handleCanvasClick = (e) => {
+    const canvas = canvasRef.current
+    const rect = canvas.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+
+    // Check if click is on an entity
+    const centerX = canvas.width / 2
+    const centerY = canvas.height / 2
+    const radius = Math.min(canvas.width, canvas.height) * 0.35
+
+    entities.forEach((entity, index) => {
+      const angle = (index / entities.length) * 2 * Math.PI
+      const entityX = centerX + radius * Math.cos(angle)
+      const entityY = centerY + radius * Math.sin(angle)
+
+      const distance = Math.sqrt(Math.pow(x - entityX, 2) + Math.pow(y - entityY, 2))
+      if (distance <= 30) {
+        setSelectedEntity(entity)
+      }
+    })
+  }
+
+  const syncEntities = async () => {
+    setLoading(true)
+    try {
+      await api.post(`/api/connections/${connectionId}/sync`)
+      await fetchEntityData()
+    } catch (error) {
+      console.error('Failed to sync entities:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <LoadingSpinner size="lg" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h3 className="text-lg font-semibold text-gray-900">Entity Relationships</h3>
+        <div className="flex space-x-2">
+          <div className="flex rounded-md shadow-sm">
+            <button
+              onClick={() => setViewMode('graph')}
+              className={`px-3 py-1 text-sm font-medium rounded-l-md ${
+                viewMode === 'graph'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-white text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              Graph
+            </button>
+            <button
+              onClick={() => setViewMode('list')}
+              className={`px-3 py-1 text-sm font-medium rounded-r-md ${
+                viewMode === 'list'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-white text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              List
+            </button>
+          </div>
+          <Button onClick={syncEntities} size="sm" variant="secondary">
+            Sync Entities
+          </Button>
+        </div>
+      </div>
+
+      {entities.length === 0 ? (
+        <div className="text-center py-8">
+          <p className="text-gray-500 mb-4">No entities found for this connection.</p>
+          <Button onClick={syncEntities} variant="primary">
+            Sync Entities Now
+          </Button>
+        </div>
+      ) : (
+        <>
+          {viewMode === 'graph' ? (
+            <div className="relative">
+              <canvas
+                ref={canvasRef}
+                width={600}
+                height={400}
+                className="w-full h-96 border border-gray-200 rounded-lg cursor-pointer"
+                onClick={handleCanvasClick}
+              />
+              
+              {selectedEntity && (
+                <div className="mt-4 p-4 bg-gray-50 rounded-lg">
+                  <h4 className="font-medium text-gray-900 mb-2">
+                    {selectedEntity.name || selectedEntity.id}
+                  </h4>
+                  <dl className="grid grid-cols-2 gap-2 text-sm">
+                    <dt className="text-gray-500">Type:</dt>
+                    <dd className="text-gray-900">{selectedEntity.type}</dd>
+                    <dt className="text-gray-500">External ID:</dt>
+                    <dd className="text-gray-900 font-mono text-xs">
+                      {selectedEntity.externalId}
+                    </dd>
+                    <dt className="text-gray-500">Created:</dt>
+                    <dd className="text-gray-900">
+                      {new Date(selectedEntity.createdAt).toLocaleDateString()}
+                    </dd>
+                  </dl>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {entities.map((entity) => (
+                <div
+                  key={entity.id}
+                  className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer"
+                  onClick={() => setSelectedEntity(entity)}
+                >
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h4 className="font-medium text-gray-900">
+                        {entity.name || entity.id}
+                      </h4>
+                      <p className="text-sm text-gray-500">
+                        Type: {entity.type} | External ID: {entity.externalId}
+                      </p>
+                    </div>
+                    <div className="text-sm text-gray-500">
+                      {relationships.filter(r => 
+                        r.fromId === entity.id || r.toId === entity.id
+                      ).length} relationships
+                    </div>
+                  </div>
+                  
+                  {selectedEntity?.id === entity.id && (
+                    <div className="mt-4 pt-4 border-t border-gray-200">
+                      <h5 className="text-sm font-medium text-gray-900 mb-2">
+                        Relationships:
+                      </h5>
+                      <div className="space-y-1">
+                        {relationships
+                          .filter(r => r.fromId === entity.id || r.toId === entity.id)
+                          .map((rel, index) => (
+                            <p key={index} className="text-sm text-gray-600">
+                              {rel.fromId === entity.id ? 'Has' : 'Is'} {rel.type} 
+                              {' '}
+                              {rel.fromId === entity.id 
+                                ? entities.find(e => e.id === rel.toId)?.name || rel.toId
+                                : entities.find(e => e.id === rel.fromId)?.name || rel.fromId
+                              }
+                            </p>
+                          ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+
+          <div className="mt-6 pt-4 border-t border-gray-200">
+            <p className="text-sm text-gray-500">
+              Total: {entities.length} entities, {relationships.length} relationships
+            </p>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default EntityRelationshipMapper

package/management-ui/src/components/connections/OAuthFlow.jsx

@@ -0,0 +1,204 @@
+import React, { useState, useEffect } from 'react'
+import { Button } from '../Button'
+import LoadingSpinner from '../LoadingSpinner'
+import api from '../../services/api'
+
+const OAuthFlow = ({ integration, onSuccess, onCancel }) => {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [authUrl, setAuthUrl] = useState(null)
+  const [pollingForToken, setPollingForToken] = useState(false)
+
+  // OAuth configuration for different providers
+  const oauthConfigs = {
+    slack: {
+      authEndpoint: 'https://slack.com/oauth/v2/authorize',
+      scopes: ['channels:read', 'chat:write', 'users:read'],
+      responseType: 'code'
+    },
+    google: {
+      authEndpoint: 'https://accounts.google.com/o/oauth2/v2/auth',
+      scopes: ['https://www.googleapis.com/auth/userinfo.email', 'https://www.googleapis.com/auth/drive.readonly'],
+      responseType: 'code'
+    },
+    salesforce: {
+      authEndpoint: 'https://login.salesforce.com/services/oauth2/authorize',
+      scopes: ['api', 'refresh_token'],
+      responseType: 'code'
+    },
+    hubspot: {
+      authEndpoint: 'https://app.hubspot.com/oauth/authorize',
+      scopes: ['contacts', 'oauth'],
+      responseType: 'code'
+    }
+  }
+
+  const startOAuthFlow = async () => {
+    setLoading(true)
+    setError(null)
+
+    try {
+      // Get OAuth initialization data from server
+      const response = await api.post(`/api/connections/oauth/init`, {
+        integration: integration.name,
+        provider: integration.provider || integration.name.toLowerCase()
+      })
+
+      const { authUrl: serverAuthUrl, state, codeVerifier } = response.data
+
+      // Store state and code verifier for later verification
+      sessionStorage.setItem('oauth_state', state)
+      if (codeVerifier) {
+        sessionStorage.setItem('oauth_verifier', codeVerifier)
+      }
+
+      // Open OAuth window
+      const authWindow = window.open(
+        serverAuthUrl,
+        'OAuth Authorization',
+        'width=600,height=700,left=200,top=100'
+      )
+
+      // Start polling for completion
+      setPollingForToken(true)
+      pollForAuthCompletion(state, authWindow)
+
+    } catch (err) {
+      setError(err.response?.data?.error || 'Failed to initialize OAuth flow')
+      setLoading(false)
+    }
+  }
+
+  const pollForAuthCompletion = async (state, authWindow) => {
+    const pollInterval = setInterval(async () => {
+      // Check if window was closed
+      if (authWindow && authWindow.closed) {
+        clearInterval(pollInterval)
+        setPollingForToken(false)
+        setLoading(false)
+        setError('Authorization window was closed')
+        return
+      }
+
+      try {
+        // Check if auth is complete
+        const response = await api.get(`/api/connections/oauth/status/${state}`)
+        
+        if (response.data.status === 'completed') {
+          clearInterval(pollInterval)
+          setPollingForToken(false)
+          setLoading(false)
+          
+          if (authWindow && !authWindow.closed) {
+            authWindow.close()
+          }
+
+          // Clean up session storage
+          sessionStorage.removeItem('oauth_state')
+          sessionStorage.removeItem('oauth_verifier')
+
+          onSuccess(response.data.connection)
+        } else if (response.data.status === 'error') {
+          clearInterval(pollInterval)
+          setPollingForToken(false)
+          setLoading(false)
+          setError(response.data.error || 'OAuth authorization failed')
+          
+          if (authWindow && !authWindow.closed) {
+            authWindow.close()
+          }
+        }
+      } catch (err) {
+        // Continue polling on network errors
+        console.error('Polling error:', err)
+      }
+    }, 1500)
+
+    // Stop polling after 5 minutes
+    setTimeout(() => {
+      clearInterval(pollInterval)
+      setPollingForToken(false)
+      setLoading(false)
+      setError('OAuth authorization timed out')
+      
+      if (authWindow && !authWindow.closed) {
+        authWindow.close()
+      }
+    }, 300000)
+  }
+
+  const handleManualEntry = () => {
+    // TODO: Implement manual credential entry
+    console.log('Manual entry not yet implemented')
+  }
+
+  return (
+    <div className="p-6 bg-white rounded-lg shadow-lg max-w-md mx-auto">
+      <h3 className="text-lg font-semibold mb-4">
+        Connect to {integration.displayName || integration.name}
+      </h3>
+
+      {error && (
+        <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
+          <p className="text-sm text-red-800">{error}</p>
+        </div>
+      )}
+
+      {!loading && !pollingForToken && (
+        <>
+          <p className="text-sm text-gray-600 mb-6">
+            Click the button below to authorize access to your {integration.displayName || integration.name} account.
+            You'll be redirected to {integration.displayName || integration.name} to complete the authorization.
+          </p>
+
+          <div className="space-y-3">
+            <Button
+              onClick={startOAuthFlow}
+              className="w-full"
+              variant="primary"
+            >
+              Authorize with {integration.displayName || integration.name}
+            </Button>
+
+            <Button
+              onClick={onCancel}
+              className="w-full"
+              variant="secondary"
+            >
+              Cancel
+            </Button>
+
+            {integration.supportsApiKey && (
+              <button
+                onClick={handleManualEntry}
+                className="w-full text-sm text-gray-600 hover:text-gray-800 underline"
+              >
+                Enter credentials manually
+              </button>
+            )}
+          </div>
+        </>
+      )}
+
+      {(loading || pollingForToken) && (
+        <div className="text-center py-8">
+          <LoadingSpinner size="lg" />
+          <p className="mt-4 text-sm text-gray-600">
+            {pollingForToken 
+              ? 'Waiting for authorization... Please complete the process in the popup window.'
+              : 'Initializing OAuth flow...'}
+          </p>
+        </div>
+      )}
+
+      <div className="mt-6 pt-4 border-t border-gray-200">
+        <p className="text-xs text-gray-500">
+          By connecting, you agree to share the requested permissions with this application.
+          Your credentials are securely stored and can be revoked at any time.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default OAuthFlow

package/management-ui/src/components/connections/index.js

@@ -0,0 +1,5 @@
+export { default as OAuthFlow } from './OAuthFlow'
+export { default as ConnectionTester } from './ConnectionTester'
+export { default as ConnectionHealthMonitor } from './ConnectionHealthMonitor'
+export { default as EntityRelationshipMapper } from './EntityRelationshipMapper'
+export { default as ConnectionConfigForm } from './ConnectionConfigForm'