95 lines
3.2 KiB
Markdown
95 lines
3.2 KiB
Markdown
# UI Enhancements Session - January 2024
|
|
|
|
**Date:** 2024-01-XX
|
|
**Status:** Complete
|
|
|
|
## Summary
|
|
|
|
This session delivered significant UI/UX improvements across the Attune web application, focusing on three major areas:
|
|
1. **Unified reference field styling** for pack-prefixed inputs
|
|
2. **Trigger management enhancements** including creation, protection, and enable/disable controls
|
|
3. **Execution filtering** with multi-select status filter
|
|
4. **Schema builder component** for interactive JSON schema configuration
|
|
|
|
---
|
|
|
|
## 1. Unified Pack Prefix Input Styling
|
|
|
|
### Problem
|
|
The rule reference field displayed the pack name prefix and local reference as two separate, distinct input fields, which was visually jarring and didn't convey that they form a single identifier.
|
|
|
|
### Solution
|
|
Created custom CSS component `.input-with-prefix` that makes the pack prefix appear as part of the input field while remaining non-editable.
|
|
|
|
### Changes Made
|
|
|
|
#### `attune/web/src/index.css`
|
|
- Added `.input-with-prefix` component class
|
|
- Pack prefix displays with gray background and rounded left border
|
|
- Input field seamlessly connects with rounded right border
|
|
- Shared error state styling (red border on both prefix and input)
|
|
- Proper disabled state styling
|
|
|
|
#### `attune/web/src/components/forms/RuleForm.tsx`
|
|
- Updated reference field to use `.input-with-prefix` wrapper
|
|
- Pack prefix (e.g., `core.`) appears inside field boundary
|
|
- Error states synchronized between prefix and input
|
|
|
|
### Visual Result
|
|
```
|
|
Before: [core.] [webhook_received] (two separate fields)
|
|
After: [core.|webhook_received ] (unified appearance)
|
|
```
|
|
|
|
---
|
|
|
|
## 2. Trigger Creation & Management
|
|
|
|
### 2.1 Ad-hoc Trigger Creation
|
|
|
|
#### Problem
|
|
The triggers page only displayed pack-deployed triggers with no way to create ad-hoc triggers for webhooks or custom workflow events.
|
|
|
|
#### Solution
|
|
Implemented complete trigger creation workflow with form validation, auto-population, and schema configuration.
|
|
|
|
### Changes Made
|
|
|
|
#### New Components
|
|
|
|
**`attune/web/src/components/forms/TriggerForm.tsx`** (414 lines)
|
|
- Complete form for creating/editing triggers
|
|
- Label-before-ref pattern with auto-population
|
|
- Unified pack prefix input styling
|
|
- Schema configuration (param_schema and out_schema)
|
|
- Webhook and enabled toggles
|
|
- Full validation and error handling
|
|
|
|
**`attune/web/src/pages/triggers/TriggerCreatePage.tsx`** (45 lines)
|
|
- Dedicated creation page with breadcrumb navigation
|
|
- Informational content explaining ad-hoc trigger use cases
|
|
- Links back to triggers list
|
|
|
|
#### Updated Components
|
|
|
|
**`attune/web/src/pages/triggers/TriggersPage.tsx`**
|
|
- Added "Create Trigger" button with Plus icon in header
|
|
- Button positioned prominently for easy discovery
|
|
|
|
**`attune/web/src/App.tsx`**
|
|
- Added route: `/triggers/create` → `TriggerCreatePage`
|
|
|
|
**`attune/web/src/lib/format-utils.ts`**
|
|
- Enhanced `extractLocalRef()` to accept optional `packRef` parameter
|
|
- Added `combinePackLocalRef()` function for consistent API
|
|
|
|
#### API Hooks
|
|
|
|
**`attune/web/src/hooks/useTriggers.ts`**
|
|
- `useCreateTrigger()` - already existed
|
|
- `useUpdateTrigger()` - already existed
|
|
|
|
### 2.2 Trigger Protection & Enable/Disable
|
|
|
|
#### Problem
|
|
- Pack-deployed triggers could be deleted (should be protected like actions/rules |