@gadmin2n/schematics 0.0.144 → 0.0.145

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

@@ -0,0 +1,620 @@
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import {
+  Button,
+  Card,
+  Collapse,
+  Divider,
+  Input,
+  InputNumber,
+  Radio,
+  Select,
+  Space,
+  Typography,
+} from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { WidgetProps } from '../schema-form/widget-registry';
+import { eventCatalogApi, type BusinessEventOption } from './event-catalog.api';
+
+type EventTriggerConfig = {
+  registrationCode: string;
+  match?: EventMatch;
+  processingMode: 'PARALLEL' | 'SERIAL_BY_KEY';
+  concurrencyKeyPath?: string;
+  maxConcurrency?: number | null;
+};
+
+type EventMatchOperator = 'EQ' | 'NEQ' | 'EMPTY' | 'NOT_EMPTY';
+type EventMatchCondition = {
+  id: string;
+  left: { source: 'WORKFLOW'; path: string };
+  operator: EventMatchOperator;
+  right?: {
+    source: 'FIXED';
+    valueType: 'STRING' | 'NUMBER' | 'BOOLEAN';
+    value: string;
+  };
+};
+type EventMatch = {
+  combineOperation: 'AND' | 'OR';
+  conditions: EventMatchCondition[];
+};
+
+const DEFAULT_CONFIG: EventTriggerConfig = {
+  registrationCode: '',
+  processingMode: 'PARALLEL',
+};
+
+const UNARY_MATCH_OPERATORS = new Set<EventMatchOperator>([
+  'EMPTY',
+  'NOT_EMPTY',
+]);
+
+function fixedValueType(field?: BusinessEventOption['fields'][number]) {
+  if (field?.type === 'number') return 'NUMBER' as const;
+  if (field?.type === 'boolean') return 'BOOLEAN' as const;
+  return 'STRING' as const;
+}
+
+function newMatchCondition(
+  field?: BusinessEventOption['fields'][number],
+): EventMatchCondition {
+  return {
+    id: `condition-${crypto.randomUUID()}`,
+    left: { source: 'WORKFLOW', path: field?.path ?? '' },
+    operator: 'EQ',
+    right: {
+      source: 'FIXED',
+      valueType: fixedValueType(field),
+      value: '',
+    },
+  };
+}
+
+export function EventTriggerConfigEditor({
+  value,
+  onChange,
+  disabled,
+}: WidgetProps<EventTriggerConfig | undefined>) {
+  const { t } = useTranslation('workflow');
+  const [events, setEvents] = useState<BusinessEventOption[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const config = { ...DEFAULT_CONFIG, ...value };
+  const selectedEvent = useMemo(
+    () =>
+      events.find(
+        (event) => event.registrationCode === config.registrationCode,
+      ),
+    [config.registrationCode, events],
+  );
+  const serialKeyFields = useMemo(
+    () =>
+      (selectedEvent?.fields ?? []).filter(
+        (field) =>
+          !field.nullable &&
+          ['string', 'number', 'boolean'].includes(field.type),
+      ),
+    [selectedEvent],
+  );
+  const matchFields = useMemo(
+    () =>
+      (selectedEvent?.fields ?? []).filter((field) =>
+        ['string', 'number', 'boolean'].includes(field.type),
+      ),
+    [selectedEvent],
+  );
+  const defaultMatchField =
+    matchFields.find((field) => !field.primaryKey) ?? matchFields[0];
+
+  useEffect(() => {
+    let active = true;
+    eventCatalogApi
+      .list()
+      .then((items) => {
+        if (!active) return;
+        setEvents(items);
+        setLoadFailed(false);
+      })
+      .catch(() => {
+        if (active) setLoadFailed(true);
+      })
+      .finally(() => {
+        if (active) setLoading(false);
+      });
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  function selectEvent(registrationCode: string) {
+    const event = events.find(
+      (item) => item.registrationCode === registrationCode,
+    );
+    const availableFields = (event?.fields ?? []).filter(
+      (field) =>
+        !field.nullable && ['string', 'number', 'boolean'].includes(field.type),
+    );
+    const availablePaths = new Set(availableFields.map((field) => field.path));
+    const concurrencyKeyPath = availablePaths.has(
+      config.concurrencyKeyPath ?? '',
+    )
+      ? config.concurrencyKeyPath
+      : (availableFields.find((field) => field.path === event?.defaultKeyPath)
+          ?.path ?? availableFields[0]?.path);
+
+    onChange({
+      registrationCode,
+      processingMode: config.processingMode,
+      ...(config.processingMode === 'SERIAL_BY_KEY'
+        ? {
+            concurrencyKeyPath,
+            maxConcurrency: config.maxConcurrency ?? 20,
+          }
+        : {}),
+    });
+  }
+
+  function changeProcessingMode(
+    processingMode: EventTriggerConfig['processingMode'],
+  ) {
+    if (processingMode === 'PARALLEL') {
+      onChange({
+        registrationCode: config.registrationCode,
+        ...(config.match ? { match: config.match } : {}),
+        processingMode,
+      });
+      return;
+    }
+
+    onChange({
+      ...config,
+      processingMode,
+      concurrencyKeyPath:
+        config.concurrencyKeyPath ??
+        serialKeyFields.find(
+          (field) => field.path === selectedEvent?.defaultKeyPath,
+        )?.path ??
+        serialKeyFields[0]?.path,
+      maxConcurrency: config.maxConcurrency ?? 20,
+    });
+  }
+
+  function changeMatchMode(mode: 'ALWAYS' | 'CONDITIONAL') {
+    if (mode === 'ALWAYS') {
+      const { match: _match, ...next } = config;
+      onChange(next);
+      return;
+    }
+    onChange({
+      ...config,
+      match: {
+        combineOperation: 'AND',
+        conditions: [newMatchCondition(defaultMatchField)],
+      },
+    });
+  }
+
+  function updateMatchCondition(index: number, next: EventMatchCondition) {
+    if (!config.match) return;
+    onChange({
+      ...config,
+      match: {
+        ...config.match,
+        conditions: config.match.conditions.map((condition, current) =>
+          current === index ? next : condition,
+        ),
+      },
+    });
+  }
+
+  function fieldLabel(field: BusinessEventOption['fields'][number]) {
+    const column = field.path.split('.').at(-1) ?? field.label;
+    if (field.path.startsWith('after.'))
+      return t('nodeEditors.event.newDataField', { field: column });
+    if (field.path.startsWith('before.'))
+      return t('nodeEditors.event.oldDataField', { field: column });
+    return t('nodeEditors.event.primaryKeyField', { field: column });
+  }
+
+  const eventOptions = events.map((event) => ({
+    value: event.registrationCode,
+    label: event.label,
+  }));
+  if (
+    config.registrationCode &&
+    !eventOptions.some((option) => option.value === config.registrationCode)
+  ) {
+    eventOptions.unshift({
+      value: config.registrationCode,
+      label: config.registrationCode,
+    });
+  }
+
+  return (
+    <Space direction="vertical" size={12} style={{ width: '100%' }}>
+      <Card size="small" title={t('nodeEditors.event.businessEvent')}>
+        <Select
+          aria-label={t('nodeEditors.event.businessEvent')}
+          value={config.registrationCode || undefined}
+          disabled={disabled}
+          loading={loading}
+          showSearch
+          optionFilterProp="label"
+          placeholder={t('nodeEditors.event.selectEvent')}
+          options={eventOptions}
+          onChange={selectEvent}
+          style={{ width: '100%' }}
+        />
+        {loadFailed && (
+          <Typography.Text
+            type="danger"
+            className="workflow-node-config__inline-message"
+          >
+            {t('nodeEditors.event.loadFailed')}
+          </Typography.Text>
+        )}
+        {!loading && !loadFailed && events.length === 0 && (
+          <Typography.Text
+            type="secondary"
+            className="workflow-node-config__inline-message"
+          >
+            {t('nodeEditors.event.empty')}
+          </Typography.Text>
+        )}
+        {selectedEvent && (
+          <Typography.Text
+            type="secondary"
+            className="workflow-node-config__inline-message"
+          >
+            <code>
+              {selectedEvent.schemaName}.{selectedEvent.tableName} ·{' '}
+              {selectedEvent.watchedFields.join(', ')}
+            </code>
+          </Typography.Text>
+        )}
+      </Card>
+
+      <Card size="small" title={t('nodeEditors.event.startCondition')}>
+        <Radio.Group
+          value={config.match ? 'CONDITIONAL' : 'ALWAYS'}
+          disabled={disabled || !selectedEvent}
+          onChange={(event) => changeMatchMode(event.target.value)}
+        >
+          <Space direction="vertical" size={8}>
+            <Radio value="ALWAYS">{t('nodeEditors.event.alwaysStart')}</Radio>
+            <Radio value="CONDITIONAL">
+              {t('nodeEditors.event.conditionalStart')}
+            </Radio>
+          </Space>
+        </Radio.Group>
+
+        {config.match && (
+          <Space
+            direction="vertical"
+            size={10}
+            style={{ width: '100%', marginTop: 14 }}
+          >
+            {config.match.conditions.length > 1 && (
+              <Radio.Group
+                value={config.match.combineOperation}
+                disabled={disabled}
+                onChange={(event) =>
+                  onChange({
+                    ...config,
+                    match: {
+                      ...config.match!,
+                      combineOperation: event.target.value,
+                    },
+                  })
+                }
+              >
+                <Radio.Button value="AND">
+                  {t('nodeEditors.event.matchAll')}
+                </Radio.Button>
+                <Radio.Button value="OR">
+                  {t('nodeEditors.event.matchAny')}
+                </Radio.Button>
+              </Radio.Group>
+            )}
+
+            {config.match.conditions.map((condition, index) => {
+              const selectedField = matchFields.find(
+                (field) => field.path === condition.left.path,
+              );
+              return (
+                <div key={condition.id}>
+                  {index > 0 && <Divider style={{ margin: '2px 0 10px' }} />}
+                  <Space
+                    direction="vertical"
+                    size={8}
+                    style={{ width: '100%' }}
+                  >
+                    <Space.Compact style={{ width: '100%' }}>
+                      <Select
+                        aria-label={t('nodeEditors.event.conditionField', {
+                          number: index + 1,
+                        })}
+                        value={condition.left.path || undefined}
+                        disabled={disabled}
+                        placeholder={t(
+                          'nodeEditors.event.selectConditionField',
+                        )}
+                        options={matchFields.map((field) => ({
+                          value: field.path,
+                          label: fieldLabel(field),
+                        }))}
+                        onChange={(path) => {
+                          const field = matchFields.find(
+                            (candidate) => candidate.path === path,
+                          );
+                          updateMatchCondition(index, {
+                            ...condition,
+                            left: { source: 'WORKFLOW', path },
+                            right: UNARY_MATCH_OPERATORS.has(condition.operator)
+                              ? undefined
+                              : {
+                                  source: 'FIXED',
+                                  valueType: fixedValueType(field),
+                                  value: '',
+                                },
+                          });
+                        }}
+                        style={{ width: '45%' }}
+                      />
+                      <Select<EventMatchOperator>
+                        aria-label={t('nodeEditors.event.conditionOperator', {
+                          number: index + 1,
+                        })}
+                        value={condition.operator}
+                        disabled={disabled}
+                        options={(
+                          ['EQ', 'NEQ', 'EMPTY', 'NOT_EMPTY'] as const
+                        ).map((operator) => ({
+                          value: operator,
+                          label: t(
+                            `nodeEditors.event.matchOperators.${operator}`,
+                          ),
+                        }))}
+                        onChange={(operator) =>
+                          updateMatchCondition(index, {
+                            ...condition,
+                            operator,
+                            right: UNARY_MATCH_OPERATORS.has(operator)
+                              ? undefined
+                              : (condition.right ?? {
+                                  source: 'FIXED',
+                                  valueType: fixedValueType(selectedField),
+                                  value: '',
+                                }),
+                          })
+                        }
+                        style={{ width: '30%' }}
+                      />
+                      {!UNARY_MATCH_OPERATORS.has(condition.operator) &&
+                        (selectedField?.type === 'boolean' ? (
+                          <Select
+                            aria-label={t('nodeEditors.event.conditionValue', {
+                              number: index + 1,
+                            })}
+                            value={condition.right?.value || undefined}
+                            disabled={disabled}
+                            options={[
+                              {
+                                value: 'true',
+                                label: t('nodeEditors.event.booleanTrue'),
+                              },
+                              {
+                                value: 'false',
+                                label: t('nodeEditors.event.booleanFalse'),
+                              },
+                            ]}
+                            onChange={(value) =>
+                              updateMatchCondition(index, {
+                                ...condition,
+                                right: {
+                                  source: 'FIXED',
+                                  valueType: 'BOOLEAN',
+                                  value,
+                                },
+                              })
+                            }
+                            style={{ width: '25%' }}
+                          />
+                        ) : selectedField?.type === 'number' ? (
+                          <InputNumber
+                            aria-label={t('nodeEditors.event.conditionValue', {
+                              number: index + 1,
+                            })}
+                            value={
+                              condition.right?.value
+                                ? Number(condition.right.value)
+                                : null
+                            }
+                            disabled={disabled}
+                            onChange={(value) =>
+                              updateMatchCondition(index, {
+                                ...condition,
+                                right: {
+                                  source: 'FIXED',
+                                  valueType: 'NUMBER',
+                                  value: value === null ? '' : String(value),
+                                },
+                              })
+                            }
+                            style={{ width: '25%' }}
+                          />
+                        ) : (
+                          <Input
+                            aria-label={t('nodeEditors.event.conditionValue', {
+                              number: index + 1,
+                            })}
+                            value={condition.right?.value ?? ''}
+                            disabled={disabled}
+                            onChange={(event) =>
+                              updateMatchCondition(index, {
+                                ...condition,
+                                right: {
+                                  source: 'FIXED',
+                                  valueType: 'STRING',
+                                  value: event.target.value,
+                                },
+                              })
+                            }
+                            style={{ width: '25%' }}
+                          />
+                        ))}
+                    </Space.Compact>
+                    <Button
+                      type="text"
+                      danger
+                      icon={<DeleteOutlined />}
+                      aria-label={t('nodeEditors.event.deleteCondition', {
+                        number: index + 1,
+                      })}
+                      disabled={disabled}
+                      onClick={() =>
+                        onChange({
+                          ...config,
+                          match: {
+                            ...config.match!,
+                            conditions: config.match!.conditions.filter(
+                              (_, current) => current !== index,
+                            ),
+                          },
+                        })
+                      }
+                    >
+                      {t('nodeEditors.event.deleteCondition', {
+                        number: index + 1,
+                      })}
+                    </Button>
+                  </Space>
+                </div>
+              );
+            })}
+
+            <Button
+              type="dashed"
+              block
+              icon={<PlusOutlined />}
+              disabled={disabled}
+              onClick={() =>
+                onChange({
+                  ...config,
+                  match: {
+                    ...config.match!,
+                    conditions: [
+                      ...config.match!.conditions,
+                      newMatchCondition(defaultMatchField),
+                    ],
+                  },
+                })
+              }
+            >
+              {t('nodeEditors.event.addCondition')}
+            </Button>
+          </Space>
+        )}
+      </Card>
+
+      <Card size="small" title={t('nodeEditors.event.processing')}>
+        <Radio.Group
+          value={config.processingMode}
+          disabled={disabled}
+          onChange={(event) => changeProcessingMode(event.target.value)}
+        >
+          <Space direction="vertical" size={10}>
+            <Radio value="PARALLEL">
+              <Space direction="vertical" size={0}>
+                <Typography.Text>
+                  {t('nodeEditors.event.parallel')}
+                </Typography.Text>
+                <Typography.Text type="secondary">
+                  {t('nodeEditors.event.parallelDescription')}
+                </Typography.Text>
+              </Space>
+            </Radio>
+            <Radio value="SERIAL_BY_KEY" disabled={disabled}>
+              <Space direction="vertical" size={0}>
+                <Typography.Text>
+                  {t('nodeEditors.event.serial')}
+                </Typography.Text>
+                <Typography.Text type="secondary">
+                  {t('nodeEditors.event.serialDescription')}
+                </Typography.Text>
+              </Space>
+            </Radio>
+          </Space>
+        </Radio.Group>
+
+        {config.processingMode === 'SERIAL_BY_KEY' && (
+          <Space
+            direction="vertical"
+            size={10}
+            style={{ width: '100%', marginTop: 14 }}
+          >
+            <Typography.Text className="workflow-node-config__field-label">
+              {t('nodeEditors.event.businessKey')}
+            </Typography.Text>
+            <Select
+              aria-label={t('nodeEditors.event.businessKey')}
+              value={config.concurrencyKeyPath}
+              disabled={disabled}
+              placeholder={t('nodeEditors.event.selectBusinessKey')}
+              options={serialKeyFields.map((field) => ({
+                value: field.path,
+                label: field.primaryKey
+                  ? `${field.label} (${t('nodeEditors.event.primaryKey')})`
+                  : field.label,
+              }))}
+              onChange={(concurrencyKeyPath) =>
+                onChange({ ...config, concurrencyKeyPath })
+              }
+              style={{ width: '100%' }}
+            />
+            {config.concurrencyKeyPath && (
+              <Typography.Text type="secondary">
+                {t('nodeEditors.event.sameKeyPreview', {
+                  field: config.concurrencyKeyPath,
+                })}
+              </Typography.Text>
+            )}
+          </Space>
+        )}
+      </Card>
+
+      {config.processingMode === 'SERIAL_BY_KEY' && (
+        <Collapse
+          ghost
+          size="small"
+          items={[
+            {
+              key: 'advanced',
+              label: t('nodeEditors.event.advanced'),
+              children: (
+                <InputNumber
+                  precision={0}
+                  value={
+                    config.maxConcurrency === undefined
+                      ? 20
+                      : config.maxConcurrency
+                  }
+                  disabled={disabled}
+                  addonBefore={t('nodeEditors.event.maxConcurrency')}
+                  onChange={(maxConcurrency) =>
+                    onChange({
+                      ...config,
+                      maxConcurrency,
+                    })
+                  }
+                  style={{ width: '100%' }}
+                />
+              ),
+            },
+          ]}
+        />
+      )}
+    </Space>
+  );
+}

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

@@ -47,6 +47,27 @@ describe('ExternalRequestConfigEditor', () => {
     );
   });
 
+  it('lets the user choose a stable business endpoint name', () => {
+    const onChange = vi.fn();
+    render(
+      <ExternalRequestConfigEditor
+        value={{ path: '', method: 'POST', verificationMode: 'HMAC' }}
+        onChange={onChange}
+        schema={schema}
+      />,
+    );
+
+    fireEvent.change(screen.getByRole('textbox', { name: 'Endpoint name' }), {
+      target: { value: 'order-paid' },
+    });
+
+    expect(onChange).toHaveBeenCalledWith({
+      path: 'order-paid',
+      method: 'POST',
+      verificationMode: 'HMAC',
+    });
+  });
+
   it('lets MyOA-style callers use direct receive without showing HMAC fields', async () => {
     const onChange = vi.fn();
 
@@ -86,50 +107,6 @@ describe('ExternalRequestConfigEditor', () => {
     expect(
       screen.queryByRole('button', { name: 'Regenerate signing secret' }),
     ).toBeNull();
-    expect(
-      screen.getByText(/Anyone who knows this endpoint/),
-    ).toBeInTheDocument();
-  });
-
-  it('lets the caller wait for the final Workflow return value', async () => {
-    const onChange = vi.fn();
-
-    function Harness() {
-      const [value, setValue] = useState<
-        NonNullable<Parameters<typeof ExternalRequestConfigEditor>[0]['value']>
-      >({
-        path: 'create-ticket',
-        method: 'POST',
-        verificationMode: 'NONE',
-        responseMode: 'IMMEDIATE',
-      });
-      return (
-        <ExternalRequestConfigEditor
-          value={value}
-          onChange={(next) => {
-            onChange(next);
-            setValue(next);
-          }}
-          schema={schema}
-        />
-      );
-    }
-
-    render(<Harness />);
-    await screen.findByDisplayValue(
-      'http://10.20.30.40:14003/api/workflow/webhook/myoa-callback',
-    );
-    fireEvent.click(
-      screen.getByRole('radio', { name: /Wait for Workflow result/ }),
-    );
-
-    expect(onChange).toHaveBeenLastCalledWith({
-      path: 'create-ticket',
-      method: 'POST',
-      verificationMode: 'NONE',
-      responseMode: 'WAIT_FOR_RESULT',
-      responseTimeoutSeconds: 60,
-    });
-    expect(screen.getByRole('spinbutton')).toHaveValue('60');
+    expect(screen.queryByRole('alert')).toBeNull();
   });
 });