Allow limited Markdown in Broadcast Messagesrs-broadcast-markdown

Closes #11853

12 files changed, 87 insertions, 18 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 50b27e25492..fba6c3ccd1b 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -19,6 +19,7 @@ v 8.5.0 (unreleased)
   - Track project import failure
   - Support Two-factor Authentication for LDAP users
   - Display database type and version in Administration dashboard
+  - Allow limited Markdown in Broadcast Messages
   - Fix visibility level text in admin area (Zeger-Jan van de Weg)
   - Warn admin during OAuth of granting admin rights (Zeger-Jan van de Weg)
   - Update the ExternalIssue regex pattern (Blake Hitchcock)
diff --git a/app/assets/javascripts/admin.js.coffee b/app/assets/javascripts/admin.js.coffee
index eb951f71711..b2b8e1b7ffb 100644
--- a/app/assets/javascripts/admin.js.coffee
+++ b/app/assets/javascripts/admin.js.coffee
@@ -12,19 +12,6 @@ class @Admin
       e.preventDefault()
       $('.js-toggle-colors-container').toggle()
 
-    $('input#broadcast_message_color').on 'input', ->
-      previewColor = $(@).val()
-      $('div.broadcast-message-preview').css('background-color', previewColor)
-
-    $('input#broadcast_message_font').on 'input', ->
-      previewColor = $(@).val()
-      $('div.broadcast-message-preview').css('color', previewColor)
-
-    $('textarea#broadcast_message_message').on 'input', ->
-      previewMessage = $(@).val()
-      previewMessage = "Your message here" if previewMessage.trim() == ''
-      $('div.broadcast-message-preview span').text(previewMessage)
-
     $('.log-tabs a').click (e) ->
       e.preventDefault()
       $(this).tab('show')
diff --git a/app/assets/javascripts/broadcast_message.js.coffee b/app/assets/javascripts/broadcast_message.js.coffee
new file mode 100644
index 00000000000..a38a329c4c2
--- /dev/null
+++ b/app/assets/javascripts/broadcast_message.js.coffee
@@ -0,0 +1,22 @@
+$ ->
+  $('input#broadcast_message_color').on 'input', ->
+    previewColor = $(@).val()
+    $('div.broadcast-message-preview').css('background-color', previewColor)
+
+  $('input#broadcast_message_font').on 'input', ->
+    previewColor = $(@).val()
+    $('div.broadcast-message-preview').css('color', previewColor)
+
+  previewPath = $('textarea#broadcast_message_message').data('preview-path')
+
+  $('textarea#broadcast_message_message').on 'input', ->
+    message = $(@).val()
+
+    if message == ''
+      $('.js-broadcast-message-preview').text("Your message here")
+    else
+      $.ajax(
+        url: previewPath
+        type: "POST"
+        data: { broadcast_message: { message: message } }
+      )
diff --git a/app/assets/stylesheets/pages/admin.scss b/app/assets/stylesheets/pages/admin.scss
index 144852e7874..a61161810a3 100644
--- a/app/assets/stylesheets/pages/admin.scss
+++ b/app/assets/stylesheets/pages/admin.scss
@@ -55,6 +55,16 @@
   @extend .alert-warning;
   padding: 10px;
   text-align: center;
