@gadmin2n/schematics 0.0.138 → 0.0.140

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

@@ -0,0 +1,93 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useState } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import i18n from '../../../../i18n';
+import { ExternalRequestConfigEditor } from './ExternalRequestConfigEditor';
+
+const { customRequest } = vi.hoisted(() => ({
+  customRequest: vi.fn(),
+}));
+
+vi.mock('helpers/http', () => ({
+  customRequest,
+}));
+
+const schema = { type: 'object' as const };
+
+describe('ExternalRequestConfigEditor', () => {
+  beforeEach(async () => {
+    customRequest.mockReset();
+    customRequest.mockResolvedValue({
+      endpoint: 'http://10.20.30.40:14003/api/workflow/webhook/myoa-callback',
+    });
+    await i18n.changeLanguage('en');
+  });
+
+  it('shows the externally reachable endpoint resolved by the server', async () => {
+    render(
+      <ExternalRequestConfigEditor
+        value={{
+          path: 'myoa-callback',
+          method: 'POST',
+          verificationMode: 'NONE',
+        }}
+        onChange={vi.fn()}
+        schema={schema}
+      />,
+    );
+
+    expect(
+      await screen.findByDisplayValue(
+        'http://10.20.30.40:14003/api/workflow/webhook/myoa-callback',
+      ),
+    ).toBeInTheDocument();
+    expect(customRequest).toHaveBeenCalledWith(
+      'workflow-webhook/endpoint?path=myoa-callback',
+      'GET',
+    );
+  });
+
+  it('lets MyOA-style callers use direct receive without showing HMAC fields', async () => {
+    const onChange = vi.fn();
+
+    function Harness() {
+      const [value, setValue] = useState<
+        NonNullable<Parameters<typeof ExternalRequestConfigEditor>[0]['value']>
+      >({
+        path: 'myoa-callback',
+        method: 'POST',
+        secret: 'secret',
+      });
+      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: /Direct receive/ }));
+
+    expect(onChange).toHaveBeenLastCalledWith({
+      path: 'myoa-callback',
+      method: 'POST',
+      secret: 'secret',
+      verificationMode: 'NONE',
+    });
+    expect(
+      screen.queryByRole('button', { name: 'Regenerate signing secret' }),
+    ).toBeNull();
+    expect(
+      screen.getByText(/Anyone who knows this endpoint/),
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,196 @@
+import { CopyOutlined, ReloadOutlined } from '@ant-design/icons';
+import {
+  Alert,
+  Button,
+  Card,
+  Input,
+  Radio,
+  Space,
+  Tag,
+  Typography,
+  message,
+} from 'antd';
+import { customRequest } from 'helpers/http';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { WidgetProps } from '../schema-form/widget-registry';
+
+type ExternalRequestConfig = {
+  path?: string;
+  method?: string;
+  secret?: string;
+  verificationMode?: 'HMAC' | 'NONE';
+};
+
+export function ExternalRequestConfigEditor({
+  value,
+  onChange,
+  disabled,
+}: WidgetProps<ExternalRequestConfig>) {
+  const { t } = useTranslation('workflow');
+  const config = value ?? {};
+  const verificationMode = config.verificationMode === 'NONE' ? 'NONE' : 'HMAC';
+  const [endpoint, setEndpoint] = useState('');
+  const [endpointLoadFailed, setEndpointLoadFailed] = useState(false);
+
+  useEffect(() => {
+    const path = config.path?.trim();
+    if (!path) {
+      setEndpoint('');
+      setEndpointLoadFailed(false);
+      return;
+    }
+
+    let cancelled = false;
+    setEndpoint('');
+    setEndpointLoadFailed(false);
+    customRequest<{ endpoint: string }>(
+      `workflow-webhook/endpoint?path=${encodeURIComponent(path)}`,
+      'GET',
+    )
+      .then((result) => {
+        if (!cancelled) setEndpoint(result.endpoint);
+      })
+      .catch(() => {
+        if (!cancelled) setEndpointLoadFailed(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [config.path]);
+
+  async function copy(text: string) {
+    await navigator.clipboard.writeText(text);
+    message.success(t('externalRequest.copied'));
+  }
+
+  return (
+    <Space direction="vertical" size={16} style={{ width: '100%' }}>
+      <Alert
+        type="info"
+        showIcon
+        message={t('externalRequest.description')}
+        description={t('externalRequest.workflowData')}
+      />
+
+      <Card size="small" title={t('externalRequest.endpoint')}>
+        <Space direction="vertical" size={10} style={{ width: '100%' }}>
+          <Tag color="blue">POST</Tag>
+          <Input
+            value={endpoint}
+            readOnly
+            placeholder={t('externalRequest.endpointLoading')}
+            addonAfter={
+              <Button
+                type="text"
+                size="small"
+                aria-label={t('externalRequest.copyEndpoint')}
+                icon={<CopyOutlined />}
+                disabled={!endpoint}
+                onClick={() => void copy(endpoint)}
+              />
+            }
+          />
+          {endpointLoadFailed && (
+            <Alert
+              type="error"
+              showIcon
+              message={t('externalRequest.endpointLoadFailed')}
+            />
+          )}
+        </Space>
+      </Card>
+
+      <Card size="small" title={t('externalRequest.verification')}>
+        <Radio.Group
+          value={verificationMode}
+          disabled={disabled}
+          onChange={(event) =>
+            onChange({
+              ...config,
+              method: 'POST',
+              verificationMode: event.target.value,
+              ...(event.target.value === 'HMAC' &&
+                !config.secret && { secret: randomHex(32) }),
+            })
+          }
+        >
+          <Space direction="vertical" size={12}>
+            <Radio value="HMAC">
+              <Space direction="vertical" size={0}>
+                <Typography.Text>{t('externalRequest.signed')}</Typography.Text>
+                <Typography.Text type="secondary">
+                  {t('externalRequest.signedHint')}
+                </Typography.Text>
+              </Space>
+            </Radio>
+            <Radio value="NONE">
+              <Space direction="vertical" size={0}>
+                <Typography.Text>{t('externalRequest.direct')}</Typography.Text>
+                <Typography.Text type="secondary">
+                  {t('externalRequest.directHint')}
+                </Typography.Text>
+              </Space>
+            </Radio>
+          </Space>
+        </Radio.Group>
+      </Card>
+
+      {verificationMode === 'HMAC' ? (
+        <Card size="small" title={t('externalRequest.signing')}>
+          <Typography.Paragraph type="secondary">
+            {t('externalRequest.signingHint')}
+          </Typography.Paragraph>
+          <Input.Password
+            value={config.secret}
+            disabled={disabled}
+            onChange={(event) =>
+              onChange({
+                ...config,
+                method: 'POST',
+                verificationMode: 'HMAC',
+                secret: event.target.value,
+              })
+            }
+            addonAfter={
+              <Button
+                type="text"
+                size="small"
+                aria-label={t('externalRequest.regenerateSecret')}
+                icon={<ReloadOutlined />}
+                disabled={disabled}
+                onClick={() =>
+                  onChange({
+                    ...config,
+                    method: 'POST',
+                    verificationMode: 'HMAC',
+                    secret: randomHex(32),
+                  })
+                }
+              />
+            }
+          />
+          <Typography.Paragraph type="secondary" style={{ margin: '12px 0 0' }}>
+            <Typography.Text code>X-Workflow-Timestamp</Typography.Text>
+            {' + '}
+            <Typography.Text code>X-Workflow-Signature</Typography.Text>
+          </Typography.Paragraph>
+        </Card>
+      ) : (
+        <Alert
+          type="warning"
+          showIcon
+          message={t('externalRequest.directWarning')}
+        />
+      )}
+    </Space>
+  );
+}
+
+function randomHex(byteLength: number): string {
+  const bytes = new Uint8Array(byteLength);
+  crypto.getRandomValues(bytes);
+  return Array.from(bytes, (byte) => byte.toString(16).padStart(2, '0')).join(
+    '',
+  );
+}

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, '_');
+}