Refactor broadcast_message.js

4 files changed, 29 insertions, 26 deletions

diff --git a/app/assets/javascripts/broadcast_message.js b/app/assets/javascripts/broadcast_message.js
index f73e489e7b2..ff88083a4b4 100644
--- a/app/assets/javascripts/broadcast_message.js
+++ b/app/assets/javascripts/broadcast_message.js
@@ -1,33 +1,28 @@
-/* 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));
+}
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 70ec5851ba4..aa6ae7c1e95 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/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;
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index fc8324ac016..c05141b515e 100644
--- a/app/assets/javascripts/main.js
+++ b/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';
diff --git a/changelogs/unreleased/es-module-broadcast_message.yml b/changelogs/unreleased/es-module-broadcast_message.yml
new file mode 100644
index 00000000000..031bcc449ae
--- /dev/null
+++ b/changelogs/unreleased/es-module-broadcast_message.yml
@@ -0,0 +1,5 @@
+---
+title: Fix unnecessary ajax requests in admin broadcast message form
+merge_request: 14853
+author:
+type: fixed