Reverting e8039f9 to diagnose compound rendering regression affecting
all compound types (SPLIT, CHOICE, LOOP, DO_TRY) and error handlers.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
176 lines
11 KiB
HTML
176 lines
11 KiB
HTML
<h2>Add Tap — With Expression Testing</h2>
|
|
<p class="subtitle">Collapsible test section at bottom of the tap modal</p>
|
|
|
|
<div class="mockup">
|
|
<div class="mockup-header">Add Tap Modal — Test Expression (Recent Exchange)</div>
|
|
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:40px;display:flex;justify-content:center;">
|
|
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:12px;padding:0;width:560px;box-shadow:0 20px 60px rgba(0,0,0,0.5);overflow:hidden;">
|
|
|
|
<!-- Header -->
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #2d2d50;">
|
|
<span style="font-size:15px;font-weight:600;">Add Tap</span>
|
|
<span style="color:#9ca3af;cursor:pointer;font-size:18px;">✕</span>
|
|
</div>
|
|
|
|
<div style="padding:20px;max-height:70vh;overflow-y:auto;">
|
|
<!-- Form fields (collapsed for brevity) -->
|
|
<div style="margin-bottom:14px;">
|
|
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Attribute Name <span style="color:#f87171;">*</span></div>
|
|
<input style="background:#161630;border:1px solid #2d2d50;border-radius:6px;color:#e0e0e0;padding:8px 12px;width:100%;font-size:12px;box-sizing:border-box;" value="orderId" />
|
|
</div>
|
|
|
|
<div style="margin-bottom:14px;">
|
|
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Processor <span style="color:#f87171;">*</span></div>
|
|
<div style="background:#161630;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;font-size:12px;display:flex;justify-content:space-between;align-items:center;">
|
|
<span style="font-family:monospace;">unmarshal1</span>
|
|
<span style="color:#9ca3af;font-size:10px;">▼</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex;gap:12px;margin-bottom:14px;">
|
|
<div style="flex:1;">
|
|
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Language</div>
|
|
<div style="background:#161630;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;font-size:12px;display:flex;justify-content:space-between;align-items:center;">
|
|
<span>simple</span><span style="color:#9ca3af;font-size:10px;">▼</span>
|
|
</div>
|
|
</div>
|
|
<div style="flex:1;">
|
|
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Target</div>
|
|
<div style="background:#161630;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;font-size:12px;display:flex;justify-content:space-between;align-items:center;">
|
|
<span>OUTPUT</span><span style="color:#9ca3af;font-size:10px;">▼</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-bottom:14px;">
|
|
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Expression <span style="color:#f87171;">*</span></div>
|
|
<textarea style="background:#161630;border:1px solid #2d2d50;border-radius:6px;color:#e0e0e0;padding:8px 12px;width:100%;font-family:monospace;font-size:12px;box-sizing:border-box;resize:vertical;min-height:40px;">${body.orderId}</textarea>
|
|
</div>
|
|
|
|
<div style="margin-bottom:14px;">
|
|
<div style="font-size:11px;color:#9ca3af;margin-bottom:4px;font-weight:500;">Attribute Type</div>
|
|
<div style="display:flex;gap:8px;">
|
|
<div style="background:#1e3a5f;color:#7dd3fc;padding:4px 12px;border-radius:6px;font-size:11px;cursor:pointer;border:1px solid #3b82f6;">BUSINESS_OBJECT</div>
|
|
<div style="background:#161630;color:#9ca3af;padding:4px 12px;border-radius:6px;font-size:11px;cursor:pointer;border:1px solid #2d2d50;">CORRELATION</div>
|
|
<div style="background:#161630;color:#9ca3af;padding:4px 12px;border-radius:6px;font-size:11px;cursor:pointer;border:1px solid #2d2d50;">EVENT</div>
|
|
<div style="background:#161630;color:#9ca3af;padding:4px 12px;border-radius:6px;font-size:11px;cursor:pointer;border:1px solid #2d2d50;">CUSTOM</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ TEST EXPRESSION SECTION ═══ -->
|
|
<div style="border-top:1px solid #2d2d50;margin-top:8px;padding-top:14px;">
|
|
<div style="display:flex;align-items:center;gap:6px;margin-bottom:12px;cursor:pointer;">
|
|
<span style="color:#60a5fa;font-size:10px;">▼</span>
|
|
<span style="font-size:12px;font-weight:600;color:#60a5fa;">Test Expression</span>
|
|
</div>
|
|
|
|
<!-- Data source tabs -->
|
|
<div style="display:flex;gap:0;margin-bottom:0;border-bottom:1px solid #2d2d50;">
|
|
<div style="padding:6px 14px;font-size:11px;font-weight:600;color:#60a5fa;border-bottom:2px solid #3b82f6;cursor:pointer;">Recent Exchange</div>
|
|
<div style="padding:6px 14px;font-size:11px;color:#9ca3af;cursor:pointer;">Custom Payload</div>
|
|
</div>
|
|
|
|
<!-- Recent exchange picker -->
|
|
<div style="background:#161630;border:1px solid #2d2d50;border-top:none;border-radius:0 0 6px 6px;padding:12px;">
|
|
<div style="margin-bottom:10px;">
|
|
<div style="background:#1a1a2e;border:1px solid #2d2d50;border-radius:6px;padding:8px 12px;font-size:11px;display:flex;justify-content:space-between;align-items:center;">
|
|
<div style="display:flex;align-items:center;gap:8px;">
|
|
<span style="width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block;"></span>
|
|
<span style="font-family:monospace;color:#e0e0e0;">a1b2c3d4-e5f6-7890</span>
|
|
<span style="color:#6b7280;">·</span>
|
|
<span style="color:#6b7280;">245ms</span>
|
|
<span style="color:#6b7280;">·</span>
|
|
<span style="color:#6b7280;">2 min ago</span>
|
|
</div>
|
|
<span style="color:#9ca3af;font-size:10px;">▼</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test button + result -->
|
|
<div style="display:flex;gap:8px;align-items:flex-start;">
|
|
<button style="background:#3b82f6;color:white;border:none;padding:6px 14px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;">▶ Test</button>
|
|
<div style="flex:1;background:#0f2a1a;border:1px solid #166534;border-radius:6px;padding:8px 12px;">
|
|
<div style="font-size:10px;color:#6b7280;margin-bottom:2px;">Result</div>
|
|
<div style="font-family:monospace;font-size:12px;color:#4ade80;">ORD-2024-78542</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div style="display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid #2d2d50;background:#1a1a30;">
|
|
<button style="background:transparent;color:#9ca3af;border:1px solid #2d2d50;padding:6px 16px;border-radius:6px;font-size:12px;cursor:pointer;">Cancel</button>
|
|
<button style="background:#3b82f6;color:white;border:none;padding:6px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">Save Tap</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top:24px;"></div>
|
|
|
|
<div class="mockup">
|
|
<div class="mockup-header">Test Expression — Custom Payload Mode</div>
|
|
<div class="mockup-body" style="background:#1a1a2e;color:#e0e0e0;padding:40px;display:flex;justify-content:center;">
|
|
<div style="background:#1e1e3a;border:1px solid #2d2d50;border-radius:12px;padding:0;width:560px;box-shadow:0 20px 60px rgba(0,0,0,0.5);overflow:hidden;">
|
|
|
|
<!-- Header -->
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #2d2d50;">
|
|
<span style="font-size:15px;font-weight:600;">Add Tap</span>
|
|
<span style="color:#9ca3af;cursor:pointer;font-size:18px;">✕</span>
|
|
</div>
|
|
|
|
<div style="padding:20px;">
|
|
<!-- Form fields abbreviated -->
|
|
<div style="text-align:center;padding:8px;font-size:11px;color:#6b7280;border:1px dashed #2d2d50;border-radius:6px;margin-bottom:14px;">
|
|
⬆ Form fields above (attribute name, processor, language, target, expression, type)
|
|
</div>
|
|
|
|
<!-- ═══ TEST EXPRESSION SECTION ═══ -->
|
|
<div style="border-top:1px solid #2d2d50;padding-top:14px;">
|
|
<div style="display:flex;align-items:center;gap:6px;margin-bottom:12px;cursor:pointer;">
|
|
<span style="color:#60a5fa;font-size:10px;">▼</span>
|
|
<span style="font-size:12px;font-weight:600;color:#60a5fa;">Test Expression</span>
|
|
</div>
|
|
|
|
<!-- Data source tabs -->
|
|
<div style="display:flex;gap:0;margin-bottom:0;border-bottom:1px solid #2d2d50;">
|
|
<div style="padding:6px 14px;font-size:11px;color:#9ca3af;cursor:pointer;">Recent Exchange</div>
|
|
<div style="padding:6px 14px;font-size:11px;font-weight:600;color:#60a5fa;border-bottom:2px solid #3b82f6;cursor:pointer;">Custom Payload</div>
|
|
</div>
|
|
|
|
<!-- Custom payload editor -->
|
|
<div style="background:#161630;border:1px solid #2d2d50;border-top:none;border-radius:0 0 6px 6px;padding:12px;">
|
|
<div style="margin-bottom:10px;">
|
|
<textarea style="background:#1a1a2e;border:1px solid #2d2d50;border-radius:6px;color:#e0e0e0;padding:8px 12px;width:100%;font-family:monospace;font-size:11px;box-sizing:border-box;resize:vertical;min-height:100px;line-height:1.5;">{
|
|
"orderId": "ORD-2024-78542",
|
|
"customer": {
|
|
"id": "CUST-1234",
|
|
"name": "Acme Corp"
|
|
},
|
|
"total": 149.90
|
|
}</textarea>
|
|
</div>
|
|
|
|
<!-- Test button + error result -->
|
|
<div style="display:flex;gap:8px;align-items:flex-start;">
|
|
<button style="background:#3b82f6;color:white;border:none;padding:6px 14px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;">▶ Test</button>
|
|
<div style="flex:1;background:#2a0f0f;border:1px solid #991b1b;border-radius:6px;padding:8px 12px;">
|
|
<div style="font-size:10px;color:#6b7280;margin-bottom:2px;">Error</div>
|
|
<div style="font-family:monospace;font-size:11px;color:#f87171;">Expression evaluation timed out (50ms limit)</div>
|
|
</div>
|
|
</div>
|
|
<div style="font-size:10px;color:#6b7280;margin-top:8px;">Evaluated by agent <span style="font-family:monospace;">order-svc-01</span> using Camel's <span style="font-family:monospace;">simple</span> language</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div style="display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid #2d2d50;background:#1a1a30;">
|
|
<button style="background:transparent;color:#9ca3af;border:1px solid #2d2d50;padding:6px 16px;border-radius:6px;font-size:12px;cursor:pointer;">Cancel</button>
|
|
<button style="background:#3b82f6;color:white;border:none;padding:6px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">Save Tap</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|