@gadmin2n/schematics 0.0.144 → 0.0.146

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

@@ -1,7 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import Editor from '@monaco-editor/react';
 import {
-  Alert,
   Button,
   Card,
   Form,
@@ -10,13 +8,11 @@ import {
   Modal,
   Select,
   Space,
-  Switch,
   Typography,
   message,
 } from 'antd';
 import {
   AlignLeftOutlined,
-  ApiOutlined,
   DeleteOutlined,
   ExpandOutlined,
   PlusOutlined,
@@ -24,13 +20,12 @@ import {
 import { customRequest } from 'helpers/http';
 import { useTranslation } from 'react-i18next';
 import { ConnectionModal } from '../../connections/ConnectionModal';
-import {
-  ParameterBindingEditor,
-  type SystemDataOption,
-} from '../../components/ParameterBindingEditor';
+import { ParameterBindingEditor } from '../../components/ParameterBindingEditor';
+import { WorkflowCodeEditor } from '../../components/WorkflowCodeEditor';
 import type { IntegrationConnection } from '../../connections/connection.types';
 import type { ParameterBinding } from '../../types/parameter-binding';
 import type { WidgetProps } from '../schema-form/widget-registry';
+import './http-request-config.css';
 
 type HttpRequestConfig = {
   connectionRef?: string;
@@ -41,17 +36,13 @@ type HttpRequestConfig = {
   bodyMode?: 'FIELDS' | 'JSON';
   bodyBindings?: Record<string, ParameterBinding>;
   body?: unknown;
-  timeoutSeconds?: number;
-  retryOnFail?: boolean;
-  maxRetries?: number;
-  retryInterval?: number;
+  timeoutSeconds?: number | null;
 };
 
 const HTTP_REQUEST_DEFAULTS: HttpRequestConfig = {
   method: 'GET',
   path: '/',
   timeoutSeconds: 30,
-  retryOnFail: false,
   queryBindings: {},
   headerBindings: {},
   bodyMode: 'FIELDS',
@@ -63,6 +54,7 @@ export function HttpRequestConfigEditor({
   onChange,
   disabled,
   schema,
+  uiOptions,
 }: WidgetProps<HttpRequestConfig | undefined>) {
   const { t } = useTranslation('workflow');
   const config: HttpRequestConfig = {
@@ -72,37 +64,33 @@ export function HttpRequestConfigEditor({
   delete (config as Record<string, unknown>).inputParameters;
   delete (config as Record<string, unknown>).query;
   delete (config as Record<string, unknown>).headers;
+  delete (config as Record<string, unknown>).retryOnFail;
+  delete (config as Record<string, unknown>).maxRetries;
+  delete (config as Record<string, unknown>).retryInterval;
   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.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'),
-    },
-  ];
-
+  const requestDataDescription =
+    typeof uiOptions?.requestDataDescriptionKey === 'string'
+      ? t(uiOptions.requestDataDescriptionKey)
+      : t('httpRequest.requestDataDescription');
+  const embedded = uiOptions?.embedded === true;
+  const bindingSources = Array.isArray(uiOptions?.bindingSources)
+    ? (uiOptions.bindingSources as Array<ParameterBinding['source']>)
+    : undefined;
+  const variableContext =
+    uiOptions?.variableContext === 'approvalExternal'
+      ? 'approvalExternal'
+      : undefined;
   useEffect(() => {
-    const hasMissingDefault = Object.keys(HTTP_REQUEST_DEFAULTS).some(
-      (key) => value?.[key as keyof HttpRequestConfig] === undefined,
-    );
-    if (hasMissingDefault) onChange(config);
+    const hasRemovedOption =
+      value !== undefined &&
+      ['retryOnFail', 'maxRetries', 'retryInterval'].some(
+        (key) => key in value,
+      );
+    if (hasRemovedOption) onChange(config);
   }, [onChange, value]);
 
   useEffect(() => {
@@ -120,16 +108,13 @@ export function HttpRequestConfigEditor({
   }
 
   return (
-    <Space direction="vertical" size={12} style={{ width: '100%' }}>
-      <Card
-        size="small"
-        title={
-          <Space>
-            <ApiOutlined />
-            <span>{t('httpRequest.connectionOperation')}</span>
-          </Space>
-        }
-      >
+    <Space
+      className={`http-request-config${embedded ? ' http-request-config--embedded' : ''}`}
+      direction="vertical"
+      size={12}
+      style={{ width: '100%' }}
+    >
+      <Card size="small" title={t('httpRequest.connectionOperation')}>
         <Typography.Paragraph type="secondary">
           {t('httpRequest.connectionDescription')}
         </Typography.Paragraph>
@@ -162,6 +147,7 @@ export function HttpRequestConfigEditor({
             />
           </Form.Item>
           <Button
+            className="workflow-panel-action"
             icon={<PlusOutlined />}
             disabled={disabled}
             onClick={() => setCreatingConnection(true)}
@@ -199,64 +185,73 @@ export function HttpRequestConfigEditor({
             <Input
               value={config.path}
               disabled={disabled}
-              placeholder="/departments/{{input.departmentId}}/approvers"
+              placeholder="/departments/123/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>
+      <Card
+        size="small"
+        title={t('httpRequest.requestData')}
+        className="http-request-data"
+      >
+        <div className="http-request-data__intro">
+          <Typography.Text type="secondary">
+            {requestDataDescription}
+          </Typography.Text>
+          {variableContext && (
+            <div className="http-request-data__variables">
+              {(['input', 'workflow', 'approval'] as const).map((name) => (
+                <div className="http-request-data__variable" key={name}>
+                  <code>{name}</code>
+                  <Typography.Text type="secondary">
+                    {t(`httpRequest.context.${variableContext}.${name}`)}
+                  </Typography.Text>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className="http-request-data__sections">
+          <RequestDataSection
+            title={t('httpRequest.queryParameters')}
+            count={Object.keys(config.queryBindings ?? {}).length}
+          >
+            <BindingMapEditor
+              addLabel={t('httpRequest.addQueryParameter')}
+              keyPlaceholder="departmentId"
+              value={config.queryBindings ?? {}}
+              sources={bindingSources}
+              disabled={disabled}
+              onChange={(queryBindings) => update({ queryBindings })}
+            />
+          </RequestDataSection>
+          <RequestDataSection
+            title={t('httpRequest.headers')}
+            count={Object.keys(config.headerBindings ?? {}).length}
+          >
+            <BindingMapEditor
+              addLabel={t('httpRequest.addHeader')}
+              keyPlaceholder="X-Request-Source"
+              value={config.headerBindings ?? {}}
+              sources={bindingSources}
+              disabled={disabled}
+              onChange={(headerBindings) => update({ headerBindings })}
+            />
+          </RequestDataSection>
+          <RequestDataSection
+            title={t('httpRequest.requestBody')}
+            meta={
+              config.bodyMode === 'JSON'
+                ? t('httpRequest.jsonMode')
+                : t('httpRequest.fieldsMode')
+            }
+            action={
               <Button
-                type="link"
                 size="small"
+                className="workflow-panel-action"
                 disabled={disabled}
                 onClick={() =>
                   update({
@@ -268,99 +263,37 @@ export function HttpRequestConfigEditor({
                   ? 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 })}
-                />
-              </>
+              <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}
+                sources={bindingSources}
                 disabled={disabled}
                 onChange={(bodyBindings) => update({ bodyBindings })}
               />
             )}
-          </div>
-        </Space>
+          </RequestDataSection>
+        </div>
       </Card>
 
-      <Card size="small" title={t('httpRequest.responseOut')}>
-        <Alert
-          type="info"
-          showIcon
-          message={t('httpRequest.responseReturned')}
-          description={t('httpRequest.responseDescription')}
+      <div className="http-request-config__timeout">
+        <Typography.Text>{t('httpRequest.timeoutSeconds')}</Typography.Text>
+        <InputNumber
+          value={config.timeoutSeconds}
+          disabled={disabled}
+          onChange={(timeoutSeconds) => update({ timeoutSeconds })}
         />
-      </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>
+      </div>
 
       <ConnectionModal
         open={creatingConnection}
@@ -375,12 +308,42 @@ export function HttpRequestConfigEditor({
   );
 }
 
+function RequestDataSection({
+  title,
+  count,
+  meta,
+  action,
+  children,
+}: {
+  title: string;
+  count?: number;
+  meta?: string;
+  action?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  const { t } = useTranslation('workflow');
+  return (
+    <section className="http-request-data__section">
+      <div className="http-request-data__section-head">
+        <div className="http-request-data__section-title">
+          <Typography.Text strong>{title}</Typography.Text>
+          <span className="http-request-data__section-meta">
+            {meta ?? t('httpRequest.fieldCount', { count: count ?? 0 })}
+          </span>
+        </div>
+        {action}
+      </div>
+      <div className="http-request-data__section-body">{children}</div>
+    </section>
+  );
+}
+
 function BindingMapEditor({
   label,
   addLabel,
   keyPlaceholder,
   value,
-  systemOptions,
+  sources,
   disabled,
   onChange,
 }: {
@@ -388,7 +351,7 @@ function BindingMapEditor({
   addLabel: string;
   keyPlaceholder: string;
   value: Record<string, ParameterBinding>;
-  systemOptions: SystemDataOption[];
+  sources?: Array<ParameterBinding['source']>;
   disabled?: boolean;
   onChange(value: Record<string, ParameterBinding>): void;
 }) {
@@ -400,28 +363,32 @@ function BindingMapEditor({
     nextKey: string,
     nextValue: ParameterBinding,
   ) {
+    const normalizedKey = nextKey.trim();
+    if (
+      normalizedKey &&
+      entries.some(
+        ([entryKey], current) =>
+          current !== index && entryKey === normalizedKey,
+      )
+    )
+      return;
     const nextEntries = [...entries];
-    nextEntries[index] = [nextKey, nextValue];
+    nextEntries[index] = [
+      normalizedKey || nextBlankEntryKey(entries, index),
+      nextValue,
+    ];
     onChange(Object.fromEntries(nextEntries));
   }
 
   return (
-    <div>
+    <div className="http-request-binding-map">
       {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,
-          }}
-        >
+        <div className="http-request-binding-map__head">
           <Typography.Text type="secondary">
             {t('httpRequest.fieldName')}
           </Typography.Text>
@@ -433,34 +400,21 @@ function BindingMapEditor({
       )}
       <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',
-            }}
-          >
+          <div className="http-request-binding-map__row" key={index}>
             <Input
-              value={entryKey}
+              value={entryKey.trim()}
               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);
+                replaceEntry(index, nextKey, entryValue);
               }}
             />
             <ParameterBindingEditor
-              name={entryKey || t('httpRequest.addField')}
-              defaultPath={entryKey}
+              name={entryKey.trim() || t('httpRequest.addField')}
+              defaultPath={entryKey.trim()}
               value={entryValue}
-              systemOptions={systemOptions}
+              sources={sources}
               disabled={disabled}
               onChange={(binding) => replaceEntry(index, entryKey, binding)}
             />
@@ -470,7 +424,7 @@ function BindingMapEditor({
               icon={<DeleteOutlined />}
               disabled={disabled}
               aria-label={t('httpRequest.deleteField', {
-                name: entryKey || t('httpRequest.addField'),
+                name: entryKey.trim() || t('httpRequest.addField'),
               })}
               onClick={() =>
                 onChange(
@@ -485,6 +439,7 @@ function BindingMapEditor({
         <Button
           type="dashed"
           block
+          className="workflow-panel-action"
           icon={<PlusOutlined />}
           disabled={disabled}
           onClick={() => {
@@ -513,6 +468,21 @@ function nextEntryKey(
   return `${base}_${index}`;
 }
 
+function nextBlankEntryKey(
+  entries: Array<[string, ParameterBinding]>,
+  currentIndex: number,
+) {
+  let key = ' ';
+  while (
+    entries.some(
+      ([entryKey], index) => index !== currentIndex && entryKey === key,
+    )
+  ) {
+    key += ' ';
+  }
+  return key;
+}
+
 function JsonEditor({
   label,
   value,
@@ -527,7 +497,6 @@ function JsonEditor({
   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>();
 
@@ -537,56 +506,37 @@ function JsonEditor({
       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);
+      lastEmittedValue.current = JSON.stringify(next, null, 2);
+      onChange(next);
     }
   }
 
   function format() {
     const result = parseJson(text);
-    if (!result.ok) {
-      setError(result.error);
-      return;
-    }
+    if (!result.ok) return;
     const formatted = JSON.stringify(result.value, null, 2);
     setText(formatted);
-    setError(undefined);
     lastEmittedValue.current = formatted;
     onChange(result.value);
   }
 
   const editor = (height: string) => (
-    <Editor
+    <WorkflowCodeEditor
       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 },
-      }}
+      onChange={changeText}
+      readOnly={disabled}
+      ariaLabel={label}
     />
   );
 
@@ -605,14 +555,16 @@ function JsonEditor({
         <Space size={4}>
           <Button
             size="small"
+            className="workflow-panel-action"
             icon={<AlignLeftOutlined />}
-            disabled={disabled || Boolean(error)}
+            disabled={disabled}
             onClick={format}
           >
             {t('httpRequest.formatJson')}
           </Button>
           <Button
             size="small"
+            className="workflow-panel-action"
             icon={<ExpandOutlined />}
             onClick={() => setExpanded(true)}
           >
@@ -620,86 +572,44 @@ function JsonEditor({
           </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>
-      )}
+      {editor('300px')}
       <Modal
         open={expanded}
         title={label}
-        width="calc(100vw - 96px)"
+        width="min(1280px, calc(100vw - 48px))"
+        centered
+        zIndex={11000}
+        className="workflow-json-editor-modal"
         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 className="workflow-json-editor-modal__body">
+          <div className="workflow-json-editor-modal__toolbar">
+            <Button
+              size="small"
+              className="workflow-panel-action"
+              icon={<AlignLeftOutlined />}
+              disabled={disabled}
+              onClick={format}
+            >
+              {t('httpRequest.formatJson')}
+            </Button>
+          </div>
+          <div className="workflow-json-editor-modal__editor">
+            {editor('100%')}
+          </div>
         </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 } {
+function parseJson(text: string): { ok: true; value: unknown } | { ok: false } {
   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,
-      },
-    };
+  } catch {
+    return { ok: false };
   }
 }