@gadmin2n/schematics 0.0.144 → 0.0.146

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

@@ -0,0 +1,190 @@
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Divider, Radio, 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 ConditionOperator =
+  | 'EQ'
+  | 'NEQ'
+  | 'GT'
+  | 'GTE'
+  | 'LT'
+  | 'LTE'
+  | 'CONTAINS'
+  | 'NOT_CONTAINS'
+  | 'EMPTY'
+  | 'NOT_EMPTY';
+
+type Condition = {
+  id: string;
+  left: ParameterBinding;
+  operator: ConditionOperator;
+  right?: ParameterBinding;
+};
+
+type IfElseConfig = {
+  conditions: Condition[];
+  combineOperation: 'AND' | 'OR';
+};
+
+const UNARY_OPERATORS = new Set<ConditionOperator>(['EMPTY', 'NOT_EMPTY']);
+
+function newCondition(): Condition {
+  return {
+    id: `condition-${crypto.randomUUID()}`,
+    left: { source: 'INPUT', path: '' },
+    operator: 'EQ',
+    right: { source: 'FIXED', valueType: 'STRING', value: '' },
+  };
+}
+
+export function IfElseConfigEditor({
+  value,
+  onChange,
+  disabled,
+}: WidgetProps<IfElseConfig | undefined>) {
+  const { t } = useTranslation('workflow');
+  const config: IfElseConfig = value ?? {
+    conditions: [newCondition()],
+    combineOperation: 'AND',
+  };
+  const conditions = config.conditions ?? [];
+
+  const updateCondition = (index: number, next: Condition) =>
+    onChange({
+      ...config,
+      conditions: conditions.map((condition, current) =>
+        current === index ? next : condition,
+      ),
+    });
+
+  return (
+    <Space direction="vertical" size={12} style={{ width: '100%' }}>
+      {conditions.length > 1 && (
+        <Radio.Group
+          value={config.combineOperation}
+          disabled={disabled}
+          onChange={(event) =>
+            onChange({ ...config, combineOperation: event.target.value })
+          }
+        >
+          <Radio.Button value="AND">
+            {t('nodeEditors.ifElse.matchAll')}
+          </Radio.Button>
+          <Radio.Button value="OR">
+            {t('nodeEditors.ifElse.matchAny')}
+          </Radio.Button>
+        </Radio.Group>
+      )}
+
+      {conditions.map((condition, index) => (
+        <div key={condition.id}>
+          {index > 0 && <Divider style={{ margin: '2px 0 12px' }} />}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              marginBottom: 8,
+            }}
+          >
+            <Typography.Text strong>
+              {t('nodeEditors.ifElse.condition', { number: index + 1 })}
+            </Typography.Text>
+            <Button
+              type="text"
+              danger
+              icon={<DeleteOutlined />}
+              aria-label={t('nodeEditors.ifElse.deleteCondition', {
+                number: index + 1,
+              })}
+              disabled={disabled}
+              onClick={() =>
+                onChange({
+                  ...config,
+                  conditions: conditions.filter(
+                    (_, current) => current !== index,
+                  ),
+                })
+              }
+            />
+          </div>
+
+          <Space direction="vertical" size={8} style={{ width: '100%' }}>
+            <ParameterBindingEditor
+              name={t('nodeEditors.ifElse.leftValue')}
+              defaultPath=""
+              value={condition.left}
+              disabled={disabled}
+              onChange={(left) =>
+                updateCondition(index, { ...condition, left })
+              }
+            />
+            <Select<ConditionOperator>
+              aria-label={t('nodeEditors.ifElse.operator')}
+              value={condition.operator}
+              disabled={disabled}
+              options={(
+                [
+                  'EQ',
+                  'NEQ',
+                  'GT',
+                  'GTE',
+                  'LT',
+                  'LTE',
+                  'CONTAINS',
+                  'NOT_CONTAINS',
+                  'EMPTY',
+                  'NOT_EMPTY',
+                ] as const
+              ).map((operator) => ({
+                value: operator,
+                label: t(`nodeEditors.ifElse.operators.${operator}`),
+              }))}
+              onChange={(operator) =>
+                updateCondition(index, {
+                  ...condition,
+                  operator,
+                  right: UNARY_OPERATORS.has(operator)
+                    ? undefined
+                    : (condition.right ?? {
+                        source: 'FIXED',
+                        valueType: 'STRING',
+                        value: '',
+                      }),
+                })
+              }
+              style={{ width: '100%' }}
+            />
+            {!UNARY_OPERATORS.has(condition.operator) && (
+              <ParameterBindingEditor
+                name={t('nodeEditors.ifElse.rightValue')}
+                defaultPath=""
+                value={condition.right}
+                disabled={disabled}
+                onChange={(right) =>
+                  updateCondition(index, { ...condition, right })
+                }
+              />
+            )}
+          </Space>
+        </div>
+      ))}
+
+      <Button
+        type="dashed"
+        block
+        className="workflow-panel-action"
+        icon={<PlusOutlined />}
+        disabled={disabled}
+        onClick={() =>
+          onChange({ ...config, conditions: [...conditions, newCondition()] })
+        }
+      >
+        {t('nodeEditors.ifElse.addCondition')}
+      </Button>
+    </Space>
+  );
+}

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

