@gadmin2n/schematics 0.0.139 → 0.0.141

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

@@ -0,0 +1,281 @@
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import {
+  Button,
+  Card,
+  Input,
+  InputNumber,
+  Radio,
+  Space,
+  Typography,
+} from 'antd';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { WidgetProps } from '../schema-form/widget-registry';
+
+type ReturnResultConfig = {
+  resultType?: 'JSON' | 'APPROVAL_SUBJECTS';
+  sourceMode?: 'INPUT' | 'WORKFLOW';
+  path?: string;
+  httpStatusCode?: number;
+  httpHeaders?: Record<string, string>;
+};
+
+export function ReturnResultConfigEditor({
+  value,
+  onChange,
+  disabled,
+}: WidgetProps<ReturnResultConfig | undefined>) {
+  const { t } = useTranslation('workflow');
+  const resultType =
+    value?.resultType === 'APPROVAL_SUBJECTS' ? 'APPROVAL_SUBJECTS' : 'JSON';
+  const sourceMode =
+    value?.sourceMode === 'INPUT' || value?.sourceMode === 'WORKFLOW'
+      ? value.sourceMode
+      : 'INPUT';
+
+  useEffect(() => {
+    if (
+      (value?.resultType !== 'JSON' &&
+        value?.resultType !== 'APPROVAL_SUBJECTS') ||
+      (value?.sourceMode !== 'INPUT' && value?.sourceMode !== 'WORKFLOW')
+    ) {
+      onChange({
+        resultType: 'JSON',
+        sourceMode: 'INPUT',
+        httpStatusCode: 200,
+        httpHeaders: {},
+      });
+    }
+  }, [onChange, value?.resultType, value?.sourceMode]);
+
+  function nextConfig(
+    nextResultType: 'JSON' | 'APPROVAL_SUBJECTS',
+    nextSourceMode: 'INPUT' | 'WORKFLOW',
+    patch: Partial<ReturnResultConfig> = {},
+  ): ReturnResultConfig {
+    return {
+      resultType: nextResultType,
+      sourceMode: nextSourceMode,
+      ...(nextSourceMode === 'WORKFLOW' && {
+        path: patch.path ?? value?.path ?? '',
+      }),
+      ...(nextResultType === 'JSON' && {
+        httpStatusCode: patch.httpStatusCode ?? value?.httpStatusCode ?? 200,
+        httpHeaders: patch.httpHeaders ?? value?.httpHeaders ?? {},
+      }),
+    };
+  }
+
+  return (
+    <Space direction="vertical" size={16} style={{ width: '100%' }}>
+      <Card size="small" title={t('returnResult.type')}>
+        <Radio.Group
+          value={resultType}
+          disabled={disabled}
+          onChange={(event) =>
+            onChange(
+              nextConfig(
+                event.target.value as 'JSON' | 'APPROVAL_SUBJECTS',
+                sourceMode,
+              ),
+            )
+          }
+        >
+          <Space direction="vertical">
+            <Radio value="JSON">{t('returnResult.ordinaryData')}</Radio>
+            <Radio value="APPROVAL_SUBJECTS">
+              <Space direction="vertical" size={0}>
+                <Typography.Text>
+                  {t('returnResult.approvalSubjects')}
+                </Typography.Text>
+                <Typography.Text type="secondary">
+                  {t('returnResult.approvalSubjectsHint')}
+                </Typography.Text>
+              </Space>
+            </Radio>
+          </Space>
+        </Radio.Group>
+      </Card>
+
+      <Card size="small" title={t('returnResult.source')}>
+        <Radio.Group
+          value={sourceMode}
+          disabled={disabled}
+          onChange={(event) =>
+            onChange(
+              nextConfig(
+                resultType,
+                event.target.value as 'INPUT' | 'WORKFLOW',
+              ),
+            )
+          }
+        >
+          <Space direction="vertical">
+            <Radio value="INPUT">{t('returnResult.previousNode')}</Radio>
+            <Radio value="WORKFLOW">{t('returnResult.workflowData')}</Radio>
+          </Space>
+        </Radio.Group>
+        {sourceMode === 'INPUT' ? (
+          <Typography.Text
+            type="secondary"
+            style={{ display: 'block', marginTop: 10 }}
+          >
+            {t('returnResult.previousNodeHint')}
+          </Typography.Text>
+        ) : (
+          <div style={{ marginTop: 12 }}>
+            <Typography.Text>{t('returnResult.workflowPath')}</Typography.Text>
+            <Input
+              aria-label={t('returnResult.workflowPath')}
+              addonBefore="workflow."
+              value={value?.path ?? ''}
+              disabled={disabled}
+              placeholder={resultType === 'JSON' ? 'body' : 'approvers'}
+              onChange={(event) =>
+                onChange(
+                  nextConfig(resultType, 'WORKFLOW', {
+                    path: event.target.value,
+                  }),
+                )
+              }
+              style={{ marginTop: 6 }}
+            />
+            <Typography.Text
+              type="secondary"
+              style={{ display: 'block', marginTop: 6, fontSize: 12 }}
+            >
+              {t('returnResult.workflowHint')}
+            </Typography.Text>
+          </div>
+        )}
+      </Card>
+
+      {resultType === 'JSON' && (
+        <Card size="small" title={t('returnResult.httpResponse')}>
+          <Typography.Text>{t('returnResult.httpStatusCode')}</Typography.Text>
+          <InputNumber
+            aria-label={t('returnResult.httpStatusCode')}
+            min={100}
+            max={599}
+            precision={0}
+            value={value?.httpStatusCode ?? 200}
+            disabled={disabled}
+            onChange={(next) =>
+              onChange(
+                nextConfig('JSON', sourceMode, {
+                  httpStatusCode: next ?? 200,
+                }),
+              )
+            }
+            style={{ display: 'block', marginTop: 6, width: '100%' }}
+          />
+          <ResponseHeadersEditor
+            value={value?.httpHeaders ?? {}}
+            disabled={disabled}
+            onChange={(httpHeaders) =>
+              onChange(nextConfig('JSON', sourceMode, { httpHeaders }))
+            }
+          />
+        </Card>
+      )}
+    </Space>
+  );
+}
+
+function ResponseHeadersEditor({
+  value,
+  disabled,
+  onChange,
+}: {
+  value: Record<string, string>;
+  disabled?: boolean;
+  onChange(value: Record<string, string>): void;
+}) {
+  const { t } = useTranslation('workflow');
+  const entries = Object.entries(value);
+
+  function replace(index: number, key: string, headerValue: string) {
+    onChange(
+      Object.fromEntries(
+        entries.map((entry, current) =>
+          current === index ? [key, headerValue] : entry,
+        ),
+      ),
+    );
+  }
+
+  return (
+    <Space
+      direction="vertical"
+      size={8}
+      style={{ width: '100%', marginTop: 16 }}
+    >
+      <Typography.Text>{t('returnResult.httpHeaders')}</Typography.Text>
+      {entries.map(([key, headerValue], index) => (
+        <div
+          key={`${key}-${index}`}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'minmax(120px, 0.8fr) minmax(160px, 1fr) 32px',
+            gap: 8,
+          }}
+        >
+          <Input
+            aria-label={t('returnResult.headerName')}
+            value={key}
+            disabled={disabled}
+            placeholder="X-Result-Type"
+            onChange={(event) =>
+              replace(index, event.target.value, headerValue)
+            }
+          />
+          <Input
+            aria-label={t('returnResult.headerValue')}
+            value={headerValue}
+            disabled={disabled}
+            placeholder="created"
+            onChange={(event) => replace(index, key, event.target.value)}
+          />
+          <Button
+            type="text"
+            danger
+            icon={<DeleteOutlined />}
+            aria-label={t('returnResult.deleteHeader', { name: key })}
+            disabled={disabled}
+            onClick={() =>
+              onChange(
+                Object.fromEntries(
+                  entries.filter((_, current) => current !== index),
+                ),
+              )
+            }
+          />
+        </div>
+      ))}
+      <Button
+        type="dashed"
+        block
+        icon={<PlusOutlined />}
+        disabled={disabled}
+        onClick={() =>
+          onChange({
+            ...value,
+            [nextHeaderName(value)]: '',
+          })
+        }
+      >
+        {t('returnResult.addHeader')}
+      </Button>
+      <Typography.Text type="secondary">
+        {t('returnResult.httpHint')}
+      </Typography.Text>
+    </Space>
+  );
+}
+
+function nextHeaderName(value: Record<string, string>): string {
+  if (!('X-Result-Type' in value)) return 'X-Result-Type';
+  let index = 2;
+  while (`X-Result-Type-${index}` in value) index += 1;
+  return `X-Result-Type-${index}`;
+}

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

