@friggframework/devtools 2.0.0-next.61 → 2.0.0-next.63

package/management-ui/src/components/EnvironmentSecurity.jsx

@@ -1,463 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import api from '../services/api'
-
-const EnvironmentSecurity = ({ environment = 'local' }) => {
-  const [securitySettings, setSecuritySettings] = useState({
-    maskingEnabled: true,
-    encryptionEnabled: false,
-    auditLoggingEnabled: true,
-    accessControl: {
-      enabled: false,
-      defaultPermission: 'read',
-      rules: []
-    }
-  })
-  const [maskingPatterns, setMaskingPatterns] = useState([
-    { pattern: 'PASSWORD', enabled: true },
-    { pattern: 'SECRET', enabled: true },
-    { pattern: 'KEY', enabled: true },
-    { pattern: 'TOKEN', enabled: true },
-    { pattern: 'PRIVATE', enabled: true },
-    { pattern: 'CREDENTIAL', enabled: true },
-    { pattern: 'AUTH', enabled: true },
-    { pattern: 'API_KEY', enabled: true }
-  ])
-  const [customPattern, setCustomPattern] = useState('')
-  const [auditLogs, setAuditLogs] = useState([])
-  const [showAuditLogs, setShowAuditLogs] = useState(false)
-  const [accessRules, setAccessRules] = useState([])
-  const [newRule, setNewRule] = useState({
-    user: '',
-    pattern: '',
-    permission: 'read'
-  })
-
-  // Load security settings
-  useEffect(() => {
-    loadSecuritySettings()
-    loadAuditLogs()
-  }, [environment])
-
-  const loadSecuritySettings = () => {
-    // Load from localStorage for now
-    const saved = localStorage.getItem(`security-settings-${environment}`)
-    if (saved) {
-      const parsed = JSON.parse(saved)
-      setSecuritySettings(parsed.settings || securitySettings)
-      setMaskingPatterns(parsed.patterns || maskingPatterns)
-      setAccessRules(parsed.rules || [])
-    }
-  }
-
-  const saveSecuritySettings = () => {
-    const toSave = {
-      settings: securitySettings,
-      patterns: maskingPatterns,
-      rules: accessRules
-    }
-    localStorage.setItem(`security-settings-${environment}`, JSON.stringify(toSave))
-  }
-
-  const loadAuditLogs = async () => {
-    // Simulate loading audit logs
-    const mockLogs = [
-      {
-        id: 1,
-        timestamp: new Date().toISOString(),
-        user: 'admin@example.com',
-        action: 'update',
-        variable: 'DATABASE_URL',
-        environment,
-        details: 'Updated variable value'
-      },
-      {
-        id: 2,
-        timestamp: new Date(Date.now() - 3600000).toISOString(),
-        user: 'dev@example.com',
-        action: 'create',
-        variable: 'API_KEY',
-        environment,
-        details: 'Created new variable'
-      },
-      {
-        id: 3,
-        timestamp: new Date(Date.now() - 7200000).toISOString(),
-        user: 'admin@example.com',
-        action: 'delete',
-        variable: 'OLD_SECRET',
-        environment,
-        details: 'Deleted variable'
-      }
-    ]
-    setAuditLogs(mockLogs)
-  }
-
-  const toggleSetting = (setting) => {
-    const updated = { ...securitySettings, [setting]: !securitySettings[setting] }
-    setSecuritySettings(updated)
-    saveSecuritySettings()
-  }
-
-  const togglePattern = (index) => {
-    const updated = [...maskingPatterns]
-    updated[index].enabled = !updated[index].enabled
-    setMaskingPatterns(updated)
-    saveSecuritySettings()
-  }
-
-  const addCustomPattern = () => {
-    if (customPattern && !maskingPatterns.find(p => p.pattern === customPattern)) {
-      const updated = [...maskingPatterns, { pattern: customPattern.toUpperCase(), enabled: true }]
-      setMaskingPatterns(updated)
-      setCustomPattern('')
-      saveSecuritySettings()
-    }
-  }
-
-  const removePattern = (index) => {
-    const updated = maskingPatterns.filter((_, i) => i !== index)
-    setMaskingPatterns(updated)
-    saveSecuritySettings()
-  }
-
-  const addAccessRule = () => {
-    if (newRule.user && newRule.pattern) {
-      const updated = [...accessRules, { ...newRule, id: Date.now() }]
-      setAccessRules(updated)
-      setNewRule({ user: '', pattern: '', permission: 'read' })
-      saveSecuritySettings()
-    }
-  }
-
-  const removeAccessRule = (id) => {
-    const updated = accessRules.filter(rule => rule.id !== id)
-    setAccessRules(updated)
-    saveSecuritySettings()
-  }
-
-  const exportAuditLogs = () => {
-    const csv = [
-      ['Timestamp', 'User', 'Action', 'Variable', 'Environment', 'Details'].join(','),
-      ...auditLogs.map(log => [
-        log.timestamp,
-        log.user,
-        log.action,
-        log.variable,
-        log.environment,
-        log.details
-      ].join(','))
-    ].join('\n')
-
-    const blob = new Blob([csv], { type: 'text/csv' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `audit-logs-${environment}-${Date.now()}.csv`
-    a.click()
-    URL.revokeObjectURL(url)
-  }
-
-  return (
-    <div className="environment-security space-y-6">
-      {/* Security Overview */}
-      <div className="bg-white rounded-lg shadow p-6">
-        <h3 className="text-lg font-medium text-gray-900 mb-4">Security Settings</h3>
-        
-        <div className="space-y-4">
-          {/* Masking Toggle */}
-          <div className="flex items-center justify-between">
-            <div>
-              <h4 className="text-sm font-medium text-gray-900">Variable Masking</h4>
-              <p className="text-sm text-gray-500">Hide sensitive variable values in the UI</p>
-            </div>
-            <button
-              onClick={() => toggleSetting('maskingEnabled')}
-              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                securitySettings.maskingEnabled ? 'bg-blue-600' : 'bg-gray-200'
-              }`}
-            >
-              <span
-                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                  securitySettings.maskingEnabled ? 'translate-x-6' : 'translate-x-1'
-                }`}
-              />
-            </button>
-          </div>
-
-          {/* Encryption Toggle */}
-          <div className="flex items-center justify-between">
-            <div>
-              <h4 className="text-sm font-medium text-gray-900">Value Encryption</h4>
-              <p className="text-sm text-gray-500">Encrypt sensitive values at rest</p>
-            </div>
-            <button
-              onClick={() => toggleSetting('encryptionEnabled')}
-              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                securitySettings.encryptionEnabled ? 'bg-blue-600' : 'bg-gray-200'
-              }`}
-            >
-              <span
-                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                  securitySettings.encryptionEnabled ? 'translate-x-6' : 'translate-x-1'
-                }`}
-              />
-            </button>
-          </div>
-
-          {/* Audit Logging Toggle */}
-          <div className="flex items-center justify-between">
-            <div>
-              <h4 className="text-sm font-medium text-gray-900">Audit Logging</h4>
-              <p className="text-sm text-gray-500">Track all changes to environment variables</p>
-            </div>
-            <button
-              onClick={() => toggleSetting('auditLoggingEnabled')}
-              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                securitySettings.auditLoggingEnabled ? 'bg-blue-600' : 'bg-gray-200'
-              }`}
-            >
-              <span
-                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                  securitySettings.auditLoggingEnabled ? 'translate-x-6' : 'translate-x-1'
-                }`}
-              />
-            </button>
-          </div>
-
-          {/* Access Control Toggle */}
-          <div className="flex items-center justify-between">
-            <div>
-              <h4 className="text-sm font-medium text-gray-900">Access Control</h4>
-              <p className="text-sm text-gray-500">Enable role-based access control</p>
-            </div>
-            <button
-              onClick={() => {
-                const updated = { ...securitySettings }
-                updated.accessControl.enabled = !updated.accessControl.enabled
-                setSecuritySettings(updated)
-                saveSecuritySettings()
-              }}
-              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                securitySettings.accessControl.enabled ? 'bg-blue-600' : 'bg-gray-200'
-              }`}
-            >
-              <span
-                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                  securitySettings.accessControl.enabled ? 'translate-x-6' : 'translate-x-1'
-                }`}
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Masking Patterns */}
-      {securitySettings.maskingEnabled && (
-        <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-lg font-medium text-gray-900 mb-4">Masking Patterns</h3>
-          <p className="text-sm text-gray-500 mb-4">
-            Variables containing these patterns will be automatically masked
-          </p>
-          
-          <div className="space-y-2 mb-4">
-            {maskingPatterns.map((pattern, index) => (
-              <div key={index} className="flex items-center justify-between py-2">
-                <div className="flex items-center">
-                  <input
-                    type="checkbox"
-                    checked={pattern.enabled}
-                    onChange={() => togglePattern(index)}
-                    className="mr-3"
-                  />
-                  <code className="text-sm font-mono text-gray-700">{pattern.pattern}</code>
-                </div>
-                {index >= 8 && ( // Allow removing custom patterns only
-                  <button
-                    onClick={() => removePattern(index)}
-                    className="text-red-600 hover:text-red-800"
-                  >
-                    Remove
-                  </button>
-                )}
-              </div>
-            ))}
-          </div>
-          
-          <div className="flex items-center space-x-2">
-            <input
-              type="text"
-              value={customPattern}
-              onChange={(e) => setCustomPattern(e.target.value.toUpperCase())}
-              placeholder="Add custom pattern"
-              className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
-            />
-            <button
-              onClick={addCustomPattern}
-              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
-            >
-              Add Pattern
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Access Control Rules */}
-      {securitySettings.accessControl.enabled && (
-        <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-lg font-medium text-gray-900 mb-4">Access Control Rules</h3>
-          
-          <div className="mb-4">
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Default Permission
-            </label>
-            <select
-              value={securitySettings.accessControl.defaultPermission}
-              onChange={(e) => {
-                const updated = { ...securitySettings }
-                updated.accessControl.defaultPermission = e.target.value
-                setSecuritySettings(updated)
-                saveSecuritySettings()
-              }}
-              className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
-            >
-              <option value="none">No Access</option>
-              <option value="read">Read Only</option>
-              <option value="write">Read & Write</option>
-            </select>
-          </div>
-          
-          {/* Access Rules Table */}
-          {accessRules.length > 0 && (
-            <div className="mb-4">
-              <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">User/Role</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Variable Pattern</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Permission</th>
-                    <th className="px-4 py-2"></th>
-                  </tr>
-                </thead>
-                <tbody className="bg-white divide-y divide-gray-200">
-                  {accessRules.map(rule => (
-                    <tr key={rule.id}>
-                      <td className="px-4 py-2 text-sm">{rule.user}</td>
-                      <td className="px-4 py-2 text-sm font-mono">{rule.pattern}</td>
-                      <td className="px-4 py-2 text-sm">{rule.permission}</td>
-                      <td className="px-4 py-2 text-sm text-right">
-                        <button
-                          onClick={() => removeAccessRule(rule.id)}
-                          className="text-red-600 hover:text-red-800"
-                        >
-                          Remove
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-          
-          {/* Add Rule Form */}
-          <div className="grid grid-cols-3 gap-2">
-            <input
-              type="text"
-              value={newRule.user}
-              onChange={(e) => setNewRule({ ...newRule, user: e.target.value })}
-              placeholder="User or role"
-              className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
-            />
-            <input
-              type="text"
-              value={newRule.pattern}
-              onChange={(e) => setNewRule({ ...newRule, pattern: e.target.value })}
-              placeholder="Variable pattern (e.g., API_*)"
-              className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
-            />
-            <div className="flex space-x-2">
-              <select
-                value={newRule.permission}
-                onChange={(e) => setNewRule({ ...newRule, permission: e.target.value })}
-                className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
-              >
-                <option value="none">No Access</option>
-                <option value="read">Read Only</option>
-                <option value="write">Read & Write</option>
-              </select>
-              <button
-                onClick={addAccessRule}
-                className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
-              >
-                Add
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Audit Logs */}
-      {securitySettings.auditLoggingEnabled && (
-        <div className="bg-white rounded-lg shadow p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-lg font-medium text-gray-900">Audit Logs</h3>
-            <div className="space-x-2">
-              <button
-                onClick={() => setShowAuditLogs(!showAuditLogs)}
-                className="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
-              >
-                {showAuditLogs ? 'Hide' : 'Show'} Logs
-              </button>
-              <button
-                onClick={exportAuditLogs}
-                className="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
-              >
-                Export CSV
-              </button>
-            </div>
-          </div>
-          
-          {showAuditLogs && (
-            <div className="overflow-x-auto">
-              <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">Timestamp</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">User</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Action</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Variable</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Details</th>
-                  </tr>
-                </thead>
-                <tbody className="bg-white divide-y divide-gray-200">
-                  {auditLogs.map(log => (
-                    <tr key={log.id}>
-                      <td className="px-4 py-2 text-sm text-gray-500">
-                        {new Date(log.timestamp).toLocaleString()}
-                      </td>
-                      <td className="px-4 py-2 text-sm">{log.user}</td>
-                      <td className="px-4 py-2 text-sm">
-                        <span className={`px-2 py-1 text-xs rounded ${
-                          log.action === 'create' ? 'bg-green-100 text-green-800' :
-                          log.action === 'update' ? 'bg-blue-100 text-blue-800' :
-                          log.action === 'delete' ? 'bg-red-100 text-red-800' :
-                          'bg-gray-100 text-gray-800'
-                        }`}>
-                          {log.action}
-                        </span>
-                      </td>
-                      <td className="px-4 py-2 text-sm font-mono">{log.variable}</td>
-                      <td className="px-4 py-2 text-sm text-gray-500">{log.details}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default EnvironmentSecurity

package/management-ui/src/components/ErrorBoundary.jsx

@@ -1,73 +0,0 @@
-import React from 'react'
-
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = { hasError: false, error: null, errorInfo: null }
-  }
-
-  static getDerivedStateFromError(error) {
-    // Update state so the next render will show the fallback UI
-    return { hasError: true }
-  }
-
-  componentDidCatch(error, errorInfo) {
-    // Log the error to console or error reporting service
-    console.error('ErrorBoundary caught an error:', error, errorInfo)
-    this.setState({
-      error: error,
-      errorInfo: errorInfo
-    })
-  }
-
-  render() {
-    if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback
-      }
-
-      return (
-        <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
-          <div className="sm:mx-auto sm:w-full sm:max-w-md">
-            <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
-              <div className="text-center">
-                <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
-                  <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
-                  </svg>
-                </div>
-                <h3 className="mt-4 text-lg font-medium text-gray-900">Something went wrong</h3>
-                <p className="mt-2 text-sm text-gray-500">
-                  An unexpected error occurred. Please refresh the page and try again.
-                </p>
-                {process.env.NODE_ENV === 'development' && this.state.error && (
-                  <details className="mt-4 text-left">
-                    <summary className="cursor-pointer text-sm font-medium text-gray-700 hover:text-gray-900">
-                      Error details (development only)
-                    </summary>
-                    <pre className="mt-2 text-xs text-red-600 whitespace-pre-wrap">
-                      {this.state.error.toString()}
-                      {this.state.errorInfo.componentStack}
-                    </pre>
-                  </details>
-                )}
-                <div className="mt-6">
-                  <button
-                    onClick={() => window.location.reload()}
-                    className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-                  >
-                    Reload page
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )
-    }
-
-    return this.props.children
-  }
-}
-
-export default ErrorBoundary