Merge branch 'master' into 42611-removed-branch-link

* master: (1252 commits)
  Render log artifact files in GitLab
  Check disabled_services when finding a service
  Fix invalid parent path on group settings page
  Backport CE changes for: [Frontend only] Batch comments on merge requests
  Add button to insert table in markdown editor
  Update GITALY_SERVER_VERSION
  Updates Laravel.gitlab-ci.yml template
  Update operations metrics empty state
  Fix LFS uploaded images not being rendered
  Prepare admin/projects/show view to allow EE specific feature
  Add timed incremental rollout to Auto DevOps
  Update spec comment to point to correct issue
  Fix documentation for variables
  Document Security and Licence Management features permissions
  Fix time dependent jobs spec
  Use a CTE to remove the query timeout
  Backport changes from gitlab-ee!7538
  Fix CE to EE merge (backport)
  Add changelog entry
  Refactor Feature.flipper method
  ...

25 files changed, 463 insertions, 143 deletions

diff --git a/app/assets/javascripts/vue_shared/components/bar_chart.vue b/app/assets/javascripts/vue_shared/components/bar_chart.vue
index 3ced4eb691a..33af7a7f1df 100644
--- a/app/assets/javascripts/vue_shared/components/bar_chart.vue
+++ b/app/assets/javascripts/vue_shared/components/bar_chart.vue
@@ -291,8 +291,8 @@ export default {
         <template
           v-for="(data, index) in graphData">
           <rect
-            v-tooltip
             :key="index"
+            v-tooltip
             :width="xScale.bandwidth()"
             :x="xScale(data.name)"
             :y="yScale(data.value)"
diff --git a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
new file mode 100644
index 00000000000..8684005e0fb
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
@@ -0,0 +1,112 @@
+<script>
+import tooltip from '~/vue_shared/directives/tooltip';
+import Icon from '~/vue_shared/components/icon.vue';
+import { pluralize } from '~/lib/utils/text_utility';
+import { __, sprintf } from '~/locale';
+import { getCommitIconMap } from '~/ide/utils';
+
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+    showTooltip: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showStagedIcon: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    forceModifiedIcon: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    size: {
+      type: Number,
+      required: false,
+      default: 12,
+    },
+  },
+  computed: {
+    changedIcon() {
+      const suffix = !this.file.changed && this.file.staged && !this.showStagedIcon ? '-solid' : '';
+
+      if (this.forceModifiedIcon) return `file-modified${suffix}`;
+
+      return `${getCommitIconMap(this.file).icon}${suffix}`;
+    },
+    changedIconClass() {
+      return `${this.changedIcon} float-left d-block`;
+    },
+    tooltipTitle() {
+      if (!this.showTooltip) return undefined;
+
+      const type = this.file.tempFile ? 'addition' : 'modification';
+
+      if (this.file.changed && !this.file.staged) {
+        return sprintf(__('Unstaged %{type}'), {
+          type,
+        });
+      } else if (!this.file.changed && this.file.staged) {
+        return sprintf(__('Staged %{type}'), {
+          type,
+        });
+      } else if (this.file.changed && this.file.staged) {
+        return sprintf(__('Unstaged and staged %{type}'), {
+          type: pluralize(type),
+        });
+      }
+
+      return undefined;
+    },
+    showIcon() {
+      return this.file.changed || this.file.tempFile || this.file.staged || this.file.deleted;
+    },
+  },
+};
+</script>
+
+<template>
+  <span
+    v-tooltip
+    :title="tooltipTitle"
+    data-container="body"
+    data-placement="right"
+    class="file-changed-icon ml-auto"
+  >
+    <icon
+      v-if="showIcon"
+      :name="changedIcon"
+      :size="size"
+      :css-classes="changedIconClass"
+    />
+  </span>
+</template>
+
+<style>
+.file-addition,
+.file-addition-solid {
+  color: #1aaa55;
+}
+
+.file-modified,
+.file-modified-solid {
+  color: #fc9403;
+}
+
+.file-deletion,
+.file-deletion-solid {
+  color: #db3b21;
+}
+</style>
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
index f1ef50d0e3d..a07d63a495d 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
@@ -1,9 +1,11 @@
 <script>
