Inline script cleanup globals and easy

28 files changed, 290 insertions, 262 deletions

diff --git a/app/assets/javascripts/blob_edit/blob_bundle.js b/app/assets/javascripts/blob_edit/blob_bundle.js
index 1c64ccf536f..b5500ac116f 100644
--- a/app/assets/javascripts/blob_edit/blob_bundle.js
+++ b/app/assets/javascripts/blob_edit/blob_bundle.js
@@ -8,6 +8,7 @@ import BlobFileDropzone from '../blob/blob_file_dropzone';
 $(() => {
   const editBlobForm = $('.js-edit-blob-form');
   const uploadBlobForm = $('.js-upload-blob-form');
+  const deleteBlobForm = $('.js-delete-blob-form');
 
   if (editBlobForm.length) {
     const urlRoot = editBlobForm.data('relative-url-root');
@@ -30,4 +31,8 @@ $(() => {
       '.btn-upload-file',
     );
   }
+
+  if (deleteBlobForm.length) {
+    new NewCommitForm(deleteBlobForm);
+  }
 });
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index d5923266c60..a2664c0301e 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -8,6 +8,7 @@
 /* global LabelsSelect */
 /* global MilestoneSelect */
 /* global Commit */
+/* global CommitsList */
 /* global NewBranchForm */
 /* global NotificationsForm */
 /* global NotificationsDropdown */
@@ -19,15 +20,20 @@
 /* global Search */
 /* global Admin */
 /* global NamespaceSelects */
+/* global NewCommitForm */
+/* global NewBranchForm */
 /* global Project */
 /* global ProjectAvatar */
 /* global MergeRequest */
 /* global Compare */
 /* global CompareAutocomplete */
+/* global ProjectFindFile */
 /* global ProjectNew */
 /* global ProjectShow */
+/* global ProjectImport */
 /* global Labels */
 /* global Shortcuts */
+/* global ShortcutsFindFile */
 /* global Sidebar */
 /* global ShortcutsWiki */
 
@@ -195,7 +201,6 @@ import GpgBadges from './gpg_badges';
           break;
         case 'explore:groups:index':
           new GroupsList();
-
           const landingElement = document.querySelector('.js-explore-groups-landing');
           if (!landingElement) break;
           const exploreGroupsLanding = new Landing(
@@ -218,6 +223,10 @@ import GpgBadges from './gpg_badges';
         case 'projects:compare:show':
           new gl.Diff();
           break;
+        case 'projects:branches:new':
+        case 'projects:branches:create':
+          new NewBranchForm($('.js-create-branch-form'), JSON.parse(document.getElementById('availableRefs').innerHTML));
+          break;
         case 'projects:branches:index':
           gl.AjaxLoadingSpinner.init();
           new DeleteModal();
@@ -305,18 +314,23 @@ import GpgBadges from './gpg_badges';
             container: '.js-commit-pipeline-graph',
           }).bindEvents();
           initNotes();
+          $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
           break;
         case 'projects:commit:pipelines':
           new MiniPipelineGraph({
             container: '.js-commit-pipeline-graph',
           }).bindEvents();
+          $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
           break;
-        case 'projects:commits:show':
+        case 'projects:activity':
+          new gl.Activities();
           shortcut_handler = new ShortcutsNavigation();
-          GpgBadges.fetch();
           break;
-        case 'projects:activity':
+        case 'projects:commits:show':
+          CommitsList.init(document.querySelector('.js-project-commits-show').dataset.commitsLimit);
+          new gl.Activities();
           shortcut_handler = new ShortcutsNavigation();
+          GpgBadges.fetch();
           break;
         case 'projects:show':
           shortcut_handler = new ShortcutsNavigation();
@@ -331,6 +345,9 @@ import GpgBadges from './gpg_badges';
         case 'projects:edit':
           setupProjectEdit();
           break;
