Inline script cleanup globals and easy

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);
+  }
 });

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':

app/assets/javascripts/graphs/graphs_bundle.js

 import Chart from 'vendor/Chart';
-import ContributorsStatGraph from './stat_graph_contributors';
 // export to global scope
 window.Chart = Chart;
-window.ContributorsStatGraph = ContributorsStatGraph;

app/assets/javascripts/graphs/graphs_charts.js

+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);
+});

app/assets/javascripts/graphs/graphs_show.js

+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();
+    },
+  });
+});

app/assets/javascripts/two_factor_auth.js

+/* 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();
+});

app/assets/javascripts/ui_development_kit.js

+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),
+  });
+});

app/views/help/ui.html.haml

 - 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

app/views/layouts/_google_analytics.html.haml

+-# haml-lint:disable InlineJavaScript
 :javascript
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', '#{extra_config.google_analytics_id}']);

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 = {

app/views/layouts/_piwik.html.haml

 <!-- Piwik -->
+-# haml-lint:disable InlineJavaScript
 :javascript
   var _paq = _paq || [];
   _paq.push(['trackPageView']);

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)}";

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)}";

app/views/profiles/personal_access_tokens/index.html.haml

 - 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();
-  });

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')
-.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
+  = page_specific_javascript_bundle_tag('two_factor_auth')
+.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'
-%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"
-    %hr
-    %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|
+        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
+  .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
+      %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
-                %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.
-
-- 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);
+                %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." }
+      - else
+        .settings-message.text-center
+          You don't have any U2F devices registered yet.

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()
-  })

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'))

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'))

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

app/views/projects/commit/_commit_box.html.haml

-.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)}");