@gadmin2n/schematics 0.0.139 → 0.0.141

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

@@ -0,0 +1,135 @@
+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();
+  });
+
+  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');
+  });
+});

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

@@ -0,0 +1,273 @@
+import { CopyOutlined, ReloadOutlined } from '@ant-design/icons';
+import {
+  Alert,
+  Button,
+  Card,
+  Input,
+  InputNumber,
+  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';
+  responseMode?: 'IMMEDIATE' | 'WAIT_FOR_RESULT';
+  responseTimeoutSeconds?: number;
+};
+
+export function ExternalRequestConfigEditor({
+  value,
+  onChange,
+  disabled,
+}: WidgetProps<ExternalRequestConfig>) {
+  const { t } = useTranslation('workflow');
+  const config = value ?? {};
+  const verificationMode = config.verificationMode === 'NONE' ? 'NONE' : 'HMAC';
+  const responseMode =
+    config.responseMode === 'WAIT_FOR_RESULT' ? 'WAIT_FOR_RESULT' : 'IMMEDIATE';
+  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.response')}>
+        <Radio.Group
+          value={responseMode}
+          disabled={disabled}
+          onChange={(event) => {
+            const nextMode = event.target.value as
+              | 'IMMEDIATE'
+              | 'WAIT_FOR_RESULT';
+            onChange({
+              ...config,
+              method: 'POST',
+              responseMode: nextMode,
+              ...(nextMode === 'WAIT_FOR_RESULT' && {
+                responseTimeoutSeconds:
+                  config.responseTimeoutSeconds &&
+                  config.responseTimeoutSeconds >= 1 &&
+                  config.responseTimeoutSeconds <= 300
+                    ? config.responseTimeoutSeconds
+                    : 60,
+              }),
+            });
+          }}
+        >
+          <Space direction="vertical" size={12}>
+            <Radio value="IMMEDIATE">
+              <Space direction="vertical" size={0}>
+                <Typography.Text>
+                  {t('externalRequest.respondImmediately')}
+                </Typography.Text>
+                <Typography.Text type="secondary">
+                  {t('externalRequest.respondImmediatelyHint')}
+                </Typography.Text>
+              </Space>
+            </Radio>
+            <Radio value="WAIT_FOR_RESULT">
+              <Space direction="vertical" size={0}>
+                <Typography.Text>
+                  {t('externalRequest.waitForResult')}
+                </Typography.Text>
+                <Typography.Text type="secondary">
+                  {t('externalRequest.waitForResultHint')}
+                </Typography.Text>
+              </Space>
+            </Radio>
+          </Space>
+        </Radio.Group>
+        {responseMode === 'WAIT_FOR_RESULT' && (
+          <div style={{ marginTop: 16 }}>
+            <Typography.Text>
+              {t('externalRequest.responseTimeout')}
+            </Typography.Text>
+            <InputNumber
+              min={1}
+              max={300}
+              precision={0}
+              value={config.responseTimeoutSeconds ?? 60}
+              disabled={disabled}
+              addonAfter={t('externalRequest.seconds')}
+              onChange={(next) =>
+                onChange({
+                  ...config,
+                  method: 'POST',
+                  responseMode: 'WAIT_FOR_RESULT',
+                  responseTimeoutSeconds: next ?? 60,
+                })
+              }
+              style={{ display: 'block', marginTop: 6, width: '100%' }}
+            />
+          </div>
+        )}
+      </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(
+    '',
+  );
+}