Inline script cleanup globals and easy

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

@@ -11,34 +11,32 @@
 = content_for :sub_nav do
   = render "head"
-%div{ class: container_class }
-  .tree-holder
-    .nav-block
-      .tree-ref-container
-        .tree-ref-holder
-          = render 'shared/ref_switcher', destination: 'commits'
-        %ul.breadcrumb.repo-breadcrumb
-          = commits_breadcrumbs
-      .tree-controls.hidden-xs.hidden-sm
-        - if @merge_request.present?
+.js-project-commits-show{ 'data-commits-limit' => @limit }
+  %div{ class: container_class }
+    .tree-holder
+      .nav-block
+        .tree-ref-container
+          .tree-ref-holder
+            = render 'shared/ref_switcher', destination: 'commits'
+
+          %ul.breadcrumb.repo-breadcrumb
+            = commits_breadcrumbs
+        .tree-controls.hidden-xs.hidden-sm
+          - if @merge_request.present?
+            .control
+              = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'btn'
+          - elsif create_mr_button?(@repository.root_ref, @ref)
+            .control
+              = link_to _("Create merge request"), create_mr_path(@repository.root_ref, @ref), class: 'btn btn-success'
           .control
-            = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'btn'
-        - elsif create_mr_button?(@repository.root_ref, @ref)
+            = form_tag(project_commits_path(@project, @id), method: :get, class: 'commits-search-form', data: { 'signatures-path' => namespace_project_signatures_path }) do
+              = search_field_tag :search, params[:search], { placeholder: _('Filter by commit message'), id: 'commits-search', class: 'form-control search-text-input input-short', spellcheck: false }
           .control