+import { Link } from '@gitlab-org/gitlab-ui';
 import Icon from '../../icon.vue';
 import { numberToHumanSize } from '../../../../lib/utils/number_utils';
 
 export default {
   components: {
+    'gl-link': Link,
     Icon,
   },
   props: {
@@ -37,7 +39,7 @@ export default {
           ({{ fileSizeReadable }})
         </template>
       </p>
-      <a
+      <gl-link
         :href="path"
         class="btn btn-default"
         rel="nofollow"
@@ -49,7 +51,7 @@ export default {
           css-classes="float-left append-right-8"
         />
         {{ __('Download') }}
-      </a>
+      </gl-link>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
index a10deb93f0f..807e049caf6 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
@@ -2,14 +2,14 @@
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import $ from 'jquery';
-import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import { SkeletonLoading } from '@gitlab-org/gitlab-ui';
 
 const { CancelToken } = axios;
 let axiosSource;
 
 export default {
   components: {
-    SkeletonLoadingContainer,
+    SkeletonLoading,
   },
   props: {
     content: {
@@ -81,7 +81,7 @@ export default {
   <div
     ref="markdown-preview"
     class="md md-previewer">
-    <skeleton-loading-container v-if="isLoading" />
+    <skeleton-loading v-if="isLoading" />
     <div
       v-else
       v-html="previewContent">
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
index d3cbe3c7e74..cfc5343217c 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
@@ -46,7 +46,7 @@ export default {
       }
     },
     basePath() {
-      // We might get the project path from rails with the relative url already setup
+      // We might get the project path from rails with the relative url already set up
       return this.projectPath.indexOf('/') === 0 ? '' : `${gon.relative_url_root}/`;
     },
     fullOldPath() {
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
index af5ebcdc40a..31087017968 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
@@ -1,11 +1,7 @@
 <script>
 import { __ } from '~/locale';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 
 export default {
-  components: {
-    LoadingIcon,
-  },
   props: {
     isDisabled: {
       type: Boolean,
@@ -34,7 +30,7 @@ export default {
     data-toggle="dropdown"
     aria-expanded="false"
   >
-    <loading-icon
+    <gl-loading-icon
       v-show="isLoading"
       :inline="true"
     />
diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index 878c805ada5..408f7d7965f 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -1,6 +1,5 @@
 <script>
 import getIconForFile from './file_icon/file_icon_map';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import icon from '../../vue_shared/components/icon.vue';
 
 /* This is a re-usable vue component for rendering a svg sprite
@@ -17,7 +16,6 @@ import icon from '../../vue_shared/components/icon.vue';
   */
 export default {
   components: {
-    loadingIcon,
     icon,
   },
   props: {
@@ -84,7 +82,7 @@ export default {
       :size="size"
       css-classes="folder-icon"
     />
-    <loading-icon
+    <gl-loading-icon
       v-if="loading"
       :inline="true"
     />
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
new file mode 100644
index 00000000000..36a345130c0
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -0,0 +1,237 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
+import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
+
+export default {
+  name: 'FileRow',
+  components: {
+    FileIcon,
+    Icon,
+    ChangedFileIcon,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+    level: {
+      type: Number,
+      required: true,
+    },
+    extraComponent: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    hideExtraOnTree: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showChangedIcon: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      mouseOver: false,
+    };
+  },
+  computed: {
+    isTree() {
+      return this.file.type === 'tree';
+    },
+    isBlob() {
+      return this.file.type === 'blob';
+    },
+    levelIndentation() {
+      return {
+        marginLeft: `${this.level * 16}px`,
+      };
+    },
+    fileClass() {
+      return {
+        'file-open': this.isBlob && this.file.opened,
+        'is-active': this.isBlob && this.file.active,
+        folder: this.isTree,
+        'is-open': this.file.opened,
+      };
+    },
+  },
+  watch: {
+    'file.active': function fileActiveWatch(active) {
+      if (this.file.type === 'blob' && active) {
+        this.scrollIntoView();
+      }
+    },
+  },
+  mounted() {
+    if (this.hasPathAtCurrentRoute()) {
+      this.scrollIntoView(true);
+    }
+  },
+  methods: {
+    toggleTreeOpen(path) {
+      this.$emit('toggleTreeOpen', path);
+    },
+    clickedFile(path) {
+      this.$emit('clickFile', path);
+    },
+    clickFile() {
+      // Manual Action if a tree is selected/opened
+      if (this.isTree && this.hasUrlAtCurrentRoute()) {
+        this.toggleTreeOpen(this.file.path);
+      }
+
+      if (this.$router) this.$router.push(`/project${this.file.url}`);
+
+      if (this.isBlob) this.clickedFile(this.file.path);
+    },
+    scrollIntoView(isInit = false) {
+      const block = isInit && this.isTree ? 'center' : 'nearest';
+
+      this.$el.scrollIntoView({
+        behavior: 'smooth',
+        block,
+      });
+    },
+    hasPathAtCurrentRoute() {
+      if (!this.$router || !this.$router.currentRoute) {
+        return false;
+      }
+
+      // - strip route up to "/-/" and ending "/"
+      const routePath = this.$router.currentRoute.path
+        .replace(/^.*?[/]-[/]/g, '')
+        .replace(/[/]$/g, '');
+
+      // - strip ending "/"
+      const filePath = this.file.path.replace(/[/]$/g, '');
+
+      return filePath === routePath;
+    },
+    hasUrlAtCurrentRoute() {
+      if (!this.$router || !this.$router.currentRoute) return true;
+
+      return this.$router.currentRoute.path === `/project${this.file.url}`;
+    },
+    toggleHover(over) {
+      this.mouseOver = over;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      :class="fileClass"
+      class="file-row"
+      role="button"
+      @click="clickFile"
+      @mouseover="toggleHover(true)"
+      @mouseout="toggleHover(false)"
+    >
+      <div
+        class="file-row-name-container"
+      >
+        <span
+          :style="levelIndentation"
+          class="file-row-name str-truncated"
+        >
+          <file-icon
+            v-if="!showChangedIcon || file.type === 'tree'"
+            :file-name="file.name"
+            :loading="file.loading"
+            :folder="isTree"
+            :opened="file.opened"
+            :size="16"
+          />
+          <changed-file-icon
+            v-else
+            :file="file"
+            :size="16"
+            class="append-right-5"
+          />
+          {{ file.name }}
+        </span>
+        <component
+          :is="extraComponent"
+          v-if="extraComponent && !(hideExtraOnTree && file.type === 'tree')"
+          :file="file"
+          :mouse-over="mouseOver"
+        />
+      </div>
+    </div>
+    <template v-if="file.opened">
+      <file-row
+        v-for="childFile in file.tree"
+        :key="childFile.key"
+        :file="childFile"
+        :level="level + 1"
+        :hide-extra-on-tree="hideExtraOnTree"
+        :extra-component="extraComponent"
+        :show-changed-icon="showChangedIcon"
+        @toggleTreeOpen="toggleTreeOpen"
+        @clickFile="clickedFile"
+      />
+    </template>
+  </div>
+</template>
+
+<style>
+.file-row {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 4px 8px;
+  margin-left: -8px;
+  margin-right: -8px;
+  border-radius: 3px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.file-row:hover,
+.file-row:focus {
+  background: #f2f2f2;
+}
+
+.file-row:active {
+  background: #dfdfdf;
+}
+
+.file-row.is-active {
+  background: #f2f2f2;
+}
+
+.file-row-name-container {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  overflow: visible;
+}
+
+.file-row-name {
+  display: inline-block;
+  flex: 1;
+  max-width: inherit;
+  height: 18px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-row-name svg {
+  margin-right: 2px;
+  vertical-align: middle;
+}
+
+.file-row-name .loading-container {
+  display: inline-block;
+  margin-right: 4px;
+}
+</style>
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index 49fbce75110..b371b6adf7e 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -1,6 +1,5 @@
 <script>
 import CiIconBadge from './ci_badge_link.vue';
-import LoadingIcon from './loading_icon.vue';
 import TimeagoTooltip from './time_ago_tooltip.vue';
 import tooltip from '../directives/tooltip';
 import UserAvatarImage from './user_avatar/user_avatar_image.vue';
@@ -15,7 +14,6 @@ import UserAvatarImage from './user_avatar/user_avatar_image.vue';
 export default {
   components: {
     CiIconBadge,
-    LoadingIcon,
     TimeagoTooltip,
     UserAvatarImage,
   },
@@ -128,18 +126,18 @@ export default {
       >
         <a
           v-if="action.type === 'link'"
+          :key="i"
           :href="action.path"
           :class="action.cssClass"
-          :key="i"
         >
           {{ action.label }}
         </a>
 
         <a
           v-else-if="action.type === 'ujs-link'"
+          :key="i"
           :href="action.path"
           :class="action.cssClass"
-          :key="i"
           data-method="post"
           rel="nofollow"
         >
@@ -148,9 +146,9 @@ export default {
 
         <button
           v-else-if="action.type === 'button'"
+          :key="i"
           :disabled="action.isLoading"
           :class="action.cssClass"
-          :key="i"
           type="button"
           @click="onClickAction(action)"
         >
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
index 2ff0c056b9c..4cbd3e6429d 100644
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_button.vue
@@ -17,12 +17,7 @@
 
   */
 
-  import loadingIcon from './loading_icon.vue';
-
   export default {
-    components: {
-      loadingIcon,
-    },
     props: {
       loading: {
         type: Boolean,
@@ -60,7 +55,7 @@
     @click="onClick"
   >
     <transition name="fade">
-      <loading-icon
+      <gl-loading-icon
         v-if="loading"
         :inline="true"
         :class="{
diff --git a/app/assets/javascripts/vue_shared/components/loading_icon.vue b/app/assets/javascripts/vue_shared/components/loading_icon.vue
deleted file mode 100644
index db22c5f02cd..00000000000
--- a/app/assets/javascripts/vue_shared/components/loading_icon.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script>
-  export default {
-    props: {
-      label: {
-        type: String,
-        required: false,
-        default: 'Loading',
-      },
-
-      size: {
-        type: String,
-        required: false,
-        default: '1',
-      },
-
-      inline: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-    },
-
-    computed: {
-      rootElementType() {
-        return this.inline ? 'span' : 'div';
-      },
-      cssClass() {
-        return `fa-${this.size}x`;
-      },
-    },
-  };
-</script>
-<template>
-  <component
-    :is="rootElementType"
-    class="loading-container text-center">
-    <i
-      :class="cssClass"
-      :aria-label="label"
-      class="fa fa-spin fa-spinner"
-      aria-hidden="true"
-    >
-    </i>
-  </component>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index d62537021ca..10e8ddad9cd 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -76,6 +76,7 @@
         epics: this.enableAutocomplete,
         milestones: this.enableAutocomplete,
         labels: this.enableAutocomplete,
+        snippets: this.enableAutocomplete,
       });
     },
     beforeDestroy() {
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 8c22f3f6536..ccd53158820 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -18,6 +18,16 @@
         required: true,
       },
     },
+    computed: {
+      mdTable() {
+        return [
+          '| header | header |',
+          '| ------ | ------ |',
+          '| cell | cell |',
+          '| cell | cell |',
+        ].join('\n');
+      },
+    },
     mounted() {
       $(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
       $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
@@ -106,6 +116,12 @@
           icon="code"
         />
         <toolbar-button
+          tag="[{text}](url)"
+          tag-select="url"
+          button-title="Add a link"
+          icon="link"
+        />
+        <toolbar-button
           :prepend="true"
           tag="* "
           button-title="Add a bullet list"
@@ -123,6 +139,12 @@
           button-title="Add a task list"
           icon="task-done"
         />
+        <toolbar-button
+          :tag="mdTable"
+          :prepend="true"
+          :button-title="__('Add a table')"
+          icon="table"
+        />
         <button
           v-tooltip
           aria-label="Go full screen"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index d63318f3da6..c45dafa9807 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -1,5 +1,10 @@
 <script>
+  import { Link } from '@gitlab-org/gitlab-ui';
+
   export default {
+    components: {
+      'gl-link': Link,
+    },
     props: {
       markdownDocsPath: {
         type: String,
@@ -28,30 +33,30 @@
   <div class="comment-toolbar clearfix">
     <div class="toolbar-text">
       <template v-if="!hasQuickActionsDocsPath && markdownDocsPath">
-        <a
+        <gl-link
           :href="markdownDocsPath"
           target="_blank"
           tabindex="-1"
         >
           Markdown is supported
-        </a>
+        </gl-link>
       </template>
       <template v-if="hasQuickActionsDocsPath && markdownDocsPath">
-        <a
+        <gl-link
           :href="markdownDocsPath"
           target="_blank"
           tabindex="-1"
         >
           Markdown
-        </a>
+        </gl-link>
         and
-        <a
+        <gl-link
           :href="quickActionsDocsPath"
           target="_blank"
           tabindex="-1"
         >
           quick actions
-        </a>
+        </gl-link>
         are supported
       </template>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index 9f1e009efdd..bda33636369 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -27,6 +27,11 @@
         required: false,
         default: '',
       },
+      tagSelect: {
+        type: String,
+        required: false,
+        default: '',
+      },
       prepend: {
         type: Boolean,
         required: false,
@@ -40,6 +45,7 @@
   <button
     v-tooltip
     :data-md-tag="tag"
+    :data-md-select="tagSelect"
     :data-md-block="tagBlock"
     :data-md-prepend="prepend"
     :title="buttonTitle"
diff --git a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
index 2eb6c20b2c0..1d9c9220469 100644
--- a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
@@ -1,3 +1,14 @@
+<script>
+import { SkeletonLoading } from '@gitlab-org/gitlab-ui';
+
+export default {
+  name: 'SkeletonNote',
+  components: {
+    SkeletonLoading,
+  },
+};
+</script>
+
 <template>
   <li class="timeline-entry note">
     <div class="timeline-entry-inner">
@@ -6,20 +17,9 @@
       <div class="timeline-content">
         <div class="note-header"></div>
         <div class="note-body">
-          <skeleton-loading-container />
+          <skeleton-loading />
         </div>
       </div>
     </div>
   </li>
 </template>
-
-<script>
-import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-
-export default {
-  name: 'SkeletonNote',
-  components: {
-    skeletonLoadingContainer,
-  },
-};
-</script>
diff --git a/app/assets/javascripts/vue_shared/components/pagination_links.vue b/app/assets/javascripts/vue_shared/components/pagination_links.vue
new file mode 100644
index 00000000000..1f2a679c145
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/pagination_links.vue
@@ -0,0 +1,34 @@
+<script>
+import { s__ } from '../../locale';
+
+export default {
+  props: {
+    change: {
+      type: Function,
+      required: true,
+    },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  firstText: s__('Pagination|« First'),
+  prevText: s__('Pagination|Prev'),
+  nextText: s__('Pagination|Next'),
+  lastText: s__('Pagination|Last »'),
+};
+</script>
+
+<template>
+  <gl-pagination
+    v-bind="$attrs"
+    :change="change"
+    :page="pageInfo.page"
+    :per-page="pageInfo.perPage"
+    :total-items="pageInfo.total"
+    :first-text="$options.firstText"
+    :prev-text="$options.prevText"
+    :next-text="$options.nextText"
+    :last-text="$options.lastText"
+  />
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
index 74998a4787d..9d757b27edc 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
@@ -1,6 +1,5 @@
 <script>
   import datePicker from '../pikaday.vue';
-  import loadingIcon from '../loading_icon.vue';
   import toggleSidebar from './toggle_sidebar.vue';
   import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
   import { dateInWords } from '../../../lib/utils/datetime_utility';
@@ -10,7 +9,6 @@
     components: {
       datePicker,
       toggleSidebar,
-      loadingIcon,
       collapsedCalendarIcon,
     },
     props: {
@@ -112,7 +110,7 @@
     />
     <div class="title">
       {{ label }}
-      <loading-icon
+      <gl-loading-icon
         v-if="isLoading"
         :inline="true"
       />
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
index a3fc358130f..3df286de129 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
@@ -3,7 +3,6 @@ import $ from 'jquery';
 import { __ } from '~/locale';
 import LabelsSelect from '~/labels_select';
 import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
-import LoadingIcon from '../../loading_icon.vue';
 
 import DropdownTitle from './dropdown_title.vue';
 import DropdownValue from './dropdown_value.vue';
@@ -16,7 +15,6 @@ import DropdownCreateLabel from './dropdown_create_label.vue';
 
 export default {
   components: {
-    LoadingIcon,
     DropdownTitle,
     DropdownValue,
     DropdownValueCollapsed,
@@ -164,7 +162,7 @@ dropdown-menu-labels dropdown-menu-selectable"
             <dropdown-search-input/>
             <div class="dropdown-content"></div>
             <div class="dropdown-loading">
-              <loading-icon />
+              <gl-loading-icon />
             </div>
             <dropdown-footer
               v-if="showCreate"
diff --git a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
deleted file mode 100644
index 4a5ffbe5d5a..00000000000
--- a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script>
-  export default {
-    props: {
-      small: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      lines: {
-        type: Number,
-        required: false,
-        default: 3,
-      },
-    },
-    computed: {
-      lineClasses() {
-        return new Array(this.lines).fill().map((_, i) => `skeleton-line-${i + 1}`);
-      },
-    },
-  };
-</script>
-
-<template>
-  <div
-    :class="{
-      'animation-container-small': small,
-    }"
-    class="animation-container"
-  >
-    <div
-      v-for="(css, index) in lineClasses"
-      :key="index"
-      :class="css"
-    >
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
index 78fde463507..cd3ee544344 100644
--- a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
+++ b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
@@ -99,8 +99,8 @@ export default {
       {{ __("Not available") }}
     </span>
     <span
-      v-tooltip
       v-if="successPercent"
+      v-tooltip
       :title="successTooltip"
       :style="successBarStyle"
       class="status-green"
@@ -109,8 +109,8 @@ export default {
       {{ successPercent }}%
     </span>
     <span
-      v-tooltip
       v-if="neutralPercent"
+      v-tooltip
       :title="neutralTooltip"
       :style="neutralBarStyle"
       class="status-neutral"
@@ -119,8 +119,8 @@ export default {
       {{ neutralPercent }}%
     </span>
     <span
-      v-tooltip
       v-if="failurePercent"
+      v-tooltip
       :title="failureTooltip"
       :style="failureBarStyle"
       class="status-red"
diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue
index a897300b62b..5b9c51786d6 100644
--- a/app/assets/javascripts/vue_shared/components/toggle_button.vue
+++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue
@@ -1,7 +1,6 @@
 <script>
   import { s__ } from '../../locale';
   import icon from './icon.vue';
-  import loadingIcon from './loading_icon.vue';
 
   const ICON_ON = 'status_success_borderless';
   const ICON_OFF = 'status_failed_borderless';
@@ -11,7 +10,6 @@
   export default {
     components: {
       icon,
-      loadingIcon,
     },
 
     model: {
@@ -78,7 +76,7 @@
       class="project-feature-toggle"
       @click="toggleFeature"
     >
-      <loadingIcon class="loading-icon" />
+      <gl-loading-icon class="loading-icon" />
       <span class="toggle-icon">
         <icon
           :name="toggleIcon"
diff --git a/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue b/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue
index 125826da6c3..d5b58574123 100644
--- a/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue
+++ b/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue
@@ -51,8 +51,8 @@ export default {
 
 <template>
   <span
-    v-tooltip
     v-if="showTooltip"
+    v-tooltip
     :title="title"
     :data-placement="placement"
     class="js-show-tooltip"
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
index 01c36fec41a..ee3157bcb1b 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
@@ -18,12 +18,14 @@
 
 */
 
+import { Link } from '@gitlab-org/gitlab-ui';
 import userAvatarImage from './user_avatar_image.vue';
 import tooltip from '../../directives/tooltip';
 
 export default {
   name: 'UserAvatarLink',
   components: {
+    'gl-link': Link,
     userAvatarImage,
   },
   directives: {
@@ -83,7 +85,7 @@ export default {
 </script>
 
 <template>
-  <a
+  <gl-link
     :href="linkHref"
     class="user-avatar-link">
     <user-avatar-image
@@ -94,10 +96,10 @@ export default {
       :tooltip-text="avatarTooltipText"
       :tooltip-placement="tooltipPlacement"
     /><span
-      v-tooltip
       v-if="shouldShowUsername"
+      v-tooltip
       :title="tooltipText"
       :tooltip-placement="tooltipPlacement"
     >{{ username }}</span>
-  </a>
+  </gl-link>
 </template>
diff --git a/app/assets/javascripts/vue_shared/vue_resource_interceptor.js b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
index 73b9131e5ba..b9693892f45 100644
--- a/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
+++ b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
@@ -28,7 +28,7 @@ Vue.http.interceptors.push((request, next) => {
     response.headers.forEach((value, key) => {
       headers[key] = value;
     });
-
+    // eslint-disable-next-line no-param-reassign
     response.headers = headers;
   });
 });