@gadmin2n/schematics 0.0.144 → 0.0.146

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

@@ -1,54 +1,78 @@
-import React, { useEffect, useMemo, useState } from 'react';
 import {
-  Alert,
+  DeleteOutlined,
+  PlusOutlined,
+  UserAddOutlined,
+  UsergroupAddOutlined,
+} from '@ant-design/icons';
+import {
   Button,
-  Card,
-  Divider,
+  Collapse,
+  Input,
   InputNumber,
   Radio,
   Select,
   Space,
-  Tag,
+  Switch,
   Typography,
 } from 'antd';
-import { ApiOutlined, DeleteOutlined, TeamOutlined } from '@ant-design/icons';
-import type { WidgetProps } from '../schema-form/widget-registry';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { customRequest } from 'helpers/http';
-import { ApprovalRuleEditor } from './ApprovalRuleEditor';
-import { SubjectPicker, type SubjectSelection } from './SubjectPicker';
-import { ApproverSourceEditor } from './ApproverSourceEditor';
-import type { ApproverSourceConfig } from './approver-source';
 import { ParameterBindingEditor } from '../../components/ParameterBindingEditor';
 import type { ParameterBinding } from '../../types/parameter-binding';
+import type { WidgetProps } from '../schema-form/widget-registry';
+import { ApprovalRuleEditor } from './ApprovalRuleEditor';
+import { CodeConfigEditor } from './CodeConfigEditor';
+import { HttpRequestConfigEditor } from './HttpRequestConfigEditor';
+import { SubjectPicker, type SubjectSelection } from './SubjectPicker';
+import './human-approval-config.css';
 
 type Provider = 'USER' | 'USER_GROUP';
+type EmbeddedCodeConfig = {
+  script: string;
+  mode: 'runOnceForAll';
+  timeout: number;
+};
 type SubjectSource =
   | { source: 'STATIC'; provider: Provider; refs: string[] }
