@gadmin2n/schematics 0.0.139 → 0.0.141

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

@@ -0,0 +1,218 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Form } from 'antd';
+import type { FormInstance } from 'antd';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import i18n from '../../../../i18n';
+import { SchemaForm } from './SchemaForm';
+import { WidgetRegistry, type WidgetProps } from './widget-registry';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: () => ({
+    matches: false,
+    addListener: () => undefined,
+    removeListener: () => undefined,
+    addEventListener: () => undefined,
+    removeEventListener: () => undefined,
+    dispatchEvent: () => false,
+  }),
+});
+
+describe('SchemaForm', () => {
+  beforeEach(async () => {
+    await i18n.changeLanguage('en');
+  });
+
+  it('renders nested primitives and addable array fields under config', async () => {
+    let form!: FormInstance;
+    function TestForm() {
+      [form] = Form.useForm();
+      return (
+        <Form
+          form={form}
+          initialValues={{
+            config: { timeout: { duration: 30 }, subjects: ['alice'] },
+          }}
+        >
+          <SchemaForm
+            schema={{
+              type: 'object',
+              required: ['requiredSettings'],
+              properties: {
+                timeout: {
+                  type: 'object',
+                  properties: {
+                    duration: { type: 'integer', title: 'Duration' },
+                  },
+                },
+                subjects: {
+                  type: 'array',
+                  title: 'Subjects',
+                  items: { type: 'string', title: 'Subject' },
+                },
+                requiredSettings: {
+                  type: 'object',
+                  title: 'Required settings',
+                  properties: {},
+                },
+                optionalSettings: {
+                  type: 'object',
+                  title: 'Optional settings',
+                  properties: {},
+                },
+              },
+            }}
+          />
+        </Form>
+      );
+    }
+    render(<TestForm />);
+
+    expect(screen.getByLabelText('Duration')).toHaveValue('30');
+    expect(screen.getByLabelText('Subject 1')).toHaveValue('alice');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add Subjects' }));
+    expect(screen.getByLabelText('Subject 2')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Remove Subject 1' }));
+    expect(screen.queryByDisplayValue('alice')).not.toBeInTheDocument();
+
+    await expect(form.validateFields()).rejects.toBeDefined();
+    form.setFieldValue(['config', 'requiredSettings'], {});
+    await expect(form.validateFields()).resolves.toBeDefined();
+  });
+
+  it('resolves a custom widget only from uiSchema and passes its value', () => {
+    const registry = new WidgetRegistry();
+    const receivedValues: unknown[] = [];
+    function SubjectPicker({ value }: WidgetProps) {
+      receivedValues.push(value);
+      return <div data-testid="subject-picker">{JSON.stringify(value)}</div>;
+    }
+    registry.register('subject-picker', SubjectPicker);
+
+    render(
+      <Form initialValues={{ config: { subjects: ['group:ops'] } }}>
+        <SchemaForm
+          registry={registry}
+          schema={{
+            type: 'object',
+            properties: {
+              subjects: {
+                type: 'array',
+                title: 'Subjects',
+                items: { type: 'string' },
+              },
+            },
+          }}
+          uiSchema={{
+            fields: { subjects: { widget: 'subject-picker' } },
+          }}
+        />
+      </Form>,
+    );
+
+    expect(screen.getByTestId('subject-picker')).toHaveTextContent(
+      '["group:ops"]',
+    );
+    expect(receivedValues).toContainEqual(['group:ops']);
+  });
+
+  it('reports and renders an unknown widget, then clears the error', async () => {
+    const onSchemaError = vi.fn();
+    const schema = {
+      type: 'object' as const,
+      properties: { subject: { type: 'string' as const } },
+    };
+    const { rerender } = render(
+      <Form>
+        <SchemaForm
+          schema={schema}
+          uiSchema={{ fields: { subject: { widget: 'missing-picker' } } }}
+          registry={new WidgetRegistry()}
+          onSchemaError={onSchemaError}
+        />
+      </Form>,
+    );
+
+    expect(
+      screen.getByText('Unsupported widget: missing-picker'),
+    ).toBeVisible();
+    await waitFor(() =>
+      expect(onSchemaError).toHaveBeenLastCalledWith(expect.any(Error)),
+    );
+
+    rerender(
+      <Form>
+        <SchemaForm
+          schema={{
+            type: 'object',
+            properties: { subjects: { type: 'array' } },
+          }}
+          uiSchema={{
+            fields: {
+              subjects: { items: { widget: 'missing-item-widget' } },
+            },
+          }}
+          registry={new WidgetRegistry()}
+          onSchemaError={onSchemaError}
+        />
+      </Form>,
+    );
+    await waitFor(() =>
+      expect(onSchemaError).toHaveBeenLastCalledWith(expect.any(Error)),
+    );
+    expect(onSchemaError.mock.calls.at(-1)?.[0]?.message).toBe(
+      'Unsupported widget: missing-item-widget',
+    );
+
+    rerender(
+      <Form>
+        <SchemaForm
+          schema={schema}
+          uiSchema={{
+            fields: {
+              subject: {},
+              missingSchemaField: { widget: 'missing-field-widget' },
+            },
+            subject: { widget: 'shadowed-widget' },
+            options: { widget: 'options-widget' },
+          }}
+          registry={new WidgetRegistry()}
+          onSchemaError={onSchemaError}
+        />
+      </Form>,
+    );
+
+    await waitFor(() => expect(onSchemaError).toHaveBeenLastCalledWith(null));
+    expect(screen.queryByText(/Unsupported widget:/)).not.toBeInTheDocument();
+
+    rerender(
+      <Form>
+        <SchemaForm
+          schema={schema}
+          uiSchema={{ fields: { subject: { widget: 'missing-picker' } } }}
+          registry={new WidgetRegistry()}
+          onSchemaError={onSchemaError}
+        />
+      </Form>,
+    );
+    await waitFor(() =>
+      expect(onSchemaError).toHaveBeenLastCalledWith(expect.any(Error)),
+    );
+
+    rerender(
+      <Form>
+        <SchemaForm
+          schema={null}
+          uiSchema={{ fields: { subject: { widget: 'missing-picker' } } }}
+          registry={new WidgetRegistry()}
+          onSchemaError={onSchemaError}
+        />
+      </Form>,
+    );
+    await waitFor(() => expect(onSchemaError).toHaveBeenLastCalledWith(null));
+    expect(screen.queryByText(/Unsupported widget:/)).not.toBeInTheDocument();
+  });
+});

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/schema-form/SchemaForm.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useMemo } from 'react';
+import type { JsonSchema, UiSchema } from './schema.types';
+import {
+  defaultWidgetRegistry,
+  registerDefaultWidgets,
+} from './default-widgets';
+import { resolveChildUiSchema, SchemaField } from './SchemaField';
+import type { WidgetRegistry } from './widget-registry';
+
+interface SchemaFormProps {
+  schema: JsonSchema | null;
+  uiSchema?: UiSchema | null;
+  disabled?: boolean;
+  registry?: WidgetRegistry;
+  onSchemaError?: (error: Error | null) => void;
+}
+
+function findUnsupportedWidget(
+  schema: JsonSchema | null,
+  uiSchema: UiSchema | null | undefined,
+  registry: WidgetRegistry,
+): string | null {
+  if (!schema) return null;
+  if (uiSchema?.widget) {
+    return registry.has(uiSchema.widget) ? null : uiSchema.widget;
+  }
+
+  if (schema.type === 'object' || schema.properties) {
+    for (const [key, childSchema] of Object.entries(schema.properties ?? {})) {
+      const unsupported = findUnsupportedWidget(
+        childSchema,
+        resolveChildUiSchema(uiSchema ?? undefined, key),
+        registry,
+      );
+      if (unsupported) return unsupported;
+    }
+  } else if (schema.type === 'array') {
+    return findUnsupportedWidget(
+      schema.items ?? { type: 'string' },
+      uiSchema?.items,
+      registry,
+    );
+  }
+
+  return null;
+}
+
+export function SchemaForm({
+  schema,
+  uiSchema,
+  disabled,
+  registry = defaultWidgetRegistry,
+  onSchemaError,
+}: SchemaFormProps) {
+  registerDefaultWidgets(registry);
+  const unsupportedWidget = useMemo(
+    () => findUnsupportedWidget(schema, uiSchema, registry),
+    [registry, schema, uiSchema],
+  );
+  const schemaError = useMemo(
+    () =>
+      unsupportedWidget
+        ? new Error(`Unsupported widget: ${unsupportedWidget}`)
+        : null,
+    [unsupportedWidget],
+  );
+
+  useEffect(() => {
+    onSchemaError?.(schemaError);
+  }, [onSchemaError, schemaError]);
+
+  if (!schema) return null;
+  return (
+    <SchemaField
+      schema={schema}
+      uiSchema={uiSchema ?? undefined}
+      name={['config']}
+      registry={registry}
+      disabled={disabled}
+      root
+    />
+  );
+}

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

