Convert targeted message form to Vue component

Harsh Sagarrequested to merge
581711-target-message-form-to-vue into master

What does this MR do and why?

This MR converts the targeted messages admin form from server-rendered HTML to a Vue.js component, laying the foundation for implementing live preview functionality in future iterations.

As outlined in #581711, the current server-rendered form architecture prevents us from implementing a live preview feature for targeted messages. To support live preview, we need:

  • Client-side reactivity to update preview in real-time
  • Component-based architecture for preview/form separation
  • State management for form data

References

#581711

Screenshots or screen recordings

There are no UI changes, still attaching screenshots for comparison.

Before After
image.png image.png

How to set up and validate locally

  1. Enable the feature flag:

    Feature.enable(:targeted_messages_admin_ui)

  2. Navigate to Admin Area → Targeted Messages → New Message

  3. Test scenarios:

    • Success case: Fill form with valid data and submit
    • Validation error: Submit empty form, verify inline errors display
    • Partial success: Upload CSV with invalid namespace IDs, verify redirect to edit page
    • File upload: Select CSV file, verify file selection works

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #581711

Merge request reports