+        case 'projects:imports:show':
+          new ProjectImport();
+          break;
         case 'projects:pipelines:new':
           new NewBranchForm($('.js-new-pipeline-form'));
           break;
@@ -387,11 +404,19 @@ import GpgBadges from './gpg_badges';
           shortcut_handler = new ShortcutsNavigation();
           new TreeView();
           new BlobViewer();
+          new NewCommitForm($('.js-create-dir-form'));
           $('#tree-slider').waitForImages(function() {
             gl.utils.ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath);
           });
           break;
         case 'projects:find_file:show':
+          const findElement = document.querySelector('.js-file-finder');
+          const projectFindFile = new ProjectFindFile($(".file-finder-holder"), {
+            url: findElement.dataset.fileFindUrl,
+            treeUrl: findElement.dataset.findTreeUrl,
+            blobUrlTemplate: findElement.dataset.blobUrlTemplate,
+          });
+          new ShortcutsFindFile(projectFindFile);
           shortcut_handler = true;
           break;
         case 'projects:blob:show':
diff --git a/app/assets/javascripts/graphs/graphs_bundle.js b/app/assets/javascripts/graphs/graphs_bundle.js
index a433c7ba8f0..534bc535bb6 100644
--- a/app/assets/javascripts/graphs/graphs_bundle.js
+++ b/app/assets/javascripts/graphs/graphs_bundle.js
@@ -1,6 +1,4 @@
 import Chart from 'vendor/Chart';
-import ContributorsStatGraph from './stat_graph_contributors';
 
 // export to global scope
 window.Chart = Chart;