-            = link_to _("Create merge request"), create_mr_path(@repository.root_ref, @ref), class: 'btn btn-success'
-        .control
-          = form_tag(project_commits_path(@project, @id), method: :get, class: 'commits-search-form', data: { 'signatures-path' => namespace_project_signatures_path }) do
-            = search_field_tag :search, params[:search], { placeholder: _('Filter by commit message'), id: 'commits-search', class: 'form-control search-text-input input-short', spellcheck: false }
-        .control
-          = link_to project_commits_path(@project, @ref, rss_url_options), title: _("Commits feed"), class: 'btn' do
-            = icon("rss")
-
-  %div{ id: dom_id(@project) }
-    %ol#commits-list.list-unstyled.content_list
-      = render 'commits', project: @project, ref: @ref
-  = spinner
-
-:javascript
-  CommitsList.init(#{@limit});
+            = link_to project_commits_path(@project, @ref, rss_url_options), title: _("Commits feed"), class: 'btn' do
+              = icon("rss")
+    %div{ id: dom_id(@project) }
+      %ol#commits-list.list-unstyled.content_list
+        = render 'commits', project: @project, ref: @ref
+    = spinner

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

 - page_title "Find File", @ref
 = render "projects/commits/head"
-.file-finder-holder.tree-holder.clearfix
+.file-finder-holder.tree-holder.clearfix.js-file-finder{ 'data-file-find-url': "#{escape_javascript(project_files_path(@project, @ref, @options.merge(format: :json)))}", 'data-find-tree-url': escape_javascript(project_tree_path(@project, @ref)), 'data-blob-url-template': escape_javascript(project_blob_path(@project, @id || @commit.id)) }
   .nav-block
     .tree-ref-holder
       = render 'shared/ref_switcher', destination: 'find_file', path: @path
@@ -17,11 +17,3 @@
       %table.table.files-slider{ class: "table_#{@hex_path} tree-table table-striped" }
         %tbody
       = spinner nil, true
-
-:javascript
-  var projectFindFile = new ProjectFindFile($(".file-finder-holder"), {
-    url: "#{escape_javascript(project_files_path(@project, @ref, @options.merge(format: :json)))}",
-    treeUrl: "#{escape_javascript(project_tree_path(@project, @ref))}",
-    blobUrlTemplate: "#{escape_javascript(project_blob_path(@project, @id || @commit.id))}"
-  });
-  new ShortcutsFindFile(projectFindFile);

app/views/projects/graphs/charts.html.haml

@@ -3,8 +3,9 @@
 - if show_new_nav?
   - add_to_breadcrumbs("Repository", project_tree_path(@project))
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_d3')
-  = page_specific_javascript_bundle_tag('graphs')
+  = webpack_bundle_tag('common_d3')
+  = webpack_bundle_tag('graphs')
+  = webpack_bundle_tag('graphs_charts')
 = render "projects/commits/head"
 .repo-charts{ class: container_class }
@@ -75,55 +76,10 @@
           Commits per day hour (UTC)
         %canvas#hour-chart
-:javascript
-  var responsiveChart = function (selector, data) {
-    var options = { "scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2, maintainAspectRatio: false };
-    // get selector by context
-    var ctx = selector.get(0).getContext("2d");
-    // pointing parent container to make chart.js inherit its width
-    var container = $(selector).parent();
-    var generateChart = function() {
-      selector.attr('width', $(container).width());
-      if (window.innerWidth < 768) {
-        // Scale fonts if window width lower than 768px (iPad portrait)
-        options.scaleFontSize = 8
-      }
-      return new Chart(ctx).Bar(data, options);
-    };
-    // enabling auto-resizing
-    $(window).resize(generateChart);
-    return generateChart();
-  };
-
-  var chartData = function (keys, values) {
-    var data = {
-      labels : keys,
-      datasets : [{
-        fillColor : "rgba(220,220,220,0.5)",
-        strokeColor : "rgba(220,220,220,1)",
-        barStrokeWidth: 1,
-        barValueSpacing: 1,
-        barDatasetSpacing: 1,
-        data : values
-      }]
-    };
-    return data;
-  };
-
-  var hourData = chartData(#{@commits_per_time.keys.to_json}, #{@commits_per_time.values.to_json});
-  responsiveChart($('#hour-chart'), hourData);
-
-  var dayData = chartData(#{@commits_per_week_days.keys.to_json}, #{@commits_per_week_days.values.to_json});
-  responsiveChart($('#weekday-chart'), dayData);
-
-  var monthData = chartData(#{@commits_per_month.keys.to_json}, #{@commits_per_month.values.to_json});
-  responsiveChart($('#month-chart'), monthData);
-
-  var data = #{@languages.to_json};
-  var ctx = $("#languages-chart").get(0).getContext("2d");
-  var options = {
-    scaleOverlay: true,
-    responsive: true,
-    maintainAspectRatio: false
-  }
-  var myPieChart = new Chart(ctx).Pie(data, options);
+%script#projectChartData{ type: "application/json" }
+  - projectChartData = {};
+  - projectChartData['hour'] = { 'keys' => @commits_per_time.keys, 'values' => @commits_per_time.values }
+  - projectChartData['weekDays'] = { 'keys' => @commits_per_week_days.keys, 'values' => @commits_per_week_days.values }
+  - projectChartData['month'] = { 'keys' => @commits_per_month.keys, 'values' => @commits_per_month.values }
+  - projectChartData['languages'] = @languages
+  = projectChartData.to_json.html_safe

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

 - @no_container = true
 - page_title "Contributors"
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_d3')
-  = page_specific_javascript_bundle_tag('graphs')
+  = webpack_bundle_tag('common_d3')
+  = webpack_bundle_tag('graphs')
+  = webpack_bundle_tag('graphs_show')
 - if show_new_nav?
   - add_to_breadcrumbs("Repository", project_tree_path(@project))
 = render 'projects/commits/head'
-%div{ class: container_class }
+.js-graphs-show{ class: container_class, 'data-project-graph-path': project_graph_path(@project, current_ref, format: :json) }
   .sub-header-block
     .tree-ref-holder
       = render 'shared/ref_switcher', destination: 'graphs'
@@ -33,24 +34,3 @@
       #contributors-master
       #contributors.clearfix
         %ol.contributors-list.clearfix
-
-
-
-:javascript
-  $.ajax({
-    type: "GET",
-    url: "#{project_graph_path(@project, current_ref, format: :json)}",
-    dataType: "json",
-    success: function (data) {
-      var graph = new ContributorsStatGraph();
-      graph.init(data);
-
-      $("#brush_change").change(function(){
-        graph.change_date_header();
-        graph.redraw_authors();
-      });
-
-      $(".stat-graph").fadeIn();
-      $(".loading-graph").hide();
-    }
-  });

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

@@ -10,5 +10,3 @@
     - if @project.external_import?
       %p.monospace git clone --bare #{@project.safe_import_url}
     %p Please wait while we import the repository for you. Refresh at will.
-    :javascript
-      new ProjectImport();

app/views/u2f/_register.html.haml

@@ -37,7 +37,3 @@
           .col-md-3
             = hidden_field_tag 'u2f_registration[device_response]', nil, class: 'form-control', required: true, id: "js-device-response"
             = submit_tag "Register U2F device", class: "btn btn-success"
-
-:javascript
-  var u2fRegister = new U2FRegister($("#js-register-u2f"), gon.u2f);
-  u2fRegister.start();

config/webpack.config.js

@@ -39,6 +39,8 @@ var config = {
     environments_folder:  './environments/folder/environments_folder_bundle.js',
     filtered_search:      './filtered_search/filtered_search_bundle.js',
     graphs:               './graphs/graphs_bundle.js',
+    graphs_charts:        './graphs/graphs_charts.js',
+    graphs_show:          './graphs/graphs_show.js',
     group:                './group.js',
     groups:               './groups/index.js',
     groups_list:          './groups_list.js',
@@ -70,9 +72,12 @@ var config = {
     stl_viewer:           './blob/stl_viewer.js',
     terminal:             './terminal/terminal_bundle.js',
     u2f:                  ['vendor/u2f'],
+    ui_development_kit:   './ui_development_kit.js',
+    users:                './users/index.js',
     raven:                './raven/index.js',
     vue_merge_request_widget: './vue_merge_request_widget/index.js',
     test:                 './test.js',
+    two_factor_auth:      './two_factor_auth.js',
     performance_bar:      './performance_bar.js',
     webpack_runtime:      './webpack.js',
   },

spec/features/commits_spec.rb

@@ -282,7 +282,7 @@ describe 'Commits' do
       end
       # verified and the gpg user has a gitlab profile
-      click_on 'Verified'
+      click_on 'Verified', match: :first
       within '.popover' do
         expect(page).to have_content 'This commit was signed with a verified signature.'
         expect(page).to have_content 'Nannie Bernhard'
@@ -295,7 +295,7 @@ describe 'Commits' do
       visit project_commits_path(project, :'signed-commits')
-      click_on 'Verified'
+      click_on 'Verified', match: :first
       within '.popover' do
         expect(page).to have_content 'This commit was signed with a verified signature.'
         expect(page).to have_content 'Nannie Bernhard'