@friggframework/devtools 2.0.0-next.61 → 2.0.0-next.63

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

@@ -1,200 +0,0 @@
-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

@@ -1,292 +0,0 @@
-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

@@ -1,204 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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'