Skip to content

Convert the broadcast messages form to Vue

Alex Pennells requested to merge vue-broadcast-messages-form into master

What does this MR do and why?

Related issue: #368847 (closed)

Continues converting the broadcast messages page to a Vue app. All UI changes are hidden behind the vue_broadcast_messages feature flag.

Change summary:

  • Render the form component on the edit page when the feature is enabled
  • Move index.js -> index/index.js so it's not bundled with the edit page
  • Adds the form to the index page
  • Converts the start/end times in the table to the user's local timezone, to match the new form

Known issues:

  • GlBroadcastMessage doesn't have an option for Notification type broadcast messages or dismissible (MR)
  • GlDatepicker doesn't have a time picker option, so I'm relying on <gl-form-input type="time" />. This is currently styled by the browser, and doesn't match the height of other inputs

Screenshots or screen recordings

Without feature With feature
Banner (Index) Screen_Shot_2022-12-09_at_4.11.45_PM Screen_Shot_2022-12-09_at_4.10.55_PM
Notification (Index) Screen_Shot_2022-12-09_at_4.11.55_PM Screen_Shot_2022-12-09_at_4.11.07_PM
Banner (Edit) Screen_Shot_2022-12-09_at_4.12.07_PM Screen_Shot_2022-12-09_at_4.13.20_PM
Notification (Edit) Screen_Shot_2022-12-09_at_4.12.16_PM Screen_Shot_2022-12-09_at_4.13.10_PM

How to set up and validate locally

  1. Enable the Vue app
    Feature.enable(:vue_broadcast_messages)
  2. Navigate to the broadcast messages view: http://gdk.test:3000/admin/broadcast_messages

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Alex Pennells

Merge request reports

Loading