Allow limited Markdown in Broadcast Messages

Closes #11853

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)

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')

app/assets/javascripts/broadcast_message.js.coffee

+$ ->
+  $('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 } }
+      )

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 {

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

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

app/views/admin/broadcast_messages/_form.html.haml

 .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'

app/views/admin/broadcast_messages/preview.js.haml

+$('.js-broadcast-message-preview').html("#{j(render_broadcast_message(@message))}");

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]
 

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

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

lib/banzai/pipeline/broadcast_message_pipeline.rb

+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