Inline JS Removal for Merge Requests

app/assets/javascripts/dispatcher.js

@@ -20,6 +20,8 @@
 /* global NamespaceSelects */
 /* global Project */
 /* global ProjectAvatar */
+/* global MergeRequest */
+/* global Compare */
 /* global CompareAutocomplete */
 /* global ProjectNew */
 /* global ProjectShow */
@@ -221,6 +223,19 @@ import PerformanceBar from './performance_bar';
           new gl.IssuableTemplateSelectors();
           break;
         case 'projects:merge_requests:creations:new':
+          const mrNewCompareNode = document.querySelector('.js-merge-request-new-compare');
+          if (mrNewCompareNode) {
+            new Compare({
+              targetProjectUrl: mrNewCompareNode.dataset.targetProjectUrl,
+              sourceBranchUrl: mrNewCompareNode.dataset.sourceBranchUrl,
+              targetBranchUrl: mrNewCompareNode.dataset.targetBranchUrl,
+            });
+          } else {
+            const mrNewSubmitNode = document.querySelector('.js-merge-request-new-submit');
+            new MergeRequest({
+              action: mrNewSubmitNode.dataset.mrSubmitAction,
+            });
+          }
         case 'projects:merge_requests:creations:diffs':
         case 'projects:merge_requests:edit':
           new gl.Diff();
@@ -257,6 +272,10 @@ import PerformanceBar from './performance_bar';
           new gl.Diff();
           shortcut_handler = new ShortcutsIssuable(true);
           new ZenMode();
+          const mrShowNode = document.querySelector('.merge-request');
+          window.mergeRequest = new MergeRequest({
+            action: mrShowNode.dataset.mrAction,
+          });
           break;
         case 'dashboard:activity':
           new gl.Activities();

app/assets/javascripts/how_to_merge.js

@@ -3,10 +3,10 @@ document.addEventListener('DOMContentLoaded', () => {
     modal: true,
     show: false,
   });
-  $('.how_to_merge_link').bind('click', () => {
+  $('.how_to_merge_link').on('click', () => {
     modal.show();
   });
-  $('.modal-header .close').bind('click', () => {
+  $('.modal-header .close').on('click', () => {
     modal.hide();
   });
 });

app/views/projects/merge_requests/creations/_new_compare.html.haml

@@ -3,7 +3,7 @@
 
 = form_for [@project.namespace.becomes(Namespace), @project, @merge_request], url: project_new_merge_request_path(@project), method: :get, html: { class: "merge-request-form form-inline js-requires-input" } do |f|
   .hide.alert.alert-danger.mr-compare-errors
-  .merge-request-branches.row
+  .merge-request-branches.js-merge-request-new-compare.row{ 'data-target-project-url': project_new_merge_request_update_branches_path(@source_project), 'data-source-branch-url': project_new_merge_request_branch_from_path(@source_project), 'data-target-branch-url': project_new_merge_request_branch_to_path(@source_project) }
     .col-md-6
       .panel.panel-default.panel-new-merge-request
         .panel-heading
@@ -66,10 +66,3 @@
   - if @merge_request.errors.any?
     = form_errors(@merge_request)
   = f.submit 'Compare branches and continue', class: "btn btn-new mr-compare-btn"
-
-:javascript
-  new Compare({
-    targetProjectUrl: "#{project_new_merge_request_update_branches_path(@source_project)}",
-    sourceBranchUrl: "#{project_new_merge_request_branch_from_path(@source_project)}",
-    targetBranchUrl: "#{project_new_merge_request_branch_to_path(@source_project)}"
-  });

app/views/projects/merge_requests/creations/_new_submit.html.haml

@@ -17,7 +17,7 @@
   = f.hidden_field :target_project_id
   = f.hidden_field :target_branch
 
-.mr-compare.merge-request
+.mr-compare.merge-request.js-merge-request-new-submit{ 'data-mr-submit-action': "#{j params[:tab].presence || 'new'}" }
   - if @commits.empty?
     .commits-empty
       %h4
@@ -50,8 +50,3 @@
 
   .mr-loading-status
     = spinner
-
-:javascript
-  var merge_request = new MergeRequest({
-    action: "#{j params[:tab].presence || 'new'}",
-  });

app/views/projects/merge_requests/show.html.haml

@@ -3,10 +3,10 @@
 - page_description @merge_request.description
 - page_card_attributes @merge_request.card_attributes
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_vue')
-  = page_specific_javascript_bundle_tag('diff_notes')
+  = webpack_bundle_tag('common_vue')
+  = webpack_bundle_tag('diff_notes')
 
-.merge-request{ 'data-url' => merge_request_path(@merge_request, format: :json), 'data-project-path' => project_path(@merge_request.project) }
+.merge-request{ 'data-mr-action': "#{j params[:tab].presence || 'show'}", 'data-url' => merge_request_path(@merge_request, format: :json), 'data-project-path' => project_path(@merge_request.project) }
   = render "projects/merge_requests/mr_title"
 
   .merge-request-details.issuable-details{ data: { id: @merge_request.project.id } }
@@ -15,13 +15,13 @@
     - if @merge_request.source_branch_exists?
       = render "projects/merge_requests/how_to_merge"
 
+    -# haml-lint:disable InlineJavaScript
     :javascript
       window.gl.mrWidgetData = #{serialize_issuable(@merge_request)}
 
     #js-vue-mr-widget.mr-widget
 
     - content_for :page_specific_javascripts do
-      = webpack_bundle_tag 'common_vue'
       = webpack_bundle_tag 'vue_merge_request_widget'
 
     .content-block.content-block-small.emoji-list-container
@@ -88,10 +88,3 @@
   = render "projects/commit/change", type: 'revert', commit: @merge_request.merge_commit, title: @merge_request.title
 - if @merge_request.can_be_cherry_picked?
   = render "projects/commit/change", type: 'cherry-pick', commit: @merge_request.merge_commit, title: @merge_request.title
-
-:javascript
-  $(function () {
-    window.mergeRequest = new MergeRequest({
-      action: "#{j params[:tab].presence || 'show'}",
-    });
-  });