@gadmin2n/schematics 0.0.144 → 0.0.146

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/NodePropertyPanel.test.tsx

@@ -1,11 +1,14 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { customRequest } from 'helpers/http';
-import { act } from 'react';
+import { act, createRef, useState } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import i18n from '../../../i18n';
 import type { WorkflowNode, WorkflowNodeType } from '../types';
-import { NodePropertyPanel } from './NodePropertyPanel';
+import {
+  NodePropertyPanel,
+  type NodePropertyPanelHandle,
+} from './NodePropertyPanel';
 
 vi.mock('helpers/http', () => ({ customRequest: vi.fn() }));
 
@@ -21,6 +24,15 @@ const nodeType = {
       subjects: { type: 'array', title: 'Approvers' },
     },
   },
+  outputSchema: {
+    type: 'object',
+    required: ['previous', 'result'],
+    properties: {
+      previous: {},
+      result: { type: 'object' },
+    },
+  },
+  outputs: ['true', 'false'],
   uiSchema: { widget: 'human-approval-config' },
 } as unknown as WorkflowNodeType;
 
@@ -51,6 +63,216 @@ describe('NodePropertyPanel instance references', () => {
     });
   });
 
+  it('uses the standard wide panel for a manual trigger', () => {
+    vi.mocked(customRequest).mockResolvedValue({ data: [] } as never);
+    const manualNodeType = {
+      ...nodeType,
+      id: '1',
+      type: 'manual_trigger',
+      label: 'Manual Trigger',
+      category: 'TRIGGER',
+      instancePolicy: 'INLINE_ONLY',
+      configSchema: { type: 'object', properties: {} },
+      uiSchema: {},
+    } as unknown as WorkflowNodeType;
+
+    render(
+      <NodePropertyPanel
+        node={{
+          ...node,
+          type: 'manual_trigger',
+          label: 'Manual Trigger',
+          config: {},
+          instanceRef: undefined,
+        }}
+        nodeTypes={[manualNodeType]}
+        onSave={vi.fn()}
+        onLabelChange={vi.fn()}
+        onAiEdit={vi.fn()}
+        aiLoading={false}
+      />,
+    );
+
+    expect(
+      screen.getByTestId('workflow-editor-panel-node-property'),
+    ).toHaveStyle({ width: 'clamp(440px, 38vw, 520px)' });
+  });
+
+  it('allows incomplete node configuration to be saved as a draft', async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    vi.mocked(customRequest).mockResolvedValue([] as never);
+    const httpNodeType = {
+      id: '20',
+      type: 'http_request',
+      label: 'HTTP Request',
+      category: 'ACTION',
+      instancePolicy: 'OPTIONAL',
+      configSchema: {
+        type: 'object',
+        properties: {
+          connectionRef: { type: 'string' },
+          method: { type: 'string' },
+          path: { type: 'string' },
+          timeoutSeconds: { type: 'integer' },
+        },
+        required: ['connectionRef', 'method', 'path'],
+      },
+      uiSchema: { widget: 'http-request-config' },
+    } as unknown as WorkflowNodeType;
+    const databaseNodeType = {
+      id: '21',
+      type: 'db_execute',
+      label: 'Database Operation',
+      category: 'ACTION',
+      instancePolicy: 'OPTIONAL',
+      configSchema: {
+        type: 'object',
+        properties: {
+          allowWrite: { type: 'boolean' },
+          sql: { type: 'string' },
+          timeoutSeconds: { type: 'integer' },
+        },
+        required: ['allowWrite', 'sql'],
+      },
+      uiSchema: { widget: 'db-execute-config' },
+    } as unknown as WorkflowNodeType;
+
+    function SwitchingPanel() {
+      const [currentNode, setCurrentNode] = useState<WorkflowNode>({
+        id: 'http-1',
+        type: 'http_request',
+        label: 'HTTP Request',
+        position: { x: 0, y: 0 },
+        config: {},
+      });
+      return (
+        <>
+          <button
+            type="button"
+            onClick={() =>
+              setCurrentNode({
+                id: 'database-1',
+                type: 'db_execute',
+                label: 'Database Operation',
+                position: { x: 0, y: 0 },
+                config: {
+                  allowWrite: false,
+                  sql: 'SELECT 1',
+                  timeoutSeconds: 3,
+                },
+              })
+            }
+          >
+            Switch node
+          </button>
+          <NodePropertyPanel
+            node={currentNode}
+            nodeTypes={[httpNodeType, databaseNodeType]}
+            onSave={onSave}
+            onConfigDraftChange={(nodeId, config) =>
+              setCurrentNode((current) =>
+                current.id === nodeId ? { ...current, config } : current,
+              )
+            }
+            onLabelChange={vi.fn()}
+            onAiEdit={vi.fn()}
+            aiLoading={false}
+          />
+        </>
+      );
+    }
+
+    render(<SwitchingPanel />);
+
+    expect(
+      screen.queryByText('Connection is required'),
+    ).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Save changes' }));
+    expect(onSave).toHaveBeenCalledWith(
+      'http-1',
+      expect.objectContaining({ config: expect.any(Object) }),
+    );
+    expect(
+      screen.queryByText('Connection is required'),
+    ).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Switch node' }));
+
+    expect(await screen.findByRole('spinbutton')).toHaveValue('3');
+    expect(
+      screen.queryByText('Connection is required'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('refreshes a dirty panel from the latest Workflow DSL', async () => {
+    const user = userEvent.setup();
+    vi.mocked(customRequest).mockResolvedValue([] as never);
+    const httpNodeType = {
+      id: '20',
+      type: 'http_request',
+      label: 'HTTP Request',
+      category: 'ACTION',
+      instancePolicy: 'OPTIONAL',
+      configSchema: {
+        type: 'object',
+        properties: {
+          path: { type: 'string', title: 'Request path' },
+        },
+      },
+      uiSchema: {},
+    } as unknown as WorkflowNodeType;
+
+    function DslControlledPanel() {
+      const [currentNode, setCurrentNode] = useState<WorkflowNode>({
+        id: 'http-1',
+        type: 'http_request',
+        label: 'HTTP Request',
+        position: { x: 0, y: 0 },
+        config: { path: '/initial' },
+      });
+      return (
+        <>
+          <button
+            type="button"
+            onClick={() =>
+              setCurrentNode((current) => ({
+                ...current,
+                config: { path: '/from-dsl' },
+              }))
+            }
+          >
+            Apply DSL
+          </button>
+          <NodePropertyPanel
+            node={currentNode}
+            nodeTypes={[httpNodeType]}
+            onSave={vi.fn()}
+            onConfigDraftChange={(nodeId, config) =>
+              setCurrentNode((current) =>
+                current.id === nodeId ? { ...current, config } : current,
+              )
+            }
+            onLabelChange={vi.fn()}
+            onAiEdit={vi.fn()}
+            aiLoading={false}
+          />
+        </>
+      );
+    }
+
+    render(<DslControlledPanel />);
+
+    const pathInput = screen.getByDisplayValue('/initial');
+    await user.clear(pathInput);
+    await user.type(pathInput, '/panel-draft');
+    expect(screen.getByDisplayValue('/panel-draft')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Apply DSL' }));
+
+    expect(screen.getByDisplayValue('/from-dsl')).toBeInTheDocument();
+    expect(screen.queryByDisplayValue('/panel-draft')).not.toBeInTheDocument();
+  });
+
   it('renders a referenced node with the editable template config form', async () => {
     vi.mocked(customRequest).mockImplementation((path) => {
       if (path === 'subject-providers') return Promise.resolve([]) as never;
@@ -75,6 +297,9 @@ describe('NodePropertyPanel instance references', () => {
       <NodePropertyPanel
         node={node}
         nodeTypes={[nodeType]}
+        referencedConfigs={{
+          '12': { subjects: [{ provider: 'USER', refs: ['bob'] }] },
+        }}
         onSave={vi.fn()}
         onLabelChange={vi.fn()}
         onAiEdit={vi.fn()}
@@ -94,50 +319,247 @@ describe('NodePropertyPanel instance references', () => {
     expect(
       screen.getByRole('heading', { name: 'Node configuration' }),
     ).toBeInTheDocument();
-    expect(screen.getByText('Node type')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('workflow-editor-panel-node-property'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('workflow-node-properties-node-identity'),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Delete node' }),
+    ).not.toBeInTheDocument();
     expect(screen.getByText('Human Approval')).toBeInTheDocument();
+    expect(screen.queryByText('Human approval')).not.toBeInTheDocument();
     expect(screen.queryByText('approval')).not.toBeInTheDocument();
+    expect(
+      screen.getByText('Data received before approval'),
+    ).toBeInTheDocument();
+    expect(screen.getByText("This approval's outcome")).toBeInTheDocument();
+    expect(screen.getByText('input.previous')).toBeInTheDocument();
+    expect(screen.getByText('input.result')).toBeInTheDocument();
+    const resultFieldHead = screen
+      .getByText("This approval's outcome")
+      .closest('.workflow-node-output__field-head');
+    expect(resultFieldHead).toHaveTextContent('Always returned');
+    expect(resultFieldHead).toHaveTextContent('Object');
+    expect(
+      screen.getByText('Includes the approver and completion time'),
+    ).toBeInTheDocument();
     expect(
       screen.getByRole('button', { name: 'Save changes' }),
     ).toBeInTheDocument();
+    expect(customRequest).not.toHaveBeenCalledWith(
+      'workflowNodeInstance/findMany',
+      expect.anything(),
+      expect.anything(),
+    );
   });
 
-  it('uses the simple return editor even when stored node metadata has no widget', () => {
-    const returnNodeType = {
-      id: '9',
-      type: 'return_result',
-      label: 'Finish and return',
-      category: 'ACTION',
-      instancePolicy: 'INLINE_ONLY',
-      configSchema: {
-        type: 'object',
-        properties: {},
-      },
-      uiSchema: {},
-    } as unknown as WorkflowNodeType;
-    const returnNode: WorkflowNode = {
-      id: 'return-1',
-      type: 'return_result',
-      label: 'Finish and return',
-      position: { x: 0, y: 0 },
-      config: {},
-    };
+  it('lets approval nodes use a template or configure directly', async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    vi.mocked(customRequest).mockImplementation((path) => {
+      if (path === 'subject-providers') return Promise.resolve([]) as never;
+      if (path === 'workflow/callable') return Promise.resolve([]) as never;
+      return Promise.resolve({
+        data: [
+          {
+            id: '12',
+            code: 'FINANCE_APPROVAL',
+            name: 'Finance approval',
+            nodeTypeId: '7',
+            isEnabled: true,
+            config: { subjects: [{ provider: 'USER', refs: ['bob'] }] },
+          },
+        ],
+      }) as never;
+    });
 
     render(
       <NodePropertyPanel
-        node={returnNode}
-        nodeTypes={[returnNodeType]}
-        onSave={vi.fn()}
+        node={{ ...node, instanceRef: undefined }}
+        nodeTypes={[nodeType]}
+        onSave={onSave}
         onLabelChange={vi.fn()}
         onAiEdit={vi.fn()}
         aiLoading={false}
       />,
     );
 
+    expect(screen.getByRole('button', { name: 'Save changes' })).toBeEnabled();
     expect(
-      screen.getByText('Returns the previous node result'),
+      screen.getByText('Use a template or configure this node directly'),
     ).toBeInTheDocument();
-    expect(screen.queryByText('Result type')).toBeNull();
+    expect(screen.getByRole('button', { name: /New template/ })).toHaveClass(
+      'workflow-panel-action',
+    );
+    expect(screen.getByText('Who can approve')).toBeInTheDocument();
+    expect(screen.queryByText('Parameters')).not.toBeInTheDocument();
+    expect(
+      screen
+        .getByText('GAdmin approval task')
+        .closest('.workflow-node-panel__parameters-card'),
+    ).toBeNull();
+
+    await waitFor(() =>
+      expect(screen.getAllByRole('combobox')[0]).not.toBeDisabled(),
+    );
+    await user.click(screen.getAllByRole('combobox')[0]);
+    await user.click(await screen.findByText('Finance approval'));
+
+    expect(onSave).toHaveBeenCalledWith(
+      'node-1',
+      expect.objectContaining({
+        label: 'Finance approval',
+        instanceRef: {
+          instanceId: '12',
+          instanceCode: 'FINANCE_APPROVAL',
+        },
+      }),
+    );
+  });
+
+  it('keeps an inline approval configuration after saving it', async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    const onConfigDraftChange = vi.fn();
+    const panelRef = createRef<NodePropertyPanelHandle>();
+    vi.mocked(customRequest).mockResolvedValue([] as never);
+    const inlineNodeType = {
+      ...nodeType,
+      instancePolicy: 'OPTIONAL',
+      configSchema: {
+        type: 'object',
+        properties: {
+          task: { type: 'object' },
+          subjects: { type: 'array' },
+          approvalRule: { type: 'object' },
+          rejectionRule: { type: 'object' },
+          timeout: { type: 'object' },
+        },
+      },
+    } as unknown as WorkflowNodeType;
+    const inlineNode: WorkflowNode = {
+      ...node,
+      instanceRef: undefined,
+      config: {
+        external: {
+          request: {
+            connectionRef: 'ticketing',
+            method: 'POST',
+            path: '/approvals',
+            queryBindings: {},
+            headerBindings: {},
+            bodyMode: 'FIELDS',
+            bodyBindings: {},
+            timeoutSeconds: 30,
+          },
+          creationResult: {
+            mode: 'runOnceForAll',
+            timeout: 5000,
+            script: 'return response;',
+          },
+          callbackResult: {
+            mode: 'runOnceForAll',
+            timeout: 5000,
+            script: 'return callback.body;',
+          },
+        },
+        task: {
+          title: { source: 'WORKFLOW', path: 'request.title' },
+          description: {
+            source: 'FIXED',
+            valueType: 'STRING',
+            value: '',
+          },
+          details: [],
+        },
+        subjects: [],
+        approvalRule: { mode: 'ANY' },
+        rejectionRule: { mode: 'ANY' },
+        timeout: { durationSeconds: 0, action: 'REJECTED' },
+      },
+    };
+    function StatefulPanel() {
+      const [currentNode, setCurrentNode] = useState(inlineNode);
+      return (
+        <NodePropertyPanel
+          ref={panelRef}
+          node={currentNode}
+          nodeTypes={[inlineNodeType]}
+          onSave={(nodeId, updates) => {
+            onSave(nodeId, updates);
+            setCurrentNode((current) => ({
+              ...current,
+              label: updates.label ?? current.label,
+              config: updates.config ?? current.config,
+            }));
+          }}
+          onConfigDraftChange={(nodeId, config) => {
+            onConfigDraftChange(nodeId, config);
+            setCurrentNode((current) => ({ ...current, config }));
+          }}
+          onLabelChange={vi.fn()}
+          onAiEdit={vi.fn()}
+          aiLoading={false}
+        />
+      );
+    }
+
+    render(<StatefulPanel />);
+
+    const titlePath = screen.getByLabelText('Task title field path');
+    await user.clear(titlePath);
+    await user.type(titlePath, 'request.subject');
+
+    expect(onConfigDraftChange).toHaveBeenCalledWith(
+      inlineNode.id,
+      expect.objectContaining({
+        task: expect.objectContaining({
+          title: { source: 'WORKFLOW', path: 'request.subject' },
+        }),
+      }),
+    );
+    expect(panelRef.current?.getPendingUpdate()).toMatchObject({
+      nodeId: inlineNode.id,
+      updates: {
+        config: {
+          task: {
+            title: { source: 'WORKFLOW', path: 'request.subject' },
+          },
+        },
+      },
+    });
+
+    await user.click(screen.getByRole('button', { name: 'Save changes' }));
+
+    const savedConfig = onSave.mock.lastCall?.[1].config;
+    expect(savedConfig).toMatchObject({
+      external: {
+        request: {
+          connectionRef: 'ticketing',
+          method: 'POST',
+          path: '/approvals',
+        },
+      },
+      task: {
+        title: { source: 'WORKFLOW', path: 'request.subject' },
+      },
+      approvalRule: { mode: 'ANY' },
+      rejectionRule: { mode: 'ANY' },
+      timeout: { durationSeconds: 0, action: 'REJECTED' },
+    });
+
+    await waitFor(() =>
+      expect(screen.getByLabelText('Task title field path')).toHaveValue(
+        'request.subject',
+      ),
+    );
+    expect(
+      screen.getByRole('switch', {
+        name: 'Also send to an external system',
+      }),
+    ).toBeChecked();
   });
 
   it('shows the node output contract as read-only input paths', () => {
@@ -152,7 +574,7 @@ describe('NodePropertyPanel instance references', () => {
         type: 'object',
         properties: {
           status: { type: 'number', description: 'HTTP status code' },
-          data: { description: 'Response body' },
+          data: { description: 'Unmodified response body' },
           headers: { type: 'object' },
         },
       },
@@ -178,13 +600,17 @@ describe('NodePropertyPanel instance references', () => {
       />,
     );
 
-    expect(
-      screen.getByRole('region', { name: 'Output (read-only)' }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole('region', { name: 'Output' })).toBeInTheDocument();
     expect(screen.getByText('input.status')).toBeInTheDocument();
     expect(screen.getByText('input.data')).toBeInTheDocument();
     expect(screen.getByText('input.headers')).toBeInTheDocument();
-    expect(screen.getByText('HTTP status code')).toBeInTheDocument();
+    expect(screen.getByText('For example, 200')).toBeInTheDocument();
+    expect(
+      screen.queryByText('Business data returned by the API'),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('Unmodified response body'),
+    ).not.toBeInTheDocument();
     expect(screen.getByText('Any value')).toBeInTheDocument();
   });
 
@@ -257,4 +683,52 @@ describe('NodePropertyPanel instance references', () => {
       }),
     );
   });
+
+  it('filters the node palette by translated name and technical type', async () => {
+    const user = userEvent.setup();
+    const httpNodeType = {
+      id: '10',
+      type: 'http_request',
+      label: 'HTTP Request',
+      category: 'ACTION',
+      instancePolicy: 'INLINE_ONLY',
+      configSchema: { type: 'object', properties: {} },
+    } as unknown as WorkflowNodeType;
+    const delayNodeType = {
+      id: '11',
+      type: 'delay',
+      label: 'Timed Wait',
+      category: 'FLOW_CONTROL',
+      instancePolicy: 'INLINE_ONLY',
+      configSchema: { type: 'object', properties: {} },
+    } as unknown as WorkflowNodeType;
+
+    render(
+      <NodePropertyPanel
+        node={null}
+        nodeTypes={[httpNodeType, delayNodeType]}
+        onSave={vi.fn()}
+        onLabelChange={vi.fn()}
+        onAiEdit={vi.fn()}
+        aiLoading={false}
+      />,
+    );
+
+    const httpPaletteItem = screen
+      .getByText('HTTP Request')
+      .closest('.workflow-node-palette__item');
+    const delayPaletteItem = screen
+      .getByText('Timed Wait')
+      .closest('.workflow-node-palette__item');
+    expect(httpPaletteItem).toHaveStyle({ borderColor: '#b7eb8f' });
+    expect(delayPaletteItem).toHaveStyle({ borderColor: '#d3adf7' });
+
+    await user.type(
+      screen.getByPlaceholderText('Search nodes by name or purpose'),
+      'http_request',
+    );
+
+    expect(screen.getByText('HTTP Request')).toBeInTheDocument();
+    expect(screen.queryByText('Timed Wait')).not.toBeInTheDocument();
+  });
 });