@gadmin2n/schematics 0.0.144 → 0.0.146

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

@@ -1,31 +1,74 @@
-import { Tag, Typography } from 'antd';
+import { Card, Tag, Typography } from 'antd';
 import { useTranslation } from 'react-i18next';
-import type { WorkflowNode, WorkflowNodeType } from '../types';
-import { resolveOutputs } from '../utils/resolveOutputs';
+import type { WorkflowEdge, WorkflowNode, WorkflowNodeType } from '../types';
+import { resolveEffectiveOutputSource } from '../utils/resolveEffectiveOutput';
 
 const { Text } = Typography;
 
 interface OutputField {
+  name: string;
   path: string;
   type: string;
   description?: string;
   required: boolean;
+  schema: Record<string, any>;
+}
+
+interface OutputTreeField {
+  path: string;
+  type: string;
+  label?: string;
+  description?: string;
+  children: OutputTreeField[];
 }
 
 interface Props {
   node: WorkflowNode;
   nodeType?: WorkflowNodeType;
+  nodes?: WorkflowNode[];
+  edges?: WorkflowEdge[];
+  nodeTypes?: WorkflowNodeType[];
 }
 
 const DYNAMIC_OUTPUT_KEYS: Partial<Record<string, string>> = {
-  cron_trigger: 'workflowData',
-  manual_trigger: 'workflowData',
-  callable_trigger: 'workflowData',
+  cron_trigger: 'scheduledStart',
+  manual_trigger: 'manualStart',
+  callable_trigger: 'callerInput',
   code: 'codeReturn',
   sub_workflow: 'workflowReturn',
-  return_result: 'returnPrevious',
+  delay: 'previousResult',
+  if_else: 'previousResult',
+  switch: 'previousResult',
 };
 
