Move modal logic to separate js file and clean up styles

app/assets/javascripts/issues/export_csv_modal.js

+$(() => {
+  class ExportCSVModal {
+    constructor() {
+      this.$el = $('.issues-export-modal');
+      this.$btn = $('.csv_download_link');
+      this.$close = $('.modal-header .close');
+      this.init();
+    }
+
+    init() {
+      this.$el.modal({ show: false });
+      this.$btn.on('click', () => this.$el.modal('show'));
+      this.$close.on('click', () => this.$el.modal('hide'));
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.ExportCSVModal = new ExportCSVModal();
+});

app/assets/javascripts/issues/issues_bundle.js

+require('./export_csv_modal');

app/assets/stylesheets/pages/issues.scss

@@ -125,7 +125,7 @@ ul.related-merge-requests > li {
 }
 
 .issues-export-modal {
-  .export-svg {
+  .export-svg-container {
     height: 56px;
     padding: 10px 10px 0;
   }
@@ -135,7 +135,7 @@ ul.related-merge-requests > li {
   }
 
   .export-checkmark {
-    color: $green-light
+    color: $green-light;
   }
 }
 

app/views/projects/issues/export_issues/_csv_download.html.haml

@@ -3,7 +3,7 @@
     .modal-content
       .modal-header
         %a.close{ href: "#", "data-dismiss" => "modal" } ×
-        .export-svg.pull-right
+        .export-svg-container.pull-right
           = render "projects/issues/export_issues/export_issues_list.svg"
         %h3
           Export issues list
@@ -17,14 +17,3 @@
           %strong= @current_user.email
       .modal-footer
         = link_to 'Request export', export_csv_namespace_project_issues_path(@project.namespace, @project, params.permit(IssuableFinder::VALID_PARAMS)), method: :post, class: "btn btn-success pull-left", title: "Request export"
-
-:javascript
-  $(function(){
-    var modal = $('.issues-export-modal').modal({modal: true, show:false});
-    $('.csv_download_link').bind("click", function(){
-      modal.show();
-    });
-    $('.modal-header .close').bind("click", function(){
-      modal.hide();
-    })
-  })

app/views/projects/issues/index.html.haml

@@ -8,6 +8,7 @@
 
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('filtered_search')
+  = page_specific_javascript_bundle_tag('issues')
 
 = content_for :meta_tags do
   - if current_user

config/webpack.config.js

@@ -25,6 +25,7 @@ var config = {
     environments_folder:  './environments/folder/environments_folder_bundle.js',
     filtered_search:      './filtered_search/filtered_search_bundle.js',
     graphs:               './graphs/graphs_bundle.js',
+    issues:               './issues/issues_bundle.js',
     issuable:             './issuable/issuable_bundle.js',
     merge_conflicts:      './merge_conflicts/merge_conflicts_bundle.js',
     merge_request_widget: './merge_request_widget/ci_bundle.js',