1 files changed, 22 insertions, 41 deletions

diff --git a/app/views/admin/broadcast_messages/index.html.haml b/app/views/admin/broadcast_messages/index.html.haml
index 46924393a27..7559365e49a 100644
--- a/app/views/admin/broadcast_messages/index.html.haml
+++ b/app/views/admin/broadcast_messages/index.html.haml
@@ -1,49 +1,30 @@
 - breadcrumb_title _("Messages")
 - page_title _("Broadcast Messages")
-- targeted_broadcast_messages_enabled = Feature.enabled?(:role_targeted_broadcast_messages)
+- vue_app_enabled = Feature.enabled?(:vue_broadcast_messages, current_user)
 
 %h1.page-title.gl-font-size-h-display
   = _('Broadcast Messages')
 %p.light
   = _('Use banners and notifications to notify your users about scheduled maintenance, recent upgrades, and more.')
 
-= render 'form'
-
-%br.clearfix
-
-- if @broadcast_messages.any?
-  .table-responsive
-    %table.table.b-table.gl-table
-      %thead
-        %tr
-          %th= _('Status')
-          %th= _('Preview')
-          %th= _('Starts')
-          %th= _('Ends')
-          - if targeted_broadcast_messages_enabled
-            %th= _('Target roles')
-          %th= _('Target Path')
-          %th= _('Type')
-          %th  
-      %tbody
-        - @broadcast_messages.each do |message|
-          %tr
-            %td
-              = broadcast_message_status(message)
-            %td
-              = broadcast_message(message, preview: true)
-            %td
-              = message.starts_at
-            %td
-              = message.ends_at
-            - if targeted_broadcast_messages_enabled
-              %td
-                = target_access_levels_display(message.target_access_levels)
-            %td
-              = message.target_path
-            %td
-              = message.broadcast_type.capitalize
-            %td.gl-white-space-nowrap<
-              = link_to sprite_icon('pencil', css_class: 'gl-icon'), edit_admin_broadcast_message_path(message), title: _('Edit'), class: 'btn btn-icon gl-button'
-              = link_to sprite_icon('remove', css_class: 'gl-icon'), admin_broadcast_message_path(message), method: :delete, remote: true, title: _('Remove'), class: 'js-remove-tr btn btn-icon gl-button btn-danger gl-ml-3'
-    = paginate @broadcast_messages, theme: 'gitlab'
+- if vue_app_enabled
+  #js-broadcast-messages{ data: {
+    page: params[:page] || 1,
+    messages_count: @broadcast_messages.total_count,
+    messages: @broadcast_messages.map { |message| {
+      id: message.id,
+      status: broadcast_message_status(message),
+      preview: broadcast_message(message, preview: true),
+      starts_at: message.starts_at.to_s,
+      ends_at: message.ends_at.to_s,
+      target_roles: target_access_levels_display(message.target_access_levels),
+      target_path: message.target_path,
+      type: message.broadcast_type.capitalize,
+      edit_path: edit_admin_broadcast_message_path(message),
+      delete_path: admin_broadcast_message_path(message) + '.js'
+    } }.to_json
+  } }
+- else
+  = render 'form'
+  %br.clearfix
+  = render 'table'