Merge branch 'master' into droplab-templating-xss-fix

.eslintrc

@@ -14,7 +14,8 @@
   "plugins": [
     "filenames",
     "import",
-    "html"
+    "html",
+    "promise"
   ],
   "settings": {
     "html/html-extensions": [".html", ".html.raw", ".vue"],
@@ -26,6 +27,7 @@
   },
   "rules": {
     "filenames/match-regex": [2, "^[a-z0-9_]+$"],
-    "no-multiple-empty-lines": ["error", { "max": 1 }]
+    "no-multiple-empty-lines": ["error", { "max": 1 }],
+    "promise/catch-or-return": "error"
   }
 }

.gitlab-ci.yml

@@ -201,7 +201,13 @@ rake config_lint: *exec
 rake brakeman: *exec
 rake flay: *exec
 license_finder: *exec
-rake downtime_check: *exec
+rake downtime_check:
+  <<: *exec
+  except:
+    - master
+    - tags
+    - /^[\d-]+-stable(-ee)?$/
+
 rake ee_compat_check:
   <<: *exec
   only:
@@ -278,7 +284,6 @@ rake karma:
   cache:
     paths:
       - vendor/ruby
-      - node_modules
   stage: test
   <<: *use-db
   <<: *dedicated-runner
@@ -377,9 +382,6 @@ coverage:
 
 lint:javascript:
   <<: *dedicated-runner
-  cache:
-    paths:
-      - node_modules/
   stage: test
   before_script: []
   script:
@@ -387,9 +389,6 @@ lint:javascript:
 
 lint:javascript:report:
   <<: *dedicated-runner
-  cache:
-    paths:
-      - node_modules/
   stage: post-test
   before_script: []
   script:

PROCESS.md

@@ -57,16 +57,16 @@ star, smile, etc.). Some good tips about code reviews can be found in our
 
 [Code Review Guidelines]: https://docs.gitlab.com/ce/development/code_review.html
 
-## Feature Freeze
+## Feature freeze on the 7th for the release on the 22nd
 
-After the 7th (Pacific Standard Time Zone) of each month, RC1 of the upcoming release is created and deployed to GitLab.com and the stable branch for this release is frozen, which means master is no longer merged into it.
+After the 7th (Pacific Standard Time Zone) of each month, RC1 of the upcoming release (to be shipped on the 22nd) is created and deployed to GitLab.com and the stable branch for this release is frozen, which means master is no longer merged into it.
 Merge requests may still be merged into master during this period,
 but they will go into the _next_ release, unless they are manually cherry-picked into the stable branch.
 By freezing the stable branches 2 weeks prior to a release, we reduce the risk of a last minute merge request potentially breaking things.
 
 ### Between the 1st and the 7th
 
-These types of merge requests need special consideration:
+These types of merge requests for the upcoming release need special consideration:
 
 * **Large features**: a large feature is one that is highlighted in the kick-off
   and the release blogpost; typically this will have its own channel in Slack
@@ -114,14 +114,15 @@ subsequent EE merge, as we often merge a lot to CE on the release date. For more
 information, see
 [limit conflicts with EE when developing on CE][limit_ee_conflicts].
 
-### Between the 7th and the 22nd
+### After the 7th
 
 Once the stable branch is frozen, only fixes for regressions (bugs introduced in that same release)
 and security issues will be cherry-picked into the stable branch.
 Any merge requests cherry-picked into the stable branch for a previous release will also be picked into the latest stable branch.
-These fixes will be released in the next RC (before the 22nd) or patch release (after the 22nd).
+These fixes will be shipped in the next RC for that release if it is before the 22nd.
+If the fixes are are completed on or after the 22nd, they will be shipped in a patch for that release.
 
-If you think a merge request should go into the upcoming release even though it does not meet these requirements,
+If you think a merge request should go into an RC or patch even though it does not meet these requirements,
 you can ask for an exception to be made. Exceptions require sign-off from 3 people besides the developer:
 
 1. a Release Manager

README.md

@@ -73,7 +73,7 @@ One small thing you also have to do when installing it yourself is to copy the e
 
     cp config/unicorn.rb.example.development config/unicorn.rb
 
-Instructions on how to start GitLab and how to run the tests can be found in the [development section of the GitLab Development Kit](https://gitlab.com/gitlab-org/gitlab-development-kit#development).
+Instructions on how to start GitLab and how to run the tests can be found in the [getting started section of the GitLab Development Kit](https://gitlab.com/gitlab-org/gitlab-development-kit#getting-started).
 
 ## Software stack
 

VERSION

-9.1.0-pre
+9.2.0-pre

app/assets/javascripts/awards_handler.js

@@ -239,6 +239,9 @@ AwardsHandler
       if (menu) {
         menu.dispatchEvent(new CustomEvent('build-emoji-menu-finish'));
       }
+    }).catch((err) => {
+      emojiContentElement.insertAdjacentHTML('beforeend', '<p>We encountered an error while adding the remaining categories</p>');
+      throw new Error(`Error occurred in addRemainingEmojiMenuCategories: ${err.message}`);
     });
   };
 

app/assets/javascripts/behaviors/toggler_behavior.js

