@gadmin2n/schematics 0.0.139 → 0.0.140

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>
+  );
+}

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

@@ -0,0 +1,98 @@
+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 SubmitExternalResultConfig = {
+  inputBindings?: Record<string, ParameterBinding>;
+};
+
+const REQUIRED_FIELDS = ['callbackToken', 'eventId', 'outcome'] as const;
+const OPTIONAL_FIELDS = ['operatorId', 'data'] as const;
+
+export function SubmitExternalResultConfigEditor({
+  value,
+  onChange,
+  disabled,
+}: WidgetProps<SubmitExternalResultConfig>) {
+  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('submitExternalResult.description')}
+        description={t('submitExternalResult.hint')}
+      />
+
+      {REQUIRED_FIELDS.map((field) => (
+        <div key={field}>
+          <Typography.Text strong style={{ display: 'block', marginBottom: 6 }}>
+            {t(`submitExternalResult.fields.${field}`)} *
+          </Typography.Text>
+          <ParameterBindingEditor
+            name={t(`submitExternalResult.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('submitExternalResult.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(`submitExternalResult.fields.${field}`)}
+              </Typography.Text>
+            </Space>
+            {enabled && (
+              <ParameterBindingEditor
+                name={t(`submitExternalResult.fields.${field}`)}
+                defaultPath={field}
+                value={bindings[field]}
+                disabled={disabled}
+                onChange={(binding) => update(field, binding)}
+              />
+            )}
+          </div>
+        );
+      })}
+    </Space>
+  );
+}

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

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { Form, Modal, message } from 'antd';
+import { SchemaForm } from '../schema-form/SchemaForm';
+import type { JsonSchema, UiSchema } from '../schema-form/schema.types';
+import {
+  subjectProviderApi,
+  type SubjectResource,
+} from './subject-provider.api';
+
+interface Props {
+  open: boolean;
+  provider: string;
+  providerLabel: string;
+  createSchema?: Record<string, unknown>;
+  createUiSchema?: Record<string, unknown>;
+  onCancel(): void;
+  onCreated(resource: SubjectResource): void;
+}
+
+export function UserGroupCreateModal({
+  open,
+  provider,
+  providerLabel,
+  createSchema,
+  createUiSchema,
+  onCancel,
+  onCreated,
+}: Props) {
+  const [form] = Form.useForm();
+  const [saving, setSaving] = useState(false);
+
+  async function submit() {
+    try {
+      const values = await form.validateFields();
+      setSaving(true);
+      const resource = await subjectProviderApi.create(
+        provider,
+        values.config ?? {},
+      );
+      message.success(`${providerLabel} created and selected`);
+      form.resetFields();
+      onCreated(resource);
+    } catch (error: any) {
+      if (error?.errorFields) return;
+      message.error(error?.message ?? `Failed to create ${providerLabel}`);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      title={`Create ${providerLabel}`}
+      okText="Create and select"
+      confirmLoading={saving}
+      onOk={submit}
+      onCancel={onCancel}
+      destroyOnClose
+    >
+      <Form form={form} layout="vertical" preserve={false}>
+        <SchemaForm
+          schema={(createSchema ?? null) as JsonSchema | null}
+          uiSchema={(createUiSchema ?? null) as UiSchema | null}
+          disabled={saving}
+        />
+      </Form>
+    </Modal>
+  );
+}