Required field indicators - Usability Implementation Plan

[apodacaduron]

Description

• Add asterisk indicators to required fields across all dialog forms
• Implement form validation on dialogs missing it (Sources, Labels, Event Types, User Groups, EditableTable)
• Add label slot support to form components (DualField, PopDateField, PopDateRangeField, PopDateTimeField, SearchField, GeoMap)
• Fix infinite loop in Component Data page tab navigation
• Upgrade User Groups color input from manual picker to v-color-input
• Improve EditableTable error handling to preserve data on save failures
• Add asterisks to Change Password form fields

How to Test

1. Required field indicators:

   • Open any dialog (Actors, Bulletins, Incidents, Locations, Sources, Labels, Event Types, User Groups)
   • Verify required fields show red asterisk (*)
   • Try submitting with empty required fields - should show validation errors

2. Events section:

   • Add/edit an event
   • Verify conditional asterisks for "either/or" requirements (Title/Type OR Location/Date)
   • Verify info banner explains requirements

3. User Groups:

   • Create/edit a User Group
   • Test new color picker interface and hex validation

4. EditableTable:

   • Verify dialog stays open with data preserved when an error happens (edit code from /admin/component-data/#location/administrative-levels)

5. Component Data page:

   • Verify no infinite loops and URL hash updates correctly (/admin/component-data/#location/location-types)

6. Change Password:

   • Verify asterisks on password fields and validation works

Jira ID (if applicable)

Epic => BYNT-1532
BYNT-1536

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5a3345fa-ce0c-4642-9d16-aa2f98f160d0

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch required-field-indicators

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can customize the tone of the review comments and chat replies.

Configure the tone_instructions setting to customize the tone of the review comments and chat replies. For example, you can set the tone to Act like a strict teacher, Act like a pirate and more.