Refactor broadcast_message.js

app/assets/javascripts/broadcast_message.js

-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, quotes, no-else-return, object-shorthand, comma-dangle, max-len */
-
-$(function() {
-  var previewPath;
-  $('input#broadcast_message_color').on('input', function() {
-    var previewColor;
-    previewColor = $(this).val();
-    return $('div.broadcast-message-preview').css('background-color', previewColor);
+export default function initBroadcastMessagesForm() {
+  $('input#broadcast_message_color').on('input', function onMessageColorInput() {
+    const previewColor = $(this).val();
+    $('div.broadcast-message-preview').css('background-color', previewColor);
   });
-  $('input#broadcast_message_font').on('input', function() {
-    var previewColor;
-    previewColor = $(this).val();
-    return $('div.broadcast-message-preview').css('color', previewColor);
+
+  $('input#broadcast_message_font').on('input', function onMessageFontInput() {
+    const previewColor = $(this).val();
+    $('div.broadcast-message-preview').css('color', previewColor);
   });
-  previewPath = $('textarea#broadcast_message_message').data('preview-path');
-  return $('textarea#broadcast_message_message').on('input', function() {
-    var message;
-    message = $(this).val();
+
+  const previewPath = $('textarea#broadcast_message_message').data('preview-path');
+
+  $('textarea#broadcast_message_message').on('input', _.debounce(function onMessageInput() {
+    const message = $(this).val();
     if (message === '') {
-      return $('.js-broadcast-message-preview').text("Your message here");
+      $('.js-broadcast-message-preview').text('Your message here');
     } else {
-      return $.ajax({
+      $.ajax({
         url: previewPath,
-        type: "POST",
+        type: 'POST',
         data: {
-          broadcast_message: {
-            message: message
-          }
-        }
+          broadcast_message: { message },
+        },
       });
     }
-  });
-});
+  }, 250));
+}

app/assets/javascripts/dispatcher.js

@@ -70,6 +70,7 @@ import initSettingsPanels from './settings_panels';
 import initExperimentalFlags from './experimental_flags';
 import OAuthRememberMe from './oauth_remember_me';
 import PerformanceBar from './performance_bar';
+import initBroadcastMessagesForm from './broadcast_message';
 import initNotes from './init_notes';
 import initLegacyFilters from './init_legacy_filters';
 import initIssuableSidebar from './init_issuable_sidebar';
@@ -555,6 +556,9 @@ import memberExpirationDate from './member_expiration_date';
         case 'admin':
           new Admin();
           switch (path[1]) {
+            case 'broadcast_messages':
+              initBroadcastMessagesForm();
+              break;
             case 'cohorts':
               new UsagePing();
               break;

app/assets/javascripts/main.js

@@ -53,7 +53,6 @@ import './aside';
 import './autosave';
 import loadAwardsHandler from './awards_handler';
 import bp from './breakpoints';
-import './broadcast_message';
 import './commits';
 import './compare';
 import './compare_autocomplete';

changelogs/unreleased/es-module-broadcast_message.yml

+---
+title: Fix unnecessary ajax requests in admin broadcast message form
+merge_request: 14853
+author:
+type: fixed