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

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

@@ -0,0 +1,252 @@
+import React, { useState } from 'react'
+import { useFrigg } from '../hooks/useFrigg'
+
+const Connections = () => {
+  const { connections, users, integrations } = useFrigg()
+  const [selectedConnection, setSelectedConnection] = useState(null)
+  const [viewMode, setViewMode] = useState('list') // list or details
+
+  const getIntegrationName = (integrationId) => {
+    const integration = integrations.find(i => i.id === integrationId)
+    return integration?.displayName || integration?.name || integrationId
+  }
+
+  const getUserName = (userId) => {
+    const user = users.find(u => u.id === userId)
+    return user ? `${user.firstName} ${user.lastName}` : userId
+  }
+
+  return (
+    <div>
+      <div className="mb-8">
+        <h2 className="text-3xl font-bold text-gray-900">Connection Management</h2>
+        <p className="mt-2 text-gray-600">View and manage integration connections and entities</p>
+      </div>
+
+      {/* View Toggle */}
+      <div className="mb-6 flex justify-between items-center">
+        <div className="flex space-x-2">
+          <button
+            onClick={() => setViewMode('list')}
+            className={`px-4 py-2 rounded-md transition-colors ${
+              viewMode === 'list'
+                ? 'bg-frigg-blue text-white'
+                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            }`}
+          >
+            List View
+          </button>
+          <button
+            onClick={() => setViewMode('details')}
+            className={`px-4 py-2 rounded-md transition-colors ${
+              viewMode === 'details'
+                ? 'bg-frigg-blue text-white'
+                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            }`}
+          >
+            Details View
+          </button>
+        </div>
+        <div className="text-sm text-gray-600">
+          Total Connections: <span className="font-medium">{connections.length}</span>
+        </div>
+      </div>
+
+      {viewMode === 'list' ? (
+        /* List View */
+        <div className="bg-white shadow rounded-lg overflow-hidden">
+          <table className="min-w-full divide-y divide-gray-200">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Connection
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  User
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Entities
+                </th>
+                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {connections.map((connection) => (
+                <tr key={connection.id}>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div className="text-sm font-medium text-gray-900">
+                      {getIntegrationName(connection.integrationId)}
+                    </div>
+                    <div className="text-sm text-gray-500">
+                      ID: {connection.id}
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div className="text-sm text-gray-900">
+                      {getUserName(connection.userId)}
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                      connection.active
+                        ? 'bg-green-100 text-green-800'
+                        : 'bg-red-100 text-red-800'
+                    }`}>
+                      {connection.active ? 'Active' : 'Inactive'}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {connection.entities?.length || 0} entities
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <button
+                      onClick={() => {
+                        setSelectedConnection(connection)
+                        setViewMode('details')
+                      }}
+                      className="text-frigg-blue hover:text-blue-700 mr-3"
+                    >
+                      View Details
+                    </button>
+                    <button className="text-red-600 hover:text-red-900">
+                      Disconnect
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        /* Details View */
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Connection List */}
+          <div className="lg:col-span-1">
+            <div className="bg-white shadow rounded-lg p-4">
+              <h3 className="text-lg font-medium text-gray-900 mb-4">Connections</h3>
+              <div className="space-y-2">
+                {connections.map((connection) => (
+                  <button
+                    key={connection.id}
+                    onClick={() => setSelectedConnection(connection)}
+                    className={`w-full text-left px-3 py-2 rounded-md transition-colors ${
+                      selectedConnection?.id === connection.id
+                        ? 'bg-frigg-blue text-white'
+                        : 'hover:bg-gray-100'
+                    }`}
+                  >
+                    <div className="font-medium">
+                      {getIntegrationName(connection.integrationId)}
+                    </div>
+                    <div className={`text-sm ${
+                      selectedConnection?.id === connection.id ? 'text-blue-100' : 'text-gray-500'
+                    }`}>
+                      {getUserName(connection.userId)}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Connection Details */}
+          <div className="lg:col-span-2">
+            {selectedConnection ? (
+              <div className="bg-white shadow rounded-lg p-6">
+                <h3 className="text-lg font-medium text-gray-900 mb-4">Connection Details</h3>
+                
+                {/* Basic Info */}
+                <div className="mb-6">
+                  <dl className="grid grid-cols-2 gap-4">
+                    <div>
+                      <dt className="text-sm font-medium text-gray-500">Integration</dt>
+                      <dd className="mt-1 text-sm text-gray-900">
+                        {getIntegrationName(selectedConnection.integrationId)}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-sm font-medium text-gray-500">User</dt>
+                      <dd className="mt-1 text-sm text-gray-900">
+                        {getUserName(selectedConnection.userId)}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-sm font-medium text-gray-500">Status</dt>
+                      <dd className="mt-1">
+                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                          selectedConnection.active
+                            ? 'bg-green-100 text-green-800'
+                            : 'bg-red-100 text-red-800'
+                        }`}>
+                          {selectedConnection.active ? 'Active' : 'Inactive'}
+                        </span>
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-sm font-medium text-gray-500">Created</dt>
+                      <dd className="mt-1 text-sm text-gray-900">
+                        {new Date(selectedConnection.createdAt).toLocaleDateString()}
+                      </dd>
+                    </div>
+                  </dl>
+                </div>
+
+                {/* Entities */}
+                <div>
+                  <h4 className="text-md font-medium text-gray-900 mb-3">Entities</h4>
+                  {selectedConnection.entities?.length > 0 ? (
+                    <div className="border border-gray-200 rounded-lg overflow-hidden">
+                      <table className="min-w-full divide-y divide-gray-200">
+                        <thead className="bg-gray-50">
+                          <tr>
+                            <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                              Type
+                            </th>
+                            <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                              ID
+                            </th>
+                            <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                              Name
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody className="bg-white divide-y divide-gray-200">
+                          {selectedConnection.entities.map((entity, index) => (
+                            <tr key={index}>
+                              <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
+                                {entity.type}
+                              </td>
+                              <td className="px-4 py-2 whitespace-nowrap text-sm font-mono text-gray-600">
+                                {entity.id}
+                              </td>
+                              <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
+                                {entity.name}
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  ) : (
+                    <p className="text-sm text-gray-500">No entities found for this connection.</p>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <div className="bg-white shadow rounded-lg p-6">
+                <p className="text-gray-500 text-center">Select a connection to view details</p>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Connections

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

@@ -0,0 +1,427 @@
+import React, { useState, useEffect } from 'react'
+import { useFrigg } from '../hooks/useFrigg'
+import { useSocket } from '../hooks/useSocket'
+import { Button } from '../components/Button'
+import { Card } from '../components/Card'
+import StatusBadge from '../components/StatusBadge'
+import OAuthFlow from '../components/connections/OAuthFlow'
+import ConnectionTester from '../components/connections/ConnectionTester'
+import ConnectionHealthMonitor from '../components/connections/ConnectionHealthMonitor'
+import EntityRelationshipMapper from '../components/connections/EntityRelationshipMapper'
+import ConnectionConfigForm from '../components/connections/ConnectionConfigForm'
+import api from '../services/api'
+
+const ConnectionsEnhanced = () => {
+  const { connections, users, integrations, refreshConnections } = useFrigg()
+  const { socket, emit, on } = useSocket()
+  const [selectedConnection, setSelectedConnection] = useState(null)
+  const [activeView, setActiveView] = useState('overview') // overview, test, health, entities, config
+  const [showOAuthFlow, setShowOAuthFlow] = useState(false)
+  const [showConfigForm, setShowConfigForm] = useState(false)
+  const [selectedIntegration, setSelectedIntegration] = useState(null)
+  const [connectionStats, setConnectionStats] = useState(null)
+
+  useEffect(() => {
+    fetchConnectionStats()
+    
+    // Subscribe to real-time updates
+    const unsubscribeUpdate = on('connection-update', handleConnectionUpdate)
+    const unsubscribeTest = on('connection-test', handleTestUpdate)
+    emit('subscribe', { topics: ['connections'] })
+
+    return () => {
+      if (unsubscribeUpdate) unsubscribeUpdate()
+      if (unsubscribeTest) unsubscribeTest()
+      emit('unsubscribe', { topics: ['connections'] })
+    }
+  }, [socket])
+
+  const fetchConnectionStats = async () => {
+    try {
+      const response = await api.get('/api/connections/stats/summary')
+      setConnectionStats(response.data)
+    } catch (error) {
+      console.error('Failed to fetch connection stats:', error)
+    }
+  }
+
+  const handleConnectionUpdate = (data) => {
+    refreshConnections()
+    fetchConnectionStats()
+  }
+
+  const handleTestUpdate = (data) => {
+    if (selectedConnection?.id === data.connectionId) {
+      // Update selected connection with test results
+      setSelectedConnection(prev => ({
+        ...prev,
+        lastTestResult: data.summary
+      }))
+    }
+  }
+
+  const handleCreateConnection = (integration) => {
+    setSelectedIntegration(integration)
+    setShowOAuthFlow(true)
+  }
+
+  const handleOAuthSuccess = async (connection) => {
+    setShowOAuthFlow(false)
+    setSelectedIntegration(null)
+    await refreshConnections()
+    setSelectedConnection(connection)
+    setActiveView('config')
+    setShowConfigForm(true)
+  }
+
+  const handleConfigSave = async (config) => {
+    setShowConfigForm(false)
+    await refreshConnections()
+  }
+
+  const handleDeleteConnection = async (connectionId) => {
+    if (confirm('Are you sure you want to delete this connection?')) {
+      try {
+        await api.delete(`/api/connections/${connectionId}`)
+        await refreshConnections()
+        if (selectedConnection?.id === connectionId) {
+          setSelectedConnection(null)
+        }
+      } catch (error) {
+        console.error('Failed to delete connection:', error)
+        alert('Failed to delete connection')
+      }
+    }
+  }
+
+  const getIntegrationDetails = (integrationId) => {
+    return integrations.find(i => i.id === integrationId) || { name: integrationId }
+  }
+
+  const getUserDetails = (userId) => {
+    const user = users.find(u => u.id === userId)
+    return user ? `${user.firstName} ${user.lastName}` : userId
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-3xl font-bold text-gray-900">Connection Management</h2>
+          <p className="mt-2 text-gray-600">
+            Manage integration connections, test connectivity, and monitor health
+          </p>
+        </div>
+        <Button onClick={() => setShowOAuthFlow(true)} variant="primary">
+          New Connection
+        </Button>
+      </div>
+
+      {/* Stats Overview */}
+      {connectionStats && (
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <Card>
+            <div className="p-4">
+              <p className="text-sm text-gray-500">Total Connections</p>
+              <p className="text-2xl font-bold text-gray-900">
+                {connectionStats.totalConnections}
+              </p>
+            </div>
+          </Card>
+          <Card>
+            <div className="p-4">
+              <p className="text-sm text-gray-500">Active</p>
+              <p className="text-2xl font-bold text-green-600">
+                {connectionStats.activeConnections}
+              </p>
+            </div>
+          </Card>
+          <Card>
+            <div className="p-4">
+              <p className="text-sm text-gray-500">Total Entities</p>
+              <p className="text-2xl font-bold text-gray-900">
+                {connectionStats.totalEntities}
+              </p>
+            </div>
+          </Card>
+          <Card>
+            <div className="p-4">
+              <p className="text-sm text-gray-500">Recently Used</p>
+              <p className="text-2xl font-bold text-blue-600">
+                {connectionStats.recentlyUsed}
+              </p>
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {/* Main Content */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Connections List */}
+        <div className="lg:col-span-1">
+          <Card>
+            <div className="p-4">
+              <h3 className="text-lg font-semibold text-gray-900 mb-4">Connections</h3>
+              <div className="space-y-2">
+                {connections.map((connection) => {
+                  const integration = getIntegrationDetails(connection.integration)
+                  return (
+                    <button
+                      key={connection.id}
+                      onClick={() => {
+                        setSelectedConnection(connection)
+                        setActiveView('overview')
+                      }}
+                      className={`w-full text-left p-3 rounded-lg transition-colors ${
+                        selectedConnection?.id === connection.id
+                          ? 'bg-blue-50 border-blue-500 border'
+                          : 'hover:bg-gray-50 border border-gray-200'
+                      }`}
+                    >
+                      <div className="flex items-center justify-between">
+                        <div className="flex-1">
+                          <p className="font-medium text-gray-900">
+                            {connection.name || integration.displayName || integration.name}
+                          </p>
+                          <p className="text-sm text-gray-500">
+                            {getUserDetails(connection.userId)}
+                          </p>
+                        </div>
+                        <ConnectionHealthMonitor 
+                          connectionId={connection.id} 
+                          compact={true}
+                        />
+                      </div>
+                    </button>
+                  )
+                })}
+              </div>
+              
+              {connections.length === 0 && (
+                <p className="text-center text-gray-500 py-8">
+                  No connections yet. Create your first connection above.
+                </p>
+              )}
+            </div>
+          </Card>
+        </div>
+
+        {/* Detail View */}
+        <div className="lg:col-span-2">
+          {selectedConnection ? (
+            <div className="space-y-6">
+              {/* Connection Header */}
+              <Card>
+                <div className="p-6">
+                  <div className="flex items-center justify-between mb-4">
+                    <div>
+                      <h3 className="text-xl font-semibold text-gray-900">
+                        {selectedConnection.name || 
+                         getIntegrationDetails(selectedConnection.integration).displayName}
+                      </h3>
+                      <p className="text-sm text-gray-500">
+                        Connected by {getUserDetails(selectedConnection.userId)}
+                      </p>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <StatusBadge 
+                        status={selectedConnection.status === 'active' ? 'success' : 'error'}
+                        text={selectedConnection.status}
+                      />
+                      <Button
+                        onClick={() => handleDeleteConnection(selectedConnection.id)}
+                        variant="secondary"
+                        size="sm"
+                      >
+                        Delete
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* View Tabs */}
+                  <div className="flex space-x-1 border-b border-gray-200">
+                    {[
+                      { id: 'overview', label: 'Overview' },
+                      { id: 'test', label: 'Test' },
+                      { id: 'health', label: 'Health' },
+                      { id: 'entities', label: 'Entities' },
+                      { id: 'config', label: 'Configuration' }
+                    ].map(tab => (
+                      <button
+                        key={tab.id}
+                        onClick={() => setActiveView(tab.id)}
+                        className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                          activeView === tab.id
+                            ? 'text-blue-600 border-blue-600'
+                            : 'text-gray-500 border-transparent hover:text-gray-700'
+                        }`}
+                      >
+                        {tab.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </Card>
+
+              {/* Active View Content */}
+              {activeView === 'overview' && (
+                <Card>
+                  <div className="p-6">
+                    <h4 className="text-lg font-semibold text-gray-900 mb-4">
+                      Connection Details
+                    </h4>
+                    <dl className="grid grid-cols-2 gap-4">
+                      <div>
+                        <dt className="text-sm font-medium text-gray-500">Connection ID</dt>
+                        <dd className="mt-1 text-sm text-gray-900 font-mono">
+                          {selectedConnection.id}
+                        </dd>
+                      </div>
+                      <div>
+                        <dt className="text-sm font-medium text-gray-500">Created</dt>
+                        <dd className="mt-1 text-sm text-gray-900">
+                          {new Date(selectedConnection.createdAt).toLocaleString()}
+                        </dd>
+                      </div>
+                      <div>
+                        <dt className="text-sm font-medium text-gray-500">Last Updated</dt>
+                        <dd className="mt-1 text-sm text-gray-900">
+                          {new Date(selectedConnection.updatedAt).toLocaleString()}
+                        </dd>
+                      </div>
+                      <div>
+                        <dt className="text-sm font-medium text-gray-500">Last Used</dt>
+                        <dd className="mt-1 text-sm text-gray-900">
+                          {selectedConnection.lastUsed 
+                            ? new Date(selectedConnection.lastUsed).toLocaleString()
+                            : 'Never'}
+                        </dd>
+                      </div>
+                    </dl>
+                    
+                    {selectedConnection.description && (
+                      <div className="mt-4">
+                        <h5 className="text-sm font-medium text-gray-500">Description</h5>
+                        <p className="mt-1 text-sm text-gray-900">
+                          {selectedConnection.description}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </Card>
+              )}
+
+              {activeView === 'test' && (
+                <ConnectionTester 
+                  connection={selectedConnection}
+                  onTestComplete={(result) => {
+                    // Handle test completion
+                    console.log('Test completed:', result)
+                  }}
+                />
+              )}
+
+              {activeView === 'health' && (
+                <ConnectionHealthMonitor 
+                  connectionId={selectedConnection.id}
+                  compact={false}
+                />
+              )}
+
+              {activeView === 'entities' && (
+                <EntityRelationshipMapper 
+                  connectionId={selectedConnection.id}
+                />
+              )}
+
+              {activeView === 'config' && (
+                <Card>
+                  <div className="p-6">
+                    {showConfigForm ? (
+                      <ConnectionConfigForm
+                        connection={selectedConnection}
+                        integration={getIntegrationDetails(selectedConnection.integration)}
+                        onSave={handleConfigSave}
+                        onCancel={() => setShowConfigForm(false)}
+                      />
+                    ) : (
+                      <div>
+                        <h4 className="text-lg font-semibold text-gray-900 mb-4">
+                          Configuration
+                        </h4>
+                        <Button 
+                          onClick={() => setShowConfigForm(true)}
+                          variant="primary"
+                        >
+                          Edit Configuration
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                </Card>
+              )}
+            </div>
+          ) : (
+            <Card>
+              <div className="p-8 text-center">
+                <p className="text-gray-500">
+                  Select a connection to view details and manage settings
+                </p>
+              </div>
+            </Card>
+          )}
+        </div>
+      </div>
+
+      {/* OAuth Flow Modal */}
+      {showOAuthFlow && (
+        <div className="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-lg w-full">
+            {selectedIntegration ? (
+              <OAuthFlow
+                integration={selectedIntegration}
+                onSuccess={handleOAuthSuccess}
+                onCancel={() => {
+                  setShowOAuthFlow(false)
+                  setSelectedIntegration(null)
+                }}
+              />
+            ) : (
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 mb-4">
+                  Select Integration
+                </h3>
+                <div className="space-y-2">
+                  {integrations.map((integration) => (
+                    <button
+                      key={integration.id}
+                      onClick={() => setSelectedIntegration(integration)}
+                      className="w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50"
+                    >
+                      <p className="font-medium text-gray-900">
+                        {integration.displayName || integration.name}
+                      </p>
+                      <p className="text-sm text-gray-500">
+                        {integration.description}
+                      </p>
+                    </button>
+                  ))}
+                </div>
+                <Button
+                  onClick={() => setShowOAuthFlow(false)}
+                  variant="secondary"
+                  className="mt-4 w-full"
+                >
+                  Cancel
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ConnectionsEnhanced