Merge branch 'master' into 'docs-specific-review-examples'docs-specific-review-examples

# Conflicts:
#   doc/development/code_review.md

13 files changed, 327 insertions, 20 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/build.js b/app/assets/javascripts/build.js
index 1dfa064acfd..b3d3bbcf84f 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -64,7 +64,7 @@ window.Build = (function () {
     $(window)
       .off('scroll')
       .on('scroll', () => {
-        const contentHeight = this.$buildTraceOutput.prop('scrollHeight');
+        const contentHeight = this.$buildTraceOutput.height();
         if (contentHeight > this.windowSize) {
           // means the user did not scroll, the content was updated.
           this.windowSize = contentHeight;
@@ -105,16 +105,17 @@ window.Build = (function () {
   };
 
   Build.prototype.canScroll = function () {
-    return document.body.scrollHeight > window.innerHeight;
+    return $(document).height() > $(window).height();
   };
 
   Build.prototype.toggleScroll = function () {
-    const currentPosition = document.body.scrollTop;
-    const windowHeight = window.innerHeight;
+    const currentPosition = $(document).scrollTop();
+    const scrollHeight = $(document).height();
 
+    const windowHeight = $(window).height();
     if (this.canScroll()) {
       if (currentPosition > 0 &&
-        (document.body.scrollHeight - currentPosition !== windowHeight)) {
+        (scrollHeight - currentPosition !== windowHeight)) {
       // User is in the middle of the log
 
         this.toggleDisableButton(this.$scrollTopBtn, false);
@@ -124,7 +125,7 @@ window.Build = (function () {
 
         this.toggleDisableButton(this.$scrollTopBtn, true);
         this.toggleDisableButton(this.$scrollBottomBtn, false);
-      } else if (document.body.scrollHeight - currentPosition === windowHeight) {
+      } else if (scrollHeight - currentPosition === windowHeight) {
         // User is at the bottom of the build log.
 
         this.toggleDisableButton(this.$scrollTopBtn, false);
@@ -137,7 +138,7 @@ window.Build = (function () {
   };
 
   Build.prototype.scrollDown = function () {
-    document.body.scrollTop = document.body.scrollHeight;
+    $(document).scrollTop($(document).height());
   };
 
   Build.prototype.scrollToBottom = function () {
@@ -147,7 +148,7 @@ window.Build = (function () {
   };
 
   Build.prototype.scrollToTop = function () {
-    document.body.scrollTop = 0;
+    $(document).scrollTop(0);
     this.hasBeenScrolled = true;
     this.toggleScroll();
   };
@@ -178,7 +179,7 @@ window.Build = (function () {
           this.state = log.state;
         }
 
-        this.windowSize = this.$buildTraceOutput.prop('scrollHeight');
+        this.windowSize = this.$buildTraceOutput.height();
 
         if (log.append) {
           this.$buildTraceOutput.append(log.html);
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 9d706b5ba59..a2664c0301e 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -8,6 +8,8 @@
 /* global LabelsSelect */
 /* global MilestoneSelect */
 /* global Commit */
+/* global CommitsList */
+/* global NewBranchForm */
 /* global NotificationsForm */
 /* global NotificationsDropdown */
 /* global GroupAvatar */
@@ -18,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 */
 
@@ -194,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(
@@ -217,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();
@@ -258,7 +268,7 @@ import GpgBadges from './gpg_badges';
         case 'projects:tags:new':
           new ZenMode();
           new gl.GLForm($('.tag-form'), true);
-          new RefSelectDropdown($('.js-branch-select'), window.gl.availableRefs);
+          new RefSelectDropdown($('.js-branch-select'));
           break;
         case 'projects:snippets:show':
           initNotes();
@@ -304,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();
@@ -330,6 +345,12 @@ 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;
         case 'projects:pipelines:builds':
         case 'projects:pipelines:failures':
         case 'projects:pipelines:show':
@@ -383,8 +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':
@@ -540,6 +572,7 @@ import GpgBadges from './gpg_badges';
               shortcut_handler = new ShortcutsWiki();
               new ZenMode();
               new gl.GLForm($('.wiki-form'), true);
+              new Sidebar();
               break;
             case 'snippets':
               shortcut_handler = new ShortcutsNavigation();
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 3babe273100..9475498e176 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -730,10 +730,10 @@ GitLabDropdown = (function() {
 
   GitLabDropdown.prototype.focusTextInput = function(triggerFocus = false) {
     if (this.options.filterable) {
-      $(':focus').blur();
-
       this.dropdown.one('transitionend', () => {
-        this.filterInput.focus();
+        if (this.dropdown.is('.open')) {
+          this.filterInput.focus();
+        }
       });
 
       if (triggerFocus) {
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/pipelines/pipelines_charts.js b/app/assets/javascripts/pipelines/pipelines_charts.js
new file mode 100644
index 00000000000..001faf4be33
--- /dev/null
+++ b/app/assets/javascripts/pipelines/pipelines_charts.js
@@ -0,0 +1,38 @@
+import Chart from 'vendor/Chart';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const chartData = JSON.parse(document.getElementById('pipelinesChartsData').innerHTML);
+  const buildChart = (chartScope) => {
+    const data = {
+      labels: chartScope.labels,
+      datasets: [{
+        fillColor: '#7f8fa4',
+        strokeColor: '#7f8fa4',
+        pointColor: '#7f8fa4',
+        pointStrokeColor: '#EEE',
+        data: chartScope.totalValues,
+      },
+      {
+        fillColor: '#44aa22',
+        strokeColor: '#44aa22',
+        pointColor: '#44aa22',
+        pointStrokeColor: '#fff',
+        data: chartScope.successValues,
+      },
+      ],
+    };
+    const ctx = $(`#${chartScope.scope}Chart`).get(0).getContext('2d');
+    const options = {
+      scaleOverlay: true,
+      responsive: true,
+      maintainAspectRatio: false,
+    };
+    if (window.innerWidth < 768) {
+      // Scale fonts if window width lower than 768px (iPad portrait)
+      options.scaleFontSize = 8;
+    }
+    new Chart(ctx).Line(data, options);
+  };
+
+  chartData.forEach(scope => buildChart(scope));
+});
diff --git a/app/assets/javascripts/pipelines/pipelines_times.js b/app/assets/javascripts/pipelines/pipelines_times.js
new file mode 100644
index 00000000000..b5e7a0e53d9
--- /dev/null
+++ b/app/assets/javascripts/pipelines/pipelines_times.js
@@ -0,0 +1,27 @@
+import Chart from 'vendor/Chart';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const chartData = JSON.parse(document.getElementById('pipelinesTimesChartsData').innerHTML);
+  const data = {
+    labels: chartData.labels,
+    datasets: [{
+      fillColor: 'rgba(220,220,220,0.5)',
+      strokeColor: 'rgba(220,220,220,1)',
+      barStrokeWidth: 1,
+      barValueSpacing: 1,
+      barDatasetSpacing: 1,
+      data: chartData.values,
+    }],
+  };
+  const ctx = $('#build_timesChart').get(0).getContext('2d');
+  const options = {
+    scaleOverlay: true,
+    responsive: true,
+    maintainAspectRatio: false,
+  };
+  if (window.innerWidth < 768) {
+    // Scale fonts if window width lower than 768px (iPad portrait)
+    options.scaleFontSize = 8;
+  }
+  new Chart(ctx).Bar(data, options);
+});
diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
new file mode 100644
index 00000000000..1dc1dbf356d
--- /dev/null
+++ b/app/assets/javascripts/projects/project_new.js
@@ -0,0 +1,85 @@
+let hasUserDefinedProjectPath = false;
+
+const deriveProjectPathFromUrl = ($projectImportUrl, $projectPath) => {
+  if ($projectImportUrl.attr('disabled') || hasUserDefinedProjectPath) {
+    return;
+  }
+
+  let importUrl = $projectImportUrl.val().trim();
+  if (importUrl.length === 0) {
+    return;
+  }
+
+  /*
+    \/?: remove trailing slash
+    (\.git\/?)?: remove trailing .git (with optional trailing slash)
+    (\?.*)?: remove query string
+    (#.*)?: remove fragment identifier
+  */
+  importUrl = importUrl.replace(/\/?(\.git\/?)?(\?.*)?(#.*)?$/, '');
+
+  // extract everything after the last slash
+  const pathMatch = /\/([^/]+)$/.exec(importUrl);
+  if (pathMatch) {
+    $projectPath.val(pathMatch[1]);
+  }
+};
+
+const bindEvents = () => {
+  const $newProjectForm = $('#new_project');
+  const importBtnTooltip = 'Please enter a valid project name.';
+  const $importBtnWrapper = $('.import_gitlab_project');
+  const $projectImportUrl = $('#project_import_url');
+  const $projectPath = $('#project_path');
+
+  if ($newProjectForm.length !== 1) {
+    return;
+  }
+
+  $('.how_to_import_link').on('click', (e) => {
+    e.preventDefault();
+    $('.how_to_import_link').next('.modal').show();
+  });
+
+  $('.modal-header .close').on('click', () => {
+    $('.modal').hide();
+  });
+
+  $('.btn_import_gitlab_project').on('click', () => {
+    const importHref = $('a.btn_import_gitlab_project').attr('href');
+    $('.btn_import_gitlab_project').attr('href', `${importHref}?namespace_id=${$('#project_namespace_id').val()}&path=${$projectPath.val()}`);
+  });
+
+  $('.btn_import_gitlab_project').attr('disabled', !$projectPath.val().trim().length);
+  $importBtnWrapper.attr('title', importBtnTooltip);
+
+  $newProjectForm.on('submit', () => {
+    $projectPath.val($projectPath.val().trim());
+  });
+
+  $projectPath.on('keyup', () => {
+    hasUserDefinedProjectPath = $projectPath.val().trim().length > 0;
+    if (hasUserDefinedProjectPath) {
+      $('.btn_import_gitlab_project').attr('disabled', false);
+      $importBtnWrapper.attr('title', '');
+      $importBtnWrapper.removeClass('has-tooltip');
+    } else {
+      $('.btn_import_gitlab_project').attr('disabled', true);
+      $importBtnWrapper.addClass('has-tooltip');
+    }
+  });
+
+  $projectImportUrl.disable();
+  $projectImportUrl.keyup(() => deriveProjectPathFromUrl($projectImportUrl, $projectPath));
+
+  $('.import_git').on('click', () => {
+    $projectImportUrl.attr('disabled', !$projectImportUrl.attr('disabled'));
+  });
+};
+
+document.addEventListener('DOMContentLoaded', bindEvents);
+
+export default {
+  bindEvents,
+  deriveProjectPathFromUrl,
+};
diff --git a/app/assets/javascripts/ref_select_dropdown.js b/app/assets/javascripts/ref_select_dropdown.js
index 215cd6fbdfd..65e4101352c 100644
--- a/app/assets/javascripts/ref_select_dropdown.js
+++ b/app/assets/javascripts/ref_select_dropdown.js
@@ -1,7 +1,8 @@
 class RefSelectDropdown {
   constructor($dropdownButton, availableRefs) {
+    const availableRefsValue = availableRefs || JSON.parse(document.getElementById('availableRefs').innerHTML);
     $dropdownButton.glDropdown({
-      data: availableRefs,
+      data: availableRefsValue,
       filterable: true,
       filterByText: true,
       remote: false,
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),
+  });
+});