@@ -0,0 +1,152 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Form } from 'antd';
+import type { FormInstance } from 'antd';
+import { beforeEach, describe, expect, it } from 'vitest';
+import i18n from '../../../../i18n';
+import { SchemaForm } from '../schema-form/SchemaForm';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: () => ({
+    matches: false,
+    addListener: () => undefined,
+    removeListener: () => undefined,
+    addEventListener: () => undefined,
+    removeEventListener: () => undefined,
+    dispatchEvent: () => false,
+  }),
+});
+
+function renderEditor() {
+  let form!: FormInstance;
+
+  function TestForm() {
+    [form] = Form.useForm();
+    return (
+      <Form
+        form={form}
+        initialValues={{
+          config: {
+            inputSchema: {
+              type: 'object',
+              properties: {
+                employeeId: {
+                  type: 'string',
+                  title: 'Applicant ID',
+                  description: 'The employee starting this Workflow',
+                },
+              },
+              required: ['employeeId'],
+              additionalProperties: false,
+            },
+          },
+        }}
+      >
+        <SchemaForm
+          schema={{
+            type: 'object',
+            properties: { inputSchema: { type: 'object' } },
+          }}
+          uiSchema={{ widget: 'manual-trigger-config' }}
+        />
+      </Form>
+    );
+  }
+
+  render(<TestForm />);
+  return form;
+}
+
+describe('ManualTriggerConfigEditor', () => {
+  beforeEach(async () => {
+    await i18n.changeLanguage('en');
+  });
+
+  it('edits business parameters while storing a generated JSON Schema', async () => {
+    const form = renderEditor();
+
+    expect(screen.getByText('Start parameters')).toBeInTheDocument();
+    expect(
+      screen.queryByText(/inputSchema|properties|additionalProperties/),
+    ).not.toBeInTheDocument();
+
+    fireEvent.change(screen.getByLabelText('Start parameter 1 name'), {
+      target: { value: 'user_id' },
+    });
+    fireEvent.click(
+      screen.getByRole('switch', {
+        name: 'Applicant ID: required when run manually',
+      }),
+    );
+
+    await waitFor(() =>
+      expect(form.getFieldValue('config')).toEqual({
+        inputParameters: [
+          {
+            key: 'user_id',
+            label: 'Applicant ID',
+            description: 'The employee starting this Workflow',
+            type: 'string',
+            required: false,
+          },
+        ],
+        inputSchema: {
+          type: 'object',
+          properties: {
+            user_id: {
+              type: 'string',
+              title: 'Applicant ID',
+              description: 'The employee starting this Workflow',
+            },
+          },
+          required: [],
+          additionalProperties: false,
+        },
+      }),
+    );
+  });
+
+  it('adds a required text parameter without exposing schema syntax', async () => {
+    const form = renderEditor();
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Add start parameter' }),
+    );
+
+    await waitFor(() =>
+      expect(form.getFieldValue('config')).toMatchObject({
+        inputSchema: {
+          properties: {
+            parameter: { type: 'string' },
+          },
+          required: ['employeeId', 'parameter'],
+        },
+      }),
+    );
+  });
+
+  it('saves an empty parameter name as an incomplete draft', async () => {
+    const form = renderEditor();
+    const input = screen.getByLabelText('Start parameter 1 name');
+
+    fireEvent.change(input, { target: { value: 'e' } });
+    await waitFor(() =>
+      expect(form.getFieldValue('config')).toMatchObject({
+        inputSchema: { properties: { e: expect.any(Object) } },
+      }),
+    );
+
+    fireEvent.change(input, { target: { value: '' } });
+
+    expect(input).toHaveValue('');
+    await waitFor(() =>
+      expect(form.getFieldValue('config')).toMatchObject({
+        inputParameters: [expect.objectContaining({ key: '' })],
+        inputSchema: { properties: { '': expect.any(Object) } },
+      }),
+    );
+    expect(
+      screen.queryByText('Parameter name is required'),
+    ).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,286 @@
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Input, Select, Switch, Typography } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { WidgetProps } from '../schema-form/widget-registry';
+
+type ManualParameterType = 'string' | 'number' | 'boolean' | 'object' | 'array';
+
+type ManualParameter = {
+  key: string;
+  label: string;
+  description: string;
+  type: ManualParameterType;
+  required: boolean;
+};
+
+type ManualTriggerConfig = {
+  inputSchema?: Record<string, unknown>;
+  inputParameters?: ManualParameter[];
+};
+
+export function ManualTriggerConfigEditor({
+  value,
+  onChange,
+  disabled,
+}: WidgetProps<ManualTriggerConfig | undefined>) {
+  const { t } = useTranslation('workflow');
+  const config = value ?? {};
+  const schemaSignature = JSON.stringify(config.inputSchema ?? {});
+  const suppliedParameters = useMemo(
+    () =>
+      Array.isArray(config.inputParameters)
+        ? config.inputParameters
+        : parametersFromSchema(JSON.parse(schemaSignature)),
+    [config.inputParameters, schemaSignature],
+  );
+  const [parameters, setParameters] = useState(suppliedParameters);
+
+  useEffect(() => {
+    setParameters(suppliedParameters);
+  }, [suppliedParameters]);
+
+  const normalizedKeys = parameters.map((parameter) => parameter.key.trim());
+
+  function commit(next: ManualParameter[]) {
+    setParameters(next);
+    onChange({
+      ...config,
+      inputParameters: next,
+      inputSchema: schemaFromParameters(next),
+    });
+  }
+
+  function update(index: number, patch: Partial<ManualParameter>) {
+    commit(
+      parameters.map((parameter, current) =>
+        current === index ? { ...parameter, ...patch } : parameter,
+      ),
+    );
+  }
+
+  function addParameter() {
+    const existing = new Set(normalizedKeys);
+    let key = 'parameter';
+    let suffix = 2;
+    while (existing.has(key)) key = `parameter${suffix++}`;
+    commit([
+      ...parameters,
+      {
+        key,
+        label: '',
+        description: '',
+        type: 'string',
+        required: true,
+      },
+    ]);
+  }
+
+  return (
+    <div className="manual-trigger-config">
+      <Typography.Text className="workflow-node-config__section-title">
+        {t('manualInputs.title')}
+      </Typography.Text>
+      <Typography.Paragraph
+        type="secondary"
+        className="manual-trigger-config__description"
+      >
+        {t('manualInputs.description')}
+      </Typography.Paragraph>
+
+      {parameters.length === 0 ? (
+        <div className="manual-trigger-config__empty">
+          <Typography.Text type="secondary">
+            {t('manualInputs.empty')}
+          </Typography.Text>
+        </div>
+      ) : (
+        <div className="manual-trigger-config__list">
+          {parameters.map((parameter, index) => {
+            const key = normalizedKeys[index];
+            const name =
+              parameter.label.trim() ||
+              key ||
+              t('manualInputs.parameterNumber', { number: index + 1 });
+
+            return (
+              <div className="manual-trigger-config__row" key={index}>
+                <div className="manual-trigger-config__primary">
+                  <div>
+                    <Typography.Text className="workflow-node-config__field-label">
+                      {t('manualInputs.key')}
+                    </Typography.Text>
+                    <Input
+                      aria-label={t('manualInputs.keyAria', {
+                        number: index + 1,
+                      })}
+                      value={parameter.key}
+                      disabled={disabled}
+                      placeholder={t('manualInputs.keyPlaceholder')}
+                      onChange={(event) =>
+                        update(index, { key: event.target.value })
+                      }
+                    />
+                  </div>
+                  <div>
+                    <Typography.Text className="workflow-node-config__field-label">
+                      {t('manualInputs.type')}
+                    </Typography.Text>
+                    <Select<ManualParameterType>
+                      aria-label={t('manualInputs.typeAria', { name })}
+                      value={parameter.type}
+                      disabled={disabled}
+                      options={(
+                        [
+                          'string',
+                          'number',
+                          'boolean',
+                          'object',
+                          'array',
+                        ] as ManualParameterType[]
+                      ).map((type) => ({
+                        value: type,
+                        label: t(`manualInputs.types.${type}`),
+                      }))}
+                      onChange={(type) => update(index, { type })}
+                    />
+                  </div>
+                  <div className="manual-trigger-config__required">
+                    <Typography.Text className="workflow-node-config__field-label">
+                      {t('manualInputs.required')}
+                    </Typography.Text>
+                    <Switch
+                      aria-label={t('manualInputs.requiredAria', { name })}
+                      checked={parameter.required}
+                      disabled={disabled}
+                      onChange={(required) => update(index, { required })}
+                    />
+                  </div>
+                  <Button
+                    type="text"
+                    danger
+                    icon={<DeleteOutlined />}
+                    disabled={disabled}
+                    aria-label={t('manualInputs.remove', { name })}
+                    onClick={() =>
+                      commit(
+                        parameters.filter((_, current) => current !== index),
+                      )
+                    }
+                  />
+                </div>
+                <div className="manual-trigger-config__secondary">
+                  <div>
+                    <Typography.Text className="workflow-node-config__field-label">
+                      {t('manualInputs.label')}
+                    </Typography.Text>
+                    <Input
+                      aria-label={t('manualInputs.labelAria', {
+                        number: index + 1,
+                      })}
+                      value={parameter.label}
+                      disabled={disabled}
+                      placeholder={t('manualInputs.labelPlaceholder')}
+                      onChange={(event) =>
+                        update(index, { label: event.target.value })
+                      }
+                    />
+                  </div>
+                  <div>
+                    <Typography.Text className="workflow-node-config__field-label">
+                      {t('manualInputs.parameterDescription')}
+                    </Typography.Text>
+                    <Input
+                      aria-label={t('manualInputs.descriptionAria', {
+                        number: index + 1,
+                      })}
+                      value={parameter.description}
+                      disabled={disabled}
+                      placeholder={t('manualInputs.descriptionPlaceholder')}
+                      onChange={(event) =>
+                        update(index, { description: event.target.value })
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <Button
+        type="dashed"
+        block
+        className="workflow-panel-action"
+        icon={<PlusOutlined />}
+        disabled={disabled}
+        aria-label={t('manualInputs.add')}
+        onClick={addParameter}
+      >
+        {t('manualInputs.add')}
+      </Button>
+    </div>
+  );
+}
+
+function parametersFromSchema(value: unknown): ManualParameter[] {
+  const schema = asObject(value);
+  const properties = asObject(schema.properties);
+  const required = new Set(
+    Array.isArray(schema.required)
+      ? schema.required.filter(
+          (item): item is string => typeof item === 'string',
+        )
+      : [],
+  );
+  return Object.entries(properties).map(([key, rawProperty]) => {
+    const property = asObject(rawProperty);
+    return {
+      key,
+      label: typeof property.title === 'string' ? property.title : '',
+      description:
+        typeof property.description === 'string' ? property.description : '',
+      type: parameterType(property.type),
+      required: required.has(key),
+    };
+  });
+}
+
+function schemaFromParameters(
+  parameters: ManualParameter[],
+): Record<string, unknown> {
+  return {
+    type: 'object',
+    properties: Object.fromEntries(
+      parameters.map((parameter) => [
+        parameter.key.trim(),
+        {
+          type: parameter.type,
+          ...(parameter.label.trim() && { title: parameter.label.trim() }),
+          ...(parameter.description.trim() && {
+            description: parameter.description.trim(),
+          }),
+        },
+      ]),
+    ),
+    required: parameters
+      .filter((parameter) => parameter.required)
+      .map((parameter) => parameter.key.trim()),
+    additionalProperties: false,
+  };
+}
+
+function parameterType(value: unknown): ManualParameterType {
+  return ['string', 'number', 'boolean', 'object', 'array'].includes(
+    String(value),
+  )
+    ? (value as ManualParameterType)
+    : 'string';
+}
+
+function asObject(value: unknown): Record<string, unknown> {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+}