Merge branch 'master' into 43404-pipelines-commit

* master: (124 commits)
  Double-check next value for internal ids.
  Resolve "skeleton placeholder on diff has white background"
  Replace the `project/commits/comments.feature` spinach test with an rspec analog
  Set ENV['IN_MEMORY_APPLICATION_SETTINGS'] to 'true in spec/db/production/settings_spec.rb
  Update docs on `.gitlab-ci.yml` and variables policy
  Add note about support of variables policy to docs
  Revert and fix
  corrected git cheat sheet url
  Bump parser gem to 2.5.1.0 to remove warning in rspec
  Update invalid test application_settings_controller_spec.rb
  Use stable docker image instead of latest
  Handle cancelled request
  Stop polling and fetch the table
  [ci skip] Updates table when stage is clicked
  Backport GitLab domain helper methods
  use jquery object in togglePopover
  Fix other listeners
  Fix the metrics link being not rendering the html
  Fix feature_highlight listener
  Update custom issue tracker docs
  ...

.gitlab-ci.yml

@@ -721,7 +721,7 @@ codequality:
   tags: []
   before_script: []
   services:
-    - docker:dind
+    - docker:stable-dind
   variables:
     SETUP_DB: "false"
     DOCKER_DRIVER: overlay2

Gemfile.lock

@@ -590,7 +590,7 @@ GEM
     orm_adapter (0.5.0)
     os (0.9.6)
     parallel (1.12.1)
-    parser (2.5.0.5)
+    parser (2.5.1.0)
       ast (~> 2.4.0)
     parslet (1.5.0)
       blankslate (~> 2.0)

app/assets/javascripts/feature_highlight/feature_highlight.js

 import $ from 'jquery';
-import _ from 'underscore';
 import {
   getSelector,
-  togglePopover,
   inserted,
-  mouseenter,
-  mouseleave,
 } from './feature_highlight_helper';
+import {
+  togglePopover,
+  mouseenter,
+  debouncedMouseleave,
+} from '../shared/popover';
 export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
   const $selector = $(getSelector(id));
   const $parent = $selector.parent();
   const $popoverContent = $parent.siblings('.feature-highlight-popover-content');
   const hideOnScroll = togglePopover.bind($selector, false);
-  const debouncedMouseleave = _.debounce(mouseleave, debounceTimeout);
   $selector
     // Setup popover
@@ -29,13 +29,10 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
       `,
     })
     .on('mouseenter', mouseenter)
-    .on('mouseleave', debouncedMouseleave)
+    .on('mouseleave', debouncedMouseleave(debounceTimeout))
     .on('inserted.bs.popover', inserted)
     .on('show.bs.popover', () => {
-      window.addEventListener('scroll', hideOnScroll);
-    })
-    .on('hide.bs.popover', () => {
-      window.removeEventListener('scroll', hideOnScroll);
+      window.addEventListener('scroll', hideOnScroll, { once: true });
     })
     // Display feature highlight
     .removeAttr('disabled');

app/assets/javascripts/feature_highlight/feature_highlight_helper.js

@@ -3,20 +3,10 @@ import axios from '../lib/utils/axios_utils';
 import { __ } from '../locale';
 import Flash from '../flash';
 import LazyLoader from '../lazy_loader';
+import { togglePopover } from '../shared/popover';
 export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`;
