@friggframework/devtools 2.0.0-next.5 → 2.0.0-next.50

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

@@ -0,0 +1,253 @@
+import React, { useState, useMemo } from 'react'
+import { Search, Filter, Grid3X3, List, Package } from 'lucide-react'
+import { useFrigg } from '../hooks/useFrigg'
+import IntegrationCard from '../components/IntegrationCard'
+import { Button } from '../components/Button'
+import { cn } from '../lib/utils'
+
+const Integrations = () => {
+  const { integrations, installIntegration, uninstallIntegration } = useFrigg()
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState('all')
+  const [viewMode, setViewMode] = useState('grid') // 'grid' or 'list'
+  const [installing, setInstalling] = useState(false)
+  const [selectedIntegration, setSelectedIntegration] = useState(null)
+
+  // Mock available integrations - in real app, this would come from API
+  const availableIntegrations = [
+    {
+      name: 'slack',
+      displayName: 'Slack',
+      description: 'Team communication and collaboration platform',
+      category: 'communication',
+      tags: ['messaging', 'team', 'notifications'],
+      version: '2.1.0',
+      docsUrl: 'https://docs.frigg.dev/integrations/slack'
+    },
+    {
+      name: 'salesforce',
+      displayName: 'Salesforce',
+      description: 'Customer relationship management and sales platform',
+      category: 'crm',
+      tags: ['sales', 'crm', 'leads'],
+      version: '1.8.2',
+      docsUrl: 'https://docs.frigg.dev/integrations/salesforce'
+    },
+    {
+      name: 'hubspot',
+      displayName: 'HubSpot',
+      description: 'Inbound marketing, sales, and service software',
+      category: 'marketing',
+      tags: ['marketing', 'automation', 'analytics'],
+      version: '3.0.1',
+      docsUrl: 'https://docs.frigg.dev/integrations/hubspot'
+    },
+    {
+      name: 'google-sheets',
+      displayName: 'Google Sheets',
+      description: 'Online spreadsheet collaboration and data management',
+      category: 'productivity',
+      tags: ['spreadsheet', 'data', 'collaboration'],
+      version: '1.5.0',
+      docsUrl: 'https://docs.frigg.dev/integrations/google-sheets'
+    },
+    {
+      name: 'stripe',
+      displayName: 'Stripe',
+      description: 'Online payment processing and financial services',
+      category: 'payments',
+      tags: ['payments', 'ecommerce', 'billing'],
+      version: '2.3.1',
+      docsUrl: 'https://docs.frigg.dev/integrations/stripe'
+    },
+    {
+      name: 'mailchimp',
+      displayName: 'Mailchimp',
+      description: 'Email marketing and automation platform',
+      category: 'marketing',
+      tags: ['email', 'marketing', 'campaigns'],
+      version: '1.9.0',
+      docsUrl: 'https://docs.frigg.dev/integrations/mailchimp'
+    },
+  ].map(integration => ({
+    ...integration,
+    installed: integrations.some(i => i.name === integration.name),
+    connections: Math.floor(Math.random() * 10), // Mock data
+    lastUpdated: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString()
+  }))
+
+  const categories = ['all', 'communication', 'crm', 'marketing', 'productivity', 'payments']
+
+  const filteredIntegrations = useMemo(() => {
+    return availableIntegrations.filter(integration => {
+      const matchesSearch = integration.displayName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        integration.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        integration.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
+      
+      const matchesCategory = selectedCategory === 'all' || integration.category === selectedCategory
+      return matchesSearch && matchesCategory
+    })
+  }, [availableIntegrations, searchQuery, selectedCategory])
+
+  const installedIntegrations = useMemo(() => {
+    return availableIntegrations.filter(integration => integration.installed)
+  }, [availableIntegrations])
+
+  const availableForInstall = useMemo(() => {
+    return filteredIntegrations.filter(integration => !integration.installed)
+  }, [filteredIntegrations])
+
+  const handleInstall = async (integrationName) => {
+    setInstalling(true)
+    setSelectedIntegration(integrationName)
+    try {
+      await installIntegration(integrationName)
+    } catch (error) {
+      console.error('Installation failed:', error)
+    } finally {
+      setInstalling(false)
+      setSelectedIntegration(null)
+    }
+  }
+
+  const handleUninstall = async (integrationName) => {
+    try {
+      if (uninstallIntegration) {
+        await uninstallIntegration(integrationName)
+      }
+    } catch (error) {
+      console.error('Uninstall failed:', error)
+    }
+  }
+
+  const handleConfigure = (integrationName) => {
+    // Navigate to configuration page or open modal
+    console.log('Configure integration:', integrationName)
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h2 className="text-3xl font-bold text-gray-900">Integration Discovery</h2>
+        <p className="mt-2 text-gray-600">Browse and manage Frigg integrations</p>
+      </div>
+
+      {/* Search and Filters */}
+      <div className="flex flex-col sm:flex-row gap-4">
+        <div className="relative flex-1">
+          <Search size={20} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+          <input
+            type="text"
+            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            placeholder="Search integrations..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        
+        <div className="flex items-center gap-2">
+          <select
+            value={selectedCategory}
+            onChange={(e) => setSelectedCategory(e.target.value)}
+            className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            {categories.map(category => (
+              <option key={category} value={category}>
+                {category.charAt(0).toUpperCase() + category.slice(1)}
+              </option>
+            ))}
+          </select>
+          
+          <div className="flex border border-gray-300 rounded-lg">
+            <Button
+              variant={viewMode === 'grid' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => setViewMode('grid')}
+              className="rounded-r-none"
+            >
+              <Grid3X3 size={16} />
+            </Button>
+            <Button
+              variant={viewMode === 'list' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => setViewMode('list')}
+              className="rounded-l-none border-l"
+            >
+              <List size={16} />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Installed Integrations */}
+      {installedIntegrations.length > 0 && (
+        <div>
+          <div className="flex items-center mb-4">
+            <Package size={20} className="mr-2 text-green-600" />
+            <h3 className="text-lg font-medium text-gray-900">
+              Installed Integrations ({installedIntegrations.length})
+            </h3>
+          </div>
+          <div className={cn(
+            viewMode === 'grid'
+              ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'
+              : 'space-y-4'
+          )}>
+            {installedIntegrations.map((integration) => (
+              <IntegrationCard
+                key={integration.name}
+                integration={integration}
+                onConfigure={handleConfigure}
+                onUninstall={handleUninstall}
+                className={viewMode === 'list' ? 'max-w-none' : ''}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Available Integrations */}
+      <div>
+        <h3 className="text-lg font-medium text-gray-900 mb-4">
+          Available Integrations ({availableForInstall.length})
+        </h3>
+        
+        {availableForInstall.length === 0 ? (
+          <div className="text-center py-12">
+            <Package size={48} className="mx-auto text-gray-300 mb-4" />
+            <p className="text-gray-500">No integrations found matching your criteria</p>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setSearchQuery('')
+                setSelectedCategory('all')
+              }}
+              className="mt-4"
+            >
+              Clear Filters
+            </Button>
+          </div>
+        ) : (
+          <div className={cn(
+            viewMode === 'grid'
+              ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'
+              : 'space-y-4'
+          )}>
+            {availableForInstall.map((integration) => (
+              <IntegrationCard
+                key={integration.name}
+                integration={integration}
+                onInstall={handleInstall}
+                installing={installing && selectedIntegration === integration.name}
+                className={viewMode === 'list' ? 'max-w-none' : ''}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Integrations

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Layout } from '../components/Layout'
+import { MonitoringDashboard } from '../components/monitoring'
+
+/**
+ * Monitoring Page Component
+ * Provides production monitoring and metrics visualization
+ */
+function Monitoring() {
+    return (
+        <Layout>
+            <MonitoringDashboard />
+        </Layout>
+    )
+}
+
+export default Monitoring

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

@@ -0,0 +1,155 @@
+import React, { useState } from 'react'
+import { useFrigg } from '../hooks/useFrigg'
+import UserSimulation from '../components/UserSimulation'
+
+const Simulation = () => {
+  const { users, integrations, currentUser } = useFrigg()
+  const [selectedUser, setSelectedUser] = useState(null)
+  const [selectedIntegration, setSelectedIntegration] = useState(null)
+
+  // Use current user context if available
+  const simulationUser = selectedUser || currentUser
+
+  return (
+    <div>
+      <div className="mb-8">
+        <h2 className="text-3xl font-bold text-gray-900">Integration Testing Simulator</h2>
+        <p className="mt-2 text-gray-600">Simulate user interactions with integrations for development testing</p>
+      </div>
+
+      {/* Selection Controls */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+        {/* User Selection */}
+        <div className="bg-white shadow rounded-lg p-6">
+          <h3 className="text-lg font-medium text-gray-900 mb-4">Select Test User</h3>
+          {currentUser && (
+            <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-md">
+              <p className="text-sm text-blue-800">
+                Using context user: <strong>{currentUser.firstName} {currentUser.lastName}</strong>
+              </p>
+            </div>
+          )}
+          <div className="space-y-2 max-h-64 overflow-y-auto">
+            {users.length === 0 ? (
+              <p className="text-sm text-gray-500 text-center py-4">
+                No test users available. Create some users first.
+              </p>
+            ) : (
+              users.map(user => (
+                <label
+                  key={user.id}
+                  className={`flex items-center p-3 border rounded-md cursor-pointer transition-colors ${
+                    (simulationUser?.id === user.id) 
+                      ? 'border-blue-500 bg-blue-50' 
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
+                  <input
+                    type="radio"
+                    name="user"
+                    value={user.id}
+                    checked={simulationUser?.id === user.id}
+                    onChange={() => setSelectedUser(user)}
+                    className="mr-3"
+                  />
+                  <div className="flex-1">
+                    <p className="text-sm font-medium text-gray-900">
+                      {user.firstName} {user.lastName}
+                    </p>
+                    <p className="text-xs text-gray-500">{user.email}</p>
+                    <div className="flex items-center space-x-2 mt-1">
+                      <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
+                        {user.role}
+                      </span>
+                      {user.appOrgId && (
+                        <span className="text-xs text-gray-500">
+                          Org: {user.appOrgId}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </label>
+              ))
+            )}
+          </div>
+        </div>
+
+        {/* Integration Selection */}
+        <div className="bg-white shadow rounded-lg p-6">
+          <h3 className="text-lg font-medium text-gray-900 mb-4">Select Integration</h3>
+          <div className="space-y-2 max-h-64 overflow-y-auto">
+            {integrations.length === 0 ? (
+              <p className="text-sm text-gray-500 text-center py-4">
+                No integrations available. Install some integrations first.
+              </p>
+            ) : (
+              integrations.map(integration => (
+                <label
+                  key={integration.id}
+                  className={`flex items-center p-3 border rounded-md cursor-pointer transition-colors ${
+                    selectedIntegration?.id === integration.id 
+                      ? 'border-blue-500 bg-blue-50' 
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
+                  <input
+                    type="radio"
+                    name="integration"
+                    value={integration.id}
+                    checked={selectedIntegration?.id === integration.id}
+                    onChange={() => setSelectedIntegration(integration)}
+                    className="mr-3"
+                  />
+                  <div className="flex-1">
+                    <p className="text-sm font-medium text-gray-900">
+                      {integration.name}
+                    </p>
+                    <p className="text-xs text-gray-500">
+                      {integration.description || 'No description'}
+                    </p>
+                    <div className="flex items-center space-x-2 mt-1">
+                      <span className={`text-xs px-2 py-0.5 rounded ${
+                        integration.status === 'active' 
+                          ? 'bg-green-100 text-green-700' 
+                          : 'bg-gray-100 text-gray-600'
+                      }`}>
+                        {integration.status || 'inactive'}
+                      </span>
+                      <span className="text-xs text-gray-500">
+                        v{integration.version || '1.0.0'}
+                      </span>
+                    </div>
+                  </div>
+                </label>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Simulation Component */}
+      <UserSimulation 
+        user={simulationUser} 
+        integration={selectedIntegration} 
+      />
+
+      {/* Help Section */}
+      <div className="mt-8 bg-yellow-50 border border-yellow-200 rounded-lg p-6">
+        <h4 className="text-sm font-semibold text-yellow-900 mb-2">How to Use the Simulator</h4>
+        <ol className="text-sm text-yellow-800 space-y-2 list-decimal list-inside">
+          <li>Select a test user or use the current context user from the header</li>
+          <li>Choose an integration to test</li>
+          <li>Start a simulation session</li>
+          <li>Execute actions and observe the responses</li>
+          <li>Simulate webhook events to test integration reactions</li>
+          <li>Monitor the activity log for debugging</li>
+        </ol>
+        <p className="text-xs text-yellow-700 mt-3">
+          Note: All simulations are for local development only and do not affect real data.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default Simulation