@friggframework/devtools 2.0.0--canary.400.bed3308.0 → 2.0.0--canary.400.545e7a8.0

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

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

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