-window.ContributorsStatGraph = ContributorsStatGraph;
diff --git a/app/assets/javascripts/graphs/graphs_charts.js b/app/assets/javascripts/graphs/graphs_charts.js
new file mode 100644
index 00000000000..279ffef770f
--- /dev/null
+++ b/app/assets/javascripts/graphs/graphs_charts.js
@@ -0,0 +1,63 @@
+import Chart from 'vendor/Chart';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const projectChartData = JSON.parse(document.getElementById('projectChartData').innerHTML);
+
+  const responsiveChart = (selector, data) => {
+    const options = {
+      scaleOverlay: true,
+      responsive: true,
+      pointHitDetectionRadius: 2,
+      maintainAspectRatio: false,
+    };
+    // get selector by context
+    const ctx = selector.get(0).getContext('2d');
+    // pointing parent container to make chart.js inherit its width
+    const container = $(selector).parent();
+    const generateChart = () => {
+      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();
+  };
+
+  const chartData = (keys, values) => {
+    const 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;
+  };
+
+  const hourData = chartData(projectChartData.hour.keys, projectChartData.hour.values);
+  responsiveChart($('#hour-chart'), hourData);
+
+  const dayData = chartData(projectChartData.weekDays.keys, projectChartData.weekDays.values);
+  responsiveChart($('#weekday-chart'), dayData);
+
+  const monthData = chartData(projectChartData.month.keys, projectChartData.month.values);
+  responsiveChart($('#month-chart'), monthData);
+
+  const data = projectChartData.languages;
+  const ctx = $('#languages-chart').get(0).getContext('2d');
+  const options = {
+    scaleOverlay: true,
+    responsive: true,
+    maintainAspectRatio: false,
+  };
+
+  new Chart(ctx).Pie(data, options);
+});
diff --git a/app/assets/javascripts/graphs/graphs_show.js b/app/assets/javascripts/graphs/graphs_show.js
new file mode 100644
index 00000000000..36bad6db3e1
--- /dev/null
+++ b/app/assets/javascripts/graphs/graphs_show.js
@@ -0,0 +1,21 @@
+import ContributorsStatGraph from './stat_graph_contributors';
+
+document.addEventListener('DOMContentLoaded', () => {
+  $.ajax({
+    type: 'GET',
+    url: document.querySelector('.js-graphs-show').dataset.projectGraphPath,
+    dataType: 'json',
+    success(data) {
+      const graph = new ContributorsStatGraph();
+      graph.init(data);
+
+      $('#brush_change').change(() => {
+        graph.change_date_header();
+        graph.redraw_authors();
+      });
+
+      $('.stat-graph').fadeIn();
+      $('.loading-graph').hide();
+    },
+  });
+});
diff --git a/app/assets/javascripts/two_factor_auth.js b/app/assets/javascripts/two_factor_auth.js
new file mode 100644
index 00000000000..d26f61562a5
--- /dev/null
+++ b/app/assets/javascripts/two_factor_auth.js
@@ -0,0 +1,13 @@
+/* global U2FRegister */
+document.addEventListener('DOMContentLoaded', () => {
+  const twoFactorNode = document.querySelector('.js-two-factor-auth');
+  const skippable = twoFactorNode.dataset.twoFactorSkippable === 'true';
+  if (skippable) {
+    const button = `<a class="btn btn-xs btn-warning pull-right" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
+    const flashAlert = document.querySelector('.flash-alert .container-fluid');
+    if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button);
+  }
+
+  const u2fRegister = new U2FRegister($('#js-register-u2f'), gon.u2f);
+  u2fRegister.start();
+});
diff --git a/app/assets/javascripts/ui_development_kit.js b/app/assets/javascripts/ui_development_kit.js
new file mode 100644
index 00000000000..f503076715c
--- /dev/null
+++ b/app/assets/javascripts/ui_development_kit.js
@@ -0,0 +1,22 @@
+import Api from './api';
+
+document.addEventListener('DOMContentLoaded', () => {
+  $('#js-project-dropdown').glDropdown({
+    data: (term, callback) => {
+      Api.projects(term, {
+        order_by: 'last_activity_at',
+      }, (data) => {
+        callback(data);
+      });
+    },
+    text: project => (project.name_with_namespace || project.name),
+    selectable: true,
+    fieldName: 'author_id',
+    filterable: true,
+    search: {
+      fields: ['name_with_namespace'],
+    },
+    id: data => data.id,
+    isSelected: data => (data.id === 2),
+  });
+});
diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml
index 48edbb8c16f..f18c3a74120 100644
--- a/app/views/help/ui.html.haml
+++ b/app/views/help/ui.html.haml
@@ -1,5 +1,7 @@
 - page_title "UI Development Kit", "Help"
 - lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum nisi sapien, non consequat lectus aliquam ultrices. Suspendisse sodales est euismod nunc condimentum, a consectetur diam ornare."
+- content_for :page_specific_javascripts do
+  = webpack_bundle_tag('ui_development_kit')
 
 .gitlab-ui-dev-kit
   %h1 GitLab UI development kit
@@ -407,29 +409,6 @@
           .dropdown-content
           .dropdown-loading
             = icon('spinner spin')
-    :javascript
-      $('#js-project-dropdown').glDropdown({
-        data: function (term, callback) {
-          Api.projects(term, { order_by: 'last_activity_at' }, function (data) {
-            callback(data);
-          });
-        },
-        text: function (project) {
-          return project.name_with_namespace || project.name;
-        },
-        selectable: true,
-        fieldName: "author_id",
-        filterable: true,
-        search: {
-          fields: ['name_with_namespace']
-        },
-        id: function (data) {
-          return data.id;
-        },
-        isSelected: function (data) {
-          return data.id === 2;
-        }
-      })
 
   .example
     %div
diff --git a/app/views/layouts/_google_analytics.html.haml b/app/views/layouts/_google_analytics.html.haml
index 81e03c7eff2..98ea96b0b77 100644
--- a/app/views/layouts/_google_analytics.html.haml
+++ b/app/views/layouts/_google_analytics.html.haml
@@ -1,3 +1,4 @@
+-# haml-lint:disable InlineJavaScript
 :javascript
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', '#{extra_config.google_analytics_id}']);
diff --git a/app/views/layouts/_init_auto_complete.html.haml b/app/views/layouts/_init_auto_complete.html.haml
index 4bb0dfc73fd..9704c9ec624 100644
--- a/app/views/layouts/_init_auto_complete.html.haml
+++ b/app/views/layouts/_init_auto_complete.html.haml
@@ -2,6 +2,7 @@
 - noteable_type = @noteable.class if @noteable.present?
 
 - if project
+  -# haml-lint:disable InlineJavaScript
   :javascript
     gl.GfmAutoComplete = gl.GfmAutoComplete || {};
     gl.GfmAutoComplete.dataSources = {
diff --git a/app/views/layouts/_piwik.html.haml b/app/views/layouts/_piwik.html.haml
index 259b4f7cdfc..a888e8ae187 100644
--- a/app/views/layouts/_piwik.html.haml
+++ b/app/views/layouts/_piwik.html.haml
@@ -1,4 +1,5 @@
 <!-- Piwik -->
+-# haml-lint:disable InlineJavaScript
 :javascript
   var _paq = _paq || [];
   _paq.push(['trackPageView']);
diff --git a/app/views/layouts/project.html.haml b/app/views/layouts/project.html.haml
index 99adb83cd1f..54d56e9b873 100644
--- a/app/views/layouts/project.html.haml
+++ b/app/views/layouts/project.html.haml
@@ -10,6 +10,7 @@
 - content_for :project_javascripts do
   - project = @target_project || @project
   - if current_user
+    -# haml-lint:disable InlineJavaScript
     :javascript
       window.uploads_path = "#{project_uploads_path(project)}";
 
diff --git a/app/views/layouts/snippets.html.haml b/app/views/layouts/snippets.html.haml
index 57971205e0e..849075a0ba5 100644
--- a/app/views/layouts/snippets.html.haml
+++ b/app/views/layouts/snippets.html.haml
@@ -2,6 +2,7 @@
 
 - content_for :page_specific_javascripts do
   - if @snippet && current_user
+    -# haml-lint:disable InlineJavaScript
     :javascript
       window.uploads_path = "#{upload_path('personal_snippet', id: @snippet.id)}";
 
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index cf750378e25..2216708d354 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -1,5 +1,6 @@
 - page_title "Personal Access Tokens"
 - @content_class = "limit-container-width" unless fluid_layout
+
 = render 'profiles/head'
 
 .row.prepend-top-default
@@ -19,7 +20,7 @@
         %h5.prepend-top-0
           Your New Personal Access Token
         .form-group
-          = text_field_tag 'created-personal-access-token', flash[:personal_access_token], readonly: true, class: "form-control", 'aria-describedby' => "created-personal-access-token-help-block"
+          = text_field_tag 'created-personal-access-token', flash[:personal_access_token], readonly: true, class: "form-control js-select-on-focus", 'aria-describedby' => "created-personal-access-token-help-block"
           = clipboard_button(text: flash[:personal_access_token], title: "Copy personal access token to clipboard", placement: "left")
           %span#created-personal-access-token-help-block.help-block.text-danger Make sure you save it - you won't be able to access it again.
 
@@ -28,8 +29,3 @@
     = render "shared/personal_access_tokens_form", path: profile_personal_access_tokens_path, impersonation: false, token: @personal_access_token, scopes: @scopes
 
     = render "shared/personal_access_tokens_table", impersonation: false, active_tokens: @active_personal_access_tokens, inactive_tokens: @inactive_personal_access_tokens
-
-:javascript
-  $("#created-personal-access-token").click(function() {
-    this.select();
-  });
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index 037cb30efb9..33e062c1c9c 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -7,97 +7,92 @@
 
 = render 'profiles/head'
 
-- if inject_u2f_api?
-  - content_for :page_specific_javascripts do
+- content_for :page_specific_javascripts do
+  - if inject_u2f_api?
     = page_specific_javascript_bundle_tag('u2f')
+  = page_specific_javascript_bundle_tag('two_factor_auth')
 
-.row.prepend-top-default
-  .col-lg-4
-    %h4.prepend-top-0
-      Register Two-Factor Authentication App
-    %p
-      Use an app on your mobile device to enable two-factor authentication (2FA).
-  .col-lg-8
-    - if current_user.two_factor_otp_enabled?
-      = icon "check inverse", base: "circle", class: "text-success", text: "You've already enabled two-factor authentication using mobile authenticator applications. You can disable it from your account settings page."
-    - else
+.js-two-factor-auth{ 'data-two-factor-skippable' => "#{two_factor_skippable?}", 'data-two_factor_skip_url' => skip_profile_two_factor_auth_path }
+  .row.prepend-top-default
+    .col-lg-4
+      %h4.prepend-top-0
+        Register Two-Factor Authentication App
       %p
-        Download the Google Authenticator application from App Store or Google Play Store and scan this code.
-        More information is available in the #{link_to('documentation', help_page_path('profile/two_factor_authentication'))}.
-      .row.append-bottom-10
-        .col-md-4
-          = raw @qr_code
-        .col-md-8
-          .account-well
-            %p.prepend-top-0.append-bottom-0
-              Can't scan the code?
-            %p.prepend-top-0.append-bottom-0
-              To add the entry manually, provide the following details to the application on your phone.
-            %p.prepend-top-0.append-bottom-0
-              Account:
-              = @account_string
-            %p.prepend-top-0.append-bottom-0
-              Key:
-              = current_user.otp_secret.scan(/.{4}/).join(' ')
-            %p.two-factor-new-manual-content
-              Time based: Yes
-      = form_tag profile_two_factor_auth_path, method: :post do |f|
-        - if @error
-          .alert.alert-danger
-            = @error
-        .form-group
-          = label_tag :pin_code, nil, class: "label-light"
-          = text_field_tag :pin_code, nil, class: "form-control", required: true
-        .prepend-top-default
-          = submit_tag 'Register with two-factor app', class: 'btn btn-success'
+        Use an app on your mobile device to enable two-factor authentication (2FA).
+    .col-lg-8
+      - if current_user.two_factor_otp_enabled?
+        = icon "check inverse", base: "circle", class: "text-success", text: "You've already enabled two-factor authentication using mobile authenticator applications. You can disable it from your account settings page."
+      - else
+        %p
+          Download the Google Authenticator application from App Store or Google Play Store and scan this code.
+          More information is available in the #{link_to('documentation', help_page_path('profile/two_factor_authentication'))}.
+        .row.append-bottom-10
+          .col-md-4
+            = raw @qr_code
+          .col-md-8
+            .account-well
+              %p.prepend-top-0.append-bottom-0
+                Can't scan the code?
+              %p.prepend-top-0.append-bottom-0
+                To add the entry manually, provide the following details to the application on your phone.
+              %p.prepend-top-0.append-bottom-0
+                Account:
+                = @account_string
+              %p.prepend-top-0.append-bottom-0
+                Key:
+                = current_user.otp_secret.scan(/.{4}/).join(' ')
+              %p.two-factor-new-manual-content
+                Time based: Yes
+        = form_tag profile_two_factor_auth_path, method: :post do |f|
+          - if @error
+            .alert.alert-danger
+              = @error
+          .form-group
+            = label_tag :pin_code, nil, class: "label-light"
+            = text_field_tag :pin_code, nil, class: "form-control", required: true
+          .prepend-top-default
+            = submit_tag 'Register with two-factor app', class: 'btn btn-success'
 
-%hr
+  %hr
 
-.row.prepend-top-default
-
-  .col-lg-4
-    %h4.prepend-top-0
-      Register Universal Two-Factor (U2F) Device
-    %p
-      Use a hardware device to add the second factor of authentication.
-    %p
-      As U2F devices are only supported by a few browsers, we require that you set up a
-      two-factor authentication app before a U2F device. That way you'll always be able to
-      log in - even when you're using an unsupported browser.
-  .col-lg-8
-    - if @u2f_registration.errors.present?
-      = form_errors(@u2f_registration)
-    = render "u2f/register"
+  .row.prepend-top-default
+    .col-lg-4
+      %h4.prepend-top-0
+        Register Universal Two-Factor (U2F) Device
+      %p
+        Use a hardware device to add the second factor of authentication.
+      %p
+        As U2F devices are only supported by a few browsers, we require that you set up a
+        two-factor authentication app before a U2F device. That way you'll always be able to
+        log in - even when you're using an unsupported browser.
+    .col-lg-8
+      - if @u2f_registration.errors.present?
+        = form_errors(@u2f_registration)
+      = render "u2f/register"
 
-    %hr
+      %hr
 
-    %h5 U2F Devices (#{@u2f_registrations.length})
+      %h5 U2F Devices (#{@u2f_registrations.length})
 
-    - if @u2f_registrations.present?
-      .table-responsive
-        %table.table.table-bordered.u2f-registrations
-          %colgroup
-            %col{ width: "50%" }
-            %col{ width: "30%" }
-            %col{ width: "20%" }
-          %thead
-            %tr
-              %th Name
-              %th Registered On
-              %th
-          %tbody
-            - @u2f_registrations.each do |registration|
+      - if @u2f_registrations.present?
+        .table-responsive
+          %table.table.table-bordered.u2f-registrations
+            %colgroup
+              %col{ width: "50%" }
+              %col{ width: "30%" }
+              %col{ width: "20%" }
+            %thead
               %tr
-                %td= registration.name.presence || "<no name set>"
-                %td= registration.created_at.to_date.to_s(:medium)
-                %td= link_to "Delete", profile_u2f_registration_path(registration), method: :delete, class: "btn btn-danger pull-right", data: { confirm: "Are you sure you want to delete this device? This action cannot be undone." }
-
-    - else
-      .settings-message.text-center
-        You don't have any U2F devices registered yet.
-
+                %th Name
+                %th Registered On
+                %th
+            %tbody
+              - @u2f_registrations.each do |registration|
+                %tr
+                  %td= registration.name.presence || "<no name set>"
+                  %td= registration.created_at.to_date.to_s(:medium)
+                  %td= link_to "Delete", profile_u2f_registration_path(registration), method: :delete, class: "btn btn-danger pull-right", data: { confirm: "Are you sure you want to delete this device? This action cannot be undone." }
 
-- if two_factor_skippable?
-  :javascript
-    var button = "<a class='btn btn-xs btn-warning pull-right' data-method='patch' href='#{skip_profile_two_factor_auth_path}'>Configure it later</a>";
-    $(".flash-alert").append(button);
+      - else
+        .settings-message.text-center
+          You don't have any U2F devices registered yet.
diff --git a/app/views/projects/_activity.html.haml b/app/views/projects/_activity.html.haml
index ecc966ed453..ad63f5e73ae 100644
--- a/app/views/projects/_activity.html.haml
+++ b/app/views/projects/_activity.html.haml
@@ -8,9 +8,3 @@
 
   .content_list.project-activity{ :"data-href" => activity_project_path(@project) }
   = spinner
-
-:javascript
-  var activity = new gl.Activities();
-  $(document).on('page:restore', function (event) {
-    activity.reloadActivities()
-  })
diff --git a/app/views/projects/blob/_new_dir.html.haml b/app/views/projects/blob/_new_dir.html.haml
index b2959ef6d31..03ab1bb59e4 100644
--- a/app/views/projects/blob/_new_dir.html.haml
+++ b/app/views/projects/blob/_new_dir.html.haml
@@ -20,6 +20,3 @@
             - unless can?(current_user, :push_code, @project)
               .inline.prepend-left-10
                 = commit_in_fork_help
-
-:javascript
-  new NewCommitForm($('.js-create-dir-form'))
diff --git a/app/views/projects/blob/_remove.html.haml b/app/views/projects/blob/_remove.html.haml
index 6a4a657fa8c..750bdef3308 100644
--- a/app/views/projects/blob/_remove.html.haml
+++ b/app/views/projects/blob/_remove.html.haml
@@ -13,6 +13,3 @@
             .col-sm-offset-2.col-sm-10
               = button_tag 'Delete file', class: 'btn btn-remove btn-remove-file'
               = link_to "Cancel", '#', class: "btn btn-cancel", "data-dismiss" => "modal"
-
-:javascript
-  new NewCommitForm($('.js-delete-blob-form'))
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index 03eefcc2b4d..2baaaf6ac5b 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -28,8 +28,4 @@
   .form-actions
     = button_tag 'Create branch', class: 'btn btn-create', tabindex: 3
     = link_to 'Cancel', project_branches_path(@project), class: 'btn btn-cancel'
-
-:javascript
-  var availableRefs = #{@project.repository.ref_names.to_json};
-
-  new NewBranchForm($('.js-create-branch-form'), availableRefs)
+%script#availableRefs{ type: "application/json" }= @project.repository.ref_names.to_json.html_safe
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 419fbe99af8..09bcd187e59 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -1,4 +1,4 @@
-.page-content-header
+.page-content-header.js-commit-box{ 'data-commit-path' => branches_project_commit_path(@project, @commit.id) }
   .header-main-content
     = render partial: 'signature', object: @commit.signature
     %strong
@@ -79,6 +79,3 @@
           = render 'shared/mini_pipeline_graph', pipeline: last_pipeline, klass: 'js-commit-pipeline-graph'
       in
       = time_interval_in_words last_pipeline.duration
-
-:javascript
-  $(".commit-info.branches").load("#{branches_project_commit_path(@project, @commit.id)}");
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index bd2d900997e..7ae56086177 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/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'
+.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'
 
-        %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)
+            = 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'
+            = link_to project_commits_path(@project, @ref, rss_url_options), title: _("Commits feed"), class: 'btn' do
+              = icon("rss")
 
-        .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});
+    %div{ id: dom_id(@project) }
+      %ol#commits-list.list-unstyled.content_list
+        = render 'commits', project: @project, ref: @ref
+    = spinner
diff --git a/app/views/projects/find_file/show.html.haml b/app/views/projects/find_file/show.html.haml
index e3bf48ee47f..021575160ea 100644
--- a/app/views/projects/find_file/show.html.haml
+++ b/app/views/projects/find_file/show.html.haml
@@ -1,7 +1,7 @@
 - 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);
diff --git a/app/views/projects/graphs/charts.html.haml b/app/views/projects/graphs/charts.html.haml
index 249b9d82ad9..228c8c84792 100644
--- a/app/views/projects/graphs/charts.html.haml
+++ b/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
diff --git a/app/views/projects/graphs/show.html.haml b/app/views/projects/graphs/show.html.haml
index 4256a8c4d7e..f41a0d8293b 100644
--- a/app/views/projects/graphs/show.html.haml
+++ b/app/views/projects/graphs/show.html.haml
@@ -1,15 +1,16 @@
 - @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();
-    }
-  });
diff --git a/app/views/projects/imports/show.html.haml b/app/views/projects/imports/show.html.haml
index c52b3860636..8c490773a56 100644
--- a/app/views/projects/imports/show.html.haml
+++ b/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();
diff --git a/app/views/u2f/_register.html.haml b/app/views/u2f/_register.html.haml
index 00788e77b6b..093b2d82813 100644
--- a/app/views/u2f/_register.html.haml
+++ b/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();
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 2f85b89d523..8b0c64f9289 100644
--- a/config/webpack.config.js
+++ b/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',
   },
diff --git a/spec/features/commits_spec.rb b/spec/features/commits_spec.rb
index 15ec6f20763..0c9fcc60d30 100644
--- a/spec/features/commits_spec.rb
+++ b/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'