@gadmin2n/schematics 0.0.139 → 0.0.141

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

@@ -0,0 +1,303 @@
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import {
+  Alert,
+  Button,
+  Card,
+  Input,
+  InputNumber,
+  Select,
+  Space,
+  Switch,
+  Typography,
+  message,
+} from 'antd';
+import { customRequest } from 'helpers/http';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ParameterBindingEditor } from '../../components/ParameterBindingEditor';
+import type { ParameterBinding } from '../../types/parameter-binding';
+import type { WidgetProps } from '../schema-form/widget-registry';
+
+type Outcome = { code: string; label: string };
+type ExternalWaitConfig = {
+  dispatchWorkflowId?: string;
+  callbackWorkflowId?: string;
+  outcomes?: Outcome[];
+  timeout?: { durationSeconds?: number; outcome?: string };
+  businessDataBinding?: ParameterBinding;
+  participantsBinding?: ParameterBinding;
+};
+type WorkflowOption = { id: string; name: string };
+
+export function ExternalWaitConfigEditor({
+  value,
+  onChange,
+  disabled,
+}: WidgetProps<ExternalWaitConfig>) {
+  const { t } = useTranslation('workflow');
+  const config = value ?? {};
+  const outcomes = config.outcomes ?? [];
+  const [options, setOptions] = useState<{
+    dispatchWorkflows: WorkflowOption[];
+    callbackWorkflows: WorkflowOption[];
+  }>({ dispatchWorkflows: [], callbackWorkflows: [] });
+
+  useEffect(() => {
+    customRequest<{
+      dispatchWorkflows: WorkflowOption[];
+      callbackWorkflows: WorkflowOption[];
+    }>('workflow/external-interaction-options', 'GET')
+      .then(setOptions)
+      .catch((error: any) =>
+        message.error(error?.message ?? t('externalWait.workflowLoadFailed')),
+      );
+  }, [t]);
+
+  function update(patch: Partial<ExternalWaitConfig>) {
+    const next = { ...config, ...patch };
+    for (const [key, item] of Object.entries(patch)) {
+      if (item === undefined) delete (next as Record<string, unknown>)[key];
+    }
+    onChange(next);
+  }
+
+  function updateOutcome(index: number, patch: Partial<Outcome>) {
+    update({
+      outcomes: outcomes.map((item, itemIndex) =>
+        itemIndex === index ? { ...item, ...patch } : item,
+      ),
+    });
+  }
+
+  return (
+    <Space direction="vertical" size={16} style={{ width: '100%' }}>
+      <Alert
+        type="info"
+        showIcon
+        message={t('externalWait.description')}
+        description={t('externalWait.hint')}
+      />
+
+      <Card size="small" title={t('externalWait.workflows')}>
+        <Space direction="vertical" size={12} style={{ width: '100%' }}>
+          <div>
+            <Typography.Text strong>
+              {t('externalWait.dispatchWorkflow')} *
+            </Typography.Text>
+            <Select
+              value={config.dispatchWorkflowId || undefined}
+              disabled={disabled}
+              options={options.dispatchWorkflows.map((workflow) => ({
+                value: workflow.id,
+                label: workflow.name,
+              }))}
+              placeholder={t('externalWait.selectDispatchWorkflow')}
+              onChange={(dispatchWorkflowId) => update({ dispatchWorkflowId })}
+              showSearch
+              optionFilterProp="label"
+              style={{ width: '100%', marginTop: 6 }}
+            />
+            <Typography.Text type="secondary">
+              {t('externalWait.dispatchHint')}
+            </Typography.Text>
+          </div>
+
+          <div>
+            <Typography.Text strong>
+              {t('externalWait.callbackWorkflow')}
+            </Typography.Text>
+            <Select
+              value={config.callbackWorkflowId || undefined}
+              disabled={disabled}
+              allowClear
+              options={options.callbackWorkflows.map((workflow) => ({
+                value: workflow.id,
+                label: workflow.name,
+              }))}
+              placeholder={t('externalWait.selectCallbackWorkflow')}
+              onChange={(callbackWorkflowId) => update({ callbackWorkflowId })}
+              showSearch
+              optionFilterProp="label"
+              style={{ width: '100%', marginTop: 6 }}
+            />
+            <Typography.Text type="secondary">
+              {t('externalWait.callbackHint')}
+            </Typography.Text>
+          </div>
+        </Space>
+      </Card>
+
+      <Card size="small" title={t('externalWait.data')}>
+        <Space direction="vertical" size={14} style={{ width: '100%' }}>
+          <div>
+            <Space>
+              <Switch
+                size="small"
+                checked={Boolean(config.businessDataBinding)}
+                disabled={disabled}
+                onChange={(checked) =>
+                  update({
+                    businessDataBinding: checked
+                      ? { source: 'INPUT', path: 'data' }
+                      : undefined,
+                  })
+                }
+              />
+              <Typography.Text>
+                {t('externalWait.customBusinessData')}
+              </Typography.Text>
+            </Space>
+            {!config.businessDataBinding && (
+              <Typography.Paragraph
+                type="secondary"
+                style={{ margin: '6px 0 0' }}
+              >
+                {t('externalWait.defaultBusinessData')}
+              </Typography.Paragraph>
+            )}
+            {config.businessDataBinding && (
+              <div style={{ marginTop: 8 }}>
+                <ParameterBindingEditor
+                  name={t('externalWait.businessData')}
+                  defaultPath="data"
+                  value={config.businessDataBinding}
+                  disabled={disabled}
+                  onChange={(businessDataBinding) =>
+                    update({ businessDataBinding })
+                  }
+                />
+              </div>
+            )}
+          </div>
+
+          <div>
+            <Space>
+              <Switch
+                size="small"
+                checked={Boolean(config.participantsBinding)}
+                disabled={disabled}
+                onChange={(checked) =>
+                  update({
+                    participantsBinding: checked
+                      ? { source: 'WORKFLOW', path: 'participants' }
+                      : undefined,
+                  })
+                }
+              />
+              <Typography.Text>
+                {t('externalWait.sendParticipants')}
+              </Typography.Text>
+            </Space>
+            {config.participantsBinding && (
+              <div style={{ marginTop: 8 }}>
+                <ParameterBindingEditor
+                  name={t('externalWait.participants')}
+                  defaultPath="participants"
+                  value={config.participantsBinding}
+                  disabled={disabled}
+                  onChange={(participantsBinding) =>
+                    update({ participantsBinding })
+                  }
+                />
+              </div>
+            )}
+          </div>
+        </Space>
+      </Card>
+
+      <Card
+        size="small"
+        title={t('externalWait.outcomes')}
+        extra={
+          <Button
+            type="link"
+            size="small"
+            icon={<PlusOutlined />}
+            disabled={disabled}
+            onClick={() =>
+              update({
+                outcomes: [
+                  ...outcomes,
+                  { code: `RESULT_${outcomes.length + 1}`, label: '' },
+                ],
+              })
+            }
+          >
+            {t('externalWait.addOutcome')}
+          </Button>
+        }
+      >
+        <Space direction="vertical" size={10} style={{ width: '100%' }}>
+          {outcomes.map((outcome, index) => (
+            <Space.Compact key={index} style={{ width: '100%' }}>
+              <Input
+                aria-label={t('externalWait.outcomeLabel')}
+                value={outcome.label}
+                disabled={disabled}
+                placeholder={t('externalWait.outcomeLabel')}
+                onChange={(event) =>
+                  updateOutcome(index, { label: event.target.value })
+                }
+              />
+              <Input
+                aria-label={t('externalWait.outcomeCode')}
+                value={outcome.code}
+                disabled={disabled}
+                placeholder="COMPLETED"
+                onChange={(event) =>
+                  updateOutcome(index, {
+                    code: normalizeOutcomeCode(event.target.value),
+                  })
+                }
+              />
+              <Button
+                aria-label={t('externalWait.removeOutcome')}
+                icon={<DeleteOutlined />}
+                disabled={disabled || outcomes.length <= 1}
+                onClick={() =>
+                  update({
+                    outcomes: outcomes.filter(
+                      (_item, itemIndex) => itemIndex !== index,
+                    ),
+                  })
+                }
+              />
+            </Space.Compact>
+          ))}
+          <Typography.Text type="secondary">
+            {t('externalWait.outcomeHint')}
+          </Typography.Text>
+        </Space>
+      </Card>
+
+      <Card size="small" title={t('externalWait.timeout')}>
+        <InputNumber
+          min={1}
+          precision={0}
+          value={config.timeout?.durationSeconds ?? 86400}
+          disabled={disabled}
+          addonAfter={t('externalWait.seconds')}
+          onChange={(durationSeconds) =>
+            update({
+              timeout: {
+                durationSeconds: durationSeconds ?? 86400,
+                outcome: 'TIMEOUT',
+              },
+            })
+          }
+          style={{ width: '100%' }}
+        />
+        <Typography.Paragraph type="secondary" style={{ margin: '8px 0 0' }}>
+          {t('externalWait.timeoutHint')}
+        </Typography.Paragraph>
+      </Card>
+    </Space>
+  );
+}
+
+function normalizeOutcomeCode(value: string): string {
+  return value
+    .toUpperCase()
+    .replace(/[^A-Z0-9_]/g, '_')
+    .replace(/_+/g, '_');
+}

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