-  | { source: 'DYNAMIC'; provider: Provider; inputKey: string };
+  | {
+      source: 'DYNAMIC';
+      provider: Provider;
+      inputKey: string;
+      label: string;
+      lookup: {
+        request: Record<string, unknown>;
+        result: EmbeddedCodeConfig;
+      };
+    };
 type Rule = {
   mode: 'ANY' | 'ALL' | 'COUNT' | 'PERCENTAGE';
-  count?: number;
-  percentage?: number;
+  count?: number | null;
+  percentage?: number | null;
+};
+type TaskDetail = {
+  key: string;
+  label: string;
+  value: ParameterBinding;
 };
 type ApprovalConfig = {
-  approvalWorkflowId?: string;
-  approvalWorkflowInputBindings?: Record<string, ParameterBinding>;
-  approverSources?: ApproverSourceConfig[];
+  external?: {
+    request: Record<string, unknown>;
+    creationResult: EmbeddedCodeConfig;
+    callbackResult: EmbeddedCodeConfig;
+  };
+  task: {
+    title: ParameterBinding;
+    description: ParameterBinding;
+    details: TaskDetail[];
+  };
   subjects: SubjectSource[];
   approvalRule: Rule;
   rejectionRule: Rule;
-  timeout: { durationSeconds: number; action: 'APPROVED' | 'REJECTED' };
-};
-
-type ApprovalWorkflowOption = {
-  id: string;
-  name: string;
-  inputParameters: Array<{
-    key: string;
-    label?: string;
-    required?: boolean;
-  }>;
+  blockCancellationOnResolved: boolean;
+  timeout: {
+    durationSeconds: number | null;
+    action: 'APPROVED' | 'REJECTED';
+  };
 };
 
 const RULE_SCHEMA = {
@@ -56,6 +80,82 @@ const RULE_SCHEMA = {
   default: { mode: 'ANY' },
 };
 
+const DEFAULT_TITLE: ParameterBinding = {
+  source: 'FIXED',
+  valueType: 'STRING',
+  value: '请处理审批任务',
+};
+
+const DEFAULT_DESCRIPTION: ParameterBinding = {
+  source: 'FIXED',
+  valueType: 'STRING',
+  value: '',
+};
+
+const DEFAULT_EXTERNAL_CONFIG: NonNullable<ApprovalConfig['external']> = {
+  request: {
+    method: 'POST',
+    path: '/',
+    queryBindings: {},
+    headerBindings: {},
+    bodyMode: 'JSON',
+    bodyBindings: {},
+    body: {},
+    timeoutSeconds: 30,
+  },
+  creationResult: {
+    mode: 'runOnceForAll',
+    timeout: 5000,
+    script: `// response 是发起外部审批后的 HTTP 响应。
+// 接口返回业务错误时在这里抛出异常；返回值不会展示到画布。
+return response;`,
+  },
+  callbackResult: {
+    mode: 'runOnceForAll',
+    timeout: 5000,
+    script: `// callback 是已通过 callbackToken 验证的外部回调。
+// 请按外部系统格式转换为统一审批结果。
+const body = callback?.body;
+return {
+  result: body?.result,
+  eventId: callback?.eventId,
+  operatorId: body?.operatorId,
+  comment: body?.comment,
+  data: { callback: body },
+};`,
+  },
+};
+
+function defaultDynamicLookup(provider: Provider): {
+  request: Record<string, unknown>;
+  result: EmbeddedCodeConfig;
+} {
+  return {
+    request: {
+      method: 'GET',
+      path: '/',
+      queryBindings: {},
+      headerBindings: {},
+      bodyMode: 'FIELDS',
+      bodyBindings: {},
+      timeoutSeconds: 30,
+    },
+    result: {
+      mode: 'runOnceForAll',
+      timeout: 5000,
+      script: `// response 是查询接口返回的 { status, data, headers }。
+// 从响应中提取审批人 ID，并返回统一格式。
+const refs = response?.data?.refs;
+if (!Array.isArray(refs) || refs.length === 0) {
+  throw new Error('未查询到有效的审批人');
+}
+return {
+  subjects: [{ provider: '${provider}', refs }],
+};`,
+    },
+  };
+}
+
 export function HumanApprovalConfigEditor({
   value,
   onChange,
@@ -63,23 +163,19 @@ export function HumanApprovalConfigEditor({
   schema,
 }: WidgetProps<ApprovalConfig | undefined>) {
   const { t } = useTranslation('workflow');
-  const [approvalWorkflows, setApprovalWorkflows] = useState<
-    ApprovalWorkflowOption[]
-  >([]);
   const config: ApprovalConfig = {
-    approvalWorkflowId: value?.approvalWorkflowId,
-    approvalWorkflowInputBindings: value?.approvalWorkflowInputBindings ?? {},
-    approverSources: value?.approverSources ?? [],
+    ...(value?.external && { external: value.external }),
+    task: {
+      title: value?.task?.title ?? DEFAULT_TITLE,
+      description: value?.task?.description ?? DEFAULT_DESCRIPTION,
+      details: value?.task?.details ?? [],
+    },
     subjects: value?.subjects ?? [],
     approvalRule: value?.approvalRule ?? { mode: 'ANY' },
     rejectionRule: value?.rejectionRule ?? { mode: 'ANY' },
+    blockCancellationOnResolved: value?.blockCancellationOnResolved ?? false,
     timeout: value?.timeout ?? { durationSeconds: 0, action: 'REJECTED' },
   };
-  useEffect(() => {
-    customRequest<ApprovalWorkflowOption[]>('workflow/callable', 'GET')
-      .then(setApprovalWorkflows)
-      .catch(() => setApprovalWorkflows([]));
-  }, []);
   const staticSelections = useMemo<SubjectSelection[]>(() => {
     const grouped = new Map<string, string[]>();
     for (const subject of config.subjects) {
@@ -94,14 +190,35 @@ export function HumanApprovalConfigEditor({
     (subject): subject is Extract<SubjectSource, { source: 'DYNAMIC' }> =>
       subject.source === 'DYNAMIC',
   );
-  const selectedApprovalWorkflow = approvalWorkflows.find(
-    (workflow) => workflow.id === config.approvalWorkflowId,
-  );
 
   function update(patch: Partial<ApprovalConfig>) {
     onChange({ ...config, ...patch });
   }
 
+  function updateTask(patch: Partial<ApprovalConfig['task']>) {
+    update({ task: { ...config.task, ...patch } });
+  }
+
+  function updateExternal(
+    patch: Partial<NonNullable<ApprovalConfig['external']>>,
+  ) {
+    update({
+      external: {
+        ...(config.external ?? DEFAULT_EXTERNAL_CONFIG),
+        ...patch,
+      },
+    });
+  }
+
+  function toggleExternal(enabled: boolean) {
+    if (enabled) {
+      update({ external: config.external ?? DEFAULT_EXTERNAL_CONFIG });
+      return;
+    }
+    const { external: _external, ...gadminOnlyConfig } = config;
+    onChange(gadminOnlyConfig);
+  }
+
   function updateStatic(next: SubjectSelection[]) {
     update({
       subjects: [
@@ -115,251 +232,538 @@ export function HumanApprovalConfigEditor({
     });
   }
 
-  function removeDynamic(inputKey: string) {
+  function updateDetail(index: number, patch: Partial<TaskDetail>) {
+    updateTask({
+      details: config.task.details.map((detail, current) =>
+        current === index ? { ...detail, ...patch } : detail,
+      ),
+    });
+  }
+
+  function updateDynamic(
+    inputKey: string,
+    patch: Partial<Extract<SubjectSource, { source: 'DYNAMIC' }>>,
+  ) {
     update({
-      subjects: config.subjects.filter(
-        (subject) =>
-          subject.source !== 'DYNAMIC' || subject.inputKey !== inputKey,
+      subjects: config.subjects.map((subject) =>
+        subject.source === 'DYNAMIC' && subject.inputKey === inputKey
+          ? { ...subject, ...patch }
+          : subject,
       ),
     });
   }
 
+  function addDynamic(provider: Provider) {
+    const base = provider === 'USER' ? 'dynamic_users' : 'dynamic_user_groups';
+    const existing = new Set(dynamicSources.map((source) => source.inputKey));
+    let inputKey = base;
+    let suffix = 2;
+    while (existing.has(inputKey)) inputKey = `${base}_${suffix++}`;
+    update({
+      subjects: [
+        ...config.subjects,
+        {
+          source: 'DYNAMIC',
+          provider,
+          inputKey,
+          label:
+            provider === 'USER'
+              ? t('approval.dynamicUserDefaultName')
+              : t('approval.dynamicGroupDefaultName'),
+          lookup: defaultDynamicLookup(provider),
+        },
+      ],
+    });
+  }
+
+  const subjectSchema = (schema.properties?.subjects as any)?.items;
+  const dynamicLookupSchema = subjectSchema?.properties?.lookup;
+
   return (
-    <Space direction="vertical" size={12} style={{ width: '100%' }}>
-      <Card
-        size="small"
-        title={
-          <Space>
-            <TeamOutlined />
-            <span>{t('approval.whoCanApprove')}</span>
-          </Space>
-        }
-      >
-        <Typography.Paragraph type="secondary">
-          {t('approval.description')}
-        </Typography.Paragraph>
-        <Typography.Text strong>{t('approval.fixedApprovers')}</Typography.Text>
-        <div style={{ marginTop: 8 }}>
-          <SubjectPicker
-            value={staticSelections}
-            onChange={updateStatic}
+    <div className="human-approval-config">
+      <section className="human-approval-config__section">
+        <Typography.Title
+          level={5}
+          className="human-approval-config__section-title"
+        >
+          {t('approval.taskSection')}
+        </Typography.Title>
+        <div className="human-approval-config__field">
+          <Typography.Text strong>{t('approval.taskTitle')}</Typography.Text>
+          <ParameterBindingEditor
+            name={t('approval.taskTitle')}
+            defaultPath="title"
+            value={config.task.title}
             disabled={disabled}
-            schema={schema}
+            onChange={(title) => updateTask({ title })}
           />
         </div>
+        <div className="human-approval-config__field">
+          <div className="human-approval-config__field-heading">
+            <Typography.Text strong>
+              {t('approval.taskDescription')}
+            </Typography.Text>
+            <Typography.Text type="secondary">
+              {t('approval.optional')}
+            </Typography.Text>
+          </div>
+          <ParameterBindingEditor
+            name={t('approval.taskDescription')}
+            defaultPath="description"
+            value={config.task.description}
+            disabled={disabled}
+            onChange={(description) => updateTask({ description })}
+          />
+        </div>
+        <div className="human-approval-config__details">
+          <div className="human-approval-config__field-heading">
+            <div>
+              <Typography.Text strong>
+                {t('approval.taskDetails')}
+              </Typography.Text>
+              <Typography.Text
+                type="secondary"
+                className="human-approval-config__hint"
+              >
+                {t('approval.taskDetailsDescription')}
+              </Typography.Text>
+            </div>
+            <Button
+              size="small"
+              className="workflow-panel-action"
+              icon={<PlusOutlined />}
+              disabled={disabled}
+              onClick={() =>
+                updateTask({
+                  details: [
+                    ...config.task.details,
+                    {
+                      key: `detail-${crypto.randomUUID()}`,
+                      label: '',
+                      value: { source: 'INPUT', path: '' },
+                    },
+                  ],
+                })
+              }
+            >
+              {t('approval.addTaskDetail')}
+            </Button>
+          </div>
+          {config.task.details.length === 0 ? (
+            <div className="human-approval-config__empty">
+              {t('approval.noTaskDetails')}
+            </div>
+          ) : (
+            config.task.details.map((detail, index) => (
+              <div className="human-approval-config__detail" key={detail.key}>
+                <div className="human-approval-config__detail-head">
+                  <Input
+                    aria-label={t('approval.taskDetailLabel', {
+                      number: index + 1,
+                    })}
+                    value={detail.label}
+                    disabled={disabled}
+                    placeholder={t('approval.taskDetailPlaceholder')}
+                    onChange={(event) =>
+                      updateDetail(index, { label: event.target.value })
+                    }
+                  />
+                  <Button
+                    type="text"
+                    danger
+                    icon={<DeleteOutlined />}
+                    aria-label={t('approval.removeTaskDetail', {
+                      number: index + 1,
+                    })}
+                    disabled={disabled}
+                    onClick={() =>
+                      updateTask({
+                        details: config.task.details.filter(
+                          (_, current) => current !== index,
+                        ),
+                      })
+                    }
+                  />
+                </div>
+                <ParameterBindingEditor
+                  name={detail.label || t('approval.taskDetailValue')}
+                  defaultPath={detail.label || 'value'}
+                  value={detail.value}
+                  disabled={disabled}
+                  onChange={(next) => updateDetail(index, { value: next })}
+                />
+              </div>
+            ))
+          )}
+        </div>
+      </section>
 
-        {dynamicSources.length > 0 && (
-          <Space direction="vertical" size={8} style={{ width: '100%' }}>
-            <Divider />
-            <Alert
-              type="info"
-              showIcon
-              message={t('approval.directLookup')}
-              description={t('approval.directLookupHint')}
-            />
-            {dynamicSources.map((source) => {
-              const isUser = source.provider === 'USER';
-              return (
-                <div
-                  key={source.inputKey}
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    gap: 12,
-                    padding: '10px 12px',
-                    border: '1px solid #91caff',
-                    borderRadius: 8,
-                    background: '#f5faff',
-                  }}
-                >
-                  <Space>
-                    <ApiOutlined style={{ color: '#1677ff' }} />
-                    <div>
-                      <Typography.Text strong>
-                        {isUser
-                          ? t('approval.userIds')
-                          : t('approval.groupIds')}
-                      </Typography.Text>
-                      <Typography.Text
-                        type="secondary"
-                        style={{ display: 'block', fontSize: 12 }}
-                      >
-                        {t('approval.lookupDescription')}
-                      </Typography.Text>
-                    </div>
-                  </Space>
-                  <Space>
-                    <Tag color="blue">
-                      {t('approval.lookup')}: {source.inputKey}
-                    </Tag>
-                    <Button
-                      type="text"
-                      danger
-                      aria-label={t('approval.remove', {
-                        name: source.inputKey,
-                      })}
-                      icon={<DeleteOutlined />}
+      <section className="human-approval-config__section">
+        <Typography.Title
+          level={5}
+          className="human-approval-config__section-title"
+        >
+          {t('approval.cancellationPolicy')}
+        </Typography.Title>
+        <Typography.Paragraph
+          type="secondary"
+          className="human-approval-config__section-description"
+        >
+          {t('approval.cancellationPolicyDescription')}
+        </Typography.Paragraph>
+        <Space>
+          <Switch
+            aria-label={t('approval.blockCancellationOnResolved')}
+            checked={config.blockCancellationOnResolved}
+            disabled={disabled}
+            onChange={(blockCancellationOnResolved) =>
+              update({ blockCancellationOnResolved })
+            }
+          />
+          <Typography.Text>
+            {t('approval.blockCancellationOnResolved')}
+          </Typography.Text>
+        </Space>
+      </section>
+
+      <section className="human-approval-config__section">
+        <Typography.Title
+          level={5}
+          className="human-approval-config__section-title"
+        >
+          {t('approval.externalSection')}
+        </Typography.Title>
+        <Typography.Paragraph
+          type="secondary"
+          className="human-approval-config__section-description"
+        >
+          {t('approval.externalSectionDescription')}
+        </Typography.Paragraph>
+        <div className="human-approval-config__external-toggle">
+          <div>
+            <Typography.Text strong>
+              {t('approval.enableExternal')}
+            </Typography.Text>
+            <Typography.Text
+              type="secondary"
+              className="human-approval-config__hint"
+            >
+              {config.external
+                ? t('approval.externalEnabledHint')
+                : t('approval.gadminOnlyHint')}
+            </Typography.Text>
+          </div>
+          <Switch
+            aria-label={t('approval.enableExternal')}
+            checked={Boolean(config.external)}
+            disabled={disabled}
+            onChange={toggleExternal}
+          />
+        </div>
+        {config.external ? (
+          <div className="human-approval-config__external">
+            <Collapse
+              bordered={false}
+              defaultActiveKey={['request']}
+              items={[
+                {
+                  key: 'request',
+                  label: t('approval.externalRequest'),
+                  children: (
+                    <HttpRequestConfigEditor
+                      value={config.external.request}
                       disabled={disabled}
-                      onClick={() => removeDynamic(source.inputKey)}
+                      uiOptions={{
+                        embedded: true,
+                        variableContext: 'approvalExternal',
+                        bindingSources: [
+                          'INPUT',
+                          'WORKFLOW',
+                          'APPROVAL',
+                          'FIXED',
+                        ],
+                        requestDataDescriptionKey:
+                          'httpRequest.approvalExternalRequestDataDescription',
+                      }}
+                      schema={
+                        (schema.properties?.external as any)?.properties
+                          ?.request ?? { type: 'object' }
+                      }
+                      onChange={(request) => updateExternal({ request })}
                     />
-                  </Space>
-                </div>
-              );
-            })}
-          </Space>
-        )}
-
-        <Divider />
+                  ),
+                },
+                {
+                  key: 'creationResult',
+                  label: t('approval.creationResult'),
+                  children: (
+                    <CodeConfigEditor
+                      value={config.external.creationResult}
+                      disabled={disabled}
+                      context="approvalCreation"
+                      embedded
+                      schema={
+                        (schema.properties?.external as any)?.properties
+                          ?.creationResult ?? { type: 'object' }
+                      }
+                      onChange={(creationResult) =>
+                        updateExternal({
+                          creationResult: creationResult as any,
+                        })
+                      }
+                    />
+                  ),
+                },
+                {
+                  key: 'callbackResult',
+                  label: t('approval.callbackResult'),
+                  children: (
+                    <CodeConfigEditor
+                      value={config.external.callbackResult}
+                      disabled={disabled}
+                      context="approvalCallback"
+                      embedded
+                      schema={
+                        (schema.properties?.external as any)?.properties
+                          ?.callbackResult ?? { type: 'object' }
+                      }
+                      onChange={(callbackResult) =>
+                        updateExternal({
+                          callbackResult: callbackResult as any,
+                        })
+                      }
+                    />
+                  ),
+                },
+              ]}
+            />
+          </div>
+        ) : null}
+      </section>
 
-        <ApproverSourceEditor
-          value={config.approverSources ?? []}
+      <section className="human-approval-config__section">
+        <Typography.Title
+          level={5}
+          className="human-approval-config__section-title"
+        >
+          {t('approval.whoCanApprove')}
+        </Typography.Title>
+        <Typography.Paragraph
+          type="secondary"
+          className="human-approval-config__section-description"
+        >
+          {t('approval.description')}
+        </Typography.Paragraph>
+        <Typography.Text strong>{t('approval.fixedApprovers')}</Typography.Text>
+        <SubjectPicker
+          value={staticSelections}
+          onChange={updateStatic}
           disabled={disabled}
-          onChange={(approverSources) => update({ approverSources })}
+          schema={schema}
         />
-      </Card>
-
-      <Card size="small" title={t('approval.decisionRules')}>
-        <Space direction="vertical" size={14} style={{ width: '100%' }}>
+        <div className="human-approval-config__dynamic-heading">
           <div>
             <Typography.Text strong>
-              {t('approval.approveWhen')}
+              {t('approval.dynamicApprovers')}
             </Typography.Text>
-            <div style={{ marginTop: 6 }}>
-              <ApprovalRuleEditor
-                value={config.approvalRule}
-                onChange={(approvalRule) => update({ approvalRule })}
+          </div>
+          <Space wrap size={8}>
+            <Button
+              size="small"
+              className="workflow-panel-action"
+              icon={<UserAddOutlined />}
+              aria-label={t('approval.addUsers')}
+              disabled={disabled}
+              onClick={() => addDynamic('USER')}
+            >
+              {t('approval.addUsers')}
+            </Button>
+            <Button
+              size="small"
+              className="workflow-panel-action"
+              icon={<UsergroupAddOutlined />}
+              aria-label={t('approval.addGroups')}
+              disabled={disabled}
+              onClick={() => addDynamic('USER_GROUP')}
+            >
+              {t('approval.addGroups')}
+            </Button>
+          </Space>
+        </div>
+        {dynamicSources.length === 0 ? (
+          <div className="human-approval-config__empty">
+            {t('approval.noDynamicInputs')}
+          </div>
+        ) : null}
+        {dynamicSources.map((source) => (
+          <div
+            className="human-approval-config__dynamic-source"
+            key={source.inputKey}
+          >
+            <div className="human-approval-config__dynamic-source-header">
+              <div>
+                <Typography.Text strong>
+                  {source.provider === 'USER'
+                    ? t('approval.dynamicUsers')
+                    : t('approval.dynamicGroups')}
+                </Typography.Text>
+                <Typography.Text
+                  type="secondary"
+                  className="human-approval-config__hint"
+                >
+                  {t('approval.lookupDescription')}
+                </Typography.Text>
+              </div>
+              <Button
+                type="text"
+                danger
+                icon={<DeleteOutlined />}
                 disabled={disabled}
-                schema={RULE_SCHEMA}
+                aria-label={t('approval.remove', { name: source.label })}
+                onClick={() =>
+                  update({
+                    subjects: config.subjects.filter(
+                      (subject) =>
+                        subject.source !== 'DYNAMIC' ||
+                        subject.inputKey !== source.inputKey,
+                    ),
+                  })
+                }
               />
             </div>
+            <Input
+              aria-label={t('approval.dynamicLookupName')}
+              value={source.label}
+              disabled={disabled}
+              placeholder={t('approval.dynamicLookupNamePlaceholder')}
+              onChange={(event) =>
+                updateDynamic(source.inputKey, { label: event.target.value })
+              }
+            />
+            <Collapse
+              bordered={false}
+              items={[
+                {
+                  key: 'request',
+                  label: t('approval.lookupRequest'),
+                  children: (
+                    <HttpRequestConfigEditor
+                      value={source.lookup.request}
+                      disabled={disabled}
+                      uiOptions={{
+                        embedded: true,
+                        requestDataDescriptionKey:
+                          'httpRequest.approvalLookupRequestDataDescription',
+                      }}
+                      schema={
+                        dynamicLookupSchema?.properties?.request ?? {
+                          type: 'object',
+                        }
+                      }
+                      onChange={(request) =>
+                        updateDynamic(source.inputKey, {
+                          lookup: { ...source.lookup, request: request ?? {} },
+                        })
+                      }
+                    />
+                  ),
+                },
+                {
+                  key: 'result',
+                  label: t('approval.lookupResult'),
+                  children: (
+                    <CodeConfigEditor
+                      value={source.lookup.result}
+                      disabled={disabled}
+                      context="approverLookup"
+                      embedded
+                      schema={
+                        dynamicLookupSchema?.properties?.result ?? {
+                          type: 'object',
+                        }
+                      }
+                      onChange={(result) =>
+                        updateDynamic(source.inputKey, {
+                          lookup: {
+                            ...source.lookup,
+                            result: result as EmbeddedCodeConfig,
+                          },
+                        })
+                      }
+                    />
+                  ),
+                },
+              ]}
+            />
           </div>
-          <div>
+        ))}
+      </section>
+
+      <section className="human-approval-config__section">
+        <Typography.Title
+          level={5}
+          className="human-approval-config__section-title"
+        >
+          {t('approval.decisionRules')}
+        </Typography.Title>
+        <Typography.Paragraph
+          type="secondary"
+          className="human-approval-config__section-description"
+        >
+          {t('approval.decisionRulesDescription')}
+        </Typography.Paragraph>
+        <div className="human-approval-config__rule-grid">
+          <div className="human-approval-config__rule">
+            <Typography.Text strong>
+              {t('approval.approveWhen')}
+            </Typography.Text>
+            <ApprovalRuleEditor
+              value={config.approvalRule}
+              onChange={(approvalRule) => update({ approvalRule })}
+              disabled={disabled}
+              schema={RULE_SCHEMA}
+              decision="APPROVE"
+            />
+          </div>
+          <div className="human-approval-config__rule human-approval-config__rule--reject">
             <Typography.Text strong>{t('approval.rejectWhen')}</Typography.Text>
-            <div style={{ marginTop: 6 }}>
-              <ApprovalRuleEditor
-                value={config.rejectionRule}
-                onChange={(rejectionRule) => update({ rejectionRule })}
-                disabled={disabled}
-                schema={RULE_SCHEMA}
-              />
-            </div>
+            <ApprovalRuleEditor
+              value={config.rejectionRule}
+              onChange={(rejectionRule) => update({ rejectionRule })}
+              disabled={disabled}
+              schema={RULE_SCHEMA}
+              decision="REJECT"
+            />
           </div>
-        </Space>
-      </Card>
+        </div>
+      </section>
 
-      <Card
-        size="small"
-        title={
-          <Space>
-            <ApiOutlined />
-            <span>{t('approval.workflow')}</span>
-          </Space>
-        }
-      >
-        <Typography.Paragraph type="secondary">
-          {t('approval.workflowDescription')}
+      <section className="human-approval-config__section">
+        <Typography.Title
+          level={5}
+          className="human-approval-config__section-title"
+        >
+          {t('approval.timeout')}
+        </Typography.Title>
+        <Typography.Paragraph
+          type="secondary"
+          className="human-approval-config__section-description"
+        >
+          {t('approval.timeoutDescription')}
         </Typography.Paragraph>
-        <Select
-          allowClear
-          showSearch
-          optionFilterProp="label"
+        <TimeoutEditor
+          value={config.timeout}
           disabled={disabled}
-          value={config.approvalWorkflowId}
-          placeholder={t('approval.builtInInbox')}
-          options={approvalWorkflows.map((workflow) => ({
-            value: workflow.id,
-            label: workflow.name,
-          }))}
-          onChange={(approvalWorkflowId) => {
-            const workflow = approvalWorkflows.find(
-              (item) => item.id === approvalWorkflowId,
-            );
-            update({
-              approvalWorkflowId,
-              approvalWorkflowInputBindings: workflow
-                ? Object.fromEntries(
-                    workflow.inputParameters.map((parameter) => [
-                      parameter.key,
-                      config.approvalWorkflowInputBindings?.[parameter.key] ?? {
-                        source: 'WORKFLOW',
-                        path: parameter.key,
-                      },
-                    ]),
-                  )
-                : {},
-            });
-          }}
-          style={{ width: '100%' }}
+          onChange={(timeout) => update({ timeout })}
         />
-        <Typography.Text
-          type="secondary"
-          style={{ display: 'block', fontSize: 12, marginTop: 8 }}
-        >
-          {config.approvalWorkflowId
-            ? t('approval.workflowHint')
-            : t('approval.builtInInboxHint')}
-        </Typography.Text>
-        {selectedApprovalWorkflow &&
-          selectedApprovalWorkflow.inputParameters.length > 0 && (
-            <>
-              <Divider />
-              <Typography.Text strong>
-                {t('approval.workflowInputs')}
-              </Typography.Text>
-              <Typography.Paragraph
-                type="secondary"
-                style={{ marginTop: 4, marginBottom: 12 }}
-              >
-                {t('approval.workflowInputsDescription')}
-              </Typography.Paragraph>
-              <Space direction="vertical" size={14} style={{ width: '100%' }}>
-                {selectedApprovalWorkflow.inputParameters.map((parameter) => {
-                  const name = parameter.label?.trim() || parameter.key;
-                  return (
-                    <div key={parameter.key}>
-                      <Space size={6} style={{ marginBottom: 6 }}>
-                        <Typography.Text strong>{name}</Typography.Text>
-                        {parameter.required && (
-                          <Tag color="blue">{t('approval.required')}</Tag>
-                        )}
-                      </Space>
-                      <ParameterBindingEditor
-                        name={name}
-                        defaultPath={parameter.key}
-                        value={
-                          config.approvalWorkflowInputBindings?.[parameter.key]
-                        }
-                        disabled={disabled}
-                        onChange={(binding) =>
-                          update({
-                            approvalWorkflowInputBindings: {
-                              ...config.approvalWorkflowInputBindings,
-                              [parameter.key]: binding,
-                            },
-                          })
-                        }
-                      />
-                    </div>
-                  );
-                })}
-              </Space>
-            </>
-          )}
-      </Card>
-
-      <TimeoutSection
-        value={config.timeout}
-        disabled={disabled}
-        onChange={(timeout) => update({ timeout })}
-      />
-    </Space>
+      </section>
+    </div>
   );
 }
 
 type TimeoutUnit = 'MINUTES' | 'HOURS' | 'DAYS';
 
-function TimeoutSection({
+function TimeoutEditor({
   value,
   disabled,
   onChange,
@@ -372,10 +776,13 @@ function TimeoutSection({
   const [unit, setUnit] = useState<TimeoutUnit>(() => preferredUnit(value));
   const never = value.durationSeconds === 0;
   const factor = unit === 'DAYS' ? 86400 : unit === 'HOURS' ? 3600 : 60;
-  const amount = never ? 1 : Math.max(1, value.durationSeconds / factor);
+  const amount =
+    never || value.durationSeconds === null
+      ? value.durationSeconds
+      : value.durationSeconds / factor;
 
   return (
-    <Card size="small" title={t('approval.timeout')}>
+    <Space direction="vertical" size={14} style={{ width: '100%' }}>
       <Radio.Group
         value={never ? 'NEVER' : 'AFTER'}
         disabled={disabled}
@@ -389,24 +796,18 @@ function TimeoutSection({
         <Radio value="NEVER">{t('approval.neverTimeout')}</Radio>
         <Radio value="AFTER">{t('approval.timeoutAfter')}</Radio>
       </Radio.Group>
-
-      {!never && (
-        <Space
-          direction="vertical"
-          size={12}
-          style={{ width: '100%', marginTop: 16 }}
-        >
+      {!never ? (
+        <>
           <Space.Compact style={{ width: '100%' }}>
             <InputNumber
               aria-label={t('approval.timeoutAmount')}
-              min={1}
               precision={0}
               value={amount}
               disabled={disabled}
               onChange={(next) =>
                 onChange({
                   ...value,
-                  durationSeconds: Math.max(1, next ?? 1) * factor,
+                  durationSeconds: next === null ? null : next * factor,
                 })
               }
               style={{ width: '100%' }}
@@ -422,43 +823,42 @@ function TimeoutSection({
               ]}
               onChange={(next: TimeoutUnit) => {
                 setUnit(next);
+                const nextFactor =
+                  next === 'DAYS' ? 86400 : next === 'HOURS' ? 3600 : 60;
+                onChange({
+                  ...value,
+                  durationSeconds: (amount ?? 1) * nextFactor,
+                });
               }}
               style={{ width: 130 }}
             />
           </Space.Compact>
-          <div>
-            <Typography.Text strong>
-              {t('approval.whenTimeRunsOut')}
-            </Typography.Text>
-            <Select
-              aria-label={t('approval.timeoutAction')}
-              value={value.action}
-              disabled={disabled}
-              options={[
-                { label: t('approval.autoReject'), value: 'REJECTED' },
-                { label: t('approval.autoApprove'), value: 'APPROVED' },
-              ]}
-              onChange={(action) => onChange({ ...value, action })}
-              style={{ width: '100%', marginTop: 6 }}
-            />
-          </div>
-        </Space>
-      )}
-      {never && (
-        <Typography.Paragraph
-          type="secondary"
-          style={{ marginTop: 12, marginBottom: 0 }}
-        >
+          <Select
+            aria-label={t('approval.timeoutAction')}
+            value={value.action}
+            disabled={disabled}
+            options={[
+              { label: t('approval.autoReject'), value: 'REJECTED' },
+              { label: t('approval.autoApprove'), value: 'APPROVED' },
+            ]}
+            onChange={(action) => onChange({ ...value, action })}
+            style={{ width: '100%' }}
+          />
+        </>
+      ) : (
+        <Typography.Text type="secondary">
           {t('approval.waitHint')}
-        </Typography.Paragraph>
+        </Typography.Text>
       )}
-    </Card>
+    </Space>
   );
 }
 
 function preferredUnit(timeout: ApprovalConfig['timeout']): TimeoutUnit {
   const seconds = timeout.durationSeconds;
-  if (seconds > 0 && seconds % 86400 === 0) return 'DAYS';
-  if (seconds > 0 && seconds % 3600 === 0) return 'HOURS';
+  if (typeof seconds === 'number' && seconds > 0 && seconds % 86400 === 0)
+    return 'DAYS';
+  if (typeof seconds === 'number' && seconds > 0 && seconds % 3600 === 0)
+    return 'HOURS';
   return 'MINUTES';
 }