@friggframework/devtools 2.0.0-next.4 → 2.0.0-next.41

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

@@ -0,0 +1,633 @@
+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()
+<<<<<<< HEAD
+<<<<<<< HEAD
+  const { socket, emit, on } = useSocket()
+=======
+<<<<<<< HEAD
+<<<<<<< HEAD
+  const { socket, emit, on } = useSocket()
+=======
+  const socket = useSocket()
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+=======
+  const { socket, emit, on } = useSocket()
+>>>>>>> f153939e (refactor: clean up CLI help display and remove unused dependencies)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+  const { socket, emit, on } = useSocket()
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+  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()
+<<<<<<< HEAD
+<<<<<<< HEAD
+    
+=======
+<<<<<<< HEAD
+
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+    // 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'] })
+<<<<<<< HEAD
+=======
+=======
+=======
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+    
+    // 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'] })
+<<<<<<< HEAD
+>>>>>>> f153939e (refactor: clean up CLI help display and remove unused dependencies)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+    }
+  }, [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')
+                      }}
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+                      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'
+                        }`}
+=======
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+                      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'
+                      }`}
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+                    >
+                      <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>
+<<<<<<< HEAD
+<<<<<<< HEAD
+                        <ConnectionHealthMonitor 
+                          connectionId={connection.id} 
+=======
+<<<<<<< HEAD
+                        <ConnectionHealthMonitor
+                          connectionId={connection.id}
+=======
+                        <ConnectionHealthMonitor 
+                          connectionId={connection.id} 
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+                        <ConnectionHealthMonitor 
+                          connectionId={connection.id} 
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+                          compact={true}
+                        />
+                      </div>
+                    </button>
+                  )
+                })}
+              </div>
+<<<<<<< HEAD
+<<<<<<< HEAD
+              
+=======
+<<<<<<< HEAD
+
+=======
+              
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+              
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+              {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">
+<<<<<<< HEAD
+<<<<<<< HEAD
+                        {selectedConnection.name || 
+                         getIntegrationDetails(selectedConnection.integration).displayName}
+=======
+<<<<<<< HEAD
+                        {selectedConnection.name ||
+                          getIntegrationDetails(selectedConnection.integration).displayName}
+=======
+                        {selectedConnection.name || 
+                         getIntegrationDetails(selectedConnection.integration).displayName}
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+                        {selectedConnection.name || 
+                         getIntegrationDetails(selectedConnection.integration).displayName}
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+                      </h3>
+                      <p className="text-sm text-gray-500">
+                        Connected by {getUserDetails(selectedConnection.userId)}
+                      </p>
+                    </div>
+                    <div className="flex items-center space-x-2">
+<<<<<<< HEAD
+<<<<<<< HEAD
+                      <StatusBadge 
+=======
+<<<<<<< HEAD
+                      <StatusBadge
+=======
+                      <StatusBadge 
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+                      <StatusBadge 
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+                        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)}
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+                        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'
+                          }`}
+=======
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+                        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'
+                        }`}
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+                      >
+                        {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">
+<<<<<<< HEAD
+<<<<<<< HEAD
+                          {selectedConnection.lastUsed 
+=======
+<<<<<<< HEAD
+                          {selectedConnection.lastUsed
+=======
+                          {selectedConnection.lastUsed 
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+                          {selectedConnection.lastUsed 
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+                            ? new Date(selectedConnection.lastUsed).toLocaleString()
+                            : 'Never'}
+                        </dd>
+                      </div>
+                    </dl>
+<<<<<<< HEAD
+<<<<<<< HEAD
+                    
+=======
+<<<<<<< HEAD
+
+=======
+                    
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+                    
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+                    {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' && (
+<<<<<<< HEAD
+<<<<<<< HEAD
+                <ConnectionTester 
+=======
+<<<<<<< HEAD
+                <ConnectionTester
+=======
+                <ConnectionTester 
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+                <ConnectionTester 
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+                  connection={selectedConnection}
+                  onTestComplete={(result) => {
+                    // Handle test completion
+                    console.log('Test completed:', result)
+                  }}
+                />
+              )}
+
+              {activeView === 'health' && (
+<<<<<<< HEAD
+<<<<<<< HEAD
+                <ConnectionHealthMonitor 
+=======
+<<<<<<< HEAD
+                <ConnectionHealthMonitor
+=======
+                <ConnectionHealthMonitor 
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+                <ConnectionHealthMonitor 
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+                  connectionId={selectedConnection.id}
+                  compact={false}
+                />
+              )}
+
+              {activeView === 'entities' && (
+<<<<<<< HEAD
+<<<<<<< HEAD
+                <EntityRelationshipMapper 
+=======
+<<<<<<< HEAD
+                <EntityRelationshipMapper
+=======
+                <EntityRelationshipMapper 
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+                <EntityRelationshipMapper 
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+                  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>
+<<<<<<< HEAD
+<<<<<<< HEAD
+                        <Button 
+=======
+<<<<<<< HEAD
+                        <Button
+=======
+                        <Button 
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+                        <Button 
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+                          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