+
+  > div, p {
+    display: inline;
+    margin: 0;
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+  }
 }
 
 .broadcast-message-preview {
diff --git a/app/controllers/admin/broadcast_messages_controller.rb b/app/controllers/admin/broadcast_messages_controller.rb
index a470d865408..fc342924987 100644
--- a/app/controllers/admin/broadcast_messages_controller.rb
+++ b/app/controllers/admin/broadcast_messages_controller.rb
@@ -36,6 +36,10 @@ class Admin::BroadcastMessagesController < Admin::ApplicationController
     end
   end
 
+  def preview
+    @message = broadcast_message_params[:message]
+  end
+
   protected
 
   def finder
diff --git a/app/helpers/broadcast_messages_helper.rb b/app/helpers/broadcast_messages_helper.rb
index 1ed8c710f77..43a29c96bca 100644
--- a/app/helpers/broadcast_messages_helper.rb
+++ b/app/helpers/broadcast_messages_helper.rb
@@ -3,7 +3,7 @@ module BroadcastMessagesHelper
     return unless message.present?
 
     content_tag :div, class: 'broadcast-message', style: broadcast_message_style(message) do
-      icon('bullhorn') << ' ' << message.message
+      icon('bullhorn') << ' ' << render_broadcast_message(message.message)
     end
   end
 
@@ -31,4 +31,8 @@ module BroadcastMessagesHelper
       'Pending'
     end
   end
+
+  def render_broadcast_message(message)
+    Banzai.render(message, pipeline: :broadcast_message).html_safe
+  end
 end
diff --git a/app/views/admin/broadcast_messages/_form.html.haml b/app/views/admin/broadcast_messages/_form.html.haml
index 953b8b69368..5c9403fa0c2 100644
--- a/app/views/admin/broadcast_messages/_form.html.haml
+++ b/app/views/admin/broadcast_messages/_form.html.haml
@@ -1,6 +1,7 @@
 .broadcast-message-preview{ style: broadcast_message_style(@broadcast_message) }
   = icon('bullhorn')
-  %span= @broadcast_message.message || "Your message here"
+  .js-broadcast-message-preview
+    = render_broadcast_message(@broadcast_message.message.presence || "Your message here")
 
 = form_for [:admin, @broadcast_message], html: { class: 'broadcast-message-form form-horizontal js-requires-input'} do |f|
   -if @broadcast_message.errors.any?
@@ -10,7 +11,9 @@
   .form-group
     = f.label :message, class: 'control-label'
     .col-sm-10
-      = f.text_area :message, class: "form-control js-quick-submit", rows: 2, required: true
+      = f.text_area :message, class: "form-control js-quick-submit js-autosize",
+        required: true,
+        data: { preview_path: preview_admin_broadcast_messages_path }
   .form-group.js-toggle-colors-container
     .col-sm-10.col-sm-offset-2
       = link_to 'Customize colors', '#', class: 'js-toggle-colors-link'
diff --git a/app/views/admin/broadcast_messages/preview.js.haml b/app/views/admin/broadcast_messages/preview.js.haml
new file mode 100644
index 00000000000..fbc9453c72e
--- /dev/null
+++ b/app/views/admin/broadcast_messages/preview.js.haml
@@ -0,0 +1 @@
+$('.js-broadcast-message-preview').html("#{j(render_broadcast_message(@message))}");
diff --git a/config/routes.rb b/config/routes.rb
index 034bfaf1bcd..f5951bf3e8d 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -227,7 +227,10 @@ Rails.application.routes.draw do
       get :test
     end
 
-    resources :broadcast_messages, only: [:index, :edit, :create, :update, :destroy]
+    resources :broadcast_messages, only: [:index, :edit, :create, :update, :destroy] do
+      post :preview, on: :collection
+    end
+
     resource :logs, only: [:show]
     resource :background_jobs, controller: 'background_jobs', only: [:show]
 
diff --git a/features/admin/broadcast_messages.feature b/features/admin/broadcast_messages.feature
index fd3bac77f86..4f9c651561e 100644
--- a/features/admin/broadcast_messages.feature
+++ b/features/admin/broadcast_messages.feature
@@ -25,3 +25,9 @@ Feature: Admin Broadcast Messages
     When I remove an existing broadcast message
     Then I should be redirected to admin messages page
     And I should not see the removed broadcast message
+
+  @javascript
+  Scenario: Live preview a customized broadcast message
+    When I visit admin messages page
+    And I enter a broadcast message with Markdown
+    Then I should see a live preview of the rendered broadcast message
diff --git a/features/steps/admin/broadcast_messages.rb b/features/steps/admin/broadcast_messages.rb
index 6cacdf4764c..af2b4a29313 100644
--- a/features/steps/admin/broadcast_messages.rb
+++ b/features/steps/admin/broadcast_messages.rb
@@ -19,7 +19,7 @@ class Spinach::Features::AdminBroadcastMessages < Spinach::FeatureSteps
   end
 
   step 'submit form with new customized broadcast message' do
-    fill_in 'broadcast_message_message', with: 'Application update from 4:00 CST to 5:00 CST'
+    fill_in 'broadcast_message_message', with: 'Application update from **4:00 CST to 5:00 CST**'
     fill_in 'broadcast_message_color', with: '#f2dede'
     fill_in 'broadcast_message_font', with: '#b94a48'
     select Date.today.next_year.year, from: "broadcast_message_ends_at_1i"
@@ -28,6 +28,7 @@ class Spinach::Features::AdminBroadcastMessages < Spinach::FeatureSteps
 
   step 'I should see a customized broadcast message' do
     expect(page).to have_content 'Application update from 4:00 CST to 5:00 CST'
+    expect(page).to have_selector 'strong', text: '4:00 CST to 5:00 CST'
     expect(page).to have_selector %(div[style="background-color: #f2dede; color: #b94a48"])
   end
 
@@ -51,4 +52,15 @@ class Spinach::Features::AdminBroadcastMessages < Spinach::FeatureSteps
   step 'I should not see the removed broadcast message' do
     expect(page).not_to have_content 'Migration to new server'
   end
+
+  step 'I enter a broadcast message with Markdown' do
+    fill_in 'broadcast_message_message', with: "Live **Markdown** previews. :tada:"
+  end
+
+  step 'I should see a live preview of the rendered broadcast message' do
+    page.within('.broadcast-message-preview') do
+      expect(page).to have_selector('strong', text: 'Markdown')
+      expect(page).to have_selector('img.emoji')
+    end
+  end
 end
diff --git a/lib/banzai/pipeline/broadcast_message_pipeline.rb b/lib/banzai/pipeline/broadcast_message_pipeline.rb
new file mode 100644
index 00000000000..4bb85e24c38
--- /dev/null
+++ b/lib/banzai/pipeline/broadcast_message_pipeline.rb
@@ -0,0 +1,16 @@
+module Banzai
+  module Pipeline
+    class BroadcastMessagePipeline < DescriptionPipeline
+      def self.filters
+        @filters ||= [
+          Filter::MarkdownFilter,
+          Filter::SanitizationFilter,
+
+          Filter::EmojiFilter,
+          Filter::AutolinkFilter,
+          Filter::ExternalLinkFilter
+        ]
+      end
+    end
+  end
+end