@gadmin2n/schematics 0.0.144 → 0.0.146

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

@@ -0,0 +1,124 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import i18n from '../../../../i18n';
+import { SubWorkflowConfigEditor } from './SubWorkflowConfigEditor';
+
+const customRequest = vi.fn();
+
+vi.mock('helpers/http', () => ({
+  customRequest: (...args: unknown[]) => customRequest(...args),
+}));
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: () => ({
+    matches: false,
+    addListener: () => undefined,
+    removeListener: () => undefined,
+    addEventListener: () => undefined,
+    removeEventListener: () => undefined,
+    dispatchEvent: () => false,
+  }),
+});
+
+describe('SubWorkflowConfigEditor', () => {
+  beforeEach(async () => {
+    customRequest.mockReset();
+    await i18n.changeLanguage('zh_CN');
+  });
+
+  it('keeps an explicit version and lets the user select the latest version', async () => {
+    customRequest.mockResolvedValue([
+      {
+        id: '42',
+        name: '查询直属主管',
+        latestVersionId: '103',
+        versions: [
+          {
+            id: '103',
+            version: 3,
+            inputParameters: [
+              { key: 'employeeId', label: '员工账号', required: true },
+            ],
+          },
+          {
+            id: '102',
+            version: 2,
+            inputParameters: [
+              { key: 'userId', label: '用户账号', required: true },
+            ],
+          },
+        ],
+      },
+    ]);
+    const onChange = vi.fn();
+
+    render(
+      <SubWorkflowConfigEditor
+        value={{
+          workflowId: '42',
+          workflowVersionId: '102',
+          inputBindings: {
+            userId: { source: 'WORKFLOW', path: 'user_id' },
+          },
+        }}
+        onChange={onChange}
+        schema={{}}
+      />,
+    );
+
+    expect(
+      await screen.findByText('当前选择保持不变；最新版本是 v3。'),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText('用户账号的字段路径')).toHaveValue('user_id');
+
+    fireEvent.mouseDown(screen.getAllByRole('combobox')[1]);
+    fireEvent.click(await screen.findByText('v3 · 最新'));
+
+    await waitFor(() =>
+      expect(onChange).toHaveBeenCalledWith({
+        workflowId: '42',
+        workflowVersionId: '103',
+        inputBindings: {
+          employeeId: { source: 'INPUT', path: 'employeeId' },
+        },
+      }),
+    );
+  });
+
+  it('uses the catalog supplied by the Workflow editor without loading a second snapshot', async () => {
+    const onChange = vi.fn();
+    const catalog = [
+      {
+        id: '42',
+        name: '查询直属主管',
+        latestVersionId: '103',
+        versions: [
+          {
+            id: '103',
+            version: 3,
+            inputParameters: [
+              { key: 'employeeId', label: '员工账号', required: true },
+            ],
+          },
+        ],
+      },
+    ];
+
+    render(
+      <SubWorkflowConfigEditor
+        value={{ workflowId: '42', workflowVersionId: '103' }}
+        onChange={onChange}
+        schema={{}}
+        uiOptions={{
+          currentWorkflowId: '42',
+          callableWorkflows: catalog,
+          callableCatalogStatus: 'ready',
+        }}
+      />,
+    );
+
+    expect(await screen.findByText('v3 · 最新')).toBeInTheDocument();
+    expect(customRequest).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,222 @@
+import { Button, Select, Space, Typography } from 'antd';
+import { customRequest } from 'helpers/http';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ParameterBindingEditor } from '../../components/ParameterBindingEditor';
+import type { ParameterBinding } from '../../types/parameter-binding';
+import type { WidgetProps } from '../schema-form/widget-registry';
+import type { CallableWorkflowOption } from './callable-workflow';
+
+type SubWorkflowConfig = {
+  workflowId?: string;
+  workflowVersionId?: string;
+  inputBindings?: Record<string, ParameterBinding>;
+};
+
+export function SubWorkflowConfigEditor({
+  value,
+  onChange,
+  disabled,
+  uiOptions,
+}: WidgetProps<SubWorkflowConfig | undefined>) {
+  const { t } = useTranslation('workflow');
+  const config = value ?? {};
+  const providedWorkflows = Array.isArray(uiOptions?.callableWorkflows)
+    ? (uiOptions.callableWorkflows as CallableWorkflowOption[])
+    : undefined;
+  const providedStatus = ['loading', 'ready', 'error'].includes(
+    String(uiOptions?.callableCatalogStatus),
+  )
+    ? (uiOptions?.callableCatalogStatus as 'loading' | 'ready' | 'error')
+    : undefined;
+  const providedRetry =
+    typeof uiOptions?.onRetryCallableCatalog === 'function'
+      ? (uiOptions.onRetryCallableCatalog as () => void)
+      : undefined;
+  const usesProvidedCatalog = providedStatus !== undefined;
+  const [localWorkflows, setLocalWorkflows] = useState<
+    CallableWorkflowOption[]
+  >([]);
+  const [localStatus, setLocalStatus] = useState<'loading' | 'ready' | 'error'>(
+    'loading',
+  );
+  const workflows = usesProvidedCatalog
+    ? (providedWorkflows ?? [])
+    : localWorkflows;
+  const catalogStatus = usesProvidedCatalog ? providedStatus : localStatus;
+  const selected = useMemo(
+    () => workflows.find((workflow) => workflow.id === config.workflowId),
+    [config.workflowId, workflows],
+  );
+  const selectedVersion = useMemo(
+    () =>
+      selected?.versions.find(
+        (version) => version.id === config.workflowVersionId,
+      ),
+    [config.workflowVersionId, selected],
+  );
+  const latestVersion = useMemo(
+    () =>
+      selected?.versions.find(
+        (version) => version.id === selected.latestVersionId,
+      ),
+    [selected],
+  );
+
+  const loadWorkflows = useCallback(async () => {
+    setLocalStatus('loading');
+    try {
+      const items = await customRequest<CallableWorkflowOption[]>(
+        'workflow/callable',
+        'GET',
+      );
+      setLocalWorkflows(Array.isArray(items) ? items : []);
+      setLocalStatus('ready');
+    } catch {
+      setLocalStatus('error');
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!usesProvidedCatalog) void loadWorkflows();
+  }, [loadWorkflows, usesProvidedCatalog]);
+
+  const retryCatalog = usesProvidedCatalog ? providedRetry : loadWorkflows;
+
+  return (
+    <Space direction="vertical" size={14} style={{ width: '100%' }}>
+      <Space direction="vertical" size={6} style={{ width: '100%' }}>
+        <Typography.Text>{t('nodeEditors.subWorkflow.target')}</Typography.Text>
+        {catalogStatus === 'error' && (
+          <Typography.Text type="danger">
+            {t('nodeEditors.subWorkflow.loadFailed')}{' '}
+            {retryCatalog && (
+              <Button type="link" size="small" onClick={retryCatalog}>
+                {t('common.retry')}
+              </Button>
+            )}
+          </Typography.Text>
+        )}
+        <Select
+          value={config.workflowId}
+          disabled={disabled || catalogStatus !== 'ready'}
+          loading={catalogStatus === 'loading'}
+          placeholder={t('nodeEditors.subWorkflow.select')}
+          showSearch
+          optionFilterProp="label"
+          options={workflows.map((workflow) => ({
+            value: workflow.id,
+            label: workflow.name,
+          }))}
+          onChange={(workflowId) => {
+            const workflow = workflows.find((item) => item.id === workflowId);
+            const version = workflow?.versions.find(
+              (item) => item.id === workflow.latestVersionId,
+            );
+            onChange({
+              workflowId,
+              workflowVersionId: version?.id,
+              inputBindings: Object.fromEntries(
+                (version?.inputParameters ?? []).map((parameter) => [
+                  parameter.key,
+                  { source: 'INPUT' as const, path: parameter.key },
+                ]),
+              ),
+            });
+          }}
+          style={{ width: '100%' }}
+        />
+      </Space>
+
+      {selected && (
+        <Space direction="vertical" size={6} style={{ width: '100%' }}>
+          <Typography.Text>
+            {t('nodeEditors.subWorkflow.version')}
+          </Typography.Text>
+          <Select
+            value={config.workflowVersionId}
+            disabled={disabled}
+            placeholder={t('nodeEditors.subWorkflow.selectVersion')}
+            options={selected.versions.map((version) => ({
+              value: version.id,
+              label:
+                version.id === selected.latestVersionId
+                  ? t('nodeEditors.subWorkflow.latestVersionLabel', {
+                      version: version.version,
+                    })
+                  : t('nodeEditors.subWorkflow.versionLabel', {
+                      version: version.version,
+                    }),
+            }))}
+            onChange={(workflowVersionId) => {
+              const version = selected.versions.find(
+                (item) => item.id === workflowVersionId,
+              );
+              onChange({
+                workflowId: selected.id,
+                workflowVersionId,
+                inputBindings: Object.fromEntries(
+                  (version?.inputParameters ?? []).map((parameter) => [
+                    parameter.key,
+                    config.inputBindings?.[parameter.key] ?? {
+                      source: 'INPUT' as const,
+                      path: parameter.key,
+                    },
+                  ]),
+                ),
+              });
+            }}
+            style={{ width: '100%' }}
+          />
+          {config.workflowVersionId &&
+            config.workflowVersionId !== selected.latestVersionId && (
+              <Typography.Text type="secondary">
+                {t('nodeEditors.subWorkflow.newerVersionAvailable', {
+                  version: latestVersion?.version,
+                })}
+              </Typography.Text>
+            )}
+        </Space>
+      )}
+
+      {selectedVersion && selectedVersion.inputParameters.length === 0 && (
+        <Typography.Text type="secondary">
+          {t('nodeEditors.subWorkflow.noParameters')}
+        </Typography.Text>
+      )}
+      {(selectedVersion?.inputParameters ?? []).map((parameter) => (
+        <Space
+          key={parameter.key}
+          direction="vertical"
+          size={6}
+          style={{ width: '100%' }}
+        >
+          <Typography.Text>
+            {parameter.label ?? parameter.key}
+            {parameter.required ? ' *' : ''}
+          </Typography.Text>
+          <ParameterBindingEditor
+            name={parameter.label ?? parameter.key}
+            defaultPath={parameter.key}
+            value={
+              config.inputBindings?.[parameter.key] ?? {
+                source: 'INPUT',
+                path: parameter.key,
+              }
+            }
+            disabled={disabled}
+            onChange={(binding) =>
+              onChange({
+                ...config,
+                inputBindings: {
+                  ...config.inputBindings,
+                  [parameter.key]: binding,
+                },
+              })
+            }
+          />
+        </Space>
+      ))}
+    </Space>
+  );
+}

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

@@ -130,10 +130,7 @@ export function SubjectPicker({
     options.set(item.ref, item);
 
   return (
-    <Card
-      size="small"
-      style={{ borderColor: '#d9e6ff', background: '#fbfdff' }}
-    >
+    <Card size="small" className="workflow-subject-picker">
       <Space direction="vertical" size={12} style={{ width: '100%' }}>
         <Select
           aria-label={t('subject.provider')}
@@ -176,6 +173,7 @@ export function SubjectPicker({
             />
             {descriptor.capabilities.inlineCreate && (
               <Button
+                className="workflow-panel-action"
                 icon={<PlusOutlined />}
                 disabled={disabled}
                 onClick={() => setCreateOpen(true)}

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

@@ -0,0 +1,204 @@
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Input, InputNumber, Select, Space, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { ParameterBindingEditor } from '../../components/ParameterBindingEditor';
+import type { ParameterBinding } from '../../types/parameter-binding';
+import type { WidgetProps } from '../schema-form/widget-registry';
+
+type CaseValueType = 'STRING' | 'NUMBER' | 'BOOLEAN';
+
+type SwitchCase = {
+  id: string;
+  label: string;
+  valueType: CaseValueType;
+  value: string;
+};
+
+type SwitchConfig = {
+  valueBinding: ParameterBinding;
+  cases: SwitchCase[];
+};
+
+function newCase(index: number): SwitchCase {
+  return {
+    id: `case-${crypto.randomUUID()}`,
+    label: `分支 ${index}`,
+    valueType: 'STRING',
+    value: '',
+  };
+}
+
+export function SwitchConfigEditor({
+  value,
+  onChange,
+  disabled,
+}: WidgetProps<SwitchConfig | undefined>) {
+  const { t } = useTranslation('workflow');
+  const config: SwitchConfig = value ?? {
+    valueBinding: { source: 'INPUT', path: '' },
+    cases: [newCase(1)],
+  };
+  const cases = config.cases ?? [];
+
+  const updateCase = (index: number, next: SwitchCase) =>
+    onChange({
+      ...config,
+      cases: cases.map((item, current) => (current === index ? next : item)),
+    });
+
+  return (
+    <Space
+      direction="vertical"
+      size={16}
+      className="switch-config"
+      style={{ width: '100%' }}
+    >
+      <div className="switch-config__value">
+        <Typography.Text strong>
+          {t('nodeEditors.switch.value')}
+        </Typography.Text>
+        <div style={{ marginTop: 8 }}>
+          <ParameterBindingEditor
+            name={t('nodeEditors.switch.value')}
+            defaultPath=""
+            value={config.valueBinding}
+            disabled={disabled}
+            onChange={(valueBinding) => onChange({ ...config, valueBinding })}
+          />
+        </div>
+      </div>
+
+      <div className="switch-config__rules">
+        <Typography.Text strong>
+          {t('nodeEditors.switch.rules')}
+        </Typography.Text>
+        <div className="switch-config__rule-list">
+          {cases.map((item, index) => (
+            <div key={item.id} className="switch-config__rule">
+              <div className="switch-config__rule-head">
+                <Typography.Text strong>
+                  {t('nodeEditors.switch.case', { number: index + 1 })}
+                </Typography.Text>
+                <Button
+                  type="text"
+                  danger
+                  icon={<DeleteOutlined />}
+                  aria-label={t('nodeEditors.switch.deleteCase', {
+                    number: index + 1,
+                  })}
+                  disabled={disabled}
+                  onClick={() =>
+                    onChange({
+                      ...config,
+                      cases: cases.filter((_, current) => current !== index),
+                    })
+                  }
+                />
+              </div>
+              <div className="switch-config__condition">
+                <Typography.Text type="secondary">
+                  {t('nodeEditors.switch.whenValueEquals')}
+                </Typography.Text>
+                <Space.Compact block>
+                  <Select<CaseValueType>
+                    aria-label={t('nodeEditors.switch.valueType')}
+                    value={item.valueType}
+                    disabled={disabled}
+                    options={(['STRING', 'NUMBER', 'BOOLEAN'] as const).map(
+                      (valueType) => ({
+                        value: valueType,
+                        label: t(`binding.types.${valueType.toLowerCase()}`),
+                      }),
+                    )}
+                    onChange={(valueType) =>
+                      updateCase(index, {
+                        ...item,
+                        valueType,
+                        value: valueType === 'BOOLEAN' ? 'true' : '',
+                      })
+                    }
+                    style={{ width: 112 }}
+                  />
+                  {item.valueType === 'BOOLEAN' ? (
+                    <Select
+                      aria-label={t('nodeEditors.switch.matchValue')}
+                      value={item.value}
+                      disabled={disabled}
+                      options={[
+                        { value: 'true', label: t('binding.boolean.true') },
+                        { value: 'false', label: t('binding.boolean.false') },
+                      ]}
+                      onChange={(matchValue) =>
+                        updateCase(index, { ...item, value: matchValue })
+                      }
+                      style={{ flex: 1 }}
+                    />
+                  ) : item.valueType === 'NUMBER' ? (
+                    <InputNumber
+                      aria-label={t('nodeEditors.switch.matchValue')}
+                      value={item.value === '' ? null : Number(item.value)}
+                      disabled={disabled}
+                      onChange={(matchValue) =>
+                        updateCase(index, {
+                          ...item,
+                          value: matchValue === null ? '' : String(matchValue),
+                        })
+                      }
+                      style={{ flex: 1 }}
+                    />
+                  ) : (
+                    <Input
+                      aria-label={t('nodeEditors.switch.matchValue')}
+                      value={item.value}
+                      disabled={disabled}
+                      onChange={(event) =>
+                        updateCase(index, {
+                          ...item,
+                          value: event.target.value,
+                        })
+                      }
+                    />
+                  )}
+                </Space.Compact>
+              </div>
+              <div className="switch-config__destination">
+                <Typography.Text type="secondary">
+                  {t('nodeEditors.switch.thenEnterBranch')}
+                </Typography.Text>
+                <Input
+                  aria-label={t('nodeEditors.switch.label')}
+                  value={item.label}
+                  disabled={disabled}
+                  onChange={(event) =>
+                    updateCase(index, { ...item, label: event.target.value })
+                  }
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+        <Button
+          className="workflow-panel-action"
+          icon={<PlusOutlined />}
+          disabled={disabled}
+          onClick={() =>
+            onChange({
+              ...config,
+              cases: [...cases, newCase(cases.length + 1)],
+            })
+          }
+        >
+          {t('nodeEditors.switch.addCase')}
+        </Button>
+        <div className="switch-config__default">
+          <Typography.Text strong>
+            {t('nodeEditors.switch.defaultBranchTitle')}
+          </Typography.Text>
+          <Typography.Text type="secondary">
+            {t('nodeEditors.switch.defaultBranch')}
+          </Typography.Text>
+        </div>
+      </div>
+    </Space>
+  );
+}

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

@@ -6,6 +6,7 @@ import {
   subjectProviderApi,
   type SubjectResource,
 } from './subject-provider.api';
+import { useWorkflowFormValidation } from '../../useWorkflowFormValidation';
 
 interface Props {
   open: boolean;
@@ -26,6 +27,7 @@ export function UserGroupCreateModal({
   onCancel,
   onCreated,
 }: Props) {
+  const formValidation = useWorkflowFormValidation();
   const [form] = Form.useForm();
   const [saving, setSaving] = useState(false);
 
@@ -58,7 +60,7 @@ export function UserGroupCreateModal({
       onCancel={onCancel}
       destroyOnClose
     >
-      <Form form={form} layout="vertical" preserve={false}>
+      <Form form={form} layout="vertical" preserve={false} {...formValidation}>
         <SchemaForm
           schema={(createSchema ?? null) as JsonSchema | null}
           uiSchema={(createUiSchema ?? null) as UiSchema | null}

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

@@ -5,6 +5,7 @@ import {
   type SubjectResource,
   type UserGroupDetail,
 } from './subject-provider.api';
+import { useWorkflowFormValidation } from '../../useWorkflowFormValidation';
 
 interface Props {
   open: boolean;
@@ -19,6 +20,7 @@ export function UserGroupEditModal({
   onCancel,
   onSaved,
 }: Props) {
+  const formValidation = useWorkflowFormValidation();
   const [form] = Form.useForm();
   const [detail, setDetail] = useState<UserGroupDetail>();
   const [users, setUsers] = useState<SubjectResource[]>([]);
@@ -102,12 +104,13 @@ export function UserGroupEditModal({
       destroyOnClose
     >
       <Spin spinning={loading}>
-        <Form form={form} layout="vertical" preserve={false}>
-          <Form.Item
-            name="name"
-            label="Name"
-            rules={[{ required: true, message: 'Name is required' }]}
-          >
+        <Form
+          form={form}
+          layout="vertical"
+          preserve={false}
+          {...formValidation}
+        >
+          <Form.Item name="name" label="Name" rules={[{ required: true }]}>
             <Input />
           </Form.Item>
           <Form.Item name="description" label="Description">

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

@@ -0,0 +1,4 @@
+export type {
+  CallableInputParameter,
+  CallableWorkflowOption,
+} from '../../types';