@gadmin2n/schematics 0.0.139 → 0.0.140

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

@@ -1,25 +1,55 @@
-import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import {
-  ReactFlow,
-  ReactFlowProvider,
+  applyNodeChanges,
   Background,
+  ConnectionMode,
   Controls,
+  MarkerType,
   MiniMap,
-  ConnectionMode,
+  ReactFlow,
+  ReactFlowProvider,
   useReactFlow,
-  type Node,
-  type Edge,
   type Connection,
-  type NodeChange,
+  type Edge,
   type EdgeChange,
-  applyNodeChanges,
+  type Node,
+  type NodeChange,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import React, {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import type {
+  WorkflowDSL,
+  WorkflowNodeInstance,
+  WorkflowNodeType,
+} from '../types';
+import {
+  appendLookupPipelineEdge,
+  createLookupCall,
+  replaceLookupCall,
+  resolveLookupCall,
+  resolveLookupPipelineConnection,
+  type ResolvedLookupCall,
+} from '../utils/lookupConnection';
+import { withNewNodeDefaults } from '../utils/newNodeConfig';
+import { removeWorkflowEdges } from '../utils/removeWorkflowEdges';
+import {
+  resolveLookupPorts,
+  resolveRuntimePorts,
+} from '../utils/resolveLookupPorts';
+import { resolveOutputLabels, resolveOutputs } from '../utils/resolveOutputs';
 import { CustomNode } from './CustomNode';
-import type { WorkflowDSL, WorkflowNodeType } from '../types';
-import { resolveOutputs } from '../utils/resolveOutputs';
+import { DeletableEdge } from './DeletableEdge';
+import { InstanceRequiredDialog } from './InstanceRequiredDialog';
+import { LookupConnectionDialog } from './LookupConnectionDialog';
 
 const nodeTypes = { custom: CustomNode };
+const edgeTypes = { deletable: DeletableEdge };
 
 interface Props {
   dsl: WorkflowDSL | null;
@@ -41,17 +71,85 @@ function FlowCanvas({
   onNodeClick,
   onDslChange,
 }: Props) {
+  const { t } = useTranslation('workflow');
   const reactFlowInstance = useReactFlow();
   const dslRef = useRef(dsl);
   dslRef.current = dsl;
   const containerRef = useRef<HTMLDivElement>(null);
   const hasSetViewport = useRef(false);
+  const [pendingDrop, setPendingDrop] = useState<{
+    nodeType: WorkflowNodeType;
+    position: { x: number; y: number };
+  }>();
+  const [pendingLookup, setPendingLookup] = useState<ResolvedLookupCall>();
+  const [selectedEdgeId, setSelectedEdgeId] = useState<string>();
+
+  const deleteEdges = useCallback(
+    (edgeId: string) => {
+      const currentDsl = dslRef.current;
+      if (!currentDsl || !onDslChange || readonly) return;
+      onDslChange({
+        ...currentDsl,
+        edges: removeWorkflowEdges(currentDsl.edges, [edgeId]),
+      });
+      setSelectedEdgeId(undefined);
+    },
+    [onDslChange, readonly],
+  );
+
+  const addDroppedNode = useCallback(
+    (
+      nodeType: WorkflowNodeType,
+      position: { x: number; y: number },
+      instance?: WorkflowNodeInstance,
+    ) => {
+      const currentDsl = dslRef.current;
+      if (!onDslChange) return;
+      const initialConfig: Record<string, any> = instance
+        ? { ...instance.config }
+        : {};
+      const schema = nodeType.configSchema as any;
+      if (!instance && schema?.properties) {
+        for (const [key, prop] of Object.entries<any>(schema.properties)) {
+          if (prop.default !== undefined) initialConfig[key] = prop.default;
+          else if (prop.type === 'string') initialConfig[key] = '';
+          else if (prop.type === 'number' || prop.type === 'integer')
+            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: instance?.name ?? nodeType.label,
+        position,
+        config: instance
+          ? initialConfig
+          : withNewNodeDefaults(nodeType.type, initialConfig),
+        ...(instance && {
+          instanceRef: {
+            instanceId: instance.id,
+            instanceCode: instance.code,
+          },
+        }),
+      };
+      onDslChange(
+        currentDsl
+          ? { ...currentDsl, nodes: [...currentDsl.nodes, newNode] }
+          : { nodes: [newNode], edges: [] },
+      );
+    },
+    [onDslChange],
+  );
 
   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';
+      const lookupPorts = resolveLookupPorts(n);
       // 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
@@ -60,13 +158,20 @@ function FlowCanvas({
         id: n.id,
         type: 'custom',
         position,
-        measured: { width: 140, height: 40 },
         selected: n.id === selectedNodeId,
         data: {
-          label: n.label,
+          label:
+            n.type === 'approval_request_trigger'
+              ? t('nodeTypes.callable_trigger')
+              : n.type === 'webhook_trigger'
+                ? t('nodeTypes.webhook_trigger')
+                : n.label,
           category,
           type: n.type,
           outputs: resolveOutputs(n, nodeTypeMap?.[n.type]),
+          outputLabels: resolveOutputLabels(n),
+          lookupPorts,
+          runtimePorts: resolveRuntimePorts(n),
           isSelected: n.id === selectedNodeId,
           readonly: !!readonly,
         },
@@ -75,16 +180,49 @@ function FlowCanvas({
 
     const rfEdges: Edge[] = dsl.edges.map((e) => ({
       id: e.id,
+      selected: e.id === selectedEdgeId,
       source: e.source,
       target: e.target,
       sourceHandle: e.sourceHandle,
-      label: e.label,
-      type: 'smoothstep',
-      animated: true,
+      targetHandle: e.targetHandle,
+      label:
+        e.kind === 'CALL'
+          ? t('edge.call')
+          : e.kind === 'RETURN'
+            ? (e.label ?? t('edge.return'))
+            : e.kind === 'DATA'
+              ? `${e.sourcePath ?? 'data'} → ${e.targetHandle ?? 'input'}`
+              : e.label,
+      type: 'deletable',
+      data: { onDelete: readonly ? undefined : deleteEdges },
+      markerEnd:
+        e.kind === 'CALL' || e.kind === 'RETURN'
+          ? {
+              type: MarkerType.ArrowClosed,
+              color: e.kind === 'CALL' ? '#fa8c16' : '#1677ff',
+            }
+          : undefined,
+      animated: e.kind !== 'DATA',
+      style:
+        e.kind === 'CALL'
+          ? { stroke: '#fa8c16', strokeWidth: 2 }
+          : e.kind === 'RETURN'
+            ? { stroke: '#1677ff', strokeWidth: 2 }
+            : e.kind === 'DATA'
+              ? { stroke: '#1677ff', strokeDasharray: '6 4' }
+              : undefined,
     }));
 
     return { nodes: rfNodes, edges: rfEdges };
-  }, [dsl, nodeTypeMap, selectedNodeId]);
+  }, [
+    dsl,
+    nodeTypeMap,
+    selectedNodeId,
+    selectedEdgeId,
+    readonly,
+    deleteEdges,
+    t,
+  ]);
 
   // Set viewport once before first paint: horizontal center + vertical top padding
   useLayoutEffect(() => {
@@ -155,10 +293,10 @@ function FlowCanvas({
 
       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 = removeWorkflowEdges(
+          currentDsl.edges,
+          removeChanges.map((change) => (change as any).id as string),
         );
-        const newEdges = currentDsl.edges.filter((e) => !removedIds.has(e.id));
         onDslChange({ ...currentDsl, edges: newEdges });
       }
     },
@@ -169,13 +307,34 @@ function FlowCanvas({
     (connection: Connection) => {
       const currentDsl = dslRef.current;
       if (!currentDsl || !onDslChange) return;
-
+      const lookup = resolveLookupCall(currentDsl, connection);
+      if (lookup) {
+        setPendingLookup(lookup);
+        return;
+      }
+      const pipelineEdge = resolveLookupPipelineConnection(
+        currentDsl,
+        connection,
+      );
+      if (pipelineEdge) {
+        onDslChange({
+          ...currentDsl,
+          edges: appendLookupPipelineEdge(currentDsl.edges, pipelineEdge),
+        });
+        return;
+      }
+      if (
+        connection.sourceHandle?.startsWith('lookup:') ||
+        connection.targetHandle?.startsWith('approver:')
+      )
+        return;
       const newEdge = {
         id: `e-${connection.source}-${connection.target}-${Date.now()}`,
         source: connection.source!,
         target: connection.target!,
         sourceHandle: connection.sourceHandle || undefined,
-        label: undefined,
+        targetHandle: connection.targetHandle || undefined,
+        kind: 'FLOW' as const,
       };
       onDslChange({
         ...currentDsl,
@@ -185,6 +344,20 @@ function FlowCanvas({
     [onDslChange],
   );
 
+  const isValidConnection = useCallback((connection: Edge | Connection) => {
+    const currentDsl = dslRef.current;
+    if (!currentDsl) return false;
+    if (resolveLookupCall(currentDsl, connection as Connection)) return true;
+    if (resolveLookupPipelineConnection(currentDsl, connection as Connection))
+      return true;
+    const sourceHandle = connection.sourceHandle ?? '';
+    const targetHandle = connection.targetHandle ?? '';
+    return (
+      !sourceHandle.startsWith('lookup:') &&
+      !targetHandle.startsWith('approver:')
+    );
+  }, []);
+
   const onDragOver = useCallback((event: React.DragEvent) => {
     event.preventDefault();
     event.dataTransfer.dropEffect = 'move';
@@ -193,7 +366,6 @@ function FlowCanvas({
   const onDrop = useCallback(
     (event: React.DragEvent) => {
       event.preventDefault();
-      const currentDsl = dslRef.current;
       if (!onDslChange) return;
 
       const data = event.dataTransfer.getData('application/workflow-node-type');
@@ -216,67 +388,29 @@ function FlowCanvas({
         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] = {};
-        }
+      if (
+        nodeType.instancePolicy === 'REQUIRED' ||
+        nodeType.instancePolicy === 'OPTIONAL'
+      ) {
+        setPendingDrop({ nodeType, position });
+        return;
       }
-
-      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);
+      addDroppedNode(nodeType, position);
     },
-    [reactFlowInstance, onDslChange],
+    [reactFlowInstance, onDslChange, addDroppedNode],
   );
 
-  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}
+        edgeTypes={edgeTypes}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
+        isValidConnection={isValidConnection}
         onDragOver={onDragOver}
         onDrop={onDrop}
         nodesDraggable={true}
@@ -289,9 +423,15 @@ function FlowCanvas({
         zoomOnPinch={false}
         zoomOnDoubleClick={false}
         onNodeClick={(_event, node) => {
+          setSelectedEdgeId(undefined);
           onNodeClick?.(node.id);
         }}
+        onEdgeClick={(_event, edge) => {
+          if (!readonly) setSelectedEdgeId(edge.id);
+          onNodeClick?.('');
+        }}
         onPaneClick={() => {
+          setSelectedEdgeId(undefined);
           onNodeClick?.('');
         }}
       >
@@ -316,6 +456,47 @@ function FlowCanvas({
           pannable
         />
       </ReactFlow>
+      <InstanceRequiredDialog
+        open={Boolean(pendingDrop)}
+        nodeType={pendingDrop?.nodeType}
+        allowInline={pendingDrop?.nodeType.instancePolicy === 'OPTIONAL'}
+        onCancel={() => setPendingDrop(undefined)}
+        onInline={() => {
+          if (pendingDrop)
+            addDroppedNode(pendingDrop.nodeType, pendingDrop.position);
+          setPendingDrop(undefined);
+        }}
+        onSelect={(instance) => {
+          if (pendingDrop)
+            addDroppedNode(
+              pendingDrop.nodeType,
+              pendingDrop.position,
+              instance,
+            );
+          setPendingDrop(undefined);
+        }}
+      />
+      <LookupConnectionDialog
+        open={Boolean(pendingLookup)}
+        apPortLabel={pendingLookup?.apPortLabel}
+        httpNodeLabel={pendingLookup?.httpNode.label}
+        onCancel={() => setPendingLookup(undefined)}
+        onConfirm={() => {
+          const currentDsl = dslRef.current;
+          if (pendingLookup && currentDsl && onDslChange) {
+            const call = createLookupCall(pendingLookup);
+            onDslChange({
+              ...currentDsl,
+              edges: replaceLookupCall(
+                currentDsl.edges,
+                pendingLookup,
+                call.edge,
+              ),
+            });
+          }
+          setPendingLookup(undefined);
+        }}
+      />
     </div>
   );
 }

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

@@ -3,6 +3,7 @@ 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';
+import { useTranslation } from 'react-i18next';
 
 interface ImportModalProps {
   open: boolean;
@@ -13,6 +14,7 @@ interface ImportModalProps {
 type Phase = 'input' | 'preview' | 'confirming';
 
 export function ImportModal({ open, onClose, onSuccess }: ImportModalProps) {
+  const { t } = useTranslation('workflow');
   const [sourceUrl, setSourceUrl] = useState('');
   const [phase, setPhase] = useState<Phase>('input');
   const [loading, setLoading] = useState(false);
@@ -36,7 +38,7 @@ export function ImportModal({ open, onClose, onSuccess }: ImportModalProps) {
 
   const handleFetchPreview = useCallback(async () => {
     if (!sourceUrl.trim()) {
-      message.warning('Please paste the export URL');
+      message.warning(t('import.pasteUrl'));
       return;
     }
 
@@ -47,7 +49,8 @@ export function ImportModal({ open, onClose, onSuccess }: ImportModalProps) {
       if (!response.ok) {
         const errorData = await response.json().catch(() => null);
         throw new Error(
-          errorData?.message || `Failed to fetch: ${response.status}`,
+          errorData?.message ||
+            t('import.fetchFailed', { status: response.status }),
         );
       }
       const exportData = await response.json();
@@ -67,14 +70,9 @@ export function ImportModal({ open, onClose, onSuccess }: ImportModalProps) {
       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.',
-        );
+        message.error(t('import.expired'));
       } else {
-        message.error(
-          e?.message ||
-            'Cannot reach the source environment. Please check the URL and try again.',
-        );
+        message.error(e?.message || t('import.unreachable'));
       }
     } finally {
       setLoading(false);
@@ -91,47 +89,45 @@ export function ImportModal({ open, onClose, onSuccess }: ImportModalProps) {
         workflowName: string;
       }>('workflow/import-confirm', 'POST', { payload });
 
-      message.success(
-        `Workflow "${result.workflowName}" imported successfully!`,
-      );
+      message.success(t('import.success', { name: result.workflowName }));
       reset();
       onClose();
       onSuccess();
     } catch (e: any) {
-      message.error(e?.message ?? 'Import failed');
+      message.error(e?.message ?? t('import.failed'));
       setPhase('preview');
     }
   }, [payload, reset, onClose, onSuccess]);
 
   return (
     <Modal
-      title="Import Workflow"
+      title={t('import.title')}
       open={open}
       onCancel={handleClose}
       width={phase === 'preview' ? '90vw' : 520}
       footer={
         phase === 'input' ? (
           <Space>
-            <Button onClick={handleClose}>Cancel</Button>
+            <Button onClick={handleClose}>{t('common.cancel')}</Button>
             <Button
               type="primary"
               icon={<CloudDownloadOutlined />}
               onClick={handleFetchPreview}
               loading={loading}
             >
-              Fetch &amp; Preview
+              {t('import.fetchPreview')}
             </Button>
           </Space>
         ) : (
           <Space>
-            <Button onClick={handleClose}>Cancel</Button>
+            <Button onClick={handleClose}>{t('common.cancel')}</Button>
             <Button
               type="primary"
               icon={<CheckOutlined />}
               onClick={handleConfirm}
               loading={phase === 'confirming'}
             >
-              Confirm Import
+              {t('import.confirm')}
             </Button>
           </Space>
         )
@@ -139,9 +135,7 @@ export function ImportModal({ open, onClose, onSuccess }: ImportModalProps) {
     >
       {phase === 'input' && (
         <>
-          <p style={{ marginBottom: 8 }}>
-            Paste the export URL from the source environment:
-          </p>
+          <p style={{ marginBottom: 8 }}>{t('import.urlHint')}</p>
           <Input.TextArea
             value={sourceUrl}
             onChange={(e) => setSourceUrl(e.target.value)}
@@ -158,8 +152,8 @@ export function ImportModal({ open, onClose, onSuccess }: ImportModalProps) {
             newValue={incomingJson}
             splitView
             compareMethod={DiffMethod.LINES}
-            leftTitle="Current (this environment)"
-            rightTitle="Incoming (source environment)"
+            leftTitle={t('import.current')}
+            rightTitle={t('import.incoming')}
           />
         </div>
       )}
@@ -167,7 +161,7 @@ export function ImportModal({ open, onClose, onSuccess }: ImportModalProps) {
       {phase === 'confirming' && (
         <div style={{ textAlign: 'center', padding: 40 }}>
           <Spin size="large" />
-          <p style={{ marginTop: 16 }}>Importing workflow...</p>
+          <p style={{ marginTop: 16 }}>{t('import.importing')}</p>
         </div>
       )}
     </Modal>

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

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Empty, List, Modal, Space, Spin, Typography } from 'antd';
+import type { WorkflowNodeInstance, WorkflowNodeType } from '../types';
+import { useNodeInstanceLibrary } from '../hooks/useNodeInstanceLibrary';
+import { CreateNodeInstanceDrawer } from './CreateNodeInstanceDrawer';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  open: boolean;
+  nodeType?: WorkflowNodeType;
+  allowInline?: boolean;
+  onCancel(): void;
+  onInline?(): void;
+  onSelect(instance: WorkflowNodeInstance): void;
+}
+
+export function InstanceRequiredDialog({
+  open,
+  nodeType,
+  allowInline,
+  onCancel,
+  onInline,
+  onSelect,
+}: Props) {
+  const { t } = useTranslation('workflow');
+  const [creating, setCreating] = useState(false);
+  const { instances, loading } = useNodeInstanceLibrary(
+    nodeType?.id,
+    open && !creating && Boolean(nodeType),
+  );
+
+  useEffect(() => {
+    if (!open) setCreating(false);
+  }, [open]);
+
+  return (
+    <>
+      <Modal
+        open={open && !creating}
+        title={t('nodeInstance.chooseNamed', {
+          name: nodeType?.label ?? 'Node',
+        })}
+        footer={
+          <Space>
+            <Button onClick={onCancel}>{t('common.cancel')}</Button>
+            {allowInline && (
+              <Button onClick={onInline}>{t('nodeInstance.useInline')}</Button>
+            )}
+            <Button type="primary" onClick={() => setCreating(true)}>
+              {t('nodeInstance.create')}
+            </Button>
+          </Space>
+        }
+        onCancel={onCancel}
+      >
+        {loading ? (
+          <div style={{ padding: 32, textAlign: 'center' }}>
+            <Spin />
+          </div>
+        ) : instances.length ? (
+          <List
+            dataSource={instances}
+            renderItem={(instance) => (
+              <List.Item
+                actions={[
+                  <Button
+                    key="select"
+                    type="link"
+                    onClick={() => onSelect(instance)}
+                  >
+                    {t('nodeInstance.useInstance')}
+                  </Button>,
+                ]}
+              >
+                <List.Item.Meta
+                  title={instance.name}
+                  description={
+                    instance.description ||
+                    t('nodeInstance.instanceCode', { code: instance.code })
+                  }
+                />
+              </List.Item>
+            )}
+          />
+        ) : (
+          <Empty
+            description={
+              <Typography.Text type="secondary">
+                {t('nodeInstance.noEnabled')}
+              </Typography.Text>
+            }
+          />
+        )}
+      </Modal>
+      <CreateNodeInstanceDrawer
+        open={open && creating}
+        nodeType={nodeType}
+        onCancel={() => setCreating(false)}
+        onCreated={(instance) => {
+          setCreating(false);
+          onSelect(instance);
+        }}
+      />
+    </>
+  );
+}