@gadmin2n/schematics 0.0.139 → 0.0.141

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   Button,
   Card,
@@ -11,7 +11,7 @@ import {
 } from 'antd';
 import { ArrowLeftOutlined, RobotOutlined } from '@ant-design/icons';
 import type { FormInstance } from 'antd';
-import { DynamicConfigForm } from './DynamicConfigForm';
+import { SchemaForm } from '../schema-form/SchemaForm';
 import {
   CreateNodeInstanceModal,
   type AiGenerateResult,
@@ -43,19 +43,26 @@ export function NodeInstanceForm({
   onBack,
 }: NodeInstanceFormProps) {
   const [aiModalOpen, setAiModalOpen] = useState(false);
+  const [schemaError, setSchemaError] = useState<Error | null>(null);
   const isDev = useIsAgentAllowed();
+  const allowAiGeneration = isDev && !disableNodeType;
 
   const selectedNodeTypeId = Form.useWatch('nodeTypeId', form);
 
-  const selectedSchema = useMemo(() => {
+  const selectedNodeType = useMemo(() => {
     if (!selectedNodeTypeId) return null;
-    const nt = nodeTypes.find(
-      (t) => String(t.id) === String(selectedNodeTypeId),
+    return (
+      nodeTypes.find((t) => String(t.id) === String(selectedNodeTypeId)) ?? null
     );
-    return nt?.configSchema ?? null;
   }, [selectedNodeTypeId, nodeTypes]);
 
+  const handleSchemaError = useCallback((error: Error | null) => {
+    setSchemaError(error);
+  }, []);
+
   function handleAiApply(data: AiGenerateResult) {
+    if (disableNodeType) return;
+
     const currentName = form.getFieldValue('name');
     const currentDesc = form.getFieldValue('description');
     const currentConfig = form.getFieldValue('config');
@@ -75,6 +82,8 @@ export function NodeInstanceForm({
   }
 
   function applyAiData(data: AiGenerateResult) {
+    if (disableNodeType) return;
+
     form.setFieldsValue({
       nodeTypeId: data.nodeTypeId ? String(data.nodeTypeId) : undefined,
       name: data.name || undefined,
@@ -84,7 +93,12 @@ export function NodeInstanceForm({
   }
 
   return (
-    <div style={{ background: '#f0f2f5', minHeight: 'calc(100vh - 64px)' }}>
+    <div
+      style={{
+        background: 'var(--ant-color-bg-layout)',
+        minHeight: 'calc(100vh - 64px)',
+      }}
+    >
       <Card style={{ marginBottom: 16 }}>
         <div
           style={{
@@ -103,7 +117,7 @@ export function NodeInstanceForm({
               {title}
             </Title>
           </div>
-          {isDev && (
+          {allowAiGeneration && (
             <Button
               type="primary"
               icon={<RobotOutlined />}
@@ -116,7 +130,7 @@ export function NodeInstanceForm({
       </Card>
 
       <Card style={{ padding: '24px 32px' }}>
-        <Form form={form} layout="vertical" style={{ maxWidth: 600 }}>
+        <Form form={form} layout="vertical" style={{ maxWidth: 760 }}>
           <Form.Item
             name="nodeTypeId"
             label="Node Type"
@@ -134,6 +148,15 @@ export function NodeInstanceForm({
             />
           </Form.Item>
 
+          {disableNodeType && (
+            <Typography.Paragraph
+              type="secondary"
+              style={{ marginTop: -16, marginBottom: 24 }}
+            >
+              Node type cannot be changed after the instance is created.
+            </Typography.Paragraph>
+          )}
+
           <Form.Item
             name="name"
             label="Instance Name"
@@ -150,30 +173,40 @@ export function NodeInstanceForm({
             <Switch />
           </Form.Item>
 
-          {selectedSchema && (
-            <>
-              <Title level={5} style={{ color: '#595959' }}>
-                Configuration
-              </Title>
-              <DynamicConfigForm schema={selectedSchema} />
-            </>
+          {selectedNodeType?.configSchema && (
+            <Title level={5} style={{ color: 'var(--ant-color-text-secondary)' }}>
+              Configuration
+            </Title>
           )}
+          <SchemaForm
+            schema={selectedNodeType?.configSchema ?? null}
+            uiSchema={selectedNodeType?.uiSchema ?? null}
+            disabled={submitting}
+            onSchemaError={handleSchemaError}
+          />
 
           <div style={{ marginTop: 24, display: 'flex', gap: 12 }}>
             <Button onClick={onBack}>Cancel</Button>
-            <Button type="primary" loading={submitting} onClick={onSubmit}>
+            <Button
+              type="primary"
+              loading={submitting}
+              disabled={Boolean(schemaError)}
+              onClick={onSubmit}
+            >
               {submitText}
             </Button>
           </div>
         </Form>
       </Card>
 
-      <CreateNodeInstanceModal
-        open={aiModalOpen}
-        nodeTypes={nodeTypes}
-        onClose={() => setAiModalOpen(false)}
-        onApply={handleAiApply}
-      />
+      {!disableNodeType && (
+        <CreateNodeInstanceModal
+          open={aiModalOpen}
+          nodeTypes={nodeTypes}
+          onClose={() => setAiModalOpen(false)}
+          onApply={handleAiApply}
+        />
+      )}
     </div>
   );
 }

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/create.tsx

@@ -3,6 +3,7 @@ import { Form, Spin, message } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { customRequest } from 'helpers/http';
 import { NodeInstanceForm } from './components/NodeInstanceForm';
+import { schemaConfigDefaults } from './schema-form/schema-defaults';
 import type { WorkflowNodeType } from '../types';
 
 export default function NodeInstanceCreatePage() {
@@ -25,21 +26,35 @@ export default function NodeInstanceCreatePage() {
   const selectedNodeTypeId = Form.useWatch('nodeTypeId', form);
   useEffect(() => {
     if (selectedNodeTypeId) {
-      form.setFieldValue('config', undefined);
+      const selectedNodeType = nodeTypes.find(
+        (nodeType) => String(nodeType.id) === String(selectedNodeTypeId),
+      );
+      form.setFieldValue(
+        'config',
+        schemaConfigDefaults(selectedNodeType?.configSchema),
+      );
     }
-  }, [selectedNodeTypeId, form]);
+  }, [selectedNodeTypeId, form, nodeTypes]);
 
   async function handleSubmit() {
     try {
       const values = await form.validateFields();
+      const config = values.config ?? {};
+      if (
+        config === null ||
+        typeof config !== 'object' ||
+        Array.isArray(config)
+      ) {
+        message.error('Configuration must be a JSON object');
+        return;
+      }
       setSubmitting(true);
       await customRequest('workflowNodeInstance/createOne', 'POST', {
-        nodeType: { connect: { id: Number(values.nodeTypeId) } },
+        nodeTypeId: Number(values.nodeTypeId),
         name: values.name,
-        description: values.description || null,
-        config: JSON.stringify(values.config ?? {}),
+        description: values.description || undefined,
+        config,
         isEnabled: values.isEnabled ?? true,
-        creator: '',
       });
       message.success('Created successfully');
       navigate('/admin/workflow/node-instances');

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/edit.tsx

@@ -3,15 +3,12 @@ import { Form, Spin, message } from 'antd';
 import { useNavigate, useParams } from 'react-router-dom';
 import { customRequest } from 'helpers/http';
 import { NodeInstanceForm } from './components/NodeInstanceForm';
-import type { WorkflowNodeType } from '../types';
+import type { WorkflowNodeInstance, WorkflowNodeType } from '../types';
 
-interface NodeInstance {
-  id: string;
-  nodeTypeId: string;
-  name: string;
-  description: string | null;
-  config: Record<string, any>;
-  isEnabled: boolean;
+type NodeInstance = WorkflowNodeInstance;
+
+function normalizeDescription(value: string | null | undefined): string | null {
+  return value === '' || value == null ? null : value;
 }
 
 export default function NodeInstanceEditPage() {
@@ -35,8 +32,8 @@ export default function NodeInstanceEditPage() {
             nodeTypeId: true,
             name: true,
             description: true,
-            config: true,
             isEnabled: true,
+            config: true,
             nodeType: {
               select: { label: true, category: true, configSchema: true },
             },
@@ -50,10 +47,7 @@ export default function NodeInstanceEditPage() {
         name: recordRes.name,
         description: recordRes.description ?? '',
         isEnabled: recordRes.isEnabled,
-        config:
-          typeof recordRes.config === 'string'
-            ? JSON.parse(recordRes.config)
-            : recordRes.config,
+        config: recordRes.config,
       });
     } catch (e: any) {
       message.error(e?.message ?? 'Failed to load');
@@ -69,15 +63,18 @@ export default function NodeInstanceEditPage() {
   async function handleSubmit() {
     try {
       const values = await form.validateFields();
-      setSubmitting(true);
-      await customRequest(`workflowNodeInstance/updateUnique/${id}`, 'PATCH', {
-        nodeTypeId: Number(values.nodeTypeId),
+      if (!record) return;
+
+      const update = {
         name: values.name,
-        description: values.description || null,
-        config: JSON.stringify(values.config ?? {}),
+        description: normalizeDescription(values.description),
         isEnabled: values.isEnabled ?? true,
-      });
-      message.success('Updated successfully');
+        config: values.config ?? {},
+      };
+
+      setSubmitting(true);
+      await customRequest(`workflowNodeInstance/${id}`, 'PATCH', update);
+      message.success('Changes saved');
       navigate('/admin/workflow/node-instances');
     } catch (e: any) {
       if (e?.errorFields) return;

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/index.tsx

@@ -10,7 +10,6 @@ import {
   Table,
   Tag,
   Tooltip,
-  Typography,
   message,
 } from 'antd';
 import {
@@ -22,9 +21,10 @@ import {
 } from '@ant-design/icons';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import { customRequest } from 'helpers/http';
+import { PageHeader } from 'components';
+import { PAGE_WRAPPER_STYLE, SEARCH_CARD_PROPS } from 'constants/layout';
 import type { WorkflowNodeType } from '../types';
 
-const { Title } = Typography;
 const PAGE_SIZE = 20;
 
 interface NodeInstance {
@@ -226,18 +226,10 @@ export default function NodeInstanceListPage() {
   ];
 
   return (
-    <div style={{ background: '#f0f2f5', minHeight: 'calc(100vh - 64px)' }}>
-      <Card style={{ marginBottom: 16 }}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
-        >
-          <Title level={4} style={{ margin: 0 }}>
-            Node instance mgnts
-          </Title>
+    <div style={PAGE_WRAPPER_STYLE}>
+      <PageHeader
+        title="Node instance mgnts"
+        extra={
           <Space>
             <Button
               type="primary"
@@ -248,10 +240,10 @@ export default function NodeInstanceListPage() {
             </Button>
             <Button icon={<ReloadOutlined />} onClick={fetchData} />
           </Space>
-        </div>
-      </Card>
+        }
+      />
 
-      <Card style={{ marginBottom: 16 }}>
+      <Card {...SEARCH_CARD_PROPS}>
         <Space wrap>
           <Select
             placeholder="Node Type"

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/schema-form/SchemaField.tsx

@@ -0,0 +1,311 @@
+import React from 'react';
+import { Alert, Button, Form, Space, Typography } from 'antd';
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import type { JsonSchema, UiSchema } from './schema.types';
+import type { WidgetProps, WidgetRegistry } from './widget-registry';
+import { useTranslation } from 'react-i18next';
+
+type FieldPath = Array<string | number>;
+
+interface SchemaFieldProps {
+  schema: JsonSchema;
+  uiSchema?: UiSchema;
+  name: FieldPath;
+  registry: WidgetRegistry;
+  disabled?: boolean;
+  required?: boolean;
+  label?: string;
+  root?: boolean;
+}
+
+export function resolveChildUiSchema(
+  uiSchema: UiSchema | undefined,
+  key: string,
+): UiSchema | undefined {
+  const nested = uiSchema?.fields?.[key] ?? uiSchema?.[key];
+  return nested && typeof nested === 'object' && !Array.isArray(nested)
+    ? (nested as UiSchema)
+    : undefined;
+}
+
+function ObjectPresenceControl() {
+  return null;
+}
+
+function defaultValue(schema: JsonSchema): unknown {
+  if (schema.default !== undefined) return schema.default;
+  if (schema.type === 'object') return {};
+  if (schema.type === 'array') return [];
+  if (schema.type === 'boolean') return false;
+  return undefined;
+}
+
+function inferredWidget(schema: JsonSchema): string {
+  if (schema.enum) return 'select';
+  if (schema.type === 'number' || schema.type === 'integer') return 'number';
+  if (schema.type === 'boolean') return 'boolean';
+  return 'text';
+}
+
+function requiredPropertiesRule(
+  schema: JsonSchema,
+  requiredMessage: (label: string) => string,
+) {
+  const requiredKeys = schema.required ?? [];
+  if (requiredKeys.length === 0) return undefined;
+
+  return {
+    validator: async (_: unknown, value: unknown) => {
+      const record =
+        value && typeof value === 'object' && !Array.isArray(value)
+          ? (value as Record<string, unknown>)
+          : {};
+      const missing = requiredKeys.filter((key) => {
+        const fieldValue = record[key];
+        return (
+          fieldValue === undefined ||
+          fieldValue === null ||
+          (typeof fieldValue === 'string' && !fieldValue.trim())
+        );
+      });
+      if (missing.length === 0) return;
+
+      const labels = missing.map(
+        (key) => schema.properties?.[key]?.title ?? key,
+      );
+      throw new Error(requiredMessage(labels.join(', ')));
+    },
+  };
+}
+
+export function SchemaField({
+  schema,
+  uiSchema,
+  name,
+  registry,
+  disabled,
+  required,
+  label,
+  root,
+}: SchemaFieldProps) {
+  const { t, i18n } = useTranslation('workflow');
+  const fieldKey = String(name.at(-1) ?? 'configuration');
+  const fieldLabel =
+    label ??
+    (i18n.resolvedLanguage === 'zh_CN'
+      ? t(`schema.fields.${fieldKey}`, {
+          defaultValue: schema.title ?? fieldKey,
+        })
+      : (schema.title ?? fieldKey));
+
+  if (uiSchema?.widget) {
+    if (!registry.has(uiSchema.widget)) {
+      return (
+        <Alert
+          type="error"
+          showIcon
+          message={t('schema.unsupportedWidget', { name: uiSchema.widget })}
+        />
+      );
+    }
+    const Widget = registry.get(uiSchema.widget);
+    const propertiesRule = requiredPropertiesRule(schema, (requiredLabel) =>
+      t('schema.required', { label: requiredLabel }),
+    );
+    return (
+      <Form.Item
+        name={name}
+        label={root ? undefined : fieldLabel}
+        tooltip={schema.description}
+        initialValue={schema.default}
+        rules={[
+          ...(required
+            ? [
+                {
+                  required: true,
+                  message: t('schema.required', { label: fieldLabel }),
+                },
+              ]
+            : []),
+          ...(propertiesRule ? [propertiesRule] : []),
+        ]}
+      >
+        <Widget
+          {...({
+            disabled,
+            schema,
+            uiOptions: uiSchema.options,
+          } as WidgetProps)}
+        />
+      </Form.Item>
+    );
+  }
+
+  if (schema.type === 'object' || schema.properties) {
+    const fields = Object.entries(schema.properties ?? {}).map(
+      ([key, childSchema]) => (
+        <SchemaField
+          key={key}
+          schema={childSchema}
+          uiSchema={resolveChildUiSchema(uiSchema, key)}
+          name={[...name, key]}
+          registry={registry}
+          disabled={disabled}
+          required={schema.required?.includes(key)}
+        />
+      ),
+    );
+
+    if (root) return <>{fields}</>;
+    return (
+      <section style={{ marginBottom: 20 }}>
+        {required && (
+          <Form.Item
+            name={name}
+            hidden
+            rules={[
+              {
+                validator: async (_, value) => {
+                  if (value === undefined || value === null) {
+                    throw new Error(
+                      t('schema.required', { label: fieldLabel }),
+                    );
+                  }
+                },
+              },
+            ]}
+          >
+            <ObjectPresenceControl />
+          </Form.Item>
+        )}
+        <Typography.Text strong>{fieldLabel}</Typography.Text>
+        {schema.description && (
+          <Typography.Paragraph type="secondary" style={{ marginBottom: 12 }}>
+            {schema.description}
+          </Typography.Paragraph>
+        )}
+        <div
+          style={{
+            borderLeft: '2px solid #f0f0f0',
+            marginTop: 10,
+            paddingLeft: 16,
+          }}
+        >
+          {fields}
+        </div>
+      </section>
+    );
+  }
+
+  if (schema.type === 'array') {
+    const itemSchema = schema.items ?? { type: 'string' };
+    const singularLabel = itemSchema.title ?? fieldLabel.replace(/s$/, '');
+    return (
+      <Form.Item
+        label={fieldLabel}
+        tooltip={schema.description}
+        required={required}
+      >
+        <Form.List
+          name={name}
+          rules={
+            required
+              ? [
+                  {
+                    validator: async (_, value) => {
+                      if (!Array.isArray(value) || value.length === 0) {
+                        throw new Error(
+                          t('schema.required', { label: fieldLabel }),
+                        );
+                      }
+                    },
+                  },
+                ]
+              : undefined
+          }
+        >
+          {(fields, { add, remove }, { errors }) => (
+            <Space direction="vertical" style={{ width: '100%' }}>
+              {fields.map((field, index) => (
+                <div
+                  key={field.key}
+                  style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}
+                >
+                  <div style={{ flex: 1 }}>
+                    <SchemaField
+                      schema={itemSchema}
+                      uiSchema={uiSchema?.items}
+                      name={[field.name]}
+                      registry={registry}
+                      disabled={disabled}
+                      label={`${singularLabel} ${index + 1}`}
+                    />
+                  </div>
+                  <Button
+                    aria-label={t('schema.remove', {
+                      label: singularLabel,
+                      index: index + 1,
+                    })}
+                    icon={<DeleteOutlined />}
+                    danger
+                    type="text"
+                    disabled={disabled}
+                    onClick={() => remove(field.name)}
+                  />
+                </div>
+              ))}
+              <Button
+                aria-label={t('schema.add', { label: fieldLabel })}
+                icon={<PlusOutlined />}
+                disabled={disabled}
+                onClick={() => add(defaultValue(itemSchema))}
+              >
+                {t('schema.add', { label: fieldLabel })}
+              </Button>
+              <Form.ErrorList errors={errors} />
+            </Space>
+          )}
+        </Form.List>
+      </Form.Item>
+    );
+  }
+
+  const widgetName = inferredWidget(schema);
+  if (!registry.has(widgetName)) {
+    return (
+      <Alert
+        type="error"
+        showIcon
+        message={t('schema.unsupportedWidget', { name: widgetName })}
+      />
+    );
+  }
+  const Widget = registry.get(widgetName);
+
+  return (
+    <Form.Item
+      name={name}
+      label={fieldLabel}
+      tooltip={schema.description}
+      initialValue={schema.default}
+      rules={
+        required
+          ? [
+              {
+                required: true,
+                message: t('schema.required', { label: fieldLabel }),
+              },
+            ]
+          : undefined
+      }
+    >
+      <Widget
+        {...({
+          disabled,
+          schema,
+          uiOptions: uiSchema?.options,
+        } as WidgetProps)}
+      />
+    </Form.Item>
+  );
+}