@@ -0,0 +1,135 @@
+import { Input, InputNumber, Select, Switch } from 'antd';
+import { ApprovalRequestTriggerConfigEditor } from '../widgets/ApprovalRequestTriggerConfigEditor';
+import { ApprovalRuleEditor } from '../widgets/ApprovalRuleEditor';
+import { CallableInputParametersEditor } from '../widgets/CallableInputParametersEditor';
+import { CodeConfigEditor } from '../widgets/CodeConfigEditor';
+import { ExternalRequestConfigEditor } from '../widgets/ExternalRequestConfigEditor';
+import { ExternalWaitConfigEditor } from '../widgets/ExternalWaitConfigEditor';
+import { HttpRequestConfigEditor } from '../widgets/HttpRequestConfigEditor';
+import { HumanApprovalConfigEditor } from '../widgets/HumanApprovalConfigEditor';
+import { ReturnResultConfigEditor } from '../widgets/ReturnResultConfigEditor';
+import { SubjectPicker } from '../widgets/SubjectPicker';
+import { SubmitApprovalResultConfigEditor } from '../widgets/SubmitApprovalResultConfigEditor';
+import { SubmitExternalResultConfigEditor } from '../widgets/SubmitExternalResultConfigEditor';
+import {
+  widgetRegistry,
+  type WidgetComponent,
+  type WidgetProps,
+  type WidgetRegistry,
+} from './widget-registry';
+
+function TextWidget({ id, value, onChange, disabled }: WidgetProps<string>) {
+  return (
+    <Input
+      id={id}
+      value={value}
+      onChange={(event) => onChange(event.target.value)}
+      disabled={disabled}
+    />
+  );
+}
+
+function TextareaWidget({
+  id,
+  value,
+  onChange,
+  disabled,
+}: WidgetProps<string>) {
+  return (
+    <Input.TextArea
+      id={id}
+      rows={3}
+      value={value}
+      onChange={(event) => onChange(event.target.value)}
+      disabled={disabled}
+    />
+  );
+}
+
+function NumberWidget({
+  id,
+  value,
+  onChange,
+  disabled,
+  schema,
+}: WidgetProps<number | null>) {
+  return (
+    <InputNumber
+      id={id}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      precision={schema.type === 'integer' ? 0 : undefined}
+      style={{ width: '100%' }}
+    />
+  );
+}
+
+function BooleanWidget({
+  id,
+  value,
+  onChange,
+  disabled,
+}: WidgetProps<boolean>) {
+  return (
+    <Switch
+      id={id}
+      checked={Boolean(value)}
+      onChange={onChange}
+      disabled={disabled}
+    />
+  );
+}
+
+function SelectWidget({
+  id,
+  value,
+  onChange,
+  disabled,
+  schema,
+}: WidgetProps<unknown>) {
+  return (
+    <Select
+      id={id}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      allowClear
+      options={(schema.enum ?? []).map((option) => ({
+        label: String(option),
+        value: option,
+      }))}
+    />
+  );
+}
+
+const DEFAULT_WIDGETS = {
+  text: TextWidget,
+  textarea: TextareaWidget,
+  number: NumberWidget,
+  boolean: BooleanWidget,
+  select: SelectWidget,
+  'subject-picker': SubjectPicker,
+  'approval-rule-editor': ApprovalRuleEditor,
+  'human-approval-config': HumanApprovalConfigEditor,
+  'http-request-config': HttpRequestConfigEditor,
+  'code-config': CodeConfigEditor,
+  'callable-input-parameters': CallableInputParametersEditor,
+  'return-result-config': ReturnResultConfigEditor,
+  'approval-request-trigger-config': ApprovalRequestTriggerConfigEditor,
+  'external-request-config': ExternalRequestConfigEditor,
+  'submit-approval-result-config': SubmitApprovalResultConfigEditor,
+  'submit-external-result-config': SubmitExternalResultConfigEditor,
+  'external-wait-config': ExternalWaitConfigEditor,
+} as const;
+
+export function registerDefaultWidgets(
+  registry: WidgetRegistry,
+): WidgetRegistry {
+  for (const [name, widget] of Object.entries(DEFAULT_WIDGETS)) {
+    if (!registry.has(name)) registry.register(name, widget as WidgetComponent);
+  }
+  return registry;
+}
+
+export const defaultWidgetRegistry = registerDefaultWidgets(widgetRegistry);

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/schema-form/schema-defaults.ts

