@friggframework/devtools 2.0.0--canary.398.7664c46.0 → 2.0.0--canary.400.bed3308.0

package/management-ui/src/pages/IntegrationTest.jsx

@@ -0,0 +1,494 @@
+import React, { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { ArrowLeft, Play, Send, Copy, Check, AlertCircle, Code, Database, Clock, Activity } from 'lucide-react'
+import { Button } from '../components/Button'
+import { Card, CardContent, CardHeader, CardTitle } from '../components/Card'
+import LoadingSpinner from '../components/LoadingSpinner'
+import api from '../services/api'
+import { cn } from '../lib/utils'
+
+const IntegrationTest = () => {
+  const { integrationName } = useParams()
+  const navigate = useNavigate()
+  
+  const [loading, setLoading] = useState(true)
+  const [integration, setIntegration] = useState(null)
+  const [endpoints, setEndpoints] = useState([])
+  const [selectedEndpoint, setSelectedEndpoint] = useState(null)
+  const [testParams, setTestParams] = useState({})
+  const [testResult, setTestResult] = useState(null)
+  const [testing, setTesting] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [testHistory, setTestHistory] = useState([])
+  const [useMockData, setUseMockData] = useState(false)
+
+  useEffect(() => {
+    fetchIntegrationData()
+  }, [integrationName])
+
+  const fetchIntegrationData = async () => {
+    try {
+      setLoading(true)
+      
+      // Fetch integration details and available endpoints
+      const [detailsRes, endpointsRes, historyRes] = await Promise.all([
+        api.get(`/api/discovery/integrations/${integrationName}`),
+        api.get(`/api/integrations/${integrationName}/endpoints`),
+        api.get(`/api/integrations/${integrationName}/test-history`)
+      ])
+      
+      setIntegration(detailsRes.data.data)
+      setEndpoints(endpointsRes.data.endpoints || [])
+      setTestHistory(historyRes.data.history || [])
+      
+      // Select first endpoint by default
+      if (endpointsRes.data.endpoints?.length > 0) {
+        setSelectedEndpoint(endpointsRes.data.endpoints[0])
+        initializeParams(endpointsRes.data.endpoints[0])
+      }
+      
+    } catch (err) {
+      console.error('Failed to fetch integration data:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const initializeParams = (endpoint) => {
+    const params = {}
+    
+    // Initialize required parameters
+    endpoint.parameters?.forEach(param => {
+      if (param.required) {
+        params[param.name] = param.default || ''
+      }
+    })
+    
+    setTestParams(params)
+  }
+
+  const handleEndpointChange = (endpointId) => {
+    const endpoint = endpoints.find(e => e.id === endpointId)
+    if (endpoint) {
+      setSelectedEndpoint(endpoint)
+      initializeParams(endpoint)
+      setTestResult(null)
+    }
+  }
+
+  const handleParamChange = (paramName, value) => {
+    setTestParams(prev => ({ ...prev, [paramName]: value }))
+  }
+
+  const handleTest = async () => {
+    if (!selectedEndpoint) return
+
+    try {
+      setTesting(true)
+      setTestResult(null)
+      
+      const response = await api.post(`/api/integrations/${integrationName}/test-endpoint`, {
+        endpoint: selectedEndpoint.id,
+        parameters: testParams,
+        useMockData
+      })
+      
+      setTestResult({
+        success: true,
+        data: response.data.result,
+        timing: response.data.timing,
+        timestamp: new Date().toISOString()
+      })
+      
+      // Add to history
+      setTestHistory(prev => [{
+        endpoint: selectedEndpoint.name,
+        timestamp: new Date().toISOString(),
+        success: true,
+        timing: response.data.timing
+      }, ...prev.slice(0, 9)])
+      
+    } catch (err) {
+      console.error('Test failed:', err)
+      setTestResult({
+        success: false,
+        error: err.response?.data?.message || 'Test failed',
+        details: err.response?.data?.details,
+        timestamp: new Date().toISOString()
+      })
+      
+      // Add failure to history
+      setTestHistory(prev => [{
+        endpoint: selectedEndpoint.name,
+        timestamp: new Date().toISOString(),
+        success: false,
+        error: err.response?.data?.message
+      }, ...prev.slice(0, 9)])
+    } finally {
+      setTesting(false)
+    }
+  }
+
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const generateCodeSnippet = () => {
+    if (!selectedEndpoint) return ''
+    
+    const params = Object.entries(testParams)
+      .map(([key, value]) => `  ${key}: '${value}'`)
+      .join(',\n')
+    
+    return `// ${selectedEndpoint.name}
+const result = await frigg.integration('${integrationName}')
+  .${selectedEndpoint.method}('${selectedEndpoint.path}', {
+${params}
+  });
+
+console.log(result);`
+  }
+
+  const renderParameterInput = (param) => {
+    const value = testParams[param.name] || ''
+    
+    switch (param.type) {
+      case 'boolean':
+        return (
+          <select
+            value={value}
+            onChange={(e) => handleParamChange(param.name, e.target.value === 'true')}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="false">false</option>
+            <option value="true">true</option>
+          </select>
+        )
+      
+      case 'number':
+        return (
+          <input
+            type="number"
+            value={value}
+            onChange={(e) => handleParamChange(param.name, parseInt(e.target.value, 10))}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            placeholder={param.placeholder || `Enter ${param.name}`}
+          />
+        )
+      
+      case 'select':
+        return (
+          <select
+            value={value}
+            onChange={(e) => handleParamChange(param.name, e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">Select {param.name}</option>
+            {param.options?.map(option => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        )
+      
+      default:
+        return (
+          <input
+            type="text"
+            value={value}
+            onChange={(e) => handleParamChange(param.name, e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            placeholder={param.placeholder || `Enter ${param.name}`}
+          />
+        )
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <LoadingSpinner size="lg" />
+          <p className="mt-4 text-gray-600">Loading test interface...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <Button
+            variant="ghost"
+            onClick={() => navigate('/integrations')}
+            className="mr-4"
+          >
+            <ArrowLeft size={20} className="mr-2" />
+            Back
+          </Button>
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900">
+              Test {integration?.displayName}
+            </h2>
+            <p className="text-gray-600 mt-1">
+              Test API endpoints and validate responses
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <label className="flex items-center">
+            <input
+              type="checkbox"
+              checked={useMockData}
+              onChange={(e) => setUseMockData(e.target.checked)}
+              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+            />
+            <span className="ml-2 text-sm text-gray-700">Use Mock Data</span>
+          </label>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Left Column - Test Configuration */}
+        <div className="space-y-6">
+          {/* Endpoint Selection */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <Database size={20} className="mr-2" />
+                Select Endpoint
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <select
+                value={selectedEndpoint?.id || ''}
+                onChange={(e) => handleEndpointChange(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              >
+                <option value="">Select an endpoint to test</option>
+                {endpoints.map(endpoint => (
+                  <option key={endpoint.id} value={endpoint.id}>
+                    {endpoint.method.toUpperCase()} {endpoint.path} - {endpoint.name}
+                  </option>
+                ))}
+              </select>
+              
+              {selectedEndpoint && (
+                <div className="mt-4 p-3 bg-gray-50 rounded-lg">
+                  <p className="text-sm text-gray-600">{selectedEndpoint.description}</p>
+                  <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
+                    <span className={cn(
+                      "px-2 py-1 rounded font-medium",
+                      selectedEndpoint.method === 'get' && "bg-blue-100 text-blue-700",
+                      selectedEndpoint.method === 'post' && "bg-green-100 text-green-700",
+                      selectedEndpoint.method === 'put' && "bg-yellow-100 text-yellow-700",
+                      selectedEndpoint.method === 'delete' && "bg-red-100 text-red-700"
+                    )}>
+                      {selectedEndpoint.method.toUpperCase()}
+                    </span>
+                    <span className="font-mono">{selectedEndpoint.path}</span>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Parameters */}
+          {selectedEndpoint && selectedEndpoint.parameters?.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center">
+                  <Settings size={20} className="mr-2" />
+                  Parameters
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {selectedEndpoint.parameters.map(param => (
+                  <div key={param.name}>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      {param.label || param.name}
+                      {param.required && <span className="text-red-500 ml-1">*</span>}
+                    </label>
+                    {renderParameterInput(param)}
+                    {param.description && (
+                      <p className="mt-1 text-xs text-gray-500">{param.description}</p>
+                    )}
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Code Snippet */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center justify-between">
+                <span className="flex items-center">
+                  <Code size={20} className="mr-2" />
+                  Code Example
+                </span>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => copyToClipboard(generateCodeSnippet())}
+                  className="text-xs"
+                >
+                  {copied ? (
+                    <>
+                      <Check size={14} className="mr-1" />
+                      Copied
+                    </>
+                  ) : (
+                    <>
+                      <Copy size={14} className="mr-1" />
+                      Copy
+                    </>
+                  )}
+                </Button>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <pre className="text-xs bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
+                <code>{generateCodeSnippet()}</code>
+              </pre>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Right Column - Test Results */}
+        <div className="space-y-6">
+          {/* Run Test Button */}
+          <Card>
+            <CardContent className="p-4">
+              <Button
+                onClick={handleTest}
+                disabled={!selectedEndpoint || testing}
+                className="w-full inline-flex items-center justify-center"
+              >
+                {testing ? (
+                  <>
+                    <LoadingSpinner size="sm" className="mr-2" />
+                    Running Test...
+                  </>
+                ) : (
+                  <>
+                    <Play size={16} className="mr-2" />
+                    Run Test
+                  </>
+                )}
+              </Button>
+            </CardContent>
+          </Card>
+
+          {/* Test Result */}
+          {testResult && (
+            <Card className={testResult.success ? 'border-green-300' : 'border-red-300'}>
+              <CardHeader>
+                <CardTitle className="flex items-center justify-between">
+                  <span className="flex items-center">
+                    {testResult.success ? (
+                      <>
+                        <CheckCircle size={20} className="text-green-500 mr-2" />
+                        Test Passed
+                      </>
+                    ) : (
+                      <>
+                        <AlertCircle size={20} className="text-red-500 mr-2" />
+                        Test Failed
+                      </>
+                    )}
+                  </span>
+                  {testResult.timing && (
+                    <span className="text-sm text-gray-500">
+                      {testResult.timing}ms
+                    </span>
+                  )}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                {testResult.error && (
+                  <div className="mb-4 p-3 bg-red-50 rounded-lg">
+                    <p className="text-sm text-red-700">{testResult.error}</p>
+                    {testResult.details && (
+                      <pre className="mt-2 text-xs text-red-600 overflow-x-auto">
+                        {JSON.stringify(testResult.details, null, 2)}
+                      </pre>
+                    )}
+                  </div>
+                )}
+                
+                {testResult.data && (
+                  <div>
+                    <div className="flex items-center justify-between mb-2">
+                      <h4 className="text-sm font-medium text-gray-700">Response Data</h4>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => copyToClipboard(JSON.stringify(testResult.data, null, 2))}
+                        className="text-xs"
+                      >
+                        <Copy size={12} className="mr-1" />
+                        Copy
+                      </Button>
+                    </div>
+                    <pre className="text-xs bg-gray-100 p-3 rounded-lg overflow-x-auto max-h-96">
+                      {JSON.stringify(testResult.data, null, 2)}
+                    </pre>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Test History */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <Clock size={20} className="mr-2" />
+                Recent Tests
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {testHistory.length === 0 ? (
+                <p className="text-sm text-gray-500">No test history yet</p>
+              ) : (
+                <div className="space-y-2">
+                  {testHistory.map((test, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-between p-2 bg-gray-50 rounded"
+                    >
+                      <div className="flex items-center">
+                        {test.success ? (
+                          <CheckCircle size={16} className="text-green-500 mr-2" />
+                        ) : (
+                          <AlertCircle size={16} className="text-red-500 mr-2" />
+                        )}
+                        <div>
+                          <p className="text-sm font-medium">{test.endpoint}</p>
+                          <p className="text-xs text-gray-500">
+                            {new Date(test.timestamp).toLocaleTimeString()}
+                          </p>
+                        </div>
+                      </div>
+                      {test.timing && (
+                        <span className="text-xs text-gray-500">{test.timing}ms</span>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default IntegrationTest