diff --git a/src/App.tsx b/src/App.tsx index 531ac7f..62adda3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -38,10 +38,10 @@ import { SettingsPage } from './pages/Settings'; import { GDPRPage } from './pages/GDPR'; import StorePage from './pages/Store'; import { FeatureViewPage } from './pages/FeatureView'; -import { AccessManagementHub, AdminMandatesPage, AdminUsersPage, AdminUserMandatesPage, AdminFeatureAccessPage, AdminInvitationsPage, AdminMandateRolesPage, AdminFeatureRolesPage, AdminFeatureInstanceUsersPage, AdminMandateRolePermissionsPage, AdminUserAccessOverviewPage, AdminAutomationEventsPage, AdminLogsPage } from './pages/admin'; +import { AccessManagementHub, AdminMandatesPage, AdminUsersPage, AdminUserMandatesPage, AdminFeatureAccessPage, AdminInvitationsPage, AdminMandateRolesPage, AdminFeatureRolesPage, AdminFeatureInstanceUsersPage, AdminMandateRolePermissionsPage, AdminUserAccessOverviewPage, AdminAutomationEventsPage, AdminAutomationLogsPage, AdminLogsPage } from './pages/admin'; import { AdminMandateWizardPage, AdminInvitationWizardPage } from './pages/admin/wizards'; import { PromptsPage, FilesPage, ConnectionsPage } from './pages/basedata'; -import { BillingDataView, BillingAdmin, BillingMandateView } from './pages/billing'; +import { BillingDataView, BillingAdmin, BillingMandateView, AdminSubscriptionsPage } from './pages/billing'; function App() { // Load saved theme preference and set app name on app mount useEffect(() => { @@ -154,8 +154,13 @@ function App() { } /> } /> - {/* Workspace Editor */} + {/* Workspace + Automation2 Editor */} } /> + } /> + + {/* Automation2 Workflows & Tasks */} + } /> + } /> {/* Teams Bot Feature Views */} } /> @@ -189,7 +194,9 @@ function App() { } /> } /> + } /> } /> + } /> } /> } /> } /> diff --git a/src/api/automation2Api.ts b/src/api/automation2Api.ts new file mode 100644 index 0000000..f215f7e --- /dev/null +++ b/src/api/automation2Api.ts @@ -0,0 +1,356 @@ +/** + * Automation2 API + * Node types and graph execution for n8n-style flows. + */ + +import type { ApiRequestOptions } from '../hooks/useApi'; + +const LOG = '[Automation2]'; + +// ============================================================================ +// TYPES +// ============================================================================ + +export interface NodeTypeParameter { + name: string; + type: string; + required?: boolean; + description?: string; + default?: unknown; +} + +export interface NodeType { + id: string; + category: string; + label: string; + description: string; + parameters: NodeTypeParameter[]; + inputs: number; + outputs: number; + executor: string; + meta?: { + icon?: string; + color?: string; + method?: string; + action?: string; + }; +} + +export interface NodeTypeCategory { + id: string; + label: Record | string; +} + +export interface NodeTypesResponse { + nodeTypes: NodeType[]; + categories: NodeTypeCategory[]; +} + +export interface Automation2GraphNode { + id: string; + type: string; + parameters?: Record; +} + +export interface Automation2Connection { + source: string; + target: string; + sourceOutput?: number; + targetInput?: number; +} + +export interface Automation2Graph { + nodes: Automation2GraphNode[]; + connections: Automation2Connection[]; +} + +export interface ExecuteGraphResponse { + success: boolean; + nodeOutputs?: Record; + error?: string; + stopped?: boolean; + failedNode?: string; + paused?: boolean; + taskId?: string; + runId?: string; + nodeId?: string; +} + +export interface Automation2Workflow { + id: string; + label: string; + graph: Automation2Graph; + active?: boolean; + /** Enriched: run count */ + runCount?: number; + /** Enriched: has active (running/paused) run */ + isRunning?: boolean; + /** Enriched: status of active run */ + runStatus?: string; + /** Enriched: nodeId where workflow is stuck (paused) */ + stuckAtNodeId?: string; + /** Enriched: human-readable label for stuck node */ + stuckAtNodeLabel?: string; + /** Enriched: created timestamp (seconds) */ + createdAt?: number; + /** Enriched: last run started timestamp (seconds) */ + lastStartedAt?: number; +} + +// ============================================================================ +// API FUNCTIONS +// ============================================================================ + +export type ApiRequestFunction = (options: ApiRequestOptions) => Promise; + +/** + * Fetch node types for the flow builder (backend-driven). + * GET /api/automation2/{instanceId}/node-types?language=de + */ +export async function fetchNodeTypes( + request: ApiRequestFunction, + instanceId: string, + language = 'de' +): Promise { + console.log(`${LOG} fetchNodeTypes: instanceId=${instanceId} language=${language}`); + const data = await request({ + url: `/api/automation2/${instanceId}/node-types`, + method: 'get', + params: { language }, + }); + const nodeTypes = data?.nodeTypes ?? []; + const categories = data?.categories ?? []; + console.log(`${LOG} fetchNodeTypes response: ${nodeTypes.length} nodeTypes, ${categories.length} categories`); + return { nodeTypes, categories }; +} + +/** + * Execute an automation2 graph. + * POST /api/automation2/{instanceId}/execute + */ +export async function executeGraph( + request: ApiRequestFunction, + instanceId: string, + graph: Automation2Graph, + workflowId?: string +): Promise { + console.log( + `${LOG} executeGraph request: instanceId=${instanceId} workflowId=${workflowId} nodes=${graph.nodes.length} connections=${graph.connections.length}`, + { nodes: graph.nodes, connections: graph.connections } + ); + const start = performance.now(); + try { + const result = await request({ + url: `/api/automation2/${instanceId}/execute`, + method: 'post', + data: { graph, workflowId }, + }); + const ms = Math.round(performance.now() - start); + console.log( + `${LOG} executeGraph response (${ms}ms): success=${result?.success} error=${result?.error ?? 'none'} nodeOutputs_keys=${Object.keys(result?.nodeOutputs ?? {}).join(',')} failedNode=${result?.failedNode ?? '-'}`, + result + ); + return result; + } catch (err) { + const ms = Math.round(performance.now() - start); + console.error( + `${LOG} executeGraph FAILED (${ms}ms): instanceId=${instanceId}`, + err + ); + throw err; + } +} + +// ------------------------------------------------------------------------- +// Workflows CRUD +// ------------------------------------------------------------------------- + +export async function fetchWorkflows( + request: ApiRequestFunction, + instanceId: string +): Promise { + const data = await request({ + url: `/api/automation2/${instanceId}/workflows`, + method: 'get', + }); + return data?.workflows ?? []; +} + +export async function fetchWorkflow( + request: ApiRequestFunction, + instanceId: string, + workflowId: string +): Promise { + return await request({ + url: `/api/automation2/${instanceId}/workflows/${workflowId}`, + method: 'get', + }); +} + +export async function createWorkflow( + request: ApiRequestFunction, + instanceId: string, + body: { label: string; graph: Automation2Graph } +): Promise { + return await request({ + url: `/api/automation2/${instanceId}/workflows`, + method: 'post', + data: body, + }); +} + +export async function updateWorkflow( + request: ApiRequestFunction, + instanceId: string, + workflowId: string, + body: { label?: string; graph?: Automation2Graph } +): Promise { + return await request({ + url: `/api/automation2/${instanceId}/workflows/${workflowId}`, + method: 'put', + data: body, + }); +} + +export async function deleteWorkflow( + request: ApiRequestFunction, + instanceId: string, + workflowId: string +): Promise { + await request({ + url: `/api/automation2/${instanceId}/workflows/${workflowId}`, + method: 'delete', + }); +} + +export interface Automation2Run { + id: string; + workflowId: string; + status: string; + nodeOutputs?: Record; + currentNodeId?: string; +} + +export async function fetchWorkflowRuns( + request: ApiRequestFunction, + instanceId: string, + workflowId: string +): Promise { + const data = await request({ + url: `/api/automation2/${instanceId}/workflows/${workflowId}/runs`, + method: 'get', + }); + return data?.runs ?? []; +} + +// ------------------------------------------------------------------------- +// Tasks +// ------------------------------------------------------------------------- + +export interface Automation2Task { + id: string; + runId: string; + workflowId: string; + nodeId: string; + nodeType: string; + config: Record; + status: string; + result?: Record; + /** Workflow label (enriched by API) */ + workflowLabel?: string; + /** Unix timestamp ms (from _createdAt) */ + createdAt?: number; + /** Optional due date - configurable in future */ + dueAt?: number; +} + +export async function fetchTasks( + request: ApiRequestFunction, + instanceId: string, + params?: { workflowId?: string; status?: string } +): Promise { + const data = await request({ + url: `/api/automation2/${instanceId}/tasks`, + method: 'get', + params, + }); + return data?.tasks ?? []; +} + +export async function completeTask( + request: ApiRequestFunction, + instanceId: string, + taskId: string, + result: Record +): Promise { + return await request({ + url: `/api/automation2/${instanceId}/tasks/${taskId}/complete`, + method: 'post', + data: { result }, + }); +} + +// ------------------------------------------------------------------------- +// Connections and Browse (for Email/SharePoint node config) +// ------------------------------------------------------------------------- + +export interface UserConnection { + id: string; + authority: string; + externalUsername?: string; + externalEmail?: string; + status: string; +} + +export async function fetchConnections( + request: ApiRequestFunction, + instanceId: string +): Promise { + const data = await request({ + url: `/api/automation2/${instanceId}/connections`, + method: 'get', + }); + return data?.connections ?? []; +} + +export interface ConnectionService { + service: string; + label: string; + icon: string; +} + +export async function fetchConnectionServices( + request: ApiRequestFunction, + instanceId: string, + connectionId: string +): Promise { + const data = await request({ + url: `/api/automation2/${instanceId}/connections/${connectionId}/services`, + method: 'get', + }); + return data?.services ?? []; +} + +export interface BrowseEntry { + name: string; + path: string; + isFolder: boolean; + size?: number; + mimeType?: string; + metadata?: Record; +} + +export async function fetchBrowse( + request: ApiRequestFunction, + instanceId: string, + connectionId: string, + service: string, + path = '/' +): Promise<{ items: BrowseEntry[]; path: string; service: string }> { + const data = await request({ + url: `/api/automation2/${instanceId}/connections/${connectionId}/browse`, + method: 'get', + params: { service, path }, + }); + return { items: data?.items ?? [], path: data?.path ?? path, service: data?.service ?? service }; +} diff --git a/src/api/automationApi.ts b/src/api/automationApi.ts index 38d560c..80d44cd 100644 --- a/src/api/automationApi.ts +++ b/src/api/automationApi.ts @@ -254,17 +254,26 @@ export async function fetchAutomationAttributes( * Endpoint: GET /api/automation-templates */ export async function fetchAutomationTemplates( - request: ApiRequestFunction -): Promise { - const data = await request({ - url: '/api/automation-templates', - method: 'get' - }); - - if (data?.items && Array.isArray(data.items)) { - return data.items; + request: ApiRequestFunction, + params?: any +): Promise { + const requestParams: Record = {}; + if (params && typeof params === 'object') { + const paginationObj: any = {}; + if (params.page !== undefined) paginationObj.page = params.page; + if (params.pageSize !== undefined) paginationObj.pageSize = params.pageSize; + if (params.sort) paginationObj.sort = params.sort; + if (params.filters) paginationObj.filters = params.filters; + if (params.search) paginationObj.search = params.search; + if (Object.keys(paginationObj).length > 0) { + requestParams.pagination = JSON.stringify(paginationObj); + } } - return Array.isArray(data) ? data : []; + return await request({ + url: '/api/automation-templates', + method: 'get', + params: requestParams, + }); } /** diff --git a/src/api/subscriptionApi.ts b/src/api/subscriptionApi.ts new file mode 100644 index 0000000..9fefe9f --- /dev/null +++ b/src/api/subscriptionApi.ts @@ -0,0 +1,143 @@ +import { ApiRequestOptions } from '../hooks/useApi'; + +// ============================================================================ +// TYPES — aligned with State Machine (wiki/concepts/Subscription-State-Machine.md) +// ============================================================================ + +export type SubscriptionStatus = 'PENDING' | 'SCHEDULED' | 'TRIALING' | 'ACTIVE' | 'PAST_DUE' | 'EXPIRED'; +export type BillingPeriod = 'MONTHLY' | 'YEARLY' | 'NONE'; + +export interface SubscriptionPlan { + planKey: string; + selectableByUser: boolean; + title: Record; + description: Record; + currency: string; + billingPeriod: BillingPeriod; + pricePerUserCHF: number; + pricePerFeatureInstanceCHF: number; + autoRenew: boolean; + maxUsers: number | null; + maxFeatureInstances: number | null; + trialDays: number | null; + successorPlanKey: string | null; +} + +export interface MandateSubscription { + id: string; + mandateId: string; + planKey: string; + status: SubscriptionStatus; + recurring: boolean; + startedAt: string; + effectiveFrom: string | null; + endedAt: string | null; + currentPeriodStart: string | null; + currentPeriodEnd: string | null; + trialEndsAt: string | null; + snapshotPricePerUserCHF: number; + snapshotPricePerInstanceCHF: number; + stripeSubscriptionId: string | null; +} + +export interface SubscriptionStatusResponse { + active: boolean; + subscription: MandateSubscription | null; + plan: SubscriptionPlan | null; + scheduled: MandateSubscription | null; +} + +export interface ActivatePlanResponse { + redirectUrl?: string; + [key: string]: unknown; +} + +export type ApiRequestFunction = (options: ApiRequestOptions) => Promise; + +// ============================================================================ +// Helpers +// ============================================================================ + +function _mandateConfig(mandateId?: string): Record { + if (!mandateId) return {}; + return { headers: { 'X-Mandate-Id': mandateId } }; +} + +// ============================================================================ +// API FUNCTIONS +// ============================================================================ + +export async function fetchSelectablePlans( + request: ApiRequestFunction, + mandateId?: string, +): Promise { + return await request({ + url: '/api/subscription/plans', + method: 'get', + additionalConfig: _mandateConfig(mandateId), + }); +} + +export async function fetchSubscriptionStatus( + request: ApiRequestFunction, + mandateId?: string, +): Promise { + return await request({ + url: '/api/subscription/status', + method: 'get', + additionalConfig: _mandateConfig(mandateId), + }); +} + +export async function activatePlan( + request: ApiRequestFunction, + planKey: string, + mandateId?: string, + returnUrl?: string, +): Promise { + return await request({ + url: '/api/subscription/activate', + method: 'post', + data: { planKey, returnUrl: returnUrl || '' }, + additionalConfig: _mandateConfig(mandateId), + }); +} + +export async function cancelSubscription( + request: ApiRequestFunction, + subscriptionId: string, + mandateId?: string, +): Promise> { + return await request({ + url: '/api/subscription/cancel', + method: 'post', + data: { subscriptionId }, + additionalConfig: _mandateConfig(mandateId), + }); +} + +export async function reactivateSubscription( + request: ApiRequestFunction, + subscriptionId: string, + mandateId?: string, +): Promise> { + return await request({ + url: '/api/subscription/reactivate', + method: 'post', + data: { subscriptionId }, + additionalConfig: _mandateConfig(mandateId), + }); +} + +export async function verifyCheckout( + request: ApiRequestFunction, + sessionId: string, + mandateId?: string, +): Promise<{ status: string; message: string }> { + return await request({ + url: '/api/subscription/checkout/verify', + method: 'post', + data: { sessionId }, + additionalConfig: _mandateConfig(mandateId), + }); +} diff --git a/src/components/Automation2FlowEditor/Automation2FlowEditor.module.css b/src/components/Automation2FlowEditor/Automation2FlowEditor.module.css new file mode 100644 index 0000000..828453e --- /dev/null +++ b/src/components/Automation2FlowEditor/Automation2FlowEditor.module.css @@ -0,0 +1,499 @@ +/** + * Automation2 Flow Editor Styles + * Sidebar with node list + canvas area. + */ + +.container { + display: flex; + flex: 1; + min-height: 0; + overflow: hidden; +} + +/* ============================================================================= + SIDEBAR - Node List + ============================================================================= */ + +.sidebar { + flex-shrink: 0; + width: 280px; + display: flex; + flex-direction: column; + background: var(--bg-secondary, #f8f9fa); + border-right: 1px solid var(--border-color, #e0e0e0); + overflow: hidden; +} + +.sidebarHeader { + padding: 1rem; + border-bottom: 1px solid var(--border-color, #e0e0e0); + background: var(--bg-primary, #fff); +} + +.sidebarTitle { + margin: 0; + font-size: 1rem; + font-weight: 600; + color: var(--text-primary, #1a1a1a); +} + +.sidebarSearch { + margin-top: 0.75rem; + width: 100%; + padding: 0.5rem 0.75rem; + border: 1px solid var(--border-color, #e0e0e0); + border-radius: 6px; + font-size: 0.875rem; + background: var(--bg-primary, #fff); + color: var(--text-primary, #333); +} + +.sidebarSearch::placeholder { + color: var(--text-tertiary, #999); +} + +.sidebarSearch:focus { + outline: none; + border-color: var(--primary-color, #007bff); + box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15); +} + +.nodeList { + flex: 1; + overflow-y: auto; + padding: 0.5rem; +} + +/* Category Groups */ +.categoryGroup { + margin-bottom: 1rem; +} + + +.categoryHeader { + display: flex; + align-items: center; + padding: 0.5rem 0.75rem; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text-secondary, #666); +} + +.categoryIcon { + margin-right: 0.5rem; + font-size: 0.875rem; +} + +.categoryLabel { + flex: 1; +} + +.categoryCount { + background: var(--bg-tertiary, #e9ecef); + color: var(--text-secondary, #666); + padding: 0.125rem 0.5rem; + border-radius: 10px; + font-size: 0.7rem; +} + +/* Node Items */ +.nodeItem { + display: flex; + align-items: center; + padding: 0.5rem 0.75rem; + margin-bottom: 0.25rem; + border-radius: 6px; + cursor: grab; + transition: background 0.15s; + border: 1px solid transparent; +} + +.nodeItem:hover { + background: var(--bg-hover, #e9ecef); +} + +.nodeItem:active { + cursor: grabbing; +} + +.nodeItemIcon { + flex-shrink: 0; + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + margin-right: 0.75rem; + font-size: 0.875rem; +} + +.nodeItemInfo { + flex: 1; + min-width: 0; +} + +.nodeItemLabel { + display: block; + font-size: 0.875rem; + font-weight: 500; + color: var(--text-primary, #333); +} + +.nodeItemDesc { + display: block; + font-size: 0.75rem; + color: var(--text-secondary, #666); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* Loading / Error */ +.loading, +.error { + padding: 2rem; + text-align: center; + color: var(--text-secondary, #666); +} + +.error { + color: var(--danger-color, #dc3545); +} + +.retryButton { + margin-top: 0.75rem; + padding: 0.5rem 1rem; + background: var(--primary-color, #007bff); + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 0.875rem; +} + +.retryButton:hover { + background: var(--primary-hover, #0056b3); +} + +.spinner { + animation: spin 1s linear infinite; +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ============================================================================= + CANVAS + ============================================================================= */ + +.canvas { + flex: 1; + display: flex; + flex-direction: column; + min-width: 0; + background: var(--canvas-bg, #fafafa); +} + +.canvasHeader { + flex-shrink: 0; + padding: 0.75rem 1rem; + border-bottom: 1px solid var(--border-color, #e0e0e0); + background: var(--bg-primary, #fff); +} + +.canvasTitle { + margin: 0; + font-size: 0.875rem; + font-weight: 500; + color: var(--text-secondary, #666); +} + +.canvasArea { + flex: 1; + padding: 2rem; + min-height: 400px; + overflow: hidden; +} + +.canvasDropZone { + position: relative; + min-height: 100%; + height: 100%; + overflow: hidden; + border-radius: 8px; + /* Infinite grid: on viewport, moves with pan/zoom via inline style */ + background-image: radial-gradient(circle, var(--border-color, #e0e0e0) 1px, transparent 1px); + background-repeat: repeat; +} + +.canvasContent { + position: absolute; + left: 0; + top: 0; + will-change: transform; + background: transparent; +} + +.canvasGrab { + cursor: grab; +} + +.canvasPanning { + cursor: grabbing; + user-select: none; +} + +.canvasPlaceholder { + position: absolute; + left: 2rem; + top: 2rem; + text-align: center; + color: var(--text-tertiary, #999); + border: 2px dashed var(--border-color, #dee2e6); + border-radius: 8px; + padding: 2rem 3rem; +} + +.canvasPlaceholder p { + margin: 0.25rem 0; + font-size: 0.875rem; +} + +/* Canvas Nodes */ +.canvasNode { + position: absolute; + border-radius: 8px; + border: 2px solid; + cursor: grab; + overflow: visible; +} + +.canvasNode:active { + cursor: grabbing; +} + +.canvasNodeSelected { + box-shadow: 0 0 0 2px var(--primary-color, #007bff); +} + +.canvasNodeContent { + display: flex; + align-items: flex-start; + gap: 0.5rem; + padding: 0.4rem 0.6rem; + height: 100%; + box-sizing: border-box; +} + +.canvasNodeIcon { + flex-shrink: 0; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + font-size: 0.9rem; +} + +.canvasNodeText { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 0.15rem; +} + +.canvasNodeTitle { + font-size: 0.875rem; + font-weight: 500; + color: var(--text-primary, #333); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + cursor: text; +} + +.canvasNodeTitle:hover { + text-decoration: underline; +} + +.canvasNodeComment { + font-size: 0.7rem; + color: var(--text-tertiary, #999); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + cursor: text; + min-height: 1em; +} + +.canvasNodeComment:hover { + text-decoration: underline; +} + +.canvasNodeInput { + width: 100%; + padding: 0.15rem 0.25rem; + font-size: 0.875rem; + border: 1px solid var(--primary-color, #007bff); + border-radius: 4px; + outline: none; +} + +/* Connection Handles */ +.handle { + position: absolute; + border-radius: 50%; + background: var(--bg-primary, #fff); + border: 2px solid var(--border-color, #666); + cursor: crosshair; + z-index: 2; +} + +.handle:hover, +.handleConnectable { + border-color: var(--primary-color, #007bff); + background: var(--primary-color, #007bff); +} + +.handleInput { + cursor: copy; +} + +/* Node Config Panel */ +.nodeConfigPanel { + padding: 1rem; + background: var(--bg-primary, #fff); + border-left: 1px solid var(--border-color, #e0e0e0); + width: 280px; + flex-shrink: 0; + overflow-y: auto; + min-width: 0; +} + +.nodeConfigPanel h4 { + margin: 0 0 0.75rem 0; + font-size: 0.9rem; +} + +.nodeConfigPanel label { + display: block; + font-size: 0.75rem; + color: var(--text-secondary, #666); + margin-top: 0.5rem; + margin-bottom: 0.25rem; +} + +.nodeConfigPanel input[type='text'], +.nodeConfigPanel input[type='number'], +.nodeConfigPanel select, +.nodeConfigPanel textarea { + width: 100%; + padding: 0.4rem; + font-size: 0.875rem; + border: 1px solid var(--border-color, #e0e0e0); + border-radius: 4px; +} + +.nodeConfigPanel textarea { + min-height: 60px; +} + +.nodeConfigPanel button { + margin-top: 0.5rem; + padding: 0.4rem 0.75rem; + font-size: 0.8rem; + background: var(--primary-color, #007bff); + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +/* Form fields editor (input.form) */ +.formFieldsList { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.formFieldRow { + display: flex; + flex-direction: column; + gap: 0.35rem; + padding: 0.5rem; + background: var(--bg-secondary, #f8f9fa); + border-radius: 6px; + border: 1px solid var(--border-color, #e0e0e0); +} + +.formFieldRowHeader { + display: flex; + align-items: flex-start; + gap: 0.35rem; +} + +.formFieldDragHandle { + flex-shrink: 0; + padding: 0.25rem; + cursor: grab; + color: var(--text-tertiary, #999); + align-self: stretch; + display: flex; + align-items: center; +} + +.formFieldDragHandle:active { + cursor: grabbing; +} + +.formFieldDragHandle:hover { + color: var(--text-secondary, #666); +} + +.formFieldInputs { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 0.35rem; +} + +.formFieldRowFooter { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; +} + +.formFieldRequiredLabel { + display: inline-flex; + align-items: center; + gap: 0.35rem; + font-size: 0.75rem; + color: var(--text-secondary, #666); + cursor: pointer; +} + +.formFieldRemoveButton { + margin-left: auto; + padding: 0.25rem 0.4rem; + border: none; + background: transparent; + color: var(--text-tertiary, #999); + cursor: pointer; + border-radius: 4px; + display: flex; + align-items: center; +} + +.formFieldRemoveButton:hover { + color: var(--danger-color, #dc3545); + background: rgba(220, 53, 69, 0.1); +} diff --git a/src/components/Automation2FlowEditor/Automation2FlowEditor.tsx b/src/components/Automation2FlowEditor/Automation2FlowEditor.tsx new file mode 100644 index 0000000..eef7a76 --- /dev/null +++ b/src/components/Automation2FlowEditor/Automation2FlowEditor.tsx @@ -0,0 +1,328 @@ +/** + * Automation2FlowEditor + * + * n8n-style flow builder with backend-driven node list. + * Composes: NodeSidebar, FlowCanvas, NodeConfigPanel, CanvasHeader. + */ + +import React, { useState, useEffect, useCallback } from 'react'; +import { FaSpinner } from 'react-icons/fa'; +import { useApiRequest } from '../../hooks/useApi'; +import { + fetchNodeTypes, + executeGraph, + fetchWorkflows, + fetchWorkflow, + createWorkflow, + updateWorkflow, + type NodeType, + type NodeTypeCategory, + type Automation2Graph, + type Automation2Workflow, + type ExecuteGraphResponse, +} from '../../api/automation2Api'; +import { FlowCanvas, type CanvasNode, type CanvasConnection } from './FlowCanvas'; +import { NodeConfigPanel } from './NodeConfigPanel'; +import { NodeSidebar } from './NodeSidebar'; +import { CanvasHeader } from './CanvasHeader'; +import { getCategoryIcon } from './utils'; +import { fromApiGraph, toApiGraph } from './graphUtils'; +import styles from './Automation2FlowEditor.module.css'; + +const LOG = '[Automation2]'; + +interface Automation2FlowEditorProps { + instanceId: string; + language?: string; + /** When set, load this workflow on mount (e.g. from workflows list edit) */ + initialWorkflowId?: string | null; +} + +export const Automation2FlowEditor: React.FC = ({ + instanceId, + language = 'de', + initialWorkflowId, +}) => { + const { request } = useApiRequest(); + const [nodeTypes, setNodeTypes] = useState([]); + const [categories, setCategories] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [filter, setFilter] = useState(''); + const [expandedCategories, setExpandedCategories] = useState>( + new Set(['trigger', 'input', 'flow', 'data', 'ai', 'email', 'sharepoint']) + ); + const [canvasNodes, setCanvasNodes] = useState([]); + const [canvasConnections, setCanvasConnections] = useState([]); + const [executing, setExecuting] = useState(false); + const [executeResult, setExecuteResult] = useState(null); + const [workflows, setWorkflows] = useState([]); + const [currentWorkflowId, setCurrentWorkflowId] = useState(null); + const [selectedNode, setSelectedNode] = useState(null); + const [saving, setSaving] = useState(false); + + const handleFromApiGraph = useCallback( + (graph: Automation2Graph) => { + const { nodes, connections } = fromApiGraph(graph, nodeTypes); + setCanvasNodes(nodes); + setCanvasConnections(connections); + }, + [nodeTypes] + ); + + const handleExecute = useCallback(async () => { + const graph = toApiGraph(canvasNodes, canvasConnections); + if (graph.nodes.length === 0) { + setExecuteResult({ success: false, error: 'Keine Nodes im Workflow.' }); + return; + } + setExecuting(true); + setExecuteResult(null); + try { + const result = await executeGraph( + request, + instanceId, + graph, + currentWorkflowId ?? undefined + ); + setExecuteResult(result); + } catch (err: unknown) { + setExecuteResult({ success: false, error: err instanceof Error ? err.message : String(err) }); + } finally { + setExecuting(false); + } + }, [request, instanceId, canvasNodes, canvasConnections, currentWorkflowId]); + + const loadWorkflows = useCallback(async () => { + if (!instanceId) return; + try { + const items = await fetchWorkflows(request, instanceId); + setWorkflows(items); + } catch (e) { + console.error(`${LOG} loadWorkflows failed`, e); + } + }, [instanceId, request]); + + const handleSave = useCallback(async () => { + const graph = toApiGraph(canvasNodes, canvasConnections); + if (graph.nodes.length === 0) { + setExecuteResult({ success: false, error: 'Keine Nodes zum Speichern.' }); + return; + } + setSaving(true); + try { + if (currentWorkflowId) { + await updateWorkflow(request, instanceId, currentWorkflowId, { graph }); + setExecuteResult({ success: true } as ExecuteGraphResponse); + } else { + const label = prompt('Workflow-Name:', 'Neuer Workflow') || 'Neuer Workflow'; + const created = await createWorkflow(request, instanceId, { label, graph }); + setCurrentWorkflowId(created.id); + setWorkflows((prev) => [...prev, created]); + setExecuteResult({ success: true } as ExecuteGraphResponse); + } + } catch (err: unknown) { + setExecuteResult({ success: false, error: err instanceof Error ? err.message : String(err) }); + } finally { + setSaving(false); + } + }, [request, instanceId, canvasNodes, canvasConnections, currentWorkflowId]); + + const handleLoad = useCallback( + async (workflowId: string) => { + try { + const wf = await fetchWorkflow(request, instanceId, workflowId); + if (wf.graph) handleFromApiGraph(wf.graph); + } catch (err: unknown) { + setExecuteResult({ + success: false, + error: err instanceof Error ? err.message : String(err), + }); + } + }, + [request, instanceId, handleFromApiGraph] + ); + + const handleWorkflowSelect = useCallback( + (workflowId: string | null) => { + setCurrentWorkflowId(workflowId); + if (workflowId) handleLoad(workflowId); + else { + setCanvasNodes([]); + setCanvasConnections([]); + setExecuteResult(null); + } + }, + [handleLoad] + ); + + const handleNew = useCallback(() => { + setCanvasNodes([]); + setCanvasConnections([]); + setCurrentWorkflowId(null); + setExecuteResult(null); + }, []); + + const handleNodeParametersChange = useCallback((nodeId: string, parameters: Record) => { + setCanvasNodes((prev) => prev.map((n) => (n.id === nodeId ? { ...n, parameters } : n))); + }, []); + + const loadNodeTypes = useCallback(async () => { + if (!instanceId) return; + setLoading(true); + setError(null); + try { + const data = await fetchNodeTypes(request, instanceId, language); + setNodeTypes(data.nodeTypes); + setCategories(data.categories); + } catch (err: unknown) { + setError(err instanceof Error ? err.message : String(err)); + setNodeTypes([]); + setCategories([]); + } finally { + setLoading(false); + } + }, [instanceId, language, request]); + + useEffect(() => { + loadNodeTypes(); + }, [loadNodeTypes]); + + useEffect(() => { + loadWorkflows(); + }, [loadWorkflows]); + + useEffect(() => { + if (initialWorkflowId && workflows.length > 0 && !currentWorkflowId) { + handleWorkflowSelect(initialWorkflowId); + } + }, [initialWorkflowId, workflows, currentWorkflowId, handleWorkflowSelect]); + + const toggleCategory = useCallback((id: string) => { + setExpandedCategories((prev) => { + const next = new Set(prev); + if (next.has(id)) next.delete(id); + else next.add(id); + return next; + }); + }, []); + + const handleDropNodeType = useCallback( + (nodeTypeId: string, x: number, y: number) => { + const nt = nodeTypes.find((n) => n.id === nodeTypeId); + if (!nt) return; + const id = `n_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`; + const label = + typeof nt.label === 'string' ? nt.label : (nt.label as Record)?.[language] ?? nt.id; + setCanvasNodes((prev) => [ + ...prev, + { + id, + type: nodeTypeId, + x, + y, + label, + title: label, + color: nt.meta?.color, + inputs: nt.inputs ?? 1, + outputs: nt.outputs ?? 1, + parameters: {}, + }, + ]); + }, + [nodeTypes, language] + ); + + const renderSidebar = () => { + if (loading) { + return ( +
+
+

Nodes

+
+
+ +

Lade Node-Typen...

+
+
+ ); + } + if (error) { + return ( +
+
+

Nodes

+
+
+

{error}

+ +
+
+ ); + } + return ( + + ); + }; + + return ( +
+ {renderSidebar()} + +
+ 0} + executeResult={executeResult} + /> +
+
+ node.title ?? node.label ?? node.type} + getCategoryIcon={getCategoryIcon} + onSelectionChange={setSelectedNode} + /> +
+ {selectedNode && + ['input.', 'ai.', 'email.', 'sharepoint.'].some((p) => + selectedNode.type.startsWith(p) + ) && ( + nt.id === selectedNode.type)} + language={language} + onParametersChange={handleNodeParametersChange} + instanceId={instanceId} + request={request} + /> + )} +
+
+
+ ); +}; + +export default Automation2FlowEditor; diff --git a/src/components/Automation2FlowEditor/CanvasHeader.tsx b/src/components/Automation2FlowEditor/CanvasHeader.tsx new file mode 100644 index 0000000..cc26022 --- /dev/null +++ b/src/components/Automation2FlowEditor/CanvasHeader.tsx @@ -0,0 +1,117 @@ +/** + * CanvasHeader - Workflow controls (Neu, Speichern, laden, Ausführen) and execute result. + */ + +import React from 'react'; +import { FaPlay, FaSpinner } from 'react-icons/fa'; +import type { Automation2Workflow, ExecuteGraphResponse } from '../../api/automation2Api'; +import styles from './Automation2FlowEditor.module.css'; + +interface CanvasHeaderProps { + workflows: Automation2Workflow[]; + currentWorkflowId: string | null; + onWorkflowSelect: (workflowId: string | null) => void; + onNew: () => void; + onSave: () => void; + onExecute: () => void; + saving: boolean; + executing: boolean; + hasNodes: boolean; + executeResult: ExecuteGraphResponse | null; +} + +export const CanvasHeader: React.FC = ({ + workflows, + currentWorkflowId, + onWorkflowSelect, + onNew, + onSave, + onExecute, + saving, + executing, + hasNodes, + executeResult, +}) => ( +
+
+

+ Workflow-Editor +

+ + + + +
+ {executeResult && ( +
+ {executeResult.success ? ( + <>✓ Ausführung abgeschlossen. + ) : (executeResult as { paused?: boolean }).paused ? ( + <> + ⏸ Workflow pausiert. Öffne Workflows & Tasks in der Sidebar, um den + Task zu bearbeiten. + + ) : ( + <>✗ {executeResult.error ?? 'Unbekannter Fehler'} + )} +
+ )} +
+); diff --git a/src/components/Automation2FlowEditor/FlowCanvas.tsx b/src/components/Automation2FlowEditor/FlowCanvas.tsx new file mode 100644 index 0000000..fb13034 --- /dev/null +++ b/src/components/Automation2FlowEditor/FlowCanvas.tsx @@ -0,0 +1,579 @@ +/** + * FlowCanvas - Workflow graph canvas with nodes and connection lines. + * Nodes have 4 connection handles (one per side), drag nodes to add, connect with arrows. + */ + +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import type { NodeType } from '../../api/automation2Api'; +import styles from './Automation2FlowEditor.module.css'; + +export interface CanvasNode { + id: string; + type: string; + x: number; + y: number; + label?: string; + title?: string; + comment?: string; + color?: string; + inputs: number; + outputs: number; + parameters?: Record; +} + +export interface CanvasConnection { + id: string; + sourceId: string; + sourceHandle: number; + targetId: string; + targetHandle: number; +} + +const NODE_WIDTH = 200; +const NODE_HEIGHT = 72; +const HANDLE_SIZE = 12; +const HANDLE_OFFSET = HANDLE_SIZE / 2; + +interface FlowCanvasProps { + nodes: CanvasNode[]; + connections: CanvasConnection[]; + nodeTypes: NodeType[]; + onNodesChange: (nodes: CanvasNode[]) => void; + onConnectionsChange: (connections: CanvasConnection[]) => void; + onDropNodeType: (nodeTypeId: string, x: number, y: number) => void; + getLabel: (node: CanvasNode) => string; + getCategoryIcon: (category: string) => React.ReactNode; + onSelectionChange?: (node: CanvasNode | null) => void; +} + +export const FlowCanvas: React.FC = ({ + nodes, + connections, + nodeTypes, + onNodesChange, + onConnectionsChange, + onDropNodeType, + getLabel, + getCategoryIcon, + onSelectionChange, +}) => { + const containerRef = useRef(null); + const [selectedNodeId, setSelectedNodeId] = useState(null); + const [editingNodeId, setEditingNodeId] = useState(null); + const [editingField, setEditingField] = useState<'title' | 'comment' | null>(null); + const [connectingFrom, setConnectingFrom] = useState<{ + nodeId: string; + handleIndex: number; + x: number; + y: number; + } | null>(null); + const [dragPos, setDragPos] = useState<{ x: number; y: number } | null>(null); + const [draggingNodeId, setDraggingNodeId] = useState(null); + const [dragOffset, setDragOffset] = useState({ + startClientX: 0, + startClientY: 0, + startNodeX: 0, + startNodeY: 0, + }); + const [panOffset, setPanOffset] = useState({ x: 0, y: 0 }); + const [zoom, setZoom] = useState(1); + const [panning, setPanning] = useState<{ + startX: number; + startY: number; + startPanX: number; + startPanY: number; + } | null>(null); + + const nodeTypeMap = useMemo(() => { + const m: Record = {}; + nodeTypes.forEach((nt) => { + m[nt.id] = nt; + }); + return m; + }, [nodeTypes]); + + useEffect(() => { + if (onSelectionChange) { + const node = selectedNodeId ? nodes.find((n) => n.id === selectedNodeId) ?? null : null; + onSelectionChange(node); + } + }, [selectedNodeId, nodes, onSelectionChange]); + + const getHandlePosition = useCallback( + (node: CanvasNode, handleIndex: number): { x: number; y: number; side: string } => { + const isOutput = handleIndex >= node.inputs; + const ioIndex = isOutput ? handleIndex - node.inputs : handleIndex; + const ioCount = isOutput ? node.outputs : node.inputs; + + const w = NODE_WIDTH; + const h = NODE_HEIGHT; + const centerY = node.y + h / 2; + + if (isOutput) { + if (ioCount === 1) return { x: node.x + w, y: centerY, side: 'right' }; + if (ioCount === 2) { + return ioIndex === 0 + ? { x: node.x + w, y: node.y + h / 3, side: 'right' } + : { x: node.x + w, y: node.y + (2 * h) / 3, side: 'right' }; + } + const step = h / (ioCount + 1); + return { x: node.x + w, y: node.y + step * (ioIndex + 1), side: 'right' }; + } else { + if (ioCount === 1) return { x: node.x, y: centerY, side: 'left' }; + if (ioCount === 2) { + return ioIndex === 0 + ? { x: node.x, y: node.y + h / 3, side: 'left' } + : { x: node.x, y: node.y + (2 * h) / 3, side: 'left' }; + } + const step = h / (ioCount + 1); + return { x: node.x, y: node.y + step * (ioIndex + 1), side: 'left' }; + } + }, + [] + ); + + const getUsedTargetHandles = useMemo(() => { + const used = new Set(); + connections.forEach((c) => used.add(`${c.targetId}-${c.targetHandle}`)); + return used; + }, [connections]); + + const handleDrop = useCallback( + (e: React.DragEvent) => { + e.preventDefault(); + const raw = e.dataTransfer.getData('application/json'); + if (!raw || !containerRef.current) return; + try { + const { type } = JSON.parse(raw); + const el = containerRef.current; + const rect = el.getBoundingClientRect(); + const x = (e.clientX - rect.left - panOffset.x) / zoom - NODE_WIDTH / 2; + const y = (e.clientY - rect.top - panOffset.y) / zoom - NODE_HEIGHT / 2; + onDropNodeType(type, Math.max(0, x), Math.max(0, y)); + } catch (_) {} + }, + [onDropNodeType, panOffset, zoom] + ); + + const handleHandleMouseDown = useCallback( + (e: React.MouseEvent, nodeId: string, handleIndex: number, isOutput: boolean) => { + e.stopPropagation(); + if (!isOutput) return; + const node = nodes.find((n) => n.id === nodeId); + if (!node) return; + const pos = getHandlePosition(node, handleIndex); + setConnectingFrom({ nodeId, handleIndex, x: pos.x, y: pos.y }); + setDragPos({ x: e.clientX, y: e.clientY }); + }, + [nodes, getHandlePosition] + ); + + const handleHandleMouseUp = useCallback( + (e: React.MouseEvent, targetNodeId: string, targetHandleIndex: number) => { + e.stopPropagation(); + if (!connectingFrom || connectingFrom.nodeId === targetNodeId) { + setConnectingFrom(null); + setDragPos(null); + return; + } + const key = `${targetNodeId}-${targetHandleIndex}`; + if (getUsedTargetHandles.has(key)) { + setConnectingFrom(null); + setDragPos(null); + return; + } + const targetNode = nodes.find((n) => n.id === targetNodeId); + if (!targetNode) return; + if (targetHandleIndex >= targetNode.inputs) return; + const newConn: CanvasConnection = { + id: `c_${Date.now()}`, + sourceId: connectingFrom.nodeId, + sourceHandle: connectingFrom.handleIndex, + targetId: targetNodeId, + targetHandle: targetHandleIndex, + }; + onConnectionsChange([...connections, newConn]); + setConnectingFrom(null); + setDragPos(null); + }, + [connectingFrom, connections, nodes, getUsedTargetHandles, onConnectionsChange] + ); + + React.useEffect(() => { + if (!connectingFrom || !dragPos) return; + const onMove = (e: MouseEvent) => setDragPos({ x: e.clientX, y: e.clientY }); + const onUp = () => { + setConnectingFrom(null); + setDragPos(null); + }; + window.addEventListener('mousemove', onMove); + window.addEventListener('mouseup', onUp); + return () => { + window.removeEventListener('mousemove', onMove); + window.removeEventListener('mouseup', onUp); + }; + }, [connectingFrom, dragPos]); + + const handleNodeMouseDown = useCallback((e: React.MouseEvent, nodeId: string) => { + const node = nodes.find((n) => n.id === nodeId); + if (!node) return; + setDraggingNodeId(nodeId); + setDragOffset({ + startClientX: e.clientX, + startClientY: e.clientY, + startNodeX: node.x, + startNodeY: node.y, + }); + }, [nodes]); + + React.useEffect(() => { + if (!draggingNodeId) return; + const onMove = (e: MouseEvent) => { + const dx = (e.clientX - dragOffset.startClientX) / zoom; + const dy = (e.clientY - dragOffset.startClientY) / zoom; + onNodesChange( + nodes.map((n) => + n.id === draggingNodeId + ? { ...n, x: dragOffset.startNodeX + dx, y: dragOffset.startNodeY + dy } + : n + ) + ); + }; + const onUp = () => setDraggingNodeId(null); + window.addEventListener('mousemove', onMove); + window.addEventListener('mouseup', onUp); + return () => { + window.removeEventListener('mousemove', onMove); + window.removeEventListener('mouseup', onUp); + }; + }, [draggingNodeId, dragOffset, nodes, onNodesChange, zoom]); + + const handleCanvasMouseDown = useCallback((e: React.MouseEvent) => { + const hitNode = (e.target as HTMLElement).closest(`.${styles.canvasNode}`); + if (hitNode || connectingFrom) return; + setPanning({ + startX: e.clientX, + startY: e.clientY, + startPanX: panOffset.x, + startPanY: panOffset.y, + }); + }, [connectingFrom, panOffset]); + + const handleWheel = useCallback((e: WheelEvent) => { + e.preventDefault(); + const delta = e.deltaY > 0 ? -0.1 : 0.1; + setZoom((z) => Math.min(2, Math.max(0.25, z + delta))); + }, []); + + React.useEffect(() => { + const el = containerRef.current; + if (!el) return; + el.addEventListener('wheel', handleWheel, { passive: false }); + return () => el.removeEventListener('wheel', handleWheel); + }, [handleWheel]); + + React.useEffect(() => { + if (!panning) return; + const onMove = (e: MouseEvent) => { + setPanOffset({ + x: panning.startPanX + (e.clientX - panning.startX), + y: panning.startPanY + (e.clientY - panning.startY), + }); + }; + const onUp = () => setPanning(null); + window.addEventListener('mousemove', onMove); + window.addEventListener('mouseup', onUp); + return () => { + window.removeEventListener('mousemove', onMove); + window.removeEventListener('mouseup', onUp); + }; + }, [panning]); + + const [containerBounds, setContainerBounds] = useState({ left: 0, top: 0 }); + React.useEffect(() => { + const el = containerRef.current; + if (!el) return; + const update = () => { + const r = el.getBoundingClientRect(); + setContainerBounds({ left: r.left, top: r.top }); + }; + update(); + window.addEventListener('resize', update); + return () => window.removeEventListener('resize', update); + }, []); + + const CANVAS_SIZE = 8000; + const svgBounds = useMemo(() => { + if (nodes.length === 0) return { width: CANVAS_SIZE, height: CANVAS_SIZE }; + let maxX = 0, maxY = 0; + nodes.forEach((n) => { + maxX = Math.max(maxX, n.x + NODE_WIDTH + 200); + maxY = Math.max(maxY, n.y + NODE_HEIGHT + 200); + }); + return { width: Math.max(maxX, CANVAS_SIZE), height: Math.max(maxY, CANVAS_SIZE) }; + }, [nodes]); + + const screenToSvg = useCallback( + (clientX: number, clientY: number) => ({ + x: (clientX - containerBounds.left - panOffset.x) / zoom, + y: (clientY - containerBounds.top - panOffset.y) / zoom, + }), + [containerBounds, panOffset, zoom] + ); + + const handleDeleteNode = useCallback(() => { + if (!selectedNodeId) return; + onNodesChange(nodes.filter((n) => n.id !== selectedNodeId)); + onConnectionsChange( + connections.filter((c) => c.sourceId !== selectedNodeId && c.targetId !== selectedNodeId) + ); + setSelectedNodeId(null); + setEditingNodeId(null); + setEditingField(null); + }, [selectedNodeId, nodes, connections, onNodesChange, onConnectionsChange]); + + React.useEffect(() => { + const onKeyDown = (e: KeyboardEvent) => { + if ((e.key === 'Delete' || e.key === 'Backspace') && selectedNodeId) { + const target = e.target as HTMLElement; + if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return; + e.preventDefault(); + handleDeleteNode(); + } + }; + window.addEventListener('keydown', onKeyDown); + return () => window.removeEventListener('keydown', onKeyDown); + }, [handleDeleteNode, selectedNodeId]); + + const handleNodeUpdate = useCallback( + (nodeId: string, updates: Partial>) => { + onNodesChange( + nodes.map((n) => (n.id === nodeId ? { ...n, ...updates } : n)) + ); + }, + [nodes, onNodesChange] + ); + + return ( +
e.preventDefault()} + onDrop={handleDrop} + onMouseDown={handleCanvasMouseDown} + tabIndex={0} + onClick={() => setSelectedNodeId(null)} + > +
+ + + + + + + {connections.map((c) => { + const srcNode = nodes.find((n) => n.id === c.sourceId); + const tgtNode = nodes.find((n) => n.id === c.targetId); + if (!srcNode || !tgtNode) return null; + const src = getHandlePosition(srcNode, c.sourceHandle); + const tgt = getHandlePosition(tgtNode, c.targetHandle); + const dx = tgt.x - src.x; + const path = `M ${src.x} ${src.y} C ${src.x + Math.abs(dx) / 2} ${src.y}, ${tgt.x - Math.abs(dx) / 2} ${tgt.y}, ${tgt.x} ${tgt.y}`; + return ( + + ); + })} + {connectingFrom && dragPos && (() => { + const end = screenToSvg(dragPos.x, dragPos.y); + return ( + + ); + })()} + + {nodes.map((node) => { + const nt = nodeTypeMap[node.type]; + const category = nt?.category ?? 'io'; + const color = node.color ?? nt?.meta?.color ?? '#00BCD4'; + const handles: Array<{ index: number; isOutput: boolean }> = []; + for (let i = 0; i < node.inputs; i++) handles.push({ index: i, isOutput: false }); + for (let i = 0; i < node.outputs; i++) handles.push({ index: node.inputs + i, isOutput: true }); + + const isSelected = selectedNodeId === node.id; + const isEditingTitle = editingNodeId === node.id && editingField === 'title'; + const isEditingComment = editingNodeId === node.id && editingField === 'comment'; + const displayTitle = node.title ?? node.label ?? getLabel(node); + const displayComment = node.comment ?? ''; + + return ( +
e.stopPropagation()} + onMouseDown={(e) => { + e.stopPropagation(); + setSelectedNodeId(node.id); + handleNodeMouseDown(e, node.id); + }} + > + {handles.map(({ index, isOutput }) => { + const pos = getHandlePosition(node, index); + const used = !isOutput && getUsedTargetHandles.has(`${node.id}-${index}`); + const canConnect = isOutput || (!used && connectingFrom); + return ( +
handleHandleMouseDown(e, node.id, index, isOutput)} + onMouseUp={(e) => !isOutput && handleHandleMouseUp(e, node.id, index)} + /> + ); + })} +
+
+ {getCategoryIcon(category)} +
+
+ {isEditingTitle ? ( + e.stopPropagation()} + onKeyDown={(e) => { + if (e.key === 'Enter') { + handleNodeUpdate(node.id, { title: (e.target as HTMLInputElement).value }); + setEditingNodeId(null); + setEditingField(null); + } + if (e.key === 'Escape') { + setEditingNodeId(null); + setEditingField(null); + } + }} + onBlur={(e) => { + handleNodeUpdate(node.id, { title: e.target.value }); + setEditingNodeId(null); + setEditingField(null); + }} + onChange={(e) => handleNodeUpdate(node.id, { title: e.target.value })} + /> + ) : ( + { + e.stopPropagation(); + setEditingNodeId(node.id); + setEditingField('title'); + }} + > + {displayTitle} + + )} + {isEditingComment ? ( + e.stopPropagation()} + onKeyDown={(e) => { + if (e.key === 'Enter') { + handleNodeUpdate(node.id, { comment: (e.target as HTMLInputElement).value }); + setEditingNodeId(null); + setEditingField(null); + } + if (e.key === 'Escape') { + setEditingNodeId(null); + setEditingField(null); + } + }} + onBlur={(e) => { + handleNodeUpdate(node.id, { comment: e.target.value }); + setEditingNodeId(null); + setEditingField(null); + }} + onChange={(e) => handleNodeUpdate(node.id, { comment: e.target.value })} + /> + ) : ( + { + e.stopPropagation(); + setEditingNodeId(node.id); + setEditingField('comment'); + }} + > + {displayComment || 'Doppelklick für Kommentar'} + + )} +
+
+
+ ); + })} + {nodes.length === 0 && ( +
+

Nodes aus der Liste links hierher ziehen.

+
+ )} +
+
+ ); +}; diff --git a/src/components/Automation2FlowEditor/NodeConfigPanel.tsx b/src/components/Automation2FlowEditor/NodeConfigPanel.tsx new file mode 100644 index 0000000..36d7d1c --- /dev/null +++ b/src/components/Automation2FlowEditor/NodeConfigPanel.tsx @@ -0,0 +1,70 @@ +/** + * NodeConfigPanel - Configures parameters for input, ai, email, sharepoint nodes. + * Delegates to config components from configs/. + */ + +import React, { useState, useEffect } from 'react'; +import type { CanvasNode } from './FlowCanvas'; +import type { NodeType } from '../../api/automation2Api'; +import type { ApiRequestFunction } from '../../api/automation2Api'; +import { getLabel } from './utils'; +import { NODE_CONFIG_REGISTRY } from './configs'; +import styles from './Automation2FlowEditor.module.css'; + +interface NodeConfigPanelProps { + node: CanvasNode | null; + nodeType: NodeType | undefined; + language: string; + onParametersChange: (nodeId: string, parameters: Record) => void; + instanceId?: string; + request?: ApiRequestFunction; +} + +const CONFIGURABLE_PREFIXES = ['input.', 'ai.', 'email.', 'sharepoint.']; + +export const NodeConfigPanel: React.FC = ({ + node, + nodeType, + language, + onParametersChange, + instanceId, + request, +}) => { + const [params, setParams] = useState>({}); + + useEffect(() => { + setParams(node?.parameters ?? {}); + }, [node?.id, node?.parameters]); + + const updateParam = (key: string, value: unknown) => { + const next = { ...params, [key]: value }; + setParams(next); + if (node) onParametersChange(node.id, next); + }; + + const isConfigurable = node && CONFIGURABLE_PREFIXES.some((p) => node.type.startsWith(p)); + if (!node || !isConfigurable) return null; + + const ConfigRenderer = NODE_CONFIG_REGISTRY[node.type]; + if (!ConfigRenderer) { + return ( +
+

{getLabel(nodeType?.label, language) || node.type}

+

No configuration for {node.type}

+
+ ); + } + + return ( +
+

{getLabel(nodeType?.label, language) || node.type}

+ +
+ ); +}; diff --git a/src/components/Automation2FlowEditor/NodeListItem.tsx b/src/components/Automation2FlowEditor/NodeListItem.tsx new file mode 100644 index 0000000..9a2b996 --- /dev/null +++ b/src/components/Automation2FlowEditor/NodeListItem.tsx @@ -0,0 +1,49 @@ +/** + * NodeListItem - Draggable node type item for the sidebar. + * Used in both regular categories and I/O sub-groups. + */ + +import React from 'react'; +import type { NodeType } from '../../api/automation2Api'; +import { getCategoryIcon } from './utils'; +import type { GetLabelFn } from './utils'; +import styles from './Automation2FlowEditor.module.css'; + +interface NodeListItemProps { + node: NodeType; + language: string; + getLabel: GetLabelFn; + getCategoryIcon?: (categoryId: string) => React.ReactNode; +} + +export const NodeListItem: React.FC = ({ + node, + language, + getLabel, + getCategoryIcon: getIcon = getCategoryIcon, +}) => ( +
{ + e.dataTransfer.setData('application/json', JSON.stringify({ type: node.id })); + e.dataTransfer.effectAllowed = 'copy'; + }} + > +
+ {getIcon(node.category)} +
+
+ {getLabel(node.label, language)} + {getLabel(node.description, language)} +
+
+); diff --git a/src/components/Automation2FlowEditor/NodeSidebar.tsx b/src/components/Automation2FlowEditor/NodeSidebar.tsx new file mode 100644 index 0000000..14d8707 --- /dev/null +++ b/src/components/Automation2FlowEditor/NodeSidebar.tsx @@ -0,0 +1,121 @@ +/** + * NodeSidebar - Sidebar with searchable, collapsible node list. + * Groups node types by category (trigger, input, flow, data, ai, email, sharepoint). + */ + +import React, { useMemo } from 'react'; +import { FaChevronDown, FaChevronRight } from 'react-icons/fa'; +import type { NodeType, NodeTypeCategory } from '../../api/automation2Api'; +import { CATEGORY_ORDER, HIDDEN_NODE_IDS } from './constants'; +import { getLabel } from './utils'; +import { NodeListItem } from './NodeListItem'; +import styles from './Automation2FlowEditor.module.css'; + +interface NodeSidebarProps { + nodeTypes: NodeType[]; + categories: NodeTypeCategory[]; + filter: string; + onFilterChange: (value: string) => void; + language: string; + expandedCategories: Set; + onToggleCategory: (id: string) => void; +} + +export const NodeSidebar: React.FC = ({ + nodeTypes, + categories, + filter, + onFilterChange, + language, + expandedCategories, + onToggleCategory, +}) => { + const filteredNodeTypes = useMemo(() => { + const visible = nodeTypes.filter((n) => !HIDDEN_NODE_IDS.has(n.id)); + if (!filter.trim()) return visible; + const q = filter.toLowerCase(); + return visible.filter( + (n) => + n.id.toLowerCase().includes(q) || + getLabel(n.label, language).toLowerCase().includes(q) || + getLabel(n.description, language).toLowerCase().includes(q) + ); + }, [nodeTypes, filter, language]); + + const groupedByCategory = useMemo(() => { + const map: Record = {}; + filteredNodeTypes.forEach((n) => { + const cat = n.category || 'other'; + if (!map[cat]) map[cat] = []; + map[cat].push(n); + }); + return map; + }, [filteredNodeTypes]); + + const orderedCategories = useMemo(() => { + const seen = new Set(); + const result: string[] = []; + CATEGORY_ORDER.forEach((id) => { + if (groupedByCategory[id]) { + result.push(id); + seen.add(id); + } + }); + Object.keys(groupedByCategory).forEach((id) => { + if (!seen.has(id)) result.push(id); + }); + return result; + }, [groupedByCategory]); + + const getLabelFn = (t: string | Record | undefined, lang?: string) => + getLabel(t, lang ?? language); + + return ( +
+
+

Nodes

+ onFilterChange(e.target.value)} + /> +
+
+ {orderedCategories.map((catId) => { + const isExpanded = expandedCategories.has(catId); + const catLabel = categories.find((c) => c.id === catId); + const label = getLabel(catLabel?.label, language) || catId; + const items = groupedByCategory[catId] || []; + return ( +
+ + {isExpanded && + items.map((node) => ( + + ))} +
+ ); + })} +
+
+ ); +}; diff --git a/src/components/Automation2FlowEditor/categoryIcons.tsx b/src/components/Automation2FlowEditor/categoryIcons.tsx new file mode 100644 index 0000000..53c19e4 --- /dev/null +++ b/src/components/Automation2FlowEditor/categoryIcons.tsx @@ -0,0 +1,19 @@ +/** + * Category icons for node types + */ + +import React from 'react'; +import { FaPlay, FaCodeBranch, FaDatabase, FaPlug, FaUser, FaRobot, FaEnvelope, FaCloud } from 'react-icons/fa'; + +export const CATEGORY_ICONS: Record = { + trigger: , + input: , + flow: , + data: , + ai: , + email: , + sharepoint: , + human: , +}; + +export const DEFAULT_CATEGORY_ICON = ; diff --git a/src/components/Automation2FlowEditor/configs/AiNodeConfig.tsx b/src/components/Automation2FlowEditor/configs/AiNodeConfig.tsx new file mode 100644 index 0000000..cc7b76c --- /dev/null +++ b/src/components/Automation2FlowEditor/configs/AiNodeConfig.tsx @@ -0,0 +1,68 @@ +/** + * AI node config - prompt, query, document options per node type. + */ + +import React from 'react'; +import type { NodeConfigRendererProps } from './types'; + +const AI_FIELD_CONFIG: Record = { + 'ai.prompt': [ + { label: 'Prompt', key: 'prompt', type: 'textarea' }, + { label: 'Output format', key: 'resultType', type: 'select', options: ['txt', 'json', 'md', 'html', 'csv'] }, + ], + 'ai.webResearch': [{ label: 'Query', key: 'query', type: 'textarea' }], + 'ai.summarizeDocument': [ + { label: 'Summary length', key: 'summaryLength', type: 'select', options: ['short', 'medium', 'long'] }, + ], + 'ai.translateDocument': [{ label: 'Target language', key: 'targetLanguage', type: 'input' }], + 'ai.convertDocument': [ + { label: 'Target format', key: 'targetFormat', type: 'select', options: ['pdf', 'docx', 'txt', 'md'] }, + ], + 'ai.generateDocument': [ + { label: 'Prompt', key: 'prompt', type: 'textarea' }, + { label: 'Format', key: 'format', type: 'select', options: ['docx', 'txt', 'md'] }, + ], + 'ai.generateCode': [ + { label: 'Prompt', key: 'prompt', type: 'textarea' }, + { label: 'Language', key: 'language', type: 'select', options: ['python', 'javascript', 'typescript', 'sql'] }, + ], +}; + +export const AiNodeConfig: React.FC = ({ params, updateParam, nodeType = 'ai.prompt' }) => { + const fields = AI_FIELD_CONFIG[nodeType] ?? AI_FIELD_CONFIG['ai.prompt']; + + return ( + <> + {fields.map((f) => ( +
+ + {f.type === 'textarea' ? ( +