@@ -0,0 +1,189 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Form } from 'antd';
+import type { FormInstance } from 'antd';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import i18n from '../../../../i18n';
+import { SchemaForm } from '../schema-form/SchemaForm';
+
+vi.mock('@monaco-editor/react', () => ({
+  default: ({
+    value,
+    onChange,
+    height,
+  }: {
+    value?: string;
+    onChange?(value: string): void;
+    height?: string | number;
+  }) => (
+    <textarea
+      aria-label="JSON code editor"
+      data-height={height}
+      value={value}
+      onChange={(event) => onChange?.(event.target.value)}
+    />
+  ),
+}));
+
+vi.mock('helpers/http', () => ({
+  customRequest: vi.fn().mockResolvedValue([]),
+}));
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: () => ({
+    matches: false,
+    addListener: () => undefined,
+    removeListener: () => undefined,
+    addEventListener: () => undefined,
+    removeEventListener: () => undefined,
+    dispatchEvent: () => false,
+  }),
+});
+
+const httpSchema = {
+  type: 'object' as const,
+  properties: {
+    connectionRef: { type: 'string' as const },
+    method: { type: 'string' as const },
+    path: { type: 'string' as const },
+  },
+  required: ['connectionRef', 'method', 'path'],
+};
+
+function renderEditor() {
+  let form!: FormInstance;
+
+  function TestForm() {
+    [form] = Form.useForm();
+    return (
+      <Form form={form}>
+        <SchemaForm
+          schema={httpSchema}
+          uiSchema={{ widget: 'http-request-config' }}
+        />
+      </Form>
+    );
+  }
+
+  render(<TestForm />);
+  return form;
+}
+
+describe('HttpRequestConfigEditor', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    void i18n.changeLanguage('en');
+  });
+
+  it('renders Workflow controls in Chinese when zh_CN is active', async () => {
+    await i18n.changeLanguage('zh_CN');
+
+    renderEditor();
+
+    expect(screen.getByText('连接与操作')).toBeInTheDocument();
+    expect(screen.queryByText('请求参数')).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /添加查询参数/ }),
+    ).toBeInTheDocument();
+  });
+
+  it('stores a query field as a direct input binding', async () => {
+    const form = renderEditor();
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /Add query parameter/ }),
+    );
+
+    await waitFor(() =>
+      expect(form.getFieldValue('config')).toMatchObject({
+        queryBindings: {
+          departmentId: { source: 'INPUT', path: 'departmentId' },
+        },
+      }),
+    );
+    expect(screen.getByText('input.departmentId')).toBeInTheDocument();
+  });
+
+  it('offers friendly system-provided values for request fields', async () => {
+    const form = renderEditor();
+
+    fireEvent.click(screen.getByRole('button', { name: /Add body field/ }));
+    fireEvent.mouseDown(
+      await screen.findByRole('combobox', {
+        name: /ticketId value source/,
+      }),
+    );
+    fireEvent.click(await screen.findByText('System-provided'));
+
+    fireEvent.mouseDown(
+      screen.getByRole('combobox', { name: /System value for ticketId/ }),
+    );
+    const callbackTokenOptions = await screen.findAllByText(
+      'External result callback token',
+    );
+    fireEvent.click(callbackTokenOptions[callbackTokenOptions.length - 1]);
+
+    await waitFor(() =>
+      expect(form.getFieldValue('config')).toMatchObject({
+        bodyBindings: {
+          ticketId: { source: 'SYSTEM', path: 'callback.token' },
+        },
+      }),
+    );
+  });
+
+  it('marks required request fields and rejects a missing Connection', async () => {
+    const form = renderEditor();
+
+    for (const label of ['Connection', 'Method', 'Path']) {
+      expect(screen.getByText(label).closest('label')).toHaveClass(
+        'ant-form-item-required',
+      );
+    }
+
+    await expect(form.validateFields()).rejects.toMatchObject({
+      errorFields: [expect.objectContaining({ name: ['config'] })],
+    });
+  });
+
+  it('stores the visible Method and Path defaults in the form', async () => {
+    const form = renderEditor();
+
+    await waitFor(() =>
+      expect(form.getFieldValue('config')).toMatchObject({
+        method: 'GET',
+        path: '/',
+      }),
+    );
+  });
+
+  it('uses a large JSON editor with live validation, formatting, and expansion', async () => {
+    const form = renderEditor();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Advanced JSON' }));
+
+    const editor = await screen.findByLabelText('JSON code editor');
+    expect(editor).toHaveAttribute('data-height', '300px');
+    expect(
+      screen.getByRole('button', { name: /Format JSON/ }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /Expand editor/ }),
+    ).toBeInTheDocument();
+    expect(screen.getByText('{{system.callback.token}}')).toBeInTheDocument();
+
+    fireEvent.change(editor, { target: { value: '{' } });
+    expect(await screen.findByText(/line 1, column 2/i)).toBeInTheDocument();
+
+    fireEvent.change(editor, {
+      target: { value: '{"title":"{{workflow.title}}"}' },
+    });
+    await waitFor(() =>
+      expect(form.getFieldValue(['config', 'body'])).toEqual({
+        title: '{{workflow.title}}',
+      }),
+    );
+    expect(screen.queryByText(/line 1, column 2/i)).not.toBeInTheDocument();
+  });
+});