@gadmin2n/schematics 0.0.139 → 0.0.141

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

@@ -0,0 +1,706 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Editor from '@monaco-editor/react';
+import {
+  Alert,
+  Button,
+  Card,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Select,
+  Space,
+  Switch,
+  Typography,
+  message,
+} from 'antd';
+import {
+  AlignLeftOutlined,
+  ApiOutlined,
+  DeleteOutlined,
+  ExpandOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
+import { customRequest } from 'helpers/http';
+import { useTranslation } from 'react-i18next';
+import { ConnectionModal } from '../../connections/ConnectionModal';
+import {
+  ParameterBindingEditor,
+  type SystemDataOption,
+} from '../../components/ParameterBindingEditor';
+import type { IntegrationConnection } from '../../connections/connection.types';
+import type { ParameterBinding } from '../../types/parameter-binding';
+import type { WidgetProps } from '../schema-form/widget-registry';
+
+type HttpRequestConfig = {
+  connectionRef?: string;
+  method?: string;
+  path?: string;
+  queryBindings?: Record<string, ParameterBinding>;
+  headerBindings?: Record<string, ParameterBinding>;
+  bodyMode?: 'FIELDS' | 'JSON';
+  bodyBindings?: Record<string, ParameterBinding>;
+  body?: unknown;
+  timeoutSeconds?: number;
+  retryOnFail?: boolean;
+  maxRetries?: number;
+  retryInterval?: number;
+};
+
+const HTTP_REQUEST_DEFAULTS: HttpRequestConfig = {
+  method: 'GET',
+  path: '/',
+  timeoutSeconds: 30,
+  retryOnFail: false,
+  queryBindings: {},
+  headerBindings: {},
+  bodyMode: 'FIELDS',
+  bodyBindings: {},
+};
+
+export function HttpRequestConfigEditor({
+  value,
+  onChange,
+  disabled,
+  schema,
+}: WidgetProps<HttpRequestConfig | undefined>) {
+  const { t } = useTranslation('workflow');
+  const config: HttpRequestConfig = {
+    ...HTTP_REQUEST_DEFAULTS,
+    ...value,
+  };
+  delete (config as Record<string, unknown>).inputParameters;
+  delete (config as Record<string, unknown>).query;
+  delete (config as Record<string, unknown>).headers;
+  if (value && value.bodyMode === undefined) delete config.body;
+  const requiredFields = new Set(schema.required ?? []);
+  const [connections, setConnections] = useState<IntegrationConnection[]>([]);
+  const [loadingConnections, setLoadingConnections] = useState(false);
+  const [creatingConnection, setCreatingConnection] = useState(false);
+  const systemOptions: SystemDataOption[] = [
+    { value: 'callback.token', label: t('systemData.callbackToken') },
+    {
+      value: 'approval.requestId',
+      label: t('systemData.approvalRequestId'),
+    },
+    { value: 'approval.channel', label: t('systemData.approvalChannel') },
+    {
+      value: 'approval.candidates',
+      label: t('systemData.approvalCandidates'),
+    },
+    {
+      value: 'approval.expiresAt',
+      label: t('systemData.approvalExpiresAt'),
+    },
+    { value: 'invocation.id', label: t('systemData.invocationId') },
+    {
+      value: 'caller.workflowInstanceId',
+      label: t('systemData.callerWorkflowInstanceId'),
+    },
+  ];
+
+  useEffect(() => {
+    const hasMissingDefault = Object.keys(HTTP_REQUEST_DEFAULTS).some(
+      (key) => value?.[key as keyof HttpRequestConfig] === undefined,
+    );
+    if (hasMissingDefault) onChange(config);
+  }, [onChange, value]);
+
+  useEffect(() => {
+    setLoadingConnections(true);
+    customRequest<IntegrationConnection[]>('integration-connections', 'GET')
+      .then(setConnections)
+      .catch((error) =>
+        message.error(error?.message ?? t('httpRequest.loadConnectionsFailed')),
+      )
+      .finally(() => setLoadingConnections(false));
+  }, []);
+
+  function update(patch: Partial<HttpRequestConfig>) {
+    onChange({ ...config, ...patch });
+  }
+
+  return (
+    <Space direction="vertical" size={16} style={{ width: '100%' }}>
+      <Card
+        size="small"
+        title={
+          <Space>
+            <ApiOutlined />
+            <span>{t('httpRequest.connectionOperation')}</span>
+          </Space>
+        }
+      >
+        <Typography.Paragraph type="secondary">
+          {t('httpRequest.connectionDescription')}
+        </Typography.Paragraph>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'minmax(260px, 1fr) auto',
+            gap: 10,
+            alignItems: 'end',
+          }}
+        >
+          <Form.Item
+            label={t('httpRequest.connection')}
+            required={requiredFields.has('connectionRef')}
+            style={{ marginBottom: 0 }}
+          >
+            <Select
+              value={config.connectionRef}
+              loading={loadingConnections}
+              disabled={disabled}
+              placeholder={t('httpRequest.chooseConnection')}
+              showSearch
+              optionFilterProp="label"
+              onChange={(connectionRef) => update({ connectionRef })}
+              options={connections.map((connection) => ({
+                value: connection.code,
+                label: `${connection.name} (${connection.code})`,
+                disabled: !connection.isEnabled,
+              }))}
+            />
+          </Form.Item>
+          <Button
+            icon={<PlusOutlined />}
+            disabled={disabled}
+            onClick={() => setCreatingConnection(true)}
+          >
+            {t('httpRequest.newConnection')}
+          </Button>
+        </div>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '130px 1fr',
+            gap: 10,
+            marginTop: 14,
+          }}
+        >
+          <Form.Item
+            label={t('httpRequest.method')}
+            required={requiredFields.has('method')}
+            style={{ marginBottom: 0 }}
+          >
+            <Select
+              value={config.method}
+              disabled={disabled}
+              onChange={(method) => update({ method })}
+              options={['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD'].map(
+                (method) => ({ value: method }),
+              )}
+            />
+          </Form.Item>
+          <Form.Item
+            label={t('httpRequest.path')}
+            required={requiredFields.has('path')}
+            style={{ marginBottom: 0 }}
+          >
+            <Input
+              value={config.path}
+              disabled={disabled}
+              placeholder="/departments/{{input.departmentId}}/approvers"
+              onChange={(event) => update({ path: event.target.value })}
+            />
+          </Form.Item>
+        </div>
+        <Alert
+          type="info"
+          showIcon
+          message={
+            <Space size={4} wrap>
+              <span>{t('httpRequest.pathTemplateHint')}</span>
+              <Typography.Text code>{'{{input.wecomId}}'}</Typography.Text>
+              <span>{t('httpRequest.templateOr')}</span>
+              <Typography.Text code>{'{{workflow.wecomId}}'}</Typography.Text>
+            </Space>
+          }
+          style={{ marginTop: 14 }}
+        />
+      </Card>
+
+      <Card size="small" title={t('httpRequest.requestData')}>
+        <Typography.Paragraph type="secondary">
+          {t('httpRequest.requestDataDescription')}
+        </Typography.Paragraph>
+        <Space direction="vertical" size={18} style={{ width: '100%' }}>
+          <BindingMapEditor
+            label={t('httpRequest.queryParameters')}
+            addLabel={t('httpRequest.addQueryParameter')}
+            keyPlaceholder="departmentId"
+            value={config.queryBindings ?? {}}
+            systemOptions={systemOptions}
+            disabled={disabled}
+            onChange={(queryBindings) => update({ queryBindings })}
+          />
+          <BindingMapEditor
+            label={t('httpRequest.headers')}
+            addLabel={t('httpRequest.addHeader')}
+            keyPlaceholder="X-Request-Source"
+            value={config.headerBindings ?? {}}
+            systemOptions={systemOptions}
+            disabled={disabled}
+            onChange={(headerBindings) => update({ headerBindings })}
+          />
+          <div>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                marginBottom: 8,
+              }}
+            >
+              <Typography.Text strong>
+                {t('httpRequest.requestBody')}
+              </Typography.Text>
+              <Button
+                type="link"
+                size="small"
+                disabled={disabled}
+                onClick={() =>
+                  update({
+                    bodyMode: config.bodyMode === 'JSON' ? 'FIELDS' : 'JSON',
+                  })
+                }
+              >
+                {config.bodyMode === 'JSON'
+                  ? t('httpRequest.useFields')
+                  : t('httpRequest.advancedJson')}
+              </Button>
+            </div>
+            {config.bodyMode === 'JSON' ? (
+              <>
+                <Typography.Paragraph type="secondary">
+                  {t('httpRequest.advancedJsonHint')}{' '}
+                  <Typography.Text code>{'{{input.field}}'}</Typography.Text>{' '}
+                  {t('httpRequest.templateOr')}{' '}
+                  <Typography.Text code>{'{{workflow.field}}'}</Typography.Text>{' '}
+                  {t('httpRequest.templateOr')}{' '}
+                  <Typography.Text code>
+                    {'{{system.callback.token}}'}
+                  </Typography.Text>
+                </Typography.Paragraph>
+                <JsonEditor
+                  label={t('httpRequest.bodyJson')}
+                  value={config.body ?? {}}
+                  disabled={disabled}
+                  onChange={(body) => update({ body })}
+                />
+              </>
+            ) : (
+              <BindingMapEditor
+                addLabel={t('httpRequest.addBodyField')}
+                keyPlaceholder="ticketId"
+                value={config.bodyBindings ?? {}}
+                systemOptions={systemOptions}
+                disabled={disabled}
+                onChange={(bodyBindings) => update({ bodyBindings })}
+              />
+            )}
+          </div>
+        </Space>
+      </Card>
+
+      <Card size="small" title={t('httpRequest.responseOut')}>
+        <Alert
+          type="info"
+          showIcon
+          message={t('httpRequest.responseReturned')}
+          description={t('httpRequest.responseDescription')}
+        />
+      </Card>
+
+      <Card size="small" title={t('httpRequest.timeoutRetry')}>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr 1fr',
+            gap: 16,
+          }}
+        >
+          <div>
+            <Typography.Text>{t('httpRequest.timeoutSeconds')}</Typography.Text>
+            <InputNumber
+              min={1}
+              max={300}
+              value={config.timeoutSeconds}
+              disabled={disabled}
+              onChange={(timeoutSeconds) =>
+                update({ timeoutSeconds: timeoutSeconds ?? 30 })
+              }
+              style={{ width: '100%', marginTop: 6 }}
+            />
+          </div>
+          <div>
+            <Typography.Text>{t('httpRequest.retryOnFailure')}</Typography.Text>
+            <div style={{ marginTop: 9 }}>
+              <Switch
+                checked={config.retryOnFail}
+                disabled={disabled}
+                onChange={(retryOnFail) => update({ retryOnFail })}
+              />
+            </div>
+          </div>
+          {config.retryOnFail && (
+            <div>
+              <Typography.Text>
+                {t('httpRequest.extraAttempts')}
+              </Typography.Text>
+              <InputNumber
+                min={0}
+                max={10}
+                value={config.maxRetries ?? 2}
+                disabled={disabled}
+                onChange={(maxRetries) =>
+                  update({ maxRetries: maxRetries ?? 0 })
+                }
+                style={{ width: '100%', marginTop: 6 }}
+              />
+            </div>
+          )}
+        </div>
+      </Card>
+
+      <ConnectionModal
+        open={creatingConnection}
+        onCancel={() => setCreatingConnection(false)}
+        onSaved={(connection) => {
+          setConnections((current) => [connection, ...current]);
+          setCreatingConnection(false);
+          update({ connectionRef: connection.code });
+        }}
+      />
+    </Space>
+  );
+}
+
+function BindingMapEditor({
+  label,
+  addLabel,
+  keyPlaceholder,
+  value,
+  systemOptions,
+  disabled,
+  onChange,
+}: {
+  label?: string;
+  addLabel: string;
+  keyPlaceholder: string;
+  value: Record<string, ParameterBinding>;
+  systemOptions: SystemDataOption[];
+  disabled?: boolean;
+  onChange(value: Record<string, ParameterBinding>): void;
+}) {
+  const { t } = useTranslation('workflow');
+  const entries = Object.entries(value);
+
+  function replaceEntry(
+    index: number,
+    nextKey: string,
+    nextValue: ParameterBinding,
+  ) {
+    const nextEntries = [...entries];
+    nextEntries[index] = [nextKey, nextValue];
+    onChange(Object.fromEntries(nextEntries));
+  }
+
+  return (
+    <div>
+      {label && (
+        <Typography.Text strong style={{ display: 'block', marginBottom: 8 }}>
+          {label}
+        </Typography.Text>
+      )}
+      {entries.length > 0 && (
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns:
+              'minmax(140px, 0.65fr) minmax(280px, 1.6fr) 32px',
+            gap: 8,
+            marginBottom: 6,
+          }}
+        >
+          <Typography.Text type="secondary">
+            {t('httpRequest.fieldName')}
+          </Typography.Text>
+          <Typography.Text type="secondary">
+            {t('httpRequest.value')}
+          </Typography.Text>
+          <span />
+        </div>
+      )}
+      <Space direction="vertical" size={8} style={{ width: '100%' }}>
+        {entries.map(([entryKey, entryValue], index) => (
+          <div
+            key={index}
+            style={{
+              display: 'grid',
+              gridTemplateColumns:
+                'minmax(140px, 0.65fr) minmax(280px, 1.6fr) 32px',
+              gap: 8,
+              alignItems: 'start',
+            }}
+          >
+            <Input
+              value={entryKey}
+              disabled={disabled}
+              placeholder={keyPlaceholder}
+              onChange={(event) => {
+                const nextKey = event.target.value;
+                const nextValue =
+                  entryValue.source !== 'FIXED' && entryValue.path === entryKey
+                    ? { ...entryValue, path: nextKey }
+                    : entryValue;
+                replaceEntry(index, nextKey, nextValue);
+              }}
+            />
+            <ParameterBindingEditor
+              name={entryKey || t('httpRequest.addField')}
+              defaultPath={entryKey}
+              value={entryValue}
+              systemOptions={systemOptions}
+              disabled={disabled}
+              onChange={(binding) => replaceEntry(index, entryKey, binding)}
+            />
+            <Button
+              type="text"
+              danger
+              icon={<DeleteOutlined />}
+              disabled={disabled}
+              aria-label={t('httpRequest.deleteField', {
+                name: entryKey || t('httpRequest.addField'),
+              })}
+              onClick={() =>
+                onChange(
+                  Object.fromEntries(
+                    entries.filter((_, current) => current !== index),
+                  ),
+                )
+              }
+            />
+          </div>
+        ))}
+        <Button
+          type="dashed"
+          block
+          icon={<PlusOutlined />}
+          disabled={disabled}
+          onClick={() => {
+            const key = nextEntryKey(value, keyPlaceholder);
+            onChange({
+              ...value,
+              [key]: { source: 'INPUT', path: key },
+            });
+          }}
+        >
+          {addLabel}
+        </Button>
+      </Space>
+    </div>
+  );
+}
+
+function nextEntryKey(
+  value: Record<string, ParameterBinding>,
+  placeholder: string,
+) {
+  const base = placeholder || 'field';
+  if (!(base in value)) return base;
+  let index = 2;
+  while (`${base}_${index}` in value) index += 1;
+  return `${base}_${index}`;
+}
+
+function JsonEditor({
+  label,
+  value,
+  disabled,
+  onChange,
+}: {
+  label: string;
+  value: unknown;
+  disabled?: boolean;
+  onChange(value: unknown): void;
+}) {
+  const { t } = useTranslation('workflow');
+  const serializedValue = JSON.stringify(value ?? {}, null, 2);
+  const [text, setText] = useState(() => serializedValue);
+  const [error, setError] = useState<JsonError>();
+  const [expanded, setExpanded] = useState(false);
+  const lastEmittedValue = useRef<string>();
+
+  useEffect(() => {
+    if (serializedValue === lastEmittedValue.current) {
+      lastEmittedValue.current = undefined;
+      return;
+    }
+    setText(serializedValue);
+    setError(undefined);
+  }, [serializedValue]);
+
+  function changeText(next: string) {
+    setText(next);
+    const result = parseJson(next);
+    if (result.ok) {
+      setError(undefined);
+      lastEmittedValue.current = JSON.stringify(result.value, null, 2);
+      onChange(result.value);
+    } else {
+      setError(result.error);
+    }
+  }
+
+  function format() {
+    const result = parseJson(text);
+    if (!result.ok) {
+      setError(result.error);
+      return;
+    }
+    const formatted = JSON.stringify(result.value, null, 2);
+    setText(formatted);
+    setError(undefined);
+    lastEmittedValue.current = formatted;
+    onChange(result.value);
+  }
+
+  const editor = (height: string) => (
+    <Editor
+      height={height}
+      language="json"
+      value={text}
+      onChange={(next) => changeText(next ?? '')}
+      options={{
+        readOnly: disabled,
+        minimap: { enabled: false },
+        fontSize: 13,
+        lineNumbers: 'on',
+        lineNumbersMinChars: 3,
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+        tabSize: 2,
+        wordWrap: 'on',
+        folding: true,
+        formatOnPaste: true,
+        bracketPairColorization: { enabled: true },
+        guides: { bracketPairs: true },
+        padding: { top: 10, bottom: 10 },
+      }}
+    />
+  );
+
+  return (
+    <div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 8,
+          marginBottom: 6,
+        }}
+      >
+        <Typography.Text>{label}</Typography.Text>
+        <Space size={4}>
+          <Button
+            size="small"
+            icon={<AlignLeftOutlined />}
+            disabled={disabled || Boolean(error)}
+            onClick={format}
+          >
+            {t('httpRequest.formatJson')}
+          </Button>
+          <Button
+            size="small"
+            icon={<ExpandOutlined />}
+            onClick={() => setExpanded(true)}
+          >
+            {t('httpRequest.expandEditor')}
+          </Button>
+        </Space>
+      </div>
+      <div
+        style={{
+          height: 300,
+          overflow: 'hidden',
+          border: `1px solid ${error ? '#ff4d4f' : '#d9d9d9'}`,
+          borderRadius: 6,
+        }}
+      >
+        {editor('300px')}
+      </div>
+      {error && (
+        <Typography.Text
+          type="danger"
+          style={{ display: 'block', marginTop: 6 }}
+        >
+          {t('httpRequest.invalidJsonLocation', error)}
+        </Typography.Text>
+      )}
+      <Modal
+        open={expanded}
+        title={label}
+        width="calc(100vw - 96px)"
+        footer={null}
+        destroyOnHidden
+        onCancel={() => setExpanded(false)}
+        styles={{ body: { padding: 0 } }}
+      >
+        <div style={{ marginBottom: 8, textAlign: 'right' }}>
+          <Button
+            size="small"
+            icon={<AlignLeftOutlined />}
+            disabled={disabled || Boolean(error)}
+            onClick={format}
+          >
+            {t('httpRequest.formatJson')}
+          </Button>
+        </div>
+        <div
+          style={{
+            height: 'calc(100vh - 190px)',
+            overflow: 'hidden',
+            border: `1px solid ${error ? '#ff4d4f' : '#d9d9d9'}`,
+            borderRadius: 6,
+          }}
+        >
+          {editor('calc(100vh - 190px)')}
+        </div>
+        {error && (
+          <Typography.Text
+            type="danger"
+            style={{ display: 'block', marginTop: 6 }}
+          >
+            {t('httpRequest.invalidJsonLocation', error)}
+          </Typography.Text>
+        )}
+      </Modal>
+    </div>
+  );
+}
+
+type JsonError = { line: number; column: number };
+
+function parseJson(
+  text: string,
+): { ok: true; value: unknown } | { ok: false; error: JsonError } {
+  try {
+    return { ok: true, value: JSON.parse(text || '{}') };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : '';
+    const position = Number(
+      message.match(/position\s+(\d+)/i)?.[1] ?? text.length,
+    );
+    const beforeError = text.slice(0, Math.max(0, position));
+    const lines = beforeError.split('\n');
+    return {
+      ok: false,
+      error: {
+        line: lines.length,
+        column: (lines.at(-1)?.length ?? 0) + 1,
+      },
+    };
+  }
+}