122 lines
4.2 KiB
Markdown
122 lines
4.2 KiB
Markdown
# Trigger and Execution UI Enhancements
|
|
|
|
**Date:** 2024-01-27
|
|
**Status:** Complete
|
|
|
|
## Summary
|
|
|
|
This session implemented several UI improvements focused on triggers and executions:
|
|
1. Unified pack prefix input styling for rule reference fields
|
|
2. Complete ad-hoc trigger creation functionality
|
|
3. Trigger enable/disable toggle switch
|
|
4. Deletion protection for pack-deployed triggers
|
|
5. Status filter for execution history page
|
|
|
|
## Changes Made
|
|
|
|
### 1. Unified Pack Prefix Input Styling
|
|
|
|
#### Problem
|
|
The rule creation form had two separate, distinct fields for the pack reference and local reference, making the input experience disjointed.
|
|
|
|
#### Solution
|
|
Created a unified input component where the pack prefix appears as part of the input field but is non-editable.
|
|
|
|
#### Files Changed
|
|
- `attune/web/src/index.css` - Added `.input-with-prefix` component class
|
|
```css
|
|
.input-with-prefix {
|
|
display: flex with prefix span and input
|
|
prefix: gray background, non-editable
|
|
input: seamlessly connected with shared border
|
|
}
|
|
```
|
|
|
|
- `attune/web/src/components/forms/RuleForm.tsx` - Updated reference field to use unified styling
|
|
- Pack prefix (`core.`) appears inside field with gray background
|
|
- Local ref portion is editable
|
|
- Error states apply to both prefix and input
|
|
- No visible gap between components
|
|
|
|
#### Visual Result
|
|
```
|
|
┌─────────┬───────────────────────────┐
|
|
│ core. │ my_rule_name │
|
|
│ (gray) │ (editable white) │
|
|
└─────────┴───────────────────────────┘
|
|
```
|
|
|
|
### 2. Ad-hoc Trigger Creation
|
|
|
|
#### New Components
|
|
|
|
**`attune/web/src/components/forms/TriggerForm.tsx` (414 lines)**
|
|
- Complete form for creating/editing triggers
|
|
- **Label-first pattern:** Label field before ref with auto-population
|
|
- **Unified pack prefix input:** Uses `.input-with-prefix` styling
|
|
- Fields:
|
|
- Pack selection (required, disabled when editing)
|
|
- Label and reference with auto-population
|
|
- Description (optional)
|
|
- Parameter schema (JSON, optional)
|
|
- Output schema (JSON, optional)
|
|
- Webhook enabled toggle
|
|
- Enabled/disabled toggle
|
|
- JSON validation for schemas
|
|
- Full error handling and field validation
|
|
- Reference format validation (lowercase, numbers, underscores only)
|
|
|
|
**`attune/web/src/pages/triggers/TriggerCreatePage.tsx` (45 lines)**
|
|
- Dedicated page for trigger creation
|
|
- Informational content explaining:
|
|
- Ad-hoc trigger use cases
|
|
- Webhook functionality
|
|
- Workflow event types
|
|
- Schema validation benefits
|
|
- Breadcrumb navigation back to triggers list
|
|
|
|
#### Updated Components
|
|
|
|
**`attune/web/src/pages/triggers/TriggersPage.tsx`**
|
|
- Added "Create Trigger" button with Plus icon in header
|
|
- Button positioned next to page title for discoverability
|
|
- Links to `/triggers/create` route
|
|
|
|
**`attune/web/src/App.tsx`**
|
|
- Added route: `/triggers/create` → `TriggerCreatePage`
|
|
- Positioned before dynamic `:ref` route for proper matching
|
|
|
|
#### Utility Enhancements
|
|
|
|
**`attune/web/src/lib/format-utils.ts`**
|
|
- Enhanced `extractLocalRef(fullRef, packRef?)`
|
|
- Now accepts optional `packRef` parameter
|
|
- Explicitly removes pack prefix when provided
|
|
- Falls back to last-dot extraction
|
|
- Added `combinePackLocalRef(packRef, localRef)` alias
|
|
- Consistent naming across form components
|
|
- Wraps existing `combineRefs()` function
|
|
|
|
**`attune/web/tsconfig.app.json`**
|
|
- Added exclusion for test files: `src/**/*.test.ts`, `src/**/*.test.tsx`
|
|
- Prevents compilation errors from test-only dependencies
|
|
|
|
### 3. Trigger Enable/Disable Toggle
|
|
|
|
#### Problem
|
|
Triggers could only be managed by deletion, with no way to temporarily disable them like rules.
|
|
|
|
#### Solution
|
|
Implemented toggle switch matching the rules page design.
|
|
|
|
#### Files Changed
|
|
|
|
**`attune/web/src/hooks/useTriggers.ts`**
|
|
- Added `useEnableTrigger()` mutation hook
|
|
- Added `useDisableTrigger()` mutation hook
|
|
- Both hooks invalidate queries on success for immediate UI updates
|
|
|
|
**`attune/web/src/pages/triggers/TriggersPage.tsx`**
|
|
- Added toggle switch to trigger detail header
|
|
- Switch appears next to trigger title
|
|
- Visual feedback during toggle operation ("Updating...") |