+function CopyablePath({
+  path,
+  compact = false,
+  description,
+}: {
+  path: string;
+  compact?: boolean;
+  description?: string;
+}) {
+  const { t } = useTranslation('workflow');
+
+  return (
+    <Text
+      code
+      className={`workflow-node-output__path${
+        compact ? ' workflow-node-output__path--compact' : ''
+      }`}
+      title={description || path}
+      copyable={{
+        text: path,
+        tooltips: [t('editor.output.copyPath'), t('editor.output.pathCopied')],
+      }}
+    >
+      {path}
+    </Text>
+  );
+}
+
 function schemaType(schema: Record<string, any>): string {
   if (Array.isArray(schema.type)) return schema.type.join(' | ');
   if (typeof schema.type === 'string') return schema.type;
@@ -44,6 +87,7 @@ function outputFields(schema: Record<string, any>): OutputField[] {
 
   return Object.entries<Record<string, any>>(properties).map(
     ([name, property]) => ({
+      name,
       path: `input.${name}`,
       type: schemaType(property ?? {}),
       description:
@@ -51,150 +95,276 @@ function outputFields(schema: Record<string, any>): OutputField[] {
           ? property.description
           : undefined,
       required: required.has(name),
+      schema: property ?? {},
     }),
   );
 }
 
-export function NodeOutputSummary({ node, nodeType }: Props) {
+function outputTreeFields(
+  schema: Record<string, any>,
+  parentPath: string,
+): OutputTreeField[] {
+  const isArray = schema.type === 'array';
+  const childSchema = isArray ? schema.items : schema;
+  const childParentPath = isArray ? `${parentPath}[0]` : parentPath;
+  const properties =
+    childSchema?.properties && typeof childSchema.properties === 'object'
+      ? childSchema.properties
+      : {};
+
+  return Object.entries<Record<string, any>>(properties).map(
+    ([name, property]) => {
+      const path = `${childParentPath}.${name}`;
+      return {
+        path,
+        type: schemaType(property ?? {}),
+        description:
+          typeof property?.description === 'string'
+            ? property.description
+            : undefined,
+        children: outputTreeFields(property ?? {}, path),
+      };
+    },
+  );
+}
+
+function OutputFieldTree({ fields }: { fields: OutputTreeField[] }) {
   const { t } = useTranslation('workflow');
-  const branches = resolveOutputs(node, nodeType);
-  const dynamicOutputKey = DYNAMIC_OUTPUT_KEYS[node.type];
-  const fields = dynamicOutputKey
+
+  const renderFields = (items: OutputTreeField[]) =>
+    items.map((field) => {
+      return (
+        <div
+          key={field.path}
+          className="workflow-node-output__tree-node"
+          role="treeitem"
+          aria-expanded={field.children.length > 0 ? true : undefined}
+        >
+          <div className="workflow-node-output__tree-row">
+            <span className="workflow-node-output__tree-connector" />
+            <div className="workflow-node-output__tree-value">
+              <CopyablePath
+                path={field.path}
+                compact
+                description={field.description}
+              />
+              {field.label && (
+                <Text
+                  type="secondary"
+                  className="workflow-node-output__tree-label"
+                  ellipsis={{ tooltip: field.label }}
+                >
+                  {field.label}
+                </Text>
+              )}
+            </div>
+            <Tag bordered={false} className="workflow-node-output__tree-type">
+              {t(`editor.output.types.${field.type}`, {
+                defaultValue: field.type,
+              })}
+            </Tag>
+          </div>
+          {field.children.length > 0 && (
+            <div className="workflow-node-output__tree-children" role="group">
+              {renderFields(field.children)}
+            </div>
+          )}
+        </div>
+      );
+    });
+
+  return (
+    <div
+      className="workflow-node-output__tree"
+      role="tree"
+      aria-label={t('editor.output.nestedFields')}
+    >
+      <Text type="secondary" className="workflow-node-output__tree-title">
+        {t('editor.output.nestedFields')}
+      </Text>
+      <div className="workflow-node-output__tree-list">
+        {renderFields(fields)}
+      </div>
+    </div>
+  );
+}
+
+export function NodeOutputSummary({
+  node,
+  nodeType,
+  nodes,
+  edges,
+  nodeTypes,
+}: Props) {
+  const { t } = useTranslation('workflow');
+  const outputSource = resolveEffectiveOutputSource(
+    node,
+    nodes,
+    edges,
+    nodeTypes,
+  );
+  const effectiveNode = outputSource.passthrough ? outputSource.node : node;
+  const effectiveNodeType = outputSource.passthrough
+    ? outputSource.nodeType
+    : nodeType;
+  const effectiveOutputSchema = (effectiveNodeType?.outputSchema ??
+    {}) as Record<string, any>;
+  const dynamicOutputKey = DYNAMIC_OUTPUT_KEYS[effectiveNode.type];
+  const schemaFields = dynamicOutputKey
     ? []
-    : outputFields((nodeType?.outputSchema ?? {}) as Record<string, any>);
+    : outputFields(effectiveOutputSchema).filter(
+        (field) =>
+          !(
+            ['approval', 'human_approval', 'external_wait'].includes(
+              node.type,
+            ) && field.name === 'nodeId'
+          ),
+      );
+  const parallelBranches =
+    effectiveNode.type === 'parallel' &&
+    Array.isArray(effectiveNode.config?.branches)
+      ? (effectiveNode.config.branches as Array<{
+          id?: string;
+          label?: string;
+        }>)
+      : [];
+  const fields = schemaFields;
+  const parallelBranchFields = parallelBranches.map(
+    (branch, index): OutputTreeField => {
+      const branchLabel =
+        branch.label?.trim() ||
+        t('nodeEditors.parallel.branch', { number: index });
+      const description = t('editor.output.parallelBranchResult', {
+        name: branchLabel,
+      });
+      return {
+        path: `input.branch[${index}]`,
+        type: 'any',
+        label: description,
+        description,
+        children: [],
+      };
+    },
+  );
   const schemaDescription =
-    typeof nodeType?.outputSchema?.description === 'string'
-      ? nodeType.outputSchema.description
+    typeof effectiveOutputSchema.description === 'string'
+      ? effectiveOutputSchema.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
+    <Card
+      size="small"
+      className="workflow-node-panel__output-card"
+      role="region"
       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)',
-      }}
+      styles={{ body: { padding: 16 } }}
     >
-      <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>
+      <Text className="workflow-node-config__section-title">
+        {t('editor.output.title')}
+      </Text>
 
-      <div style={{ padding: '10px 12px' }}>
-        {branches.length > 1 && (
-          <div style={{ marginBottom: fields.length > 0 ? 10 : 0 }}>
+      <div>
+        {outputSource.passthrough && (
+          <div className="workflow-node-output__passthrough">
             <Text
               type="secondary"
-              style={{ display: 'block', marginBottom: 6, fontSize: 11 }}
+              className="workflow-node-output__passthrough-label"
             >
-              {t('editor.output.flowBranches')}
+              {t('editor.output.passthrough')}
+            </Text>
+            <Text strong className="workflow-node-output__passthrough-node">
+              {outputSource.node.label}
             </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" className="workflow-node-output__hint">
+              {t('editor.output.inputHint')}
+            </Text>
+            <div className="workflow-node-output__list">
+              {fields.map((field) => {
+                const descriptionNodeType =
+                  effectiveNode.type === 'human_approval'
+                    ? 'approval'
+                    : effectiveNode.type;
+                const description = t(
+                  `editor.output.fields.${descriptionNodeType}.${field.name}`,
+                  { defaultValue: field.description ?? '' },
+                );
+                const fieldLabel = t(
+                  `editor.output.fieldLabels.${descriptionNodeType}.${field.name}`,
+                  { defaultValue: field.name },
+                );
+                const nestedFields =
+                  effectiveNode.type === 'parallel' && field.name === 'branch'
+                    ? parallelBranchFields
+                    : outputTreeFields(field.schema, field.path);
+                return (
+                  <div key={field.path} className="workflow-node-output__field">
+                    <CopyablePath
+                      path={field.path}
+                      compact
+                      description={description}
+                    />
+                    <div className="workflow-node-output__field-content">
+                      <div className="workflow-node-output__field-head">
+                        <Text
+                          className="workflow-node-output__field-name"
+                          ellipsis={{ tooltip: fieldLabel }}
+                        >
+                          {fieldLabel}
+                        </Text>
+                        <div className="workflow-node-output__field-meta">
+                          {field.required && (
+                            <Text
+                              type="secondary"
+                              className="workflow-node-output__required"
+                            >
+                              {t('editor.output.required')}
+                            </Text>
+                          )}
+                          <Tag
+                            bordered={false}
+                            className="workflow-node-output__type"
+                          >
+                            {t(`editor.output.types.${field.type}`, {
+                              defaultValue: field.type,
+                            })}
+                          </Tag>
+                        </div>
+                      </div>
+                      {description && (
+                        <Text
+                          type="secondary"
+                          ellipsis={{ tooltip: description }}
+                          className="workflow-node-output__field-description"
+                        >
+                          {description}
+                        </Text>
+                      )}
+                      {nestedFields.length > 0 && (
+                        <OutputFieldTree fields={nestedFields} />
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </>
         ) : (
-          <Text type="secondary" style={{ fontSize: 12 }}>
-            {dynamicOutputKey
-              ? t(`editor.output.dynamic.${dynamicOutputKey}`)
-              : schemaDescription || t('editor.output.dynamic.anyValue')}
-          </Text>
+          <div className="workflow-node-output__dynamic">
+            <CopyablePath path="input" compact />
+            <Text
+              type="secondary"
+              className="workflow-node-output__dynamic-description"
+            >
+              {dynamicOutputKey
+                ? t(`editor.output.dynamic.${dynamicOutputKey}`)
+                : schemaDescription || t('editor.output.dynamic.anyValue')}
+            </Text>
+          </div>
         )}
       </div>
-    </section>
+    </Card>
   );
 }