@@ -0,0 +1,36 @@
+import type { JsonSchema } from './schema.types';
+
+function cloneDefault(value: unknown): unknown {
+  if (Array.isArray(value)) return value.map(cloneDefault);
+  if (value && typeof value === 'object') {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, child]) => [key, cloneDefault(child)]),
+    );
+  }
+  return value;
+}
+
+export function schemaDefaultValue(schema: JsonSchema): unknown {
+  if (schema.default !== undefined) return cloneDefault(schema.default);
+
+  if (schema.type === 'object' || schema.properties) {
+    const value: Record<string, unknown> = {};
+    for (const [key, childSchema] of Object.entries(schema.properties ?? {})) {
+      const childDefault = schemaDefaultValue(childSchema);
+      if (childDefault !== undefined) value[key] = childDefault;
+    }
+    return value;
+  }
+
+  return undefined;
+}
+
+export function schemaConfigDefaults(
+  schema: JsonSchema | null | undefined,
+): Record<string, unknown> {
+  if (!schema) return {};
+  const value = schemaDefaultValue(schema);
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/schema-form/schema.types.ts

@@ -0,0 +1,32 @@
+export type JsonSchemaType =
+  | 'object'
+  | 'array'
+  | 'string'
+  | 'number'
+  | 'integer'
+  | 'boolean'
+  | 'null';
+
+export interface JsonSchema {
+  type?: JsonSchemaType;
+  title?: string;
+  description?: string;
+  properties?: Record<string, JsonSchema>;
+  required?: string[];
+  items?: JsonSchema;
+  enum?: unknown[];
+  default?: unknown;
+}
+
+export type UiOptions = Record<string, unknown>;
+
+/**
+ * UI schemas mirror the config schema's property tree. Reserved keys are typed;
+ * all other keys are child UI-schema nodes.
+ */
+export type UiSchema = Record<string, unknown> & {
+  widget?: string;
+  options?: UiOptions;
+  fields?: Record<string, UiSchema>;
+  items?: UiSchema;
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/schema-form/widget-registry.test.tsx

@@ -0,0 +1,23 @@
+import type { ComponentType } from 'react';
+import { describe, expect, it } from 'vitest';
+import { type WidgetProps, WidgetRegistry } from './widget-registry';
+
+const TextWidget: ComponentType<WidgetProps> = () => null;
+
+describe('WidgetRegistry', () => {
+  it('registers and returns a widget', () => {
+    const registry = new WidgetRegistry();
+
+    registry.register('text', TextWidget);
+
+    expect(registry.get('text')).toBe(TextWidget);
+  });
+
+  it('reports an unknown widget with a stable error', () => {
+    const registry = new WidgetRegistry();
+
+    expect(() => registry.get('subject-picker')).toThrow(
+      'Widget not registered: subject-picker',
+    );
+  });
+});

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/schema-form/widget-registry.tsx

@@ -0,0 +1,52 @@
+import type { ComponentType } from 'react';
+import type { JsonSchema, UiOptions } from './schema.types';
+
+export interface WidgetProps<T = unknown> {
+  id?: string;
+  value: T;
+  onChange(value: T): void;
+  disabled?: boolean;
+  schema: JsonSchema;
+  uiOptions?: UiOptions;
+}
+
+export type WidgetComponent<T = unknown> = ComponentType<WidgetProps<T>>;
+
+export class WidgetRegistry {
+  private readonly widgets = new Map<string, WidgetComponent>();
+
+  register<T>(name: string, widget: WidgetComponent<T>): void {
+    if (!name.trim()) {
+      throw new Error('Widget name is required');
+    }
+    if (this.widgets.has(name)) {
+      throw new Error(`Widget already registered: ${name}`);
+    }
+    this.widgets.set(name, widget as WidgetComponent);
+  }
+
+  has(name: string): boolean {
+    return this.widgets.has(name);
+  }
+
+  get<T = unknown>(name: string): WidgetComponent<T> {
+    const widget = this.widgets.get(name);
+    if (!widget) {
+      throw new Error(`Widget not registered: ${name}`);
+    }
+    return widget as WidgetComponent<T>;
+  }
+}
+
+export const widgetRegistry = new WidgetRegistry();
+
+export function registerWidget<T>(
+  name: string,
+  component: WidgetComponent<T>,
+): void {
+  widgetRegistry.register(name, component);
+}
+
+export function getWidget<T = unknown>(name: string): WidgetComponent<T> {
+  return widgetRegistry.get<T>(name);
+}

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

@@ -28,8 +28,8 @@ interface NodeInstance {
   nodeTypeId: string;
   name: string;
   description: string | null;
-  config: Record<string, any>;
   isEnabled: boolean;
+  config: Record<string, unknown>;
   creator: string;
   createdAt: string;
   updatedAt: string;
@@ -67,8 +67,8 @@ export default function NodeInstanceShowPage() {
           nodeTypeId: true,
           name: true,
           description: true,
-          config: true,
           isEnabled: true,
+          config: true,
           creator: true,
           createdAt: true,
           updatedAt: true,
@@ -124,19 +124,15 @@ export default function NodeInstanceShowPage() {
 
   const configSchema = record.nodeType?.configSchema as any;
   const configProperties = configSchema?.properties ?? {};
-  const configData: Record<string, any> =
-    typeof record.config === 'string'
-      ? (() => {
-          try {
-            return JSON.parse(record.config);
-          } catch {
-            return {};
-          }
-        })()
-      : (record.config ?? {});
+  const configData = record.config;
 
   return (
-    <div style={{ background: '#f0f2f5', minHeight: 'calc(100vh - 64px)' }}>
+    <div
+      style={{
+        background: 'var(--ant-color-bg-layout)',
+        minHeight: 'calc(100vh - 64px)',
+      }}
+    >
       <Card style={{ marginBottom: 16 }}>
         <div
           style={{

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

@@ -0,0 +1,39 @@
+import { Alert, Space, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import type { WidgetProps } from '../schema-form/widget-registry';
+
+const WORKFLOW_FIELDS = [
+  'requestId',
+  'channelRef',
+  'dispatchKey',
+  'candidates',
+  'businessData',
+  'expiresAt',
+] as const;
+
+export function ApprovalRequestTriggerConfigEditor(
+  _props: WidgetProps<Record<string, never>>,
+) {
+  const { t } = useTranslation('workflow');
+
+  return (
+    <Space direction="vertical" size={12} style={{ width: '100%' }}>
+      <Alert
+        type="info"
+        showIcon
+        message={t('approvalRequestTrigger.title')}
+        description={t('approvalRequestTrigger.description')}
+      />
+      <Typography.Text strong>
+        {t('approvalRequestTrigger.availableFields')}
+      </Typography.Text>
+      <Space direction="vertical" size={4}>
+        {WORKFLOW_FIELDS.map((field) => (
+          <Typography.Text code key={field}>
+            workflow.{field}
+          </Typography.Text>
+        ))}
+      </Space>
+    </Space>
+  );
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ApprovalRuleEditor } from './ApprovalRuleEditor';
+
+describe('ApprovalRuleEditor', () => {
+  it('materializes the visible ANY default into the form value', async () => {
+    const onChange = vi.fn();
+
+    render(
+      <ApprovalRuleEditor
+        value={undefined as never}
+        onChange={onChange}
+        schema={{ type: 'object', default: { mode: 'ANY' } }}
+      />,
+    );
+
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith({ mode: 'ANY' }));
+  });
+});