@@ -0,0 +1,61 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import i18n from '../../../../i18n';
+import { SubjectPicker } from './SubjectPicker';
+import { subjectProviderApi } from './subject-provider.api';
+
+vi.mock('./subject-provider.api', () => ({
+  subjectProviderApi: {
+    descriptors: vi.fn(),
+    search: vi.fn(),
+    preview: vi.fn(),
+    create: vi.fn(),
+    userGroupDetail: vi.fn(),
+    updateUserGroup: vi.fn(),
+    replaceUserGroupMembers: vi.fn(),
+  },
+}));
+
+describe('SubjectPicker', () => {
+  beforeEach(async () => {
+    await i18n.changeLanguage('en');
+    vi.mocked(subjectProviderApi.descriptors).mockResolvedValue([
+      {
+        key: 'USER_GROUP',
+        label: 'User groups',
+        capabilities: {
+          search: true,
+          preview: true,
+          inlineCreate: true,
+          edit: true,
+          emitsChanges: true,
+        },
+      },
+      {
+        key: 'USER',
+        label: 'Users',
+        capabilities: {
+          search: true,
+          preview: false,
+          inlineCreate: false,
+          edit: false,
+          emitsChanges: false,
+        },
+      },
+    ]);
+    vi.mocked(subjectProviderApi.search).mockResolvedValue([]);
+  });
+
+  it('reopens on the provider that owns the saved static selection', async () => {
+    render(
+      <SubjectPicker
+        value={[{ provider: 'USER', refs: ['junrujrwang'] }]}
+        onChange={vi.fn()}
+        schema={{ type: 'array' }}
+      />,
+    );
+
+    await waitFor(() => expect(screen.getByText('Users')).toBeInTheDocument());
+    expect(screen.queryByText('User groups')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,266 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Button,
+  Card,
+  Empty,
+  Select,
+  Space,
+  Spin,
+  Tag,
+  Typography,
+  message,
+} from 'antd';
+import { EditOutlined, PlusOutlined, TeamOutlined } from '@ant-design/icons';
+import type { WidgetProps } from '../schema-form/widget-registry';
+import { UserGroupCreateModal } from './UserGroupCreateModal';
+import { UserGroupEditModal } from './UserGroupEditModal';
+import { useTranslation } from 'react-i18next';
+import {
+  subjectProviderApi,
+  type SubjectPreview,
+  type SubjectProviderDescriptor,
+  type SubjectResource,
+} from './subject-provider.api';
+
+export interface SubjectSelection {
+  provider: string;
+  refs: string[];
+}
+
+export function SubjectPicker({
+  value = [],
+  onChange,
+  disabled,
+}: WidgetProps<SubjectSelection[]>) {
+  const { t } = useTranslation('workflow');
+  const [providers, setProviders] = useState<SubjectProviderDescriptor[]>([]);
+  const [activeProvider, setActiveProvider] = useState<string>(
+    () =>
+      value.find((selection) => selection.refs.length > 0)?.provider ??
+      value[0]?.provider,
+  );
+  const [resources, setResources] = useState<Record<string, SubjectResource[]>>(
+    {},
+  );
+  const [preview, setPreview] = useState<SubjectPreview>();
+  const [loading, setLoading] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [editingGroupRef, setEditingGroupRef] = useState<string>();
+  const [previewRefresh, setPreviewRefresh] = useState(0);
+  const debounce = useRef<ReturnType<typeof setTimeout>>();
+
+  useEffect(() => {
+    subjectProviderApi
+      .descriptors()
+      .then((items) => {
+        setProviders(items);
+        setActiveProvider((current) =>
+          items.some((item) => item.key === current) ? current : items[0]?.key,
+        );
+      })
+      .catch((error) =>
+        message.error(error?.message ?? t('subject.loadFailed')),
+      );
+  }, []);
+
+  const selected = useMemo(
+    () => value.find((item) => item.provider === activeProvider)?.refs ?? [],
+    [activeProvider, value],
+  );
+  const descriptor = providers.find((item) => item.key === activeProvider);
+
+  function search(query = '') {
+    if (!activeProvider) return;
+    setLoading(true);
+    subjectProviderApi
+      .search(activeProvider, query)
+      .then((items) =>
+        setResources((current) => ({ ...current, [activeProvider]: items })),
+      )
+      .catch((error) =>
+        message.error(error?.message ?? t('subject.searchFailed')),
+      )
+      .finally(() => setLoading(false));
+  }
+
+  useEffect(() => {
+    search();
+  }, [activeProvider]);
+
+  useEffect(() => {
+    if (
+      !activeProvider ||
+      !selected.length ||
+      !descriptor?.capabilities.preview
+    ) {
+      setPreview(undefined);
+      return;
+    }
+    subjectProviderApi
+      .preview(activeProvider, selected)
+      .then(setPreview)
+      .catch(() => setPreview(undefined));
+  }, [
+    activeProvider,
+    descriptor?.capabilities.preview,
+    selected.join('\u0000'),
+    previewRefresh,
+  ]);
+
+  function changeRefs(refs: string[]) {
+    if (!activeProvider) return;
+    const others = value.filter((item) => item.provider !== activeProvider);
+    onChange(
+      refs.length
+        ? [...others, { provider: activeProvider, refs: [...new Set(refs)] }]
+        : others,
+    );
+  }
+
+  function handleSearch(query: string) {
+    clearTimeout(debounce.current);
+    debounce.current = setTimeout(() => search(query), 250);
+  }
+
+  const options = new Map<string, SubjectResource>();
+  for (const item of [
+    ...(resources[activeProvider ?? ''] ?? []),
+    ...(preview?.items ?? []),
+  ])
+    options.set(item.ref, item);
+
+  return (
+    <Card
+      size="small"
+      style={{ borderColor: '#d9e6ff', background: '#fbfdff' }}
+    >
+      <Space direction="vertical" size={12} style={{ width: '100%' }}>
+        <Select
+          aria-label={t('subject.provider')}
+          value={activeProvider}
+          disabled={disabled}
+          options={providers.map((item) => ({
+            label: item.label,
+            value: item.key,
+          }))}
+          onChange={setActiveProvider}
+          style={{ width: '100%' }}
+        />
+        {descriptor ? (
+          <Space.Compact style={{ width: '100%' }}>
+            <Select
+              aria-label={`${descriptor.label} selections`}
+              mode="multiple"
+              value={selected}
+              disabled={disabled}
+              loading={loading}
+              filterOption={false}
+              onSearch={handleSearch}
+              onChange={changeRefs}
+              notFoundContent={
+                loading ? (
+                  <Spin size="small" />
+                ) : (
+                  <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                )
+              }
+              options={[...options.values()].map((item) => ({
+                label: item.label,
+                value: item.ref,
+                disabled: item.active === false,
+              }))}
+              style={{ flex: 1 }}
+              placeholder={t('subject.search', {
+                name: descriptor.label.toLowerCase(),
+              })}
+            />
+            {descriptor.capabilities.inlineCreate && (
+              <Button
+                icon={<PlusOutlined />}
+                disabled={disabled}
+                onClick={() => setCreateOpen(true)}
+              >
+                {t('subject.create')}
+              </Button>
+            )}
+          </Space.Compact>
+        ) : (
+          <Spin size="small" />
+        )}
+        {preview?.items.map((item) => (
+          <div
+            key={item.ref}
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              gap: 12,
+            }}
+          >
+            <Typography.Text>
+              <TeamOutlined /> {item.label}
+            </Typography.Text>
+            <Space size={4}>
+              {item.revision !== undefined && <Tag>v{item.revision}</Tag>}
+              {typeof item.metadata?.resolvedUserCount === 'number' && (
+                <Tag color="blue">
+                  {t('subject.usersCount', {
+                    count: item.metadata.resolvedUserCount,
+                  })}
+                </Tag>
+              )}
+              {descriptor &&
+                descriptor.key === 'USER_GROUP' &&
+                descriptor.capabilities.edit && (
+                  <Button
+                    type="link"
+                    size="small"
+                    icon={<EditOutlined />}
+                    disabled={disabled}
+                    onClick={() => setEditingGroupRef(item.ref)}
+                  >
+                    {t('subject.edit')}
+                  </Button>
+                )}
+            </Space>
+          </div>
+        ))}
+      </Space>
+      {descriptor && (
+        <UserGroupCreateModal
+          open={createOpen}
+          provider={descriptor.key}
+          providerLabel={descriptor.label.replace(/s$/, '')}
+          createSchema={descriptor.createSchema}
+          createUiSchema={descriptor.createUiSchema}
+          onCancel={() => setCreateOpen(false)}
+          onCreated={(resource) => {
+            setCreateOpen(false);
+            setResources((current) => ({
+              ...current,
+              [descriptor.key]: [resource, ...(current[descriptor.key] ?? [])],
+            }));
+            changeRefs([...selected, resource.ref]);
+          }}
+        />
+      )}
+      <UserGroupEditModal
+        open={Boolean(editingGroupRef)}
+        groupRef={editingGroupRef}
+        onCancel={() => setEditingGroupRef(undefined)}
+        onSaved={(resource) => {
+          setEditingGroupRef(undefined);
+          setResources((current) => ({
+            ...current,
+            USER_GROUP: [
+              resource,
+              ...(current.USER_GROUP ?? []).filter(
+                (item) => item.ref !== resource.ref,
+              ),
+            ],
+          }));
+          setPreviewRefresh((current) => current + 1);
+        }}
+      />
+    </Card>
+  );
+}

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

@@ -0,0 +1,104 @@
+import { Alert, Divider, Space, Switch, 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 SubmitApprovalResultConfig = {
+  inputBindings?: Record<string, ParameterBinding>;
+};
+
+const REQUIRED_FIELDS = [
+  'requestId',
+  'channelRef',
+  'eventId',
+  'approverId',
+  'decision',
+] as const;
+const OPTIONAL_FIELDS = ['comment', 'payload'] as const;
+
+export function SubmitApprovalResultConfigEditor({
+  value,
+  onChange,
+  disabled,
+}: WidgetProps<SubmitApprovalResultConfig>) {
+  const { t } = useTranslation('workflow');
+  const config = value ?? {};
+  const bindings = config.inputBindings ?? {};
+
+  function update(key: string, binding?: ParameterBinding) {
+    const next = { ...bindings };
+    if (binding) next[key] = binding;
+    else delete next[key];
+    onChange({ ...config, inputBindings: next });
+  }
+
+  return (
+    <Space direction="vertical" size={16} style={{ width: '100%' }}>
+      <Alert
+        type="info"
+        showIcon
+        message={t('submitApprovalResult.description')}
+        description={t('submitApprovalResult.hint')}
+      />
+
+      {REQUIRED_FIELDS.map((field) => (
+        <div key={field}>
+          <Typography.Text strong style={{ display: 'block', marginBottom: 6 }}>
+            {t(`submitApprovalResult.fields.${field}`)} *
+          </Typography.Text>
+          <ParameterBindingEditor
+            name={t(`submitApprovalResult.fields.${field}`)}
+            defaultPath={field}
+            value={
+              bindings[field] ?? {
+                source: 'INPUT',
+                path: field,
+              }
+            }
+            disabled={disabled}
+            onChange={(binding) => update(field, binding)}
+          />
+        </div>
+      ))}
+
+      <Divider style={{ margin: '4px 0' }} />
+      <Typography.Text strong>
+        {t('submitApprovalResult.optional')}
+      </Typography.Text>
+
+      {OPTIONAL_FIELDS.map((field) => {
+        const enabled = Boolean(bindings[field]);
+        return (
+          <div key={field}>
+            <Space style={{ marginBottom: enabled ? 8 : 0 }}>
+              <Switch
+                size="small"
+                checked={enabled}
+                disabled={disabled}
+                onChange={(checked) =>
+                  update(
+                    field,
+                    checked ? { source: 'INPUT', path: field } : undefined,
+                  )
+                }
+              />
+              <Typography.Text>
+                {t(`submitApprovalResult.fields.${field}`)}
+              </Typography.Text>
+            </Space>
+            {enabled && (
+              <ParameterBindingEditor
+                name={t(`submitApprovalResult.fields.${field}`)}
+                defaultPath={field}
+                value={bindings[field]}
+                disabled={disabled}
+                onChange={(binding) => update(field, binding)}
+              />
+            )}
+          </div>
+        );
+      })}
+    </Space>
+  );
+}