@gadmin2n/schematics 0.0.142 → 0.0.143

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

@@ -0,0 +1,200 @@
+import { Tag, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import type { WorkflowNode, WorkflowNodeType } from '../types';
+import { resolveOutputs } from '../utils/resolveOutputs';
+
+const { Text } = Typography;
+
+interface OutputField {
+  path: string;
+  type: string;
+  description?: string;
+  required: boolean;
+}
+
+interface Props {
+  node: WorkflowNode;
+  nodeType?: WorkflowNodeType;
+}
+
+const DYNAMIC_OUTPUT_KEYS: Partial<Record<string, string>> = {
+  cron_trigger: 'workflowData',
+  manual_trigger: 'workflowData',
+  callable_trigger: 'workflowData',
+  code: 'codeReturn',
+  sub_workflow: 'workflowReturn',
+  return_result: 'returnPrevious',
+};
+
+function schemaType(schema: Record<string, any>): string {
+  if (Array.isArray(schema.type)) return schema.type.join(' | ');
+  if (typeof schema.type === 'string') return schema.type;
+  if (schema.enum) return 'enum';
+  return 'any';
+}
+
+function outputFields(schema: Record<string, any>): OutputField[] {
+  const properties =
+    schema.properties && typeof schema.properties === 'object'
+      ? schema.properties
+      : {};
+  const required = new Set<string>(
+    Array.isArray(schema.required) ? schema.required : [],
+  );
+
+  return Object.entries<Record<string, any>>(properties).map(
+    ([name, property]) => ({
+      path: `input.${name}`,
+      type: schemaType(property ?? {}),
+      description:
+        typeof property?.description === 'string'
+          ? property.description
+          : undefined,
+      required: required.has(name),
+    }),
+  );
+}
+
+export function NodeOutputSummary({ node, nodeType }: Props) {
+  const { t } = useTranslation('workflow');
+  const branches = resolveOutputs(node, nodeType);
+  const dynamicOutputKey = DYNAMIC_OUTPUT_KEYS[node.type];
+  const fields = dynamicOutputKey
+    ? []
+    : outputFields((nodeType?.outputSchema ?? {}) as Record<string, any>);
+  const schemaDescription =
+    typeof nodeType?.outputSchema?.description === 'string'
+      ? nodeType.outputSchema.description
+      : undefined;
+
+  const branchLabel = (branch: string) => {
+    if (node.type === 'external_wait') {
+      return branch === 'RECEIVED'
+        ? t('editor.output.branchLabels.received')
+        : t('editor.output.branchLabels.timedOut');
+    }
+    if (node.type === 'approval' || node.type === 'human_approval') {
+      return branch === 'true'
+        ? t('editor.output.branchLabels.approved')
+        : t('editor.output.branchLabels.rejected');
+    }
+    if (node.type === 'if_else') {
+      return branch === 'true'
+        ? t('editor.output.branchLabels.matched')
+        : t('editor.output.branchLabels.notMatched');
+    }
+    return branch;
+  };
+
+  return (
+    <section
+      aria-label={t('editor.output.title')}
+      style={{
+        border: '1px solid var(--ant-color-border-secondary)',
+        borderRadius: 8,
+        overflow: 'hidden',
+        background: 'var(--ant-color-fill-quaternary)',
+      }}
+    >
+      <div
+        style={{
+          padding: '10px 12px',
+          borderBottom: '1px solid var(--ant-color-border-secondary)',
+          background: 'var(--ant-color-bg-container)',
+        }}
+      >
+        <Text strong style={{ fontSize: 13 }}>
+          {t('editor.output.title')}
+        </Text>
+        <Text
+          type="secondary"
+          style={{ display: 'block', marginTop: 2, fontSize: 11 }}
+        >
+          {t('editor.output.hint')}
+        </Text>
+      </div>
+
+      <div style={{ padding: '10px 12px' }}>
+        {branches.length > 1 && (
+          <div style={{ marginBottom: fields.length > 0 ? 10 : 0 }}>
+            <Text
+              type="secondary"
+              style={{ display: 'block', marginBottom: 6, fontSize: 11 }}
+            >
+              {t('editor.output.flowBranches')}
+            </Text>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+              {branches.map((branch) => (
+                <Tag key={branch} color="blue" style={{ marginInlineEnd: 0 }}>
+                  {branchLabel(branch)}
+                </Tag>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {fields.length > 0 ? (
+          <div
+            style={{
+              display: 'grid',
+              gap: 1,
+              borderRadius: 6,
+              overflow: 'hidden',
+              background: 'var(--ant-color-border-secondary)',
+            }}
+          >
+            {fields.map((field) => (
+              <div
+                key={field.path}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: 'minmax(0, 1fr) auto',
+                  gap: 8,
+                  alignItems: 'center',
+                  padding: '7px 9px',
+                  background: 'var(--ant-color-bg-container)',
+                }}
+              >
+                <div style={{ minWidth: 0 }}>
+                  <Text
+                    code
+                    style={{ display: 'block', fontSize: 11, margin: 0 }}
+                  >
+                    {field.path}
+                  </Text>
+                  {field.description && (
+                    <Text
+                      type="secondary"
+                      ellipsis={{ tooltip: field.description }}
+                      style={{ display: 'block', marginTop: 2, fontSize: 11 }}
+                    >
+                      {field.description}
+                    </Text>
+                  )}
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  {field.required && (
+                    <Text type="secondary" style={{ fontSize: 10 }}>
+                      {t('editor.output.required')}
+                    </Text>
+                  )}
+                  <Tag bordered={false} style={{ marginInlineEnd: 0 }}>
+                    {t(`editor.output.types.${field.type}`, {
+                      defaultValue: field.type,
+                    })}
+                  </Tag>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <Text type="secondary" style={{ fontSize: 12 }}>
+            {dynamicOutputKey
+              ? t(`editor.output.dynamic.${dynamicOutputKey}`)
+              : schemaDescription || t('editor.output.dynamic.anyValue')}
+          </Text>
+        )}
+      </div>
+    </section>
+  );
+}

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

@@ -54,6 +54,7 @@ describe('NodePropertyPanel instance references', () => {
   it('renders a referenced node with the editable template config form', async () => {
     vi.mocked(customRequest).mockImplementation((path) => {
       if (path === 'subject-providers') return Promise.resolve([]) as never;
+      if (path === 'workflow/callable') return Promise.resolve([]) as never;
       return Promise.resolve({
         data: [
           {
@@ -88,8 +89,14 @@ describe('NodePropertyPanel instance references', () => {
     });
     expect(screen.getByText('Who can approve')).toBeInTheDocument();
     expect(
-      screen.getByText('修改只会保存在当前 Workflow，不会修改 Node Template。'),
+      screen.getByText('Changes apply only to this Workflow.'),
     ).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: 'Node configuration' }),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Node type')).toBeInTheDocument();
+    expect(screen.getByText('Human Approval')).toBeInTheDocument();
+    expect(screen.queryByText('approval')).not.toBeInTheDocument();
     expect(
       screen.getByRole('button', { name: 'Save changes' }),
     ).toBeInTheDocument();
@@ -99,22 +106,19 @@ describe('NodePropertyPanel instance references', () => {
     const returnNodeType = {
       id: '9',
       type: 'return_result',
-      label: 'Return result',
+      label: 'Finish and return',
       category: 'ACTION',
       instancePolicy: 'INLINE_ONLY',
       configSchema: {
         type: 'object',
-        properties: {
-          resultType: { type: 'string' },
-          path: { type: 'string' },
-        },
+        properties: {},
       },
       uiSchema: {},
     } as unknown as WorkflowNodeType;
     const returnNode: WorkflowNode = {
       id: 'return-1',
       type: 'return_result',
-      label: 'Return result',
+      label: 'Finish and return',
       position: { x: 0, y: 0 },
       config: {},
     };
@@ -131,9 +135,57 @@ describe('NodePropertyPanel instance references', () => {
     );
 
     expect(
-      screen.getByText('Return the previous node result'),
+      screen.getByText('Returns the previous node result'),
     ).toBeInTheDocument();
-    expect(screen.queryByLabelText('Workflow data field')).toBeNull();
+    expect(screen.queryByText('Result type')).toBeNull();
+  });
+
+  it('shows the node output contract as read-only input paths', () => {
+    const httpNodeType = {
+      id: '10',
+      type: 'http_request',
+      label: 'HTTP Request',
+      category: 'ACTION',
+      instancePolicy: 'INLINE_ONLY',
+      configSchema: { type: 'object', properties: {} },
+      outputSchema: {
+        type: 'object',
+        properties: {
+          status: { type: 'number', description: 'HTTP status code' },
+          data: { description: 'Response body' },
+          headers: { type: 'object' },
+        },
+      },
+      outputs: [],
+      uiSchema: {},
+    } as unknown as WorkflowNodeType;
+    const httpNode: WorkflowNode = {
+      id: 'http-1',
+      type: 'http_request',
+      label: 'Create order',
+      position: { x: 0, y: 0 },
+      config: {},
+    };
+
+    render(
+      <NodePropertyPanel
+        node={httpNode}
+        nodeTypes={[httpNodeType]}
+        onSave={vi.fn()}
+        onLabelChange={vi.fn()}
+        onAiEdit={vi.fn()}
+        aiLoading={false}
+      />,
+    );
+
+    expect(
+      screen.getByRole('region', { name: 'Output (read-only)' }),
+    ).toBeInTheDocument();
+    expect(screen.getByText('input.status')).toBeInTheDocument();
+    expect(screen.getByText('input.data')).toBeInTheDocument();
+    expect(screen.getByText('input.headers')).toBeInTheDocument();
+    expect(screen.getByText('HTTP status code')).toBeInTheDocument();
+    expect(screen.getByText('Any value')).toBeInTheDocument();
   });
 
   it('uses nested UI Schema widgets for Callable Trigger parameters', async () => {
@@ -205,131 +257,4 @@ describe('NodePropertyPanel instance references', () => {
       }),
     );
   });
-
-  it('does not carry Code configuration into Submit External Result when switching nodes', async () => {
-    const user = userEvent.setup();
-    const onSave = vi.fn();
-    const codeNodeType = {
-      id: 'code',
-      type: 'code',
-      label: 'Code',
-      category: 'ACTION',
-      instancePolicy: 'INLINE_ONLY',
-      configSchema: {
-        type: 'object',
-        properties: {
-          mode: { type: 'string' },
-          script: { type: 'string' },
-          timeout: { type: 'integer' },
-        },
-      },
-      uiSchema: { widget: 'code-config' },
-    } as unknown as WorkflowNodeType;
-    const submitNodeType = {
-      id: 'submit-external-result',
-      type: 'submit_external_result',
-      label: 'Submit external result',
-      category: 'ACTION',
-      instancePolicy: 'INLINE_ONLY',
-      configSchema: {
-        type: 'object',
-        properties: {
-          inputBindings: { type: 'object' },
-        },
-      },
-      uiSchema: { widget: 'submit-external-result-config' },
-    } as unknown as WorkflowNodeType;
-    const codeNode: WorkflowNode = {
-      id: 'code-1',
-      type: 'code',
-      label: 'Transform callback',
-      position: { x: 0, y: 0 },
-      config: {
-        mode: 'runOnceForAll',
-        script: 'return input;',
-        timeout: 1000,
-      },
-    };
-    const inputBindings = {
-      callbackToken: { source: 'INPUT' as const, path: 'callbackToken' },
-      eventId: { source: 'INPUT' as const, path: 'eventId' },
-      outcome: { source: 'INPUT' as const, path: 'outcome' },
-    };
-    const submitNode: WorkflowNode = {
-      id: 'submit-1',
-      type: 'submit_external_result',
-      label: 'Submit external result',
-      position: { x: 100, y: 0 },
-      config: { inputBindings },
-    };
-    const nodeTypes = [codeNodeType, submitNodeType];
-    const commonProps = {
-      nodeTypes,
-      onSave,
-      onLabelChange: vi.fn(),
-      onAiEdit: vi.fn(),
-      aiLoading: false,
-    };
-
-    const { rerender } = render(
-      <NodePropertyPanel {...commonProps} node={codeNode} />,
-    );
-
-    rerender(<NodePropertyPanel {...commonProps} node={submitNode} />);
-    await user.click(screen.getByRole('button', { name: 'Save changes' }));
-
-    expect(onSave).toHaveBeenLastCalledWith('submit-1', {
-      label: 'Submit external result',
-      config: { inputBindings },
-    });
-  });
-
-  it('hides legacy trigger and approval callback nodes from the palette', () => {
-    render(
-      <NodePropertyPanel
-        node={null}
-        nodeTypes={
-          [
-            {
-              id: 'callable',
-              type: 'callable_trigger',
-              label: '接收调用',
-              category: 'TRIGGER',
-            },
-            {
-              id: 'legacy-approval',
-              type: 'approval_request_trigger',
-              label: '接收审批请求',
-              category: 'TRIGGER',
-            },
-            {
-              id: 'webhook',
-              type: 'webhook_trigger',
-              label: 'Webhook Trigger',
-              category: 'TRIGGER',
-            },
-            {
-              id: 'submit-result',
-              type: 'submit_approval_result',
-              label: 'Submit approval result',
-              category: 'ACTION',
-            },
-          ] as WorkflowNodeType[]
-        }
-        onSave={vi.fn()}
-        onLabelChange={vi.fn()}
-        onAiEdit={vi.fn()}
-        aiLoading={false}
-      />,
-    );
-
-    expect(screen.getByText('Receive call')).toBeInTheDocument();
-    expect(
-      screen.queryByText('Receive approval request'),
-    ).not.toBeInTheDocument();
-    expect(screen.getByText('Receive external request')).toBeInTheDocument();
-    expect(
-      screen.queryByText('Submit approval result'),
-    ).not.toBeInTheDocument();
-  });
 });