-export function togglePopover(show) {
-  const isAlreadyShown = this.hasClass('js-popover-show');
-  if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) {
-    return false;
-  }
-  this.popover(show ? 'show' : 'hide');
-  this.toggleClass('disable-animation js-popover-show', show);
-
-  return true;
-}
-
 export function dismiss(highlightId) {
   axios.post(this.attr('data-dismiss-endpoint'), {
     feature_name: highlightId,
@@ -27,23 +17,6 @@ export function dismiss(highlightId) {
   this.hide();
 }
-export function mouseleave() {
-  if (!$('.popover:hover').length > 0) {
-    const $featureHighlight = $(this);
-    togglePopover.call($featureHighlight, false);
-  }
-}
-
-export function mouseenter() {
-  const $featureHighlight = $(this);
-
-  const showedPopover = togglePopover.call($featureHighlight, true);
-  if (showedPopover) {
-    $('.popover')
-      .on('mouseleave', mouseleave.bind($featureHighlight));
-  }
-}
-
 export function inserted() {
   const popoverId = this.getAttribute('aria-describedby');
   const highlightId = this.dataset.highlight;

app/assets/javascripts/milestone.js

 import $ from 'jquery';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
+import { mouseenter, debouncedMouseleave, togglePopover } from './shared/popover';
 export default class Milestone {
   constructor() {
@@ -43,4 +44,25 @@ export default class Milestone {
         .catch(() => flash('Error loading milestone tab'));
     }
   }
+
+  static initDeprecationMessage() {
+    const deprecationMesssageContainer = document.querySelector('.js-milestone-deprecation-message');
+
+    if (!deprecationMesssageContainer) return;
+
+    const deprecationMessage = deprecationMesssageContainer.querySelector('.js-milestone-deprecation-message-template').innerHTML;
+    const $popover = $('.js-popover-link', deprecationMesssageContainer);
+    const hideOnScroll = togglePopover.bind($popover, false);
+
+    $popover.popover({
+      content: deprecationMessage,
+      html: true,
+      placement: 'bottom',
+    })
+    .on('mouseenter', mouseenter)
+    .on('mouseleave', debouncedMouseleave())
+    .on('show.bs.popover', () => {
+      window.addEventListener('scroll', hideOnScroll, { once: true });
+    });
+  }
 }

app/assets/javascripts/pages/dashboard/milestones/show/index.js

@@ -6,4 +6,6 @@ document.addEventListener('DOMContentLoaded', () => {
   new Milestone(); // eslint-disable-line no-new
   new Sidebar(); // eslint-disable-line no-new
   new MountMilestoneSidebar(); // eslint-disable-line no-new
+
+  Milestone.initDeprecationMessage();
 });

app/assets/javascripts/pages/groups/milestones/show/index.js

 import initMilestonesShow from '~/pages/milestones/shared/init_milestones_show';
-document.addEventListener('DOMContentLoaded', initMilestonesShow);
+import Milestone from '~/milestone';
+document.addEventListener('DOMContentLoaded', () => {
+  initMilestonesShow();
+
+  Milestone.initDeprecationMessage();
+});

app/assets/javascripts/pages/projects/snippets/show/index.js

 import initNotes from '~/init_notes';
 import ZenMode from '~/zen_mode';
-import LineHighlighter from '../../../../line_highlighter';
-import BlobViewer from '../../../../blob/viewer';
+import LineHighlighter from '~/line_highlighter';
+import BlobViewer from '~/blob/viewer';
+import snippetEmbed from '~/snippet/snippet_embed';
 document.addEventListener('DOMContentLoaded', () => {
   new LineHighlighter(); // eslint-disable-line no-new
   new BlobViewer(); // eslint-disable-line no-new
   initNotes();
   new ZenMode(); // eslint-disable-line no-new
+  snippetEmbed();
 });

app/assets/javascripts/pages/snippets/show/index.js

-import LineHighlighter from '../../../line_highlighter';
-import BlobViewer from '../../../blob/viewer';
-import ZenMode from '../../../zen_mode';
-import initNotes from '../../../init_notes';
+import LineHighlighter from '~/line_highlighter';
+import BlobViewer from '~/blob/viewer';
+import ZenMode from '~/zen_mode';
+import initNotes from '~/init_notes';
+import snippetEmbed from '~/snippet/snippet_embed';
 document.addEventListener('DOMContentLoaded', () => {
   new LineHighlighter(); // eslint-disable-line no-new
   new BlobViewer(); // eslint-disable-line no-new
   initNotes();
   new ZenMode(); // eslint-disable-line no-new
+  snippetEmbed();
 });

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

 <script>
-  import $ from 'jquery';
   /**
    * Renders each stage of the pipeline mini graph.
@@ -13,8 +12,11 @@
    * 3. Merge request widget
    * 4. Commit widget
    */
-  import axios from '../../lib/utils/axios_utils';
+
+  import $ from 'jquery';
   import Flash from '../../flash';
+  import axios from '../../lib/utils/axios_utils';
+  import eventHub from '../event_hub';
   import Icon from '../../vue_shared/components/icon.vue';
   import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
@@ -82,6 +84,7 @@
     methods: {
       onClickStage() {
         if (!this.isDropdownOpen()) {
+          eventHub.$emit('clickedDropdown');
           this.isLoading = true;
           this.fetchJobs();
         }

app/assets/javascripts/pipelines/constants.js

+// eslint-disable-next-line import/prefer-default-export
+export const CANCEL_REQUEST = 'CANCEL_REQUEST';

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

@@ -7,6 +7,7 @@ import SvgBlankState from '../components/blank_state.vue';
 import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
 import PipelinesTableComponent from '../components/pipelines_table.vue';
 import eventHub from '../event_hub';
+import { CANCEL_REQUEST } from '../constants';
 export default {
   components: {
@@ -52,34 +53,58 @@ export default {
     });
     eventHub.$on('postAction', this.postAction);
+    eventHub.$on('clickedDropdown', this.updateTable);
   },
   beforeDestroy() {
     eventHub.$off('postAction', this.postAction);
+    eventHub.$off('clickedDropdown', this.updateTable);
   },
   destroyed() {
     this.poll.stop();
   },
   methods: {
+    updateTable() {
+      // Cancel ongoing request
+      if (this.isMakingRequest) {
+        this.service.cancelationSource.cancel(CANCEL_REQUEST);
+      }
+      // Stop polling
+      this.poll.stop();
+      // Update the table
+      return this.getPipelines()
+        .then(() => this.poll.restart());
+    },
     fetchPipelines() {
       if (!this.isMakingRequest) {
         this.isLoading = true;
-        this.service.getPipelines(this.requestData)
-          .then(response => this.successCallback(response))
-          .catch(() => this.errorCallback());
+        this.getPipelines();
       }
     },
+    getPipelines() {
+      return this.service.getPipelines(this.requestData)
+        .then(response => this.successCallback(response))
+        .catch((error) => this.errorCallback(error));
+    },
     setCommonData(pipelines) {
       this.store.storePipelines(pipelines);
       this.isLoading = false;
       this.updateGraphDropdown = true;
       this.hasMadeRequest = true;
+
+      // In case the previous polling request returned an error, we need to reset it
+      if (this.hasError) {
+        this.hasError = false;
+      }
     },
-    errorCallback() {
-      this.hasError = true;
-      this.isLoading = false;
-      this.updateGraphDropdown = false;
+    errorCallback(error) {
       this.hasMadeRequest = true;
+      this.isLoading = false;
+
+      if (error && error.message && error.message !== CANCEL_REQUEST) {
+        this.hasError = true;
+        this.updateGraphDropdown = false;
+      }
     },
     setIsMakingRequest(isMakingRequest) {
       this.isMakingRequest = isMakingRequest;

app/assets/javascripts/pipelines/services/pipelines_service.js

@@ -19,8 +19,13 @@ export default class PipelinesService {
   getPipelines(data = {}) {
     const { scope, page } = data;
+    const CancelToken = axios.CancelToken;
+
+    this.cancelationSource = CancelToken.source();
+
     return axios.get(this.endpoint, {
       params: { scope, page },
+      cancelToken: this.cancelationSource.token,
     });
   }

app/assets/javascripts/shared/popover.js

+import $ from 'jquery';
+import _ from 'underscore';
+
+export function togglePopover(show) {
+  const isAlreadyShown = this.hasClass('js-popover-show');
+  if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) {
+    return false;
+  }
+  this.popover(show ? 'show' : 'hide');
+  this.toggleClass('disable-animation js-popover-show', show);
+
+  return true;
+}
+
+export function mouseleave() {
+  if (!$('.popover:hover').length > 0) {
+    const $popover = $(this);
+    togglePopover.call($popover, false);
+  }
+}
+
+export function mouseenter() {
+  const $popover = $(this);
+
+  const showedPopover = togglePopover.call($popover, true);
+  if (showedPopover) {
+    $('.popover').on('mouseleave', mouseleave.bind($popover));
+  }
+}
+
+export function debouncedMouseleave(debounceTimeout = 300) {
+  return _.debounce(mouseleave, debounceTimeout);
+}

app/assets/javascripts/shortcuts_dashboard_navigation.js

+import { visitUrl } from './lib/utils/url_utility';
+
 /**
  * Helper function that finds the href of the fiven selector and updates the location.
  *
  * @param  {String} selector
  */
-export default (selector) => {
-  const link = document.querySelector(selector).getAttribute('href');
+export default function findAndFollowLink(selector) {
+  const element = document.querySelector(selector);
+  const link = element && element.getAttribute('href');
   if (link) {
-    window.location = link;
+    visitUrl(link);
   }
-};
+}

app/assets/javascripts/snippet/snippet_embed.js

+export default () => {
+  const { protocol, host, pathname } = location;
+  const shareBtn = document.querySelector('.js-share-btn');
+  const embedBtn = document.querySelector('.js-embed-btn');
+  const snippetUrlArea = document.querySelector('.js-snippet-url-area');
+  const embedAction = document.querySelector('.js-embed-action');
+  const url = `${protocol}//${host + pathname}`;
+
+  shareBtn.addEventListener('click', () => {
+    shareBtn.classList.add('is-active');
+    embedBtn.classList.remove('is-active');
+    snippetUrlArea.value = url;
+    embedAction.innerText = 'Share';
+  });
+
+  embedBtn.addEventListener('click', () => {
+    embedBtn.classList.add('is-active');
+    shareBtn.classList.remove('is-active');
+    const scriptTag = `<script src="${url}.js"></script>`;
+    snippetUrlArea.value = scriptTag;
+    embedAction.innerText = 'Embed';
+  });
+};

app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue

@@ -146,8 +146,8 @@ export default {
     </p>
     <p
       v-if="shouldShowMemoryGraph"
-      class="usage-info js-usage-info">
-      {{ memoryChangeMessage }}
+      class="usage-info js-usage-info"
+      v-html="memoryChangeMessage">
     </p>
     <p
       v-if="shouldShowLoadFailure"

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

@@ -9,7 +9,7 @@
       lines: {
         type: Number,
         required: false,
-        default: 6,
+        default: 3,
       },
     },
     computed: {