Add latest changes from gitlab-org/gitlab@master

app/assets/javascripts/pages/projects/graphs/show/stat_graph_contributors_util.js

-/* eslint-disable func-names, object-shorthand, no-var, one-var, camelcase, no-param-reassign, no-return-assign, prefer-arrow-callback, consistent-return, no-cond-assign, no-else-return */
+/* eslint-disable func-names, no-var, one-var, camelcase, no-param-reassign, no-return-assign, prefer-arrow-callback, consistent-return, no-cond-assign, no-else-return */
 import _ from 'underscore';
 export default {
-  parse_log: function(log) {
+  parse_log(log) {
     var by_author, by_email, data, entry, i, len, total, normalized_email;
     total = {};
     by_author = {};
@@ -25,15 +25,15 @@ export default {
     total = _.toArray(total);
     by_author = _.toArray(by_author);
     return {
-      total: total,
-      by_author: by_author,
+      total,
+      by_author,
     };
   },
-  add_date: function(date, collection) {
+  add_date(date, collection) {
     collection[date] = {};
     return (collection[date].date = date);
   },
-  add_author: function(author, by_author, by_email) {
+  add_author(author, by_author, by_email) {
     var data, normalized_email;
     data = {};
     data.author_name = author.author_name;
@@ -43,36 +43,36 @@ export default {
     by_email[normalized_email] = data;
     return data;
   },
-  store_data: function(entry, total, by_author) {
+  store_data(entry, total, by_author) {
     this.store_commits(total, by_author);
     this.store_additions(entry, total, by_author);
     return this.store_deletions(entry, total, by_author);
   },
-  store_commits: function(total, by_author) {
+  store_commits(total, by_author) {
     this.add(total, 'commits', 1);
     return this.add(by_author, 'commits', 1);
   },
-  add: function(collection, field, value) {
+  add(collection, field, value) {
     if (collection[field] == null) {
       collection[field] = 0;
     }
     return (collection[field] += value);
   },
-  store_additions: function(entry, total, by_author) {
+  store_additions(entry, total, by_author) {
     if (entry.additions == null) {
       entry.additions = 0;
     }
     this.add(total, 'additions', entry.additions);
     return this.add(by_author, 'additions', entry.additions);
   },
-  store_deletions: function(entry, total, by_author) {
+  store_deletions(entry, total, by_author) {
     if (entry.deletions == null) {
       entry.deletions = 0;
     }
     this.add(total, 'deletions', entry.deletions);
     return this.add(by_author, 'deletions', entry.deletions);
   },
-  get_total_data: function(parsed_log, field) {
+  get_total_data(parsed_log, field) {
     var log, total_data;
     log = parsed_log.total;
     total_data = this.pick_field(log, field);
@@ -80,7 +80,7 @@ export default {
       return d.date;
     });
   },
-  pick_field: function(log, field) {
+  pick_field(log, field) {
     var total_data;
     total_data = [];
     _.each(log, function(d) {
@@ -88,7 +88,7 @@ export default {
     });
     return total_data;
   },
-  get_author_data: function(parsed_log, field, date_range) {
+  get_author_data(parsed_log, field, date_range) {
     var author_data, log;
     if (date_range == null) {
       date_range = null;
@@ -111,7 +111,7 @@ export default {
       return d[field];
     }).reverse();
   },
-  parse_log_entry: function(log_entry, field, date_range) {
+  parse_log_entry(log_entry, field, date_range) {
     var parsed_entry;
     parsed_entry = {};
@@ -138,7 +138,7 @@ export default {
     );
     return parsed_entry;
   },
-  in_range: function(date, date_range) {
+  in_range(date, date_range) {
     var ref;
     if (date_range === null || (date_range[0] <= (ref = new Date(date)) && ref <= date_range[1])) {
       return true;

app/assets/javascripts/pages/projects/project.js

-/* eslint-disable func-names, no-var, no-return-assign, object-shorthand, vars-on-top */
+/* eslint-disable func-names, no-var, no-return-assign, vars-on-top */
 import $ from 'jquery';
 import Cookies from 'js-cookie';
@@ -123,7 +123,7 @@ export default class Project {
         filterByText: true,
         inputFieldName: $dropdown.data('inputFieldName'),
         fieldName,
-        renderRow: function(ref) {
+        renderRow(ref) {
           var li = refListItem.cloneNode(false);
           if (ref.header != null) {
@@ -144,13 +144,13 @@ export default class Project {
           return li;
         },
-        id: function(obj, $el) {
+        id(obj, $el) {
           return $el.attr('data-ref');
         },
-        toggleLabel: function(obj, $el) {
+        toggleLabel(obj, $el) {
           return $el.text().trim();
         },
-        clicked: function(options) {
+        clicked(options) {
           const { e } = options;
           e.preventDefault();
           if ($(`input[name="${fieldName}"]`).length) {

app/assets/javascripts/pipelines/components/graph/graph_component.vue

@@ -2,35 +2,43 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import StageColumnComponent from './stage_column_component.vue';
 import GraphMixin from '../../mixins/graph_component_mixin';
+import GraphWidthMixin from '~/pipelines/mixins/graph_width_mixin';
 export default {
   components: {
     StageColumnComponent,
     GlLoadingIcon,
   },
-  mixins: [GraphMixin],
+  mixins: [GraphMixin, GraphWidthMixin],
 };
 </script>
 <template>
   <div class="build-content middle-block js-pipeline-graph">
     <div class="pipeline-visualization pipeline-graph pipeline-tab-content">
-      <div v-if="isLoading" class="m-auto"><gl-loading-icon :size="3" /></div>
-      <ul v-if="!isLoading" class="stage-column-list">
-        <stage-column-component
-          v-for="(stage, index) in graph"
-          :key="stage.name"
-          :class="{
-            'append-right-48': shouldAddRightMargin(index),
-          }"
-          :title="capitalizeStageName(stage.name)"
-          :groups="stage.groups"
-          :stage-connector-class="stageConnectorClass(index, stage)"
-          :is-first-column="isFirstColumn(index)"
-          :action="stage.status.action"
-          @refreshPipelineGraph="refreshPipelineGraph"
-        />
-      </ul>
+      <div
+        :style="{
+          paddingLeft: `${graphLeftPadding}px`,
+          paddingRight: `${graphRightPadding}px`,
+        }"
+      >
+        <gl-loading-icon v-if="isLoading" class="m-auto" :size="3" />
+        <ul v-if="!isLoading" class="stage-column-list">
+          <stage-column-component
+            v-for="(stage, index) in graph"
+            :key="stage.name"
+            :class="{
+              'append-right-48': shouldAddRightMargin(index),
+            }"
+            :title="capitalizeStageName(stage.name)"
+            :groups="stage.groups"
+            :stage-connector-class="stageConnectorClass(index, stage)"
+            :is-first-column="isFirstColumn(index)"
+            :action="stage.status.action"
+            @refreshPipelineGraph="refreshPipelineGraph"
+          />
+        </ul>
+      </div>
     </div>
   </div>
 </template>

app/assets/javascripts/pipelines/components/pipelines_actions.vue

@@ -37,7 +37,7 @@ export default {
           ),
           { jobName: action.name },
         );
-        // https://gitlab.com/gitlab-org/gitlab-ce/issues/52156
+        // https://gitlab.com/gitlab-org/gitlab-foss/issues/52156
         // eslint-disable-next-line no-alert
         if (!window.confirm(confirmationMessage)) {
           return;

app/assets/javascripts/pipelines/constants.js

 export const CANCEL_REQUEST = 'CANCEL_REQUEST';
 export const PIPELINES_TABLE = 'PIPELINES_TABLE';
+export const LAYOUT_CHANGE_DELAY = 300;

app/assets/javascripts/pipelines/mixins/graph_width_mixin.js

+import { debounceByAnimationFrame } from '~/lib/utils/common_utils';
+import { LAYOUT_CHANGE_DELAY } from '~/pipelines/constants';
+
+export default {
+  debouncedResize: null,
+  sidebarMutationObserver: null,
+  data() {
+    return {
+      graphLeftPadding: 0,
+      graphRightPadding: 0,
+    };
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.$options.debouncedResize);
+
+    if (this.$options.sidebarMutationObserver) {
+      this.$options.sidebarMutationObserver.disconnect();
+    }
+  },
+  created() {
+    this.$options.debouncedResize = debounceByAnimationFrame(this.setGraphPadding);
+    window.addEventListener('resize', this.$options.debouncedResize);
+  },
+  mounted() {
+    this.setGraphPadding();
+
+    this.$options.sidebarMutationObserver = new MutationObserver(this.handleLayoutChange);
+    this.$options.sidebarMutationObserver.observe(document.querySelector('.layout-page'), {
+      attributes: true,
+      childList: false,
+      subtree: false,
+    });
+  },
+  methods: {
+    setGraphPadding() {
+      // only add padding to main graph (not inline upstream/downstream graphs)
+      if (this.type && this.type !== 'main') return;
+
+      const container = document.querySelector('.js-pipeline-container');
+      if (!container) return;
+
+      this.graphLeftPadding = container.offsetLeft;
+      this.graphRightPadding = window.innerWidth - container.offsetLeft - container.offsetWidth;
+    },
+    handleLayoutChange() {
+      // wait until animations finish, then recalculate padding
+      window.setTimeout(this.setGraphPadding, LAYOUT_CHANGE_DELAY);
+    },
+  },
+};

app/assets/javascripts/privacy_policy_update_callout.js

 import PersistentUserCallout from '~/persistent_user_callout';
 function initPrivacyPolicyUpdateCallout() {
-  const callout = document.querySelector('.privacy-policy-update-64341');
+  const callout = document.querySelector('.js-privacy-policy-update');
   PersistentUserCallout.factory(callout);
 }

app/assets/javascripts/profile/gl_crop.js

-/* eslint-disable no-useless-escape, no-var, no-underscore-dangle, func-names, no-return-assign, object-shorthand, one-var, consistent-return, class-methods-use-this */
+/* eslint-disable no-useless-escape, no-var, no-underscore-dangle, func-names, no-return-assign, one-var, consistent-return, class-methods-use-this */
 import $ from 'jquery';
 import 'cropper';
@@ -100,7 +100,7 @@ import _ from 'underscore';
         cropBoxMovable: false,
         cropBoxResizable: false,
         toggleDragModeOnDblclick: false,
-        built: function() {
+        built() {
           const $image = $(this);
           const container = $image.cropper('getContainerData');
           const { cropBoxWidth, cropBoxHeight } = _this;

app/assets/javascripts/project_select.js

-/* eslint-disable func-names, no-var, object-shorthand, one-var, no-else-return */
+/* eslint-disable func-names, no-var, one-var, no-else-return */
 import $ from 'jquery';
 import Api from './api';
@@ -28,7 +28,7 @@ export default function projectSelect() {
         }
         $(select).select2({
-          placeholder: placeholder,
+          placeholder,
           minimumInputLength: 0,
           query: (function(_this) {
             return function(query) {
@@ -79,18 +79,18 @@ export default function projectSelect() {
               }
             };
           })(this),
-          id: function(project) {
+          id(project) {
             if (simpleFilter) return project.id;
             return JSON.stringify({
               name: project.name,
               url: project.web_url,
             });
           },
-          text: function(project) {
+          text(project) {
             return project.name_with_namespace || project.name;
           },
-          initSelection: function(el, callback) {
+          initSelection(el, callback) {
             return Api.project(el.val()).then(({ data }) => callback(data));
           },

app/assets/javascripts/search_autocomplete.js

-/* eslint-disable no-return-assign, one-var, no-var, consistent-return, object-shorthand, prefer-template, class-methods-use-this, no-lonely-if, vars-on-top */
+/* eslint-disable no-return-assign, one-var, no-var, consistent-return, prefer-template, class-methods-use-this, no-lonely-if, vars-on-top */
 import $ from 'jquery';
 import { escape, throttle } from 'underscore';
@@ -171,7 +171,7 @@ export class SearchAutocomplete {
         params: {
           project_id: this.projectId,
           project_ref: this.projectRef,
-          term: term,
+          term,
         },
       })
       .then(response => {

app/assets/javascripts/single_file_diff.js

@@ -5,7 +5,7 @@ import { __ } from './locale';
 import axios from './lib/utils/axios_utils';
 import createFlash from './flash';
 import FilesCommentButton from './files_comment_button';
-import imageDiffHelper from './image_diff/helpers/index';
+import initImageDiffHelper from './image_diff/helpers/init_image_diff';
 import syntaxHighlight from './syntax_highlight';
 const WRAPPER = '<div class="diff-content"></div>';
@@ -101,7 +101,7 @@ export default class SingleFileDiff {
         FilesCommentButton.init($file);
         const canCreateNote = $file.closest('.files').is('[data-can-create-note]');
-        imageDiffHelper.initImageDiff($file[0], canCreateNote);
+        initImageDiffHelper.initImageDiff($file[0], canCreateNote);
         if (cb) cb();
       })

app/assets/javascripts/tracking.js

@@ -10,12 +10,8 @@ const DEFAULT_SNOWPLOW_OPTIONS = {
   forceSecureTracker: true,
   eventMethod: 'post',
   contexts: { webPage: true },
-  // Page tracking tracks a single event when the page loads.
-  pageTrackingEnabled: false,
-  // Activity tracking tracks when a user is still interacting with the page.
-  // Events like scrolling and mouse movements are used to determine if the
-  // user has the tab active and is still actively engaging.
-  activityTrackingEnabled: false,
+  formTracking: false,
+  linkClickTracking: false,
 };
 const extractData = (el, opts = {}) => {
@@ -96,6 +92,9 @@ export function initUserTracking() {
   const opts = Object.assign({}, DEFAULT_SNOWPLOW_OPTIONS, window.snowplowOptions);
   window.snowplow('newTracker', opts.namespace, opts.hostname, opts);
-  if (opts.activityTrackingEnabled) window.snowplow('enableActivityTracking', 30, 30);
-  if (opts.pageTrackingEnabled) window.snowplow('trackPageView'); // must be after enableActivityTracking
+  window.snowplow('enableActivityTracking', 30, 30);
+  window.snowplow('trackPageView'); // must be after enableActivityTracking
+
+  if (opts.formTracking) window.snowplow('enableFormTracking');
+  if (opts.linkClickTracking) window.snowplow('enableLinkClickTracking');
 }

app/assets/javascripts/users_select.js

-/* eslint-disable func-names, one-var, no-var, prefer-rest-params, vars-on-top, prefer-arrow-callback, consistent-return, object-shorthand, no-shadow, no-else-return, no-self-compare, prefer-template, no-unused-expressions, yoda, prefer-spread, camelcase, no-param-reassign */
+/* eslint-disable func-names, one-var, no-var, prefer-rest-params, vars-on-top, prefer-arrow-callback, consistent-return, no-shadow, no-else-return, no-self-compare, prefer-template, no-unused-expressions, yoda, prefer-spread, camelcase, no-param-reassign */
 /* global Issuable */
 /* global emitSidebarEvent */
@@ -248,8 +248,8 @@ function UsersSelect(currentUser, els, options = {}) {
           })}</span> <% } %>`,
         );
         return $dropdown.glDropdown({
-          showMenuAbove: showMenuAbove,
-          data: function(term, callback) {
+          showMenuAbove,
+          data(term, callback) {
             return _this.users(
               term,
               options,
@@ -261,7 +261,7 @@ function UsersSelect(currentUser, els, options = {}) {
               }.bind(this),
             );
           },
-          processData: function(term, data, callback) {
+          processData(term, data, callback) {
             let users = data;
             // Only show assigned user list when there is no search term
@@ -326,7 +326,7 @@ function UsersSelect(currentUser, els, options = {}) {
                 }
                 anyUser = {
                   beforeDivider: true,
-                  name: name,
+                  name,
                   id: null,
                 };
                 users.unshift(anyUser);
@@ -376,7 +376,7 @@ function UsersSelect(currentUser, els, options = {}) {
           },
           selectable: true,
           fieldName: $dropdown.data('fieldName'),
-          toggleLabel: function(selected, el, glDropdown) {
+          toggleLabel(selected, el, glDropdown) {
             const inputValue = glDropdown.filterInput.val();
             if (this.multiSelect && inputValue === '') {
@@ -404,8 +404,8 @@ function UsersSelect(currentUser, els, options = {}) {
               return defaultLabel;
             }
           },
-          defaultLabel: defaultLabel,
-          hidden: function() {
+          defaultLabel,
+          hidden() {
             if ($dropdown.hasClass('js-multiselect')) {
               emitSidebarEvent('sidebar.saveAssignees');
             }
@@ -422,7 +422,7 @@ function UsersSelect(currentUser, els, options = {}) {
           },
           multiSelect: $dropdown.hasClass('js-multiselect'),
           inputMeta: $dropdown.data('inputMeta'),
-          clicked: function(options) {
+          clicked(options) {
             const { $el, e, isMarking } = options;
             const user = options.selectedObj;
@@ -522,10 +522,10 @@ function UsersSelect(currentUser, els, options = {}) {
               $dropdown.dropdown('toggle');
             }
           },
-          id: function(user) {
+          id(user) {
             return user.id;
           },
-          opened: function(e) {
+          opened(e) {
             const $el = $(e.currentTarget);
             const selected = getSelected();
             if ($dropdown.hasClass('js-issue-board-sidebar') && selected.length === 0) {
@@ -546,7 +546,7 @@ function UsersSelect(currentUser, els, options = {}) {
             }
           },
           updateLabel: $dropdown.data('dropdownTitle'),
-          renderRow: function(user) {
+          renderRow(user) {
             var avatar, img, username;
             username = user.username ? '@' + user.username : '';
             avatar = user.avatar_url ? user.avatar_url : gon.default_avatar_url;
@@ -605,7 +605,7 @@ function UsersSelect(currentUser, els, options = {}) {
               placeholder: __('Search for a user'),
               multiple: $(select).hasClass('multiselect'),
               minimumInputLength: 0,
-              query: function(query) {
+              query(query) {
                 return _this.users(query.term, options, function(users) {
                   var anyUser, data, emailUser, index, len, name, nullUser, obj, ref;
                   data = {
@@ -638,7 +638,7 @@ function UsersSelect(currentUser, els, options = {}) {
                         name = s__('UsersSelect|Any User');
                       }
                       anyUser = {
-                        name: name,
+                        name,
                         id: null,
                       };
                       data.results.unshift(anyUser);
@@ -661,24 +661,24 @@ function UsersSelect(currentUser, els, options = {}) {
                   return query.callback(data);
                 });
               },
-              initSelection: function() {
+              initSelection() {
                 var args;
                 args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
                 return _this.initSelection.apply(_this, args);
               },
-              formatResult: function() {
+              formatResult() {
                 var args;
                 args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
                 return _this.formatResult.apply(_this, args);
               },
-              formatSelection: function() {
+              formatSelection() {
                 var args;
                 args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
                 return _this.formatSelection.apply(_this, args);
               },
               dropdownCssClass: 'ajax-users-dropdown',
               // we do not want to escape markup since we are displaying html in results
-              escapeMarkup: function(m) {
+              escapeMarkup(m) {
                 return m;
               },
             });

app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue

@@ -88,7 +88,8 @@ export default {
     mergeButtonText() {
       if (this.isMergingImmediately) {
         return __('Merge in progress');
-      } else if (this.isAutoMergeAvailable) {
+      }
+      if (this.isAutoMergeAvailable) {
         return this.autoMergeText;
       }
@@ -306,7 +307,7 @@ export default {
             </template>
             <template v-else>
               <span class="bold js-resolve-mr-widget-items-message">
-                {{ __('You can only merge once the items above are resolved') }}
+                {{ mergeDisabledText }}
               </span>
             </template>
           </div>

app/assets/javascripts/vue_merge_request_widget/mixins/ready_to_merge.js

 import { __ } from '~/locale';
+export const MERGE_DISABLED_TEXT = __('You can only merge once the items above are resolved.');
+
 export default {
   computed: {
     isMergeButtonDisabled() {
@@ -11,6 +13,9 @@ export default {
           this.mr.preventMerge,
       );
     },
+    mergeDisabledText() {
+      return MERGE_DISABLED_TEXT;
+    },
     autoMergeText() {
       // MWPS is currently the only auto merge strategy available in CE
       return __('Merge when pipeline succeeds');

app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js

@@ -37,7 +37,7 @@ export default class MRWidgetService {
     // two endpoints are requested in order to get MR info:
     // one which is etag-cached and invalidated and another one which is not cached
     // the idea is to move all the fields to etag-cached endpoint and then perform only one request
-    // https://gitlab.com/gitlab-org/gitlab-ce/issues/61559#note_188801390
+    // https://gitlab.com/gitlab-org/gitlab-foss/issues/61559#note_188801390
     const getData = axios.get(this.endpoints.mergeRequestWidgetPath);
     const getCachedData = axios.get(this.endpoints.mergeRequestCachedWidgetPath);

app/assets/javascripts/vue_shared/components/ci_badge_link.vue

@@ -7,7 +7,7 @@ import CiIcon from './ci_icon.vue';
  *
  * Receives status object containing:
  * status: {
- *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+ *   details_path: "/gitlab-org/gitlab-foss/pipelines/8150156" // url
  *   group:"running" // used for CSS class
  *   icon: "icon_status_running" // used to render the icon
  *   label:"running" // used for potential tooltip

app/assets/javascripts/vue_shared/components/ci_icon.vue

@@ -6,7 +6,7 @@ import Icon from '../../vue_shared/components/icon.vue';
  *
  * Receives status object containing:
  * status: {
- *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+ *   details_path: "/gitlab-org/gitlab-foss/pipelines/8150156" // url
  *   group:"running" // used for CSS class
  *   icon: "icon_status_running" // used to render the icon
  *   label:"running" // used for potential tooltip

app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue

 <script>
 import _ from 'underscore';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
 import ProjectListItem from './project_list_item.vue';
 const SEARCH_INPUT_TIMEOUT_MS = 500;
@@ -9,6 +9,7 @@ export default {
   name: 'ProjectSelector',
   components: {
     GlLoadingIcon,
+    GlSearchBoxByType,
     ProjectListItem,
   },
   props: {
@@ -53,9 +54,6 @@ export default {
     isSelected(project) {
       return Boolean(_.findWhere(this.selectedProjects, { id: project.id }));
     },
-    focusSearchInput() {
-      this.$refs.searchInput.focus();
-    },
     onInput: _.debounce(function debouncedOnInput() {
       this.$emit('searched', this.searchQuery);
     }, SEARCH_INPUT_TIMEOUT_MS),
@@ -64,12 +62,11 @@ export default {
 </script>
 <template>
   <div>
-    <input
-      ref="searchInput"
+    <gl-search-box-by-type
       v-model="searchQuery"
       :placeholder="__('Search your projects')"
       type="search"
-      class="form-control mb-3 js-project-selector-input"
+      class="mb-3"
       autofocus
       @input="onInput"
     />

app/assets/stylesheets/bootstrap_migration.scss

@@ -342,7 +342,7 @@ input[type=color].form-control {
 /*
  Bootstrap 4.1.2 introduced a new default vertical alignment which breaks our icons,
  so we need to reset the vertical alignment to the default value. See:
- - https://gitlab.com/gitlab-org/gitlab-ce/issues/51362
+ - https://gitlab.com/gitlab-org/gitlab-foss/issues/51362
  */
 svg {
   vertical-align: baseline;