Add selection for broadcast notification type

We separate between banner and notification broadcast messages. For both
types we render a preview when creating or editing them, although
notifications don't have different colors.

app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js

@@ -6,21 +6,31 @@ import { __ } from '~/locale';
 import { textColorForBackground } from '~/lib/utils/color_utils';
 
 export default () => {
-  const $broadcastMessageColor = $('input#broadcast_message_color');
-  const $broadcastMessagePreview = $('div.broadcast-message-preview');
+  const $broadcastMessageColor = $('.js-broadcast-message-color');
+  const $broadcastMessageType = $('.js-broadcast-message-type');
+  const $broadcastBannerMessagePreview = $('.js-broadcast-banner-message-preview');
+  const $broadcastMessage = $('.js-broadcast-message-message');
+  const previewPath = $broadcastMessage.data('previewPath');
+  const $jsBroadcastMessagePreview = $('.js-broadcast-message-preview');
+
   $broadcastMessageColor.on('input', function onMessageColorInput() {
     const previewColor = $(this).val();
-    $broadcastMessagePreview.css('background-color', previewColor);
+    $broadcastBannerMessagePreview.css('background-color', previewColor);
   });
 
   $('input#broadcast_message_font').on('input', function onMessageFontInput() {
     const previewColor = $(this).val();
-    $broadcastMessagePreview.css('color', previewColor);
+    $broadcastBannerMessagePreview.css('color', previewColor);
   });
 
-  const $broadcastMessage = $('textarea#broadcast_message_message');
-  const previewPath = $broadcastMessage.data('previewPath');
-  const $jsBroadcastMessagePreview = $('.js-broadcast-message-preview');
+  $broadcastMessageType.on('change', () => {
+    const $broadcastMessageColorFormGroup = $('.js-broadcast-message-background-color-form-group');
+    const $broadcastNotificationMessagePreview = $('.js-broadcast-notification-message-preview');
+
+    $broadcastMessageColorFormGroup.toggleClass('hidden');
+    $broadcastBannerMessagePreview.toggleClass('hidden');
+    $broadcastNotificationMessagePreview.toggleClass('hidden');
+  });
 
   $broadcastMessage.on(
     'input',
@@ -58,7 +68,7 @@ export default () => {
 
     $('.label-color-preview').css(selectedColorStyle);
 
-    return $broadcastMessagePreview.css(selectedColorStyle);
+    return $jsBroadcastMessagePreview.css(selectedColorStyle);
   };
 
   const setSuggestedColor = e => {
@@ -67,7 +77,10 @@ export default () => {
       .val(color)
       // Notify the form, that color has changed
       .trigger('input');
+    // Only banner supports colors
+    if ($broadcastMessageType === 'banner') {
       updateColorPreview();
+    }
     return e.preventDefault();
   };
 

app/assets/stylesheets/framework/broadcast_messages.scss

 .broadcast-message {
-  @extend .alert-warning;
-  padding: 10px;
-  text-align: center;
+  padding: $gl-padding-8;
 
   div,
   p {
@@ -15,9 +13,29 @@
   }
 }
 
-.broadcast-message-preview {
+.broadcast-banner-message {
+  @extend .broadcast-message;
+  @extend .alert-warning;
+  text-align: center;
+}
+
+.broadcast-notification-message {
   @extend .broadcast-message;
-  margin-bottom: 20px;
+
+  position: fixed;
+  bottom: $gl-padding;
+  right: $gl-padding;
+  max-width: 300px;
+  width: auto;
+  background: $white-light;
+  border: 1px solid $gray-200;
+  box-shadow: 0 1px 2px 0 rgba($black, 0.1);
+  border-radius: $border-radius-default;
+  z-index: 999;
+
+  &.preview {
+    position: static;
+  }
 }
 
 .toggle-colors {

app/helpers/broadcast_messages_helper.rb

 # frozen_string_literal: true
 
 module BroadcastMessagesHelper
-  def current_broadcast_messages
-    BroadcastMessage.current(request.path)
+  def current_broadcast_banner_messages
+    BroadcastMessage.current_banner_messages(request.path)
   end
 
-  def broadcast_message(message)
+  def current_broadcast_notification_message
+    BroadcastMessage.current_notification_messages(request.path).last
+  end
+
+  def broadcast_message(message, opts = {})
     return unless message.present?
 
-    content_tag :div, dir: 'auto', class: 'broadcast-message', style: broadcast_message_style(message) do
-      sprite_icon('bullhorn', size: 16, css_class: 'vertical-align-text-top mr-2') << ' ' << render_broadcast_message(message)
+    classes = "broadcast-#{message.broadcast_type}-message #{opts[:preview] && 'preview'}"
+
+    content_tag :div, dir: 'auto', class: classes, style: broadcast_message_style(message) do
+      concat sprite_icon('bullhorn', size: 16, css_class: 'vertical-align-text-top')
+      concat ' '
+      concat render_broadcast_message(message)
     end
   end
 
   def broadcast_message_style(broadcast_message)
+    return '' if broadcast_message.notification?
+
     style = []
 
     if broadcast_message.color.present?
@@ -40,4 +50,8 @@ module BroadcastMessagesHelper
   def render_broadcast_message(broadcast_message)
     Banzai.render_field(broadcast_message, :message).html_safe
   end
+
+  def broadcast_type_options
+    BroadcastMessage.broadcast_types.keys.map { |w| [w.humanize, w] }
+  end
 end

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

-.broadcast-message-preview{ style: broadcast_message_style(@broadcast_message) }
-  = sprite_icon('bullhorn', size: 16, css_class:'vertical-align-text-top mr-2')
+.broadcast-banner-message.js-broadcast-banner-message-preview.mt-2{ style: broadcast_message_style(@broadcast_message), class: ('hidden' unless @broadcast_message.banner? ) }
+  = sprite_icon('bullhorn', size: 16, css_class:'vertical-align-text-top')
+  .js-broadcast-message-preview
+    - if @broadcast_message.message.present?
+      = render_broadcast_message(@broadcast_message)
+    - else
+      Your message here
+- if Feature.enabled?(:broadcast_notification_type)
+  .d-flex.justify-content-center
+    .broadcast-notification-message.preview.js-broadcast-notification-message-preview.mt-2{ class: ('hidden' unless @broadcast_message.notification? ) }
+      = sprite_icon('bullhorn', size: 16, css_class:'vertical-align-text-top')
       .js-broadcast-message-preview
         - if @broadcast_message.message.present?
           = render_broadcast_message(@broadcast_message)
@@ -9,15 +18,21 @@
 = form_for [:admin, @broadcast_message], html: { class: 'broadcast-message-form js-quick-submit js-requires-input'} do |f|
   = form_errors(@broadcast_message)
 
-  .form-group.row
+  .form-group.row.mt-4
     .col-sm-2.col-form-label
       = f.label :message
     .col-sm-10
-      = f.text_area :message, class: "form-control js-autosize",
+      = f.text_area :message, class: "form-control js-autosize js-broadcast-message-message",
         required: true,
         dir: 'auto',
         data: { preview_path: preview_admin_broadcast_messages_path }
+  - if Feature.enabled?(:broadcast_notification_type)
     .form-group.row
+      .col-sm-2.col-form-label
+        = f.label :broadcast_type, _('Type')
+      .col-sm-10
+        = f.select :broadcast_type, broadcast_type_options, {}, class: 'form-control js-broadcast-message-type'
+  .form-group.row.js-broadcast-message-background-color-form-group{ class: ('hidden' unless @broadcast_message.banner? ) }
     .col-sm-2.col-form-label
       = f.label :color, _("Background color")
     .col-sm-10
@@ -25,7 +40,7 @@
         .input-group-prepend
           .input-group-text.label-color-preview{ :style => 'background-color: ' + @broadcast_message.color + '; color: ' + @broadcast_message.font }
             = ' '.html_safe
-        = f.text_field :color, class: "form-control"
+        = f.text_field :color, class: "form-control js-broadcast-message-color"
       .form-text.text-muted
         = _('Choose any color.')
         %br

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

@@ -20,6 +20,7 @@
         %th Starts
         %th Ends
         %th Target Path
+        %th Type
         %th  
     %tbody
       - @broadcast_messages.each do |message|
@@ -27,13 +28,15 @@
           %td
             = broadcast_message_status(message)
           %td
-            = broadcast_message(message)
+            = broadcast_message(message, preview: true)
           %td
             = message.starts_at
           %td
             = message.ends_at
           %td
             = message.target_path
+          %td
+            = message.broadcast_type.capitalize
           %td
             = link_to sprite_icon('pencil-square'), edit_admin_broadcast_message_path(message), title: 'Edit', class: 'btn'
             = link_to sprite_icon('remove'), admin_broadcast_message_path(message), method: :delete, remote: true, title: 'Remove', class: 'js-remove-tr btn btn-danger'

app/views/layouts/_broadcast.html.haml

-- current_broadcast_messages&.each do |message|
+- current_broadcast_banner_messages.each do |message|
   = broadcast_message(message)
+- if Feature.enabled?(:broadcast_notification_type)
+  = broadcast_message(current_broadcast_notification_message)

spec/features/admin/admin_broadcast_messages_spec.rb

@@ -13,7 +13,7 @@ describe 'Admin Broadcast Messages' do
     expect(page).to have_content 'Migration to new server'
   end
 
-  it 'Create a customized broadcast message' do
+  it 'creates a customized broadcast banner message' do
     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_target_path', with: '*/user_onboarded'
@@ -28,6 +28,20 @@ describe 'Admin Broadcast Messages' do
     expect(page).to have_selector %(div[style="background-color: #f2dede; color: #b94a48"])
   end
 
+  it 'creates a customized broadcast notification message' do
+    fill_in 'broadcast_message_message', with: 'Application update from **4:00 CST to 5:00 CST**'
+    fill_in 'broadcast_message_target_path', with: '*/user_onboarded'
+    select 'Notification', from: 'broadcast_message_broadcast_type'
+    select Date.today.next_year.year, from: 'broadcast_message_ends_at_1i'
+    click_button 'Add broadcast message'
+
+    expect(current_path).to eq admin_broadcast_messages_path
+    expect(page).to have_content 'Application update from 4:00 CST to 5:00 CST'
+    expect(page).to have_content '*/user_onboarded'
+    expect(page).to have_content 'Notification'
+    expect(page).to have_selector 'strong', text: '4:00 CST to 5:00 CST'
+  end
+
   it 'Edit an existing broadcast message' do
     click_link 'Edit'
     fill_in 'broadcast_message_message', with: 'Application update RIGHT NOW'
@@ -44,10 +58,20 @@ describe 'Admin Broadcast Messages' do
     expect(page).not_to have_content 'Migration to new server'
   end
 
-  it 'Live preview a customized broadcast message', :js do
+  it 'updates a preview of a customized broadcast banner message', :js do
+    fill_in 'broadcast_message_message', with: "Live **Markdown** previews. :tada:"
+
+    page.within('.js-broadcast-banner-message-preview') do
+      expect(page).to have_selector('strong', text: 'Markdown')
+      expect(page).to have_emoji('tada')
+    end
+  end
+
+  it 'updates a preview of a customized broadcast notification message', :js do
     fill_in 'broadcast_message_message', with: "Live **Markdown** previews. :tada:"
+    select 'Notification', from: 'broadcast_message_broadcast_type'
 
-    page.within('.broadcast-message-preview') do
+    page.within('.js-broadcast-notification-message-preview') do
       expect(page).to have_selector('strong', text: 'Markdown')
       expect(page).to have_emoji('tada')
     end

spec/helpers/broadcast_messages_helper_spec.rb

@@ -4,24 +4,22 @@ require 'spec_helper'
 
 describe BroadcastMessagesHelper do
   describe 'broadcast_message' do
+    let(:current_broadcast_message) { BroadcastMessage.new(message: 'Current Message') }
+
     it 'returns nil when no current message' do
       expect(helper.broadcast_message(nil)).to be_nil
     end
 
     it 'includes the current message' do
-      current = BroadcastMessage.new(message: 'Current Message')
-
       allow(helper).to receive(:broadcast_message_style).and_return(nil)
 
-      expect(helper.broadcast_message(current)).to include 'Current Message'
+      expect(helper.broadcast_message(current_broadcast_message)).to include 'Current Message'
     end
 
     it 'includes custom style' do
-      current = BroadcastMessage.new(message: 'Current Message')
-
       allow(helper).to receive(:broadcast_message_style).and_return('foo')
 
-      expect(helper.broadcast_message(current)).to include 'style="foo"'
+      expect(helper.broadcast_message(current_broadcast_message)).to include 'style="foo"'
     end
   end
 
@@ -32,12 +30,18 @@ describe BroadcastMessagesHelper do
       expect(helper.broadcast_message_style(broadcast_message)).to eq ''
     end
 
-    it 'allows custom style' do
-      broadcast_message = double(color: '#f2dede', font: '#b94a48')
+    it 'allows custom style for banner messages' do
+      broadcast_message = BroadcastMessage.new(color: '#f2dede', font: '#b94a48', broadcast_type: "banner")
 
       expect(helper.broadcast_message_style(broadcast_message))
         .to match('background-color: #f2dede; color: #b94a48')
     end
+
+    it 'does not add style for notification messages' do
+      broadcast_message = BroadcastMessage.new(color: '#f2dede', broadcast_type: "notification")
+
+      expect(helper.broadcast_message_style(broadcast_message)).to eq ''
+    end
   end
 
   describe 'broadcast_message_status' do