@@ -22,6 +22,7 @@ $(() => {
   }
 
   $('body').on('click', '.js-toggle-button', function toggleButton(e) {
+    e.target.classList.toggle('open');
     toggleContainer($(this).closest('.js-toggle-container'));
 
     const targetTag = e.currentTarget.tagName.toLowerCase();

app/assets/javascripts/blob/blob_file_dropzone.js

@@ -35,7 +35,7 @@ export default class BlobFileDropzone {
           this.removeFile(file);
         });
         this.on('sending', function (file, xhr, formData) {
-          formData.append('target_branch', form.find('input[name="target_branch"]').val());
+          formData.append('branch_name', form.find('input[name="branch_name"]').val());
           formData.append('create_merge_request', form.find('.js-create-merge-request').val());
           formData.append('commit_message', form.find('.js-commit-message').val());
         });

app/assets/javascripts/blob/blob_fork_suggestion.js

-function BlobForkSuggestion(openButton, cancelButton, suggestionSection) {
-  if (openButton) {
-    openButton.addEventListener('click', () => {
+const defaults = {
+  // Buttons that will show the `suggestionSections`
+  // has `data-fork-path`, and `data-action`
+  openButtons: [],
+  // Update the href(from `openButton` -> `data-fork-path`)
+  // whenever a `openButton` is clicked
+  forkButtons: [],
+  // Buttons to hide the `suggestionSections`
+  cancelButtons: [],
+  // Section to show/hide
+  suggestionSections: [],
+  // Pieces of text that need updating depending on the action, `edit`, `replace`, `delete`
+  actionTextPieces: [],
+};
+
+class BlobForkSuggestion {
+  constructor(options) {
+    this.elementMap = Object.assign({}, defaults, options);
+    this.onClickWrapper = this.onClick.bind(this);
+
+    document.addEventListener('click', this.onClickWrapper);
+  }
+
+  showSuggestionSection(forkPath, action = 'edit') {
+    [].forEach.call(this.elementMap.suggestionSections, (suggestionSection) => {
       suggestionSection.classList.remove('hidden');
     });
+
+    [].forEach.call(this.elementMap.forkButtons, (forkButton) => {
+      forkButton.setAttribute('href', forkPath);
+    });
+
+    [].forEach.call(this.elementMap.actionTextPieces, (actionTextPiece) => {
+      // eslint-disable-next-line no-param-reassign
+      actionTextPiece.textContent = action;
+    });
   }
 
-  if (cancelButton) {
-    cancelButton.addEventListener('click', () => {
+  hideSuggestionSection() {
+    [].forEach.call(this.elementMap.suggestionSections, (suggestionSection) => {
       suggestionSection.classList.add('hidden');
     });
   }
+
+  onClick(e) {
+    const el = e.target;
+
+    if ([].includes.call(this.elementMap.openButtons, el)) {
+      const { forkPath, action } = el.dataset;
+      this.showSuggestionSection(forkPath, action);
+    }
+
+    if ([].includes.call(this.elementMap.cancelButtons, el)) {
+      this.hideSuggestionSection();
+    }
+  }
+
+  destroy() {
+    document.removeEventListener('click', this.onClickWrapper);
+  }
 }
 
 export default BlobForkSuggestion;

app/assets/javascripts/boards/boards_bundle.js

 /* eslint-disable one-var, quote-props, comma-dangle, space-before-function-paren */
 /* global BoardService */
+/* global Flash */
 
 import Vue from 'vue';
 import VueResource from 'vue-resource';
@@ -93,7 +94,7 @@ $(() => {
 
           Store.addBlankState();
           this.loading = false;
-        });
+        }).catch(() => new Flash('An error occurred. Please try again.'));
     },
     methods: {
       updateTokens() {

app/assets/javascripts/boards/components/board_list.js

@@ -57,12 +57,15 @@ export default {
     },
     loadNextPage() {
       const getIssues = this.list.nextPage();
+      const loadingDone = () => {
+        this.list.loadingMore = false;
+      };
 
       if (getIssues) {
         this.list.loadingMore = true;
-        getIssues.then(() => {
-          this.list.loadingMore = false;
-        });
+        getIssues
+          .then(loadingDone)
+          .catch(loadingDone);
       }
     },
     toggleForm() {

app/assets/javascripts/boards/components/modal/index.js

@@ -51,11 +51,13 @@ gl.issueBoards.IssuesModal = Vue.extend({
     showAddIssuesModal() {
       if (this.showAddIssuesModal && !this.issues.length) {
         this.loading = true;
+        const loadingDone = () => {
+          this.loading = false;
+        };
 
         this.loadIssues()
-          .then(() => {
-            this.loading = false;
-          });
+          .then(loadingDone)
+          .catch(loadingDone);
       } else if (!this.showAddIssuesModal) {
         this.issues = [];
         this.selectedIssues = [];
@@ -67,11 +69,13 @@ gl.issueBoards.IssuesModal = Vue.extend({
         if (this.$el.tagName) {
           this.page = 1;
           this.filterLoading = true;
+          const loadingDone = () => {
+            this.filterLoading = false;
+          };
 
           this.loadIssues(true)
-            .then(() => {
-              this.filterLoading = false;
-            });
+            .then(loadingDone)
+            .catch(loadingDone);
         }
       },
       deep: true,

app/assets/javascripts/boards/components/new_list_dropdown.js

-/* eslint-disable comma-dangle, func-names, no-new, space-before-function-paren, one-var */
+/* eslint-disable comma-dangle, func-names, no-new, space-before-function-paren, one-var,
+   promise/catch-or-return */
 
 window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};

app/assets/javascripts/boards/models/list.js

@@ -3,6 +3,8 @@
 /* global ListLabel */
 import queryData from '../utils/query_data';
 
+const PER_PAGE = 20;
+
 class List {
   constructor (obj) {
     this.id = obj.id;
@@ -58,7 +60,9 @@ class List {
 
   nextPage () {
     if (this.issuesSize > this.issues.length) {
+      if (this.issues.length / PER_PAGE >= 1) {
         this.page += 1;
+      }
 
       return this.getIssues(false);
     }
@@ -145,10 +149,7 @@ class List {
   }
 
   updateIssueLabel(issue, listFrom, moveBeforeIid, moveAfterIid) {
-    gl.boardService.moveIssue(issue.id, listFrom.id, this.id, moveBeforeIid, moveAfterIid)
-      .then(() => {
-        listFrom.getIssues(false);
-      });
+    gl.boardService.moveIssue(issue.id, listFrom.id, this.id, moveBeforeIid, moveAfterIid);
   }
 
   findIssue (id) {

app/assets/javascripts/boards/stores/boards_store.js

@@ -36,6 +36,9 @@ gl.issueBoards.BoardsStore = {
       .save()
       .then(() => {
         this.state.lists = _.sortBy(this.state.lists, 'position');
+      })
+      .catch(() => {
+        // https://gitlab.com/gitlab-org/gitlab-ce/issues/30821
       });
     this.removeBlankState();
   },

app/assets/javascripts/build.js

@@ -2,6 +2,8 @@
 consistent-return, prefer-rest-params */
 /* global Breakpoints */
 
+import { bytesToKiB } from './lib/utils/number_utils';
+
 const bind = function (fn, me) { return function () { return fn.apply(me, arguments); }; };
 const AUTO_SCROLL_OFFSET = 75;
 const DOWN_BUILD_TRACE = '#down-build-trace';
@@ -20,6 +22,7 @@ window.Build = (function () {
     this.state = this.options.logState;
     this.buildStage = this.options.buildStage;
     this.$document = $(document);
+    this.logBytes = 0;
 
     this.updateDropdown = bind(this.updateDropdown, this);
 
@@ -98,16 +101,23 @@ window.Build = (function () {
 
         if (log.append) {
           $buildContainer.append(log.html);
+          this.logBytes += log.size;
         } else {
           $buildContainer.html(log.html);
-          if (log.truncated) {
-            $('.js-truncated-info-size').html(` ${log.size} `);
+          this.logBytes = log.size;
+        }
+
+        // if the incremental sum of logBytes we received is less than the total
+        // we need to show a message warning the user about that.
+        if (this.logBytes < log.total) {
+          // size is in bytes, we need to calculate KiB
+          const size = bytesToKiB(this.logBytes);
+          $('.js-truncated-info-size').html(`${size}`);
           this.$truncatedInfo.removeClass('hidden');
           this.initAffixTruncatedInfo();
         } else {
           this.$truncatedInfo.addClass('hidden');
         }
-        }
 
         this.checkAutoscroll();
 

app/assets/javascripts/ci_status_icons.js

+import CANCELED_SVG from 'icons/_icon_status_canceled_borderless.svg';
+import CREATED_SVG from 'icons/_icon_status_created_borderless.svg';
+import FAILED_SVG from 'icons/_icon_status_failed_borderless.svg';
+import MANUAL_SVG from 'icons/_icon_status_manual_borderless.svg';
+import PENDING_SVG from 'icons/_icon_status_pending_borderless.svg';
+import RUNNING_SVG from 'icons/_icon_status_running_borderless.svg';
+import SKIPPED_SVG from 'icons/_icon_status_skipped_borderless.svg';
+import SUCCESS_SVG from 'icons/_icon_status_success_borderless.svg';
+import WARNING_SVG from 'icons/_icon_status_warning_borderless.svg';
+
+const StatusIconEntityMap = {
+  icon_status_canceled: CANCELED_SVG,
+  icon_status_created: CREATED_SVG,
+  icon_status_failed: FAILED_SVG,
+  icon_status_manual: MANUAL_SVG,
+  icon_status_pending: PENDING_SVG,
+  icon_status_running: RUNNING_SVG,
+  icon_status_skipped: SKIPPED_SVG,
+  icon_status_success: SUCCESS_SVG,
+  icon_status_warning: WARNING_SVG,
+};
+
+export {
+  CANCELED_SVG,
+  CREATED_SVG,
+  FAILED_SVG,
+  MANUAL_SVG,
+  PENDING_SVG,
+  RUNNING_SVG,
+  SKIPPED_SVG,
+  SUCCESS_SVG,
+  WARNING_SVG,
+  StatusIconEntityMap as default,
+};

app/assets/javascripts/commit/pipelines/pipelines_table.js

 import Vue from 'vue';
 import Visibility from 'visibilityjs';
 import PipelinesTableComponent from '../../vue_shared/components/pipelines_table';
-import PipelinesService from '../../vue_pipelines_index/services/pipelines_service';
-import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store';
-import eventHub from '../../vue_pipelines_index/event_hub';
-import EmptyState from '../../vue_pipelines_index/components/empty_state.vue';
-import ErrorState from '../../vue_pipelines_index/components/error_state.vue';
+import PipelinesService from '../../pipelines/services/pipelines_service';
+import PipelineStore from '../../pipelines/stores/pipelines_store';
+import eventHub from '../../pipelines/event_hub';
+import EmptyState from '../../pipelines/components/empty_state.vue';
+import ErrorState from '../../pipelines/components/error_state.vue';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
 import Poll from '../../lib/utils/poll';
@@ -55,7 +55,15 @@ export default Vue.component('pipelines-table', {
     },
 
     shouldRenderEmptyState() {
-      return !this.state.pipelines.length && !this.isLoading;
+      return !this.state.pipelines.length &&
+        !this.isLoading &&
+        !this.hasError;
+    },
+
+    shouldRenderTable() {
+      return !this.isLoading &&
+        this.state.pipelines.length > 0 &&
+        !this.hasError;
     },
   },
 
@@ -145,8 +153,12 @@ export default Vue.component('pipelines-table', {
 
   template: `
     <div class="content-list pipelines">
-      <div class="realtime-loading" v-if="isLoading">
-        <i class="fa fa-spinner fa-spin"></i>
+      <div
+        class="realtime-loading"
+        v-if="isLoading">
+        <i
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true" />
       </div>
 
       <empty-state
@@ -155,8 +167,9 @@ export default Vue.component('pipelines-table', {
 
       <error-state v-if="shouldRenderErrorState" />
 
-      <div class="table-holder"
-        v-if="!isLoading && state.pipelines.length > 0">
+      <div
+        class="table-holder"
+        v-if="shouldRenderTable">
         <pipelines-table-component
           :pipelines="state.pipelines"
           :service="service" />

app/assets/javascripts/commons/polyfills.js

 // ECMAScript polyfills
 import 'core-js/fn/array/find';
 import 'core-js/fn/array/from';
+import 'core-js/fn/array/includes';
 import 'core-js/fn/object/assign';
 import 'core-js/fn/promise';
 import 'core-js/fn/string/code-point-at';

app/assets/javascripts/diff_notes/components/comment_resolve_btn.js

@@ -3,8 +3,7 @@
 
 import Vue from 'vue';
 
-(() => {
-  const CommentAndResolveBtn = Vue.extend({
+const CommentAndResolveBtn = Vue.extend({
   props: {
     discussionId: String,
   },
@@ -61,7 +60,6 @@ import Vue from 'vue';
 
     $(`.js-discussion-note-form[data-discussion-id=${this.discussionId}] .note-textarea`).off('input.comment-and-resolve-btn');
   }
-  });
+});
 
-  Vue.component('comment-and-resolve-btn', CommentAndResolveBtn);
-})(window);
+Vue.component('comment-and-resolve-btn', CommentAndResolveBtn);

app/assets/javascripts/diff_notes/components/diff_note_avatars.js

@@ -4,8 +4,7 @@
 import Vue from 'vue';
 import collapseIcon from '../icons/collapse_icon.svg';
 
-(() => {
-  const DiffNoteAvatars = Vue.extend({
+const DiffNoteAvatars = Vue.extend({
   props: ['discussionId'],
   data() {
     return {
@@ -152,7 +151,6 @@ import collapseIcon from '../icons/collapse_icon.svg';
       this.isVisible = $(`.diffs .notes[data-discussion-id="${this.discussion.id}"]`).is(':visible');
     },
   },
-  });
+});
 
-  Vue.component('diff-note-avatars', DiffNoteAvatars);
-})();
+Vue.component('diff-note-avatars', DiffNoteAvatars);

app/assets/javascripts/diff_notes/components/jump_to_discussion.js

@@ -4,8 +4,7 @@
 
 import Vue from 'vue';
 
-(() => {
-  const JumpToDiscussion = Vue.extend({
+const JumpToDiscussion = Vue.extend({
   mixins: [DiscussionMixins],
   props: {
     discussionId: String
@@ -189,7 +188,6 @@ import Vue from 'vue';
   created() {
     this.discussion = this.discussions[this.discussionId];
   },
-  });
+});
 
-  Vue.component('jump-to-discussion', JumpToDiscussion);
-})();
+Vue.component('jump-to-discussion', JumpToDiscussion);

app/assets/javascripts/diff_notes/components/new_issue_for_discussion.js

@@ -2,8 +2,7 @@
 
 import Vue from 'vue';
 
-(() => {
-  const NewIssueForDiscussion = Vue.extend({
+const NewIssueForDiscussion = Vue.extend({
   props: {
     discussionId: {
       type: String,
@@ -24,7 +23,6 @@ import Vue from 'vue';
       return false;
     },
   },
-  });
+});
 
-  Vue.component('new-issue-for-discussion-btn', NewIssueForDiscussion);
-})();
+Vue.component('new-issue-for-discussion-btn', NewIssueForDiscussion);

app/assets/javascripts/diff_notes/components/resolve_btn.js

@@ -5,8 +5,7 @@
 
 import Vue from 'vue';
 
-(() => {
-  const ResolveBtn = Vue.extend({
+const ResolveBtn = Vue.extend({
   props: {
     noteId: Number,
     discussionId: String,
@@ -65,6 +64,8 @@ import Vue from 'vue';
       });
     },
     resolve: function () {
+      const errorFlashMsg = 'An error occurred when trying to resolve a comment. Please try again.';
+
       if (!this.canResolve) return;
 
       let promise;
@@ -88,10 +89,12 @@ import Vue from 'vue';
           CommentsStore.update(this.discussionId, this.noteId, !this.isResolved, resolved_by);
           this.discussion.updateHeadline(data);
         } else {
-            new Flash('An error occurred when trying to resolve a comment. Please try again.', 'alert');
+          new Flash(errorFlashMsg);
         }
 
         this.updateTooltip();
+      }).catch(() => {
+        new Flash(errorFlashMsg);
       });
     }
   },
@@ -115,7 +118,6 @@ import Vue from 'vue';
       noteTruncated: this.noteTruncated,
     });
   }
-  });
+});
 
-  Vue.component('resolve-btn', ResolveBtn);
-})();
+Vue.component('resolve-btn', ResolveBtn);

app/assets/javascripts/diff_notes/components/resolve_count.js

@@ -4,8 +4,7 @@
 
 import Vue from 'vue';
 
-((w) => {
-  w.ResolveCount = Vue.extend({
+window.ResolveCount = Vue.extend({
   mixins: [DiscussionMixins],
   props: {
     loggedOut: Boolean
@@ -23,5 +22,4 @@ import Vue from 'vue';
       return this.discussionCount === 1 ? 'discussion' : 'discussions';
     }
   }
-  });
-})(window);
+});

app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js

@@ -4,8 +4,7 @@
 
 import Vue from 'vue';
 
-(() => {
-  const ResolveDiscussionBtn = Vue.extend({
+const ResolveDiscussionBtn = Vue.extend({
   props: {
     discussionId: String,
     mergeRequestId: Number,
@@ -56,7 +55,6 @@ import Vue from 'vue';
 
     this.discussion = CommentsStore.state[this.discussionId];
   }
-  });
+});
 
-  Vue.component('resolve-discussion-btn', ResolveDiscussionBtn);
-})();
+Vue.component('resolve-discussion-btn', ResolveDiscussionBtn);

app/assets/javascripts/diff_notes/mixins/discussion.js

 /* eslint-disable object-shorthand, func-names, guard-for-in, no-restricted-syntax, comma-dangle, no-param-reassign, max-len */
 
-((w) => {
-  w.DiscussionMixins = {
+window.DiscussionMixins = {
   computed: {
     discussionCount: function () {
       return Object.keys(this.discussions).length;
@@ -33,5 +32,4 @@
       return unresolvedCount;
     }
   }
-  };
-})(window);
+};

app/assets/javascripts/diff_notes/services/resolve.js

@@ -9,10 +9,9 @@ require('../../vue_shared/vue_resource_interceptor');
 
 Vue.use(VueResource);
 
-(() => {
-  window.gl = window.gl || {};
+window.gl = window.gl || {};
 
-  class ResolveServiceClass {
+class ResolveServiceClass {
   constructor(root) {
     this.noteResource = Vue.resource(`${root}/notes{/noteId}/resolve`);
     this.discussionResource = Vue.resource(`${root}/merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve`);
@@ -52,8 +51,10 @@ Vue.use(VueResource);
 
         discussion.updateHeadline(data);
       } else {
-          new Flash('An error occurred when trying to resolve a discussion. Please try again.', 'alert');
+        throw new Error('An error occurred when trying to resolve discussion.');
       }
+    }).catch(() => {
+      new Flash('An error occurred when trying to resolve a discussion. Please try again.');
     });
   }
 
@@ -78,7 +79,6 @@ Vue.use(VueResource);
       discussionId
     }, {});
   }
-  }
+}
 
-  gl.DiffNotesResolveServiceClass = ResolveServiceClass;
-})();
+gl.DiffNotesResolveServiceClass = ResolveServiceClass;

app/assets/javascripts/diff_notes/stores/comments.js

@@ -3,8 +3,7 @@
 
 import Vue from 'vue';
 
-((w) => {
-  w.CommentsStore = {
+window.CommentsStore = {
   state: {},
   get: function (discussionId, noteId) {
     return this.state[discussionId].getNote(noteId);
@@ -54,5 +53,4 @@ import Vue from 'vue';
 
     return ids;
   }
-  };
-})(window);
+};

app/assets/javascripts/dispatcher.js

@@ -33,6 +33,7 @@
 /* global Labels */
 /* global Shortcuts */
 /* global Sidebar */
+/* global ShortcutsWiki */
 
 import Issue from './issue';
 
@@ -46,6 +47,7 @@ import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import UserCallout from './user_callout';
 import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
+import ShortcutsWiki from './shortcuts_wiki';
 
 const ShortcutsBlob = require('./shortcuts_blob');
 
@@ -89,11 +91,13 @@ const ShortcutsBlob = require('./shortcuts_blob');
           fileBlobPermalinkUrl,
         });
 
-        new BlobForkSuggestion(
-          document.querySelector('.js-edit-blob-link-fork-toggler'),
-          document.querySelector('.js-cancel-fork-suggestion'),
-          document.querySelector('.js-file-fork-suggestion-section'),
-        );
+        new BlobForkSuggestion({
+          openButtons: document.querySelectorAll('.js-edit-blob-link-fork-toggler'),
+          forkButtons: document.querySelectorAll('.js-fork-suggestion-button'),
+          cancelButtons: document.querySelectorAll('.js-cancel-fork-suggestion-button'),
+          suggestionSections: document.querySelectorAll('.js-file-fork-suggestion-section'),
+          actionTextPieces: document.querySelectorAll('.js-file-fork-suggestion-section-action'),
+        });
       }
 
       switch (page) {
@@ -148,13 +152,13 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:milestones:new':
         case 'projects:milestones:edit':
         case 'projects:milestones:update':
+        case 'groups:milestones:new':
+        case 'groups:milestones:edit':
+        case 'groups:milestones:update':
           new ZenMode();
           new gl.DueDateSelectors();
           new gl.GLForm($('.milestone-form'));
           break;
-        case 'groups:milestones:new':
-          new ZenMode();
-          break;
         case 'projects:compare:show':
           new gl.Diff();
           break;
@@ -365,6 +369,9 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'admin':
           new Admin();
           switch (path[1]) {
+            case 'cohorts':
+              new gl.UsagePing();
+              break;
             case 'groups':
               new UsersSelect();
               break;
@@ -416,7 +423,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
               break;
             case 'wikis':
               new gl.Wikis();
-              shortcut_handler = new ShortcutsNavigation();
+              shortcut_handler = new ShortcutsWiki();
               new ZenMode();
               new gl.GLForm($('.wiki-form'));
               break;

app/assets/javascripts/droplab/constants.js

@@ -3,6 +3,7 @@ const DATA_DROPDOWN = 'data-dropdown';
 const SELECTED_CLASS = 'droplab-item-selected';
 const ACTIVE_CLASS = 'droplab-item-active';
 const TEMPLATE_REGEX = /\{\{(.+?)\}\}/g;
+const IGNORE_CLASS = 'droplab-item-ignore';
 
 export {
   DATA_TRIGGER,
@@ -10,4 +11,5 @@ export {
   SELECTED_CLASS,
   ACTIVE_CLASS,
   TEMPLATE_REGEX,
+  IGNORE_CLASS,
 };

app/assets/javascripts/droplab/drop_down.js

 /* eslint-disable */
 
 import utils from './utils';
-import { SELECTED_CLASS } from './constants';
+import { SELECTED_CLASS, IGNORE_CLASS } from './constants';
 
 var DropDown = function(list) {
   this.currentIndex = 0;
@@ -36,6 +36,7 @@ Object.assign(DropDown.prototype, {
 
   clickEvent: function(e) {
     if (e.target.tagName === 'UL') return;
+    if (e.target.classList.contains(IGNORE_CLASS)) return;
 
     var selected = utils.closest(e.target, 'LI');
     if (!selected) return;

app/assets/javascripts/dropzone_input.js

@@ -38,6 +38,9 @@ window.DropzoneInput = (function() {
       "opacity": 0,
       "display": "none"
     });
+
+    if (!project_uploads_path) return;
+
     dropzone = form_dropzone.dropzone({
       url: project_uploads_path,
       dictDefaultMessage: "",
@@ -130,13 +133,15 @@ window.DropzoneInput = (function() {
       var afterSelection, beforeSelection, caretEnd, caretStart, textEnd;
       var formattedText = text;
       if (shouldPad) formattedText += "\n\n";
-      caretStart = $(child)[0].selectionStart;
-      caretEnd = $(child)[0].selectionEnd;
+      const textarea = child.get(0);
+      caretStart = textarea.selectionStart;
+      caretEnd = textarea.selectionEnd;
       textEnd = $(child).val().length;
       beforeSelection = $(child).val().substring(0, caretStart);
       afterSelection = $(child).val().substring(caretEnd, textEnd);
       $(child).val(beforeSelection + formattedText + afterSelection);
-      child.get(0).setSelectionRange(caretStart + formattedText.length, caretEnd + formattedText.length);
+      textarea.setSelectionRange(caretStart + formattedText.length, caretEnd + formattedText.length);
+      textarea.style.height = `${textarea.scrollHeight}px`;
       return form_textarea.trigger("input");
     };
     getFilename = function(e) {
@@ -180,7 +185,7 @@ window.DropzoneInput = (function() {
     };
     insertToTextArea = function(filename, url) {
       return $(child).val(function(index, val) {
-        return val.replace("{{" + filename + "}}", url + "\n");
+        return val.replace("{{" + filename + "}}", url);
       });
     };
     appendToTextArea = function(url) {
@@ -215,6 +220,7 @@ window.DropzoneInput = (function() {
     form.find(".markdown-selector").click(function(e) {
       e.preventDefault();
       $(this).closest('.gfm-form').find('.div-dropzone').click();
+      form_textarea.focus();
     });
   }
 

app/assets/javascripts/due_date_select.js

@@ -115,11 +115,13 @@ class DueDateSelect {
     this.$dropdown.trigger('loading.gl.dropdown');
     this.$selectbox.hide();
     this.$value.css('display', '');
+    const fadeOutLoader = () => {
+      this.$loading.fadeOut();
+    };
 
     gl.issueBoards.BoardsStore.detail.issue.update(this.$dropdown.attr('data-issue-update'))
-      .then(() => {
-        this.$loading.fadeOut();
-      });
+      .then(fadeOutLoader)
+      .catch(fadeOutLoader);
   }
 
   submitSelectedDate(isDropdown) {
@@ -168,8 +170,9 @@ class DueDateSelectors {
       const $datePicker = $(this);
       const calendar = new Pikaday({
         field: $datePicker.get(0),
-        theme: 'gitlab-theme',
+        theme: 'gitlab-theme animate-picker',
         format: 'yyyy-mm-dd',
+        container: $datePicker.parent().get(0),
         onSelect(dateText) {
           $datePicker.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
         }

app/assets/javascripts/environments/components/environment.js

@@ -2,7 +2,7 @@
 /* global Flash */
 import Vue from 'vue';
 import EnvironmentsService from '../services/environments_service';
-import EnvironmentTable from './environments_table';
+import EnvironmentTable from './environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
 import TablePaginationComponent from '../../vue_shared/components/table_pagination';
 import '../../lib/utils/common_utils';

app/assets/javascripts/environments/components/environment_actions.js → app/assets/javascripts/environments/components/environment_actions.vue

+<script>
 /* global Flash */
 /* eslint-disable no-new */
 
@@ -35,6 +36,8 @@ export default {
     onClickAction(endpoint) {
       this.isLoading = true;
 
+      $(this.$refs.tooltip).tooltip('destroy');
+
       this.service.postAction(endpoint)
       .then(() => {
         this.isLoading = false;
@@ -54,14 +57,18 @@ export default {
       return !action.playable;
     },
   },
-
-  template: `
-    <div class="btn-group" role="group">
+};
+</script>
+<template>
+  <div
+    class="btn-group"
+    role="group">
     <button
       type="button"
       class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip"
       data-container="body"
       data-toggle="dropdown"
+      ref="tooltip"
       :title="title"
       :aria-label="title"
       :disabled="isLoading">
@@ -83,9 +90,9 @@ export default {
           type="button"
           class="js-manual-action-link no-btn btn"
           @click="onClickAction(action.play_path)"
-            :class="{ 'disabled': isActionDisabled(action) }"
+          :class="{ disabled: isActionDisabled(action) }"
           :disabled="isActionDisabled(action)">
-            ${playIconSvg}
+          <span v-html="playIconSvg"></span>
           <span>
             {{action.name}}
           </span>
@@ -93,5 +100,4 @@ export default {
       </li>
     </ul>
   </div>
-  `,
-};
+</template>

app/assets/javascripts/environments/components/environment_external_url.js → app/assets/javascripts/environments/components/environment_external_url.vue

+<script>
 /**
  * Renders the external url link in environments table.
  */
@@ -5,7 +6,7 @@ export default {
   props: {
     externalUrl: {
       type: String,
-      default: '',
+      required: true,
     },
   },
 
@@ -14,17 +15,19 @@ export default {
       return 'Open';
     },
   },
-
-  template: `
+};
+</script>
+<template>
   <a
     class="btn external-url has-tooltip"
     data-container="body"
-      :href="externalUrl"
     target="_blank"
     rel="noopener noreferrer nofollow"
     :title="title"
-      :aria-label="title">
-      <i class="fa fa-external-link" aria-hidden="true"></i>
+    :aria-label="title"
+    :href="externalUrl">
+    <i
+      class="fa fa-external-link"
+      aria-hidden="true" />
   </a>
-  `,
-};
+</template>

app/assets/javascripts/environments/components/environment_item.js → app/assets/javascripts/environments/components/environment_item.vue

+<script>
 import Timeago from 'timeago.js';
 import '../../lib/utils/text_utility';
-import ActionsComponent from './environment_actions';
-import ExternalUrlComponent from './environment_external_url';
-import StopComponent from './environment_stop';
-import RollbackComponent from './environment_rollback';
-import TerminalButtonComponent from './environment_terminal_button';
-import MonitoringButtonComponent from './environment_monitoring';
+import ActionsComponent from './environment_actions.vue';
+import ExternalUrlComponent from './environment_external_url.vue';
+import StopComponent from './environment_stop.vue';
+import RollbackComponent from './environment_rollback.vue';
+import TerminalButtonComponent from './environment_terminal_button.vue';
+import MonitoringButtonComponent from './environment_monitoring.vue';
 import CommitComponent from '../../vue_shared/components/commit';
 import eventHub from '../event_hub';
 
@@ -434,17 +435,20 @@ export default {
       eventHub.$emit('toggleFolder', this.model, this.folderUrl);
     },
   },
-
-  template: `
+};
+</script>
+<template>
   <tr :class="{ 'js-child-row': model.isChildren }">
     <td>
-        <a v-if="!model.isFolder"
+      <a
+        v-if="!model.isFolder"
         class="environment-name"
         :class="{ 'prepend-left-default': model.isChildren }"
         :href="environmentPath">
         {{model.name}}
       </a>
-        <span v-else
+      <span
+        v-else
         class="folder-name"
         @click="onClickFolder"
         role="button">
@@ -461,7 +465,9 @@ export default {
         </span>
 
         <span class="folder-icon">
-            <i class="fa fa-folder" aria-hidden="true"></i>
+          <i
+            class="fa fa-folder"
+            aria-hidden="true" />
         </span>
 
         <span>
@@ -481,8 +487,11 @@ export default {
 
       <span v-if="!model.isFolder && deploymentHasUser">
         by
-          <a :href="deploymentUser.web_url" class="js-deploy-user-container">
-            <img class="avatar has-tooltip s20"
+        <a
+          :href="deploymentUser.web_url"
+          class="js-deploy-user-container">
+          <img
+            class="avatar has-tooltip s20"
             :src="deploymentUser.avatar_url"
             :alt="userImageAltDescription"
             :title="deploymentUser.username" />
@@ -491,7 +500,8 @@ export default {
     </td>
 
     <td class="environments-build-cell">
-        <a v-if="shouldRenderBuildName"
+      <a
+        v-if="shouldRenderBuildName"
         class="build-link"
         :href="buildPath">
         {{buildName}}
@@ -499,7 +509,9 @@ export default {
     </td>
 
     <td>
-        <div v-if="!model.isFolder && hasLastDeploymentKey" class="js-commit-component">
+      <div
+        v-if="!model.isFolder && hasLastDeploymentKey"
+        class="js-commit-component">
         <commit-component
           :tag="commitTag"
           :commit-ref="commitRef"
@@ -508,43 +520,55 @@ export default {
           :title="commitTitle"
           :author="commitAuthor"/>
       </div>
-        <p v-if="!model.isFolder && !hasLastDeploymentKey" class="commit-title">
+      <p
+        v-if="!model.isFolder && !hasLastDeploymentKey"
+        class="commit-title">
         No deployments yet
       </p>
     </td>
 
     <td>
-        <span v-if="!model.isFolder && canShowDate"
+      <span
+        v-if="!model.isFolder && canShowDate"
         class="environment-created-date-timeago">
         {{createdDate}}
       </span>
     </td>
 
     <td class="environments-actions">
-        <div v-if="!model.isFolder" class="btn-group pull-right" role="group">
-          <actions-component v-if="hasManualActions && canCreateDeployment"
+      <div
+        v-if="!model.isFolder"
+        class="btn-group pull-right"
+        role="group">
+
+        <actions-component
+          v-if="hasManualActions && canCreateDeployment"
           :service="service"
           :actions="manualActions"/>
 
-          <external-url-component v-if="externalURL && canReadEnvironment"
+        <external-url-component
+          v-if="externalURL && canReadEnvironment"
           :external-url="externalURL"/>
 
-          <monitoring-button-component v-if="monitoringUrl && canReadEnvironment"
+        <monitoring-button-component
+          v-if="monitoringUrl && canReadEnvironment"
           :monitoring-url="monitoringUrl"/>
 
-          <terminal-button-component v-if="model && model.terminal_path"
+        <terminal-button-component
+          v-if="model && model.terminal_path"
           :terminal-path="model.terminal_path"/>
 
-          <stop-component v-if="hasStopAction && canCreateDeployment"
+        <stop-component
+          v-if="hasStopAction && canCreateDeployment"
           :stop-url="model.stop_path"
           :service="service"/>
 
-          <rollback-component v-if="canRetry && canCreateDeployment"
+        <rollback-component
+          v-if="canRetry && canCreateDeployment"
           :is-last-deployment="isLastDeployment"
           :retry-url="retryUrl"
           :service="service"/>
       </div>
     </td>
   </tr>
-  `,
-};
+</template>

app/assets/javascripts/environments/components/environment_monitoring.js → app/assets/javascripts/environments/components/environment_monitoring.vue

+<script>
 /**
  * Renders the Monitoring (Metrics) link in environments table.
  */
@@ -5,7 +6,6 @@ export default {
   props: {
     monitoringUrl: {
       type: String,
-      default: '',
       required: true,
     },
   },
@@ -15,17 +15,19 @@ export default {
       return 'Monitoring';
     },
   },
-
-  template: `
+};
+</script>
+<template>
   <a
     class="btn monitoring-url has-tooltip"
     data-container="body"
-      :href="monitoringUrl"
     target="_blank"
     rel="noopener noreferrer nofollow"
+    :href="monitoringUrl"
     :title="title"
     :aria-label="title">
-      <i class="fa fa-area-chart" aria-hidden="true"></i>
+    <i
+      class="fa fa-area-chart"
+      aria-hidden="true" />
   </a>
-  `,
-};
+</template>

app/assets/javascripts/environments/components/environment_rollback.js → app/assets/javascripts/environments/components/environment_rollback.vue

+<script>
 /* global Flash */
 /* eslint-disable no-new */
 /**
@@ -36,6 +37,8 @@ export default {
     onClick() {
       this.isLoading = true;
 
+      $(this.$el).tooltip('destroy');
+
       this.service.postAction(this.retryUrl)
       .then(() => {
         this.isLoading = false;
@@ -47,9 +50,11 @@ export default {
       });
     },
   },
-
-  template: `
-    <button type="button"
+};
+</script>
+<template>
+  <button
+    type="button"
     class="btn"
     @click="onClick"
     :disabled="isLoading">
@@ -61,7 +66,9 @@ export default {
       Rollback
     </span>
 
-      <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+    <i
+      v-if="isLoading"
+      class="fa fa-spinner fa-spin"
+      aria-hidden="true" />
   </button>
-  `,
-};
+</template>

app/assets/javascripts/environments/components/environment_stop.js → app/assets/javascripts/environments/components/environment_stop.vue

+<script>
 /* global Flash */
 /* eslint-disable no-new, no-alert */
 /**
@@ -36,6 +37,8 @@ export default {
       if (confirm('Are you sure you want to stop this environment?')) {
         this.isLoading = true;
 
+        $(this.$el).tooltip('destroy');
+
         this.service.postAction(this.retryUrl)
         .then(() => {
           this.isLoading = false;
@@ -48,17 +51,23 @@ export default {
       }
     },
   },
-
-  template: `
-    <button type="button"
+};
+</script>
+<template>
+  <button
+    type="button"
     class="btn stop-env-link has-tooltip"
     data-container="body"
     @click="onClick"
     :disabled="isLoading"
     :title="title"
     :aria-label="title">
-      <i class="fa fa-stop stop-env-icon" aria-hidden="true"></i>
-      <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+    <i
+      class="fa fa-stop stop-env-icon"
+      aria-hidden="true" />
+    <i
+      v-if="isLoading"
+      class="fa fa-spinner fa-spin"
+      aria-hidden="true" />
   </button>
-  `,
-};
+</template>

app/assets/javascripts/environments/components/environment_terminal_button.js → app/assets/javascripts/environments/components/environment_terminal_button.vue

+<script>
 /**
  * Renders a terminal button to open a web terminal.
  * Used in environments table.
@@ -24,14 +25,15 @@ export default {
       return 'Terminal';
     },
   },
-
-  template: `
-    <a class="btn terminal-button has-tooltip"
+};
+</script>
+<template>
+  <a
+    class="btn terminal-button has-tooltip"
     data-container="body"
     :title="title"
     :aria-label="title"
-      :href="terminalPath">
-      ${terminalIconSvg}
+    :href="terminalPath"
+    v-html="terminalIconSvg">
   </a>
-  `,
-};
+</template>

app/assets/javascripts/environments/components/environments_table.js → app/assets/javascripts/environments/components/environments_table.vue

+<script>
 /**
  * Render environments table.
  */
-import EnvironmentTableRowComponent from './environment_item';
+import EnvironmentTableRowComponent from './environment_item.vue';
 
 export default {
   components: {
@@ -44,46 +45,66 @@ export default {
       return `${window.location.pathname}/folders/${model.folderName}`;
     },
   },
-
-  template: `
+};
+</script>
+<template>
   <table class="table ci-table">
     <thead>
       <tr>
-          <th class="environments-name">Environment</th>
-          <th class="environments-deploy">Last deployment</th>
-          <th class="environments-build">Job</th>
-          <th class="environments-commit">Commit</th>
-          <th class="environments-date">Updated</th>
+        <th class="environments-name">
+          Environment
+        </th>
+        <th class="environments-deploy">
+          Last deployment
+        </th>
+        <th class="environments-build">
+          Job
+        </th>
+        <th class="environments-commit">
+          Commit
+        </th>
+        <th class="environments-date">
+          Updated
+        </th>
         <th class="environments-actions"></th>
       </tr>
     </thead>
     <tbody>
-        <template v-for="model in environments"
+      <template
+        v-for="model in environments"
         v-bind:model="model">
-          <tr is="environment-item"
+        <tr
+          is="environment-item"
           :model="model"
           :can-create-deployment="canCreateDeployment"
           :can-read-environment="canReadEnvironment"
-            :service="service"></tr>
+          :service="service" />
 
         <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
           <tr v-if="isLoadingFolderContent">
             <td colspan="6" class="text-center">
-                <i class="fa fa-spin fa-spinner fa-2x" aria-hidden="true"/>
+              <i
+                class="fa fa-spin fa-spinner fa-2x"
+                aria-hidden="true" />
             </td>
           </tr>
 
           <template v-else>
-              <tr is="environment-item"
+            <tr
+              is="environment-item"
               v-for="children in model.children"
               :model="children"
               :can-create-deployment="canCreateDeployment"
               :can-read-environment="canReadEnvironment"
-                :service="service"></tr>
+              :service="service" />
 
             <tr>
-                <td colspan="6" class="text-center">
-                  <a :href="folderUrl(model)" class="btn btn-default">
+              <td
+                colspan="6"
+                class="text-center">
+                <a
+                  :href="folderUrl(model)"
+                  class="btn btn-default">
                   Show all
                 </a>
               </td>
@@ -93,5 +114,4 @@ export default {
       </template>
     </tbody>
   </table>
-  `,
-};
+</template>

app/assets/javascripts/environments/folder/environments_folder_view.js

@@ -2,7 +2,7 @@
 /* global Flash */
 import Vue from 'vue';
 import EnvironmentsService from '../services/environments_service';
-import EnvironmentTable from '../components/environments_table';
+import EnvironmentTable from '../components/environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
 import TablePaginationComponent from '../../vue_shared/components/table_pagination';
 import '../../lib/utils/common_utils';

app/assets/javascripts/filtered_search/dropdown_hint.js

@@ -2,8 +2,7 @@ import Filter from '~/droplab/plugins/filter';
 
 require('./filtered_search_dropdown');
 
-(() => {
-  class DropdownHint extends gl.FilteredSearchDropdown {
+class DropdownHint extends gl.FilteredSearchDropdown {
   constructor(droplab, dropdown, input, filter) {
     super(droplab, dropdown, input, filter);
     this.config = {
@@ -76,8 +75,7 @@ require('./filtered_search_dropdown');
   init() {
     this.droplab.addHook(this.input, this.dropdown, [Filter], this.config).init();
   }
-  }
+}
 
-  window.gl = window.gl || {};
-  gl.DropdownHint = DropdownHint;
-})();
+window.gl = window.gl || {};
+gl.DropdownHint = DropdownHint;

app/assets/javascripts/filtered_search/dropdown_non_user.js

@@ -5,8 +5,7 @@ import Filter from '~/droplab/plugins/filter';
 
 require('./filtered_search_dropdown');
 
-(() => {
-  class DropdownNonUser extends gl.FilteredSearchDropdown {
+class DropdownNonUser extends gl.FilteredSearchDropdown {
   constructor(droplab, dropdown, input, filter, endpoint, symbol) {
     super(droplab, dropdown, input, filter);
     this.symbol = symbol;
@@ -45,8 +44,7 @@ require('./filtered_search_dropdown');
     this.droplab
       .addHook(this.input, this.dropdown, [Ajax, Filter], this.config).init();
   }
-  }
+}
 
-  window.gl = window.gl || {};
-  gl.DropdownNonUser = DropdownNonUser;
-})();
+window.gl = window.gl || {};
+gl.DropdownNonUser = DropdownNonUser;

app/assets/javascripts/filtered_search/dropdown_user.js

@@ -4,8 +4,7 @@ import AjaxFilter from '~/droplab/plugins/ajax_filter';
 
 require('./filtered_search_dropdown');
 
-(() => {
-  class DropdownUser extends gl.FilteredSearchDropdown {
+class DropdownUser extends gl.FilteredSearchDropdown {
   constructor(droplab, dropdown, input, filter) {
     super(droplab, dropdown, input, filter);
     this.config = {
@@ -65,8 +64,7 @@ require('./filtered_search_dropdown');
   init() {
     this.droplab.addHook(this.input, this.dropdown, [AjaxFilter], this.config).init();
   }
-  }
+}
 
-  window.gl = window.gl || {};
-  gl.DropdownUser = DropdownUser;
-})();
+window.gl = window.gl || {};
+gl.DropdownUser = DropdownUser;

app/assets/javascripts/filtered_search/dropdown_utils.js

 import FilteredSearchContainer from './container';
 
-(() => {
-  class DropdownUtils {
+class DropdownUtils {
   static getEscapedText(text) {
     let escapedText = text;
     const hasSpace = text.indexOf(' ') !== -1;
@@ -176,8 +175,7 @@ import FilteredSearchContainer from './container';
       right,
     };
   }
-  }
+}
 
-  window.gl = window.gl || {};
-  gl.DropdownUtils = DropdownUtils;
-})();
+window.gl = window.gl || {};
+gl.DropdownUtils = DropdownUtils;

app/assets/javascripts/filtered_search/filtered_search_dropdown.js

-(() => {
-  const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger';
+const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger';
 
-  class FilteredSearchDropdown {
+class FilteredSearchDropdown {
   constructor(droplab, dropdown, input, filter) {
     this.droplab = droplab;
     this.hookId = input && input.id;
@@ -117,8 +116,7 @@
       hook.list.render(results);
     }
   }
-  }
+}
 
-  window.gl = window.gl || {};
-  gl.FilteredSearchDropdown = FilteredSearchDropdown;
-})();
+window.gl = window.gl || {};
+gl.FilteredSearchDropdown = FilteredSearchDropdown;

app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js

 import DropLab from '~/droplab/drop_lab';
 import FilteredSearchContainer from './container';
 
-(() => {
-  class FilteredSearchDropdownManager {
+class FilteredSearchDropdownManager {
   constructor(baseEndpoint = '', page) {
     this.container = FilteredSearchContainer.container;
     this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
@@ -184,8 +183,7 @@ import FilteredSearchContainer from './container';
   destroyDroplab() {
     this.droplab.destroy();
   }
-  }
+}
 
-  window.gl = window.gl || {};
-  gl.FilteredSearchDropdownManager = FilteredSearchDropdownManager;
-})();
+window.gl = window.gl || {};
+gl.FilteredSearchDropdownManager = FilteredSearchDropdownManager;

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -6,8 +6,7 @@ import RecentSearchesStore from './stores/recent_searches_store';
 import RecentSearchesService from './services/recent_searches_service';
 import eventHub from './event_hub';
 
-(() => {
-  class FilteredSearchManager {
+class FilteredSearchManager {
   constructor(page) {
     this.container = FilteredSearchContainer.container;
     this.filteredSearchInput = this.container.querySelector('.filtered-search');
@@ -344,6 +343,8 @@ import eventHub from './event_hub';
         const resultantSearches = this.recentSearchesStore.addRecentSearch(searchQuery);
         this.recentSearchesService.save(resultantSearches);
       }
+    }).catch(() => {
+      // https://gitlab.com/gitlab-org/gitlab-ce/issues/30821
     });
   }
 
@@ -487,8 +488,7 @@ import eventHub from './event_hub';
     this.filteredSearchInput.dispatchEvent(new CustomEvent('input'));
     this.search();
   }
-  }
+}
 
-  window.gl = window.gl || {};
-  gl.FilteredSearchManager = FilteredSearchManager;
-})();
+window.gl = window.gl || {};
+gl.FilteredSearchManager = FilteredSearchManager;

app/assets/javascripts/filtered_search/filtered_search_token_keys.js

-(() => {
-  const tokenKeys = [{
+const tokenKeys = [{
   key: 'author',
   type: 'string',
   param: 'username',
   symbol: '@',
-  }, {
+}, {
   key: 'assignee',
   type: 'string',
   param: 'username',
   symbol: '@',
-  }, {
+}, {
   key: 'milestone',
   type: 'string',
   param: 'title',
   symbol: '%',
-  }, {
+}, {
   key: 'label',
   type: 'array',
   param: 'name[]',
   symbol: '~',
-  }];
+}];
 
-  const alternativeTokenKeys = [{
+const alternativeTokenKeys = [{
   key: 'label',
   type: 'string',
   param: 'name',
   symbol: '~',
-  }];
+}];
 
-  const tokenKeysWithAlternative = tokenKeys.concat(alternativeTokenKeys);
+const tokenKeysWithAlternative = tokenKeys.concat(alternativeTokenKeys);
 
-  const conditions = [{
+const conditions = [{
   url: 'assignee_id=0',
   tokenKey: 'assignee',
   value: 'none',
-  }, {
+}, {
   url: 'milestone_title=No+Milestone',
   tokenKey: 'milestone',
   value: 'none',
-  }, {
+}, {
   url: 'milestone_title=%23upcoming',
   tokenKey: 'milestone',
   value: 'upcoming',
-  }, {
+}, {
   url: 'milestone_title=%23started',
   tokenKey: 'milestone',
   value: 'started',
-  }, {
+}, {
   url: 'label_name[]=No+Label',
   tokenKey: 'label',
   value: 'none',
-  }];
+}];
 
-  class FilteredSearchTokenKeys {
+class FilteredSearchTokenKeys {
   static get() {
     return tokenKeys;
   }
@@ -93,8 +92,7 @@
     return conditions
       .find(condition => condition.tokenKey === key && condition.value === value) || null;
   }
-  }
+}
 
-  window.gl = window.gl || {};
-  gl.FilteredSearchTokenKeys = FilteredSearchTokenKeys;
-})();
+window.gl = window.gl || {};
+gl.FilteredSearchTokenKeys = FilteredSearchTokenKeys;

app/assets/javascripts/filtered_search/filtered_search_tokenizer.js

 require('./filtered_search_token_keys');
 
-(() => {
-  class FilteredSearchTokenizer {
+class FilteredSearchTokenizer {
   static processTokens(input) {
     const allowedKeys = gl.FilteredSearchTokenKeys.get().map(i => i.key);
     // Regex extracts `(token):(symbol)(value)`
@@ -51,8 +50,7 @@ require('./filtered_search_token_keys');
       searchToken,
     };
   }
-  }
+}
 
-  window.gl = window.gl || {};
-  gl.FilteredSearchTokenizer = FilteredSearchTokenizer;
-})();
+window.gl = window.gl || {};
+gl.FilteredSearchTokenizer = FilteredSearchTokenizer;

app/assets/javascripts/groups_select.js

-/* eslint-disable func-names, space-before-function-paren, no-var, wrap-iife, one-var, camelcase, one-var-declaration-per-line, quotes, object-shorthand, prefer-arrow-callback, comma-dangle, consistent-return, yoda, prefer-rest-params, prefer-spread, no-unused-vars, prefer-template, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, wrap-iife, one-var,
+                  camelcase, one-var-declaration-per-line, quotes, object-shorthand,
+                  prefer-arrow-callback, comma-dangle, consistent-return, yoda,
+                  prefer-rest-params, prefer-spread, no-unused-vars, prefer-template,
+                  promise/catch-or-return */
 /* global Api */
 
 var slice = [].slice;

app/assets/javascripts/issuable_form.js

@@ -39,8 +39,9 @@
       if ($issuableDueDate.length) {
         calendar = new Pikaday({
           field: $issuableDueDate.get(0),
-          theme: 'gitlab-theme',
+          theme: 'gitlab-theme animate-picker',
           format: 'yyyy-mm-dd',
+          container: $issuableDueDate.parent().get(0),
           onSelect: function(dateText) {
             $issuableDueDate.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
           }

app/assets/javascripts/issue_show/issue_title.vue

@@ -34,17 +34,6 @@ export default {
     };
   },
   methods: {
-    fetch() {
-      this.poll.makeRequest();
-
-      Visibility.change(() => {
-        if (!Visibility.hidden()) {
-          this.poll.restart();
-        } else {
-          this.poll.stop();
-        }
-      });
-    },
     renderResponse(res) {
       const body = JSON.parse(res.body);
       this.triggerAnimation(body);
@@ -71,7 +60,17 @@ export default {
     },
   },
   created() {
-    this.fetch();
+    if (!Visibility.hidden()) {
+      this.poll.makeRequest();
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        this.poll.restart();
+      } else {
+        this.poll.stop();
+      }
+    });
   },
 };
 </script>

app/assets/javascripts/labels_select.js

@@ -332,6 +332,9 @@
           vue: $dropdown.hasClass('js-issue-board-sidebar'),
           clicked: function(label, $el, e, isMarking) {
             var isIssueIndex, isMRIndex, page, boardsModel;
+            var fadeOutLoader = () => {
+              $loading.fadeOut();
+            };
 
             page = $('body').data('page');
             isIssueIndex = page === 'projects:issues:index';
@@ -396,9 +399,8 @@
               $loading.fadeIn();
 
               gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
-                .then(function () {
-                  $loading.fadeOut();
-                });
+                .then(fadeOutLoader)
+                .catch(fadeOutLoader);
             }
             else {
               if ($dropdown.hasClass('js-multiselect')) {

app/assets/javascripts/lib/utils/common_utils.js

@@ -169,7 +169,10 @@
     w.gl.utils.getSelectedFragment = () => {
       const selection = window.getSelection();
       if (selection.rangeCount === 0) return null;
-      const documentFragment = selection.getRangeAt(0).cloneContents();
+      const documentFragment = document.createDocumentFragment();
+      for (let i = 0; i < selection.rangeCount; i += 1) {
+        documentFragment.appendChild(selection.getRangeAt(i).cloneContents());
+      }
       if (documentFragment.textContent.length === 0) return null;
 
       return documentFragment;
@@ -368,9 +371,9 @@
       });
     };
 
-    w.gl.utils.setFavicon = (iconName) => {
-      if (faviconEl && iconName) {
-        faviconEl.setAttribute('href', `/assets/${iconName}.ico`);
+    w.gl.utils.setFavicon = (faviconPath) => {
+      if (faviconEl && faviconPath) {
+        faviconEl.setAttribute('href', faviconPath);
       }
     };
 
@@ -385,8 +388,8 @@
         url: pageUrl,
         dataType: 'json',
         success: function(data) {
-          if (data && data.icon) {
-            gl.utils.setFavicon(`ci_favicons/${data.icon}`);
+          if (data && data.favicon) {
+            gl.utils.setFavicon(data.favicon);
           } else {
             gl.utils.resetFavicon();
           }

app/assets/javascripts/lib/utils/constants.js

+/* eslint-disable import/prefer-default-export */
+export const BYTES_IN_KIB = 1024;

app/assets/javascripts/lib/utils/number_utils.js

-/* eslint-disable import/prefer-default-export */
+import { BYTES_IN_KIB } from './constants';
 
 /**
  * Function that allows a number with an X amount of decimals
@@ -32,3 +32,13 @@ export function formatRelevantDigits(number) {
   }
   return formattedNumber;
 }
+
+/**
+ * Utility function that calculates KiB of the given bytes.
+ *
+ * @param  {Number} number bytes
+ * @return {Number}        KiB
+ */
+export function bytesToKiB(number) {
+  return number / BYTES_IN_KIB;
+}

app/assets/javascripts/main.js

@@ -165,6 +165,7 @@ import './syntax_highlight';
 import './task_list';
 import './todos';
 import './tree';
+import './usage_ping';
 import './user';
 import './user_tabs';
 import './username_validator';
@@ -210,6 +211,14 @@ $(function () {
     }
   });
 
+  if (bootstrapBreakpoint === 'xs') {
+    const $rightSidebar = $('aside.right-sidebar, .page-with-sidebar');
+
+    $rightSidebar
+      .removeClass('right-sidebar-expanded')
+      .addClass('right-sidebar-collapsed');
+  }
+
   // prevent default action for disabled buttons
   $('.btn').click(function(e) {
     if ($(this).hasClass('disabled')) {

app/assets/javascripts/member_expiration_date.js

@@ -18,9 +18,10 @@
 
       const calendar = new Pikaday({
         field: $input.get(0),
-        theme: 'gitlab-theme',
+        theme: 'gitlab-theme animate-picker',
         format: 'yyyy-mm-dd',
         minDate: new Date(),
+        container: $input.parent().get(0),
         onSelect(dateText) {
           $input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
 

app/assets/javascripts/merge_request_widget.js

@@ -157,7 +157,7 @@ import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
       $('.ci-widget-fetching').show();
       return $.getJSON(this.opts.ci_status_url, (function(_this) {
         return function(data) {
-          var message, status, title;
+          var message, status, title, callback;
           _this.status = data.status;
           _this.hasCi = data.has_ci;
           _this.updateMergeButton(_this.status, _this.hasCi);
@@ -179,6 +179,12 @@ import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
               _this.opts.ci_sha = data.sha;
               _this.updateCommitUrls(data.sha);
             }
+            if (data.status === "success" || data.status === "failed") {
+              callback = function() {
+                return _this.getMergeStatus();
+              };
+              return setTimeout(callback, 2000);
+            }
             if (showNotification && data.status) {
               status = _this.ciLabelForStatus(data.status);
               if (status === "preparing") {

app/assets/javascripts/milestone_select.js

@@ -164,6 +164,9 @@
                 .then(function () {
                   $dropdown.trigger('loaded.gl.dropdown');
                   $loading.fadeOut();
+                })
+                .catch(() => {
+                  $loading.fadeOut();
                 });
             } else {
               selected = $selectbox.find('input[type="hidden"]').val();

app/assets/javascripts/monitoring/prometheus_graph.js

@@ -71,6 +71,8 @@ class PrometheusGraph {
         this.transformData(metricsResponse);
         this.createGraph();
       }
+    }).catch(() => {
+      new Flash('An error occurred when trying to load metrics. Please try again.');
     });
   }
 

app/assets/javascripts/notes.js

@@ -308,8 +308,10 @@ require('./task_list');
 
       if (this.isNewNote(note)) {
         this.note_ids.push(note.id);
-        $notesList = $('ul.main-notes-list');
-        $notesList.append(note.html).syntaxHighlight();
+
+        $notesList = window.$('ul.main-notes-list');
+        Notes.animateAppendNote(note.html, $notesList);
+
         // Update datetime format on the recent note
         gl.utils.localTimeAgo($notesList.find("#note_" + note.id + " .js-timeago"), false);
         this.collapseLongCommitList();
@@ -348,7 +350,7 @@ require('./task_list');
       lineType = this.isParallelView() ? form.find('#line_type').val() : 'old';
       diffAvatarContainer = row.prevAll('.line_holder').first().find('.js-avatar-container.' + lineType + '_line');
       // is this the first note of discussion?
-      discussionContainer = $(".notes[data-discussion-id='" + note.discussion_id + "']");
+      discussionContainer = window.$(`.notes[data-discussion-id="${note.discussion_id}"]`);
       if (!discussionContainer.length) {
         discussionContainer = form.closest('.discussion').find('.notes');
       }
@@ -370,14 +372,13 @@ require('./task_list');
             row.find(contentContainerClass + ' .content').append($notes.closest('.content').children());
           }
         }
-
         // Init discussion on 'Discussion' page if it is merge request page
-        if ($('body').attr('data-page').indexOf('projects:merge_request') === 0 || !note.diff_discussion_html) {
-          $('ul.main-notes-list').append($(note.discussion_html).renderGFM());
+        if (window.$('body').attr('data-page').indexOf('projects:merge_request') === 0 || !note.diff_discussion_html) {
+          Notes.animateAppendNote(note.discussion_html, window.$('ul.main-notes-list'));
         }
       } else {
         // append new note to all matching discussions
-        discussionContainer.append($(note.html).renderGFM());
+        Notes.animateAppendNote(note.html, discussionContainer);
       }
 
       if (typeof gl.diffNotesCompileComponents !== 'undefined' && note.discussion_resolvable) {
@@ -1063,6 +1064,13 @@ require('./task_list');
       return $form;
     };
 
+    Notes.animateAppendNote = function(noteHTML, $notesList) {
+      const $note = window.$(noteHTML);
+
+      $note.addClass('fade-in').renderGFM();
+      $notesList.append($note);
+    };
+
     return Notes;
   })();
 }).call(window);

app/assets/javascripts/vue_pipelines_index/components/async_button.vue → app/assets/javascripts/pipelines/components/async_button.vue

@@ -65,6 +65,8 @@ export default {
     makeRequest() {
       this.isLoading = true;
 
+      $(this.$el).tooltip('destroy');
+
       this.service.postAction(this.endpoint)
         .then(() => {
           this.isLoading = false;
@@ -88,9 +90,13 @@ export default {
     :aria-label="title"
     data-container="body"
     data-placement="top"
-    :disabled="isLoading"
-  >
-    <i :class="iconClass" aria-hidden="true"></i>
-    <i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading"></i>
+    :disabled="isLoading">
+    <i
+      :class="iconClass"
+      aria-hidden="true" />
+    <i
+      class="fa fa-spinner fa-spin"
+      aria-hidden="true"
+      v-if="isLoading" />
   </button>
 </template>

app/assets/javascripts/vue_pipelines_index/components/empty_state.vue → app/assets/javascripts/pipelines/components/empty_state.vue

@@ -13,7 +13,7 @@ export default {
 </script>
 
 <template>
-  <div class="row empty-state">
+  <div class="row empty-state js-empty-state">
     <div class="col-xs-12">
       <div class="svg-content" v-html="pipelinesEmptyStateSVG" />
     </div>

app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js → app/assets/javascripts/pipelines/components/pipelines_actions.js

@@ -28,6 +28,8 @@ export default {
     onClickAction(endpoint) {
       this.isLoading = true;
 
+      $(this.$refs.tooltip).tooltip('destroy');
+
       this.service.postAction(endpoint)
       .then(() => {
         this.isLoading = false;
@@ -57,6 +59,7 @@ export default {
         data-toggle="dropdown"
         data-placement="top"
         aria-label="Manual job"
+        ref="tooltip"
         :disabled="isLoading">
         ${playIconSvg}
         <i

app/assets/javascripts/vue_pipelines_index/components/stage.js → app/assets/javascripts/pipelines/components/stage.js

 /* global Flash */
-import canceledSvg from 'icons/_icon_status_canceled_borderless.svg';
-import createdSvg from 'icons/_icon_status_created_borderless.svg';
-import failedSvg from 'icons/_icon_status_failed_borderless.svg';
-import manualSvg from 'icons/_icon_status_manual_borderless.svg';
-import pendingSvg from 'icons/_icon_status_pending_borderless.svg';
-import runningSvg from 'icons/_icon_status_running_borderless.svg';
-import skippedSvg from 'icons/_icon_status_skipped_borderless.svg';
-import successSvg from 'icons/_icon_status_success_borderless.svg';
-import warningSvg from 'icons/_icon_status_warning_borderless.svg';
+import StatusIconEntityMap from '../../ci_status_icons';
 
 export default {
   data() {
-    const svgsDictionary = {
-      icon_status_canceled: canceledSvg,
-      icon_status_created: createdSvg,
-      icon_status_failed: failedSvg,
-      icon_status_manual: manualSvg,
-      icon_status_pending: pendingSvg,
-      icon_status_running: runningSvg,
-      icon_status_skipped: skippedSvg,
-      icon_status_success: successSvg,
-      icon_status_warning: warningSvg,
-    };
-
     return {
       builds: '',
       spinner: '<span class="fa fa-spinner fa-spin"></span>',
-      svg: svgsDictionary[this.stage.status.icon],
     };
   },
 
@@ -89,6 +68,9 @@ export default {
     triggerButtonClass() {
       return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
     },
+    svgHTML() {
+      return StatusIconEntityMap[this.stage.status.icon];
+    },
   },
   template: `
     <div>
@@ -100,7 +82,7 @@ export default {
         data-toggle="dropdown"
         type="button"
         :aria-label="stage.title">
-        <span v-html="svg" aria-hidden="true"></span>
+        <span v-html="svgHTML" aria-hidden="true"></span>
         <i class="fa fa-caret-down" aria-hidden="true"></i>
       </button>
       <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">

app/assets/javascripts/shortcuts.js

@@ -57,8 +57,11 @@ import findAndFollowLink from './shortcuts_dashboard_navigation';
 
     Shortcuts.prototype.toggleMarkdownPreview = function(e) {
       // Check if short-cut was triggered while in Write Mode
-      if ($(e.target).hasClass('js-note-text')) {
-        $('.js-md-preview-button').focus();
+      const $target = $(e.target);
+      const $form = $target.closest('form');
+
+      if ($target.hasClass('js-note-text')) {
+        $('.js-md-preview-button', $form).focus();
       }
       return $(document).triggerHandler('markdown-preview:toggle', [e]);
     };

app/assets/javascripts/shortcuts_wiki.js

+/* eslint-disable class-methods-use-this */
+/* global Mousetrap */
+/* global ShortcutsNavigation */
+
+import findAndFollowLink from './shortcuts_dashboard_navigation';
+
+export default class ShortcutsWiki extends ShortcutsNavigation {
+  constructor() {
+    super();
+    Mousetrap.bind('e', this.editWiki);
+  }
+
+  editWiki() {
+    findAndFollowLink('.js-wiki-edit');
+  }
+}

app/assets/javascripts/usage_ping.js

+function UsagePing() {
+  const usageDataUrl = $('.usage-data').data('endpoint');
+
+  $.ajax({
+    type: 'GET',
+    url: usageDataUrl,
+    dataType: 'html',
+    success(html) {
+      $('.usage-data').html(html);
+    },
+  });
+}
+
+window.gl = window.gl || {};
+window.gl.UsagePing = UsagePing;

app/assets/javascripts/user_tabs.js

@@ -94,15 +94,17 @@ content on the Users#show page.
       e.preventDefault();
 
       $('.tab-pane.active').empty();
-      this.loadTab($(e.target).attr('href'), this.getCurrentAction());
+      const endpoint = $(e.target).attr('href');
+      this.loadTab(this.getCurrentAction(), endpoint);
     }
 
     tabShown(event) {
       const $target = $(event.target);
       const action = $target.data('action');
       const source = $target.attr('href');
-      this.setTab(source, action);
-      return this.setCurrentAction(source, action);
+      const endpoint = $target.data('endpoint');
+      this.setTab(action, endpoint);
+      return this.setCurrentAction(source);
     }
 
     activateTab(action) {
@@ -110,27 +112,27 @@ content on the Users#show page.
         .tab('show');
     }
 
-    setTab(source, action) {
+    setTab(action, endpoint) {
       if (this.loaded[action]) {
         return;
       }
       if (action === 'activity') {
-        this.loadActivities(source);
+        this.loadActivities();
       }
 
       const loadableActions = ['groups', 'contributed', 'projects', 'snippets'];
       if (loadableActions.indexOf(action) > -1) {
-        return this.loadTab(source, action);
+        return this.loadTab(action, endpoint);
       }
     }
 
-    loadTab(source, action) {
+    loadTab(action, endpoint) {
       return $.ajax({
         beforeSend: () => this.toggleLoading(true),
         complete: () => this.toggleLoading(false),
         dataType: 'json',
         type: 'GET',
-        url: source,
+        url: endpoint,
         success: (data) => {
           const tabSelector = `div#${action}`;
           this.$parentEl.find(tabSelector).html(data.html);
@@ -140,7 +142,7 @@ content on the Users#show page.
       });
     }
 
-    loadActivities(source) {
+    loadActivities() {
       if (this.loaded['activity']) {
         return;
       }
@@ -155,7 +157,7 @@ content on the Users#show page.
         .toggle(status);
     }
 
-    setCurrentAction(source, action) {
+    setCurrentAction(source) {
       let new_state = source;
       new_state = new_state.replace(/\/+$/, '');
       new_state += this._location.search + this._location.hash;

app/assets/javascripts/users_select.js

@@ -56,6 +56,9 @@
             gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
               .then(function () {
                 $loading.fadeOut();
+              })
+              .catch(function () {
+                $loading.fadeOut();
               });
           };
 

app/assets/javascripts/vue_shared/components/pipelines_table_row.js

 /* eslint-disable no-param-reassign */
 
-import AsyncButtonComponent from '../../vue_pipelines_index/components/async_button.vue';
-import PipelinesActionsComponent from '../../vue_pipelines_index/components/pipelines_actions';
-import PipelinesArtifactsComponent from '../../vue_pipelines_index/components/pipelines_artifacts';
-import PipelinesStatusComponent from '../../vue_pipelines_index/components/status';
-import PipelinesStageComponent from '../../vue_pipelines_index/components/stage';
-import PipelinesUrlComponent from '../../vue_pipelines_index/components/pipeline_url';
-import PipelinesTimeagoComponent from '../../vue_pipelines_index/components/time_ago';
+import AsyncButtonComponent from '../../pipelines/components/async_button.vue';
+import PipelinesActionsComponent from '../../pipelines/components/pipelines_actions';
+import PipelinesArtifactsComponent from '../../pipelines/components/pipelines_artifacts';
+import PipelinesStatusComponent from '../../pipelines/components/status';
+import PipelinesStageComponent from '../../pipelines/components/stage';
+import PipelinesUrlComponent from '../../pipelines/components/pipeline_url';
+import PipelinesTimeagoComponent from '../../pipelines/components/time_ago';
 import CommitComponent from './commit';
 
 /**

app/assets/stylesheets/framework/animations.scss

@@ -145,3 +145,17 @@ a {
 .dropdown-menu-nav a {
   transition: none;
 }
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  animation: fadeIn $fade-in-duration 1;
+}