turn dashboard.js into a module (#3698)

apps/dashboard/app/javascript/dashboard.js

@@ -1,18 +1,11 @@
 'use strict';
 
-jQuery(function(){
-  $("a[target=_blank]").on("click", function(event) {
-    // open url using javascript, instead of following directly
-    event.preventDefault();
+import { openLinkInJs } from './utils';
 
-    if(window.open($(this).attr("href")) == null){
-      // link was not opened in new window, so display error msg to user
-      const html = $("#js-alert-danger-template").html();
-      const msg = "This link is configured to open in a new window, but it doesn't seem to have opened. " +
-            "Please disable your popup blocker for this page and try again.";
+document.addEventListener('DOMContentLoaded', () => {
+  const anchors = document.querySelectorAll('a[target=_blank]');
 
-      // replace message in alert and add to main div of layout
-      $("div[role=main]").prepend(html.split("ALERT_MSG").join(msg));
-    }
+  anchors.forEach(anchor => {
+    anchor.addEventListener('click', (event) => { openLinkInJs(event); });
   });
 });

apps/dashboard/app/javascript/utils.js

@@ -56,3 +56,27 @@ export function bindFullPageSpinnerEvent() {
     }
   });
 }
+
+// open links in javascript and display an alert
+export function openLinkInJs(event) {
+  event.preventDefault();
+  const href = event.target.href;
+
+  // do nothing if there's no href.
+  if(href == null){
+    return;
+  }
+
+  if(window.open(href) == null) {
+    // link was not opened in new window, so display error msg to user
+    const html = document.getElementById('js-alert-danger-template').innerHTML;
+    const msg = "This link is configured to open in a new window, but it doesn't seem to have opened. " +
+          "Please disable your popup blocker for this page and try again.";
+
+    // replace message in alert and add to main div of layout
+    const mainDiv = document.querySelectorAll('div[role="main"]')[0];
+    const alertDiv = document.createElement('div');
+    alertDiv.innerHTML = html.split("ALERT_MSG").join(msg);
+    mainDiv.prepend(alertDiv);
+  }
+}

apps/dashboard/app/views/dashboard/index.html.erb

@@ -1,5 +1,5 @@
 <%- content_for :head do -%>
-  <%= javascript_include_tag 'dashboard', nonce: true %>
+  <%= javascript_include_tag 'dashboard', nonce: true, type: 'module' %>
   <%= javascript_include_tag 'pinned_apps', nonce: true %>
 <%- end -%>
 <%= render partial: 'shared/welcome' unless @user_configuration.disable_dashboard_welcome_message%>