@gadmin2n/schematics 0.0.72 → 0.0.74

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/FlowRenderer.tsx

@@ -0,0 +1,322 @@
+import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  Background,
+  Controls,
+  MiniMap,
+  ConnectionMode,
+  useReactFlow,
+  type Node,
+  type Edge,
+  type Connection,
+  type NodeChange,
+  type EdgeChange,
+  applyNodeChanges,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { CustomNode } from './CustomNode';
+import type { WorkflowDSL, WorkflowNodeType } from '../types';
+
+const nodeTypes = { custom: CustomNode };
+
+interface Props {
+  dsl: WorkflowDSL | null;
+  nodeTypeMap?: Record<string, { category: string; icon: string }>;
+  selectedNodeId?: string | null;
+  readonly?: boolean;
+  onNodeClick?: (nodeId: string) => void;
+  onDslChange?: (dsl: WorkflowDSL) => void;
+}
+
+function FlowCanvas({
+  dsl,
+  nodeTypeMap,
+  selectedNodeId,
+  readonly,
+  onNodeClick,
+  onDslChange,
+}: Props) {
+  const reactFlowInstance = useReactFlow();
+  const dslRef = useRef(dsl);
+  dslRef.current = dsl;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const hasSetViewport = useRef(false);
+
+  const { nodes, edges } = useMemo(() => {
+    if (!dsl) return { nodes: [] as Node[], edges: [] as Edge[] };
+
+    const rfNodes: Node[] = dsl.nodes.map((n) => {
+      const category = nodeTypeMap?.[n.type]?.category || 'ACTION';
+      // Transpose x/y for vertical (top-to-bottom) layout
+      // Scale y down to compress vertical spacing (original x-step=250 → 120)
+      // Add y offset so top node isn't clipped
+      const position = { x: n.position.y * 1.5, y: n.position.x * 0.5 + 20 };
+      return {
+        id: n.id,
+        type: 'custom',
+        position,
+        measured: { width: 140, height: 40 },
+        selected: n.id === selectedNodeId,
+        data: {
+          label: n.label,
+          category,
+          isSelected: n.id === selectedNodeId,
+          readonly: !!readonly,
+        },
+      };
+    });
+
+    const rfEdges: Edge[] = dsl.edges.map((e) => ({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      sourceHandle: e.sourceHandle,
+      label: e.label,
+      type: 'smoothstep',
+      animated: true,
+    }));
+
+    return { nodes: rfNodes, edges: rfEdges };
+  }, [dsl, nodeTypeMap, selectedNodeId]);
+
+  // Set viewport once before first paint: horizontal center + vertical top padding
+  useLayoutEffect(() => {
+    if (!hasSetViewport.current && containerRef.current && nodes.length > 0) {
+      const containerWidth = containerRef.current.clientWidth;
+      let minX = Infinity,
+        maxX = -Infinity;
+      nodes.forEach((n) => {
+        const w = n.measured?.width || 140;
+        minX = Math.min(minX, n.position.x);
+        maxX = Math.max(maxX, n.position.x + w);
+      });
+      const contentWidth = maxX - minX;
+      const x = (containerWidth - contentWidth) / 2 - minX;
+      reactFlowInstance.setViewport({ x, y: 0, zoom: 1 });
+      hasSetViewport.current = true;
+    }
+  }, [nodes, reactFlowInstance]);
+
+  const onNodesChange = useCallback(
+    (changes: NodeChange[]) => {
+      const currentDsl = dslRef.current;
+      if (!currentDsl || !onDslChange) return;
+
+      // Apply changes to get new node positions
+      const updatedRfNodes = applyNodeChanges(changes, nodes);
+
+      // Check if any position actually changed
+      const positionChanged = changes.some(
+        (c) => c.type === 'position' && c.position,
+      );
+      const removeChanges = changes.filter((c) => c.type === 'remove');
+
+      if (removeChanges.length > 0) {
+        const removedIds = new Set(
+          removeChanges.map((c) => (c as any).id as string),
+        );
+        const newNodes = currentDsl.nodes.filter((n) => !removedIds.has(n.id));
+        const newEdges = currentDsl.edges.filter(
+          (e) => !removedIds.has(e.source) && !removedIds.has(e.target),
+        );
+        onDslChange({ nodes: newNodes, edges: newEdges });
+      } else if (positionChanged) {
+        const newNodes = currentDsl.nodes.map((n) => {
+          const rfNode = updatedRfNodes.find((rn) => rn.id === n.id);
+          if (rfNode && rfNode.position) {
+            // Reverse transpose: display (x,y) → stored (y,x) with scale reversal
+            return {
+              ...n,
+              position: {
+                x: (rfNode.position.y - 20) / 0.5,
+                y: rfNode.position.x / 1.5,
+              },
+            };
+          }
+          return n;
+        });
+        onDslChange({ ...currentDsl, nodes: newNodes });
+      }
+    },
+    [nodes, onDslChange],
+  );
+
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange[]) => {
+      const currentDsl = dslRef.current;
+      if (!currentDsl || !onDslChange) return;
+
+      const removeChanges = changes.filter((c) => c.type === 'remove');
+      if (removeChanges.length > 0) {
+        const removedIds = new Set(
+          removeChanges.map((c) => (c as any).id as string),
+        );
+        const newEdges = currentDsl.edges.filter((e) => !removedIds.has(e.id));
+        onDslChange({ ...currentDsl, edges: newEdges });
+      }
+    },
+    [onDslChange],
+  );
+
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      const currentDsl = dslRef.current;
+      if (!currentDsl || !onDslChange) return;
+
+      const newEdge = {
+        id: `e-${connection.source}-${connection.target}-${Date.now()}`,
+        source: connection.source!,
+        target: connection.target!,
+        sourceHandle: connection.sourceHandle || undefined,
+        label: undefined,
+      };
+      onDslChange({
+        ...currentDsl,
+        edges: [...currentDsl.edges, newEdge],
+      });
+    },
+    [onDslChange],
+  );
+
+  const onDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const onDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+      const currentDsl = dslRef.current;
+      if (!onDslChange) return;
+
+      const data = event.dataTransfer.getData('application/workflow-node-type');
+      if (!data) return;
+
+      let nodeType: WorkflowNodeType;
+      try {
+        nodeType = JSON.parse(data);
+      } catch {
+        return;
+      }
+
+      const flowPosition = reactFlowInstance.screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+      // Reverse transpose: display (x,y) → stored (y,x) with scale reversal
+      const position = {
+        x: (flowPosition.y - 20) / 0.5,
+        y: flowPosition.x / 1.5,
+      };
+
+      // Initialize config with default values from configSchema
+      const initialConfig: Record<string, any> = {};
+      const schema = nodeType.configSchema as any;
+      if (schema?.properties) {
+        for (const [key, prop] of Object.entries<any>(schema.properties)) {
+          if (prop.type === 'string') initialConfig[key] = '';
+          else if (prop.type === 'number') initialConfig[key] = undefined;
+          else if (prop.type === 'boolean') initialConfig[key] = false;
+          else if (prop.type === 'array') initialConfig[key] = [];
+          else if (prop.type === 'object') initialConfig[key] = {};
+        }
+      }
+
+      const newNode = {
+        id: crypto.randomUUID(),
+        type: nodeType.type,
+        label: nodeType.label,
+        position,
+        config: initialConfig,
+      };
+
+      const newDsl: WorkflowDSL = currentDsl
+        ? { ...currentDsl, nodes: [...currentDsl.nodes, newNode] }
+        : { nodes: [newNode], edges: [] };
+
+      onDslChange(newDsl);
+    },
+    [reactFlowInstance, onDslChange],
+  );
+
+  if (!dsl || dsl.nodes.length === 0) {
+    return (
+      <div
+        style={{ width: '100%', height: '100%' }}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+      >
+        <ReactFlow
+          nodes={[]}
+          edges={[]}
+          nodeTypes={nodeTypes}
+          fitView
+          onDragOver={onDragOver}
+          onDrop={onDrop}
+        >
+          <Background />
+          <Controls showInteractive={false} />
+        </ReactFlow>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+        nodesDraggable={true}
+        nodesConnectable={true}
+        elementsSelectable={true}
+        connectionMode={ConnectionMode.Loose}
+        deleteKeyCode={['Backspace', 'Delete']}
+        zoomOnScroll={false}
+        zoomOnPinch={false}
+        zoomOnDoubleClick={false}
+        onNodeClick={(_event, node) => {
+          onNodeClick?.(node.id);
+        }}
+        onPaneClick={() => {
+          onNodeClick?.('');
+        }}
+      >
+        <Background />
+        <Controls showInteractive={false} />
+        <MiniMap
+          nodeColor={(node) => {
+            const category = (node.data as any)?.category || 'ACTION';
+            const colors: Record<string, string> = {
+              TRIGGER: '#91caff',
+              ACTION: '#b7eb8f',
+              CONDITION: '#ffd591',
+              LOOP: '#d3adf7',
+              APPROVAL: '#ffa39e',
+              SUB_WORKFLOW: '#adc6ff',
+            };
+            return colors[category] || '#b7eb8f';
+          }}
+          nodeStrokeWidth={3}
+          maskColor="rgba(240, 240, 240, 0.6)"
+          zoomable
+          pannable
+        />
+      </ReactFlow>
+    </div>
+  );
+}
+
+export function FlowRenderer(props: Props) {
+  return (
+    <ReactFlowProvider>
+      <FlowCanvas {...props} />
+    </ReactFlowProvider>
+  );
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/ImportModal.tsx

@@ -0,0 +1,175 @@
+import React, { useCallback, useState } from 'react';
+import { Button, Input, Modal, Space, Spin, message } from 'antd';
+import { CloudDownloadOutlined, CheckOutlined } from '@ant-design/icons';
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';
+import { customRequest } from 'helpers/http';
+
+interface ImportModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+type Phase = 'input' | 'preview' | 'confirming';
+
+export function ImportModal({ open, onClose, onSuccess }: ImportModalProps) {
+  const [sourceUrl, setSourceUrl] = useState('');
+  const [phase, setPhase] = useState<Phase>('input');
+  const [loading, setLoading] = useState(false);
+  const [currentJson, setCurrentJson] = useState('');
+  const [incomingJson, setIncomingJson] = useState('');
+  const [payload, setPayload] = useState<any>(null);
+
+  const reset = useCallback(() => {
+    setSourceUrl('');
+    setPhase('input');
+    setLoading(false);
+    setCurrentJson('');
+    setIncomingJson('');
+    setPayload(null);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    reset();
+    onClose();
+  }, [reset, onClose]);
+
+  const handleFetchPreview = useCallback(async () => {
+    if (!sourceUrl.trim()) {
+      message.warning('Please paste the export URL');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // Step 1: Fetch from source URL (cross-origin)
+      const response = await fetch(sourceUrl.trim());
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => null);
+        throw new Error(
+          errorData?.message || `Failed to fetch: ${response.status}`,
+        );
+      }
+      const exportData = await response.json();
+
+      // Step 2: Send to our import-preview endpoint
+      const preview = await customRequest<{
+        current: any;
+        incoming: any;
+      }>('workflow/import-preview', 'POST', { payload: exportData });
+
+      // Step 3: Format for diff viewer
+      setCurrentJson(
+        preview.current ? JSON.stringify(preview.current, null, 2) : '',
+      );
+      setIncomingJson(JSON.stringify(preview.incoming, null, 2));
+      setPayload(exportData);
+      setPhase('preview');
+    } catch (e: any) {
+      if (e.message?.includes('expired') || e.message?.includes('invalid')) {
+        message.error(
+          'Export link has expired or is invalid. Please generate a new one from the source environment.',
+        );
+      } else {
+        message.error(
+          e?.message ||
+            'Cannot reach the source environment. Please check the URL and try again.',
+        );
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [sourceUrl]);
+
+  const handleConfirm = useCallback(async () => {
+    if (!payload) return;
+    setPhase('confirming');
+    try {
+      const result = await customRequest<{
+        success: boolean;
+        workflowId: string;
+        workflowName: string;
+      }>('workflow/import-confirm', 'POST', { payload });
+
+      message.success(
+        `Workflow "${result.workflowName}" imported successfully!`,
+      );
+      reset();
+      onClose();
+      onSuccess();
+    } catch (e: any) {
+      message.error(e?.message ?? 'Import failed');
+      setPhase('preview');
+    }
+  }, [payload, reset, onClose, onSuccess]);
+
+  return (
+    <Modal
+      title="Import Workflow"
+      open={open}
+      onCancel={handleClose}
+      width={phase === 'preview' ? '90vw' : 520}
+      footer={
+        phase === 'input' ? (
+          <Space>
+            <Button onClick={handleClose}>Cancel</Button>
+            <Button
+              type="primary"
+              icon={<CloudDownloadOutlined />}
+              onClick={handleFetchPreview}
+              loading={loading}
+            >
+              Fetch &amp; Preview
+            </Button>
+          </Space>
+        ) : (
+          <Space>
+            <Button onClick={handleClose}>Cancel</Button>
+            <Button
+              type="primary"
+              icon={<CheckOutlined />}
+              onClick={handleConfirm}
+              loading={phase === 'confirming'}
+            >
+              Confirm Import
+            </Button>
+          </Space>
+        )
+      }
+    >
+      {phase === 'input' && (
+        <>
+          <p style={{ marginBottom: 8 }}>
+            Paste the export URL from the source environment:
+          </p>
+          <Input.TextArea
+            value={sourceUrl}
+            onChange={(e) => setSourceUrl(e.target.value)}
+            placeholder="https://dev.example.com/api/workflow/export/abc123?token=..."
+            autoSize={{ minRows: 3, maxRows: 5 }}
+          />
+        </>
+      )}
+
+      {phase === 'preview' && (
+        <div style={{ maxHeight: '70vh', overflow: 'auto' }}>
+          <ReactDiffViewer
+            oldValue={currentJson}
+            newValue={incomingJson}
+            splitView
+            compareMethod={DiffMethod.LINES}
+            leftTitle="Current (this environment)"
+            rightTitle="Incoming (source environment)"
+          />
+        </div>
+      )}
+
+      {phase === 'confirming' && (
+        <div style={{ textAlign: 'center', padding: 40 }}>
+          <Spin size="large" />
+          <p style={{ marginTop: 16 }}>Importing workflow...</p>
+        </div>
+      )}
+    </Modal>
+  );
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/NodeEditModal.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { Input, Modal, Space, Typography } from 'antd';
+
+const { Text } = Typography;
+const { TextArea } = Input;
+
+interface Props {
+  open: boolean;
+  nodeId: string | null;
+  nodeLabel: string | null;
+  onClose: () => void;
+  onSubmit: (prompt: string) => void;
+  loading: boolean;
+}
+
+export function NodeEditModal({
+  open,
+  nodeId,
+  nodeLabel,
+  onClose,
+  onSubmit,
+  loading,
+}: Props) {
+  const [prompt, setPrompt] = useState('');
+
+  function handleSubmit() {
+    if (!prompt.trim()) return;
+    onSubmit(prompt.trim());
+    setPrompt('');
+  }
+
+  return (
+    <Modal
+      title={`Edit Node: ${nodeLabel || nodeId}`}
+      open={open}
+      onCancel={onClose}
+      onOk={handleSubmit}
+      okText="Apply"
+      okButtonProps={{ loading }}
+      destroyOnClose
+      width={480}
+    >
+      <Space direction="vertical" style={{ width: '100%' }} size="middle">
+        <Text type="secondary">
+          Describe how you want to modify this node. The AI will update only
+          this node.
+        </Text>
+        <TextArea
+          rows={3}
+          placeholder="e.g. Change the timeout to 30 minutes and add a fallback approver"
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          onPressEnter={(e) => {
+            if (e.ctrlKey) handleSubmit();
+          }}
+        />
+      </Space>
+    </Modal>
+  );
+}