Improve webhooks UI

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Problem

The current webhook custom headers UI has several usability issues that create a poor user experience:

  1. Misleading visual feedback: When validation fails, invalid headers appear greyed out as if saved, even though they weren't persisted
  2. Poor error display: Validation errors don't persist next to problematic fields, making it unclear which header caused the issue
  3. Inconsistent validation behavior: Different interaction methods (Enter vs Save button) provide different feedback experiences
  4. Data loss on errors: Users may need to refill entire forms instead of just correcting typos

Proposed Solution

  • Display persistent error messages next to each invalid header field
  • Provide clear visual indication of which headers are valid vs invalid
  • Allow users to correct individual field errors without losing other valid data
  • Ensure consistent validation feedback across all interaction methods
Edited by 🤖 GitLab Bot 🤖