From f7e909f58eedd02e548e25925e5fae1559d24030 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Mon, 7 Feb 2022 06:07:37 +0300
Subject: [PATCH 1/4] POC: Diffs streaming

---
 app/assets/javascripts/actioncable_link.js    |   4 +-
 .../behaviors/markdown/copy_as_gfm.js         |   2 +-
 .../javascripts/diffs/components/app.vue      | 189 ++++++----
 .../diffs/components/batch_fetcher.vue        |  61 ++++
 .../components/compare_dropdown_layout.vue    |   1 +
 .../diffs/components/compare_versions.vue     |   5 +-
 .../diffs/components/diff_content.vue         |   3 +-
 .../diffs/components/diff_file.vue            |   4 +-
 .../diffs/components/diff_file_header.vue     |   4 +-
 .../diffs/components/diff_view.vue            |   2 +-
 .../diffs/components/no_changes.vue           |   1 +
 .../diffs/components/settings_dropdown.vue    |   1 +
 .../diffs/components/tree_list.vue            |   2 +-
 app/assets/javascripts/diffs/index.js         | 140 ++++----
 app/assets/javascripts/diffs/store/actions.js |  79 +++--
 app/assets/javascripts/diffs/store/getters.js |   1 +
 app/assets/javascripts/diffs/streaming.js     |  32 ++
 .../javascripts/diffs/utils/file_reviews.js   |   1 +
 app/assets/javascripts/dompurify.js           |   3 +
 app/assets/javascripts/entry-server.js        |   6 +
 app/assets/javascripts/gl_form.js             |   9 +-
 app/assets/javascripts/lib/dompurify.js       |  84 ++---
 app/assets/javascripts/lib/graphql.js         |  36 +-
 app/assets/javascripts/lib/utils/accessor.js  |   1 +
 .../lib/utils/axios_startup_calls.js          |   4 +-
 .../javascripts/lib/utils/axios_utils.js      |   3 +
 .../javascripts/lib/utils/color_utils.js      |   4 +-
 app/assets/javascripts/lib/utils/csrf.js      |   4 +
 .../lib/utils/is_navigating_away.js           |   6 +-
 .../javascripts/lib/utils/jquery_at_who.js    |   6 +-
 .../javascripts/lib/utils/url_utility.js      |  10 +-
 app/assets/javascripts/locale/index.js        |  13 +-
 app/assets/javascripts/mr_notes/index.js      |   6 +-
 .../javascripts/mr_notes/stores/index.js      |   4 +-
 .../mr_notes/stores/modules/index.js          |   4 +-
 .../mr_popover/components/mr_popover.vue      |   2 +-
 .../notes/components/note_body.vue            |   4 +-
 .../javascripts/notes/stores/actions.js       |  26 +-
 app/assets/javascripts/pikaday.js             |  13 +
 .../commit_pipeline_status_component.vue      |   5 +-
 .../sidebar_confidentiality_widget.vue        |   8 +-
 app/assets/javascripts/sidebar/event_hub.js   |   2 +-
 app/assets/javascripts/task_list.js           |   4 +-
 app/assets/javascripts/user_popovers.js       |  15 +-
 .../vue_shared/components/markdown/field.vue  |   4 +-
 .../components/user_popover/user_popover.vue  |   2 +-
 app/assets/stylesheets/framework/diffs.scss   |   3 +
 .../merge_requests/diffs_controller.rb        |   3 +
 app/helpers/merge_requests_helper.rb          |  17 +-
 config/webpack.config.js                      |   4 +-
 config/webpack.ssr.config.js                  | 226 ++++++++++++
 db/structure.sql                              |   2 +-
 .../assets/javascripts/diffs/store/actions.js |  25 +-
 .../content_security_policy/config_loader.rb  |   1 +
 package.json                                  |   8 +-
 server.js                                     |  36 ++
 test.http                                     |   3 +
 yarn.lock                                     | 333 +++++++++++++++++-
 58 files changed, 1164 insertions(+), 317 deletions(-)
 create mode 100644 app/assets/javascripts/diffs/components/batch_fetcher.vue
 create mode 100644 app/assets/javascripts/diffs/streaming.js
 create mode 100644 app/assets/javascripts/dompurify.js
 create mode 100644 app/assets/javascripts/entry-server.js
 create mode 100644 app/assets/javascripts/pikaday.js
 create mode 100644 config/webpack.ssr.config.js
 create mode 100644 server.js
 create mode 100644 test.http

diff --git a/app/assets/javascripts/actioncable_link.js b/app/assets/javascripts/actioncable_link.js
index 895a34ba157052..af9007e0b2eb01 100644
--- a/app/assets/javascripts/actioncable_link.js
+++ b/app/assets/javascripts/actioncable_link.js
@@ -1,12 +1,12 @@
 import { ApolloLink, Observable } from 'apollo-link';
 import { print } from 'graphql';
-import cable from '~/actioncable_consumer';
 import { uuids } from '~/lib/utils/uuids';
 
 export default class ActionCableLink extends ApolloLink {
   // eslint-disable-next-line class-methods-use-this
   request(operation) {
-    return new Observable((observer) => {
+    return new Observable(async (observer) => {
+      const cable = await import('~/actioncable_consumer');
       const subscription = cable.subscriptions.create(
         {
           channel: 'GraphqlChannel',
diff --git a/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
index 19ebab36481cc9..0a7a3a287572c8 100644
--- a/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
@@ -189,7 +189,7 @@ export class CopyAsGFM {
 
 // Export CopyAsGFM as a global for rspec to access
 // see /spec/features/markdown/copy_as_gfm_spec.rb
-if (process.env.NODE_ENV !== 'production') {
+if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined') {
   window.CopyAsGFM = CopyAsGFM;
 }
 
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index a8ca17ab4dd590..68d3cfe61d5059 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -11,7 +11,7 @@ import {
   MR_COMMITS_NEXT_COMMIT,
   MR_COMMITS_PREVIOUS_COMMIT,
 } from '~/behaviors/shortcuts/keybindings';
-import createFlash from '~/flash';
+import BatchFetcher from "~/diffs/components/batch_fetcher.vue";
 import { isSingleViewStyle } from '~/helpers/diffs_helper';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { parseBoolean } from '~/lib/utils/common_utils';
@@ -57,6 +57,7 @@ import TreeList from './tree_list.vue';
 export default {
   name: 'DiffsApp',
   components: {
+    BatchFetcher,
     DynamicScroller: () =>
       import('vendor/vue-virtual-scroller').then(({ DynamicScroller }) => DynamicScroller),
     DynamicScrollerItem: () =>
@@ -78,6 +79,26 @@ export default {
     MrWidgetHowToMergeModal,
     GlAlert,
   },
+  async serverPrefetch() {
+    this.setBaseConfig({
+      endpoint: this.endpoint,
+      endpointMetadata: this.endpointMetadata,
+      endpointBatch: this.endpointBatch,
+      endpointCoverage: this.endpointCoverage,
+      endpointUpdateUser: this.endpointUpdateUser,
+      projectPath: this.projectPath,
+      dismissEndpoint: this.dismissEndpoint,
+      showSuggestPopover: this.showSuggestPopover,
+      viewDiffsFileByFile: this.fileByFileUserPreference || false,
+      defaultSuggestionCommitMessage: this.defaultSuggestionCommitMessage,
+      mrReviews: this.rehydratedMrReviews,
+    });
+    try {
+      await this.fetchData();
+    } catch (error) {
+      console.log(error);
+    }
+  },
   mixins: [glFeatureFlagsMixin()],
   alerts: {
     ALERT_OVERFLOW_HIDDEN,
@@ -182,8 +203,8 @@ export default {
     },
   },
   data() {
-    const treeWidth =
-      parseInt(localStorage.getItem(TREE_LIST_WIDTH_STORAGE_KEY), 10) || INITIAL_TREE_WIDTH;
+    const treeWidth = typeof window !== 'undefined' ?
+      parseInt(localStorage.getItem(TREE_LIST_WIDTH_STORAGE_KEY), 10) || INITIAL_TREE_WIDTH : INITIAL_TREE_WIDTH;
 
     return {
       treeWidth,
@@ -239,10 +260,18 @@ export default {
         return file.file_hash === this.currentDiffFileId || (i === 0 && !this.currentDiffFileId);
       });
     },
+    perPage() {
+      return 5;
+      return this.diffFilesLength ? 1 : 5;
+    },
+    perPageLength() {
+      return Math.floor(this.diffFilesLength / this.perPage);
+    },
     canCurrentUserFork() {
       return this.currentUser.can_fork === true && this.currentUser.can_create_merge_request;
     },
     renderDiffFiles() {
+      return this.diffFilesLength;
       return this.diffFiles.length > 0;
     },
     renderFileTree() {
@@ -319,19 +348,23 @@ export default {
     renderFileTree: 'adjustView',
   },
   mounted() {
-    this.setBaseConfig({
-      endpoint: this.endpoint,
-      endpointMetadata: this.endpointMetadata,
-      endpointBatch: this.endpointBatch,
-      endpointCoverage: this.endpointCoverage,
-      endpointUpdateUser: this.endpointUpdateUser,
-      projectPath: this.projectPath,
-      dismissEndpoint: this.dismissEndpoint,
-      showSuggestPopover: this.showSuggestPopover,
-      viewDiffsFileByFile: this.fileByFileUserPreference || false,
-      defaultSuggestionCommitMessage: this.defaultSuggestionCommitMessage,
-      mrReviews: this.rehydratedMrReviews,
-    });
+    this.adjustView();
+    this.subscribeToEvents();
+
+    this.unwatchDiscussions = this.$watch(
+      () => `${this.diffFiles.length}:${this.$store.state.notes.discussions.length}`,
+      () => this.setDiscussions(),
+    );
+
+    this.unwatchRetrievingBatches = this.$watch(
+      () => `${this.retrievingBatches}:${this.$store.state.notes.discussions.length}`,
+      () => {
+        if (!this.retrievingBatches && this.$store.state.notes.discussions.length) {
+          this.unwatchDiscussions();
+          this.unwatchRetrievingBatches();
+        }
+      },
+    );
 
     if (this.endpointCodequality) {
       this.setCodequalityEndpoint(this.endpointCodequality);
@@ -380,26 +413,11 @@ export default {
     this.subscribeToVirtualScrollingEvents();
   },
   beforeCreate() {
+    if (typeof window === 'undefined') return;
     diffsApp.instrument();
   },
-  created() {
-    this.adjustView();
-    this.subscribeToEvents();
-
-    this.unwatchDiscussions = this.$watch(
-      () => `${this.diffFiles.length}:${this.$store.state.notes.discussions.length}`,
-      () => this.setDiscussions(),
-    );
-
-    this.unwatchRetrievingBatches = this.$watch(
-      () => `${this.retrievingBatches}:${this.$store.state.notes.discussions.length}`,
-      () => {
-        if (!this.retrievingBatches && this.$store.state.notes.discussions.length) {
-          this.unwatchDiscussions();
-          this.unwatchRetrievingBatches();
-        }
-      },
-    );
+  errorCaptured(err, vm, info) {
+    console.log(err, info);
   },
   beforeDestroy() {
     diffsApp.deinstrument();
@@ -451,43 +469,47 @@ export default {
     needsFirstLoad() {
       return !this.diffFiles.length;
     },
-    fetchData(toggleTree = true) {
-      this.fetchDiffFilesMeta()
-        .then(({ real_size }) => {
+    async fetchData(toggleTree = true) {
+      let real_size;
+      try {
+        [
+          { real_size },
+        ] = await Promise.all(
+          [
+            this.fetchDiffFilesMeta(),
+            // this.fetchDiffFilesBatch(),
+          ]
+        );
+      } catch(error) {
+        console.log(error);
+      }
+
+
+
           this.diffFilesLength = parseInt(real_size, 10);
-          if (toggleTree) this.setTreeDisplay();
-        })
-        .catch(() => {
-          createFlash({
-            message: __('Something went wrong on our end. Please try again!'),
-          });
-        });
 
-      this.fetchDiffFilesBatch()
-        .then(() => {
-          if (toggleTree) this.setTreeDisplay();
-          // Guarantee the discussions are assigned after the batch finishes.
-          // Just watching the length of the discussions or the diff files
-          // isn't enough, because with split diff loading, neither will
-          // change when loading the other half of the diff files.
-          this.setDiscussions();
-        })
-        .catch(() => {
-          createFlash({
-            message: __('Something went wrong on our end. Please try again!'),
-          });
-        });
+      if (typeof window !== 'undefined') {
+        if (toggleTree) this.setTreeDisplay();
 
-      if (this.endpointCoverage) {
-        this.fetchCoverageFiles();
-      }
 
-      if (this.endpointCodequality) {
-        this.fetchCodequality();
-      }
+        // Guarantee the discussions are assigned after the batch finishes.
+        //   Just watching the length of the discussions or the diff files
+        // isn't enough, because with split diff loading, neither will
+        // change when loading the other half of the diff files.
+        this.setDiscussions();
 
-      if (!this.isNotesFetched) {
-        notesEventHub.$emit('fetchNotesData');
+
+        if (this.endpointCoverage) {
+          this.fetchCoverageFiles();
+        }
+
+        if (this.endpointCodequality) {
+          this.fetchCodequality();
+        }
+
+        if (!this.isNotesFetched) {
+          notesEventHub.$emit('fetchNotesData');
+        }
       }
     },
     setDiscussions() {
@@ -510,6 +532,7 @@ export default {
       }
     },
     setEventListeners() {
+      if (typeof window === 'undefined') return;
       Mousetrap.bind(keysFor(MR_PREVIOUS_FILE_IN_DIFF), () => this.jumpToFile(-1));
       Mousetrap.bind(keysFor(MR_NEXT_FILE_IN_DIFF), () => this.jumpToFile(+1));
 
@@ -550,6 +573,7 @@ export default {
       }
     },
     removeEventListeners() {
+      if (typeof window === 'undefined') return;
       Mousetrap.unbind(keysFor(MR_PREVIOUS_FILE_IN_DIFF));
       Mousetrap.unbind(keysFor(MR_NEXT_FILE_IN_DIFF));
       Mousetrap.unbind(keysFor(MR_COMMITS_NEXT_COMMIT));
@@ -621,7 +645,7 @@ export default {
     },
   },
   minTreeWidth: MIN_TREE_WIDTH,
-  maxTreeWidth: window.innerWidth / 2,
+  maxTreeWidth: typeof window !== 'undefined' ? window.innerWidth / 2 : 0,
   howToMergeDocsPath: helpPagePath('user/project/merge_requests/reviews/index.md', {
     anchor: 'checkout-merge-requests-locally-through-the-head-ref',
   }),
@@ -722,17 +746,26 @@ export default {
               </template>
             </dynamic-scroller>
             <template v-else>
-              <diff-file
-                v-for="(file, index) in diffs"
-                :key="file.new_path"
-                :file="file"
-                :reviewed="fileReviews[file.id]"
-                :is-first-file="index === 0"
-                :is-last-file="index === diffFilesLength - 1"
-                :help-page-path="helpPagePath"
-                :can-current-user-fork="canCurrentUserFork"
-                :view-diffs-file-by-file="viewDiffsFileByFile"
-              />
+              <batch-fetcher
+                v-for="index in perPageLength"
+                :key="index"
+                :page="index"
+                :per-page="perPage"
+                :endpoint="endpointBatch"
+                :show-whitespace="showWhitespace"
+              >
+                <template #default="{ files }">
+                  <diff-file
+                    v-for="file in files"
+                    :key="file.new_path"
+                    :file="file"
+                    :reviewed="fileReviews[file.id]"
+                    :help-page-path="helpPagePath"
+                    :can-current-user-fork="canCurrentUserFork"
+                    :view-diffs-file-by-file="viewDiffsFileByFile"
+                  />
+                </template>
+              </batch-fetcher>
             </template>
             <div
               v-if="showFileByFileNavigation"
diff --git a/app/assets/javascripts/diffs/components/batch_fetcher.vue b/app/assets/javascripts/diffs/components/batch_fetcher.vue
new file mode 100644
index 00000000000000..6b8dbef19850a7
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/batch_fetcher.vue
@@ -0,0 +1,61 @@
+<script>
+import axios from "~/lib/utils/axios_utils.js";
+import { mergeUrlParams } from "~/lib/utils/url_utility.js";
+
+export default {
+  name: 'BatchFetcher',
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
+    },
+    page: {
+      type: Number,
+      required: true,
+    },
+    perPage: {
+      type: Number,
+      required: true,
+    },
+    showWhitespace: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  async serverPrefetch() {
+    await this.fetchFilesBatch();
+  },
+  data() {
+    return {
+      filesBatch: null,
+    }
+  },
+  methods: {
+    async fetchFilesBatch() {
+      let baseUrl = '';
+      let headers = {};
+      if (typeof window === 'undefined') {
+        baseUrl = process.env.BASE_URL;
+        headers = { cookie: process.env.COOKIE };
+      }
+      const urlParams = {
+        w: this.showWhitespace ? '0' : '1',
+        view: 'inline',
+      };
+      const { data: { diff_files: filesBatch } } = await axios
+        .get(
+          `${baseUrl}${mergeUrlParams({ ...urlParams, page: this.page, per_page: this.perPage }, this.endpoint)}`,
+          {
+          headers
+        });
+      this.filesBatch = filesBatch;
+    },
+  },
+}
+</script>
+
+<template>
+  <div>
+    <slot :files="filesBatch" ></slot>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue
index 6c5973b7c28dda..b4572200cb076a 100644
--- a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue
+++ b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+import { s__ } from '~/locale';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
index 2b871680d5ed1e..5045dac86e48dd 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlTooltipDirective, GlIcon, GlLink, GlButtonGroup, GlButton, GlSprintf } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 import { setUrlParams } from '../../lib/utils/url_utility';
 import { EVT_EXPAND_ALL_FILES } from '../constants';
 import eventHub from '../event_hub';
@@ -75,6 +75,9 @@ export default {
     },
     ...mapActions('diffs', ['moveToNeighboringCommit']),
   },
+  errorCaptured(err, vm, info) {
+    console.log(err, info);
+  },
 };
 </script>
 
diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index 858d9e221aea96..3c10b9e93fdc57 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -71,6 +71,7 @@ export default {
       return this.getCommentFormForDiffFile(this.diffFileHash);
     },
     showNotesContainer() {
+      return false;
       return this.imageDiscussions.length || this.diffFileCommentForm;
     },
     diffFileHash() {
@@ -142,7 +143,7 @@ export default {
       >
         <template #image-overlay="{ renderedWidth, renderedHeight }">
           <image-diff-overlay
-            v-if="renderedWidth"
+            v-if="false && renderedWidth"
             :rendered-width="renderedWidth"
             :rendered-height="renderedHeight"
             :discussions="imageDiscussions"
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 4e77bf81c1e2d9..1a2a5f711b18ae 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -380,7 +380,7 @@ export default {
         data-testid="content-area"
       >
         <gl-loading-icon
-          v-if="showLoadingIcon"
+          v-if="false && showLoadingIcon"
           size="sm"
           class="diff-content loading gl-my-0 gl-pt-3"
           data-testid="loader-icon"
@@ -468,7 +468,7 @@ export default {
             </gl-button>
           </div>
           <diff-content
-            v-if="showContent"
+            v-if="true || showContent"
             :class="hasBodyClasses.content"
             :diff-file="file"
             :help-page-path="helpPagePath"
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 0e8506cd896bae..7c1c4e207366ee 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -437,11 +437,11 @@ export default {
 
           <template v-if="!isCollapsed">
             <gl-dropdown-divider
-              v-if="!diffFile.is_fully_expanded || diffHasDiscussions(diffFile)"
+              v-if="false && (!diffFile.is_fully_expanded || diffHasDiscussions(diffFile))"
             />
 
             <gl-dropdown-item
-              v-if="diffHasDiscussions(diffFile)"
+              v-if="false && diffHasDiscussions(diffFile)"
               ref="toggleDiscussionsButton"
               data-qa-selector="toggle_comments_button"
               @click="toggleFileDiscussionWrappers(diffFile)"
diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue
index 333bf1b356c9d3..2b108ab2d35648 100644
--- a/app/assets/javascripts/diffs/components/diff_view.vue
+++ b/app/assets/javascripts/diffs/components/diff_view.vue
@@ -149,7 +149,7 @@ export default {
       { 'inline-diff-view': inline, 'with-codequality': hasCodequalityChanges },
     ]"
     :data-commit-id="commitId"
-    class="diff-grid diff-table code diff-wrap-lines js-syntax-highlight text-file"
+    class="diff-grid diff-table white code diff-wrap-lines js-syntax-highlight text-file"
     @mousedown="handleParallelLineMouseDown"
   >
     <template v-for="(line, index) in diffLines">
diff --git a/app/assets/javascripts/diffs/components/no_changes.vue b/app/assets/javascripts/diffs/components/no_changes.vue
index ab518fcfb16dd1..c30fde319a5a36 100644
--- a/app/assets/javascripts/diffs/components/no_changes.vue
+++ b/app/assets/javascripts/diffs/components/no_changes.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlButton, GlSprintf } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
+import { __ } from '~/locale';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/diffs/components/settings_dropdown.vue b/app/assets/javascripts/diffs/components/settings_dropdown.vue
index 2d9ac76b3e4704..1bc384df2041d8 100644
--- a/app/assets/javascripts/diffs/components/settings_dropdown.vue
+++ b/app/assets/javascripts/diffs/components/settings_dropdown.vue
@@ -7,6 +7,7 @@ import {
   GlTooltipDirective,
 } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
+import { __, s__ } from '~/locale';
 import { SETTINGS_DROPDOWN } from '../i18n';
 
 export default {
diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index 85e4199d1c1a38..4f273c46bb4da6 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { s__, sprintf } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 import FileTree from '~/vue_shared/components/file_tree.vue';
 import DiffFileRow from './diff_file_row.vue';
 
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index dfe29e767c96b2..10fcab9dd5f04f 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { getCookie, setCookie, parseBoolean, removeCookie } from '~/lib/utils/common_utils';
+import { __, s__ } from '~/locale';
 
 import { getParameterValues } from '~/lib/utils/url_utility';
 import eventHub from '../notes/event_hub';
@@ -10,37 +11,41 @@ import { TREE_LIST_STORAGE_KEY, DIFF_WHITESPACE_COOKIE_NAME } from './constants'
 import { getReviewsForMergeRequest } from './utils/file_reviews';
 import { getDerivedMergeRequestInformation } from './utils/merge_request';
 
-export default function initDiffsApp(store) {
+const el = '#js-diffs-app';
+
+Vue.prototype.__ = __;
+Vue.prototype.s__ = s__;
+
+export default function initDiffsApp(store, config) {
+  if (!config) config = document.querySelector(el).dataset;
   const vm = new Vue({
-    el: '#js-diffs-app',
+    el,
     name: 'MergeRequestDiffs',
     components: {
       diffsApp,
     },
     store,
     data() {
-      const { dataset } = document.querySelector(this.$options.el);
-
       return {
-        endpoint: dataset.endpoint,
-        endpointMetadata: dataset.endpointMetadata || '',
-        endpointBatch: dataset.endpointBatch || '',
-        endpointCoverage: dataset.endpointCoverage || '',
-        endpointCodequality: dataset.endpointCodequality || '',
-        endpointUpdateUser: dataset.updateCurrentUserPath,
-        projectPath: dataset.projectPath,
-        helpPagePath: dataset.helpPagePath,
-        currentUser: JSON.parse(dataset.currentUserData) || {},
-        changesEmptyStateIllustration: dataset.changesEmptyStateIllustration,
-        isFluidLayout: parseBoolean(dataset.isFluidLayout),
-        dismissEndpoint: dataset.dismissEndpoint,
-        showSuggestPopover: parseBoolean(dataset.showSuggestPopover),
-        showWhitespaceDefault: parseBoolean(dataset.showWhitespaceDefault),
-        viewDiffsFileByFile: parseBoolean(dataset.fileByFileDefault),
-        defaultSuggestionCommitMessage: dataset.defaultSuggestionCommitMessage,
-        sourceProjectDefaultUrl: dataset.sourceProjectDefaultUrl,
-        sourceProjectFullPath: dataset.sourceProjectFullPath,
-        isForked: parseBoolean(dataset.isForked),
+        endpoint: config.endpoint,
+        endpointMetadata: config.endpointMetadata || '',
+        endpointBatch: config.endpointBatch || '',
+        endpointCoverage: config.endpointCoverage || '',
+        endpointCodequality: config.endpointCodequality || '',
+        endpointUpdateUser: config.updateCurrentUserPath,
+        projectPath: config.projectPath,
+        helpPagePath: config.helpPagePath,
+        currentUser: JSON.parse(config.currentUserData || '{}') || {},
+        changesEmptyStateIllustration: config.changesEmptyStateIllustration,
+        isFluidLayout: parseBoolean(config.isFluidLayout),
+        dismissEndpoint: config.dismissEndpoint,
+        showSuggestPopover: parseBoolean(config.showSuggestPopover),
+        showWhitespaceDefault: parseBoolean(config.showWhitespaceDefault),
+        viewDiffsFileByFile: parseBoolean(config.fileByFileDefault),
+        defaultSuggestionCommitMessage: config.defaultSuggestionCommitMessage,
+        sourceProjectDefaultUrl: config.sourceProjectDefaultUrl,
+        sourceProjectFullPath: config.sourceProjectFullPath,
+        isForked: parseBoolean(config.isForked),
       };
     },
     computed: {
@@ -49,7 +54,7 @@ export default function initDiffsApp(store) {
       }),
     },
     created() {
-      const treeListStored = localStorage.getItem(TREE_LIST_STORAGE_KEY);
+      const treeListStored = typeof window !== 'undefined' ? localStorage.getItem(TREE_LIST_STORAGE_KEY) : false;
       const renderTreeList = treeListStored !== null ? parseBoolean(treeListStored) : true;
 
       this.setRenderTreeList({ renderTreeList, trackClick: false });
@@ -86,7 +91,7 @@ export default function initDiffsApp(store) {
     render(createElement) {
       const { mrPath } = getDerivedMergeRequestInformation({ endpoint: this.endpoint });
 
-      return createElement('diffs-app', {
+      return createElement('div', [createElement('diffs-app', {
         props: {
           endpoint: this.endpoint,
           endpointMetadata: this.endpointMetadata,
@@ -109,55 +114,58 @@ export default function initDiffsApp(store) {
           sourceProjectFullPath: this.sourceProjectFullPath,
           isForked: this.isForked,
         },
-      });
+        ref: 'diffsApp',
+      })]);
     },
   });
 
-  const fileFinderEl = document.getElementById('js-diff-file-finder');
+  if (typeof window !== 'undefined') {
+    const fileFinderEl = document.getElementById('js-diff-file-finder');
 
-  if (fileFinderEl) {
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: fileFinderEl,
-      store,
-      components: {
-        FindFile: () => import('~/vue_shared/components/file_finder/index.vue'),
-      },
-      computed: {
-        ...mapState('diffs', ['fileFinderVisible', 'isLoading']),
-        ...mapGetters('diffs', ['flatBlobsList']),
-      },
-      watch: {
-        fileFinderVisible(newVal, oldVal) {
-          if (newVal && !oldVal && !this.flatBlobsList.length) {
-            eventHub.$emit('fetchDiffData');
-          }
+    if (fileFinderEl) {
+      // eslint-disable-next-line no-new
+      new Vue({
+        el: fileFinderEl,
+        store,
+        components: {
+          FindFile: () => import('~/vue_shared/components/file_finder/index.vue'),
         },
-      },
-      methods: {
-        ...mapActions('diffs', ['toggleFileFinder', 'scrollToFile']),
-        openFile(file) {
-          window.mrTabs.tabShown('diffs');
-          this.scrollToFile({ path: file.path });
+        computed: {
+          ...mapState('diffs', ['fileFinderVisible', 'isLoading']),
+          ...mapGetters('diffs', ['flatBlobsList']),
         },
-      },
-      render(createElement) {
-        return createElement('find-file', {
-          props: {
-            files: this.flatBlobsList,
-            visible: this.fileFinderVisible,
-            loading: this.isLoading,
-            showDiffStats: true,
-            clearSearchOnClose: false,
+        watch: {
+          fileFinderVisible(newVal, oldVal) {
+            if (newVal && !oldVal && !this.flatBlobsList.length) {
+              eventHub.$emit('fetchDiffData');
+            }
           },
-          on: {
-            toggle: this.toggleFileFinder,
-            click: this.openFile,
+        },
+        methods: {
+          ...mapActions('diffs', ['toggleFileFinder', 'scrollToFile']),
+          openFile(file) {
+            window.mrTabs.tabShown('diffs');
+            this.scrollToFile({ path: file.path });
           },
-          class: ['diff-file-finder'],
-        });
-      },
-    });
+        },
+        render(createElement) {
+          return createElement('find-file', {
+            props: {
+              files: this.flatBlobsList,
+              visible: this.fileFinderVisible,
+              loading: this.isLoading,
+              showDiffStats: true,
+              clearSearchOnClose: false,
+            },
+            on: {
+              toggle: this.toggleFileFinder,
+              click: this.openFile,
+            },
+            class: ['diff-file-finder'],
+          });
+        },
+      });
+    }
   }
 
   return vm;
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 572949e585ad90..1bb0d765dedf51 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -1,4 +1,6 @@
 import Vue from 'vue';
+import { generateTreeList } from "~/diffs/utils/tree_worker_utils.js";
+import { sortTree } from "~/ide/stores/utils.js";
 import {
   setCookie,
   handleLocationHash,
@@ -9,6 +11,7 @@ import createFlash from '~/flash';
 import { diffViewerModes } from '~/ide/constants';
 import axios from '~/lib/utils/axios_utils';
 
+
 import httpStatusCodes from '~/lib/utils/http_status';
 import Poll from '~/lib/utils/poll';
 import { mergeUrlParams, getLocationHash } from '~/lib/utils/url_utility';
@@ -102,13 +105,13 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
   let perPage = state.viewDiffsFileByFile ? 1 : 5;
   let increaseAmount = 1.4;
   const startPage = 0;
-  const id = window?.location?.hash;
+  const id = typeof window === 'undefined' ? '' : window?.location?.hash;
   const isNoteLink = id.indexOf('#note') === 0;
   const urlParams = {
     w: state.showWhitespace ? '0' : '1',
     view: 'inline',
   };
-  const hash = window.location.hash.replace('#', '').split('diff-content-').pop();
+  const hash = typeof window === 'undefined' ? '' : window.location.hash.replace('#', '').split('diff-content-').pop();
   let totalLoaded = 0;
   let scrolledVirtualScroller = false;
 
@@ -116,9 +119,18 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
   commit(types.SET_RETRIEVING_BATCHES, true);
   eventHub.$emit(EVT_PERF_MARK_DIFF_FILES_START);
 
+  let baseUrl = '';
+  let headers = {};
+  if (typeof window === 'undefined') {
+    baseUrl = process.env.BASE_URL;
+    headers = { cookie: process.env.COOKIE };
+  }
+
   const getBatch = (page = startPage) =>
     axios
-      .get(mergeUrlParams({ ...urlParams, page, per_page: perPage }, state.endpointBatch))
+      .get(`${baseUrl}${mergeUrlParams({ ...urlParams, page, per_page: perPage }, state.endpointBatch)}`, {
+        headers
+      })
       .then(({ data: { pagination, diff_files } }) => {
         totalLoaded += diff_files.length;
 
@@ -157,7 +169,7 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
             commit(types.SET_CURRENT_DIFF_FILE, state.diffFiles[0].file_hash);
           }
 
-          if (state.diffFiles?.length) {
+          if (state.diffFiles?.length && typeof window !== 'undefined') {
             // eslint-disable-next-line promise/catch-or-return,promise/no-nesting
             import('~/code_navigation').then((m) =>
               m.default({
@@ -182,7 +194,7 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
         return nextPage;
       })
       .then((nextPage) => {
-        dispatch('startRenderDiffsQueue');
+        if (typeof window !== "undefined") dispatch('startRenderDiffsQueue');
 
         if (nextPage) {
           return getBatch(nextPage);
@@ -190,34 +202,52 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
 
         return null;
       })
-      .catch(() => {
+      .catch((error) => {
+        console.log(error);
         commit(types.SET_RETRIEVING_BATCHES, false);
         commit(types.SET_BATCH_LOADING_STATE, 'error');
       });
 
-  return getBatch().then(
-    () => !window.gon?.features?.diffsVirtualScrolling && handleLocationHash(),
-  );
+  return getBatch();
 };
 
+function getTree(data) {
+  const { treeEntries, tree } = generateTreeList(data);
+
+  return {
+    treeEntries,
+    tree: sortTree(tree),
+  }
+}
+
 export const fetchDiffFilesMeta = ({ commit, state }) => {
-  const worker = new TreeWorker();
   const urlParams = {
     view: 'inline',
   };
+  let worker;
+  let baseUrl = '';
+  let headers = {};
+  if (typeof window !== 'undefined') {
+    worker = new TreeWorker();
 
-  commit(types.SET_LOADING, true);
-  eventHub.$emit(EVT_PERF_MARK_FILE_TREE_START);
+    commit(types.SET_LOADING, true);
+    eventHub.$emit(EVT_PERF_MARK_FILE_TREE_START);
 
-  worker.addEventListener('message', ({ data }) => {
-    commit(types.SET_TREE_DATA, data);
-    eventHub.$emit(EVT_PERF_MARK_FILE_TREE_END);
+    worker.addEventListener('message', ({ data }) => {
+      commit(types.SET_TREE_DATA, data);
+      eventHub.$emit(EVT_PERF_MARK_FILE_TREE_END);
 
-    worker.terminate();
-  });
+      worker.terminate();
+    });
+  } else {
+    baseUrl = process.env.BASE_URL;
+    headers = { cookie: process.env.COOKIE };
+  }
 
   return axios
-    .get(mergeUrlParams(urlParams, state.endpointMetadata))
+    .get(`${baseUrl}${mergeUrlParams(urlParams, state.endpointMetadata)}`, {
+      headers
+    })
     .then(({ data }) => {
       const strippedData = { ...data };
       delete strippedData.diff_files;
@@ -226,11 +256,18 @@ export const fetchDiffFilesMeta = ({ commit, state }) => {
       commit(types.SET_MERGE_REQUEST_DIFFS, data.merge_request_diffs || []);
       commit(types.SET_DIFF_METADATA, strippedData);
 
-      worker.postMessage(data.diff_files);
+      if (worker) worker.postMessage(data.diff_files);
+      else {
+        const tree = getTree(data.diff_files);
+        commit(types.SET_TREE_DATA, tree);
+      }
 
       return data;
     })
-    .catch(() => worker.terminate());
+    .catch((error) => {
+      console.log(error);
+      if (worker) worker.terminate();
+    });
 };
 
 export const fetchCoverageFiles = ({ commit, state }) => {
@@ -578,7 +615,7 @@ export const closeDiffFileCommentForm = ({ commit }, fileHash) => {
 export const setRenderTreeList = ({ commit }, { renderTreeList, trackClick = true }) => {
   commit(types.SET_RENDER_TREE_LIST, renderTreeList);
 
-  localStorage.setItem(TREE_LIST_STORAGE_KEY, renderTreeList);
+  if (typeof window !== 'undefined') localStorage.setItem(TREE_LIST_STORAGE_KEY, renderTreeList);
 
   if (window.gon?.features?.diffSettingsUsageData && trackClick) {
     const events = [TRACKING_CLICK_FILE_BROWSER_SETTING];
diff --git a/app/assets/javascripts/diffs/store/getters.js b/app/assets/javascripts/diffs/store/getters.js
index 83c7f8c814b580..47e9d9c2353aeb 100644
--- a/app/assets/javascripts/diffs/store/getters.js
+++ b/app/assets/javascripts/diffs/store/getters.js
@@ -175,6 +175,7 @@ export function suggestionCommitMessage(state, _, rootState) {
 }
 
 export const isVirtualScrollingEnabled = (state) => {
+  if (typeof window === 'undefined') return false;
   const vSrollerCookie = getCookie('diffs_virtual_scrolling');
 
   if (state.disableVirtualScroller) {
diff --git a/app/assets/javascripts/diffs/streaming.js b/app/assets/javascripts/diffs/streaming.js
new file mode 100644
index 00000000000000..baed84d84702cf
--- /dev/null
+++ b/app/assets/javascripts/diffs/streaming.js
@@ -0,0 +1,32 @@
+export const renderStreamingDiffsApp = async (config) => {
+  const configQuery = new URLSearchParams(config);
+  const { body } = await fetch(`http://localhost:8080/?${configQuery}`, {
+    credentials: "include"
+  });
+  const reader = body.getReader();
+  const decoder = new TextDecoder("utf-8");
+
+  const streamDocument = document.implementation.createHTMLDocument("stream");
+
+  streamDocument.open();
+  streamDocument.write("<streaming-element>");
+
+  const virtualStreamingElement =
+    streamDocument.querySelector("streaming-element");
+  const diffsApp = document.querySelector('#js-diffs-app');
+  diffsApp.appendChild(virtualStreamingElement);
+  diffsApp.style.display = 'block';
+
+  await reader.read().then(async function processText({ done, value }) {
+    if (done) {
+      streamDocument.write("</streaming-element>");
+      streamDocument.close();
+      return;
+    }
+
+    streamDocument.write(decoder.decode(value).normalize('NFC'));
+
+    const result = await reader.read();
+    await processText(result);
+  });
+}
diff --git a/app/assets/javascripts/diffs/utils/file_reviews.js b/app/assets/javascripts/diffs/utils/file_reviews.js
index 227be4e4a6c58e..5dad65fcdd10ee 100644
--- a/app/assets/javascripts/diffs/utils/file_reviews.js
+++ b/app/assets/javascripts/diffs/utils/file_reviews.js
@@ -18,6 +18,7 @@ export function reviewStatuses(files, reviews) {
 }
 
 export function getReviewsForMergeRequest(mrPath) {
+  if (typeof window === 'undefined') return {};
   const reviewsForMr = localStorage.getItem(getFileReviewsKey(mrPath));
   let reviews = {};
 
diff --git a/app/assets/javascripts/dompurify.js b/app/assets/javascripts/dompurify.js
new file mode 100644
index 00000000000000..8803af4dadd557
--- /dev/null
+++ b/app/assets/javascripts/dompurify.js
@@ -0,0 +1,3 @@
+module.exports = {
+  sanitize: (s) => s,
+};
diff --git a/app/assets/javascripts/entry-server.js b/app/assets/javascripts/entry-server.js
new file mode 100644
index 00000000000000..6a07ff873b35bc
--- /dev/null
+++ b/app/assets/javascripts/entry-server.js
@@ -0,0 +1,6 @@
+import initDiffsApp from '~/diffs/index.js';
+import { createStore } from '~/mr_notes/stores/index.js';
+
+export const createApp = async (config) => {
+  return initDiffsApp(createStore({ page: { activeTab: 'diffs' } }), config);
+};
diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index 3a04779e48d82b..ded19d15795631 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -2,8 +2,6 @@ import autosize from 'autosize';
 import $ from 'jquery';
 import GfmAutoComplete, { defaultAutocompleteConfig } from 'ee_else_ce/gfm_auto_complete';
 import { disableButtonIfEmptyField } from '~/lib/utils/common_utils';
-import dropzoneInput from './dropzone_input';
-import { addMarkdownListeners, removeMarkdownListeners } from './lib/utils/text_markdown';
 
 export default class GLForm {
   /**
@@ -46,7 +44,7 @@ export default class GLForm {
     this.form.data('glForm', null);
   }
 
-  setupForm(forceNew = false) {
+  async setupForm(forceNew = false) {
     const isNewForm = this.form.is(':not(.gfm-form)') || forceNew;
     this.form.removeClass('js-new-note-form');
     if (isNewForm) {
@@ -59,11 +57,13 @@ export default class GLForm {
       );
       this.autoComplete = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources);
       this.autoComplete.setup(this.form.find('.js-gfm-input'), this.enableGFM);
+      const { default: dropzoneInput } = await import('./dropzone_input');
       this.formDropzone = dropzoneInput(this.form, { parallelUploads: 1 });
       autosize(this.textarea);
     }
     // form and textarea event listeners
     this.addEventListeners();
+    const { addMarkdownListeners } = await import('./lib/utils/text_markdown');
     addMarkdownListeners(this.form);
     this.form.show();
     if (this.isAutosizeable) this.setupAutosize();
@@ -99,11 +99,12 @@ export default class GLForm {
     this.textarea.css('max-height', window.outerHeight);
   }
 
-  clearEventListeners() {
+  async clearEventListeners() {
     // eslint-disable-next-line @gitlab/no-global-event-off
     this.textarea.off('focus');
     // eslint-disable-next-line @gitlab/no-global-event-off
     this.textarea.off('blur');
+    const { removeMarkdownListeners } = await import('./lib/utils/text_markdown');
     removeMarkdownListeners(this.form);
   }
 
diff --git a/app/assets/javascripts/lib/dompurify.js b/app/assets/javascripts/lib/dompurify.js
index 47568f0ecff79e..13da93950b0fc3 100644
--- a/app/assets/javascripts/lib/dompurify.js
+++ b/app/assets/javascripts/lib/dompurify.js
@@ -1,34 +1,34 @@
-import { sanitize as dompurifySanitize, addHook } from 'dompurify';
-import { getNormalizedURL, getBaseURL, relativePathToAbsolute } from '~/lib/utils/url_utility';
-
-const defaultConfig = {
-  // Safely allow SVG <use> tags
-  ADD_TAGS: ['use', 'gl-emoji', 'copy-code'],
-  // Prevent possible XSS attacks with data-* attributes used by @rails/ujs
-  // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1421
-  FORBID_ATTR: ['data-remote', 'data-url', 'data-type', 'data-method'],
-};
-
-// Only icons urls from `gon` are allowed
-const getAllowedIconUrls = (gon = window.gon) =>
-  [gon.sprite_file_icons, gon.sprite_icons]
-    .filter(Boolean)
-    .map((path) => relativePathToAbsolute(path, getBaseURL()));
-
-const isUrlAllowed = (url) =>
-  getAllowedIconUrls().some((allowedUrl) => getNormalizedURL(url).startsWith(allowedUrl));
-
-const isHrefSafe = (url) => url.match(/^#/) || isUrlAllowed(url);
-
-const removeUnsafeHref = (node, attr) => {
-  if (!node.hasAttribute(attr)) {
-    return;
-  }
-
-  if (!isHrefSafe(node.getAttribute(attr))) {
-    node.removeAttribute(attr);
-  }
-};
+// import { sanitize as dompurifySanitize } from 'dompurify';
+// import { getNormalizedURL, getBaseURL, relativePathToAbsolute } from '~/lib/utils/url_utility';
+
+// const defaultConfig = {
+//   // Safely allow SVG <use> tags
+//   ADD_TAGS: ['use', 'gl-emoji', 'copy-code'],
+//   // Prevent possible XSS attacks with data-* attributes used by @rails/ujs
+//   // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1421
+//   FORBID_ATTR: ['data-remote', 'data-url', 'data-type', 'data-method'],
+// };
+//
+// // Only icons urls from `gon` are allowed
+// const getAllowedIconUrls = (gon = window.gon) =>
+//   [gon.sprite_file_icons, gon.sprite_icons]
+//     .filter(Boolean)
+//     .map((path) => relativePathToAbsolute(path, getBaseURL()));
+//
+// const isUrlAllowed = (url) =>
+//   getAllowedIconUrls().some((allowedUrl) => getNormalizedURL(url).startsWith(allowedUrl));
+//
+// const isHrefSafe = (url) => url.match(/^#/) || isUrlAllowed(url);
+//
+// const removeUnsafeHref = (node, attr) => {
+//   if (!node.hasAttribute(attr)) {
+//     return;
+//   }
+//
+//   if (!isHrefSafe(node.getAttribute(attr))) {
+//     node.removeAttribute(attr);
+//   }
+// };
 
 /**
  * Sanitize icons' <use> tag attributes, to safely include
@@ -44,15 +44,17 @@ const removeUnsafeHref = (node, attr) => {
  *
  * @param {Object} node - Node to sanitize
  */
-const sanitizeSvgIcon = (node) => {
-  removeUnsafeHref(node, 'href');
-  removeUnsafeHref(node, 'xlink:href');
-};
+// const sanitizeSvgIcon = (node) => {
+//   removeUnsafeHref(node, 'href');
+//   removeUnsafeHref(node, 'xlink:href');
+// };
+
+// addHook('afterSanitizeAttributes', (node) => {
+//   if (node.tagName.toLowerCase() === 'use') {
+//     sanitizeSvgIcon(node);
+//   }
+// });
 
-addHook('afterSanitizeAttributes', (node) => {
-  if (node.tagName.toLowerCase() === 'use') {
-    sanitizeSvgIcon(node);
-  }
-});
+export const sanitize = (val) => val;
 
-export const sanitize = (val, config) => dompurifySanitize(val, { ...defaultConfig, ...config });
+// export const sanitize = (val, config) => dompurifySanitize(val, { ...defaultConfig, ...config });
diff --git a/app/assets/javascripts/lib/graphql.js b/app/assets/javascripts/lib/graphql.js
index df2e85afe24200..075428244d4d3b 100644
--- a/app/assets/javascripts/lib/graphql.js
+++ b/app/assets/javascripts/lib/graphql.js
@@ -138,22 +138,26 @@ export default (resolvers = {}, config = {}) => {
     );
   };
 
-  const appLink = ApolloLink.split(
-    hasSubscriptionOperation,
-    new ActionCableLink(),
-    ApolloLink.from(
-      [
-        getSuppressNetworkErrorsDuringNavigationLink(),
-        getInstrumentationLink(),
-        requestCounterLink,
-        performanceBarLink,
-        new StartupJSLink(),
-        apolloCaptchaLink,
-        uploadsLink,
-        requestLink,
-      ].filter(Boolean),
-    ),
-  );
+  let appLink;
+
+  if (typeof window !== 'undefined') {
+    ApolloLink.split(
+      hasSubscriptionOperation,
+      new ActionCableLink(),
+      ApolloLink.from(
+        [
+          getSuppressNetworkErrorsDuringNavigationLink(),
+          getInstrumentationLink(),
+          requestCounterLink,
+          performanceBarLink,
+          new StartupJSLink(),
+          apolloCaptchaLink,
+          uploadsLink,
+          requestLink,
+        ].filter(Boolean),
+      ),
+    );
+  }
 
   return new ApolloClient({
     typeDefs,
diff --git a/app/assets/javascripts/lib/utils/accessor.js b/app/assets/javascripts/lib/utils/accessor.js
index d4a6d70c62c149..861f0cca9092fc 100644
--- a/app/assets/javascripts/lib/utils/accessor.js
+++ b/app/assets/javascripts/lib/utils/accessor.js
@@ -35,6 +35,7 @@ function canCallFunction(base, functionName, ...args) {
  * See: https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem#exceptions
  */
 function canUseLocalStorage() {
+  if (typeof window === 'undefined') return false;
   let safe;
 
   const TEST_KEY = 'canUseLocalStorage';
diff --git a/app/assets/javascripts/lib/utils/axios_startup_calls.js b/app/assets/javascripts/lib/utils/axios_startup_calls.js
index f9d58ff9b1dae7..254f12be5385f7 100644
--- a/app/assets/javascripts/lib/utils/axios_startup_calls.js
+++ b/app/assets/javascripts/lib/utils/axios_startup_calls.js
@@ -37,7 +37,9 @@ const handleStartupCall = async ({ fetchCall }, req) => {
 };
 
 const setupAxiosStartupCalls = (axios) => {
-  const { startup_calls: startupCalls } = window.gl || {};
+  let gl = {};
+  if (typeof window !== 'undefined') gl = window.gl;
+  const { startup_calls: startupCalls } = gl;
 
   if (!startupCalls || isEmpty(startupCalls)) {
     return;
diff --git a/app/assets/javascripts/lib/utils/axios_utils.js b/app/assets/javascripts/lib/utils/axios_utils.js
index de6d85b8a189f4..3a8190a27665f4 100644
--- a/app/assets/javascripts/lib/utils/axios_utils.js
+++ b/app/assets/javascripts/lib/utils/axios_utils.js
@@ -12,6 +12,7 @@ axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 // Maintain a global counter for active requests
 // see: spec/support/wait_for_requests.rb
 axios.interceptors.request.use((config) => {
+  if (typeof window === 'undefined') return config;
   window.pendingRequests = window.pendingRequests || 0;
   window.pendingRequests += 1;
   return config;
@@ -22,10 +23,12 @@ setupAxiosStartupCalls(axios);
 // Remove the global counter
 axios.interceptors.response.use(
   (response) => {
+    if (typeof window === 'undefined') return response;
     window.pendingRequests -= 1;
     return response;
   },
   (err) => {
+    if (typeof window === 'undefined') return Promise.reject(err);
     window.pendingRequests -= 1;
     return Promise.reject(err);
   },
diff --git a/app/assets/javascripts/lib/utils/color_utils.js b/app/assets/javascripts/lib/utils/color_utils.js
index 66d52051905801..11f820e0677f4f 100644
--- a/app/assets/javascripts/lib/utils/color_utils.js
+++ b/app/assets/javascripts/lib/utils/color_utils.js
@@ -1,5 +1,3 @@
-const colorValidatorEl = document.createElement('div');
-
 /**
  * Validates whether the specified color expression
  * is supported by the browser’s DOM API and has a valid form.
@@ -11,6 +9,8 @@ const colorValidatorEl = document.createElement('div');
  * @param {String} color color expression rgba, hex, hsla, etc.
  */
 export const isValidColorExpression = (colorExpression) => {
+  if (typeof window === 'undefined') return true;
+  const colorValidatorEl = document.createElement('div');
   colorValidatorEl.style.color = '';
   colorValidatorEl.style.color = colorExpression;
 
diff --git a/app/assets/javascripts/lib/utils/csrf.js b/app/assets/javascripts/lib/utils/csrf.js
index 3114a2a0dfbc84..8f3ea8b34c8c01 100644
--- a/app/assets/javascripts/lib/utils/csrf.js
+++ b/app/assets/javascripts/lib/utils/csrf.js
@@ -20,6 +20,10 @@ and https://github.com/rails/jquery-rails/blob/v4.3.1/vendor/assets/javascripts/
  */
 const csrf = {
   init() {
+    if (typeof window === 'undefined') {
+      this.csrfToken = null;
+      return;
+    }
     const tokenEl = document.querySelector('meta[name=csrf-token]');
 
     if (tokenEl !== null) {
diff --git a/app/assets/javascripts/lib/utils/is_navigating_away.js b/app/assets/javascripts/lib/utils/is_navigating_away.js
index 7df00b45379940..a0b6f60ecf705b 100644
--- a/app/assets/javascripts/lib/utils/is_navigating_away.js
+++ b/app/assets/javascripts/lib/utils/is_navigating_away.js
@@ -1,8 +1,8 @@
 let navigating = false;
 
-window.addEventListener('beforeunload', () => {
-  navigating = true;
-});
+// window.addEventListener('beforeunload', () => {
+//   navigating = true;
+// });
 
 /**
  * To only be used for testing purposes. Allows the navigating state to be set
diff --git a/app/assets/javascripts/lib/utils/jquery_at_who.js b/app/assets/javascripts/lib/utils/jquery_at_who.js
index 88111cb4ae4f8b..bb6c8e445db7b3 100644
--- a/app/assets/javascripts/lib/utils/jquery_at_who.js
+++ b/app/assets/javascripts/lib/utils/jquery_at_who.js
@@ -1,3 +1,3 @@
-import 'jquery';
-import 'jquery.caret'; // required by at.js
-import '@gitlab/at.js';
+// import 'jquery';
+// import 'jquery.caret'; // required by at.js
+// import '@gitlab/at.js';
diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js
index 12462a2575eb57..5baf8c0bc48050 100644
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -101,7 +101,8 @@ export function joinPaths(...paths) {
 
 // Returns an array containing the value(s) of the
 // of the key passed as an argument
-export function getParameterValues(sParam, url = window.location) {
+export function getParameterValues(sParam, url) {
+  url = typeof window !== 'undefined' ? url || window.location : process.env.BASE_URL;
   const sPageURL = decodeURIComponent(new URL(url).search.substring(1));
 
   return sPageURL.split('&').reduce((acc, urlParam) => {
@@ -127,7 +128,7 @@ export function getParameterValues(sParam, url = window.location) {
  * @param {Boolean} options.spreadArrays - split array values into separate key/value-pairs
  * @param {Boolean} options.sort - alphabetically sort params in the returned url (in asc order, i.e., a-z)
  */
-export function mergeUrlParams(params, url, options = {}) {
+export function mergeUrlParams(params, url = '', options = {}) {
   const { spreadArrays = false, sort = false } = options;
   const re = /^([^?#]*)(\?[^#]*)?(.*)/;
   let merged = {};
@@ -454,7 +455,7 @@ export const getUrlParamsArray = () => urlParamsToArray(window.location.search);
  *
  * ex: "?one=1&two=2" into {one: 1, two: 2}
  */
-export function queryToObject(query, { gatherArrays = false, legacySpacesDecode = false } = {}) {
+export function queryToObject(query = '', { gatherArrays = false, legacySpacesDecode = false } = {}) {
   const removeQuestionMarkFromQuery = String(query).startsWith('?') ? query.slice(1) : query;
   return removeQuestionMarkFromQuery.split('&').reduce((accumulator, curr) => {
     const [key, value] = curr.split('=');
@@ -490,7 +491,8 @@ export function queryToObject(query, { gatherArrays = false, legacySpacesDecode
  * @param {String?} urlToParse
  * @returns value of the parameter as string
  */
-export const getParameterByName = (name, query = window.location.search) => {
+export const getParameterByName = (name, query = '') => {
+  if (typeof window !== 'undefined') query = query || window.location.search
   return queryToObject(query)[name] || null;
 };
 
diff --git a/app/assets/javascripts/locale/index.js b/app/assets/javascripts/locale/index.js
index ad01da2eb1724f..ae97f9b62c7463 100644
--- a/app/assets/javascripts/locale/index.js
+++ b/app/assets/javascripts/locale/index.js
@@ -4,10 +4,15 @@ import sprintf from './sprintf';
 
 const GITLAB_FALLBACK_LANGUAGE = 'en';
 
-const languageCode = () =>
-  document.querySelector('html').getAttribute('lang') || GITLAB_FALLBACK_LANGUAGE;
-const locale = new Jed(window.translations || {});
-delete window.translations;
+// const languageCode = () =>
+//   document.querySelector('html').getAttribute('lang') || GITLAB_FALLBACK_LANGUAGE;
+
+const languageCode = () => GITLAB_FALLBACK_LANGUAGE;
+const locale = typeof window === 'undefined' ? {
+  gettext: s => s,
+  ngettext: s => s,
+} : new Jed(window.translations || {});
+typeof window !== 'undefined' && delete window.translations;
 
 /**
   Translates `text`
diff --git a/app/assets/javascripts/mr_notes/index.js b/app/assets/javascripts/mr_notes/index.js
index a1377415efe421..1aca21658c96e3 100644
--- a/app/assets/javascripts/mr_notes/index.js
+++ b/app/assets/javascripts/mr_notes/index.js
@@ -3,6 +3,7 @@ import store from '~/mr_notes/stores';
 import initCherryPickCommitModal from '~/projects/commit/init_cherry_pick_commit_modal';
 import initRevertCommitModal from '~/projects/commit/init_revert_commit_modal';
 import initDiffsApp from '../diffs';
+import { renderStreamingDiffsApp } from '../diffs/streaming.js';
 import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
 import MergeRequest from '../merge_request';
 import discussionCounter from '../notes/components/discussion_counter.vue';
@@ -10,7 +11,7 @@ import initDiscussionFilters from '../notes/discussion_filters';
 import initSortDiscussions from '../notes/sort_discussions';
 import initNotesApp from './init_notes';
 
-export default function initMrNotes() {
+export default async function initMrNotes() {
   resetServiceWorkersPublicPath();
 
   const mrShowNode = document.querySelector('.merge-request');
@@ -19,7 +20,8 @@ export default function initMrNotes() {
     action: mrShowNode.dataset.mrAction,
   });
 
-  initDiffsApp(store);
+  await renderStreamingDiffsApp(document.querySelector('#js-diffs-app').dataset);
+  // initDiffsApp(store);
   initNotesApp();
 
   document.addEventListener('merged:UpdateActions', () => {
diff --git a/app/assets/javascripts/mr_notes/stores/index.js b/app/assets/javascripts/mr_notes/stores/index.js
index 4a0602ad51258c..448dd632773bcd 100644
--- a/app/assets/javascripts/mr_notes/stores/index.js
+++ b/app/assets/javascripts/mr_notes/stores/index.js
@@ -7,10 +7,10 @@ import mrPageModule from './modules';
 
 Vue.use(Vuex);
 
-export const createStore = () =>
+export const createStore = ({ page } = {}) =>
   new Vuex.Store({
     modules: {
-      page: mrPageModule(),
+      page: mrPageModule(page),
       notes: notesModule(),
       diffs: diffsModule(),
       batchComments: batchCommentsModule(),
diff --git a/app/assets/javascripts/mr_notes/stores/modules/index.js b/app/assets/javascripts/mr_notes/stores/modules/index.js
index 52e12ba664c73b..e4c0b67aa4d42c 100644
--- a/app/assets/javascripts/mr_notes/stores/modules/index.js
+++ b/app/assets/javascripts/mr_notes/stores/modules/index.js
@@ -2,10 +2,10 @@ import * as actions from '../actions';
 import getters from '../getters';
 import mutations from '../mutations';
 
-export default () => ({
+export default ({ activeTab = null } = {}) => ({
   state: {
     endpoints: {},
-    activeTab: null,
+    activeTab,
     mrMetadata: {},
   },
   actions,
diff --git a/app/assets/javascripts/mr_popover/components/mr_popover.vue b/app/assets/javascripts/mr_popover/components/mr_popover.vue
index d99a3adb358a66..c0a4270eea254d 100644
--- a/app/assets/javascripts/mr_popover/components/mr_popover.vue
+++ b/app/assets/javascripts/mr_popover/components/mr_popover.vue
@@ -17,7 +17,7 @@ export default {
   mixins: [timeagoMixin],
   props: {
     target: {
-      type: HTMLAnchorElement,
+      type: Object,
       required: true,
     },
     projectPath: {
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index f465ad23a06ca8..5ec981c6e4da39 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -4,7 +4,6 @@ import { GlSafeHtmlDirective } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
 
-import '~/behaviors/markdown/render_gfm';
 import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
 import autosave from '../mixins/autosave';
 import noteAttachment from './note_attachment.vue';
@@ -91,7 +90,8 @@ export default {
       return escape(suggestion);
     },
   },
-  mounted() {
+  async mounted() {
+    await import('~/behaviors/markdown/render_gfm');
     this.renderGFM();
 
     if (this.isEditing) {
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 50b05ea9d69567..e76b96d3e4794a 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -1,5 +1,4 @@
 import $ from 'jquery';
-import Visibility from 'visibilityjs';
 import Vue from 'vue';
 import Api from '~/api';
 import createFlash from '~/flash';
@@ -509,7 +508,7 @@ const getFetchDataParams = (state) => {
   return { endpoint, options };
 };
 
-export const poll = ({ commit, state, getters, dispatch }) => {
+export const poll = async ({ commit, state, getters, dispatch }) => {
   const notePollOccurrenceTracking = create();
   let flashContainer;
 
@@ -544,19 +543,22 @@ export const poll = ({ commit, state, getters, dispatch }) => {
     errorCallback: () => notePollOccurrenceTracking.occur(),
   });
 
-  if (!Visibility.hidden()) {
-    eTagPoll.makeDelayedRequest(2500);
-  } else {
-    eTagPoll.makeRequest();
-  }
-
-  Visibility.change(() => {
+  if (typeof window !== 'undefined') {
+    const Visibility = await import('visibilityjs');
     if (!Visibility.hidden()) {
-      eTagPoll.restart();
+      eTagPoll.makeDelayedRequest(2500);
     } else {
-      eTagPoll.stop();
+      eTagPoll.makeRequest();
     }
-  });
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        eTagPoll.restart();
+      } else {
+        eTagPoll.stop();
+      }
+    });
+  }
 };
 
 export const stopPolling = () => {
diff --git a/app/assets/javascripts/pikaday.js b/app/assets/javascripts/pikaday.js
new file mode 100644
index 00000000000000..120b5bc1a95649
--- /dev/null
+++ b/app/assets/javascripts/pikaday.js
@@ -0,0 +1,13 @@
+module.exports = class {
+  toString() {}
+  getDate() {}
+  setDate() {}
+  getMoment() {}
+  setMoment() {}
+  clear() {}
+  gotoDate() {}
+  show() {}
+  isVisible() {}
+  hide() {}
+  destroy() {}
+};
diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
index a79da00de439e3..0247764a5a9cef 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
-import Visibility from 'visibilityjs';
 import createFlash from '~/flash';
 import Poll from '~/lib/utils/poll';
 import { __, s__, sprintf } from '~/locale';
@@ -61,7 +60,7 @@ export default {
         message: __('Something went wrong on our end'),
       });
     },
-    initPolling() {
+    async initPolling() {
       this.poll = new Poll({
         resource: this.service,
         method: 'fetchData',
@@ -69,6 +68,8 @@ export default {
         errorCallback: this.errorCallback,
       });
 
+      const Visibility = await import('visibilityjs');
+
       if (!Visibility.hidden()) {
         this.isLoading = true;
         this.poll.makeRequest();
diff --git a/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_widget.vue b/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_widget.vue
index dc0f2b54a7bd20..237b1567e6a3f8 100644
--- a/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_widget.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_widget.vue
@@ -12,10 +12,6 @@ export const confidentialWidget = Vue.observable({
   setConfidentiality: null,
 });
 
-const hideDropdownEvent = new CustomEvent('hiddenGlDropdown', {
-  bubbles: true,
-});
-
 export default {
   tracking: {
     event: Tracking.editEvent,
@@ -94,6 +90,10 @@ export default {
   methods: {
     closeForm() {
       this.$refs.editable.collapse();
+
+      const hideDropdownEvent = new CustomEvent('hiddenGlDropdown', {
+        bubbles: true,
+      });
       this.$el.dispatchEvent(hideDropdownEvent);
       this.$emit('closeForm');
     },
diff --git a/app/assets/javascripts/sidebar/event_hub.js b/app/assets/javascripts/sidebar/event_hub.js
index dd4bd9a5ab77d4..440232f66d4048 100644
--- a/app/assets/javascripts/sidebar/event_hub.js
+++ b/app/assets/javascripts/sidebar/event_hub.js
@@ -3,6 +3,6 @@ import createEventHub from '~/helpers/event_hub_factory';
 const eventHub = createEventHub();
 
 // TODO: remove eventHub hack after code splitting refactor
-window.emitSidebarEvent = (...args) => eventHub.$emit(...args);
+if (typeof window !== 'undefined') window.emitSidebarEvent = (...args) => eventHub.$emit(...args);
 
 export default eventHub;
diff --git a/app/assets/javascripts/task_list.js b/app/assets/javascripts/task_list.js
index 79a30340856b8b..49381c5fba7528 100644
--- a/app/assets/javascripts/task_list.js
+++ b/app/assets/javascripts/task_list.js
@@ -1,5 +1,4 @@
 import $ from 'jquery';
-import 'deckar01-task_list';
 import { __ } from '~/locale';
 import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
@@ -31,7 +30,8 @@ export default class TaskList {
     this.init();
   }
 
-  init() {
+  async init() {
+    await import('deckar01-task_list');
     this.disable(); // Prevent duplicate event bindings
 
     const taskListFields = document.querySelectorAll(
diff --git a/app/assets/javascripts/user_popovers.js b/app/assets/javascripts/user_popovers.js
index 4544373d8aa612..0c2ad2ce3e499c 100644
--- a/app/assets/javascripts/user_popovers.js
+++ b/app/assets/javascripts/user_popovers.js
@@ -59,14 +59,17 @@ const populateUserInfo = (user) => {
 
 const initializedPopovers = new Map();
 let domObservedForChanges = false;
+let addPopoversToModifiedTree;
 
-const addPopoversToModifiedTree = new MutationObserver(() => {
-  const userLinks = document?.querySelectorAll('.js-user-link, .gfm-project_member');
+if (typeof window !== 'undefined') {
+  addPopoversToModifiedTree = new MutationObserver(() => {
+    const userLinks = document?.querySelectorAll('.js-user-link, .gfm-project_member');
 
-  if (userLinks) {
-    addPopovers(userLinks); /* eslint-disable-line no-use-before-define */
-  }
-});
+    if (userLinks) {
+      addPopovers(userLinks); /* eslint-disable-line no-use-before-define */
+    }
+  });
+}
 
 function observeBody() {
   if (!domObservedForChanges) {
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 603ad71adb9603..d02ca5d41960c8 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -1,7 +1,6 @@
 <script>
 import { GlIcon } from '@gitlab/ui';
 import $ from 'jquery';
-import '~/behaviors/markdown/render_gfm';
 import { debounce, unescape } from 'lodash';
 import createFlash from '~/flash';
 import GLForm from '~/gl_form';
@@ -203,7 +202,8 @@ export default {
       },
     },
   },
-  mounted() {
+  async mounted() {
+    await import('~/behaviors/markdown/render_gfm');
     // GLForm class handles all the toolbar buttons
     return new GLForm(
       $(this.$refs['gl-form']),
diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
index 05e0c3b0be34d7..d91bea32adad6b 100644
--- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
+++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
@@ -30,7 +30,7 @@ export default {
   },
   props: {
     target: {
-      type: HTMLElement,
+      type: Object,
       required: true,
     },
     user: {
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index 7a703e035c1a4c..b078398a24eb57 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -612,6 +612,9 @@ table.code {
   .diff-grid-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
+    height: 20px;
+    content-visibility: auto;
+    contain-intrinsic-size: 1px 20px;
   }
 
   .diff-grid-left,
diff --git a/app/controllers/projects/merge_requests/diffs_controller.rb b/app/controllers/projects/merge_requests/diffs_controller.rb
index 9bc9c19157a1de..8d0f1bb75c12fb 100644
--- a/app/controllers/projects/merge_requests/diffs_controller.rb
+++ b/app/controllers/projects/merge_requests/diffs_controller.rb
@@ -2,6 +2,7 @@
 
 class Projects::MergeRequests::DiffsController < Projects::MergeRequests::ApplicationController
   include DiffHelper
+  include MergeRequestsHelper
   include RendersNotes
   include Gitlab::Cache::Helpers
 
@@ -94,6 +95,8 @@ def preloadable_mr_relations
 
   # Deprecated: https://gitlab.com/gitlab-org/gitlab/issues/37735
   def render_diffs
+    # data = diffs_tab_pane_data(@merge_request.project, @merge_request, request.query_parameters)
+    # render json: data.transform_keys{ |key| key.to_s.camelize(:lower) } and return
     diffs = @compare.diffs(diff_options)
 
     diffs.unfold_diff_files(note_positions.unfoldable)
diff --git a/app/helpers/merge_requests_helper.rb b/app/helpers/merge_requests_helper.rb
index abb7128470fa75..50fa70bdf0fbfe 100644
--- a/app/helpers/merge_requests_helper.rb
+++ b/app/helpers/merge_requests_helper.rb
@@ -173,17 +173,17 @@ def diffs_tab_pane_data(project, merge_request, params)
     {
       "is-locked": merge_request.discussion_locked?,
       endpoint: diffs_project_merge_request_path(project, merge_request, 'json', params),
-      endpoint_metadata: @endpoint_metadata_url,
+      endpoint_metadata: endpoint_metadata_url(@project, @merge_request),
       endpoint_batch: diffs_batch_project_json_merge_request_path(project, merge_request, 'json', params),
       endpoint_coverage: @coverage_path,
       help_page_path: help_page_path('user/discussions/index.md', anchor: 'suggest-changes'),
       current_user_data: @current_user_data,
       update_current_user_path: @update_current_user_path,
       project_path: project_path(merge_request.project),
-      changes_empty_state_illustration: image_path('illustrations/merge_request_changes_empty.svg'),
+      changes_empty_state_illustration: ActionController::Base.helpers.image_path('illustrations/merge_request_changes_empty.svg'),
       is_fluid_layout: fluid_layout.to_s,
       dismiss_endpoint: callouts_path,
-      show_suggest_popover: show_suggest_popover?.to_s,
+      show_suggest_popover: false,
       show_whitespace_default: @show_whitespace_default.to_s,
       file_by_file_default: @file_by_file_default.to_s,
       default_suggestion_commit_message: default_suggestion_commit_message,
@@ -193,6 +193,17 @@ def diffs_tab_pane_data(project, merge_request, params)
     }
   end
 
+  def endpoint_metadata_url(project, merge_request)
+    params = request.query_parameters
+    params[:view] = "inline"
+
+    if Feature.enabled?(:default_merge_ref_for_diffs, project, default_enabled: :yaml)
+      params = params.merge(diff_head: true)
+    end
+
+    diffs_metadata_project_json_merge_request_path(project, merge_request, 'json', params)
+  end
+
   def award_emoji_merge_request_api_path(merge_request)
     if Feature.enabled?(:improved_emoji_picker, merge_request.project, default_enabled: :yaml)
       api_v4_projects_merge_requests_award_emoji_path(id: merge_request.project.id, merge_request_iid: merge_request.iid)
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 152a5a69842c47..47695177b2ceac 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -317,8 +317,8 @@ module.exports = {
           {
             loader: 'worker-loader',
             options: {
-              name: '[name].[contenthash:8].worker.js',
-              inline: IS_DEV_SERVER,
+              filename: '[name].[contenthash:8].worker.js',
+              inline: IS_DEV_SERVER ? 'fallback' : 'no-fallback',
             },
           },
           'babel-loader',
diff --git a/config/webpack.ssr.config.js b/config/webpack.ssr.config.js
new file mode 100644
index 00000000000000..461ea4b77c39a8
--- /dev/null
+++ b/config/webpack.ssr.config.js
@@ -0,0 +1,226 @@
+const path = require('path');
+const webpack = require('webpack');
+const nodeExternals = require('webpack-node-externals');
+const VueLoaderPlugin = require('vue-loader/lib/plugin.js');
+const MonacoWebpackPlugin = require('./plugins/monaco_webpack.js');
+const GraphqlKnownOperationsPlugin = require('./plugins/graphql_known_operations_plugin.js');
+// const config = require('./webpack.config.js');
+
+const IS_EE = require('./helpers/is_ee_env');
+const IS_JH = require('./helpers/is_jh_env');
+
+const ROOT_PATH = path.resolve(__dirname, '..');
+
+const alias = {
+  '~': path.join(ROOT_PATH, 'app/assets/javascripts'),
+  emojis: path.join(ROOT_PATH, 'fixtures/emojis'),
+  empty_states: path.join(ROOT_PATH, 'app/views/shared/empty_states'),
+  icons: path.join(ROOT_PATH, 'app/views/shared/icons'),
+  images: path.join(ROOT_PATH, 'app/assets/images'),
+  vendor: path.join(ROOT_PATH, 'vendor/assets/javascripts'),
+  jquery$: 'jquery/dist/jquery.slim.js',
+  jest: path.join(ROOT_PATH, 'spec/frontend'),
+  shared_queries: path.join(ROOT_PATH, 'app/graphql/queries'),
+
+  // the following resolves files which are different between CE and EE
+  ee_else_ce: path.join(ROOT_PATH, 'app/assets/javascripts'),
+
+  // the following resolves files which are different between CE and JH
+  jh_else_ce: path.join(ROOT_PATH, 'app/assets/javascripts'),
+
+  // the following resolves files which are different between CE/EE/JH
+  any_else_ce: path.join(ROOT_PATH, 'app/assets/javascripts'),
+
+  // override loader path for icons.svg so we do not duplicate this asset
+  '@gitlab/svgs/dist/icons.svg': path.join(
+    ROOT_PATH,
+    'app/assets/javascripts/lib/utils/icons_path.js',
+  ),
+  dompurify: path.resolve(ROOT_PATH, 'app/assets/javascripts/dompurify.js'),
+  pikaday: path.resolve(ROOT_PATH, 'app/assets/javascripts/pikaday.js'),
+  '@gitlab/ui': path.resolve(ROOT_PATH, 'app/assets/javascripts/gitlab-ui'),
+  // '@gitlab/ui/dist/utils': path.resolve(ROOT_PATH, 'node_modules/@gitlab/ui/dist/utils/utils.js'),
+};
+if (IS_EE) {
+  Object.assign(alias, {
+    ee: path.join(ROOT_PATH, 'ee/app/assets/javascripts'),
+    ee_component: path.join(ROOT_PATH, 'ee/app/assets/javascripts'),
+    ee_empty_states: path.join(ROOT_PATH, 'ee/app/views/shared/empty_states'),
+    ee_icons: path.join(ROOT_PATH, 'ee/app/views/shared/icons'),
+    ee_images: path.join(ROOT_PATH, 'ee/app/assets/images'),
+    ee_jest: path.join(ROOT_PATH, 'ee/spec/frontend'),
+    ee_else_ce: path.join(ROOT_PATH, 'ee/app/assets/javascripts'),
+    jh_else_ee: path.join(ROOT_PATH, 'ee/app/assets/javascripts'),
+    any_else_ce: path.join(ROOT_PATH, 'ee/app/assets/javascripts'),
+  });
+}
+
+if (IS_JH) {
+  Object.assign(alias, {
+    jh: path.join(ROOT_PATH, 'jh/app/assets/javascripts'),
+    jh_component: path.join(ROOT_PATH, 'jh/app/assets/javascripts'),
+    jh_empty_states: path.join(ROOT_PATH, 'jh/app/views/shared/empty_states'),
+    jh_icons: path.join(ROOT_PATH, 'jh/app/views/shared/icons'),
+    jh_images: path.join(ROOT_PATH, 'jh/app/assets/images'),
+    jh_jest: path.join(ROOT_PATH, 'jh/spec/frontend'),
+    // jh path alias https://gitlab.com/gitlab-org/gitlab/-/merge_requests/74305#note_732793956
+    jh_else_ce: path.join(ROOT_PATH, 'jh/app/assets/javascripts'),
+    jh_else_ee: path.join(ROOT_PATH, 'jh/app/assets/javascripts'),
+    any_else_ce: path.join(ROOT_PATH, 'jh/app/assets/javascripts'),
+  });
+}
+
+const newConfig = {
+  mode: 'development',
+  entry: './app/assets/javascripts/entry-server.js',
+  target: 'node',
+  node: {
+    __dirname: false,
+  },
+  output: {
+    path: path.resolve(__dirname, '../out'),
+    filename: '[name].bundle.js',
+    libraryTarget: 'commonjs2',
+    globalObject: 'this',
+  },
+  resolve: {
+    extensions: ['.js'],
+    alias,
+  },
+  optimization: {
+    minimize: false,
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      gon: {},
+      'window.gon': {},
+      'navigator.userAgent': JSON.stringify(''),
+      // These are used to define window.gon.ee, window.gon.jh and other things properly in tests:
+      'process.env.IS_EE': JSON.stringify(IS_EE),
+      'process.env.IS_JH': JSON.stringify(IS_JH),
+      // These are used to check against "EE" properly in application code
+      IS_EE: IS_EE ? 'window.gon && window.gon.ee' : JSON.stringify(false),
+      IS_JH: IS_JH ? 'window.gon && window.gon.jh' : JSON.stringify(false),
+    }),
+    new MonacoWebpackPlugin({
+      globalAPI: true,
+    }),
+    new GraphqlKnownOperationsPlugin({ filename: 'graphql_known_operations.yml' }),
+    new VueLoaderPlugin(),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      fetch: 'node-fetch',
+    }),
+    new webpack.IgnorePlugin(/moment/, /pikaday/),
+  ],
+  module: {
+    strictExportPresence: true,
+    rules: [
+      // {
+      //   type: 'javascript/auto',
+      //   test: /\.mjs$/,
+      //   use: [],
+      // },
+      {
+        test: /\.(mjs|js)$/,
+        exclude: (modulePath) => {
+          // if (/@gitlab/.test(modulePath)) return false;
+          if (/^(dateformat|fast-mersenne-twister|node-fetch|fetch-blob)$/.test(modulePath)) return false;
+          // if (/node-fetch|fetch-blob|formdata-polyfill/.test(modulePath)) return false;
+          return /node_modules|vendor[\\/]assets/.test(modulePath) && !/\.vue\.js/.test(modulePath);
+        },
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      },
+      {
+        test: /\.(graphql|gql)$/,
+        exclude: /node_modules/,
+        loader: 'graphql-tag/loader',
+      },
+      {
+        test: /icons\.svg$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[contenthash:8].[ext]',
+        },
+      },
+      {
+        test: /\.svg$/,
+        exclude: /icons\.svg$/,
+        loader: 'raw-loader',
+      },
+      {
+        test: /\.(gif|png|mp4)$/,
+        loader: 'url-loader',
+        options: { limit: 2048 },
+      },
+      {
+        test: /_worker\.js$/,
+        use: [
+          {
+            loader: 'worker-loader',
+            options: {
+              filename: '[name].[contenthash:8].worker.js',
+            },
+          },
+          'babel-loader',
+        ],
+      },
+      {
+        test: /\.(worker(\.min)?\.js|pdf|bmpr)$/,
+        exclude: /node_modules/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[contenthash:8].[ext]',
+        },
+      },
+      {
+        test: /.css$/,
+        use: [
+          'vue-style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: 'global',
+              localIdentName: '[name].[contenthash:8].[ext]',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(eot|ttf|woff|woff2)$/,
+        include: /node_modules\/(katex\/dist\/fonts|monaco-editor)/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[contenthash:8].[ext]',
+          esModule: false,
+        },
+      },
+      {
+        test: /editor\/schema\/.+\.json$/,
+        type: 'javascript/auto',
+        loader: 'file-loader',
+        options: {
+          name: '[name].[contenthash:8].[ext]',
+        },
+      },
+    ],
+  },
+  devtool: false,
+  externals: [
+    // nodeExternals({
+    //   allowlist: [/gitlab|bootstrap|dateformat|fast-mersenne-twister|node-fetch/],
+    // }),
+    /^node:/,
+    'zlib',
+    'stream',
+    'https',
+    'http',
+  ],
+};
+
+module.exports = newConfig;
diff --git a/db/structure.sql b/db/structure.sql
index dad5942f21360d..24e6d8b6e5865a 100644
--- a/db/structure.sql
+++ b/db/structure.sql
@@ -10613,10 +10613,10 @@ CREATE TABLE application_settings (
     container_registry_import_max_step_duration integer DEFAULT 300 NOT NULL,
     container_registry_import_target_plan text DEFAULT 'free'::text NOT NULL,
     container_registry_import_created_before timestamp with time zone DEFAULT '2022-01-23 00:00:00+00'::timestamp with time zone NOT NULL,
-    max_package_files_for_package_destruction smallint DEFAULT 100 NOT NULL,
     runner_token_expiration_interval integer,
     group_runner_token_expiration_interval integer,
     project_runner_token_expiration_interval integer,
+    max_package_files_for_package_destruction smallint DEFAULT 100 NOT NULL,
     ecdsa_sk_key_restriction integer DEFAULT 0 NOT NULL,
     ed25519_sk_key_restriction integer DEFAULT 0 NOT NULL,
     CONSTRAINT app_settings_container_reg_cleanup_tags_max_list_size_positive CHECK ((container_registry_cleanup_tags_service_max_list_size >= 0)),
diff --git a/ee/app/assets/javascripts/diffs/store/actions.js b/ee/app/assets/javascripts/diffs/store/actions.js
index ef33bc75220e41..c4fdf90f89b396 100644
--- a/ee/app/assets/javascripts/diffs/store/actions.js
+++ b/ee/app/assets/javascripts/diffs/store/actions.js
@@ -1,4 +1,4 @@
-import Visibility from 'visibilityjs';
+
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
@@ -28,7 +28,7 @@ export const restartCodequalityPolling = () => {
   if (codequalityPoll) codequalityPoll.restart();
 };
 
-export const fetchCodequality = ({ commit, state, dispatch }) => {
+export const fetchCodequality = async ({ commit, state, dispatch }) => {
   let retryCount = 0;
 
   codequalityPoll = new Poll({
@@ -65,16 +65,19 @@ export const fetchCodequality = ({ commit, state, dispatch }) => {
       }
     },
   });
+  if (typeof window !== 'undefined') {
+    const Visibility = await import('visibilityjs');
+    if (!Visibility.hidden()) {
+      codequalityPoll.makeRequest();
+    }
 
-  if (!Visibility.hidden()) {
-    codequalityPoll.makeRequest();
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        dispatch('restartCodequalityPolling');
+      } else {
+        dispatch('stopCodequalityPolling');
+      }
+    });
   }
 
-  Visibility.change(() => {
-    if (!Visibility.hidden()) {
-      dispatch('restartCodequalityPolling');
-    } else {
-      dispatch('stopCodequalityPolling');
-    }
-  });
 };
diff --git a/lib/gitlab/content_security_policy/config_loader.rb b/lib/gitlab/content_security_policy/config_loader.rb
index 78ba091680818b..53a31e6e12b432 100644
--- a/lib/gitlab/content_security_policy/config_loader.rb
+++ b/lib/gitlab/content_security_policy/config_loader.rb
@@ -8,6 +8,7 @@ class ConfigLoader
                       media_src object_src report_uri script_src style_src worker_src).freeze
 
       def self.default_enabled
+        return false
         Rails.env.development? || Rails.env.test?
       end
 
diff --git a/package.json b/package.json
index d4161674fcaf72..691e78b7570bb3 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "@babel/core": "^7.10.1",
     "@babel/plugin-proposal-class-properties": "^7.10.1",
     "@babel/plugin-proposal-json-strings": "^7.10.1",
-    "@babel/plugin-proposal-private-methods": "^7.10.1",
+    "@babel/plugin-proposal-private-methods": "^7.16.11",
     "@babel/plugin-syntax-import-meta": "^7.10.1",
     "@babel/preset-env": "^7.10.1",
     "@gitlab/at.js": "1.5.7",
@@ -129,6 +129,7 @@
     "dropzone": "^4.2.0",
     "editorconfig": "^0.15.3",
     "emoji-regex": "^10.0.0",
+    "express": "^4.17.2",
     "fast-mersenne-twister": "1.0.2",
     "file-loader": "^6.2.0",
     "fuzzaldrin-plus": "^0.6.0",
@@ -155,6 +156,7 @@
     "monaco-editor-webpack-plugin": "^4.0.0",
     "monaco-yaml": "^2.5.1",
     "mousetrap": "1.6.5",
+    "node-fetch": "2.6.7",
     "papaparse": "^5.3.1",
     "pdfjs-dist": "^2.0.943",
     "pikaday": "^1.8.0",
@@ -191,6 +193,7 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-resize": "^1.0.1",
     "vue-router": "3.4.9",
+    "vue-server-renderer": "2.6.12",
     "vue-template-compiler": "^2.6.12",
     "vue-virtual-scroll-list": "^1.4.7",
     "vuedraggable": "^2.23.0",
@@ -199,8 +202,9 @@
     "webpack": "^4.46.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^3.3.12",
+    "webpack-node-externals": "^3.0.0",
     "webpack-stats-plugin": "^0.3.1",
-    "worker-loader": "^2.0.0",
+    "worker-loader": "^3.0.8",
     "xterm": "3.14.5",
     "yaml": "^2.0.0-8"
   },
diff --git a/server.js b/server.js
new file mode 100644
index 00000000000000..1e5b12f355f446
--- /dev/null
+++ b/server.js
@@ -0,0 +1,36 @@
+const server = require('express')();
+const renderer = require('vue-server-renderer').createRenderer();
+const fetch = require('node-fetch');
+const { createApp } = require('./out/main.bundle.js');
+
+const {Worker: NodeJSWorker} = require('worker_threads');
+const {resolve: resolvePath} = require('path');
+
+global.Worker = function NodeJSWorkerThreadsPathResolveWrap(path, options) {
+  // this __dirname will travel into the bundle and only resolved at
+  // runtime there, so it will be the path to the dist bin
+  // and we can assume to find the worker there.
+  // generally, this has to be an absolute path with NodeJS worker-threads,
+  // so this is why we use resolve here and not join.
+  return new NodeJSWorker(resolvePath(__dirname, 'out', path), options);
+}
+
+server.get('*', async (req, res) => {
+  // const response = await fetch('http://gdk.test:3000/gitlab-org/gitlab-shell/-/merge_requests/6/diffs', {
+  //   headers: {
+  //     Accept: 'application/json',
+  //     cookie: process.env.COOKIE,
+  //   }
+  // });
+  // const config = await response.json();
+  const app = await createApp(req.query, req.headers.cookie);
+  const stream = renderer.renderToStream(app);
+  res.setHeader('Access-Control-Allow-Origin', req.get('origin'));
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  res.setHeader('Access-Control-Allow-Headers', 'origin, content-type, accept, cookie');
+  res.setHeader('Access-Control-Allow-Credentials', 'true');
+  res.set({ 'content-type': 'text/html; charset=utf-8' });
+  stream.pipe(res);
+});
+
+server.listen(8080);
diff --git a/test.http b/test.http
new file mode 100644
index 00000000000000..3286f969ff82ee
--- /dev/null
+++ b/test.http
@@ -0,0 +1,3 @@
+GET http://gdk.test:3000/gitlab-org/gitlab-shell/-/merge_requests/6/diffs
+Accept: application/json
+Cookie: _gitlab_session_53e714e6757b5ebb751d733bb7fae7fb57ad0dad59db67430d421af8079af8ca=e8d1f4d51c8c8ae532c9fc4393f86acb
diff --git a/yarn.lock b/yarn.lock
index 02011b7d89db46..6133217ab755f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -65,6 +65,13 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
+"@babel/helper-annotate-as-pure@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
+  integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.1.tgz#0ec7d9be8174934532661f87783eb18d72290059"
@@ -95,6 +102,19 @@
     "@babel/helper-replace-supers" "^7.15.4"
     "@babel/helper-split-export-declaration" "^7.15.4"
 
+"@babel/helper-create-class-features-plugin@^7.16.10":
+  version "7.17.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.1.tgz#9699f14a88833a7e055ce57dcd3ffdcd25186b21"
+  integrity sha512-JBdSr/LtyYIno/pNnJ75lBcqc3Z1XXujzPanHqjvvrhOA+DTceTFuJi8XjmWTZh4r3fsdfqaCMN0iZemdkxZHQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-member-expression-to-functions" "^7.16.7"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/helper-replace-supers" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+
 "@babel/helper-create-regexp-features-plugin@^7.10.1", "@babel/helper-create-regexp-features-plugin@^7.8.3":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.10.1.tgz#1b8feeab1594cbcfbf3ab5a3bbcabac0468efdbd"
@@ -158,6 +178,13 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
+"@babel/helper-member-expression-to-functions@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.7.tgz#42b9ca4b2b200123c3b7e726b0ae5153924905b0"
+  integrity sha512-VtJ/65tYiU/6AbMTDwyoXGPKHgTsfRarivm+YbB5uAzKUyuPjgZSgAFeG87FCigc7KNHu2Pegh1XIT3lXjvz3Q==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-module-imports@^7.0.0-beta.49", "@babel/helper-module-imports@^7.10.1", "@babel/helper-module-imports@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
@@ -186,11 +213,23 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
+"@babel/helper-optimise-call-expression@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz#a34e3560605abbd31a18546bd2aad3e6d9a174f2"
+  integrity sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.1", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.8.0":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
   integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
 
+"@babel/helper-plugin-utils@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
+  integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
+
 "@babel/helper-regex@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.1.tgz#021cf1a7ba99822f993222a001cc3fec83255b96"
@@ -219,6 +258,17 @@
     "@babel/traverse" "^7.15.4"
     "@babel/types" "^7.15.4"
 
+"@babel/helper-replace-supers@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz#e9f5f5f32ac90429c1a4bdec0f231ef0c2838ab1"
+  integrity sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-member-expression-to-functions" "^7.16.7"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/traverse" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-simple-access@^7.14.8", "@babel/helper-simple-access@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz#d656654b9ea08dbb9659b69d61063ccd343ff0f7"
@@ -371,6 +421,14 @@
     "@babel/helper-create-class-features-plugin" "^7.10.1"
     "@babel/helper-plugin-utils" "^7.10.1"
 
+"@babel/plugin-proposal-private-methods@^7.16.11":
+  version "7.16.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.11.tgz#e8df108288555ff259f4527dbe84813aac3a1c50"
+  integrity sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.10"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.10.1", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.1.tgz#dc04feb25e2dd70c12b05d680190e138fa2c0c6f"
@@ -2392,6 +2450,11 @@ ansi-regex@^5.0.0, ansi-regex@^5.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
+
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -2937,6 +3000,22 @@ body-parser@1.19.0:
     raw-body "2.4.0"
     type-is "~1.6.17"
 
+body-parser@1.19.1:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.1.tgz#1499abbaa9274af3ecc9f6f10396c995943e31d4"
+  integrity sha512-8ljfQi5eBk8EJfECMrgqNGWPEY5jWP+1IzkzkGdFFEwFQZZyaZ21UqdaHktgiMlH0xLHqIFtE/u2OYE5dOtViA==
+  dependencies:
+    bytes "3.1.1"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.2"
+    http-errors "1.8.1"
+    iconv-lite "0.4.24"
+    on-finished "~2.3.0"
+    qs "6.9.6"
+    raw-body "2.4.2"
+    type-is "~1.6.18"
+
 bonjour@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
@@ -3153,6 +3232,11 @@ bytes@3.1.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
 
+bytes@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.1.tgz#3f018291cb4cbad9accb6e6970bca9c8889e879a"
+  integrity sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==
+
 cacache@^12.0.2:
   version "12.0.3"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.3.tgz#be99abba4e1bf5df461cd5a2c1071fc432573390"
@@ -3298,6 +3382,17 @@ catharsis@~0.8.9:
   dependencies:
     underscore-contrib "~0.3.0"
 
+chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
 chalk@^2.0.0, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -3692,6 +3787,13 @@ content-disposition@0.5.3:
   dependencies:
     safe-buffer "5.1.2"
 
+content-disposition@0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
+  dependencies:
+    safe-buffer "5.2.1"
+
 content-type@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
@@ -3714,6 +3816,11 @@ cookie@0.4.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
   integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
 
+cookie@0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
+  integrity sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
+
 copy-concurrently@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
@@ -5142,7 +5249,7 @@ escape-html@~1.0.3:
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
 
-escape-string-regexp@^1.0.5, escape-string-regexp@~1.0.5:
+escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5, escape-string-regexp@~1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -5588,6 +5695,42 @@ express@^4.17.1:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+express@^4.17.2:
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.17.2.tgz#c18369f265297319beed4e5558753cc8c1364cb3"
+  integrity sha512-oxlxJxcQlYwqPWKVJJtvQiwHgosH/LrLSPA+H4UxpyvSS6jC5aH+5MoHFM+KABgTOt0APue4w66Ha8jCUo9QGg==
+  dependencies:
+    accepts "~1.3.7"
+    array-flatten "1.1.1"
+    body-parser "1.19.1"
+    content-disposition "0.5.4"
+    content-type "~1.0.4"
+    cookie "0.4.1"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "~1.1.2"
+    fresh "0.5.2"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.7"
+    qs "6.9.6"
+    range-parser "~1.2.1"
+    safe-buffer "5.2.1"
+    send "0.17.2"
+    serve-static "1.14.2"
+    setprototypeof "1.2.0"
+    statuses "~1.5.0"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
 extend-shallow@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
@@ -5877,6 +6020,11 @@ format@^0.2.0:
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
 
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -6249,6 +6397,13 @@ hard-rejection@^2.1.0:
   resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
   integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
 
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
+  dependencies:
+    ansi-regex "^2.0.0"
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -6448,6 +6603,17 @@ http-errors@1.7.2, http-errors@~1.7.2:
     statuses ">= 1.5.0 < 2"
     toidentifier "1.0.0"
 
+http-errors@1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.8.1.tgz#7c3f28577cbc8a207388455dbd62295ed07bd68c"
+  integrity sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.1"
+
 http-errors@~1.6.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
@@ -6650,7 +6816,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -6710,7 +6876,7 @@ ipaddr.js@1.9.0:
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.0.tgz#37df74e430a0e47550fe54a2defe30d8acd95f65"
   integrity sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==
 
-ipaddr.js@^1.9.0, ipaddr.js@^1.9.1:
+ipaddr.js@1.9.1, ipaddr.js@^1.9.0, ipaddr.js@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
   integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
@@ -6763,7 +6929,7 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-module@^2.7.0:
+is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-module@^2.7.0, is-core-module@^2.8.1:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
   integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
@@ -7908,6 +8074,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash._reinterpolate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+
 lodash.assign@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
@@ -8033,6 +8204,21 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
+lodash.template@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
+  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
+  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+
 lodash.truncate@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
@@ -8626,6 +8812,11 @@ ms@2.1.2, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+ms@2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
 multicast-dns-service-types@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
@@ -8686,6 +8877,13 @@ node-ensure@^0.0.0:
   resolved "https://registry.yarnpkg.com/node-ensure/-/node-ensure-0.0.0.tgz#ecae764150de99861ec5c810fd5d096b183932a7"
   integrity sha1-7K52QVDemYYexcgQ/V0Jaxg5Mqc=
 
+node-fetch@2.6.7:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
+  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
+  dependencies:
+    whatwg-url "^5.0.0"
+
 node-fetch@^2.6.1, node-fetch@^2.6.5:
   version "2.6.6"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.6.tgz#1751a7c01834e8e1697758732e9efb6eeadfaf89"
@@ -9264,6 +9462,11 @@ path-parse@^1.0.6:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
 path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
@@ -9749,6 +9952,14 @@ proxy-addr@~2.0.5:
     forwarded "~0.1.2"
     ipaddr.js "1.9.0"
 
+proxy-addr@~2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
@@ -9845,6 +10056,11 @@ qs@6.7.0:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
+qs@6.9.6:
+  version "6.9.6"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.6.tgz#26ed3c8243a431b2924aca84cc90471f35d5a0ee"
+  integrity sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==
+
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
@@ -9912,6 +10128,16 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-body@2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.2.tgz#baf3e9c21eebced59dd6533ac872b71f7b61cb32"
+  integrity sha512-RPMAFUJP19WIet/99ngh6Iv8fzAbqum4Li7AD6DtGaW2RpMB/11xDoalPiJMTbu6I3hkbMVkATvZrqb9EEqeeQ==
+  dependencies:
+    bytes "3.1.1"
+    http-errors "1.8.1"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
 raw-loader@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
@@ -10249,6 +10475,15 @@ resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.17.0, resolve@^1.2
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
+resolve@^1.2.0:
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
+  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+  dependencies:
+    is-core-module "^2.8.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 responselike@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
@@ -10337,6 +10572,11 @@ safe-buffer@5.1.2, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0,
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
+safe-buffer@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@@ -10493,11 +10733,37 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
+send@0.17.2:
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"
+  integrity sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "1.8.1"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "~2.3.0"
+    range-parser "~1.2.1"
+    statuses "~1.5.0"
+
 serialize-javascript@^2.1.0, serialize-javascript@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
   integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
 
+serialize-javascript@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-3.1.0.tgz#8bf3a9170712664ef2561b44b691eafe399214ea"
+  integrity sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==
+  dependencies:
+    randombytes "^2.1.0"
+
 serialize-javascript@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
@@ -10535,6 +10801,16 @@ serve-static@1.14.1:
     parseurl "~1.3.3"
     send "0.17.1"
 
+serve-static@1.14.2:
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.2.tgz#722d6294b1d62626d41b43a013ece4598d292bfa"
+  integrity sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.17.2"
+
 set-blocking@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@@ -10565,6 +10841,11 @@ setprototypeof@1.1.1:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
   integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
 
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
 sha.js@^2.4.0, sha.js@^2.4.8:
   version "2.4.10"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.10.tgz#b1fde5cd7d11a5626638a07c604ab909cfa31f9b"
@@ -10982,7 +11263,7 @@ string_decoder@~0.10.x:
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
   integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
 
-strip-ansi@^3.0.1:
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
   integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
@@ -11134,6 +11415,11 @@ subscriptions-transport-ws@^0.11.0:
     symbol-observable "^1.0.4"
     ws "^5.2.0 || ^6.0.0 || ^7.0.0"
 
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
+
 supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -11163,6 +11449,11 @@ supports-hyperlinks@^2.0.0, supports-hyperlinks@^2.2.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
 svg-tags@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
@@ -11469,6 +11760,11 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
 totalist@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
@@ -12088,6 +12384,20 @@ vue-runtime-helpers@^1.1.2:
   resolved "https://registry.yarnpkg.com/vue-runtime-helpers/-/vue-runtime-helpers-1.1.2.tgz#446b7b820888ab0c5264d2c3a32468e72e4100f3"
   integrity sha512-pZfGp+PW/IXEOyETE09xQHR1CKkR9HfHZdnMD/FVLUNI+HxYTa82evx5WrF6Kz4s82qtqHvMZ8MZpbk2zT2E1Q==
 
+vue-server-renderer@2.6.12:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.12.tgz#a8cb9c49439ef205293cb41c35d0d2b0541653a5"
+  integrity sha512-3LODaOsnQx7iMFTBLjki8xSyOxhCtbZ+nQie0wWY4iOVeEtTg1a3YQAjd82WvKxrWHHTshjvLb7OXMc2/dYuxw==
+  dependencies:
+    chalk "^1.1.3"
+    hash-sum "^1.0.2"
+    he "^1.1.0"
+    lodash.template "^4.5.0"
+    lodash.uniq "^4.5.0"
+    resolve "^1.2.0"
+    serialize-javascript "^3.1.0"
+    source-map "0.5.6"
+
 vue-style-loader@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.0.tgz#7588bd778e2c9f8d87bfc3c5a4a039638da7a863"
@@ -12292,6 +12602,11 @@ webpack-log@^2.0.0:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
 
+webpack-node-externals@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-3.0.0.tgz#1a3407c158d547a9feb4229a9e3385b7b60c9917"
+  integrity sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==
+
 webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
@@ -12423,6 +12738,14 @@ worker-loader@^2.0.0:
     loader-utils "^1.0.0"
     schema-utils "^0.4.0"
 
+worker-loader@^3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-3.0.8.tgz#5fc5cda4a3d3163d9c274a4e3a811ce8b60dbb37"
+  integrity sha512-XQyQkIFeRVC7f7uRhFdNMe/iJOdO6zxAaR3EWbDp45v3mDhrTi+++oswKNxShUNjPC/1xUp5DB29YKLhFo129g==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 wrap-ansi@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
-- 
GitLab


From 76e9e90207377888c895cfaa96d4b3f5506ae243 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Mon, 7 Feb 2022 06:07:54 +0300
Subject: [PATCH 2/4] GitLab-UI compatibility layer

---
 .../javascripts/gitlab-ui/dist/charts.js      |  18 +
 .../base/accordion/accordion.documentation.js |   8 +
 .../components/base/accordion/accordion.js    |  79 +++
 .../accordion/accordion_item.documentation.js |   7 +
 .../base/accordion/accordion_item.js          | 111 ++++
 .../base/alert/alert.documentation.js         |  13 +
 .../dist/components/base/alert/alert.js       | 220 +++++++
 .../base/avatar/avatar.documentation.js       |   8 +
 .../dist/components/base/avatar/avatar.js     | 114 ++++
 .../avatar_labeled.documentation.js           |   8 +
 .../base/avatar_labeled/avatar_labeled.js     |  79 +++
 .../avatar_link/avatar_link.documentation.js  |   8 +
 .../base/avatar_link/avatar_link.js           |  47 ++
 .../avatars_inline.documentation.js           |  13 +
 .../base/avatars_inline/avatars_inline.js     | 139 +++++
 .../base/badge/badge.documentation.js         |   8 +
 .../dist/components/base/badge/badge.js       |  98 ++++
 .../base/banner/banner.documentation.js       |   8 +
 .../dist/components/base/banner/banner.js     | 136 +++++
 .../breadcrumb/breadcrumb.documentation.js    |   8 +
 .../components/base/breadcrumb/breadcrumb.js  | 127 ++++
 .../broadcast_message.documentation.js        |   8 +
 .../broadcast_message/broadcast_message.js    |  90 +++
 .../base/button/button.documentation.js       |  24 +
 .../dist/components/base/button/button.js     | 150 +++++
 .../button_group.documentation.js             |   8 +
 .../base/button_group/button_group.js         |  46 ++
 .../base/card/card.documentation.js           |  13 +
 .../dist/components/base/card/card.js         |  70 +++
 .../base/carousel/carousel.documentation.js   |   8 +
 .../dist/components/base/carousel/carousel.js |  46 ++
 .../base/carousel/carousel_slide.js           |  46 ++
 .../base/collapse/collapse.documentation.js   |   7 +
 .../dist/components/base/collapse/collapse.js |  50 ++
 .../datepicker/datepicker.documentation.js    |  52 ++
 .../components/base/datepicker/datepicker.js  | 360 ++++++++++++
 .../examples/datepicker.basic.example.js      |  48 ++
 .../datepicker.custom_input.example.js        |  48 ++
 .../examples/datepicker.disabled.example.js   |  48 ++
 .../datepicker.open_on_focus.example.js       |  48 ++
 .../datepicker.with_clear_button.example.js   |  48 ++
 .../base/datepicker/examples/index.js         |  32 +
 .../daterange_picker.documentation.js         |   8 +
 .../base/daterange_picker/daterange_picker.js | 295 ++++++++++
 .../base/drawer/drawer.documentation.js       |  11 +
 .../dist/components/base/drawer/drawer.js     | 122 ++++
 .../drawer/examples/drawer.basic.example.js   |  58 ++
 .../components/base/drawer/examples/index.js  |  13 +
 .../base/dropdown/dropdown.documentation.js   |  12 +
 .../dist/components/base/dropdown/dropdown.js | 244 ++++++++
 .../dropdown_divider.documentation.js         |   8 +
 .../base/dropdown/dropdown_divider.js         |  47 ++
 .../dropdown/dropdown_form.documentation.js   |  17 +
 .../components/base/dropdown/dropdown_form.js |  47 ++
 .../dropdown/dropdown_item.documentation.js   |   8 +
 .../components/base/dropdown/dropdown_item.js | 136 +++++
 .../dropdown_section_header.documentation.js  |   8 +
 .../base/dropdown/dropdown_section_header.js  |  47 ++
 .../dropdown/dropdown_text.documentation.js   |   8 +
 .../components/base/dropdown/dropdown_text.js |  47 ++
 .../examples/dropdown.default.example.js      |  38 ++
 .../examples/dropdown.links.example.js        |  38 ++
 ....with_avatar_and_secondary_text.example.js |  38 ++
 .../dropdown.with_checked_items.example.js    |  38 ++
 .../dropdown.with_clear_all.example.js        |  38 ++
 .../examples/dropdown.with_divider.example.js |  38 ++
 .../examples/dropdown.with_form.example.js    |  38 ++
 .../examples/dropdown.with_header.example.js  |  38 ++
 ...dropdown.with_highlighted_items.example.js |  38 ++
 .../examples/dropdown.with_icons.example.js   |  38 ++
 .../dropdown.with_right_align.example.js      |  38 ++
 .../examples/dropdown.with_search.example.js  |  67 +++
 .../dropdown.with_section_headers.example.js  |  38 ++
 .../base/dropdown/examples/index.js           |  85 +++
 .../filtered_search/common_story_options.js   |  14 +
 .../filtered_search.default.example.js        | 422 +++++++++++++
 .../filtered_search.friendly.example.js       | 423 ++++++++++++++
 .../filtered_search.history.example.js        |  91 +++
 .../filtered_search.multi_select.example.js   | 196 +++++++
 .../filtered_search.single_unique.example.js  |  70 +++
 .../base/filtered_search/examples/index.js    |  32 +
 .../filtered_search.documentation.js          |  71 +++
 .../base/filtered_search/filtered_search.js   | 306 ++++++++++
 ...iltered_search_suggestion.documentation.js |  13 +
 .../filtered_search_suggestion.js             |  90 +++
 ...ed_search_suggestion_list.documentation.js |  12 +
 .../filtered_search_suggestion_list.js        | 128 ++++
 .../filtered_search_term.documentation.js     |  48 ++
 .../filtered_search/filtered_search_term.js   |  90 +++
 .../filtered_search_token.documentation.js    |  41 ++
 .../filtered_search/filtered_search_token.js  | 294 ++++++++++
 ...ered_search_token_segment.documentation.js |  50 ++
 .../filtered_search_token_segment.js          | 309 ++++++++++
 .../filtered_search/filtered_search_utils.js  | 137 +++++
 .../base/form/form.documentation.js           |   7 +
 .../dist/components/base/form/form.js         |  47 ++
 .../form_checkbox.documentation.js            |   8 +
 .../base/form/form_checkbox/form_checkbox.js  |  72 +++
 .../form/form_checkbox/form_checkbox_group.js |  60 ++
 .../form_checkbox_tree/checkbox_tree_node.js  |  83 +++
 .../form_checkbox_tree.basic.example.js       | 103 ++++
 .../form/form_checkbox_tree/examples/index.js |  13 +
 .../form_checkbox_tree.documentation.js       |  37 ++
 .../form_checkbox_tree/form_checkbox_tree.js  | 132 +++++
 .../form_checkbox_tree/models/constants.js    |  12 +
 .../form/form_checkbox_tree/models/node.js    |  60 ++
 .../form/form_checkbox_tree/models/tree.js    | 221 +++++++
 .../base/form/form_combobox/constants.js      |   4 +
 .../form_combobox.documentation.js            |  13 +
 .../base/form/form_combobox/form_combobox.js  | 191 ++++++
 .../form_group/form_group.basic.example.js    |  38 ++
 .../form_group/form_group.disabled.example.js |  48 ++
 .../form_group/form_group.textarea.example.js |  48 ++
 .../form_group.validation.example.js          |  66 +++
 .../form_group/examples/form_group/index.js   |  27 +
 .../form_group/form_group.documentation.js    |  11 +
 .../base/form/form_group/form_group.js        | 103 ++++
 .../form_input/form_input.documentation.js    |   8 +
 .../base/form/form_input/form_input.js        | 109 ++++
 .../form_input_group.basic.example.js         |  38 ++
 ..._input_group.predefined_options.example.js |  54 ++
 ...input_group.predefined_reactive.example.js |  55 ++
 .../form_input_group.reactive.example.js      |  48 ++
 .../form/form_input_group/examples/index.js   |  27 +
 .../form_input_group.documentation.js         |  32 +
 .../form/form_input_group/form_input_group.js | 106 ++++
 .../form_input_group_mixin.js                 |  49 ++
 .../form_radio/form_radio.documentation.js    |   8 +
 .../base/form/form_radio/form_radio.js        |  65 ++
 .../form_radio_group.options_array.example.js |  59 ++
 .../form_radio_group.slots.example.js         |  48 ++
 .../form/form_radio_group/examples/index.js   |  17 +
 .../form_radio_group.documentation.js         |  54 ++
 .../form/form_radio_group/form_radio_group.js |  59 ++
 .../base/form/form_select/constants.js        |  12 +
 .../form_select/form_select.documentation.js  |   8 +
 .../base/form/form_select/form_select.js      |  47 ++
 .../form/form_text/form_text.documentation.js |  14 +
 .../base/form/form_text/form_text.js          |  38 ++
 .../form_textarea.documentation.js            |   7 +
 .../base/form/form_textarea/form_textarea.js  | 116 ++++
 .../input_group_text.documentation.js         |  12 +
 .../form/input_group_text/input_group_text.js |  47 ++
 .../base/icon/icon.documentation.js           |   8 +
 .../dist/components/base/icon/icon.js         | 118 ++++
 .../base/infinite_scroll/examples/index.js    |  49 ++
 .../infinite_scroll.all_items.example.js      |  49 ++
 .../examples/infinite_scroll.basic.example.js |  62 ++
 ...inite_scroll.finite_total_items.example.js |  72 +++
 ...nite_scroll.large_fetched_items.example.js |  62 ++
 .../infinite_scroll.reverse.example.js        |  63 ++
 ...nite_scroll.small_fetched_items.example.js |  62 ++
 .../infinite_scroll.two_way.example.js        |  94 +++
 .../infinite_scroll.documentation.js          |   8 +
 .../base/infinite_scroll/infinite_scroll.js   | 213 +++++++
 .../keyset_pagination.documentation.js        |  13 +
 .../keyset_pagination/keyset_pagination.js    | 145 +++++
 .../base/label/label.documentation.js         |   8 +
 .../dist/components/base/label/label.js       | 165 ++++++
 .../base/link/link.documentation.js           |   7 +
 .../dist/components/base/link/link.js         |  48 ++
 .../loading_icon.documentation.js             |   8 +
 .../base/loading_icon/loading_icon.js         | 102 ++++
 .../base/markdown/markdown.documentation.js   |  12 +
 .../dist/components/base/markdown/markdown.js |  49 ++
 .../base/modal/modal.documentation.js         |   8 +
 .../dist/components/base/modal/modal.js       | 200 +++++++
 .../components/base/nav/examples/index.js     |  13 +
 .../base/nav/examples/nav.basic.example.js    |  38 ++
 .../components/base/nav/nav.documentation.js  |  17 +
 .../gitlab-ui/dist/components/base/nav/nav.js |  48 ++
 .../base/nav/nav_item.documentation.js        |  13 +
 .../dist/components/base/nav/nav_item.js      |  48 ++
 .../nav/nav_item_dropdown.documentation.js    |  14 +
 .../components/base/nav/nav_item_dropdown.js  |  62 ++
 .../base/navbar/navbar.documentation.js       |  12 +
 .../dist/components/base/navbar/navbar.js     |  48 ++
 .../paginated_list.documentation.js           |   7 +
 .../base/paginated_list/paginated_list.js     | 194 ++++++
 .../pagination/pagination.documentation.js    |   8 +
 .../components/base/pagination/pagination.js  | 432 ++++++++++++++
 .../dist/components/base/path/data.js         |  33 ++
 .../base/path/path.documentation.js           |   8 +
 .../dist/components/base/path/path.js         | 209 +++++++
 .../components/base/popover/examples/index.js |  25 +
 .../popover/examples/popover.basic.example.js |  38 ++
 .../examples/popover.loading.example.js       |  38 ++
 .../examples/popover.notitle.example.js       |  38 ++
 .../base/popover/popover.documentation.js     |  27 +
 .../dist/components/base/popover/popover.js   |  92 +++
 .../base/progress_bar/progress_bar.js         |  46 ++
 .../search_box_by_click/examples/index.js     |  22 +
 .../search_box_by_click.default.example.js    |  48 ++
 .../search_box_by_click.history.example.js    |  51 ++
 .../search_box_by_click.v_model.example.js    |  54 ++
 .../search_box_by_click.documentation.js      |  83 +++
 .../search_box_by_click.js                    | 194 ++++++
 .../base/search_box_by_type/examples/index.js |  17 +
 .../search_box_by_type.default.example.js     |  48 ++
 .../search_box_by_type.loading.example.js     |  65 ++
 .../base/search_box_by_type/index.js          |   1 +
 .../search_box_by_type.documentation.js       |  26 +
 .../search_box_by_type/search_box_by_type.js  | 128 ++++
 .../segmented_control.documentation.js        |   8 +
 .../segmented_control/segmented_control.js    | 118 ++++
 .../skeleton_loader.documentation.js          |  13 +
 .../base/skeleton_loader/skeleton_loader.js   | 240 ++++++++
 .../skeleton_loading.documentation.js         |   7 +
 .../base/skeleton_loading/skeleton_loading.js |  63 ++
 .../base/sorting/sorting.documentation.js     |   7 +
 .../dist/components/base/sorting/sorting.js   | 136 +++++
 .../sorting/sorting_item.documentation.js     |   8 +
 .../components/base/sorting/sorting_item.js   | 101 ++++
 .../dist/components/base/table/constants.js   |   5 +
 .../base/table/table.documentation.js         |   8 +
 .../dist/components/base/table/table.js       |  66 +++
 .../table_lite/table_lite.documentation.js    |  13 +
 .../components/base/table_lite/table_lite.js  |  47 ++
 .../dist/components/base/tabs/constants.js    |   3 +
 .../base/tabs/tab/examples/index.js           |  13 +
 .../tabs/tab/examples/tab.basic.example.js    |  38 ++
 .../base/tabs/tab/tab.documentation.js        |  18 +
 .../dist/components/base/tabs/tab/tab.js      |  82 +++
 .../base/tabs/tabs/examples/index.js          |  60 ++
 .../tabs/tabs/examples/tabs.basic.example.js  |  38 ++
 .../examples/tabs.contentless_tab.example.js  |  38 ++
 .../examples/tabs.counterbadges.example.js    |  38 ++
 .../examples/tabs.custom_title.example.js     |  38 ++
 .../tabs/examples/tabs.disabled.example.js    |  38 ++
 .../tabs/examples/tabs.justified.example.js   |  38 ++
 .../tabs/examples/tabs.no_tabs.example.js     |  38 ++
 .../tabs/examples/tabs.scrollable.example.js  |  47 ++
 .../tabs/examples/tabs.styles_only.example.js |  38 ++
 .../base/tabs/tabs/scrollable_tabs.js         | 164 ++++++
 .../base/tabs/tabs/tabs.documentation.js      |  20 +
 .../dist/components/base/tabs/tabs/tabs.js    | 241 ++++++++
 .../base/toast/toast.documentation.js         |   8 +
 .../dist/components/base/toast/toast.js       |  89 +++
 .../base/toggle/toggle.documentation.js       |  13 +
 .../dist/components/base/toggle/toggle.js     | 166 ++++++
 .../base/token/token.documentation.js         |   5 +
 .../dist/components/base/token/token.js       |  87 +++
 .../components/base/token_selector/helpers.js |   5 +
 .../base/token_selector/token_container.js    | 173 ++++++
 .../token_selector.documentation.js           |  12 +
 .../base/token_selector/token_selector.js     | 419 +++++++++++++
 .../token_selector/token_selector_dropdown.js | 227 +++++++
 .../base/tooltip/tooltip.documentation.js     |   8 +
 .../dist/components/base/tooltip/tooltip.js   |  53 ++
 .../charts/area/area.documentation.js         |  11 +
 .../dist/components/charts/area/area.js       | 364 ++++++++++++
 .../area/examples/area.basic.example.js       |  45 ++
 .../area/examples/area.basic_plus.example.js  |  53 ++
 .../components/charts/area/examples/index.js  |  19 +
 .../charts/bar/bar.documentation.js           |   8 +
 .../dist/components/charts/bar/bar.js         | 273 +++++++++
 .../charts/chart/chart.documentation.js       |   7 +
 .../dist/components/charts/chart/chart.js     | 188 ++++++
 .../charts/column/column.documentation.js     |   5 +
 .../dist/components/charts/column/column.js   | 257 ++++++++
 .../discrete_scatter.documentation.js         |   5 +
 .../discrete_scatter/discrete_scatter.js      | 201 +++++++
 .../charts/gauge/gauge.documentation.js       |  12 +
 .../dist/components/charts/gauge/gauge.js     | 224 +++++++
 .../heatmap.custom_options.example.js         |  79 +++
 .../examples/heatmap.hourly.example.js        |  70 +++
 .../examples/heatmap.responsive.example.js    |  70 +++
 .../examples/heatmap.totals.example.js        |  62 ++
 .../charts/heatmap/examples/index.js          |  31 +
 .../charts/heatmap/heatmap.documentation.js   |  11 +
 .../dist/components/charts/heatmap/heatmap.js | 312 ++++++++++
 .../dist/components/charts/heatmap/index.js   |   2 +
 .../charts/legend/examples/index.js           |  22 +
 .../legend/examples/legend.basic.example.js   |  93 +++
 .../legend/examples/legend.toggled.example.js | 100 ++++
 .../charts/legend/legend.documentation.js     |  21 +
 .../dist/components/charts/legend/legend.js   | 189 ++++++
 .../components/charts/line/examples/index.js  |  19 +
 .../line/examples/line.basic.example.js       |  45 ++
 .../line/examples/line.series.example.js      |  53 ++
 .../charts/line/line.documentation.js         |  11 +
 .../dist/components/charts/line/line.js       | 362 ++++++++++++
 .../charts/series_label/examples/index.js     |  13 +
 .../examples/series_label.basic.example.js    |  38 ++
 .../series_label.documentation.js             |  10 +
 .../charts/series_label/series_label.js       | 111 ++++
 .../charts/single_stat/examples/index.js      |  32 +
 .../examples/single_stat.badge.example.js     |  38 ++
 .../examples/single_stat.hover.example.js     |  38 ++
 .../examples/single_stat.meta_icon.example.js |  38 ++
 .../examples/single_stat.simple.example.js    |  38 ++
 .../single_stat.title_icon.example.js         |  38 ++
 .../single_stat/single_stat.documentation.js  |  10 +
 .../charts/single_stat/single_stat.js         | 132 +++++
 .../sparkline/sparkline.documentation.js      |   8 +
 .../components/charts/sparkline/sparkline.js  | 229 ++++++++
 .../stacked_column.documentation.js           |   8 +
 .../charts/stacked_column/stacked_column.js   | 360 ++++++++++++
 .../charts/tooltip/tooltip.documentation.js   |   8 +
 .../dist/components/charts/tooltip/tooltip.js | 106 ++++
 .../rich_text_editor.documentation.js         |  12 +
 .../rich_text_editor/rich_text_editor.js      |  41 ++
 .../dist/components/mixins/button_mixin.js    |  12 +
 .../dist/components/mixins/safe_link_mixin.js |  31 +
 .../dist/components/mixins/toolbox_mixin.js   |  46 ++
 .../dist/components/mixins/tooltip_mixin.js   |  22 +
 .../dashboard_skeleton.documentation.js       |   7 +
 .../dashboard_skeleton/dashboard_skeleton.js  |  52 ++
 .../empty_state/empty_state.documentation.js  |   7 +
 .../regions/empty_state/empty_state.js        | 148 +++++
 .../charts/tooltip_default_format.js          |  52 ++
 .../clear_icon_button/clear_icon_button.js    |  62 ++
 .../close_button/close_button.js              |  54 ++
 .../animated_number.documentation.js          |  13 +
 .../animated_number/animated_number.js        | 135 +++++
 .../friendly_wrap.documentation.js            |   7 +
 .../utilities/friendly_wrap/friendly_wrap.js  |  77 +++
 .../intersection_observer.documentation.js    |  12 +
 .../intersection_observer.js                  |  95 +++
 .../intersperse/intersperse.documentation.js  |   8 +
 .../utilities/intersperse/intersperse.js      |  89 +++
 .../sprintf/sprintf.documentation.js          |   8 +
 .../components/utilities/sprintf/sprintf.js   | 182 ++++++
 .../utilities/truncate/constants.js           |   7 +
 .../utilities/truncate/examples/index.js      |  13 +
 .../examples/truncate.basic.example.js        |  38 ++
 .../truncate/truncate.documentation.js        |  22 +
 .../components/utilities/truncate/truncate.js | 108 ++++
 .../javascripts/gitlab-ui/dist/config.js      |  37 ++
 .../dist/directives/collapse_toggle.js        |   1 +
 .../hover_load/hover_load.documentation.js    |  13 +
 .../dist/directives/hover_load/hover_load.js  |  51 ++
 .../gitlab-ui/dist/directives/modal.js        |   1 +
 .../outside/get_event_like_time_stamp.js      |  31 +
 .../outside/outside.documentation.js          |  13 +
 .../dist/directives/outside/outside.js        | 106 ++++
 .../resize_observer/examples/index.js         |  12 +
 .../examples/resize_observer.basic.example.js |  62 ++
 .../resize_observer.documentation.js          |  11 +
 .../resize_observer/resize_observer.js        |  61 ++
 .../dist/directives/safe_html/constants.js    |   5 +
 .../safe_html/safe_html.documentation.js      |   8 +
 .../dist/directives/safe_html/safe_html.js    |  31 +
 .../dist/directives/safe_link/mock_data.js    |  10 +
 .../safe_link/safe_link.documentation.js      |   9 +
 .../dist/directives/safe_link/safe_link.js    |  78 +++
 .../gitlab-ui/dist/directives/tooltip.js      |   1 +
 .../gitlab-ui/dist/utility_classes.js         |   1 +
 .../javascripts/gitlab-ui/dist/utils.js       |   1 +
 .../gitlab-ui/dist/utils/breakpoints.js       |  24 +
 .../gitlab-ui/dist/utils/charts/config.js     | 553 ++++++++++++++++++
 .../gitlab-ui/dist/utils/charts/constants.js  |  67 +++
 .../gitlab-ui/dist/utils/charts/mock_data.js  | 212 +++++++
 .../dist/utils/charts/story_config.js         |  42 ++
 .../gitlab-ui/dist/utils/charts/theme.js      | 231 ++++++++
 .../gitlab-ui/dist/utils/charts/utils.js      |  58 ++
 .../gitlab-ui/dist/utils/constants.js         | 254 ++++++++
 .../gitlab-ui/dist/utils/data_utils.js        |  20 +
 .../gitlab-ui/dist/utils/datetime_utility.js  |  61 ++
 .../javascripts/gitlab-ui/dist/utils/index.js |   1 +
 .../gitlab-ui/dist/utils/number_utils.js      |  82 +++
 .../gitlab-ui/dist/utils/stories_utils.js     |  13 +
 .../dist/utils/story_decorators/container.js  |  17 +
 .../gitlab-ui/dist/utils/string_utils.js      |  83 +++
 .../gitlab-ui/dist/utils/svgs/svg_paths.js    |   7 +
 .../gitlab-ui/dist/utils/test_utils.js        |  26 +
 .../gitlab-ui/dist/utils/use_fake_date.js     |  33 ++
 .../utils/use_mock_intersection_observer.js   | 122 ++++
 .../javascripts/gitlab-ui/dist/utils/utils.js | 123 ++++
 .../gitlab-ui/dist/utils/validation_utils.js  |  14 +
 app/assets/javascripts/gitlab-ui/index.js     | 100 ++++
 .../gitlab-ui/src/utils/breakpoints.js        |  23 +
 .../gitlab-ui/src/utils/charts/config.js      | 507 ++++++++++++++++
 .../gitlab-ui/src/utils/charts/config.spec.js | 385 ++++++++++++
 .../gitlab-ui/src/utils/charts/constants.js   |  65 ++
 .../gitlab-ui/src/utils/charts/mock_data.js   | 259 ++++++++
 .../src/utils/charts/story_config.js          |  45 ++
 .../gitlab-ui/src/utils/charts/theme.js       | 272 +++++++++
 .../gitlab-ui/src/utils/charts/utils.js       |  49 ++
 .../gitlab-ui/src/utils/charts/utils.spec.js  | 106 ++++
 .../gitlab-ui/src/utils/constants.js          | 299 ++++++++++
 .../gitlab-ui/src/utils/data_utils.js         |  47 ++
 .../gitlab-ui/src/utils/datetime_utility.js   |  63 ++
 .../gitlab-ui/src/utils/number_utils.js       |  75 +++
 .../gitlab-ui/src/utils/stories_utils.js      |  14 +
 .../src/utils/story_decorators/container.js   |  12 +
 .../gitlab-ui/src/utils/string_utils.js       |  79 +++
 .../gitlab-ui/src/utils/svgs/svg_paths.js     |  10 +
 .../gitlab-ui/src/utils/test_utils.js         |  26 +
 .../gitlab-ui/src/utils/use_fake_date.js      |  27 +
 .../utils/use_mock_intersection_observer.js   |  98 ++++
 .../javascripts/gitlab-ui/src/utils/utils.js  | 124 ++++
 .../gitlab-ui/src/utils/validation_utils.js   |   9 +
 393 files changed, 27713 insertions(+)
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/charts.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion_item.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion_item.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/alert/alert.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/alert/alert.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/avatar/avatar.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/avatar/avatar.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/avatar_labeled/avatar_labeled.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/avatar_labeled/avatar_labeled.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/avatar_link/avatar_link.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/avatar_link/avatar_link.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/avatars_inline/avatars_inline.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/avatars_inline/avatars_inline.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/badge/badge.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/badge/badge.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/banner/banner.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/banner/banner.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/breadcrumb/breadcrumb.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/breadcrumb/breadcrumb.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/broadcast_message/broadcast_message.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/broadcast_message/broadcast_message.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/button/button.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/button/button.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/button_group/button_group.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/button_group/button_group.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/card/card.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/card/card.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/carousel/carousel.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/carousel/carousel.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/carousel/carousel_slide.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/collapse/collapse.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/collapse/collapse.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/datepicker.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/datepicker.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.custom_input.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.disabled.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.open_on_focus.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.with_clear_button.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/daterange_picker/daterange_picker.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/daterange_picker/daterange_picker.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/drawer/drawer.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/drawer/drawer.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/drawer/examples/drawer.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/drawer/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_divider.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_divider.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_form.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_form.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_item.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_item.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_section_header.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_section_header.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_text.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_text.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.default.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.links.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_avatar_and_secondary_text.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_checked_items.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_clear_all.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_divider.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_form.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_header.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_highlighted_items.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_icons.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_right_align.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_search.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_section_headers.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/common_story_options.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.default.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.friendly.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.history.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.multi_select.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.single_unique.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion_list.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion_list.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_term.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_term.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token_segment.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token_segment.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox/form_checkbox.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox/form_checkbox.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox/form_checkbox_group.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/checkbox_tree_node.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/examples/form_checkbox_tree.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/form_checkbox_tree.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/form_checkbox_tree.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/models/constants.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/models/node.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/models/tree.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_combobox/constants.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_combobox/form_combobox.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_combobox/form_combobox.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.disabled.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.textarea.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.validation.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/form_group.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/form_group.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input/form_input.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input/form_input.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.predefined_options.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.predefined_reactive.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.reactive.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/form_input_group.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/form_input_group.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/form_input_group_mixin.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio/form_radio.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio/form_radio.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/examples/form_radio_group.options_array.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/examples/form_radio_group.slots.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/form_radio_group.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/form_radio_group.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_select/constants.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_select/form_select.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_select/form_select.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_text/form_text.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_text/form_text.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_textarea/form_textarea.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/form_textarea/form_textarea.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/input_group_text/input_group_text.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/form/input_group_text/input_group_text.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/icon/icon.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/icon/icon.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.all_items.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.finite_total_items.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.large_fetched_items.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.reverse.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.small_fetched_items.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.two_way.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/infinite_scroll.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/infinite_scroll.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/keyset_pagination/keyset_pagination.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/keyset_pagination/keyset_pagination.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/label/label.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/label/label.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/link/link.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/link/link.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/loading_icon/loading_icon.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/loading_icon/loading_icon.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/markdown/markdown.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/markdown/markdown.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/modal/modal.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/modal/modal.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/nav/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/nav/examples/nav.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item_dropdown.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item_dropdown.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/navbar/navbar.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/navbar/navbar.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/paginated_list/paginated_list.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/paginated_list/paginated_list.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/pagination/pagination.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/pagination/pagination.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/path/data.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/path/path.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/path/path.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/popover.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/popover.loading.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/popover.notitle.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/popover/popover.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/popover/popover.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/progress_bar/progress_bar.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/search_box_by_click.default.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/search_box_by_click.history.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/search_box_by_click.v_model.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/search_box_by_click.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/search_box_by_click.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/examples/search_box_by_type.default.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/examples/search_box_by_type.loading.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/search_box_by_type.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/search_box_by_type.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/segmented_control/segmented_control.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/segmented_control/segmented_control.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loader/skeleton_loader.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loader/skeleton_loader.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loading/skeleton_loading.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loading/skeleton_loading.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting_item.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting_item.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/table/constants.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/table/table.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/table/table.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/table_lite/table_lite.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/table_lite/table_lite.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/constants.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/examples/tab.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/tab.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/tab.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.contentless_tab.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.counterbadges.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.custom_title.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.disabled.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.justified.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.no_tabs.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.scrollable.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.styles_only.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/scrollable_tabs.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/tabs.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/tabs.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/toast/toast.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/toast/toast.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/toggle/toggle.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/toggle/toggle.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/token/token.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/token/token.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/helpers.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_container.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_selector.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_selector.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_selector_dropdown.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tooltip/tooltip.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/base/tooltip/tooltip.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/area/area.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/area/area.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/area/examples/area.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/area/examples/area.basic_plus.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/area/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/bar/bar.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/bar/bar.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/chart/chart.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/chart/chart.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/column/column.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/column/column.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/discrete_scatter/discrete_scatter.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/discrete_scatter/discrete_scatter.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/gauge/gauge.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/gauge/gauge.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.custom_options.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.hourly.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.responsive.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.totals.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/heatmap.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/heatmap.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/legend/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/legend/examples/legend.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/legend/examples/legend.toggled.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/legend/legend.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/legend/legend.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/line/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/line/examples/line.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/line/examples/line.series.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/line/line.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/line/line.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/examples/series_label.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/series_label.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/series_label.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.badge.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.hover.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.meta_icon.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.simple.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.title_icon.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/single_stat.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/single_stat.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/sparkline/sparkline.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/sparkline/sparkline.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/stacked_column/stacked_column.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/stacked_column/stacked_column.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/tooltip/tooltip.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/charts/tooltip/tooltip.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/editors/rich_text_editor/rich_text_editor.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/editors/rich_text_editor/rich_text_editor.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/mixins/button_mixin.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/mixins/safe_link_mixin.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/mixins/toolbox_mixin.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/mixins/tooltip_mixin.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/regions/dashboard_skeleton/dashboard_skeleton.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/regions/dashboard_skeleton/dashboard_skeleton.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/regions/empty_state/empty_state.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/regions/empty_state/empty_state.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/shared_components/charts/tooltip_default_format.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/shared_components/clear_icon_button/clear_icon_button.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/shared_components/close_button/close_button.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/utilities/animated_number/animated_number.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/utilities/animated_number/animated_number.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/utilities/friendly_wrap/friendly_wrap.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/utilities/friendly_wrap/friendly_wrap.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/utilities/intersection_observer/intersection_observer.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/utilities/intersection_observer/intersection_observer.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/utilities/intersperse/intersperse.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/utilities/intersperse/intersperse.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/utilities/sprintf/sprintf.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/utilities/sprintf/sprintf.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/constants.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/examples/truncate.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/truncate.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/truncate.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/config.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/collapse_toggle.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/hover_load/hover_load.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/hover_load/hover_load.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/modal.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/outside/get_event_like_time_stamp.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/outside/outside.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/outside/outside.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/examples/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/examples/resize_observer.basic.example.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/resize_observer.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/resize_observer.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/safe_html/constants.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/safe_html/safe_html.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/safe_html/safe_html.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/safe_link/mock_data.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/safe_link/safe_link.documentation.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/safe_link/safe_link.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/directives/tooltip.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utility_classes.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/breakpoints.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/charts/config.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/charts/constants.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/charts/mock_data.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/charts/story_config.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/charts/theme.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/charts/utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/constants.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/data_utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/datetime_utility.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/number_utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/stories_utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/story_decorators/container.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/string_utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/svgs/svg_paths.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/test_utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/use_fake_date.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/use_mock_intersection_observer.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/dist/utils/validation_utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/index.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/breakpoints.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/charts/config.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/charts/config.spec.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/charts/constants.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/charts/mock_data.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/charts/story_config.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/charts/theme.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/charts/utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/charts/utils.spec.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/constants.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/data_utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/datetime_utility.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/number_utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/stories_utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/story_decorators/container.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/string_utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/svgs/svg_paths.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/test_utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/use_fake_date.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/use_mock_intersection_observer.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/utils.js
 create mode 100644 app/assets/javascripts/gitlab-ui/src/utils/validation_utils.js

diff --git a/app/assets/javascripts/gitlab-ui/dist/charts.js b/app/assets/javascripts/gitlab-ui/dist/charts.js
new file mode 100644
index 00000000000000..000121fc027e8a
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/charts.js
@@ -0,0 +1,18 @@
+import setConfigs from './config';
+export { default as GlChart } from './components/charts/chart/chart';
+export { default as GlAreaChart } from './components/charts/area/area';
+export { default as GlBarChart } from './components/charts/bar/bar';
+export { default as GlGaugeChart } from './components/charts/gauge/gauge';
+export { default as GlLineChart } from './components/charts/line/line';
+export { default as GlChartLegend } from './components/charts/legend/legend';
+export { default as GlChartSeriesLabel } from './components/charts/series_label/series_label';
+export { default as GlChartTooltip } from './components/charts/tooltip/tooltip';
+export { default as GlHeatmap } from './components/charts/heatmap';
+export { default as GlColumnChart } from './components/charts/column/column';
+export { default as GlStackedColumnChart } from './components/charts/stacked_column/stacked_column';
+export { default as GlDiscreteScatterChart } from './components/charts/discrete_scatter/discrete_scatter';
+export { default as GlSingleStat } from './components/charts/single_stat/single_stat';
+export { default as GlSparklineChart } from './components/charts/sparkline/sparkline';
+
+// Add config files
+setConfigs();
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion.documentation.js
new file mode 100644
index 00000000000000..9e9dca3931ac03
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion.documentation.js
@@ -0,0 +1,8 @@
+var description = "Accordions are used to group similar content and hide or show it depending on user needs or\npreferences. Accordions give users more granular control over the interface and help digest content\nin stages, rather than all at once.\n";
+
+var accordion_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default accordion_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion.js b/app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion.js
new file mode 100644
index 00000000000000..f9bb512776bbda
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion.js
@@ -0,0 +1,79 @@
+import _uniqueId from 'lodash/uniqueId';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlAccordion',
+
+  provide() {
+    const accordionId = _uniqueId('accordion-set-'); // temporary fix for this issue: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2019#note_514671251
+    // MR for the upstream pending: https://github.com/vuejs/apollo/pull/1153
+
+
+    return {
+      defaultHeaderLevel: () => this.headerLevel,
+      accordionSetId: () => this.autoCollapse && accordionId
+    };
+  },
+
+  props: {
+    /*
+    When true, will have the effect of closing other accordion items when one accordion item is visible.
+     */
+    autoCollapse: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /*
+    The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.
+     */
+    headerLevel: {
+      type: Number,
+      required: true,
+
+      validator(value) {
+        return value > 0 && value <= 6;
+      }
+
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion_item.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion_item.documentation.js
new file mode 100644
index 00000000000000..6a2e5fe93c4c13
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion_item.documentation.js
@@ -0,0 +1,7 @@
+var description = "## Usage\n\nUse `GlAccordionItem` to place the accordion item within your accordion.\n";
+
+var accordion_item_documentation = {
+  description
+};
+
+export default accordion_item_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion_item.js b/app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion_item.js
new file mode 100644
index 00000000000000..1d53f6a9d12cc0
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/accordion/accordion_item.js
@@ -0,0 +1,111 @@
+import _uniqueId from 'lodash/uniqueId';
+import { BCollapse } from 'bootstrap-vue/esm/index.js';
+import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
+import GlButton from '../button/button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlAccordionItem',
+  components: {
+    BCollapse,
+    GlButton
+  },
+  directives: {
+    GlCollapseToggle: GlCollapseToggleDirective
+  },
+  inject: ['accordionSetId', 'defaultHeaderLevel'],
+  inheritAttrs: false,
+  props: {
+    /*
+    Used to set the title of accordion link
+    */
+    title: {
+      type: String,
+      required: true
+    },
+
+    /*
+    When set, it will ensure the accordion item is initially visible
+    */
+    visible: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+
+    /*
+        The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.,
+    */
+    headerLevel: {
+      type: Number,
+      required: false,
+      default: null,
+
+      validator(value) {
+        return value > 0 && value <= 6;
+      }
+
+    }
+  },
+
+  data() {
+    return {
+      accordionItemId: _uniqueId('accordion-item-'),
+      isVisible: this.visible
+    };
+  },
+
+  computed: {
+    headerComponent() {
+      const level = this.headerLevel || this.defaultHeaderLevel();
+      return `h${level}`;
+    },
+
+    accordion() {
+      return this.accordionSetId() || undefined;
+    },
+
+    icon() {
+      return this.isVisible ? 'chevron-down' : 'chevron-right';
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header"},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-display-flex","icon":_vm.icon}},[_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")])],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-font-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/alert/alert.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/alert/alert.documentation.js
new file mode 100644
index 00000000000000..24a1449a397ef6
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/alert/alert.documentation.js
@@ -0,0 +1,13 @@
+var alert = "Alerts allow the application to pass along relevant system information to the\nuser without impeding their journey. Alerts are system generated and may or may\nnot be derived by a user’s action.\n\n## Dismissible alerts\n\nAlerts don't handle their own visibility, so it's the parent component's\nresponsbility to listen for the `dismiss` event and hide the alert in some way.\nFor example:\n\n```html\n<script>\n  ...\n  computed: {\n    shouldShowAlert() {\n      return !this.isAlertDismissed && this.someOtherCondition();\n    },\n  },\n  ...\n</script>\n\n<template>\n  ...\n  <gl-alert v-if=\"shouldShowAlert\" @dismiss=\"isAlertDismissed = true\">\n    An important message\n  </gl-alert>\n  ...\n</template>\n```\n\n## Sticky alerts\n\nAny alert can use `position: sticky`, however it should be limited to critical alerts where keeping\nthe alert visually in context is necessary or when alerts are injected into a page and might\notherwise go unnoticed.\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': alert
+});
+
+var alert_documentation = {
+  description,
+  followsDesignSystem: true
+};
+
+export default alert_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/alert/alert.js b/app/assets/javascripts/gitlab-ui/dist/components/base/alert/alert.js
new file mode 100644
index 00000000000000..592536038e8b36
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/alert/alert.js
@@ -0,0 +1,220 @@
+import { alertVariantOptions, alertVariantIconMap, buttonCategoryOptions } from '../../../utils/constants';
+import CloseButton from '../../shared_components/close_button/close_button';
+import GlButton from '../button/button';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlIcon,
+    CloseButton,
+    GlButton
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Controls the dismiss button's visibility.
+     */
+    dismissible: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+
+    /**
+     * Dismiss button's aria-label.
+     */
+    dismissLabel: {
+      type: String,
+      required: false,
+      default: 'Dismiss'
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: alertVariantOptions.info,
+      validator: value => Object.keys(alertVariantOptions).includes(value)
+    },
+
+    /**
+     * If provided, renders the primary button as a link.
+     */
+    primaryButtonLink: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * If provided, renders a primary action button.
+     */
+    primaryButtonText: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * If provided, renders the secondary button as a link.
+     */
+    secondaryButtonLink: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * If provided, renders a secondary action button.
+     */
+    secondaryButtonText: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Contained alerts have their content's width limited.
+     */
+    contained: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    sticky: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    iconName() {
+      return alertVariantIconMap[this.variant];
+    },
+
+    shouldRenderActions() {
+      return Boolean(this.$slots.actions || this.actionButtons.length);
+    },
+
+    actionButtons() {
+      return [{
+        text: this.primaryButtonText,
+        attrs: {
+          href: this.primaryButtonLink,
+          variant: 'confirm',
+          category: buttonCategoryOptions.primary
+        },
+        listeners: {
+          click: this.primaryButtonClicked
+        }
+      }, {
+        text: this.secondaryButtonText,
+        attrs: {
+          href: this.secondaryButtonLink,
+          variant: 'default',
+          category: buttonCategoryOptions.secondary
+        },
+        listeners: {
+          click: this.secondaryButtonClicked
+        }
+      }].reduce((acc, actionButton) => {
+        if (!actionButton.text) return acc;
+        const attrs = { ...actionButton.attrs
+        };
+
+        if (!attrs.href) {
+          delete attrs.href;
+        }
+
+        acc.push({ ...actionButton,
+          attrs
+        });
+        return acc;
+      }, []);
+    },
+
+    variantClass() {
+      return `gl-alert-${this.variant}`;
+    }
+
+  },
+  methods: {
+    primaryButtonClicked(event) {
+      /**
+       * Emitted when the primary action button is clicked.
+       *
+       * @event primaryAction
+       * @type {object}
+       */
+      this.$emit('primaryAction', event);
+    },
+
+    secondaryButtonClicked(event) {
+      /**
+       * Emitted when the secondary action button is clicked.
+       *
+       * @event secondaryAction
+       * @type {object}
+       */
+      this.$emit('secondaryAction', event);
+    },
+
+    onDismiss() {
+      /**
+       * Emitted when the dismiss button is clicked.
+       *
+       * @event dismiss
+       * @type {object}
+       */
+      this.$emit('dismiss');
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
+    'gl-alert',
+    { 'gl-alert-max-content gl-alert-layout-limited': _vm.contained },
+    { 'gl-alert-sticky': _vm.sticky },
+    { 'gl-alert-not-dismissible': !_vm.dismissible },
+    _vm.variantClass ]},[_c('div',{staticClass:"gl-alert-container"},[_c('gl-icon',{class:{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !_vm.title },attrs:{"name":_vm.iconName}}),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-content",attrs:{"role":"alert"}},[(_vm.title)?_c('h4',{staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",_vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action"},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n            "+_vm._s(actionButton.text)+"\n          ")])}))],2):_vm._e()])],1)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/avatar/avatar.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/avatar/avatar.documentation.js
new file mode 100644
index 00000000000000..40bba734ee9a42
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/avatar/avatar.documentation.js
@@ -0,0 +1,8 @@
+var description = "Avatars are used to represent a unique entity, be it a person, a group, or a project.\n";
+
+var avatar_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default avatar_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/avatar/avatar.js b/app/assets/javascripts/gitlab-ui/dist/components/base/avatar/avatar.js
new file mode 100644
index 00000000000000..51e71545742e73
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/avatar/avatar.js
@@ -0,0 +1,114 @@
+import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
+import { getAvatarChar } from '../../../utils/string_utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const IDENTICON_BG_COUNT = 7;
+var script = {
+  props: {
+    entityId: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    entityName: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    src: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    alt: {
+      type: String,
+      required: false,
+      default: 'avatar'
+    },
+    size: {
+      type: Number,
+      required: false,
+      default: avatarSizeOptions[1],
+      validator: value => {
+        const isValidSize = avatarSizeOptions.includes(value);
+
+        if (!isValidSize) {
+          /* eslint-disable-next-line no-console */
+          console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${value}`);
+        }
+
+        return isValidSize;
+      }
+    },
+    shape: {
+      type: String,
+      required: false,
+      default: avatarShapeOptions.circle
+    }
+  },
+  computed: {
+    sizeClass() {
+      return `gl-avatar-s${this.size}`;
+    },
+
+    isCircle() {
+      return this.shape === avatarShapeOptions.circle;
+    },
+
+    identiconBackgroundClass() {
+      /*
+       * Gets a number between 1-7 depending on the 'entityId'.
+       * Gets the remainder after dividing the 'entityId' by the number of available backgrounds.
+       */
+      const type = this.entityId % IDENTICON_BG_COUNT + 1;
+      return `gl-avatar-identicon-bg${type}`;
+    },
+
+    identiconText() {
+      return getAvatarChar(this.entityName);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.src)?_c('img',{class:['gl-avatar', { 'gl-avatar-circle': _vm.isCircle }, _vm.sizeClass],attrs:{"src":_vm.src,"alt":_vm.alt}}):_c('div',{class:[
+    'gl-avatar gl-avatar-identicon',
+    { 'gl-avatar-circle': _vm.isCircle },
+    _vm.sizeClass,
+    _vm.identiconBackgroundClass ]},[_vm._v("\n  "+_vm._s(_vm.identiconText)+"\n")])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/avatar_labeled/avatar_labeled.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/avatar_labeled/avatar_labeled.documentation.js
new file mode 100644
index 00000000000000..c6fa514282ed3e
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/avatar_labeled/avatar_labeled.documentation.js
@@ -0,0 +1,8 @@
+var description = "## Usage\n\nAvatars may also be adjacent to a text alternative, such as a user or project name. In these cases,\na null `alt` text should be used so that they can be ignored by assistive technologies.\n\nUse the `avatar-labeled` component in those scenarios. It will set a null `alt` text by default.\nIt allows to display a `label` and/or a `sub-label` next to the avatar image. It accepts the same\nproperties as the avatar component to modify the avatar’s shape and size.\n\n## Using the component\n\n```js\n<gl-avatar-labeled\n  :shape=\"shape\"\n  :size=\"size\"\n  :src=\"src\"\n  :label=\"label\"\n  :sub-label=\"subLabel\"\n/>\n```\n";
+
+var avatar_labeled_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default avatar_labeled_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/avatar_labeled/avatar_labeled.js b/app/assets/javascripts/gitlab-ui/dist/components/base/avatar_labeled/avatar_labeled.js
new file mode 100644
index 00000000000000..e5a6872cdfe1e6
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/avatar_labeled/avatar_labeled.js
@@ -0,0 +1,79 @@
+import GlAvatar from '../avatar/avatar';
+import GlLink from '../link/link';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlAvatar,
+    GlLink
+  },
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    subLabel: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    labelLink: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    subLabelLink: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  computed: {
+    hasLabelLink() {
+      return Boolean(this.labelLink);
+    },
+
+    hasSubLabelLink() {
+      return Boolean(this.subLabelLink);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-avatar-labeled"},[_c('gl-avatar',_vm._g(_vm._b({attrs:{"alt":""}},'gl-avatar',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),_c('div',{staticClass:"gl-avatar-labeled-labels gl-text-left!"},[_c('div',{staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-text-left! gl-mx-n1 gl-my-n1"},[(_vm.hasLabelLink)?_c('gl-link',{staticClass:"gl-avatar-link",attrs:{"href":_vm.labelLink}},[_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))])]):_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))]),_vm._v(" "),_vm._t("meta")],2),_vm._v(" "),(_vm.hasSubLabelLink)?_c('gl-link',{staticClass:"gl-avatar-link",attrs:{"href":_vm.subLabelLink}},[_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))])]):_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))])],1)],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/avatar_link/avatar_link.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/avatar_link/avatar_link.documentation.js
new file mode 100644
index 00000000000000..d955f3d8c65b04
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/avatar_link/avatar_link.documentation.js
@@ -0,0 +1,8 @@
+var description = "`<gl-avatar-link>` decorates `<gl-avatar>` with hyperlink functionality. It accepts the same\nproperties as the `<gl-link>` component and it works in the same way too. The main purpose of this\ncomponent is to apply visual enhancements that makes evident that the user can interact with the\navatar.\n\n## Using the component\n\nWhen wrapping an `<gl-avatar>` component, `<gl-avatar-link>` darkens\nthe border that surrounds the avatar image or fallback text when hovering over it.\n\n```vue\n<gl-avatar-link target=\"blank\" href=\"https://gitlab.com/gitlab-org/gitlab\">\n  <gl-avatar\n    :size=\"32\"\n    :src=\"avatarUrl\"\n  />\n</gl-avatar-link>\n```\n\nWhen wrapping an `<avatar-labeled>` component, `<avatar-link>` underlines\nthe label and sub-label text when hovering over the avatar. It also applies the\nsame effects described in the first example.\n\n```vue\n<gl-avatar-link target=\"blank\" href=\"https://gitlab.com/gitlab-org/gitlab\">\n  <gl-avatar-labeled\n    :size=\"32\"\n    entity-name=\"GitLab\"\n    label=\"GitLab User\"\n    sub-label=\"@gitlab\"\n  />\n</gl-avatar-link>\n```\n";
+
+var avatar_link_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default avatar_link_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/avatar_link/avatar_link.js b/app/assets/javascripts/gitlab-ui/dist/components/base/avatar_link/avatar_link.js
new file mode 100644
index 00000000000000..9966f2ded33691
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/avatar_link/avatar_link.js
@@ -0,0 +1,47 @@
+import GlLink from '../link/link';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'AvatarLink',
+  components: {
+    GlLink
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-link',_vm._g(_vm._b({staticClass:"gl-avatar-link"},'gl-link',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/avatars_inline/avatars_inline.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/avatars_inline/avatars_inline.documentation.js
new file mode 100644
index 00000000000000..0f40b88b2e7196
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/avatars_inline/avatars_inline.documentation.js
@@ -0,0 +1,13 @@
+var avatars_inline = "Use `<avatars-inline />` to display multiple avatars organized in a single row.\n\n### Basic usage\n\nThe `avatars` property accepts an array of objects that contains the avatar properties. By default,\n`<avatars-inline />` expects each object contained in the array to have the same shape as the\nproperties of the `<avatar />` component. You can customize the display of each avatar by\noverriding the default slot:\n\n```html\n<gl-avatars-inline :avatars=\"avatars\">\n  <template #avatar=\"{ avatar }\">\n    <gl-avatar-link v-gl-tooltip target=\"blank\" :href=\"avatar.href\" :title=\"avatar.tooltip\">\n      <gl-avatar :src=\"avatar.src\" :size=\"32\" />\n    </gl-avatar-link>\n  </template>\n</gl-avatars-inline>\n```\n\nIn the example above, the avatars displayed inside `<avatars-inline />` are links pointing to a URL\nstored in each avatar object. Each avatar also displays a tooltip. If you override\n`<inline-avatars />` default display, you can pass an array of objects with any desired shape to\nthe `avatars` property.\n\n### Collapsing\n\nWhen the `collapse` property value is `true` and the `maxVisible` property value is a number less\nthan the length of the `avatars` property array, `<avatars-inline>` will hide the overflown avatars\nand display a badge instead.\n\n### Badge description in screen readers\n\nThe `badgeSrOnlyText` property provides a meaningful description of the badge that appears\nwhen avatars are collapsed for screen reader users.\n\n### Supported sizes\n\n`<avatars-inline>` only supports avatars with `24` or `32` size.\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': avatars_inline
+});
+
+var avatars_inline_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default avatars_inline_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/avatars_inline/avatars_inline.js b/app/assets/javascripts/gitlab-ui/dist/components/base/avatars_inline/avatars_inline.js
new file mode 100644
index 00000000000000..d39d7e95ad8dac
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/avatars_inline/avatars_inline.js
@@ -0,0 +1,139 @@
+import _truncate from 'lodash/truncate';
+import _get from 'lodash/get';
+import { avatarsInlineSizeOptions } from '../../../utils/constants';
+import GlAvatar from '../avatar/avatar';
+import GlTooltip from '../tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'AvatarsInline',
+  components: {
+    GlAvatar,
+    GlTooltip
+  },
+  props: {
+    avatars: {
+      type: Array,
+      required: true
+    },
+    maxVisible: {
+      type: Number,
+      required: true
+    },
+    avatarSize: {
+      type: Number,
+      required: true,
+      validator: value => avatarsInlineSizeOptions.includes(value)
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    badgeSrOnlyText: {
+      type: String,
+      required: true
+    },
+    badgeTooltipProp: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    badgeTooltipMaxChars: {
+      type: Number,
+      required: false,
+      default: null
+    }
+  },
+  computed: {
+    hiddenAvatars() {
+      return this.avatars.slice(this.maxVisible);
+    },
+
+    collapsable() {
+      return this.hiddenAvatars.length > 0;
+    },
+
+    visibleAvatars() {
+      return this.collapsed ? this.avatars.slice(0, this.maxVisible) : this.avatars;
+    },
+
+    containerSizeStyles() {
+      return {
+        width: `${this.avatarSize * this.visibleAvatars.length}px`,
+        height: `${this.avatarSize}px`
+      };
+    },
+
+    badgeSize() {
+      return this.avatarSize === 24 ? 'md' : 'lg';
+    },
+
+    badgeLabel() {
+      return `+${this.hiddenAvatars.length}`;
+    },
+
+    badgeTooltipTitle() {
+      if (!this.badgeTooltipProp) {
+        return '';
+      }
+
+      const tooltipTitle = this.hiddenAvatars.map(avatar => _get(avatar, this.badgeTooltipProp, '').trim()).join(', '); // truncate will append '...'
+      // we need to take these extra 3 characters into account in badgeTooltipMaxChars
+
+      return this.badgeTooltipMaxChars ? _truncate(tooltipTitle, {
+        length: this.badgeTooltipMaxChars
+      }) : tooltipTitle;
+    }
+
+  },
+  methods: {
+    calcAvatarPosition(avatarIndex) {
+      // According to pajamas, overlap is 25% of the avatar height
+      const overlapDistance = this.avatarSize * 0.75;
+      return {
+        left: `${overlapDistance * avatarIndex}px`,
+        zIndex: this.maxVisible + (avatarIndex - 1)
+      };
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['gl-avatars-inline', { collapsed: _vm.collapsed }],style:(_vm.containerSizeStyles)},[_vm._l((_vm.visibleAvatars),function(avatar,index){return _c('div',{key:index,staticClass:"gl-avatars-inline-child",style:(_vm.calcAvatarPosition(index))},[_vm._t("avatar",[_c('gl-avatar',_vm._b({attrs:{"size":_vm.avatarSize}},'gl-avatar',avatar,false))],{"avatar":avatar})],2)}),_vm._v(" "),(_vm.collapsed && _vm.collapsable)?_c('div',{staticClass:"gl-avatars-inline-child",style:(_vm.calcAvatarPosition(_vm.visibleAvatars.length))},[(_vm.badgeTooltipProp)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.badge; }}},[_vm._v("\n      "+_vm._s(_vm.badgeTooltipTitle)+"\n    ")]):_vm._e(),_vm._v(" "),_c('span',{ref:"badge",class:['gl-avatars-inline-badge', _vm.badgeSize],attrs:{"data-testid":"collapsed-avatars-badge","aria-hidden":"true"}},[_vm._v("\n      "+_vm._s(_vm.badgeLabel)+"\n    ")]),_vm._v(" "),_c('span',{staticClass:"sr-only",attrs:{"data-testid":"badge-sr-only-text"}},[_vm._v(_vm._s(_vm.badgeSrOnlyText))])],1):_vm._e()],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/badge/badge.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/badge/badge.documentation.js
new file mode 100644
index 00000000000000..e04a62bff46945
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/badge/badge.documentation.js
@@ -0,0 +1,8 @@
+var description = "Badges highlight metadata of objects, the kind of information that always needs\nsome context and isn’t useful on its own. For example, they can be used to\nindicate an issue’s status, a member’s role, or if a branch is protected.\n\n## Usage\n\n```html\n<gl-badge>Hello, world!</gl-badge>\n```\n\n> Note: Native support for icons in badges will be added in a future version.\n\n### Using icon-only badges\n\nWhen a badge only has an icon and no slot content, be sure to set the `aria-label` attribute of the\nbadge for best accessibility.\n\n```html\n<!-- bad -->\n<gl-badge icon=\"eye\" />\n\n<!-- good -->\n<gl-badge icon=\"eye\" aria-label=\"Mark as confidential\" />\n```\n\n## Edge cases\n\nWhile this component is based on\n[`BBadge`](https://bootstrap-vue.org/docs/components/badge) from\n`bootstrap-vue`, it is not a drop-in replacement. Specifically, this component:\n\n- Has a different set of valid `variant`s. See the examples or props\n   documentation for those values.\n- Always sets the `pill` prop of the underlying `BBadge` to `true`. Any passed\n   in `pill` prop value is ignored.\n- Does _not_ scale itself to match the size of its immediate parent, like\n   `BBadge` does.\n";
+
+var badge_documentation = {
+  description,
+  followsDesignSystem: true
+};
+
+export default badge_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/badge/badge.js b/app/assets/javascripts/gitlab-ui/dist/components/base/badge/badge.js
new file mode 100644
index 00000000000000..82232a1f440941
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/badge/badge.js
@@ -0,0 +1,98 @@
+import { BBadge } from 'bootstrap-vue/esm/index.js';
+import { badgeSizeOptions, badgeVariantOptions } from '../../../utils/constants';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BBadge,
+    GlIcon
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * The size of the badge.
+     */
+    size: {
+      type: String,
+      default: badgeSizeOptions.md,
+
+      validator(value) {
+        return badgeSizeOptions[value] !== undefined;
+      },
+
+      required: false
+    },
+
+    /**
+     * The variant of the badge.
+     */
+    variant: {
+      type: String,
+      default: badgeVariantOptions.muted,
+
+      validator(value) {
+        return badgeVariantOptions[value] !== undefined;
+      },
+
+      required: false
+    },
+
+    /**
+     * The icon to show next to the text
+     */
+    icon: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  computed: {
+    hasIconOnly() {
+      return Boolean(this.icon && Object.keys(this.$slots).length === 0);
+    },
+
+    role() {
+      return this.hasIconOnly ? 'img' : undefined;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-badge',_vm._b({class:['gl-badge', _vm.size],attrs:{"variant":_vm.variant,"role":_vm.role,"pill":""}},'b-badge',_vm.$attrs,false),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ 'gl-mr-2': !_vm.hasIconOnly },attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/banner/banner.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/banner/banner.documentation.js
new file mode 100644
index 00000000000000..d469be89a1b9ca
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/banner/banner.documentation.js
@@ -0,0 +1,8 @@
+var description = "## Dismiss\n\nUsers are able to permanently dismiss banners by default.\nBanners may also be dismissed temporarily, depending on the use case.\n\n### Permanent dismissal\n\nThe dismiss action is always represented by the `Close` icon and anchored\nto the top right of the banner.\n\nBanner dismissal should work as follows:\n\n* Banner dismissal must be associated with the user in the system database.\n  Dismissal must persist, even across version upgrades and clients.\n* Banners do not reappear by default. In rare circumstances, you may present the\n  banner again to a user after some time has passed.\n* Banners should only be shown to users who are logged in.\n\n**Implementation Notes:**\n\n* The dismissal of the banner is achieved using the `UserCallout` model on the backend and the\n  `PersistentUserCallout` JS file on the frontend. If both parameters are implemented correctly, the\n  banner will adhere to the dismissal guidelines above.\n\n### Temporary dismissal\n\nTo introduce temporary dismissal, include a secondary or tertiary button placed alongside\nthe primary action button. Follow the [button](https://design.gitlab.com/components/button#alignment)\nalignment and order guidelines.\n\nTemporary dismissals should work as follows:\n\n* Banners dismissed temporarily will reappear after **7 days**.\n* After a banner is dismissed temporarily, use a [toast](?path=/story/base-toast--default) message\n  to let the user know they will see the banner again in 7 days.\n";
+
+var banner_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default banner_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/banner/banner.js b/app/assets/javascripts/gitlab-ui/dist/components/base/banner/banner.js
new file mode 100644
index 00000000000000..a833860b546c66
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/banner/banner.js
@@ -0,0 +1,136 @@
+import { bannerVariants } from '../../../utils/constants';
+import GlButton from '../button/button';
+import GlCard from '../card/card';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlBanner',
+  components: {
+    GlButton,
+    GlCard
+  },
+  props: {
+    /**
+     * Used to set the title of the banner.
+     */
+    title: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Text for the submit button.
+     */
+    buttonText: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Link for the submit button.
+     */
+    buttonLink: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * The illustration's URL.
+     */
+    svgPath: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * The variant of the banner.
+     */
+    variant: {
+      type: String,
+      required: false,
+      default: bannerVariants[0],
+
+      validator(value) {
+        return bannerVariants.includes(value);
+      }
+
+    },
+
+    /**
+     * Removes the border for banners embedded in content.
+     */
+    embedded: {
+      type: Boolean,
+      required: false,
+      default: null
+    }
+  },
+  computed: {
+    isIntroducing() {
+      return this.variant === bannerVariants[1];
+    }
+
+  },
+  methods: {
+    handleClose() {
+      /**
+       * Emitted when the close button is clicked.
+       *
+       * @event close
+       * @type {object}
+       */
+      this.$emit('close');
+    },
+
+    primaryButtonClicked() {
+      /**
+       * Emitted when the primary action button is clicked.
+       *
+       * @event primary
+       * @type {object}
+       */
+      this.$emit('primary');
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-card',{staticClass:"gl-px-8 gl-py-6 gl-line-height-20",class:{ 'gl-banner-introduction': _vm.isIntroducing, 'gl-border-none!': _vm.embedded },attrs:{"body-class":"gl-display-flex gl-p-0!"}},[(_vm.svgPath)?_c('div',{staticClass:"gl-banner-illustration"},[_c('img',{attrs:{"src":_vm.svgPath,"alt":"","role":"presentation"}})]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-banner-content"},[_c('h1',{staticClass:"gl-banner-title"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_vm._t("default"),_vm._v(" "),_c('gl-button',{attrs:{"variant":"confirm","category":"primary","data-testid":"gl-banner-primary-button","href":_vm.buttonLink},on:{"click":_vm.primaryButtonClicked}},[_vm._v(_vm._s(_vm.buttonText))]),_vm._v(" "),_vm._t("actions")],2),_vm._v(" "),_c('gl-button',{staticClass:"gl-banner-close",attrs:{"variant":_vm.isIntroducing ? 'confirm' : 'default',"category":"tertiary","size":"small","icon":"close","aria-label":"Close banner"},on:{"click":_vm.handleClose}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/breadcrumb/breadcrumb.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/breadcrumb/breadcrumb.documentation.js
new file mode 100644
index 00000000000000..5fbf49e4eeb114
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/breadcrumb/breadcrumb.documentation.js
@@ -0,0 +1,8 @@
+var description = "## Usage\n\nThis component provides two `<slot>` elements for customization. The first is a `<slot #avatar>`\nso an avatar can appear before the first breadcrumb. The second is a `<slot #separator>` to\ncustomize the icon that appears between each breadcrumb.\n\n**note:** the component supports passing the property `to` in the list items to enable navigation\nthrough `vue-router`\n\n### Example\n\nYou can use any kind of separator you want in the slot, like below, which uses `<svg>`\nto draw a `/`\n\n```html\n<gl-breadcrumb :items=\"items\">\n  <template #avatar>\n    <img \n      alt=\"\"\n      class=\"gl-breadcrumb-avatar-tile\"\n      src=\"https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16\"\n      width=\"16\"\n      height=\"16\"\n    />\n  </template>\n  <template #separator>\n    <svg height=\"16\">\n      <line x1=\"100%\" y1=\"0\" x2=\"0\" y2=\"100%\" stroke=\"gray\" />\n    </svg>\n  </template>\n</gl-breadcrumb>\n```\n";
+
+var breadcrumb_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default breadcrumb_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/breadcrumb/breadcrumb.js b/app/assets/javascripts/gitlab-ui/dist/components/base/breadcrumb/breadcrumb.js
new file mode 100644
index 00000000000000..512c6262e0268e
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/breadcrumb/breadcrumb.js
@@ -0,0 +1,127 @@
+import { BBreadcrumb, BBreadcrumbItem } from 'bootstrap-vue/esm/index.js';
+import GlIcon from '../icon/icon';
+import GlButton from '../button/button';
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const COLLAPSE_AT_SIZE = 4;
+var script = {
+  components: {
+    BBreadcrumb,
+    BBreadcrumbItem,
+    GlIcon,
+    GlButton
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * The breadcrumb items to be displayed as links.
+     */
+    items: {
+      type: Array,
+      required: true,
+      default: () => [{
+        text: '',
+        href: ''
+      }],
+      validator: links => {
+        return links.every(link => {
+          const keys = Object.keys(link);
+          return keys.includes('text') && (keys.includes('href') || keys.includes('to'));
+        });
+      }
+    }
+  },
+
+  data() {
+    return {
+      isListCollapsed: true
+    };
+  },
+
+  computed: {
+    breadcrumbsSize() {
+      return this.items.length;
+    },
+
+    hasCollapsible() {
+      return this.breadcrumbsSize > COLLAPSE_AT_SIZE;
+    },
+
+    nonCollapsibleIndices() {
+      return [0, this.breadcrumbsSize - 1, this.breadcrumbsSize - 2];
+    }
+
+  },
+  methods: {
+    isFirstItem(index) {
+      return index === 0;
+    },
+
+    isLastItem(index) {
+      return index === this.breadcrumbsSize - 1;
+    },
+
+    expandBreadcrumbs() {
+      this.isListCollapsed = false;
+
+      try {
+        this.$refs.firstItem[0].querySelector('a').focus();
+      } catch (e) {
+        /* eslint-disable-next-line no-console */
+        console.error(`Failed to set focus on the last breadcrumb item.`);
+      }
+    },
+
+    showCollapsedBreadcrumbsExpander(index) {
+      return index === 0 && this.hasCollapsible && this.isListCollapsed;
+    },
+
+    isItemCollapsed(index) {
+      return this.hasCollapsible && this.isListCollapsed && !this.nonCollapsibleIndices.includes(index);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"gl-breadcrumbs",attrs:{"aria-label":"Breadcrumb"}},[_vm._t("avatar"),_vm._v(" "),_c('b-breadcrumb',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list"},'b-breadcrumb',_vm.$attrs,false),_vm.$listeners),[_vm._l((_vm.items),function(item,index){return [_c('b-breadcrumb-item',{key:index,ref:_vm.isFirstItem(index) ? 'firstItem' : null,refInFor:true,staticClass:"gl-breadcrumb-item",class:{ 'gl-display-none': _vm.isItemCollapsed(index) },attrs:{"text":item.text,"href":item.href,"to":item.to}},[_c('span',[_vm._v(_vm._s(item.text))]),_vm._v(" "),(!_vm.isLastItem(index))?_c('span',{key:(index + " " + (item.text)),staticClass:"gl-breadcrumb-separator",attrs:{"data-testid":"separator"}},[_vm._t("separator",[_c('gl-icon',{attrs:{"name":"chevron-right"}})])],2):_vm._e()]),_vm._v(" "),(_vm.showCollapsedBreadcrumbsExpander(index))?[_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:('Show all breadcrumbs'),expression:"'Show all breadcrumbs'",modifiers:{"hover":true}}],attrs:{"aria-label":"Show all breadcrumbs","data-testid":"collapsed-expander","icon":"ellipsis_h","category":"primary"},on:{"click":_vm.expandBreadcrumbs}}),_vm._v(" "),_c('span',{key:"expander",staticClass:"gl-display-inline-flex gl-text-gray-500",attrs:{"data-testid":"expander-separator"}},[_vm._t("separator",[_c('gl-icon',{attrs:{"name":"chevron-right"}})])],2)]:_vm._e()]})],2)],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+export { COLLAPSE_AT_SIZE };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/broadcast_message/broadcast_message.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/broadcast_message/broadcast_message.documentation.js
new file mode 100644
index 00000000000000..2e214ed77db200
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/broadcast_message/broadcast_message.documentation.js
@@ -0,0 +1,8 @@
+var description = "Broadcast messages provide an efficient and prominent way to deliver critical messages at the\ninstance level to all users. For example, a broadcast message can be used when an admin wants to\nannounce that their platform will experience downtime during a specific period.\n\nIn comparison with an alert, broadcast messages are created by an admin and not triggered by the\nsystem.\n\nPlease refer to [Pajamas' documentation](https://design.gitlab.com/components/broadcast-message)\nfor more information on when to use this component.\n\n## Dismiss a broadcast message\n\nThe `GlBroadcastMessage` component deals with users dismissal the same way `GlAlert` does, meaning\nit does not handle its own visibility but emits a `dismiss` event that the parent component should\nlisten to in order to hide the message. Example:\n\n```html\n<template>\n  ...\n  <gl-broadcast-message v-if=\"!dismissed\" @dismiss=\"dismissed = true\">\n    An important message\n  </gl-broadcast-message>\n  ...\n</template>\n```\n";
+
+var broadcast_message_documentation = {
+  followsDesignSystem: false,
+  description
+};
+
+export default broadcast_message_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/broadcast_message/broadcast_message.js b/app/assets/javascripts/gitlab-ui/dist/components/base/broadcast_message/broadcast_message.js
new file mode 100644
index 00000000000000..c83bb3275f4e93
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/broadcast_message/broadcast_message.js
@@ -0,0 +1,90 @@
+import { colorThemes } from '../../../utils/constants';
+import CloseButton from '../../shared_components/close_button/close_button';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    CloseButton,
+    GlIcon
+  },
+  props: {
+    /**
+     * The icon to show next to the text.
+     */
+    iconName: {
+      type: String,
+      required: false,
+      default: 'bullhorn'
+    },
+
+    /**
+     * The dismiss button's label, it is visible in mobile viewports and used for the button's aria-label attribute.
+     */
+    dismissLabel: {
+      type: String,
+      required: false,
+      default: 'Dismiss'
+    },
+
+    /**
+     * The theme's name to use, this should correspond to the user's selected theme in GitLab.
+     */
+    theme: {
+      type: String,
+      required: false,
+      default: Object.keys(colorThemes)[0],
+      validator: value => Object.keys(colorThemes).includes(value)
+    }
+  },
+  methods: {
+    onDismiss() {
+      /**
+       * Emitted when the dismiss button is clicked.
+       *
+       * @event dismiss
+       * @type {object}
+       */
+      this.$emit('dismiss');
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-broadcast-message",class:_vm.theme,attrs:{"role":"alert"}},[_c('div',{staticClass:"gl-broadcast-message-content"},[_c('div',{staticClass:"gl-broadcast-message-icon"},[_c('gl-icon',{attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-broadcast-message-text"},[_vm._t("default")],2)]),_vm._v(" "),_c('close-button',{ref:"dismiss",staticClass:"gl-close-btn-color-inherit gl-broadcast-message-dismiss",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/button/button.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/button/button.documentation.js
new file mode 100644
index 00000000000000..244c14022dc0d4
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/button/button.documentation.js
@@ -0,0 +1,24 @@
+var description = "Buttons execute an action, either in the background or foreground of an experience. Different button\ncategories help guide users through certain actions. Buttons express what action will occur when the\nuser clicks or touches it either by text, icon, or both. Additional meaning can be derived from the\nbutton variant.\n\n## Button link\n\nA button link is a link that is styled to look like a button, semantically speaking it's a `<a>` tag\nwith the necessary classes added to make it look like a button, it shares the same functionality as\n[`<gl-link>`]\n\n> Note: Setting a `target` attribute without a `href` attribute, will not create any side effects.\n> Without the presence of a `href` attribute, this component will render a `<button>`.\n\n[`<gl-link>`]: ./?path=/story/base-link--default-link\n\n## Icon-only button\n\nIcon-only buttons must have an accessible name.\nYou can provide one with the `aria-label` attribute, which is read out by screen readers.\n\n```html\n<gl-button icon=\"close\" aria-label=\"Close\" />\n```\n\n## Label button\n\nA label button renders a non-interactive `span` styled as a button. This can be especially useful\nwhen used in a button group to render text-only labels along with actionable buttons. To improve\naccessibility, and when applicable, consider using [`aria-describedby`] to establish a\nrelationship between the label button and the associated button.\n\n[`aria-describedby`]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute\n\n## Security\n\nThis component implements a few security measures to make it as safe as possible by default.\nSee [SafeLinkDirective docs] for more details.\n\n### Linking to an unsafe URL\n\nIf you're trying to link to a location considered unsafe by the `SafeLink` directive (when rendering\na download link with a [Data URL] for example), you'll need to bypass the `href` attribute's\nsanitization. This component exposes the `is-unsafe-link` prop for that purpose.\n\n> **Warning:** Only disable URL sanitization when absolutely necessary.\n\n```html\n<gl-button\n  is-unsafe-link\n  download=\"file.txt\"\n  href=\"data:text/plain;charset=utf-8,GitLab%20is%20awesome\">Download</gl-button>\n```\n\n[SafeLinkDirective docs]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/directives-safe-link-directive--default\n[Data URL]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs\n\n## vue-bootstrap component\n\nThis component uses [`BButton`](https://bootstrap-vue.org/docs/components/button) from vue-bootstrap\ninternally. So please take a look also there at their extensive documentation.\n";
+
+var button_documentation = {
+  description,
+  followsDesignSystem: true,
+  bootstrapComponent: 'b-button',
+  bootstrapPropsInfo: {
+    category: {
+      enum: 'buttonCategoryOptions'
+    },
+    variant: {
+      enum: 'buttonVariantOptions'
+    },
+    size: {
+      enum: 'buttonSizeOptions'
+    }
+  },
+  events: [{
+    event: 'click',
+    description: 'Emitted when clicked on button'
+  }]
+};
+
+export default button_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/button/button.js b/app/assets/javascripts/gitlab-ui/dist/components/base/button/button.js
new file mode 100644
index 00000000000000..d31d1d72dc9f25
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/button/button.js
@@ -0,0 +1,150 @@
+import { BButton } from 'bootstrap-vue/esm/index.js';
+import { buttonCategoryOptions, buttonVariantOptions, buttonSizeOptions, buttonSizeOptionsMap } from '../../../utils/constants';
+import { logWarning } from '../../../utils/utils';
+import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
+import GlIcon from '../icon/icon';
+import GlLoadingIcon from '../loading_icon/loading_icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BButton,
+    GlIcon,
+    GlLoadingIcon
+  },
+  mixins: [SafeLinkMixin],
+  props: {
+    category: {
+      type: String,
+      required: false,
+      default: buttonCategoryOptions.primary,
+      validator: value => Object.keys(buttonCategoryOptions).includes(value)
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: buttonVariantOptions.default,
+      validator: value => Object.keys(buttonVariantOptions).includes(value)
+    },
+    size: {
+      type: String,
+      required: false,
+      default: buttonSizeOptions.medium,
+      validator: value => Object.keys(buttonSizeOptions).includes(value)
+    },
+    selected: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    label: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    buttonTextClasses: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    hasIcon() {
+      return this.icon !== '';
+    },
+
+    hasIconOnly() {
+      return Object.keys(this.$slots).length === 0 && this.hasIcon;
+    },
+
+    isButtonDisabled() {
+      return this.disabled || this.loading;
+    },
+
+    buttonClasses() {
+      const classes = ['gl-button'];
+      const nonCategoryVariants = [buttonVariantOptions.dashed, buttonVariantOptions.link, buttonVariantOptions.reset];
+
+      if (!nonCategoryVariants.includes(this.variant) && this.category !== buttonCategoryOptions.primary) {
+        classes.push(`btn-${this.variant}-${this.category}`);
+      }
+
+      classes.push({
+        'btn-icon': this.hasIconOnly,
+        'button-ellipsis-horizontal': this.hasIconOnly && this.icon === 'ellipsis_h',
+        selected: this.selected
+      });
+
+      if (this.label) {
+        classes.push('btn', 'btn-label', `btn-${this.buttonSize}`);
+      }
+
+      return classes;
+    },
+
+    buttonSize() {
+      return buttonSizeOptionsMap[this.size];
+    }
+
+  },
+
+  mounted() {
+    if (!this.$slots.default && !this.$attrs['aria-label'] && !this.$props.label) {
+      logWarning('[gl-button]: Accessible name missing. Please add inner text or aria-label.');
+    }
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.label ? 'span' : 'b-button',_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],tag:"component",class:_vm.buttonClasses,attrs:{"target":_vm.target,"variant":_vm.variant,"size":_vm.buttonSize,"disabled":_vm.isButtonDisabled}},'component',_vm.$attrs,false),_vm.$listeners),[(_vm.loading)?_c('gl-loading-icon',{staticClass:"gl-button-icon gl-button-loading-indicator",attrs:{"inline":""}}):_vm._e(),_vm._v(" "),(_vm.hasIcon && !(_vm.hasIconOnly && _vm.loading))?_c('gl-icon',{staticClass:"gl-button-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_vm._t("emoji"),_vm._v(" "),(!_vm.hasIconOnly)?_c('span',{staticClass:"gl-button-text",class:_vm.buttonTextClasses},[_vm._t("default")],2):_vm._e()],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/button_group/button_group.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/button_group/button_group.documentation.js
new file mode 100644
index 00000000000000..049367ae03754a
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/button_group/button_group.documentation.js
@@ -0,0 +1,8 @@
+var description = "Button groups are an easy way to group a series of buttons together.\n\n## vue-bootstrap component\n\nThis component uses [`BButtonGroup`](https://bootstrap-vue.org/docs/components/button-group) from vue-bootstrap\ninternally. So please take a look also there at their extensive documentation.\n";
+
+var button_group_documentation = {
+  description,
+  followsDesignSystem: true
+};
+
+export default button_group_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/button_group/button_group.js b/app/assets/javascripts/gitlab-ui/dist/components/base/button_group/button_group.js
new file mode 100644
index 00000000000000..254822f84bd31c
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/button_group/button_group.js
@@ -0,0 +1,46 @@
+import { BButtonGroup } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BButtonGroup
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-button-group',_vm._g(_vm._b({},'b-button-group',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/card/card.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/card/card.documentation.js
new file mode 100644
index 00000000000000..0bffe6acb1e1b6
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/card/card.documentation.js
@@ -0,0 +1,13 @@
+var card = "Cards are a flexible component used to display content and actions in a variety of contexts.\nThey are generally restricted to a single topic and it should be easy for users to scan relevant and\nactionable information. Content, such as images and text, should be positioned within them in a\nmanner that demonstrates their intended hierarchy.\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': card
+});
+
+var card_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default card_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/card/card.js b/app/assets/javascripts/gitlab-ui/dist/components/base/card/card.js
new file mode 100644
index 00000000000000..79c4035b97f2e0
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/card/card.js
@@ -0,0 +1,70 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  props: {
+    /**
+     * Additional CSS class(es) to be applied to the header.
+     */
+    headerClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Additional CSS class(es) to be applied to the body.
+     */
+    bodyClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Additional CSS class(es) to be applied to the footer.
+     */
+    footerClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: ''
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-card"},[(this.$slots.header)?_c('div',{staticClass:"gl-card-header",class:_vm.headerClass},[_vm._t("header")],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-card-body",class:_vm.bodyClass},[_vm._t("default")],2),_vm._v(" "),(this.$slots.footer)?_c('div',{staticClass:"gl-card-footer",class:_vm.footerClass},[_vm._t("footer")],2):_vm._e()])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/carousel/carousel.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/carousel/carousel.documentation.js
new file mode 100644
index 00000000000000..7f043a10f5c333
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/carousel/carousel.documentation.js
@@ -0,0 +1,8 @@
+var description = "The carousel is a slideshow for cycling through a series of content, built with CSS 3D\ntransforms. It works with a series of images, text, or custom markup. It also includes support\nfor previous/next controls and indicators.\n";
+
+var carousel_documentation = {
+  description,
+  bootstrapComponent: 'b-carousel'
+};
+
+export default carousel_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/carousel/carousel.js b/app/assets/javascripts/gitlab-ui/dist/components/base/carousel/carousel.js
new file mode 100644
index 00000000000000..4044bb60055bf0
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/carousel/carousel.js
@@ -0,0 +1,46 @@
+import { BCarousel } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BCarousel
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-carousel',_vm._g(_vm._b({scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-carousel',_vm.$attrs,false),_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/carousel/carousel_slide.js b/app/assets/javascripts/gitlab-ui/dist/components/base/carousel/carousel_slide.js
new file mode 100644
index 00000000000000..0e5840339f1195
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/carousel/carousel_slide.js
@@ -0,0 +1,46 @@
+import { BCarouselSlide } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BCarouselSlide
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-carousel-slide',_vm._g(_vm._b({scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-carousel-slide',_vm.$attrs,false),_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/collapse/collapse.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/collapse/collapse.documentation.js
new file mode 100644
index 00000000000000..156c2e4bddcbfd
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/collapse/collapse.documentation.js
@@ -0,0 +1,7 @@
+var description = "Collapse is used to keep pages focused on the overview of what the user can do. Details and\nadditional actions are hidden in the fold, and can be opened if the user wants to interact with\nthose elements.\n";
+
+var collapse_documentation = {
+  description
+};
+
+export default collapse_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/collapse/collapse.js b/app/assets/javascripts/gitlab-ui/dist/components/base/collapse/collapse.js
new file mode 100644
index 00000000000000..fe93d8b91b5383
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/collapse/collapse.js
@@ -0,0 +1,50 @@
+import { BCollapse } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BCollapse
+  },
+  model: {
+    prop: 'visible',
+    event: 'input'
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-collapse',_vm._g(_vm._b({},'b-collapse',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/datepicker.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/datepicker.documentation.js
new file mode 100644
index 00000000000000..0a5f5ffffee684
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/datepicker.documentation.js
@@ -0,0 +1,52 @@
+import examples from './examples';
+
+var description = "# Datepicker\n\n<!-- STORY -->\n\n## Usage\n\nDate picker allows users to choose and input a date by manually typing the date into the input field\nor by using a calendar-like dropdown.\n\n### Warning\n\nBe careful when binding a date value using `value` prop. `value` is a watched property and Date\npicker will emit `input` event on _initial load_. Alternatively, use `defaultDate` to set the\ninitial date then receive updated date values through `input` events.\n";
+
+var datepicker_documentation = {
+  description,
+  examples,
+  propsInfo: {
+    target: {
+      additionalInfo: 'Selector of element that triggers the datepicker. Defaults to the calendar icon. Pass `null` to trigger on input focus.'
+    },
+    container: {
+      additionalInfo: 'DOM node to render calendar into. Defaults to the datepicker container. Pass `null` to use Pikaday default.'
+    },
+    disableDayFn: {
+      additionalInfo: 'Accepts a function that accepts a date as argument and returns true if the date is disabled.'
+    },
+    autocomplete: {
+      additionalInfo: 'Defaults to `off` when datepicker opens on focus, otherwise defaults to `null`.'
+    },
+    defaultDate: {
+      additionalInfo: 'Use this prop to set the initial date for the datepicker.'
+    }
+  },
+  events: [{
+    event: 'input',
+    description: 'Emitted when a new date has been selected.',
+    args: [{
+      arg: 'date',
+      description: 'The selected date'
+    }]
+  }, {
+    event: 'close',
+    description: 'Emitted when the datepicker is hidden.'
+  }, {
+    event: 'open',
+    description: 'Emitted when the datepicker becomes visible.'
+  }, {
+    event: 'draw',
+    description: 'Emitted when the datepicker draws a new month.'
+  }, {
+    event: 'clear',
+    description: 'Emitted when the clear button is clicked.'
+  }],
+  slots: [{
+    name: 'default',
+    description: '(optional) Input to display and bind the datepicker to. Defaults to `<gl-form-input />`',
+    scopedProps: `{ formattedDate: string }`
+  }]
+};
+
+export default datepicker_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/datepicker.js b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/datepicker.js
new file mode 100644
index 00000000000000..995a49cea43db4
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/datepicker.js
@@ -0,0 +1,360 @@
+import _isString from 'lodash/isString';
+import Pikaday from 'pikaday';
+import { defaultDateFormat } from '../../../utils/constants';
+import { areDatesEqual } from '../../../utils/datetime_utility';
+import GlButton from '../button/button';
+import GlFormInput from '../form/form_input/form_input';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const pad = function (val) {
+  let len = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  return `0${val}`.slice(-len);
+};
+/**
+ * Used `onSelect` method in pickaday
+ * @param {Date} date UTC format
+ * @return {String} Date formated in yyyy-mm-dd
+ */
+
+const defaultDateFormatter = date => {
+  const day = pad(date.getDate());
+  const month = pad(date.getMonth() + 1);
+  const year = date.getFullYear();
+  return `${year}-${month}-${day}`;
+};
+
+const isBefore = (compareTo, date) => compareTo && date && date.getTime() < compareTo.getTime();
+
+const highlightPastDates = pikaday => {
+  const pikaButtons = pikaday.el.querySelectorAll('.pika-button');
+  const today = new Date();
+  pikaButtons.forEach(pikaButton => {
+    const {
+      pikaYear,
+      pikaMonth,
+      pikaDay
+    } = pikaButton.dataset;
+    const pikaButtonDate = new Date(pikaYear, pikaMonth, pikaDay);
+
+    if (isBefore(today, pikaButtonDate)) {
+      pikaButton.classList.add('is-past-date');
+    }
+  });
+};
+
+var script = {
+  components: {
+    GlFormInput,
+    GlIcon,
+    GlButton
+  },
+  props: {
+    target: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    container: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    value: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    minDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    maxDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    startRange: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    endRange: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    disableDayFn: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    firstDay: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    arialLabel: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: defaultDateFormat
+    },
+    autocomplete: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    displayField: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    startOpened: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    defaultDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    i18n: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    showClearButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    inputId: {
+      type: String,
+      required: false,
+      default: null
+    },
+    inputLabel: {
+      type: String,
+      required: false,
+      default: 'Enter date'
+    },
+    inputName: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+
+  data() {
+    return {
+      textInput: ''
+    };
+  },
+
+  computed: {
+    formattedDate() {
+      return this.calendar && this.calendar.toString();
+    },
+
+    customTrigger() {
+      return _isString(this.target) && this.target !== '';
+    },
+
+    triggerOnFocus() {
+      return this.target === null;
+    },
+
+    showDefaultField() {
+      return !this.customTrigger || this.triggerOnFocus;
+    },
+
+    renderClearButton() {
+      return this.showClearButton && this.textInput !== '' && !this.disabled;
+    },
+
+    inputAutocomplete() {
+      if (this.autocomplete !== '') {
+        return this.autocomplete;
+      }
+
+      if (this.triggerOnFocus) {
+        return 'off';
+      }
+
+      return null;
+    }
+
+  },
+  watch: {
+    value(val) {
+      if (!areDatesEqual(val, this.calendar.getDate())) {
+        this.calendar.setDate(val, true);
+      }
+    },
+
+    minDate(minDate) {
+      this.calendar.setMinDate(minDate);
+    },
+
+    maxDate(maxDate) {
+      this.calendar.setMaxDate(maxDate);
+    },
+
+    startRange(startRange) {
+      this.calendar.setStartRange(startRange);
+    },
+
+    endRange(endRange) {
+      this.calendar.setEndRange(endRange);
+    }
+
+  },
+
+  mounted() {
+    const $parentEl = this.$parent.$el;
+    const drawEvent = this.draw.bind(this);
+    const pikadayConfig = {
+      field: this.$el.querySelector('input[type="text"]'),
+      // `position-absolute` is needed because of this bug: https://github.com/Pikaday/Pikaday/issues/840
+      theme: `gl-datepicker-theme position-absolute ${this.theme}`,
+      defaultDate: this.defaultDate || this.value,
+      setDefaultDate: Boolean(this.value) || Boolean(this.defaultDate),
+      minDate: this.minDate,
+      maxDate: this.maxDate,
+      // Only supports default gitlab format YYYY-MM-DD. We have to decide if we want to support other formats.
+      format: defaultDateFormat,
+      parse: dateString => {
+        const parsedDate = Date.parse(dateString.replace(/-/g, '/'));
+        return Number.isNaN(parsedDate) ? new Date() : new Date(parsedDate);
+      },
+      disableDayFn: this.disableDayFn,
+      firstDay: this.firstDay,
+      arialLabel: this.ariaLabel,
+      toString: date => defaultDateFormatter(date),
+      onSelect: this.selected.bind(this),
+      onClose: this.closed.bind(this),
+      onOpen: this.opened.bind(this),
+      onDraw: pikaday => {
+        highlightPastDates(pikaday);
+        drawEvent();
+      }
+    }; // Pass `null` as `target` prop to use the `field` as the trigger (open on focus)
+
+    if (!this.triggerOnFocus && !this.disabled) {
+      const trigger = this.customTrigger ? $parentEl.querySelector(this.target) : this.$refs.calendarTriggerBtn.$el;
+      pikadayConfig.trigger = trigger; // Set `trigger` as the `field` if `field` element doesn't exist (not passed via the slot)
+
+      if (!pikadayConfig.field && this.customTrigger) {
+        pikadayConfig.field = trigger;
+      }
+    } // Pass `null` as `container` prop to prevent passing the `container` option to Pikaday
+
+
+    if (this.container !== null) {
+      const container = this.container ? $parentEl.querySelector(this.container) : this.$el;
+      pikadayConfig.container = container;
+    }
+
+    if (this.i18n) {
+      pikadayConfig.i18n = this.i18n;
+    }
+
+    this.calendar = new Pikaday(pikadayConfig);
+
+    if (this.startOpened) {
+      this.calendar.show();
+    }
+  },
+
+  beforeDestroy() {
+    this.calendar.destroy();
+  },
+
+  methods: {
+    selected(date) {
+      this.$emit('input', date);
+    },
+
+    closed() {
+      this.$emit('close');
+    },
+
+    opened() {
+      this.$emit('open');
+    },
+
+    cleared() {
+      this.textInput = '';
+      this.$emit('clear');
+    },
+
+    draw() {
+      this.$emit('monthChange');
+    },
+
+    onKeydown() {
+      if (this.textInput === '') {
+        const resetDate = this.minDate || null;
+        this.calendar.setDate(resetDate);
+        this.selected(resetDate);
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-datepicker d-inline-block"},[(_vm.showDefaultField)?_c('div',{staticClass:"position-relative"},[_vm._t("default",[_c('gl-form-input',{staticClass:"gl-datepicker-input",class:_vm.renderClearButton ? 'gl-pr-9!' : 'gl-pr-7!',attrs:{"id":_vm.inputId,"name":_vm.inputName,"data-testid":"gl-datepicker-input","value":_vm.formattedDate,"placeholder":_vm.placeholder,"autocomplete":_vm.inputAutocomplete,"disabled":_vm.disabled,"aria-label":_vm.inputLabel},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onKeydown($event)}},model:{value:(_vm.textInput),callback:function ($$v) {_vm.textInput=$$v;},expression:"textInput"}})],{"formattedDate":_vm.formattedDate}),_vm._v(" "),_c('div',{staticClass:"gl-datepicker-actions"},[(_vm.renderClearButton)?_c('gl-button',{staticClass:"gl-pointer-events-auto",attrs:{"data-testid":"clear-button","aria-label":"Clear date","category":"tertiary","size":"small","icon":"clear"},on:{"click":_vm.cleared}}):_vm._e(),_vm._v(" "),(_vm.triggerOnFocus || _vm.disabled)?_c('span',{staticClass:"gl-px-2",class:_vm.disabled ? 'gl-text-gray-400' : 'gl-text-gray-500',attrs:{"data-testid":"datepicker-calendar-icon"}},[_c('gl-icon',{staticClass:"gl-display-block",attrs:{"name":"calendar","size":16}})],1):_c('gl-button',{ref:"calendarTriggerBtn",staticClass:"gl-pointer-events-auto",attrs:{"aria-label":"Open datepicker","category":"tertiary","size":"small","icon":"calendar"}})],1)],2):_vm._t("default",null,{"formattedDate":_vm.formattedDate})],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+export { defaultDateFormatter, pad };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.basic.example.js
new file mode 100644
index 00000000000000..91f0c992986cef
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.basic.example.js
@@ -0,0 +1,48 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      value: null
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-datepicker')};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.custom_input.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.custom_input.example.js
new file mode 100644
index 00000000000000..92ac020e9463be
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.custom_input.example.js
@@ -0,0 +1,48 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      value: null
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-datepicker',[_c('input',{staticClass:"gl-form-input gl-datepicker-input form-control",attrs:{"id":"datepicker-custom-input-example","name":"date","type":"text","aria-label":"Select a date","placeholder":"Custom placeholder"}})])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.disabled.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.disabled.example.js
new file mode 100644
index 00000000000000..a5a72ec104a073
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.disabled.example.js
@@ -0,0 +1,48 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      value: null
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-datepicker',{attrs:{"disabled":""}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.open_on_focus.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.open_on_focus.example.js
new file mode 100644
index 00000000000000..baa0c5e816f60a
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.open_on_focus.example.js
@@ -0,0 +1,48 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      value: null
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-datepicker',{attrs:{"target":null}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.with_clear_button.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.with_clear_button.example.js
new file mode 100644
index 00000000000000..4b1ee159b37d0b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/datepicker.with_clear_button.example.js
@@ -0,0 +1,48 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      value: new Date(2020, 0, 15)
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-datepicker',{attrs:{"show-clear-button":""},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/index.js
new file mode 100644
index 00000000000000..248917cac83b47
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/datepicker/examples/index.js
@@ -0,0 +1,32 @@
+import DatepickerBasicExample from './datepicker.basic.example';
+import DatepickerCustomInputExample from './datepicker.custom_input.example';
+import DatepickerDisabledExample from './datepicker.disabled.example';
+import DatepickerOpenOnFocusExample from './datepicker.open_on_focus.example';
+import DatepickerWithClearButtonExample from './datepicker.with_clear_button.example';
+
+var index = [{
+  name: 'Datepicker',
+  items: [{
+    id: 'basic-date-picker',
+    name: 'Basic date picker',
+    component: DatepickerBasicExample
+  }, {
+    id: 'custom-input-date-picker',
+    name: 'With custom input',
+    component: DatepickerCustomInputExample
+  }, {
+    id: 'open-on-focus-date-picker',
+    name: 'Open on focus',
+    component: DatepickerOpenOnFocusExample
+  }, {
+    id: 'with-clear-button-date-picker',
+    name: 'With clear button',
+    component: DatepickerWithClearButtonExample
+  }, {
+    id: 'disabled-date-picker',
+    name: 'Disabled',
+    component: DatepickerDisabledExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/daterange_picker/daterange_picker.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/daterange_picker/daterange_picker.documentation.js
new file mode 100644
index 00000000000000..c0ebb3a7721b4b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/daterange_picker/daterange_picker.documentation.js
@@ -0,0 +1,8 @@
+var description = "## Usage\n\nDaterange picker allows users to choose a date range by manually typing the start/end date\ninto the input fields or by using a calendar-like dropdown.\n\nA `maxDateRange` can be specified in order to limit the maximum number of days the component\nwill allow to be selected i.e. if the start date is `2020-08-01` and `maxDateRange` is set to `10`,\nthe highest selectable end date would be `2020-08-11`. This value will be offset by `1` if\n`sameDaySelection` is set to `true`. A `defaultMaxDate` will need to be\nprovided when making use of the `maxDateRange`.\n\nBy default, the component does not allow selection of the same start and end date.\nIn a scenario where this is required, the `sameDaySelection` property can be configured.\nThis is specifically useful when a single day selection is being defined as `2020-01-01 00:00:00`\nto `2020-01-01 23:59:59` instead of `2020-01-01 00:00:00` to `2020-01-02 00:00:00`.\n\nWhen `maxDateRange` is set it's a good idea to set the `tooltip` specifying the date range limit\nand to indicate the number of days currently selected using the default slot. For example:\n\n```vue\n<template #default=\"{ daysSelected }\">\n  <span v-if=\"daysSelected > -1\">{{ daysSelected }} days selected</span>\n  <span v-else>No days selected</span>\n</template>\n```\n\nThe `daysSelected` slot prop is the effective date range, thus the value is increased by one when\n`sameDaySelection` is set to `true`. When no date range has been selected the value is `-1`.\n\n### Note\n\nIf specifying a maxDateRange, it is good practice to include a date range indicator and toolip.\n";
+
+var daterange_picker_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default daterange_picker_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/daterange_picker/daterange_picker.js b/app/assets/javascripts/gitlab-ui/dist/components/base/daterange_picker/daterange_picker.js
new file mode 100644
index 00000000000000..9173fbe5c29d6d
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/daterange_picker/daterange_picker.js
@@ -0,0 +1,295 @@
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import { getDateInPast, getDateInFuture, getDayDifference } from '../../../utils/datetime_utility';
+import GlDatepicker from '../datepicker/datepicker';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlDatepicker,
+    GlIcon
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  props: {
+    fromLabel: {
+      type: String,
+      required: false,
+      default: 'From'
+    },
+    toLabel: {
+      type: String,
+      required: false,
+      default: 'To'
+    },
+    value: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    i18n: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    defaultMinDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    defaultMaxDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    defaultStartDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    defaultEndDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    maxDateRange: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    startPickerClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    startPickerTarget: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    startPickerContainer: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    endPickerClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    endPickerTarget: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    endPickerContainer: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    labelClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    sameDaySelection: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * If provided, renders an info icon with a tooltip.
+     */
+    tooltip: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Additional class(es) to apply to the date range indicator section.
+     */
+    dateRangeIndicatorClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      fromCalendarMaxDate: this.defaultMaxDate ? getDateInPast(this.defaultMaxDate, 1) : null,
+      startDate: this.defaultStartDate,
+      endDate: this.defaultEndDate,
+      openToCalendar: false
+    };
+  },
+
+  computed: {
+    effectiveMaxDateRange() {
+      return this.sameDaySelection ? this.maxDateRange - 1 : this.maxDateRange;
+    },
+
+    toCalendarMinDate() {
+      if (!this.startDate) return null;
+      return this.sameDaySelection ? this.startDate : getDateInFuture(this.startDate, 1);
+    },
+
+    toCalendarMaxDate() {
+      if (!this.startDate || !this.maxDateRange) return this.defaultMaxDate;
+      const computedMaxEndDate = getDateInFuture(this.startDate, this.effectiveMaxDateRange);
+      return new Date(Math.min(computedMaxEndDate, this.defaultMaxDate));
+    },
+
+    dateRangeViolation() {
+      return this.startDate >= this.endDate || this.exceedsDateRange;
+    },
+
+    exceedsDateRange() {
+      if (this.numberOfDays < 0) {
+        return false;
+      }
+
+      return this.maxDateRange && this.numberOfDays > this.maxDateRange;
+    },
+
+    toCalendarDefaultDate() {
+      return this.endDate || this.toCalendarMinDate;
+    },
+
+    numericStartTime() {
+      return this.startDate ? this.startDate.getTime() : null;
+    },
+
+    numberOfDays() {
+      if (!this.startDate || !this.endDate) {
+        return -1;
+      }
+
+      const numberOfDays = getDayDifference(this.startDate, this.endDate);
+      return this.sameDaySelection ? numberOfDays + 1 : numberOfDays;
+    }
+
+  },
+  watch: {
+    value(val) {
+      const {
+        startDate,
+        endDate
+      } = val;
+      this.startDate = startDate;
+      this.endDate = endDate;
+    }
+
+  },
+  methods: {
+    onStartDateSelected(startDate) {
+      this.startDate = startDate;
+
+      if (this.dateRangeViolation) {
+        this.openToCalendar = true;
+        this.endDate = null;
+      } else this.$emit('input', {
+        startDate,
+        endDate: this.endDate
+      });
+    },
+
+    onEndDateSelected(endDate) {
+      this.openToCalendar = false;
+      this.endDate = endDate;
+      /**
+       * Emitted when start or end date selected with {startDate, endDate} value
+       *
+       * @event input
+       * */
+
+      this.$emit('input', {
+        startDate: this.startDate,
+        endDate
+      });
+    },
+
+    onStartPickerOpen() {
+      /**
+       * Emitted when the primary action button is clicked.
+       *
+       * @event start-picker-open
+       * */
+      this.$emit('start-picker-open');
+    },
+
+    onStartPickerClose() {
+      /**
+       * Emitted when the start date datepicker is hidden.
+       *
+       * @event start-picker-close
+       * */
+      this.$emit('start-picker-close');
+    },
+
+    onEndPickerOpen() {
+      /**
+       * Emitted when the end date datepicker becomes visible.
+       *
+       * @event end-picker-open
+       * */
+      this.$emit('end-picker-open');
+    },
+
+    onEndPickerClose() {
+      /**
+       * Emitted when the end date datepicker is hidden.
+       *
+       * @event end-picker-close
+       * */
+      this.$emit('end-picker-close');
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-daterange-picker"},[_c('div',{class:_vm.startPickerClass},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.fromLabel))]),_vm._v(" "),_c('gl-datepicker',{attrs:{"min-date":_vm.defaultMinDate,"max-date":_vm.fromCalendarMaxDate,"start-range":_vm.defaultMinDate,"end-range":_vm.fromCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.startPickerTarget,"container":_vm.startPickerContainer},on:{"input":_vm.onStartDateSelected,"open":_vm.onStartPickerOpen,"close":_vm.onStartPickerClose},model:{value:(_vm.startDate),callback:function ($$v) {_vm.startDate=$$v;},expression:"startDate"}})],1),_vm._v(" "),_c('div',{class:_vm.endPickerClass},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.toLabel))]),_vm._v(" "),_c('gl-datepicker',{key:_vm.numericStartTime,attrs:{"min-date":_vm.toCalendarMinDate,"max-date":_vm.toCalendarMaxDate,"start-range":_vm.toCalendarMinDate,"end-range":_vm.toCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.endPickerTarget,"container":_vm.endPickerContainer,"start-opened":_vm.openToCalendar,"default-date":_vm.toCalendarDefaultDate},on:{"input":_vm.onEndDateSelected,"open":_vm.onEndPickerOpen,"close":_vm.onEndPickerClose},model:{value:(_vm.endDate),callback:function ($$v) {_vm.endDate=$$v;},expression:"endDate"}})],1),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-direction-row gl-align-items-center gl-text-gray-500 gl-ml-2",class:_vm.dateRangeIndicatorClass,attrs:{"data-testid":"daterange-picker-indicator"}},[_vm._t("default",null,null,{ daysSelected: _vm.numberOfDays }),_vm._v(" "),(_vm.tooltip)?_c('gl-icon',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-ml-2",attrs:{"name":"information-o","title":_vm.tooltip,"size":16}}):_vm._e()],2)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/drawer/drawer.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/drawer/drawer.documentation.js
new file mode 100644
index 00000000000000..352de67780c80a
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/drawer/drawer.documentation.js
@@ -0,0 +1,11 @@
+import examples from './examples';
+
+var description = "# Drawer\n\n<!-- STORY -->\n\n## Usage\n\nThe drawer is used to show more information about a certain resource in the UI and potentially\nhandle actions on the information.\n\n### By default\n\n```html\n<gl-drawer :open=\"open\" @close=\"close\">\n  <template #header>Your Title</template>\n  <template>\n   ...children\n  </template>\n</gl-drawer>\n```\n\n- `v-bind:open` will be a boolean you will pass to `gl-drawer` and `@close` is a listener that will\nbe a function that will toggle open to `false`.\n";
+
+var drawer_documentation = {
+  followsDesignSystem: false,
+  description,
+  examples
+};
+
+export default drawer_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/drawer/drawer.js b/app/assets/javascripts/gitlab-ui/dist/components/base/drawer/drawer.js
new file mode 100644
index 00000000000000..7d56c3ecb364fb
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/drawer/drawer.js
@@ -0,0 +1,122 @@
+import isEmpty from 'lodash/isEmpty';
+import { maxZIndex, drawerVariants } from '../../../utils/constants';
+import GlButton from '../button/button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlButton
+  },
+  props: {
+    open: {
+      type: Boolean,
+      required: true
+    },
+    headerHeight: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    zIndex: {
+      type: Number,
+      required: false,
+      default: maxZIndex
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: drawerVariants.default,
+      validator: value => Object.keys(drawerVariants).includes(value)
+    }
+  },
+  computed: {
+    positionFromTop() {
+      return !isEmpty(this.headerHeight) ? this.headerHeight : 0;
+    },
+
+    drawerStyles() {
+      const styles = {
+        top: this.positionFromTop,
+        zIndex: this.zIndex
+      };
+
+      if (this.positionFromTop) {
+        styles.maxHeight = `calc(100vh - ${this.positionFromTop})`;
+      }
+
+      return styles;
+    },
+
+    variantClass() {
+      return `gl-drawer-${this.variant}`;
+    }
+
+  },
+  watch: {
+    open: {
+      immediate: true,
+
+      handler(open) {
+        if (open) {
+          document.addEventListener('keydown', this.handleEscape);
+        } else {
+          document.removeEventListener('keydown', this.handleEscape);
+        }
+      }
+
+    }
+  },
+
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleEscape);
+  },
+
+  methods: {
+    handleEscape(e) {
+      const ESC = 27;
+
+      if (this.open && e.keyCode === ESC) {
+        this.$emit('close');
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":"gl-drawer"}},[(_vm.open)?_c('aside',{staticClass:"gl-drawer",class:_vm.variantClass,style:(_vm.drawerStyles)},[_c('div',{staticClass:"gl-drawer-header"},[_c('span',{staticClass:"gl-drawer-title"},[_vm._t("title"),_vm._v(" "),_c('gl-button',{staticClass:"gl-drawer-close-button",attrs:{"category":"tertiary","size":"small","icon":"close","aria-label":"Close drawer"},on:{"click":function($event){return _vm.$emit('close')}}})],2),_vm._v(" "),_vm._t("header")],2),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body"},[_vm._t("default")],2)]):_vm._e()])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/drawer/examples/drawer.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/drawer/examples/drawer.basic.example.js
new file mode 100644
index 00000000000000..2cebb99590dbd6
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/drawer/examples/drawer.basic.example.js
@@ -0,0 +1,58 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      drawerOpened: false
+    };
+  },
+
+  methods: {
+    toggle() {
+      this.drawerOpened = !this.drawerOpened;
+    },
+
+    close() {
+      this.drawerOpened = false;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-button',{on:{"click":_vm.toggle}},[_vm._v("Toggle drawer")]),_vm._v(" "),_c('gl-drawer',{attrs:{"open":_vm.drawerOpened},on:{"close":_vm.close},scopedSlots:_vm._u([{key:"header",fn:function(){return [_vm._v("Your Title")]},proxy:true}])},[_vm._v(" "),_c('div',[_c('p',[_vm._v("First Body Item")])])])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/drawer/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/drawer/examples/index.js
new file mode 100644
index 00000000000000..ba2d2af5402cec
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/drawer/examples/index.js
@@ -0,0 +1,13 @@
+import Drawer from './drawer.basic.example';
+
+var index = [{
+  name: 'Basic',
+  items: [{
+    id: 'drawer',
+    name: 'Default Drawer',
+    description: 'Drawer',
+    component: Drawer
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown.documentation.js
new file mode 100644
index 00000000000000..e86b3669176cf3
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown.documentation.js
@@ -0,0 +1,12 @@
+import examples from './examples';
+
+var description = "## Usage\n\nThe dropdown component offers a user multiple items or actions to choose from which are initially\ncollapsed behind a button.\n\n### Icon-only dropdown\n\nIcon-only dropdowns must have an accessible name.\nYou can provide this with the combination of `text` and `text-sr-only` props.\n\nOptionally, you can use `no-caret` to remove the caret and `category=\"tertiary\"` to remove the border.\n\n```html\n<gl-dropdown\n  icon=\"ellipsis_v\"\n  text=\"More actions\"\n  :text-sr-only=\"true\"\n  category=\"tertiary\"\n  no-caret\n>\n```\n\n### Button Content\n\nThere are 3 ways to set the dropdown button's content.\n\n1. Use the `text` attribute. This will display the text with the loading spinner (shown with the\n`loading` attribute), icon (if provided by the `icon` attribute), and dropdown caret:\n\n    ```html\n    <gl-dropdown text=\"Button text\">\n    ```\n\n1. Use the `button-text` template. This allows custom content for the button's text, but keeps the\nloading spinner, icon, and dropdown caret:\n\n    ```html\n    <gl-dropdown>\n      <template #button-text>\n        <!-- Loading spinner shown here -->\n        <!-- Icon shown here -->\n        Custom <strong>Content</strong> with <em>HTML</em> via Slot\n        <gl-truncate position=\"middle\" text=\"Truncated button text\"/>\n        <!-- Dropdown arrow shown here -->\n      </template>\n    </gl-dropdown>\n    ```\n\n1. Use the `button-content` template. This will replace everything in the button with the template:\n\n    ```html\n    <gl-dropdown>\n      <template #button-content>\n        Custom <strong>Content</strong> with <em>HTML</em> via Slot\n      </template>\n    </gl-dropdown>\n    ```\n";
+
+var dropdown_documentation = {
+  description,
+  bootstrapComponent: 'b-dropdown',
+  examples,
+  followsDesignSystem: false
+};
+
+export default dropdown_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown.js
new file mode 100644
index 00000000000000..fd6fbaf41296f4
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown.js
@@ -0,0 +1,244 @@
+import { BDropdown } from 'bootstrap-vue/esm/index.js';
+import { selectAll, isVisible } from 'bootstrap-vue/esm/utils/dom';
+import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions } from '../../../utils/constants';
+import { ButtonMixin } from '../../mixins/button_mixin';
+import GlButton from '../button/button';
+import GlIcon from '../icon/icon';
+import GlLoadingIcon from '../loading_icon/loading_icon';
+import GlDropdownDivider from './dropdown_divider';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+function filterVisible(els) {
+  return (els || []).filter(isVisible);
+}
+
+const Selector = {
+  ITEM_SELECTOR: '.dropdown-item:not(.disabled):not([disabled]),.form-control:not(.disabled):not([disabled])'
+}; // see https://gitlab.com/gitlab-org/gitlab-ui/merge_requests/130#note_126406721
+
+const ExtendedBDropdown = {
+  extends: BDropdown,
+  methods: {
+    getItems() {
+      return filterVisible(selectAll(Selector.ITEM_SELECTOR, this.$refs.menu));
+    }
+
+  }
+};
+var script = {
+  components: {
+    BDropdown: ExtendedBDropdown,
+    GlButton,
+    GlDropdownDivider,
+    GlIcon,
+    GlLoadingIcon
+  },
+  mixins: [ButtonMixin],
+  props: {
+    headerText: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    hideHeaderBorder: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    showClearAll: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    clearAllText: {
+      type: String,
+      required: false,
+      default: 'Clear all'
+    },
+    clearAllTextClass: {
+      type: String,
+      required: false,
+      default: 'gl-px-5'
+    },
+    text: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    showHighlightedItemsTitle: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    highlightedItemsTitle: {
+      type: String,
+      required: false,
+      default: 'Selected'
+    },
+    highlightedItemsTitleClass: {
+      type: String,
+      required: false,
+      default: 'gl-px-5'
+    },
+    textSrOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    split: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    category: {
+      type: String,
+      required: false,
+      default: buttonCategoryOptions.primary,
+      validator: value => Object.keys(buttonCategoryOptions).includes(value)
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: dropdownVariantOptions.default,
+      validator: value => Object.keys(dropdownVariantOptions).includes(value)
+    },
+    size: {
+      type: String,
+      required: false,
+      default: buttonSizeOptions.medium,
+      validator: value => Object.keys(buttonSizeOptions).includes(value)
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    block: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    toggleClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: null
+    },
+    right: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    renderCaret() {
+      return !this.split;
+    },
+
+    isIconOnly() {
+      var _this$text;
+
+      return Boolean(this.icon && (!((_this$text = this.text) !== null && _this$text !== void 0 && _this$text.length) || this.textSrOnly));
+    },
+
+    isIconWithText() {
+      var _this$text2;
+
+      return Boolean(this.icon && ((_this$text2 = this.text) === null || _this$text2 === void 0 ? void 0 : _this$text2.length) && !this.textSrOnly);
+    },
+
+    toggleButtonClasses() {
+      return [this.toggleClass, {
+        'gl-button': true,
+        'gl-dropdown-toggle': true,
+        [`btn-${this.variant}-secondary`]: this.category === buttonCategoryOptions.secondary || this.category === buttonCategoryOptions.tertiary && this.split,
+        [`btn-${this.variant}-tertiary`]: this.category === buttonCategoryOptions.tertiary && !this.split,
+        'dropdown-icon-only': this.isIconOnly,
+        'dropdown-icon-text': this.isIconWithText
+      }];
+    },
+
+    splitButtonClasses() {
+      return [this.toggleClass, {
+        'gl-button': true,
+        'split-content-button': Boolean(this.text),
+        'icon-split-content-button': Boolean(this.icon),
+        [`btn-${this.variant}-secondary`]: this.category === buttonCategoryOptions.secondary || this.category === buttonCategoryOptions.tertiary
+      }];
+    },
+
+    buttonText() {
+      return this.split && this.icon ? null : this.text;
+    },
+
+    hasHighlightedItemsContent() {
+      return this.hasSlotContents('highlighted-items');
+    },
+
+    hasHighlightedItemsOrClearAll() {
+      return this.hasHighlightedItemsContent && this.showHighlightedItemsTitle || this.showClearAll;
+    }
+
+  },
+  methods: {
+    hasSlotContents(slotName) {
+      return Boolean(this.$slots[slotName]);
+    },
+
+    show() {
+      this.$refs.dropdown.show(...arguments);
+    },
+
+    hide() {
+      this.$refs.dropdown.hide(...arguments);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown',_vm._g(_vm._b({ref:"dropdown",staticClass:"gl-new-dropdown",attrs:{"split":_vm.split,"variant":_vm.variant,"size":_vm.buttonSize,"toggle-class":[_vm.toggleButtonClasses],"split-class":_vm.splitButtonClasses,"block":_vm.block,"disabled":_vm.disabled || _vm.loading,"right":_vm.right},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_vm._t("button-content",[(_vm.loading)?_c('gl-loading-icon',{staticClass:"gl-mr-2"}):_vm._e(),_vm._v(" "),(_vm.icon)?_c('gl-icon',{staticClass:"dropdown-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._t("button-text",[_vm._v(_vm._s(_vm.buttonText))])],2),_vm._v(" "),(_vm.renderCaret)?_c('gl-icon',{staticClass:"gl-button-icon dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()])]},proxy:true}],null,true)},'b-dropdown',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-new-dropdown-inner"},[(_vm.hasSlotContents('header') || _vm.headerText)?_c('div',{staticClass:"gl-new-dropdown-header",class:{ 'gl-border-b-0!': _vm.hideHeaderBorder }},[(_vm.headerText)?_c('p',{staticClass:"gl-new-dropdown-header-top"},[_vm._v("\n        "+_vm._s(_vm.headerText)+"\n      ")]):_vm._e(),_vm._v(" "),_vm._t("header")],2):_vm._e(),_vm._v(" "),(_vm.hasHighlightedItemsOrClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-align-items-center"},[(_vm.hasHighlightedItemsContent && _vm.showHighlightedItemsTitle)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-flex-start",class:_vm.highlightedItemsTitleClass},[_c('span',{staticClass:"gl-font-weight-bold",attrs:{"data-testid":"highlighted-items-title"}},[_vm._v(_vm._s(_vm.highlightedItemsTitle))])]):_vm._e(),_vm._v(" "),(_vm.showClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-end",class:_vm.clearAllTextClass},[_c('gl-button',{attrs:{"size":"small","category":"tertiary","variant":"link","data-testid":"clear-all-button"},on:{"click":function($event){return _vm.$emit('clear-all', $event)}}},[_vm._v(_vm._s(_vm.clearAllText))])],1):_vm._e()]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-contents"},[(_vm.hasHighlightedItemsContent)?_c('div',{staticClass:"gl-overflow-visible",attrs:{"data-testid":"highlighted-items"}},[_vm._t("highlighted-items"),_vm._v(" "),_c('gl-dropdown-divider')],2):_vm._e(),_vm._v(" "),_vm._t("default")],2),_vm._v(" "),(_vm.hasSlotContents('footer'))?_c('div',{staticClass:"gl-new-dropdown-footer"},[_vm._t("footer")],2):_vm._e()])])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_divider.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_divider.documentation.js
new file mode 100644
index 00000000000000..ffdb5f6f3487ee
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_divider.documentation.js
@@ -0,0 +1,8 @@
+var description = "# Dropdown Divider\n\n<!-- STORY -->\n\n## Usage\n\nThe dropdown divider component is meant to be used for visual dividers inside a dropdown component.\n";
+
+var dropdown_divider_documentation = {
+  description,
+  bootstrapComponent: 'b-dropdown'
+};
+
+export default dropdown_divider_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_divider.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_divider.js
new file mode 100644
index 00000000000000..17f1a35c978842
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_divider.js
@@ -0,0 +1,47 @@
+import { BDropdownDivider } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BDropdownDivider
+  },
+  inheritAttrs: false
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown-divider',_vm._g(_vm._b({staticClass:"gl-new-dropdown-divider"},'b-dropdown-divider',_vm.$attrs,false),_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_form.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_form.documentation.js
new file mode 100644
index 00000000000000..6f27f9e7a468f4
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_form.documentation.js
@@ -0,0 +1,17 @@
+import examples from './examples';
+
+var dropdown_form = "Unlike `b-dropdown-form`, we do _not_ add any additional padding with the `gl-dropdown-form` component.\nThis is to prevent double padding with `gl-dropdown-item` and similar components, so in most cases\nshouldn't be needed. To add padding, either add a padding utility class to your form, or an inner\nelement with some padding.\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': dropdown_form
+});
+
+var dropdown_form_documentation = {
+  description,
+  examples,
+  bootstrapComponent: 'b-dropdown-form',
+  propsInfo: {}
+};
+
+export default dropdown_form_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_form.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_form.js
new file mode 100644
index 00000000000000..96640ff22bc40d
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_form.js
@@ -0,0 +1,47 @@
+import { BDropdownForm } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BDropdownForm
+  },
+  inheritAttrs: false
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown-form',_vm._g(_vm._b({attrs:{"form-class":"gl-p-0"}},'b-dropdown-form',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_item.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_item.documentation.js
new file mode 100644
index 00000000000000..afd229753e715f
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_item.documentation.js
@@ -0,0 +1,8 @@
+var description = "# Dropdown Item\n\n<!-- STORY -->\n\n## Usage\n\nThe dropdown item component is meant to be used for clickable entries inside a dropdown component.\nIf you provide the `href` attribute, it renders a link instead of a button.\n";
+
+var dropdown_item_documentation = {
+  description,
+  bootstrapComponent: 'b-dropdown'
+};
+
+export default dropdown_item_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_item.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_item.js
new file mode 100644
index 00000000000000..d8e6a70a804659
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_item.js
@@ -0,0 +1,136 @@
+import { BDropdownItem, BDropdownItemButton } from 'bootstrap-vue/esm/index.js';
+import { variantCssColorMap } from '../../../utils/constants';
+import GlAvatar from '../avatar/avatar';
+import GlButton from '../button/button';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlIcon,
+    GlAvatar,
+    GlButton
+  },
+  inheritAttrs: false,
+  props: {
+    avatarUrl: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    iconColor: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    iconName: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    iconRightAriaLabel: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    iconRightName: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    isChecked: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isCheckItem: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isCheckCentered: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    secondaryText: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  computed: {
+    bootstrapComponent() {
+      const {
+        href,
+        to
+      } = this.$attrs; // Support 'href' and Vue Router's 'to'
+
+      return href || to ? BDropdownItem : BDropdownItemButton;
+    },
+
+    iconColorCss() {
+      return variantCssColorMap[this.iconColor] || 'gl-text-gray-700';
+    },
+
+    shouldShowCheckIcon() {
+      return this.isChecked || this.isCheckItem;
+    },
+
+    checkedClasses() {
+      if (this.isCheckCentered) {
+        return '';
+      }
+
+      return 'gl-mt-3 gl-align-self-start';
+    }
+
+  },
+  methods: {
+    handleClickIconRight() {
+      this.$emit('click-icon-right');
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.bootstrapComponent,_vm._g(_vm._b({tag:"component",staticClass:"gl-new-dropdown-item"},'component',_vm.$attrs,false),_vm.$listeners),[(_vm.shouldShowCheckIcon)?_c('gl-icon',{class:[
+      'gl-new-dropdown-item-check-icon',
+      { 'gl-visibility-hidden': !_vm.isChecked },
+      _vm.checkedClasses ],attrs:{"name":"mobile-issue-close","data-testid":"dropdown-item-checkbox"}}):_vm._e(),_vm._v(" "),(_vm.iconName)?_c('gl-icon',{class:['gl-new-dropdown-item-icon', _vm.iconColorCss],attrs:{"name":_vm.iconName}}):_vm._e(),_vm._v(" "),(_vm.avatarUrl)?_c('gl-avatar',{attrs:{"size":32,"src":_vm.avatarUrl}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_c('p',{staticClass:"gl-new-dropdown-item-text-primary"},[_vm._t("default")],2),_vm._v(" "),(_vm.secondaryText)?_c('p',{staticClass:"gl-new-dropdown-item-text-secondary"},[_vm._v(_vm._s(_vm.secondaryText))]):_vm._e()]),_vm._v(" "),(_vm.iconRightName)?_c('gl-button',{attrs:{"size":"small","icon":_vm.iconRightName,"aria-label":_vm.iconRightAriaLabel || _vm.iconRightName},on:{"click":function($event){$event.stopPropagation();$event.preventDefault();return _vm.handleClickIconRight($event)}}}):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_section_header.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_section_header.documentation.js
new file mode 100644
index 00000000000000..abd7b276c65a4e
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_section_header.documentation.js
@@ -0,0 +1,8 @@
+var description = "# Dropdown Section Header\n\n<!-- STORY -->\n\n## Usage\n\nThe dropdown section header component is meant to be used for header entries inside a dropdown component.\n";
+
+var dropdown_section_header_documentation = {
+  description,
+  bootstrapComponent: 'b-dropdown'
+};
+
+export default dropdown_section_header_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_section_header.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_section_header.js
new file mode 100644
index 00000000000000..792ae7c82cc77f
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_section_header.js
@@ -0,0 +1,47 @@
+import { BDropdownHeader } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BDropdownHeader
+  },
+  inheritAttrs: false
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown-header',_vm._g(_vm._b({staticClass:"gl-new-dropdown-section-header"},'b-dropdown-header',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_text.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_text.documentation.js
new file mode 100644
index 00000000000000..9b1f34bdb6b320
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_text.documentation.js
@@ -0,0 +1,8 @@
+var description = "# Dropdown Text\n\n<!-- STORY -->\n\n## Usage\n\nThe dropdown text component is meant to be used for text entries inside a dropdown component.\n";
+
+var dropdown_text_documentation = {
+  description,
+  bootstrapComponent: 'b-dropdown'
+};
+
+export default dropdown_text_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_text.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_text.js
new file mode 100644
index 00000000000000..25dcf16a5591c0
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/dropdown_text.js
@@ -0,0 +1,47 @@
+import { BDropdownText } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BDropdownText
+  },
+  inheritAttrs: false
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown-text',_vm._g(_vm._b({staticClass:"gl-new-dropdown-text"},'b-dropdown-text',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.default.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.default.example.js
new file mode 100644
index 00000000000000..edfb4eb3eee83b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.default.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Last item")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.links.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.links.example.js
new file mode 100644
index 00000000000000..0f8960d700a039
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.links.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',{attrs:{"href":"https://about.gitlab.com/"}},[_vm._v("First link")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"href":"https://about.gitlab.com/"}},[_vm._v("Second link")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"href":"https://about.gitlab.com/"}},[_vm._v("Last link")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_avatar_and_secondary_text.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_avatar_and_secondary_text.example.js
new file mode 100644
index 00000000000000..952f2fe1fa179b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_avatar_and_secondary_text.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',{attrs:{"avatar-url":"./img/avatar.png","secondary-text":"@sytses"}},[_vm._v("\n    Sid Sijbrandij\n  ")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_checked_items.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_checked_items.example.js
new file mode 100644
index 00000000000000..e9eab3afe0a786
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_checked_items.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',{attrs:{"is-check-item":true,"is-checked":true}},[_vm._v("Checked item")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"is-check-item":true}},[_vm._v("Unchecked item")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_clear_all.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_clear_all.example.js
new file mode 100644
index 00000000000000..7e60f944dc2a22
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_clear_all.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown","show-clear-all":true,"clear-all-text":'Clear all'}},[_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Last item")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_divider.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_divider.example.js
new file mode 100644
index 00000000000000..f3364506d6c3a3
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_divider.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")]),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Third item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Fourth item")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_form.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_form.example.js
new file mode 100644
index 00000000000000..b8a993e8563705
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_form.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown","header-text":"Dropdown header"}},[_c('gl-dropdown-form',[_c('div',{staticClass:"gl-px-4"},[_c('gl-button',[_vm._v("First item")]),_vm._v(" "),_c('gl-button',[_vm._v("Second item")])],1)])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_header.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_header.example.js
new file mode 100644
index 00000000000000..00cf1c74ebdbae
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_header.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown","header-text":"Dropdown header"}},[_c('gl-dropdown-section-header',[_vm._v("Section header title")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_highlighted_items.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_highlighted_items.example.js
new file mode 100644
index 00000000000000..220fdea441bd01
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_highlighted_items.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"},scopedSlots:_vm._u([{key:"highlighted-items",fn:function(){return [_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")])]},proxy:true}])},[_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Last item")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_icons.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_icons.example.js
new file mode 100644
index 00000000000000..68defd13c61a54
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_icons.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',{attrs:{"icon-color":"info","icon-name":"status_running","icon-right-name":"retry","icon-right-aria-label":"Retry"}},[_vm._v("\n    Status running\n  ")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"icon-color":"success","icon-name":"status_success","icon-right-name":"cancel","icon-right-aria-label":"Cancel"}},[_vm._v("\n    Status success\n  ")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"icon-color":"warning","icon-name":"status_warning","icon-right-name":"cancel","icon-right-aria-label":"Cancel"}},[_vm._v("\n    Status warning\n  ")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"icon-color":"danger","icon-name":"status_failed","icon-right-name":"cancel","icon-right-aria-label":"Cancel"}},[_vm._v("\n    Status failed\n  ")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"icon-name":"status_manual","icon-right-name":"cancel","icon-right-aria-label":"Cancel"}},[_vm._v("\n    Status manual\n  ")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_right_align.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_right_align.example.js
new file mode 100644
index 00000000000000..82df012206dbae
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_right_align.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Right-aligned dropdown","right":""}},[_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Last item")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_search.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_search.example.js
new file mode 100644
index 00000000000000..634cd65f4e81cd
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_search.example.js
@@ -0,0 +1,67 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      searchTerm: '',
+      tagNames: []
+    };
+  },
+
+  computed: {
+    filteredTagNames() {
+      return this.tagNames.filter(tagName => tagName.includes(this.searchTerm.toLowerCase()));
+    },
+
+    filteredTagNamesLength() {
+      return this.filteredTagNames.length === 0;
+    }
+
+  },
+
+  mounted() {
+    const tagNames = new Set();
+    const elements = document.querySelectorAll('*');
+    elements.forEach(element => tagNames.add(element.tagName.toLowerCase()));
+    this.tagNames = Array.from(tagNames).sort();
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Select HTML tag","header-text":"Header"},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('gl-search-box-by-type',{model:{value:(_vm.searchTerm),callback:function ($$v) {_vm.searchTerm=(typeof $$v === 'string'? $$v.trim(): $$v);},expression:"searchTerm"}})]},proxy:true}])},[_vm._v(" "),_vm._l((_vm.filteredTagNames),function(tagName){return _c('gl-dropdown-item',{key:tagName},[_vm._v("\n    "+_vm._s(tagName)+"\n  ")])}),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.filteredTagNamesLength),expression:"filteredTagNamesLength"}],staticClass:"text-secondary p-2"},[_vm._v("Nothing found…")])],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_section_headers.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_section_headers.example.js
new file mode 100644
index 00000000000000..96b09dbcf46b89
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/dropdown.with_section_headers.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-section-header',[_vm._v("First group")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")]),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),_c('gl-dropdown-section-header',[_vm._v("Second group")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Last item")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/index.js
new file mode 100644
index 00000000000000..4c166d95984742
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/dropdown/examples/index.js
@@ -0,0 +1,85 @@
+import DropdownDefaultExample from './dropdown.default.example';
+import DropdownLinksExample from './dropdown.links.example';
+import DropdownWithAvatarAndSecondaryText from './dropdown.with_avatar_and_secondary_text.example';
+import DropdownWithCheckedItemsExample from './dropdown.with_checked_items.example';
+import DropdownClearAllExample from './dropdown.with_clear_all.example';
+import DropdownWithDividerExample from './dropdown.with_divider.example';
+import DropdownWithFormExample from './dropdown.with_form.example';
+import DropdownWithHeaderExample from './dropdown.with_header.example';
+import DropdownWithHighlightedItemsExample from './dropdown.with_highlighted_items.example';
+import DropdownWithIcons from './dropdown.with_icons.example';
+import DropdownWithRightAlignExample from './dropdown.with_right_align.example';
+import DropdownWithSearchExample from './dropdown.with_search.example';
+import DropdownWithSectionHeadersExample from './dropdown.with_section_headers.example';
+
+var index = [{
+  name: 'Dropdown',
+  items: [{
+    id: 'new-dropdown-default',
+    name: 'Default',
+    description: 'Default Dropdown',
+    component: DropdownDefaultExample
+  }, {
+    id: 'new-dropdown-links',
+    name: 'With Links',
+    description: 'Dropdown with links as items',
+    component: DropdownLinksExample
+  }, {
+    id: 'new-dropdown-with-divider',
+    name: 'With Divider',
+    description: 'Dropdown with divider',
+    component: DropdownWithDividerExample
+  }, {
+    id: 'new-dropdown-with-header',
+    name: 'With Header',
+    description: 'Dropdown with section header',
+    component: DropdownWithHeaderExample
+  }, {
+    id: 'new-dropdown-with-highlighted-items',
+    name: 'With Highlighted items',
+    description: 'Dropdown with highlighted items',
+    component: DropdownWithHighlightedItemsExample
+  }, {
+    id: 'new-dropdown-with-section-headers',
+    name: 'With Section Headers',
+    description: 'Dropdown with section headers',
+    component: DropdownWithSectionHeadersExample
+  }, {
+    id: 'new-dropdown-with-right-align',
+    name: 'With Right Alignment',
+    description: 'Dropdown aligned to the right side',
+    component: DropdownWithRightAlignExample
+  }, {
+    id: 'new-dropdown-with-search',
+    name: 'With Search',
+    description: 'Dropdown with search field',
+    component: DropdownWithSearchExample
+  }, {
+    id: 'new-dropdown-with-checked-items',
+    name: 'With Checked Items',
+    description: 'Dropdown with checked items',
+    component: DropdownWithCheckedItemsExample
+  }, {
+    id: 'new-dropdown-with-avatar-and-secondary-text',
+    name: 'With Avatar and Secondary Text',
+    description: 'Dropdown with avatar and secondary text',
+    component: DropdownWithAvatarAndSecondaryText
+  }, {
+    id: 'new-dropdown-with-icons',
+    name: 'With Icons',
+    description: 'Dropdown with icons',
+    component: DropdownWithIcons
+  }, {
+    id: 'new-dropdown-with-form',
+    name: 'With Form',
+    description: 'Dropdown with form',
+    component: DropdownWithFormExample
+  }, {
+    id: 'new-dropdown-with-clear-all',
+    name: 'With Clear all',
+    description: 'Dropdown with clear all',
+    component: DropdownClearAllExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/common_story_options.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/common_story_options.js
new file mode 100644
index 00000000000000..5cf4d9d417df37
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/common_story_options.js
@@ -0,0 +1,14 @@
+const noop = () => {};
+/**
+ * A mocked provide option for components that expect to be descendants of
+ * GlFilteredSearch, to be used in their stories.
+ */
+
+
+const provide = () => ({
+  portalName: 'portal',
+  alignSuggestions: noop,
+  suggestionsListClass: noop
+});
+
+export { provide };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.default.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.default.example.js
new file mode 100644
index 00000000000000..ec74e629179b7a
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.default.example.js
@@ -0,0 +1,422 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const fakeUsers = [{
+  id: 1,
+  name: 'User Alpha',
+  username: 'alpha'
+}, {
+  id: 2,
+  name: 'User Beta',
+  username: 'beta'
+}, {
+  id: 3,
+  name: 'User Gamma',
+  username: 'gamma'
+}, {
+  id: 4,
+  name: 'User Delta',
+  username: 'delta'
+}, {
+  id: 5,
+  name: 'User Epsilon',
+  username: 'epsilon'
+}];
+const fakeMilestones = [{
+  id: 1,
+  title: '12.7',
+  name: '%12.7'
+}, {
+  id: 2,
+  title: '12.8',
+  name: '%12.8'
+}, {
+  id: 3,
+  title: '12.9',
+  name: '%12.9'
+}, {
+  id: 4,
+  title: '12.10',
+  name: '%12.10'
+}, {
+  id: 5,
+  title: 'Backlog',
+  name: 'Backlog'
+}];
+const fakeLabels = [{
+  id: 1,
+  title: 'Bug',
+  color: '#D9534F',
+  text_color: '#FFFFFF'
+}, {
+  id: 2,
+  title: 'Enhancement',
+  color: '#F0AD4E',
+  text_color: '#FFFFFF'
+}, {
+  id: 3,
+  title: 'Backlog',
+  color: '#cccccc',
+  text_color: '#333333'
+}, {
+  id: 4,
+  title: 'Feature',
+  color: '#A8D695',
+  text_color: '#333333'
+}, {
+  id: 5,
+  title: 'Documentation',
+  color: '#5CB85C',
+  text_color: '#FFFFFF'
+}];
+const UserToken = {
+  props: ['value', 'active'],
+  inheritAttrs: false,
+
+  data() {
+    return {
+      loadingView: false,
+      loadingSuggestions: false,
+      users: [],
+      activeUser: null
+    };
+  },
+
+  methods: {
+    loadView() {
+      this.loadingView = true;
+      setTimeout(() => {
+        this.loadingView = false;
+        this.activeUser = fakeUsers.find(u => u.username === this.value.data);
+      }, 1000);
+    },
+
+    loadSuggestions() {
+      this.loadingSuggestions = true;
+      setTimeout(() => {
+        this.loadingSuggestions = false;
+        this.users = fakeUsers;
+      }, 2000);
+    }
+
+  },
+  watch: {
+    // eslint-disable-next-line func-names
+    'value.data': function () {
+      if (this.active) {
+        this.loadSuggestions();
+      }
+    },
+    active: {
+      immediate: true,
+
+      handler(newValue) {
+        if (!newValue) {
+          this.loadView();
+        } else {
+          this.loadSuggestions();
+        }
+      }
+
+    }
+  },
+  template: `
+    <gl-filtered-search-token
+      v-bind="{ ...this.$props, ...this.$attrs }"
+      v-on="$listeners"
+    >
+      <template #view="{ inputValue }">
+        <gl-loading-icon size="sm" v-if="loadingView" class="gl-mr-2" />
+        <gl-avatar :size="16" :entity-name="inputValue" shape="circle" class="gl-mr-2" v-else />
+        {{ activeUser ? activeUser.name : inputValue }}
+      </template>
+      <template #suggestions>
+        <template v-if="loadingSuggestions">
+          <gl-loading-icon />
+        </template>
+        <template v-else>
+        <gl-filtered-search-suggestion :key="user.id" v-for="user in users" :value="user.username">
+          <div class="gl-display-flex">
+            <gl-avatar :size="32" :entity-name="user.username" />
+            <div>
+              <p class="gl-m-0">{{ user.name }}</p>
+              <p class="gl-m-0">@{{ user.username }}</p>
+            </div>
+          </div>
+        </gl-filtered-search-suggestion>
+        </template>
+      </template>
+    </gl-filtered-search-token>
+  `
+};
+const MilestoneToken = {
+  props: ['value', 'active'],
+  inheritAttrs: false,
+
+  data() {
+    return {
+      loadingView: false,
+      loadingSuggestions: false,
+      milestones: []
+    };
+  },
+
+  methods: {
+    loadSuggestions() {
+      this.loadingSuggestions = true;
+      setTimeout(() => {
+        this.loadingSuggestions = false;
+        this.milestones = fakeMilestones;
+      }, 2000);
+    }
+
+  },
+  watch: {
+    // eslint-disable-next-line func-names
+    'value.data': function () {
+      if (this.active) {
+        this.loadSuggestions();
+      }
+    },
+    active: {
+      immediate: true,
+
+      handler(newValue) {
+        if (newValue) {
+          this.loadSuggestions();
+        }
+      }
+
+    }
+  },
+  template: `
+    <gl-filtered-search-token
+      v-bind="{ ...this.$props, ...this.$attrs }"
+      v-on="$listeners"
+    >
+      <template #suggestions>
+        <gl-filtered-search-suggestion value="None">None</gl-filtered-search-suggestion>
+        <gl-filtered-search-suggestion value="Any">Any</gl-filtered-search-suggestion>
+        <gl-filtered-search-suggestion value="Upcoming">Upcoming</gl-filtered-search-suggestion>
+        <gl-filtered-search-suggestion value="Started">Started</gl-filtered-search-suggestion>
+        <gl-dropdown-divider v-if="loadingSuggestions || milestones.length" />
+        <template v-if="loadingSuggestions">
+          <gl-loading-icon />
+        </template>
+        <template v-else>
+        <gl-filtered-search-suggestion :key="milestone.id" v-for="milestone in milestones" :value="milestone.name">
+        {{ milestone.title }}
+        </gl-filtered-search-suggestion>
+        </template>
+      </template>
+    </gl-filtered-search-token>
+  `
+};
+const LabelToken = {
+  props: ['value', 'active'],
+  inheritAttrs: false,
+
+  data() {
+    return {
+      loadingView: false,
+      loadingSuggestions: false,
+      labels: [],
+      activeLabel: null
+    };
+  },
+
+  computed: {
+    currentValue() {
+      return this.value.data.toLowerCase();
+    },
+
+    containerStyle() {
+      if (this.activeLabel) {
+        const {
+          color,
+          text_color
+        } = this.activeLabel;
+        return {
+          backgroundColor: color,
+          color: text_color
+        };
+      }
+
+      return {};
+    }
+
+  },
+  methods: {
+    loadView() {
+      this.loadingView = true;
+      setTimeout(() => {
+        this.loadingView = false;
+        this.activeLabel = fakeLabels.find(l => l.title === this.value.data);
+      }, 100);
+    },
+
+    loadSuggestions() {
+      this.loadingSuggestions = true;
+      setTimeout(() => {
+        this.loadingSuggestions = false;
+        this.labels = fakeLabels;
+      }, 2000);
+    }
+
+  },
+  watch: {
+    // eslint-disable-next-line func-names
+    'value.data': function () {
+      if (this.active) {
+        this.loadSuggestions();
+      }
+    },
+    active: {
+      immediate: true,
+
+      handler(newValue) {
+        if (!newValue) {
+          this.loadView();
+        } else {
+          this.loadSuggestions();
+        }
+      }
+
+    }
+  },
+  template: `
+    <gl-filtered-search-token
+      v-bind="{ ...this.$props, ...this.$attrs }"
+      v-on="$listeners"
+    >
+      <template #view-token="{ inputValue, cssClasses, listeners }">
+        <gl-token variant="search-value" :class="cssClasses" :style="containerStyle" v-on="listeners">
+          {{ activeLabel ? activeLabel.title : inputValue }}
+        </gl-token>
+      </template>
+      <template #suggestions>
+        <gl-filtered-search-suggestion value="None">None</gl-filtered-search-suggestion>
+        <gl-filtered-search-suggestion value="Any">Any</gl-filtered-search-suggestion>
+        <gl-dropdown-divider v-if="loadingSuggestions || labels.length" />
+        <template v-if="loadingSuggestions">
+          <gl-loading-icon />
+        </template>
+        <template v-else>
+        <gl-filtered-search-suggestion :key="label.id" v-for="label in labels" :value="label.title">
+          <div class="d-flex">
+            <span
+              :style="{ backgroundColor: label.color, height: '16px', width: '16px' }"
+              class="d-inline-block mr-2"
+            ></span>
+            {{ label.title }}
+          </div>
+        </gl-filtered-search-suggestion>
+        </template>
+      </template>
+    </gl-filtered-search-token>
+  `
+};
+const tokens = [{
+  type: 'author',
+  icon: 'pencil',
+  title: 'Author',
+  dataType: 'user',
+  unique: true,
+  token: UserToken
+}, {
+  type: 'user',
+  icon: 'user',
+  title: 'Assignee',
+  dataType: 'user',
+  token: UserToken
+}, {
+  type: 'milestone',
+  icon: 'clock',
+  title: 'Milestone',
+  unique: true,
+  token: MilestoneToken
+}, {
+  type: 'label',
+  icon: 'labels',
+  title: 'Label',
+  token: LabelToken
+}, {
+  type: 'weight',
+  icon: 'weight',
+  title: 'Weight',
+  unique: true,
+  token: 'gl-filtered-search-token'
+}, {
+  type: 'confidential',
+  icon: 'eye-slash',
+  title: 'Confidential',
+  unique: true,
+  token: 'gl-filtered-search-token',
+  options: [{
+    icon: 'eye-slash',
+    value: true,
+    title: 'Yes'
+  }, {
+    icon: 'eye',
+    value: false,
+    title: 'No'
+  }]
+}];
+var script = {
+  data() {
+    return {
+      tokens,
+      value: [{
+        type: 'author',
+        value: {
+          data: 'beta',
+          operator: '='
+        }
+      }, {
+        type: 'label',
+        value: {
+          data: 'Bug',
+          operator: '='
+        }
+      }, 'raw text']
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-filtered-search',{attrs:{"available-tokens":_vm.tokens},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.friendly.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.friendly.example.js
new file mode 100644
index 00000000000000..bc2ecc8f334122
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.friendly.example.js
@@ -0,0 +1,423 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const fakeUsers = [{
+  id: 1,
+  name: 'User Alpha',
+  username: 'alpha'
+}, {
+  id: 2,
+  name: 'User Beta',
+  username: 'beta'
+}, {
+  id: 3,
+  name: 'User Gamma',
+  username: 'gamma'
+}, {
+  id: 4,
+  name: 'User Delta',
+  username: 'delta'
+}, {
+  id: 5,
+  name: 'User Epsilon',
+  username: 'epsilon'
+}];
+const fakeMilestones = [{
+  id: 1,
+  title: '12.7',
+  name: '%12.7'
+}, {
+  id: 2,
+  title: '12.8',
+  name: '%12.8'
+}, {
+  id: 3,
+  title: '12.9',
+  name: '%12.9'
+}, {
+  id: 4,
+  title: '12.10',
+  name: '%12.10'
+}, {
+  id: 5,
+  title: 'Backlog',
+  name: 'Backlog'
+}];
+const fakeLabels = [{
+  id: 1,
+  title: 'Bug',
+  color: '#D9534F',
+  text_color: '#FFFFFF'
+}, {
+  id: 2,
+  title: 'Enhancement',
+  color: '#F0AD4E',
+  text_color: '#FFFFFF'
+}, {
+  id: 3,
+  title: 'Backlog',
+  color: '#cccccc',
+  text_color: '#333333'
+}, {
+  id: 4,
+  title: 'Feature',
+  color: '#A8D695',
+  text_color: '#333333'
+}, {
+  id: 5,
+  title: 'Documentation',
+  color: '#5CB85C',
+  text_color: '#FFFFFF'
+}];
+const UserToken = {
+  props: ['value', 'active'],
+  inheritAttrs: false,
+
+  data() {
+    return {
+      loadingView: false,
+      loadingSuggestions: false,
+      users: [],
+      activeUser: null
+    };
+  },
+
+  methods: {
+    loadView() {
+      this.loadingView = true;
+      setTimeout(() => {
+        this.loadingView = false;
+        this.activeUser = fakeUsers.find(u => u.username === this.value.data);
+      }, 1000);
+    },
+
+    loadSuggestions() {
+      this.loadingSuggestions = true;
+      setTimeout(() => {
+        this.loadingSuggestions = false;
+        this.users = fakeUsers;
+      }, 2000);
+    }
+
+  },
+  watch: {
+    // eslint-disable-next-line func-names
+    'value.data': function () {
+      if (this.active) {
+        this.loadSuggestions();
+      }
+    },
+    active: {
+      immediate: true,
+
+      handler(newValue) {
+        if (!newValue) {
+          this.loadView();
+        } else {
+          this.loadSuggestions();
+        }
+      }
+
+    }
+  },
+  template: `
+    <gl-filtered-search-token
+      v-bind="{ ...this.$props, ...this.$attrs }"
+      v-on="$listeners"
+    >
+    <template #view="{ inputValue }">
+      <gl-loading-icon size="sm" v-if="loadingView" />
+      <gl-avatar :size="16" :entity-name="inputValue" shape="circle" v-else />
+      {{ activeUser ? activeUser.name : inputValue }}
+    </template>
+    <template #suggestions>
+      <template v-if="loadingSuggestions">
+        <gl-loading-icon />
+      </template>
+      <template v-else>
+        <gl-filtered-search-suggestion :key="user.id" v-for="user in users" :value="user.username">
+          <div class="gl-display-flex">
+            <gl-avatar :size="32" :entity-name="user.username" />
+            <div>
+              <p class="gl-m-0">{{ user.name }}</p>
+              <p class="gl-m-0">@{{ user.username }}</p>
+            </div>
+          </div>
+        </gl-filtered-search-suggestion>
+      </template>
+    </template>
+    </gl-filtered-search-token>
+  `
+};
+const MilestoneToken = {
+  props: ['value', 'active'],
+  inheritAttrs: false,
+
+  data() {
+    return {
+      loadingView: false,
+      loadingSuggestions: false,
+      milestones: []
+    };
+  },
+
+  methods: {
+    loadSuggestions() {
+      this.loadingSuggestions = true;
+      setTimeout(() => {
+        this.loadingSuggestions = false;
+        this.milestones = fakeMilestones;
+      }, 2000);
+    }
+
+  },
+  watch: {
+    // eslint-disable-next-line func-names
+    'value.data': function () {
+      if (this.active) {
+        this.loadSuggestions();
+      }
+    },
+    active: {
+      immediate: true,
+
+      handler(newValue) {
+        if (newValue) {
+          this.loadSuggestions();
+        }
+      }
+
+    }
+  },
+  template: `
+    <gl-filtered-search-token
+      v-bind="{ ...this.$props, ...this.$attrs }"
+      v-on="$listeners"
+    >
+    <template #suggestions>
+      <gl-filtered-search-suggestion value="None">None</gl-filtered-search-suggestion>
+      <gl-filtered-search-suggestion value="Any">Any</gl-filtered-search-suggestion>
+      <gl-filtered-search-suggestion value="Upcoming">Upcoming</gl-filtered-search-suggestion>
+      <gl-filtered-search-suggestion value="Started">Started</gl-filtered-search-suggestion>
+      <gl-dropdown-divider v-if="loadingSuggestions || milestones.length" />
+      <template v-if="loadingSuggestions">
+        <gl-loading-icon />
+      </template>
+      <template v-else>
+        <gl-filtered-search-suggestion :key="milestone.id" v-for="milestone in milestones"
+                                       :value="milestone.name">
+          {{ milestone.title }}
+        </gl-filtered-search-suggestion>
+      </template>
+    </template>
+    </gl-filtered-search-token>
+  `
+};
+const LabelToken = {
+  props: ['value', 'active'],
+  inheritAttrs: false,
+
+  data() {
+    return {
+      loadingView: false,
+      loadingSuggestions: false,
+      labels: [],
+      activeLabel: null
+    };
+  },
+
+  computed: {
+    currentValue() {
+      return this.value.data.toLowerCase();
+    },
+
+    containerStyle() {
+      if (this.activeLabel) {
+        const {
+          color,
+          text_color
+        } = this.activeLabel;
+        return {
+          backgroundColor: color,
+          color: text_color
+        };
+      }
+
+      return {};
+    }
+
+  },
+  methods: {
+    loadView() {
+      this.loadingView = true;
+      setTimeout(() => {
+        this.loadingView = false;
+        this.activeLabel = fakeLabels.find(l => l.title === this.value.data);
+      }, 100);
+    },
+
+    loadSuggestions() {
+      this.loadingSuggestions = true;
+      setTimeout(() => {
+        this.loadingSuggestions = false;
+        this.labels = fakeLabels;
+      }, 2000);
+    }
+
+  },
+  watch: {
+    // eslint-disable-next-line func-names
+    'value.data': function () {
+      if (this.active) {
+        this.loadSuggestions();
+      }
+    },
+    active: {
+      immediate: true,
+
+      handler(newValue) {
+        if (!newValue) {
+          this.loadView();
+        } else {
+          this.loadSuggestions();
+        }
+      }
+
+    }
+  },
+  template: `
+    <gl-filtered-search-token
+      v-bind="{ ...this.$props, ...this.$attrs }"
+      v-on="$listeners"
+    >
+    <template #view-token="{ inputValue, cssClasses, listeners }">
+      <gl-token variant="search-value" :class="cssClasses" :style="containerStyle" v-on="listeners">
+        {{ activeLabel ? activeLabel.title : inputValue }}
+      </gl-token>
+    </template>
+    <template #suggestions>
+      <gl-filtered-search-suggestion value="None">None</gl-filtered-search-suggestion>
+      <gl-filtered-search-suggestion value="Any">Any</gl-filtered-search-suggestion>
+      <gl-dropdown-divider v-if="loadingSuggestions || labels.length" />
+      <template v-if="loadingSuggestions">
+        <gl-loading-icon />
+      </template>
+      <template v-else>
+        <gl-filtered-search-suggestion :key="label.id" v-for="label in labels" :value="label.title">
+          <div class="d-flex">
+            <span
+              :style="{ backgroundColor: label.color, height: '16px', width: '16px' }"
+              class="d-inline-block mr-2"
+            ></span>
+            {{ label.title }}
+          </div>
+        </gl-filtered-search-suggestion>
+      </template>
+    </template>
+    </gl-filtered-search-token>
+  `
+};
+const tokens = [{
+  type: 'author',
+  icon: 'pencil',
+  title: 'Author',
+  dataType: 'user',
+  unique: true,
+  token: UserToken
+}, {
+  type: 'user',
+  icon: 'user',
+  title: 'Assignee',
+  dataType: 'user',
+  token: UserToken
+}, {
+  type: 'milestone',
+  icon: 'clock',
+  title: 'Milestone',
+  unique: true,
+  token: MilestoneToken
+}, {
+  type: 'label',
+  icon: 'labels',
+  title: 'Label',
+  token: LabelToken
+}, {
+  type: 'weight',
+  icon: 'weight',
+  title: 'Weight',
+  unique: true,
+  token: 'gl-filtered-search-token'
+}, {
+  type: 'confidential',
+  icon: 'eye-slash',
+  title: 'Confidential',
+  unique: true,
+  token: 'gl-filtered-search-token',
+  options: [{
+    icon: 'eye-slash',
+    value: 'Yes',
+    title: 'Yes'
+  }, {
+    icon: 'eye',
+    value: 'No',
+    title: 'No'
+  }]
+}];
+var script = {
+  data() {
+    return {
+      tokens,
+      value: [{
+        type: 'author',
+        value: {
+          data: 'beta',
+          operator: '='
+        }
+      }, {
+        type: 'label',
+        value: {
+          data: 'Bug',
+          operator: '='
+        }
+      }, 'raw text']
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-filtered-search',{attrs:{"available-tokens":_vm.tokens,"show-friendly-text":true},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.history.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.history.example.js
new file mode 100644
index 00000000000000..102ba3f380a2ef
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.history.example.js
@@ -0,0 +1,91 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const testTokens = [{
+  type: 'demotoken',
+  title: 'Unique',
+  icon: 'document',
+  token: 'gl-filtered-search-token',
+  operators: [{
+    value: '=',
+    description: 'is',
+    default: 'true'
+  }],
+  options: [{
+    icon: 'heart',
+    title: 'heart',
+    value: 1
+  }, {
+    icon: 'hook',
+    title: 'hook',
+    value: 2
+  }],
+  unique: true
+}];
+var script = {
+  data() {
+    return {
+      tokens: testTokens,
+      value: [],
+      historyItems: [[{
+        type: 'demotoken',
+        value: {
+          operator: '=',
+          data: 1
+        }
+      }, 'item 1'], ['item 2', {
+        type: 'demotoken',
+        value: {
+          operator: '=',
+          data: 2
+        }
+      }]]
+    };
+  },
+
+  methods: {
+    isString(val) {
+      return typeof val === 'string';
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._v("\n  "+_vm._s(_vm.value)+"\n  "),_c('gl-filtered-search',{attrs:{"available-tokens":_vm.tokens,"history-items":_vm.historyItems},scopedSlots:_vm._u([{key:"history-item",fn:function(ref){
+var historyItem = ref.historyItem;
+return [_vm._l((historyItem),function(token,idx){return [(_vm.isString(token))?_c('span',{key:idx,staticClass:"gl-px-1"},[_vm._v(_vm._s(token))]):_c('span',{key:idx,staticClass:"gl-px-1"},[_c('strong',[_vm._v(_vm._s(token.type))]),_vm._v(" "+_vm._s(token.value.operator)+"\n          "),_c('strong',[_vm._v(_vm._s(token.value.data))])])]})]}}]),model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.multi_select.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.multi_select.example.js
new file mode 100644
index 00000000000000..643ca74b07c410
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.multi_select.example.js
@@ -0,0 +1,196 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const fakeUsers = [{
+  id: 1,
+  name: 'User Alpha',
+  username: 'alpha'
+}, {
+  id: 2,
+  name: 'User Beta',
+  username: 'beta'
+}, {
+  id: 3,
+  name: 'User Gamma',
+  username: 'gamma'
+}, {
+  id: 4,
+  name: 'User Delta',
+  username: 'delta'
+}, {
+  id: 5,
+  name: 'User Epsilon',
+  username: 'epsilon'
+}];
+const UserToken = {
+  props: ['value', 'active', 'config'],
+  inheritAttrs: false,
+
+  data() {
+    return {
+      users: fakeUsers,
+      selectedUsernames: this.value.data ? this.value.data.split(',') : [],
+      activeUser: null
+    };
+  },
+
+  computed: {
+    filteredUsers() {
+      return this.users.filter(user => user.username.includes(this.value.data));
+    },
+
+    selectedUsers() {
+      return this.config.multiSelect ? this.users.filter(user => this.selectedUsernames.includes(user.username)) : this.users.filter(user => user.username === this.activeUser);
+    }
+
+  },
+  methods: {
+    loadView() {
+      this.activeUser = fakeUsers.find(u => u.username === this.value.data);
+    },
+
+    loadSuggestions() {
+      this.users = fakeUsers;
+    },
+
+    handleSelect(username) {
+      if (!this.config.multiSelect) {
+        return;
+      }
+
+      if (this.selectedUsernames.includes(username)) {
+        this.selectedUsernames = this.selectedUsernames.filter(user => user !== username);
+      } else {
+        this.selectedUsernames.push(username);
+      }
+    },
+
+    isLastUser(index) {
+      return index === this.selectedUsers.length - 1;
+    }
+
+  },
+  watch: {
+    // eslint-disable-next-line func-names
+    'value.data': function () {
+      if (this.active) {
+        this.loadSuggestions();
+      }
+    },
+    active: {
+      immediate: true,
+
+      handler(newValue) {
+        if (!newValue) {
+          this.loadView();
+        } else {
+          this.loadSuggestions();
+        }
+      }
+
+    }
+  },
+  template: `
+    <gl-filtered-search-token
+      v-bind="{ ...this.$props, ...this.$attrs }"
+      v-on="$listeners"
+      :multi-select-values="selectedUsernames"
+      @select="handleSelect"
+    >
+    <template #view="{ inputValue }">
+      <template v-for="(user, index) in selectedUsers">
+        <gl-avatar :size="16" :entity-name="user.username" shape="circle" />
+        {{ user.name }}
+        <span v-if="!isLastUser(index)" class="gl-mx-2">,&nbsp;</span>
+      </template>
+    </template>
+    <template #suggestions>
+      <gl-filtered-search-suggestion :key="user.id" v-for="user in filteredUsers" :value="user.username">
+        <div class="gl-display-flex gl-align-items-center">
+          <gl-icon
+            v-if="config.multiSelect"
+            name="check"
+            class="gl-mr-3 gl-text-gray-700"
+            :class="{ 'gl-visibility-hidden': !selectedUsernames.includes(user.username) }"
+          />
+          <gl-avatar :size="32" :entity-name="user.username" />
+          <div>
+            <p class="gl-m-0">{{ user.name }}</p>
+            <p class="gl-m-0">@{{ user.username }}</p>
+          </div>
+        </div>
+      </gl-filtered-search-suggestion>
+    </template>
+    </gl-filtered-search-token>
+  `
+};
+const tokens = [{
+  type: 'assignee',
+  icon: 'user',
+  title: 'Assignee',
+  token: UserToken,
+  operators: [{
+    value: '=',
+    description: 'is',
+    default: 'true'
+  }, {
+    value: '!=',
+    description: 'is not one of'
+  }, {
+    value: '||',
+    description: 'is one of'
+  }],
+  multiSelect: true
+}];
+var script = {
+  data() {
+    return {
+      tokens,
+      value: [{
+        type: 'assignee',
+        value: {
+          data: 'alpha,beta',
+          operator: '='
+        }
+      }]
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-filtered-search',{attrs:{"available-tokens":_vm.tokens,"show-friendly-text":true},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.single_unique.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.single_unique.example.js
new file mode 100644
index 00000000000000..087bb63538d1e8
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/filtered_search.single_unique.example.js
@@ -0,0 +1,70 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const testTokens = [{
+  type: 'unique',
+  title: 'Unique',
+  icon: 'document',
+  token: 'gl-filtered-search-token',
+  operators: [{
+    value: '=',
+    description: 'is',
+    default: 'true'
+  }],
+  options: [{
+    icon: 'heart',
+    title: 'heart',
+    value: 1
+  }, {
+    icon: 'hook',
+    title: 'hook',
+    value: 2
+  }],
+  unique: true
+}];
+var script = {
+  data() {
+    return {
+      tokens: testTokens,
+      value: []
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._v("\n  "+_vm._s(_vm.value)+"\n  "),_c('gl-filtered-search',{attrs:{"available-tokens":_vm.tokens},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/index.js
new file mode 100644
index 00000000000000..66800b87e881b9
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/examples/index.js
@@ -0,0 +1,32 @@
+import FilteredSearchDefaultExample from './filtered_search.default.example';
+import FilteredSearchFriendlyExample from './filtered_search.friendly.example';
+import FilteredSearchHistoryExample from './filtered_search.history.example';
+import FilteredSearchMultiSelectExample from './filtered_search.multi_select.example';
+import FilteredSearchSingleUniqueExample from './filtered_search.single_unique.example';
+
+var index = [{
+  name: 'Filtered search',
+  items: [{
+    id: 'filtered-search',
+    name: 'default',
+    component: FilteredSearchDefaultExample
+  }, {
+    id: 'filtered-search-single-unique',
+    name: 'single-unique',
+    component: FilteredSearchSingleUniqueExample
+  }, {
+    id: 'filtered-search-history',
+    name: 'with-history',
+    component: FilteredSearchHistoryExample
+  }, {
+    id: 'filtered-search-friendly-text',
+    name: 'with-friendly-text',
+    component: FilteredSearchFriendlyExample
+  }, {
+    id: 'filtered-search-multi-select',
+    name: 'with-multi-select',
+    component: FilteredSearchMultiSelectExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search.documentation.js
new file mode 100644
index 00000000000000..2565af0a7cd500
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search.documentation.js
@@ -0,0 +1,71 @@
+import examples from './examples';
+
+var filtered_search = "# Filtered Search\n\nThe filtered search component is responsible for managing search with possible filters.\n\n## Usage\n\nEach filter option (named token) requires a separate Vue component. `GlFilteredSearchToken` is an\nexample of such a token.\n\nPrepare array of available token configurations with the following fields:\n\n- `type`: unique identifier of token type\n- `title`: human-readable title of the token\n- `icon`: token icon\n- `token`: (optional) the token Vue component to use (e.g. `AuthorToken`)\n- `dataType`: (optional) identifier of type (for example \"user\") for this filter. Tokens\n  of the same type could be switched without losing their values\n- `unique`: (optional) indicate this token could appear only once in the filter\n- `disabled`: (optional) indicate this token should be hidden from the dropdown\n- `operators`: (optional) an array of selectable operators.\n  Each array item is an object that must contain `value` and `description`, and optionally `default`\n  (e.g. `{ value: '=', description: 'is', default: 'true' }`)\n- `multiSelect`: (optional) when `true`, the suggestions list becomes multi-select instead of single-select.\n  It is discouraged to use this together with `unique`, as `unique` is intended for single-select.\n- `options`: (optional) an array of options which the user can pick after the operator has been selected.\n  The option object can have the following properties defined: `value`, `icon`, `text`, and `default`\n  all of which are expected be of type `string`. If the `default` is omitted, the `value` of the first\n  option will be displayed as a suggestion\n- any additional fields required to configure your component\n\nEach token for filtered search is a Vue component with the following props:\n\n- `value`: an object with a `data` property containing the current value, and optionally an\n`operator` value containing the operator value\n- `active`: indicates if the token is currently active. It's the token's responsibility\n  to render proper control for editing (for example input).\n- `current-value`: current tokens of the filtered search.\n- `index`: current token position in the filtered search.\n- `config`: additional configuration, supplied in filtered search config for this token.\n\nThe token should emit the following events:\n\n- `activate`: when the token requests activation (for example, when being clicked).\n- `deactivate`: when token requests deactivation (for example due to losing blur on input).\n- `destroy`: when token requests self-destruction (for instance for clicking \"X\" sign).\n- `replace`: token requests its replacement with another token.\n- `split`: token requests adding string values after the current token.\n- `complete`: token indicates its editing is completed.\n\n## Examples\n\nDefine a list of available tokens:\n\n```js\nconst availableTokens = [\n  { type: 'static', icon: 'label', title: 'static:token', token: staticToken },\n  { type: 'dynamic', icon: 'rocket', title: 'dynamic:~token', token: dynamicToken },\n];\n```\n\nPass the list of tokens to the search component. Optionally, you can use `v-model` to receive\nrealtime updates:\n\n```js\n <gl-filtered-search :available-tokens=\"tokens\" v-model=\"value\" />\n```\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': filtered_search
+});
+
+var filtered_search_documentation = {
+  description,
+  followsDesignSystem: true,
+  bootstrapComponent: null,
+  examples,
+  propsInfo: {
+    value: {
+      additionalInfo: 'If provided, used as value of filtered search'
+    },
+    historyItems: {
+      additionalInfo: 'If provided, used as history items for this component'
+    },
+    availableTokens: {
+      additionalInfo: 'Available tokens'
+    },
+    placeholder: {
+      additionalInfo: 'If provided, used as history items for this component'
+    },
+    recentSearchesHeader: {
+      additionalInfo: 'i18n for recent searches title within history dropdown'
+    },
+    clearButtonTitle: {
+      additionalInfo: 'i18n for clear button title'
+    },
+    closeButtonTitle: {
+      additionalInfo: 'i18n for close button title within history dropdown'
+    },
+    clearRecentSearchesText: {
+      additionalInfo: 'i18n for recent searches clear text'
+    },
+    suggestionsListClass: {
+      additionalInfo: 'Additional classes to add to the suggestion list menu. NOTE: this not reactive, and the value must be available and fixed when the component is instantiated'
+    }
+  },
+  events: [{
+    event: 'clear',
+    description: 'Emitted when search is cleared'
+  }, {
+    event: 'submit',
+    args: [{
+      arg: 'tokens',
+      description: '(Array)'
+    }],
+    description: 'Emitted when search is submitted'
+  }, {
+    event: 'history-item-selected',
+    args: [{
+      arg: 'value',
+      description: 'History item'
+    }],
+    description: 'Emitted when item from history is selected'
+  }, {
+    event: 'clear-history',
+    description: 'Emitted when clear history button is clicked'
+  }],
+  slots: [{
+    name: 'history-item',
+    description: 'Slot to customize history item in history dropdown. Used only if using history items'
+  }]
+};
+
+export default filtered_search_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search.js
new file mode 100644
index 00000000000000..c914df23cb8659
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search.js
@@ -0,0 +1,306 @@
+import _cloneDeep from 'lodash/cloneDeep';
+import PortalVue from 'portal-vue';
+import Vue from 'vue';
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import GlIcon from '../icon/icon';
+import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click';
+import GlFilteredSearchTerm from './filtered_search_term';
+import { TERM_TOKEN_TYPE, needDenormalization, denormalizeTokens, isEmptyTerm, normalizeTokens } from './filtered_search_utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+Vue.use(PortalVue);
+let portalUuid = 0;
+
+function createTerm() {
+  let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return {
+    type: TERM_TOKEN_TYPE,
+    value: {
+      data
+    }
+  };
+}
+
+function initialState() {
+  return [createTerm()];
+}
+
+var script = {
+  components: {
+    GlSearchBoxByClick,
+    GlIcon
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+
+  provide() {
+    portalUuid += 1;
+    this.portalName = `filters_portal_${portalUuid}`;
+    return {
+      portalName: this.portalName,
+      alignSuggestions: ref => this.alignSuggestions(ref),
+      // Return a function reference instead of a prop to work around vue-apollo@3 bug.
+      // TODO: This can be reverted once https://github.com/vuejs/vue-apollo/pull/1153
+      // has been merged and we consume it, or we upgrade to vue-apollo@4.
+      suggestionsListClass: () => this.suggestionsListClass
+    };
+  },
+
+  inheritAttrs: false,
+  props: {
+    value: {
+      required: false,
+      type: Array,
+      default: () => []
+    },
+    availableTokens: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: 'Search'
+    },
+    clearButtonTitle: {
+      type: String,
+      required: false,
+      default: 'Clear'
+    },
+    historyItems: {
+      type: Array,
+      required: false,
+      default: null
+    },
+    suggestionsListClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: null
+    },
+    showFriendlyText: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      tokens: initialState(),
+      activeTokenIdx: null,
+      suggestionsStyle: {}
+    };
+  },
+
+  computed: {
+    activeToken() {
+      return this.tokens[this.activeTokenIdx];
+    },
+
+    lastTokenIdx() {
+      return this.tokens.length - 1;
+    },
+
+    isLastTokenActive() {
+      return this.activeTokenIdx === this.lastTokenIdx;
+    },
+
+    hasValue() {
+      return this.tokens.length > 1 || this.tokens[0].value.data !== '';
+    },
+
+    termPlaceholder() {
+      return this.hasValue ? null : this.placeholder;
+    },
+
+    currentAvailableTokens() {
+      return this.availableTokens.filter(token => {
+        if (token.disabled) {
+          return false;
+        }
+
+        if (token.unique) {
+          return !this.tokens.find(t => t.type === token.type);
+        }
+
+        return true;
+      });
+    }
+
+  },
+  watch: {
+    tokens: {
+      handler() {
+        if (this.tokens.length === 0 || !this.isLastTokenEmpty()) {
+          this.tokens.push(createTerm());
+        }
+
+        this.$emit('input', this.tokens);
+      },
+
+      deep: true,
+      immediate: true
+    }
+  },
+
+  mounted() {
+    if (this.value.length) {
+      this.applyNewValue(_cloneDeep(this.value));
+    }
+  },
+
+  methods: {
+    applyNewValue(newValue) {
+      this.tokens = needDenormalization(newValue) ? denormalizeTokens(newValue) : newValue;
+    },
+
+    isLastToken(idx) {
+      return !this.activeTokenIdx && idx === this.lastTokenIdx;
+    },
+
+    isLastTokenEmpty() {
+      return isEmptyTerm(this.tokens[this.lastTokenIdx]);
+    },
+
+    getTokenEntry(type) {
+      return this.availableTokens.find(t => t.type === type);
+    },
+
+    getTokenComponent(type) {
+      var _this$getTokenEntry;
+
+      return ((_this$getTokenEntry = this.getTokenEntry(type)) === null || _this$getTokenEntry === void 0 ? void 0 : _this$getTokenEntry.token) || GlFilteredSearchTerm;
+    },
+
+    activate(token) {
+      this.activeTokenIdx = token;
+    },
+
+    alignSuggestions(ref) {
+      const offsetRef = ref.getBoundingClientRect().left;
+      const offsetMenu = this.$el.getBoundingClientRect().left;
+      const transform = `translateX(${Math.floor(offsetRef - offsetMenu)}px)`;
+      this.suggestionsStyle = {
+        transform
+      };
+    },
+
+    deactivate(token) {
+      const tokenIdx = this.tokens.indexOf(token);
+
+      if (tokenIdx === -1 || this.activeTokenIdx !== tokenIdx) {
+        return;
+      }
+
+      if (!this.isLastTokenEmpty()) {
+        this.tokens.push(createTerm());
+      }
+
+      if (!this.isLastTokenActive && isEmptyTerm(this.activeToken)) {
+        this.tokens.splice(tokenIdx, 1);
+      }
+
+      this.activeTokenIdx = null;
+    },
+
+    destroyToken(idx) {
+      if (this.tokens.length === 1) {
+        return;
+      }
+
+      this.tokens.splice(idx, 1);
+
+      if (idx !== 0) {
+        this.activeTokenIdx = idx - 1;
+      }
+    },
+
+    replaceToken(idx, token) {
+      this.$set(this.tokens, idx, { ...token,
+        value: {
+          data: '',
+          ...token.value
+        }
+      });
+      this.activeTokenIdx = idx;
+    },
+
+    createTokens(idx) {
+      let newStrings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [''];
+
+      if (this.activeTokenIdx !== this.lastTokenIdx && newStrings.length === 1 && newStrings[0] === '') {
+        this.activeTokenIdx = this.lastTokenIdx;
+        return;
+      }
+
+      const newTokens = newStrings.map(data => ({
+        type: TERM_TOKEN_TYPE,
+        value: {
+          data
+        }
+      }));
+      this.tokens.splice(idx + 1, 0, ...newTokens);
+      this.activeTokenIdx = idx + newStrings.length;
+    },
+
+    completeToken() {
+      if (this.activeTokenIdx === this.lastTokenIdx - 1) {
+        this.activeTokenIdx = this.lastTokenIdx;
+      } else {
+        this.activeTokenIdx = null;
+      }
+    },
+
+    submit() {
+      this.$emit('submit', normalizeTokens(_cloneDeep(this.tokens)));
+    },
+
+    clearInput() {
+      this.tokens = initialState();
+      this.$emit('clearInput');
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable"},[_vm._l((_vm.tokens),function(token,idx){return [_c(_vm.getTokenComponent(token.type),{key:((token.type) + "-" + idx),ref:"tokens",refInFor:true,tag:"component",staticClass:"gl-filtered-search-item",class:{
+            'gl-filtered-search-last-item': _vm.isLastToken(idx),
+          },attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)}},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})]})],2),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion.documentation.js
new file mode 100644
index 00000000000000..262d8d77e177b1
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion.documentation.js
@@ -0,0 +1,13 @@
+var description = "# Filtered Search Suggestion\n\n<!-- STORY -->\n\n## Usage\n\nThe filtered search suggestion component is a wrapper around `GlDropdownItem`, which registers\nsuggestions in a top-level suggestion list:\n\n```js\n<gl-filtered-search-suggestion-list>\n  <gl-filtered-search-suggestion value=\"foo\">Example suggestion</gl-filtered-search-suggestion>\n  <gl-filtered-search-suggestion value=\"bar\">Example suggestion 2</gl-filtered-search-suggestion>\n</gl-filtered-search-suggestion-list>\n```\n";
+
+var filtered_search_suggestion_documentation = {
+  description,
+  bootstrapComponent: 'b-dropdown-item',
+  propsInfo: {
+    value: {
+      additionalInfo: 'Value which will be emitted if this suggestion will be selected in list'
+    }
+  }
+};
+
+export default filtered_search_suggestion_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion.js
new file mode 100644
index 00000000000000..16bd2909a568c9
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion.js
@@ -0,0 +1,90 @@
+import GlDropdownItem from '../dropdown/dropdown_item';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlDropdownItem
+  },
+  inject: ['filteredSearchSuggestionListInstance'],
+  inheritAttrs: false,
+  props: {
+    value: {
+      required: true,
+      validator: () => true
+    }
+  },
+  computed: {
+    isActive() {
+      return this.filteredSearchSuggestionListInstance.activeItem === this;
+    }
+
+  },
+  watch: {
+    isActive(newValue) {
+      if (newValue) {
+        window.requestAnimationFrame(() => {
+          this.$refs.item.$el.scrollIntoView({
+            block: 'nearest',
+            inline: 'end'
+          });
+        });
+      }
+    }
+
+  },
+
+  created() {
+    this.filteredSearchSuggestionListInstance.register(this);
+  },
+
+  beforeDestroy() {
+    this.filteredSearchSuggestionListInstance.unregister(this);
+  },
+
+  methods: {
+    emitValue() {
+      // We use href argument for gl-dropdown-item to use <a> instead of <button>
+      // due to https://bugs.webkit.org/show_bug.cgi?id=22261
+      this.filteredSearchSuggestionListInstance.$emit('suggestion', this.value);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown-item',_vm._b({ref:"item",staticClass:"gl-filtered-search-suggestion",class:{ 'gl-filtered-search-suggestion-active': _vm.isActive },attrs:{"href":"#"},nativeOn:{"mousedown":function($event){$event.preventDefault();return _vm.emitValue($event)}}},'gl-dropdown-item',_vm.$attrs,false),[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion_list.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion_list.documentation.js
new file mode 100644
index 00000000000000..8374f28f224712
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion_list.documentation.js
@@ -0,0 +1,12 @@
+var description = "# Filtered Search Suggestion\n\n<!-- STORY -->\n\n## Usage\n\nThe filtered search suggestion list component is responsible for managing underlying suggestion instances.\nYou obtain the ref for this component and manage suggestion selection via the component public API:\n\n- `getValue()` - Retrieves the current selected suggestion.\n- `nextItem()` - Selects the next suggestion. If last suggestion was selected, selection is cleared.\n- `prevItem()` - Selects the previous suggestion. If first suggestion was selected, selection is cleared.\n\n```js\n<gl-filtered-search-suggestion-list ref=\"suggestions\">\n  <gl-filtered-search-suggestion value=\"foo\">Example suggestion</gl-filtered-search-suggestion>\n  <gl-filtered-search-suggestion value=\"bar\">Example suggestion 2</gl-filtered-search-suggestion>\n</gl-filtered-search-suggestion-list>\n```\n";
+
+var filtered_search_suggestion_list_documentation = {
+  description,
+  propsInfo: {
+    initialValue: {
+      additionalInfo: 'Value to be initially selected in list'
+    }
+  }
+};
+
+export default filtered_search_suggestion_list_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion_list.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion_list.js
new file mode 100644
index 00000000000000..adbd300a3812a7
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_suggestion_list.js
@@ -0,0 +1,128 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  inject: ['suggestionsListClass'],
+
+  provide() {
+    return {
+      filteredSearchSuggestionListInstance: this
+    };
+  },
+
+  props: {
+    initialValue: {
+      required: false,
+      validator: () => true,
+      default: null
+    }
+  },
+
+  data() {
+    return {
+      activeIdx: -1,
+      registeredItems: []
+    };
+  },
+
+  computed: {
+    activeItem() {
+      return this.activeIdx > -1 && this.activeIdx < this.registeredItems.length ? this.registeredItems[this.activeIdx] : null;
+    },
+
+    listClasses() {
+      return [this.suggestionsListClass(), 'dropdown-menu gl-filtered-search-suggestion-list'];
+    }
+
+  },
+  watch: {
+    initialValue(newValue) {
+      this.activeIdx = this.registeredItems.findIndex(item => this.valuesMatch(item.value, newValue));
+    }
+
+  },
+  methods: {
+    valuesMatch(firstValue, secondValue) {
+      if (!firstValue || !secondValue) return false;
+      return typeof firstValue === 'string' ? firstValue.toLowerCase() === secondValue.toLowerCase() : firstValue === secondValue;
+    },
+
+    register(item) {
+      this.registeredItems.push(item);
+
+      if (this.valuesMatch(item.value, this.initialValue)) {
+        this.activeIdx = this.registeredItems.length - 1;
+      }
+    },
+
+    unregister(item) {
+      const idx = this.registeredItems.indexOf(item);
+
+      if (idx !== -1) {
+        this.registeredItems.splice(idx, 1);
+
+        if (idx === this.activeIdx) {
+          this.activeIdx = -1;
+        }
+      }
+    },
+
+    nextItem() {
+      if (this.activeIdx < this.registeredItems.length) {
+        this.activeIdx += 1;
+      } else {
+        this.activeIdx = 0;
+      }
+    },
+
+    prevItem() {
+      if (this.activeIdx >= 0) {
+        this.activeIdx -= 1;
+      } else {
+        this.activeIdx = this.registeredItems.length - 1;
+      }
+    },
+
+    getValue() {
+      return this.activeItem ? this.activeItem.value : null;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',{class:_vm.listClasses},[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_term.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_term.documentation.js
new file mode 100644
index 00000000000000..5360bc64f09e13
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_term.documentation.js
@@ -0,0 +1,48 @@
+var filtered_search_term = "# Filtered Search Term\n\nThe filtered search term is a component for managing \"free input\" in the filtered search component.\nIt is responsible for autocompleting available tokens and \"converting\" to a relevant\ncomponent when an autocomplete item is selected.\n\n## Usage\n\nThis component is internal and is not intended to be used by `@gitlab/ui` users.\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': filtered_search_term
+});
+
+var filtered_search_term_documentation = {
+  description,
+  bootstrapComponent: null,
+  propsInfo: {
+    availableTokens: {
+      additionalInfo: 'Tokens available for this filtered search instance'
+    },
+    active: {
+      additionalInfo: 'If this term token is currently active'
+    },
+    value: {
+      additionalInfo: 'Current term value'
+    }
+  },
+  events: [{
+    event: 'activate',
+    description: 'Emitted when this term token is clicked'
+  }, {
+    event: 'deactivate',
+    description: 'Emitted when this term token loses its focus'
+  }, {
+    event: 'destroy',
+    description: 'Emitted when token value is empty and backspace is pressed'
+  }, {
+    event: 'replace',
+    args: [{
+      arg: 'token',
+      description: '(Object) Replacement token configuration'
+    }],
+    description: 'Emitted when autocomplete entry is selected'
+  }, {
+    event: 'split',
+    args: [{
+      arg: 'newTokens',
+      description: '(Array) Token configurations'
+    }],
+    description: 'Emitted when Space is pressed in-between term text'
+  }]
+};
+
+export default filtered_search_term_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_term.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_term.js
new file mode 100644
index 00000000000000..f28c9bee33f2c8
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_term.js
@@ -0,0 +1,90 @@
+import GlFilteredSearchSuggestion from './filtered_search_suggestion';
+import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlFilteredSearchTokenSegment,
+    GlFilteredSearchSuggestion
+  },
+  inheritAttrs: false,
+  props: {
+    availableTokens: {
+      type: Array,
+      required: true
+    },
+    active: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    value: {
+      type: Object,
+      required: false,
+      default: () => ({
+        data: ''
+      })
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  computed: {
+    suggestedTokens() {
+      return this.availableTokens.filter(item => item.title.toLowerCase().includes(this.value.data.toLowerCase()));
+    },
+
+    internalValue: {
+      get() {
+        return this.value.data;
+      },
+
+      set(data) {
+        this.$emit('input', {
+          data
+        });
+      }
+
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-h-auto gl-filtered-search-term"},[_c('gl-filtered-search-token-segment',{staticClass:"gl-filtered-search-term-token",class:{ 'gl-w-full': _vm.placeholder },attrs:{"active":_vm.active},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":function($event){return _vm.$emit('replace', { type: $event })},"backspace":function($event){return _vm.$emit('destroy')},"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return _vm._l((_vm.suggestedTokens),function(item,idx){return _c('gl-filtered-search-suggestion',{key:idx,attrs:{"value":item.type,"icon-name":item.icon}},[_vm._v("\n        "+_vm._s(item.title)+"\n      ")])})},proxy:true},{key:"view",fn:function(){return [(_vm.placeholder)?_c('input',{staticClass:"gl-filtered-search-term-input",attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder}}):[_vm._v(_vm._s(_vm.value.data))]]},proxy:true}]),model:{value:(_vm.internalValue),callback:function ($$v) {_vm.internalValue=$$v;},expression:"internalValue"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token.documentation.js
new file mode 100644
index 00000000000000..c87a7a1d73a9d7
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token.documentation.js
@@ -0,0 +1,41 @@
+var filtered_search_token = "# Filtered Search Binary Token\n\nFiltered search token is a helper component, intended to\nsimplify the creation of filters tokens which consist of a title, operators\nand an editable value with autocomplete. This component abstracts token management\nlogic and allows you to focus on implementing autocomplete or view logic.\n\nThis component is not intended to be used outside of the `GlFilteredSearch` component.\n\n## Usage\n\nMake sure to pass `$listeners` to `gl-filtered-search-token`, or route events properly:\n\n```js\n<gl-filtered-search-token\n  title=\"Confidential\"\n  :active=\"active\"\n  :value=\"value\"\n  v-on=\"$listeners\"\n>\n  <template #suggestions>\n    <gl-filtered-search-suggestion value=\"Yes\"><gl-icon name=\"eye-slash\" :size=\"16\"/> Yes</gl-filtered-search-suggestion>\n    <gl-filtered-search-suggestion value=\"No\"><gl-icon name=\"eye\" :size=\"16\"/> No</gl-filtered-search-suggestion>\n  </template>\n</gl-filtered-search-token>\n```\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': filtered_search_token
+});
+
+var filtered_search_token_documentation = {
+  description,
+  bootstrapComponent: null,
+  propsInfo: {
+    title: {
+      additionalInfo: 'Token title'
+    },
+    config: {
+      additionalInfo: 'Token configuration with available operators and options'
+    },
+    active: {
+      additionalInfo: 'If this token is currently active'
+    },
+    value: {
+      additionalInfo: 'Current value'
+    },
+    replace: {
+      args: [{
+        arg: 'token',
+        description: '(Object) Replacement token configuration'
+      }],
+      description: 'Emitted when this token is converted to another type'
+    }
+  },
+  slots: [{
+    name: 'view',
+    description: 'Template for token value in inactive state'
+  }, {
+    name: 'suggestions',
+    description: 'Slot for rendering autocomplete suggestions when no options are provided.'
+  }]
+};
+
+export default filtered_search_token_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token.js
new file mode 100644
index 00000000000000..d320dc4e422706
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token.js
@@ -0,0 +1,294 @@
+import { COMMA } from '../../../utils/constants';
+import GlToken from '../token/token';
+import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
+import { TERM_TOKEN_TYPE } from './filtered_search_utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const SEGMENT_TITLE = 'TYPE';
+const SEGMENT_OPERATOR = 'OPERATOR';
+const SEGMENT_DATA = 'DATA';
+const TOKEN_CLOSE_SELECTOR = '.gl-token-close';
+const DEFAULT_OPERATORS = [{
+  value: '=',
+  description: 'is',
+  default: 'true'
+}, {
+  value: '!=',
+  description: 'is not'
+}];
+var script = {
+  components: {
+    GlToken,
+    GlFilteredSearchTokenSegment
+  },
+  inheritAttrs: false,
+  props: {
+    availableTokens: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    config: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    active: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    multiSelectValues: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    value: {
+      type: Object,
+      required: false,
+      default: () => ({
+        operator: '',
+        data: ''
+      })
+    },
+    showFriendlyText: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      activeSegment: null
+    };
+  },
+
+  computed: {
+    operators() {
+      return this.config.operators || DEFAULT_OPERATORS;
+    },
+
+    hasDataOrDataSegmentIsCurrentlyActive() {
+      return this.value.data !== '' || this.isSegmentActive(SEGMENT_DATA);
+    },
+
+    availableTokensWithSelf() {
+      return [this.config, ...this.availableTokens.filter(t => t !== this.config)].map(t => ({ ...t,
+        value: t.title
+      }));
+    },
+
+    operatorDescription() {
+      const operator = this.operators.find(op => op.value === this.value.operator);
+      return this.showFriendlyText ? operator === null || operator === void 0 ? void 0 : operator.description : operator === null || operator === void 0 ? void 0 : operator.value;
+    }
+
+  },
+  segments: {
+    SEGMENT_TITLE,
+    SEGMENT_DATA,
+    SEGMENT_OPERATOR
+  },
+  watch: {
+    value: {
+      deep: true,
+
+      handler(newValue) {
+        this.$emit('input', newValue);
+      }
+
+    },
+    active: {
+      immediate: true,
+
+      handler(newValue) {
+        if (newValue) {
+          if (!this.activeSegment) {
+            this.activateSegment(this.value.data !== '' ? SEGMENT_DATA : SEGMENT_OPERATOR);
+          }
+        } else if (this.value.data === '') {
+          this.activeSegment = null;
+          this.$emit('destroy');
+        }
+      }
+
+    }
+  },
+
+  created() {
+    if (!('operator' in this.value)) {
+      if (this.operators.length === 1) {
+        const operator = this.operators[0].value;
+        this.$emit('input', { ...this.value,
+          operator
+        });
+        this.activeSegment = SEGMENT_DATA;
+      } else {
+        this.$emit('input', { ...this.value,
+          operator: ''
+        });
+      }
+    }
+  },
+
+  methods: {
+    activateSegment(segment) {
+      this.activeSegment = segment;
+
+      if (!this.active) {
+        this.$emit('activate');
+      }
+    },
+
+    getAdditionalSegmentClasses(segment) {
+      return {
+        'gl-cursor-pointer': !this.isSegmentActive(segment)
+      };
+    },
+
+    isSegmentActive(segment) {
+      return this.active && this.activeSegment === segment;
+    },
+
+    replaceWithTermIfEmpty() {
+      if (this.value.operator === '' && this.value.data === '') {
+        this.$emit('replace', {
+          type: TERM_TOKEN_TYPE,
+          value: {
+            data: this.config.title
+          }
+        });
+      }
+    },
+
+    replaceToken(newTitle) {
+      const newTokenConfig = this.availableTokens.find(t => t.title === newTitle);
+
+      if (newTokenConfig === this.config) {
+        this.$nextTick(() => {
+          this.$emit('deactivate');
+        });
+        return;
+      }
+
+      if (newTokenConfig) {
+        const isCompatible = this.config.dataType && this.config.dataType === newTokenConfig.dataType;
+        this.$emit('replace', {
+          type: newTokenConfig.type,
+          value: isCompatible ? this.value : {
+            data: ''
+          }
+        });
+      }
+    },
+
+    handleOperatorKeydown(evt, _ref) {
+      let {
+        inputValue,
+        suggestedValue,
+        applySuggestion
+      } = _ref;
+      const {
+        key
+      } = evt;
+
+      if (key === ' ' || key === 'Spacebar') {
+        applySuggestion(suggestedValue);
+        return;
+      }
+
+      const potentialValue = `${inputValue}${key}`;
+
+      if (key.length === 1 && !this.operators.find(_ref2 => {
+        let {
+          value
+        } = _ref2;
+        return value.startsWith(potentialValue);
+      })) {
+        if (this.value.data === '') {
+          applySuggestion(suggestedValue);
+        } else {
+          evt.preventDefault();
+        }
+      }
+    },
+
+    activateDataSegment() {
+      if (this.config.multiSelect) {
+        this.$emit('input', { ...this.value,
+          data: ''
+        });
+      }
+
+      this.activateSegment(this.$options.segments.SEGMENT_DATA);
+    },
+
+    handleComplete() {
+      if (this.config.multiSelect) {
+        this.$emit('input', { ...this.value,
+          data: this.multiSelectValues.join(COMMA)
+        });
+      }
+
+      this.$emit('complete');
+    },
+
+    destroyByClose(event) {
+      if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
+        event.preventDefault();
+        this.$emit('destroy');
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-filtered-search-token",class:{ 'gl-filtered-search-token-active': _vm.active }},[_c('gl-filtered-search-token-segment',{key:"title-segment",attrs:{"value":_vm.config.title,"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_TITLE),"options":_vm.availableTokensWithSelf},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_TITLE)},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":_vm.replaceToken,"backspace":function($event){return _vm.$emit('destroy')},"submit":function($event){return _vm.$emit('submit')}},scopedSlots:_vm._u([{key:"view",fn:function(ref){
+var inputValue = ref.inputValue;
+return [_c('gl-token',{staticClass:"gl-filtered-search-token-type",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_TITLE),attrs:{"view-only":""}},[_vm._v(_vm._s(inputValue))])]}}])}),_vm._v(" "),_c('gl-filtered-search-token-segment',{key:"operator-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_OPERATOR),"options":_vm.operators,"custom-input-keydown-handler":_vm.handleOperatorKeydown,"view-only":""},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"backspace":_vm.replaceWithTermIfEmpty,"complete":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_DATA)},"deactivate":function($event){return _vm.$emit('deactivate')}},scopedSlots:_vm._u([{key:"view",fn:function(){return [_c('gl-token',{staticClass:"gl-filtered-search-token-operator",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_OPERATOR),attrs:{"variant":"search-value","view-only":""}},[_vm._v(_vm._s(_vm.operatorDescription))])]},proxy:true},{key:"option",fn:function(ref){
+var option = ref.option;
+return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n        "+_vm._s(option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(option.description)+"\n        ")]):_vm._e()])]}}]),model:{value:(_vm.value.operator),callback:function ($$v) {_vm.$set(_vm.value, "operator", $$v);},expression:"value.operator"}}),_vm._v(" "),(_vm.hasDataOrDataSegmentIsCurrentlyActive)?_c('gl-filtered-search-token-segment',{key:"data-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_DATA),"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"option-text-field":"title"},on:{"activate":_vm.activateDataSegment,"backspace":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"complete":_vm.handleComplete,"select":function($event){return _vm.$emit('select', $event)},"submit":function($event){return _vm.$emit('submit')},"deactivate":function($event){return _vm.$emit('deactivate')},"split":function($event){return _vm.$emit('split', $event)}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
+var inputValue = ref.inputValue;
+return [_vm._t("view-token",[_c('gl-token',{staticClass:"gl-filtered-search-token-data",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_DATA),attrs:{"variant":"search-value"},on:{"mousedown":_vm.destroyByClose}},[_c('span',{staticClass:"gl-filtered-search-token-data-content"},[_vm._t("view",[_vm._v(_vm._s(inputValue))],null,{ inputValue: inputValue })],2)])],null,{
+          inputValue: inputValue,
+          listeners: { mousedown: _vm.destroyByClose },
+          cssClasses: Object.assign({}, {'gl-filtered-search-token-data': true},
+            _vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_DATA)),
+        })]}}],null,true),model:{value:(_vm.value.data),callback:function ($$v) {_vm.$set(_vm.value, "data", $$v);},expression:"value.data"}}):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token_segment.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token_segment.documentation.js
new file mode 100644
index 00000000000000..fdff1d637c25c9
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token_segment.documentation.js
@@ -0,0 +1,50 @@
+var filtered_search_token_segment = "# Filtered Search Token Segment\n\nThe filtered search token segment is a component for managing token input either via free typing\nor by selecting item through dropdown list\n\n## Usage\n\nThis component is internal and is not intended to be used by `@gitlab/ui` users.\n\n## Internet Explorer 11\n\nThis component uses [`String.prototype.startsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)\nand [`String.prototype.endsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith)\nunder the hood. Make sure those methods are polyfilled if you plan on using the component on IE11.\n\n> NOTE: These methods are already polyfilled in GitLab: [`app/assets/javascripts/commons/polyfills.js#L15-16`](https://gitlab.com/gitlab-org/gitlab/blob/dc60dee6ed6234dda9f032195577cd8fad9646d8/app/assets/javascripts/commons/polyfills.js#L15-16)\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': filtered_search_token_segment
+});
+
+var filtered_search_token_segment_documentation = {
+  description,
+  bootstrapComponent: null,
+  propsInfo: {
+    active: {
+      additionalInfo: 'If this term token is currently active'
+    },
+    options: {
+      additionalInfo: ''
+    },
+    optionTextField: {
+      additionalInfo: ''
+    },
+    customInputKeydownHandler: {
+      additionalInfo: ''
+    },
+    value: {
+      additionalInfo: 'Current term value'
+    }
+  },
+  events: [{
+    event: 'activate',
+    description: 'Emitted on mousedown event on the main component'
+  }, {
+    event: 'backspace',
+    description: 'Emitted when Backspace is pressed and the value is empty'
+  }, {
+    event: 'complete',
+    description: 'Emitted when suggestion is selected from the suggestion list'
+  }, {
+    event: 'submit',
+    description: 'Emitted when Enter is pressed and no suggestion is selected'
+  }, {
+    event: 'split',
+    args: [{
+      arg: 'newStrings',
+      description: '(Array of strings) New strings to be converted into term tokens'
+    }],
+    description: 'Emitted when Space appears in token segment value'
+  }]
+};
+
+export default filtered_search_token_segment_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token_segment.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token_segment.js
new file mode 100644
index 00000000000000..71f07f5dee07e2
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_token_segment.js
@@ -0,0 +1,309 @@
+import _last from 'lodash/last';
+import { Portal } from 'portal-vue';
+import { COMMA } from '../../../utils/constants';
+import GlFilteredSearchSuggestion from './filtered_search_suggestion';
+import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list';
+import { splitOnQuotes, wrapTokenInQuotes } from './filtered_search_utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    Portal,
+    GlFilteredSearchSuggestionList,
+    GlFilteredSearchSuggestion
+  },
+  inject: ['portalName', 'alignSuggestions'],
+  inheritAttrs: false,
+  props: {
+    active: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    label: {
+      type: String,
+      required: false,
+      default: 'Search'
+    },
+    multiSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    options: {
+      type: Array,
+      required: false,
+      default: () => null
+    },
+    optionTextField: {
+      type: String,
+      required: false,
+      default: 'value'
+    },
+    customInputKeydownHandler: {
+      type: Function,
+      required: false,
+      default: () => () => false
+    },
+    value: {
+      required: true,
+      validator: () => true
+    }
+  },
+
+  data() {
+    return {
+      fallbackValue: this.value
+    };
+  },
+
+  computed: {
+    matchingOption() {
+      var _this$options;
+
+      return (_this$options = this.options) === null || _this$options === void 0 ? void 0 : _this$options.find(o => o.value === this.value);
+    },
+
+    nonMultipleValue() {
+      return this.multiSelect ? _last(this.value.split(COMMA)) : this.value;
+    },
+
+    inputValue: {
+      get() {
+        return this.matchingOption ? this.matchingOption[this.optionTextField] : this.nonMultipleValue;
+      },
+
+      set(v) {
+        var _this$getMatchingOpti, _this$getMatchingOpti2;
+
+        this.$emit('input', (_this$getMatchingOpti = (_this$getMatchingOpti2 = this.getMatchingOptionForInputValue(v)) === null || _this$getMatchingOpti2 === void 0 ? void 0 : _this$getMatchingOpti2.value) !== null && _this$getMatchingOpti !== void 0 ? _this$getMatchingOpti : v);
+      }
+
+    },
+
+    hasOptionsOrSuggestions() {
+      var _this$options2;
+
+      return ((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.length) || this.$slots.suggestions;
+    },
+
+    defaultSuggestedValue() {
+      var _ref;
+
+      if (!this.options) {
+        return this.nonMultipleValue;
+      }
+
+      if (this.value) {
+        const match = this.getMatchingOptionForInputValue(this.inputValue) || this.getMatchingOptionForInputValue(this.inputValue, {
+          loose: true
+        });
+        return match === null || match === void 0 ? void 0 : match.value;
+      }
+
+      const defaultSuggestion = this.options.find(op => op.default);
+      return (_ref = defaultSuggestion !== null && defaultSuggestion !== void 0 ? defaultSuggestion : this.options[0]) === null || _ref === void 0 ? void 0 : _ref.value;
+    }
+
+  },
+  watch: {
+    active: {
+      immediate: true,
+
+      handler(newValue) {
+        if (newValue) {
+          this.activate();
+        } else {
+          this.deactivate();
+        }
+      }
+
+    },
+
+    inputValue(newValue) {
+      var _this$getMatchingOpti3, _this$getMatchingOpti4;
+
+      const hasUnclosedQuote = newValue.split('"').length % 2 === 0;
+
+      if (newValue.indexOf(' ') === -1 || hasUnclosedQuote) {
+        return;
+      }
+
+      const [firstWord, ...otherWords] = splitOnQuotes(newValue).filter((w, idx, arr) => Boolean(w) || idx === arr.length - 1);
+      this.$emit('input', (_this$getMatchingOpti3 = (_this$getMatchingOpti4 = this.getMatchingOptionForInputValue(firstWord)) === null || _this$getMatchingOpti4 === void 0 ? void 0 : _this$getMatchingOpti4.value) !== null && _this$getMatchingOpti3 !== void 0 ? _this$getMatchingOpti3 : firstWord);
+
+      if (otherWords.length) {
+        this.$emit('split', otherWords);
+      }
+    }
+
+  },
+  methods: {
+    emitIfInactive(e) {
+      if (!this.active) {
+        this.$emit('activate');
+        e.preventDefault();
+      }
+    },
+
+    getMatchingOptionForInputValue(v) {
+      var _this$options3;
+
+      let {
+        loose
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+        loose: false
+      };
+      return (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.find(o => loose ? o[this.optionTextField].startsWith(v) : [this.optionTextField] === v);
+    },
+
+    activate() {
+      this.fallbackValue = this.value;
+      this.$nextTick(() => {
+        const {
+          input
+        } = this.$refs;
+
+        if (input) {
+          input.focus();
+          input.scrollIntoView({
+            block: 'nearest',
+            inline: 'end'
+          });
+          this.alignSuggestions(input);
+        }
+      });
+    },
+
+    deactivate() {
+      var _this$matchingOption;
+
+      if (!this.options) {
+        return;
+      }
+
+      if (((_this$matchingOption = this.matchingOption) === null || _this$matchingOption === void 0 ? void 0 : _this$matchingOption.value) !== this.value) {
+        this.$emit('input', this.fallbackValue);
+      }
+    },
+
+    applySuggestion(suggestedValue) {
+      const formattedSuggestedValue = wrapTokenInQuotes(suggestedValue);
+      this.$emit('select', formattedSuggestedValue);
+
+      if (!this.multiSelect) {
+        this.$emit('input', formattedSuggestedValue);
+        this.$emit('complete', formattedSuggestedValue);
+      }
+    },
+
+    handleInputKeydown(e) {
+      const {
+        key
+      } = e;
+      const {
+        suggestions
+      } = this.$refs;
+      const suggestedValue = suggestions === null || suggestions === void 0 ? void 0 : suggestions.getValue();
+
+      if (key === 'Backspace') {
+        if (this.inputValue === '') {
+          e.preventDefault();
+          this.$emit('backspace');
+        }
+
+        return;
+      }
+
+      const handlers = {
+        Enter: () => {
+          e.preventDefault();
+
+          if (suggestedValue != null) {
+            this.applySuggestion(suggestedValue);
+          } else {
+            this.$emit('submit');
+          }
+        },
+        ':': () => {
+          if (suggestedValue != null) {
+            e.preventDefault();
+            this.applySuggestion(suggestedValue);
+          }
+        },
+        Escape: () => {
+          e.preventDefault();
+          this.$emit('complete');
+        }
+      };
+      const suggestionsHandlers = {
+        ArrowDown: () => suggestions.nextItem(),
+        Down: () => suggestions.nextItem(),
+        ArrowUp: () => suggestions.prevItem(),
+        Up: () => suggestions.prevItem()
+      };
+
+      if (this.hasOptionsOrSuggestions) {
+        Object.assign(handlers, suggestionsHandlers);
+      }
+
+      if (Object.keys(handlers).includes(key)) {
+        handlers[key]();
+        return;
+      }
+
+      this.customInputKeydownHandler(e, {
+        suggestedValue,
+        inputValue: this.inputValue,
+        applySuggestion: v => this.applySuggestion(v)
+      });
+    },
+
+    handleBlur() {
+      if (this.multiSelect) {
+        this.$emit('complete');
+      } else if (this.active) {
+        this.$emit('deactivate');
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-filtered-search-token-segment",class:{ 'gl-filtered-search-token-segment-active': _vm.active },attrs:{"data-testid":"filtered-search-token-segment"},on:{"mousedown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.emitIfInactive($event)}}},[(_vm.active)?[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}}),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",[_vm._v("\n              "+_vm._s(option[_vm.optionTextField])+"\n            ")],null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",[_vm._v(_vm._s(_vm.inputValue))],null,{ inputValue: _vm.inputValue })],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_utils.js b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_utils.js
new file mode 100644
index 00000000000000..000aa5c4514e93
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/filtered_search/filtered_search_utils.js
@@ -0,0 +1,137 @@
+import _isString from 'lodash/isString';
+import _last from 'lodash/last';
+import _first from 'lodash/first';
+
+const TERM_TOKEN_TYPE = 'filtered-search-term';
+function isEmptyTerm(token) {
+  return token.type === TERM_TOKEN_TYPE && token.value.data.trim() === '';
+}
+function normalizeTokens(tokens) {
+  const result = [];
+  tokens.forEach(token => {
+    if (isEmptyTerm(token)) {
+      return;
+    }
+
+    if (token.type !== TERM_TOKEN_TYPE) {
+      result.push({ ...token
+      });
+    } else if (result.length > 0 && typeof result[result.length - 1] === 'string') {
+      result[result.length - 1] += ` ${token.value.data}`;
+    } else {
+      result.push(token.value.data);
+    }
+  });
+  return result;
+}
+
+function assertValidTokens(tokens) {
+  if (!Array.isArray(tokens) && !typeof tokens === 'string') {
+    throw new TypeError('Either string or array of tokens is expected');
+  }
+}
+
+function needDenormalization(tokens) {
+  if (typeof tokens === 'string') {
+    return true;
+  }
+
+  assertValidTokens(tokens);
+  return tokens.some(t => typeof t === 'string');
+}
+function denormalizeTokens(inputTokens) {
+  assertValidTokens(inputTokens);
+  const tokens = Array.isArray(inputTokens) ? inputTokens : [inputTokens];
+  const result = [];
+  tokens.forEach(t => {
+    if (typeof t === 'string') {
+      const stringTokens = t.split(' ').filter(Boolean);
+      stringTokens.forEach(strToken => result.push({
+        type: TERM_TOKEN_TYPE,
+        value: {
+          data: strToken
+        }
+      }));
+    } else {
+      result.push(t);
+    }
+  });
+  return result;
+}
+function splitOnQuotes(str) {
+  if (_first(str) === "'" && _last(str) === "'") {
+    return [str];
+  }
+
+  if (_first(str) === '"' && _last(str) === '"') {
+    return [str];
+  }
+
+  const queue = str.split(' ');
+  const result = [];
+  let waitingForMatchingQuote = false;
+  let quoteContent = '';
+
+  while (queue.length) {
+    const part = queue.shift();
+    const quoteIndex = part.indexOf('"');
+
+    if (quoteIndex === -1) {
+      if (waitingForMatchingQuote) {
+        quoteContent += ` ${part}`;
+      } else {
+        result.push(part);
+      }
+    } else {
+      const [firstPart, secondPart] = part.split('"', 2);
+
+      if (waitingForMatchingQuote) {
+        waitingForMatchingQuote = false;
+        quoteContent += ` ${firstPart}"`;
+        result.push(quoteContent);
+        quoteContent = '';
+
+        if (secondPart.length) {
+          queue.unshift(secondPart);
+        }
+      } else {
+        waitingForMatchingQuote = true;
+
+        if (firstPart.length) {
+          result.push(firstPart);
+        }
+
+        quoteContent = `"${secondPart}`;
+      }
+    }
+  }
+
+  return result;
+}
+/**
+ *  wraps the incoming token in double quotes.
+ *  Eg. Foo Bar becomes "Foo Bar"
+ *
+ *  1. token must have space.
+ *  2. token should not already have a quote around it.
+ */
+
+function wrapTokenInQuotes(token) {
+  if (!_isString(token)) {
+    return token;
+  }
+
+  if (!token.includes(' ')) {
+    return token;
+  }
+
+  const quotes = ["'", '"']; // If the token starts and ends with a quote, eg. "Foo Bar", then return the original token.
+
+  if (quotes.some(quote => _first(token) === quote && _last(token) === quote)) {
+    return token;
+  }
+
+  return `"${token}"`;
+}
+
+export { TERM_TOKEN_TYPE, denormalizeTokens, isEmptyTerm, needDenormalization, normalizeTokens, splitOnQuotes, wrapTokenInQuotes };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form.documentation.js
new file mode 100644
index 00000000000000..833a0fab5cdfd7
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form.documentation.js
@@ -0,0 +1,7 @@
+var description = "A wrapper element for `gl-form-*` input elements. Supports `@submit` and `@reset` events, as well as\ncontrolling validation settings for form inputs.\n";
+
+var form_documentation = {
+  description
+};
+
+export default form_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form.js
new file mode 100644
index 00000000000000..df219fb9908a6b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form.js
@@ -0,0 +1,47 @@
+import { BForm } from 'bootstrap-vue/esm/components/form';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BForm
+  },
+  inheritAttrs: false
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form',_vm._g(_vm._b({},'b-form',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox/form_checkbox.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox/form_checkbox.documentation.js
new file mode 100644
index 00000000000000..51e88e4f72d868
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox/form_checkbox.documentation.js
@@ -0,0 +1,8 @@
+var description = "Form checkbox groups for general use inside forms.\n\n## Stacked\n\nBy default, the GitLab Design guide mandates the `<gl-form-checkbox-group>` be `stacked` and is\nnon-changeable at this time.\n";
+
+var form_checkbox_documentation = {
+  description,
+  followsDesignSystem: true
+};
+
+export default form_checkbox_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox/form_checkbox.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox/form_checkbox.js
new file mode 100644
index 00000000000000..966b7bd73d8fe7
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox/form_checkbox.js
@@ -0,0 +1,72 @@
+import { BFormCheckbox } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormCheckbox',
+  components: {
+    BFormCheckbox
+  },
+  inheritAttrs: false,
+  model: {
+    prop: 'checked',
+    event: 'input'
+  },
+  methods: {
+    change($event) {
+      /**
+       * Emitted when selected value(s) is changed due to user interaction.
+       *
+       * @event change
+       */
+      this.$emit('change', $event);
+    },
+
+    input($event) {
+      /**
+       * Emitted when checked state is changed.
+       *
+       * @event input
+       */
+      this.$emit('input', $event);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-checkbox',_vm._b({staticClass:"gl-form-checkbox",on:{"change":_vm.change,"input":_vm.input}},'b-form-checkbox',_vm.$attrs,false),[_vm._t("default"),_vm._v(" "),(Boolean(_vm.$scopedSlots.help))?_c('p',{staticClass:"help-text"},[_vm._t("help")],2):_vm._e()],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox/form_checkbox_group.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox/form_checkbox_group.js
new file mode 100644
index 00000000000000..4e802d52f3a2f7
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox/form_checkbox_group.js
@@ -0,0 +1,60 @@
+import { BFormCheckboxGroup } from 'bootstrap-vue/esm/index.js';
+import formOptionsMixin from 'bootstrap-vue/esm/mixins/form-options';
+import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
+import GlFormCheckbox from './form_checkbox';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormCheckboxGroup',
+  components: {
+    BFormCheckboxGroup,
+    GlFormCheckbox
+  },
+  directives: {
+    SafeHtml: SafeHtmlDirective
+  },
+  mixins: [formOptionsMixin],
+  inheritAttrs: false,
+  model: {
+    prop: 'checked',
+    event: 'input'
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('b-form-checkbox-group',_vm._b({staticClass:"gl-form-checkbox-group",attrs:{"stacked":""},on:{"change":function($event){return _vm.$emit('change', $event)},"input":function($event){return _vm.$emit('input', $event)}}},'b-form-checkbox-group',_vm.$attrs,false),[_vm._t("first"),_vm._v(" "),_vm._l((_vm.formOptions),function(option,idx){return _c('gl-form-checkbox',{key:idx,attrs:{"value":option.value,"disabled":option.disabled}},[(option.html)?_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(option.html),expression:"option.html"}]}):_c('span',[_vm._v(_vm._s(option.text))])])}),_vm._v(" "),_vm._t("default")],2)],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/checkbox_tree_node.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/checkbox_tree_node.js
new file mode 100644
index 00000000000000..85bbc20c0af8dc
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/checkbox_tree_node.js
@@ -0,0 +1,83 @@
+import GlFormCheckbox from '../form_checkbox/form_checkbox';
+import { QA_PREFIX } from './models/constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormCheckboxTreeNode',
+  qaPrefix: QA_PREFIX,
+  components: {
+    GlFormCheckbox
+  },
+  inject: ['tree'],
+  props: {
+    option: {
+      type: Object,
+      required: true
+    },
+    isNested: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    node() {
+      return this.tree.getNode(this.option.value);
+    },
+
+    label() {
+      return this.node.label || this.node.value;
+    },
+
+    rootClass() {
+      return this.isNested ? 'gl-ml-6' : null;
+    },
+
+    checkboxClass() {
+      const {
+        isChecked,
+        isIndeterminate
+      } = this.node;
+      return [isChecked && 'js-is-checked', isIndeterminate && 'js-is-indeterminate'];
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.rootClass,attrs:{"data-qa-selector":("" + (_vm.$options.qaPrefix) + (_vm.option.value))}},[_c('gl-form-checkbox',{class:_vm.checkboxClass,attrs:{"checked":_vm.node.isChecked,"indeterminate":_vm.node.isIndeterminate},on:{"change":function($event){return _vm.tree.toggleOption(_vm.option, $event)}}},[_vm._v("\n    "+_vm._s(_vm.label)+"\n  ")]),_vm._v(" "),_vm._l((_vm.option.children),function(child){return _c('gl-form-checkbox-tree-node',{key:child.value,attrs:{"option":child,"is-nested":""}})})],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/examples/form_checkbox_tree.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/examples/form_checkbox_tree.basic.example.js
new file mode 100644
index 00000000000000..44595170f8dea5
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/examples/form_checkbox_tree.basic.example.js
@@ -0,0 +1,103 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-checkbox-tree',{attrs:{"value":[1, 11, 12, 121, 122, 2113, 3],"options":[
+    {
+      value: 1,
+      label: 'Felidae',
+      children: [
+        {
+          value: 11,
+          label: 'Lion',
+        },
+        {
+          value: 12,
+          label: 'Felinae',
+          children: [
+            {
+              value: 121,
+              label: 'Cheetah',
+            },
+            {
+              value: 122,
+              label: 'Ocelot',
+            } ],
+        } ],
+    },
+    {
+      value: 2,
+      label: 'Canidae',
+      children: [
+        {
+          value: 21,
+          label: 'Caninae',
+          children: [
+            {
+              value: 211,
+              label: 'Canis lupus',
+              children: [
+                {
+                  value: 2112,
+                  label: 'Wolf',
+                },
+                {
+                  value: 2113,
+                  label: 'Himalayan wolf',
+                },
+                {
+                  value: 2114,
+                  label: 'Dingo',
+                } ],
+            },
+            {
+              value: 212,
+              label: 'Black-backed jackal',
+            } ],
+        },
+        {
+          value: 22,
+          label: 'Fennec fox',
+        } ],
+    },
+    {
+      value: 3,
+      label: 'Karabair',
+    },
+    {
+      value: 4,
+      label: 'Okapi',
+    } ]}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/examples/index.js
new file mode 100644
index 00000000000000..b5f3f731546c84
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/examples/index.js
@@ -0,0 +1,13 @@
+import BasicExample from './form_checkbox_tree.basic.example';
+
+var index = [{
+  name: 'Basic',
+  items: [{
+    id: 'form-checkbox-tree-basic',
+    name: 'Basic',
+    description: 'Basic Form Checkbox Tree',
+    component: BasicExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/form_checkbox_tree.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/form_checkbox_tree.documentation.js
new file mode 100644
index 00000000000000..2db6c5aaa21511
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/form_checkbox_tree.documentation.js
@@ -0,0 +1,37 @@
+import examples from './examples';
+import { V_MODEL } from './models/constants';
+
+var form_checkbox_tree = "# GlFormCheckboxTree\n\n<!-- STORY -->\n\n`GlFormCheckboxTree` lets you display an options structure where any option can have n-level of\nchildren. It can be useful for creating a search filter that has nested facets.\n\n## Usage\n\n`GlFormCheckboxTree` accepts an `options` prop representing the available options in the form of\nan n-level deep tree. Each option should have a `value` and can have optional\n`label` and `children`. If `label` is omitted, `value` is used as the checkbox's label.\nHere's a simple `options` tree for example:\n\n```js\n[\n  {\n    label: 'Option #1',\n    value: 1,\n    children: [\n      {\n        label: 'Option #2',\n        value: 2,\n      },\n    ],\n  },\n  {\n    label: 'Option #3',\n    value: 3,\n  },\n]\n```\n\n`GlFormCheckboxTree` exposes the selected options via a `v-model` which is being kept in sync with\nthe `change` event.\n\n## Dos and don'ts\n\n### Don't\n\nWhen rendering a `GlFormCheckboxTree` with pre-selected options, all the selected values should be\npassed to the component via the `v-model`/`value` property. For example, with the options tree\nabove, if you wanted options `1` and `2` to be pre-selected, make sure that they are both included\nin the initial value, don't rely on the component to infer initially checked boxes by only passing\n`1` or `2`.\n\n```html\n<!-- Good -->\n<gl-form-checkbox-tree\n  :value=\"[1, 2]\"\n  :options=\"[\n    {\n      value: 1,\n      children: [\n        {\n          value: 2,\n        },\n      ],\n    },\n  ]\"\n/>\n\n<!-- Bad -->\n<gl-form-checkbox-tree\n  :value=\"[1]\"\n  :options=\"[\n    {\n      value: 1,\n      children: [\n        {\n          value: 2,\n        },\n      ],\n    },\n  ]\"\n/>\n```\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': form_checkbox_tree
+});
+
+var form_checkbox_tree_documentation = {
+  description,
+  examples,
+  propsInfo: {
+    options: {
+      additionalInfo: 'The options tree.'
+    },
+    [V_MODEL.PROP]: {
+      additionalInfo: 'The selected options as an array of values.'
+    },
+    hideToggleAll: {
+      additionalInfo: 'Set to true to hide the "Select/unselect all" checkbox'
+    },
+    selectAllLabel: {
+      additionalInfo: 'Label for the toggle all checkbox when some or all options are unchecked'
+    },
+    unselectAllLabel: {
+      additionalInfo: 'Label for the toggle all checkbox when all options are checked'
+    }
+  },
+  events: [{
+    event: V_MODEL.EVENT,
+    description: 'Emitted the selection changes.'
+  }]
+};
+
+export default form_checkbox_tree_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/form_checkbox_tree.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/form_checkbox_tree.js
new file mode 100644
index 00000000000000..3c8ae3e31b5ec0
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/form_checkbox_tree.js
@@ -0,0 +1,132 @@
+import GlFormCheckbox from '../form_checkbox/form_checkbox';
+import GlFormGroup from '../form_group/form_group';
+import GlFormCheckboxTreeNode from './checkbox_tree_node';
+import { V_MODEL } from './models/constants';
+import { Tree } from './models/tree';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlFormGroup,
+    GlFormCheckbox,
+    GlFormCheckboxTreeNode
+  },
+
+  provide() {
+    return {
+      tree: this.tree
+    };
+  },
+
+  model: {
+    prop: V_MODEL.PROP,
+    event: V_MODEL.EVENT
+  },
+  props: {
+    /**
+     * Options tree where each option is in the form:
+     * {
+     *  value: String|Number,
+     *  label: String,
+     *  children: Array,
+     * }
+     */
+    options: {
+      type: Array,
+      required: true
+    },
+
+    /**
+     * Selected options
+     */
+    value: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    hideToggleAll: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    selectAllLabel: {
+      type: String,
+      required: false,
+      default: 'Select all'
+    },
+    unselectAllLabel: {
+      type: String,
+      required: false,
+      default: 'Unselect all'
+    },
+    label: {
+      type: String,
+      required: false,
+      default: 'Checkbox tree'
+    },
+    labelSrOnly: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      tree: new Tree(this.options, this.value)
+    };
+  },
+
+  computed: {
+    toggleAllLabel() {
+      return this.tree.allOptionsChecked ? this.unselectAllLabel : this.selectAllLabel;
+    }
+
+  },
+  watch: {
+    'tree.selected': {
+      handler(selected) {
+        this.$emit(V_MODEL.EVENT, selected);
+      }
+
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-group',{attrs:{"label":_vm.label,"label-sr-only":_vm.labelSrOnly}},[(!_vm.hideToggleAll)?_c('gl-form-checkbox',{staticClass:"gl-form-checkbox-tree-toggle-all",attrs:{"checked":_vm.tree.allOptionsChecked,"indeterminate":_vm.tree.someOptionsChecked},on:{"change":_vm.tree.toggleAllOptions}},[_vm._v("\n    "+_vm._s(_vm.toggleAllLabel)+"\n  ")]):_vm._e(),_vm._v(" "),_vm._l((_vm.options),function(option){return _c('gl-form-checkbox-tree-node',{key:option.value,attrs:{"option":option}})})],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/models/constants.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/models/constants.js
new file mode 100644
index 00000000000000..aa30c837f3683b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/models/constants.js
@@ -0,0 +1,12 @@
+const CHECKED_STATE = {
+  UNCHECKED: 0,
+  INDETERMINATE: 1,
+  CHECKED: 2
+};
+const V_MODEL = {
+  PROP: 'value',
+  EVENT: 'change'
+};
+const QA_PREFIX = 'form_checkbox_tree_node_';
+
+export { CHECKED_STATE, QA_PREFIX, V_MODEL };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/models/node.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/models/node.js
new file mode 100644
index 00000000000000..f841447d464130
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/models/node.js
@@ -0,0 +1,60 @@
+import { CHECKED_STATE } from './constants';
+
+class Node {
+  constructor(_ref) {
+    let {
+      value,
+      label,
+      parent = null,
+      children = [],
+      depth,
+      isChecked
+    } = _ref;
+    this.value = value;
+    this.label = label;
+    this.parent = parent;
+    this.children = children;
+    this.depth = depth;
+    this.checkedState = isChecked ? CHECKED_STATE.CHECKED : CHECKED_STATE.UNCHECKED;
+  }
+  /**
+   * Sets the node's checked state
+   * @param {number} checkedState
+   */
+
+
+  setCheckedState(checkedState) {
+    this.checkedState = checkedState;
+  }
+
+  get isChild() {
+    return this.parent !== null;
+  }
+
+  get isParent() {
+    return this.children.length > 0;
+  }
+
+  get isLeaf() {
+    return !this.isParent;
+  }
+
+  get isUnchecked() {
+    return this.checkedState === CHECKED_STATE.UNCHECKED;
+  }
+
+  get isIndeterminate() {
+    return this.checkedState === CHECKED_STATE.INDETERMINATE;
+  }
+
+  get isChecked() {
+    return this.checkedState === CHECKED_STATE.CHECKED;
+  }
+
+  get isCheckedOrIndeterminate() {
+    return this.isChecked || this.isIndeterminate;
+  }
+
+}
+
+export { Node };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/models/tree.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/models/tree.js
new file mode 100644
index 00000000000000..60661a47befed9
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_checkbox_tree/models/tree.js
@@ -0,0 +1,221 @@
+import { CHECKED_STATE } from './constants';
+import { Node } from './node';
+
+class Tree {
+  constructor(options, selected) {
+    this.treeDepth = 0;
+    this.nodes = {};
+    this.toggleAllOptions = this.toggleAllOptions.bind(this);
+    this.initNodes(options, selected);
+    this.initIndeterminateStates();
+  }
+  /**
+   * @returns {[Node]} The tree as an array of Node instances
+   */
+
+
+  get nodesList() {
+    return Object.values(this.nodes);
+  }
+  /**
+   * @returns {array} The values currently selected
+   */
+
+
+  get selected() {
+    return this.nodesList.filter(node => node.isChecked).map(node => node.value);
+  }
+  /**
+   * @returns {boolean} Whether all options are checked
+   */
+
+
+  get allOptionsChecked() {
+    return this.selected.length === this.nodesList.length;
+  }
+  /**
+   * @returns {boolean} Whether some, but not all options are checked
+   */
+
+
+  get someOptionsChecked() {
+    return this.selected.length > 0 && !this.allOptionsChecked;
+  }
+  /**
+   * Creates a flat tree of Node instances.
+   * @param {array}  options  The options list
+   * @param {array}  selected  Pre-selected option values
+   * @param {object} parent The options' parent
+   * @param {number} depth  The current depth-level in the tree
+   */
+
+
+  initNodes() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let selected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    let parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    let depth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+
+    if (!options.length) {
+      return;
+    }
+
+    this.treeDepth = depth > this.treeDepth ? depth : this.treeDepth;
+    options.forEach(option => {
+      const isChecked = selected.includes(option.value);
+      this.nodes[option.value] = new Node({ ...option,
+        parent,
+        isChecked,
+        depth
+      });
+      this.initNodes(option.children, selected, option, depth + 1);
+    });
+  }
+  /**
+   * Looks for UNCHECKED nodes and sets their checked state to INDETERMINATE if needed. We start
+   * with the deepest leaves and we go up level by level to propagate the correct INDETERMINATE
+   * states to each parent node.
+   */
+
+
+  initIndeterminateStates() {
+    const nodes = [...this.nodesList];
+
+    for (let i = this.treeDepth; i >= 0; i -= 1) {
+      const removeIndices = [];
+      nodes.forEach((node, nodeIndex) => {
+        if (node.depth === i && node.isUnchecked) {
+          node.setCheckedState(this.optionHasSomeChildrenChecked(node) ? CHECKED_STATE.INDETERMINATE : node.checkedState);
+          removeIndices.push(nodeIndex);
+        }
+      });
+      removeIndices.reverse().forEach(index => {
+        nodes.splice(index, 1);
+      });
+    }
+  }
+  /**
+   * Returns true if all of the option's children are checked, false otherwise.
+   * @param {object} option
+   * @returns {boolean}
+   */
+
+
+  optionHasAllChildrenChecked(option) {
+    return this.getOptionChildren(option).every(child => child.isChecked);
+  }
+  /**
+   * Returns true if at least one of the option's children is in a checked or indeterminate state,
+   * returns false otherwise.
+   * We consider the INDETERMINATE state as a checked state so we can propagate INDETERMINATE states
+   * to the option's parents.
+   * @param {object} option
+   * @returns {boolean}
+   */
+
+
+  optionHasSomeChildrenChecked(option) {
+    return this.getOptionChildren(option).some(child => child.isCheckedOrIndeterminate);
+  }
+  /**
+   * Returns the Node instance for a given option's value.
+   * @param {number|string} value The option's value
+   * @returns {Node}
+   */
+
+
+  getNode(value) {
+    return this.nodes[value];
+  }
+  /**
+   * Returns the option's children as Node instances.
+   * @param {object} option
+   * @returns {[Node]}
+   */
+
+
+  getOptionChildren(option) {
+    return option.children.map(_ref => {
+      let {
+        value
+      } = _ref;
+      return this.getNode(value);
+    });
+  }
+  /**
+   * Sets a node's state based on whether it got checked or unchecked
+   * @param {Node} node The node to be toggled
+   * @param {boolean} checked Whether the node should be checked
+   */
+
+
+  static toggleNodeState(node, checked) {
+    node.setCheckedState(checked ? CHECKED_STATE.CHECKED : CHECKED_STATE.UNCHECKED);
+  }
+  /**
+   * Toggles all options.
+   * @param {boolean} checked Whether the options should be checked or unchecked
+   */
+
+
+  toggleAllOptions(checked) {
+    this.nodesList.forEach(node => {
+      Tree.toggleNodeState(node, checked);
+    });
+  }
+  /**
+   * Toggles an option's checked state and propagates the state change to the
+   * option's parents and children.
+   * @param {object} param0 The option to be toggled
+   * @param {boolean} checked Whether the option is checked
+   * @param {boolean} propagateToParent Whether the state should be propagated to the parents
+   */
+
+
+  toggleOption(_ref2, checked) {
+    let {
+      value
+    } = _ref2;
+    let propagateToParent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    const node = this.getNode(value);
+    Tree.toggleNodeState(node, checked);
+
+    if (node.isChild && propagateToParent) {
+      this.toggleParentOption(node.parent);
+    }
+
+    if (node.isParent) {
+      node.children.forEach(child => this.toggleOption(child, checked, false));
+    }
+  }
+  /**
+   * Toggles a parent option's checked state. This is called as a result of a child option being
+   * toggled by the user and the change being propagated to that option's parents. This method
+   * recursively propagates the state changes to all the ancestors chain until we have reached the
+   * tree's trunk.
+   * @param {object} param0 The option to be toggled
+   */
+
+
+  toggleParentOption(_ref3) {
+    let {
+      value
+    } = _ref3;
+    const node = this.getNode(value);
+
+    if (this.optionHasAllChildrenChecked(node)) {
+      node.checkedState = CHECKED_STATE.CHECKED;
+    } else if (this.optionHasSomeChildrenChecked(node)) {
+      node.checkedState = CHECKED_STATE.INDETERMINATE;
+    } else {
+      node.checkedState = CHECKED_STATE.UNCHECKED;
+    }
+
+    if (node.isChild) {
+      this.toggleParentOption(node.parent);
+    }
+  }
+
+}
+
+export { Tree };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_combobox/constants.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_combobox/constants.js
new file mode 100644
index 00000000000000..9b481eb259edfe
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_combobox/constants.js
@@ -0,0 +1,4 @@
+const tokenList = ['giraffe', 'dog', 'dodo', 'komodo dragon', 'hippo', 'platypus', 'jackalope', 'quetzal', 'badger', 'vicuña', 'whale', 'xenarthra'];
+const labelText = 'Animals We Tolerate';
+
+export { labelText, tokenList };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_combobox/form_combobox.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_combobox/form_combobox.documentation.js
new file mode 100644
index 00000000000000..fd4efe9e65fec5
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_combobox/form_combobox.documentation.js
@@ -0,0 +1,13 @@
+var form_combobox = "Use this component to add a [`FormInput`](/?path=/story/base-form-form-input--default) component\nwith synchronous autocomplete dropdown. It behaves as follows:\n\n- Typing matches tokens; dropdown disappears when there is no match  \n- Up and down arrows navigate the dropdown  \n- Enter selects keyboard-highlighted item; clicking overrides this  \n- Esc closes dropdown when it is open, clears field when it is not  \n- Browser/native autocomplete dropdown hidden when ours is open, shows when it is not  \n- Tab selects current entered text and moves to next field  \n\nThis behavior based on\n[this w3c pattern](https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html)\nand [this accessible combobox example](https://alligator.io/vuejs/vue-a11y-autocomplete/).\n\n## Usage\n\nThe combobox accepts an array of string tokens, a `v-model`, and label text. Internally, it generates\nunique element IDs so multiple can be used on one page without clashing.\n\nOn selection it sets the input value to the selected string and emits a `value-selected` event for\nconsumption by parent components.\n\n```html\n<gl-form-combobox\n  v-model=\"inputVal\"\n  :token-list=\"tokens\"\n  label-text=\"Combobox Label\"\n/>\n```\n\nIt does not have a loading state nor does it accept tokens other than strings. It allows for one\nselected value.\n\n### What if I need to load the options asynchronously?\n\nYou may want to look at [`GlSearchBoxByType`] or [`GlSearchBoxByClick`].\n\n### What if I need multiple options?\n\nThe [`GlTokenSelector`] may be what you need. Alternately, [`GlFilteredSearch`] will let you search\nand include tokens.\n\n## Edge cases\n\nThe algorithm to match tokens with the input is very naive. If you need to use the component with a\nvery large list of matches, you may want to update the implementation or use one of the search\ninputs, like [`GlSearchBoxByType`], [`GlSearchBoxByClick`], or [`GlFilteredSearch`].\n\n[`GlSearchBoxByType`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-type--default\n[`GlSearchBoxByClick`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-click--default\n[`GlTokenSelector`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-token-selector--default\n[`GlFilteredSearch`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-filtered-search--default\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': form_combobox
+});
+
+var form_combobox_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default form_combobox_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_combobox/form_combobox.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_combobox/form_combobox.js
new file mode 100644
index 00000000000000..c6a6dbc9950d5b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_combobox/form_combobox.js
@@ -0,0 +1,191 @@
+import _uniqueId from 'lodash/uniqueId';
+import GlDropdownItem from '../../dropdown/dropdown_item';
+import GlFormGroup from '../form_group/form_group';
+import GlFormInput from '../form_input/form_input';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormCombobox',
+  components: {
+    GlDropdownItem,
+    GlFormGroup,
+    GlFormInput
+  },
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  props: {
+    labelText: {
+      type: String,
+      required: true
+    },
+    labelSrOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    tokenList: {
+      type: Array,
+      required: true
+    },
+    value: {
+      type: String,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      results: [],
+      arrowCounter: -1,
+      userDismissedResults: false,
+      suggestionsId: _uniqueId('token-suggestions-'),
+      inputId: _uniqueId('token-input-')
+    };
+  },
+
+  computed: {
+    ariaExpanded() {
+      return this.showSuggestions.toString();
+    },
+
+    showAutocomplete() {
+      return this.showSuggestions ? 'off' : 'on';
+    },
+
+    showSuggestions() {
+      return this.results.length > 0;
+    }
+
+  },
+
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside);
+  },
+
+  destroyed() {
+    document.removeEventListener('click', this.handleClickOutside);
+  },
+
+  methods: {
+    closeSuggestions() {
+      this.results = [];
+      this.arrowCounter = -1;
+    },
+
+    handleClickOutside(event) {
+      if (!this.$el.contains(event.target)) {
+        this.closeSuggestions();
+      }
+    },
+
+    onArrowDown() {
+      const newCount = this.arrowCounter + 1;
+
+      if (newCount >= this.results.length) {
+        this.arrowCounter = 0;
+        return;
+      }
+
+      this.arrowCounter = newCount;
+    },
+
+    onArrowUp() {
+      const newCount = this.arrowCounter - 1;
+
+      if (newCount < 0) {
+        this.arrowCounter = this.results.length - 1;
+        return;
+      }
+
+      this.arrowCounter = newCount;
+    },
+
+    onEnter() {
+      const currentToken = this.results[this.arrowCounter] || this.value;
+      this.selectToken(currentToken);
+    },
+
+    onEsc() {
+      if (!this.showSuggestions) {
+        this.$emit('input', '');
+      }
+
+      this.closeSuggestions();
+      this.userDismissedResults = true;
+    },
+
+    onEntry(value) {
+      this.$emit('input', value);
+      this.userDismissedResults = false; // short circuit so that we don't false match on empty string
+
+      if (value.length < 1) {
+        this.closeSuggestions();
+        return;
+      }
+
+      const filteredTokens = this.tokenList.filter(token => token.toLowerCase().includes(value.toLowerCase()));
+
+      if (filteredTokens.length) {
+        this.openSuggestions(filteredTokens);
+      } else {
+        this.closeSuggestions();
+      }
+    },
+
+    openSuggestions(filteredResults) {
+      this.results = filteredResults;
+    },
+
+    selectToken(value) {
+      this.$emit('input', value);
+      this.closeSuggestions();
+      /**
+       * Emitted when a value is selected.
+       * @event value-selected
+       */
+
+      this.$emit('value-selected', value);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-form-combobox dropdown",attrs:{"role":"combobox","aria-owns":_vm.suggestionsId,"aria-expanded":_vm.ariaExpanded}},[_c('gl-form-group',{attrs:{"label":_vm.labelText,"label-for":_vm.inputId,"label-sr-only":_vm.labelSrOnly}},[_c('gl-form-input',{attrs:{"id":_vm.inputId,"value":_vm.value,"type":"text","role":"searchbox","autocomplete":_vm.showAutocomplete,"aria-autocomplete":"list","aria-controls":_vm.suggestionsId,"aria-haspopup":"listbox"},on:{"input":_vm.onEntry,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }$event.preventDefault();return _vm.onEnter($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.closeSuggestions($event)}]}})],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.showSuggestions && !_vm.userDismissedResults),expression:"showSuggestions && !userDismissedResults"}],staticClass:"dropdown-menu dropdown-full-width",class:{ 'show-dropdown': _vm.showSuggestions },attrs:{"id":_vm.suggestionsId,"data-testid":"combobox-dropdown"}},_vm._l((_vm.results),function(result,i){return _c('gl-dropdown-item',{key:i,class:{ 'highlight-dropdown': i === _vm.arrowCounter },attrs:{"role":"option","aria-selected":i === _vm.arrowCounter,"tabindex":"-1"},on:{"click":function($event){return _vm.selectToken(result)}}},[_vm._v("\n      "+_vm._s(result)+"\n    ")])}),1)],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.basic.example.js
new file mode 100644
index 00000000000000..eeb3d34ebfa0b1
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.basic.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-group',{attrs:{"id":"group-id","label":"Label","label-size":"sm","description":"Form group description","label-for":"input1"}},[_c('gl-form-input',{attrs:{"id":"input1"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.disabled.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.disabled.example.js
new file mode 100644
index 00000000000000..43fcf3b8d00c9e
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.disabled.example.js
@@ -0,0 +1,48 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  computed: {
+    disabled() {
+      return true;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-group',{attrs:{"id":"group-id","label":"Label Name","label-size":"sm","description":"This feature is disabled","label-for":"input1"}},[_c('gl-form-input',{attrs:{"id":"input1","type":"text","disabled":_vm.disabled,"value":"Disabled"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.textarea.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.textarea.example.js
new file mode 100644
index 00000000000000..5e035dba836cc8
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.textarea.example.js
@@ -0,0 +1,48 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      text: ''
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-group',{attrs:{"id":"group-id-textarea1","label":"Label Name","label-for":"textarea1"}},[_c('gl-form-textarea',{attrs:{"id":"textarea1","placeholder":"Enter something"},model:{value:(_vm.text),callback:function ($$v) {_vm.text=$$v;},expression:"text"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.validation.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.validation.example.js
new file mode 100644
index 00000000000000..4d7565d5daad57
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/form_group.validation.example.js
@@ -0,0 +1,66 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      name: ''
+    };
+  },
+
+  computed: {
+    state() {
+      return this.name.length >= 4;
+    },
+
+    invalidFeedback() {
+      let feedbackText = 'This field is required.';
+
+      if (this.name.length > 4) {
+        feedbackText = '';
+      } else if (this.name.length > 0) {
+        feedbackText = 'Enter at least 4 characters.';
+      }
+
+      return feedbackText;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-group',{attrs:{"label":"Name","description":"Enter a first and last name.","invalid-feedback":_vm.invalidFeedback,"state":_vm.state,"label-for":"input1"}},[_c('gl-form-input',{attrs:{"id":"input1","state":_vm.state},model:{value:(_vm.name),callback:function ($$v) {_vm.name=(typeof $$v === 'string'? $$v.trim(): $$v);},expression:"name"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/index.js
new file mode 100644
index 00000000000000..e1f3c72f4891e4
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/examples/form_group/index.js
@@ -0,0 +1,27 @@
+import FormGroupBasicExample from './form_group.basic.example';
+import FormGroupDisabledExample from './form_group.disabled.example';
+import FormGroupTextareaExample from './form_group.textarea.example';
+import FormGroupValidationExample from './form_group.validation.example';
+
+var index = [{
+  name: 'Form Group',
+  items: [{
+    id: 'form-group',
+    name: 'basic example',
+    component: FormGroupBasicExample
+  }, {
+    id: 'form-group-validations',
+    name: 'with validations',
+    component: FormGroupValidationExample
+  }, {
+    id: 'form-group-disabled',
+    name: 'disabled',
+    component: FormGroupDisabledExample
+  }, {
+    id: 'form-group-textarea',
+    name: 'textarea',
+    component: FormGroupTextareaExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/form_group.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/form_group.documentation.js
new file mode 100644
index 00000000000000..664245a1e9cbc0
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/form_group.documentation.js
@@ -0,0 +1,11 @@
+import examples from './examples/form_group';
+
+var description = "# Form Group\n\nForm group adds structure to forms.\n";
+
+var form_group_documentation = {
+  description,
+  examples,
+  bootstrapComponent: 'b-form-group'
+};
+
+export default form_group_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/form_group.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/form_group.js
new file mode 100644
index 00000000000000..ededaf419d4d5c
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_group/form_group.js
@@ -0,0 +1,103 @@
+import _isPlainObject from 'lodash/isPlainObject';
+import _isArray from 'lodash/isArray';
+import _isString from 'lodash/isString';
+import { BFormGroup } from 'bootstrap-vue/esm/index.js';
+import GlFormText from '../form_text/form_text';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BFormGroup,
+    GlFormText
+  },
+  inheritAttrs: false,
+  props: {
+    labelClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: null
+    },
+    labelDescription: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    optional: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    optionalText: {
+      type: String,
+      required: false,
+      default: '(optional)'
+    }
+  },
+  computed: {
+    actualLabelClass() {
+      const {
+        labelClass
+      } = this;
+      const defaultClass = 'col-form-label';
+
+      if (_isString(labelClass)) {
+        return `${labelClass} ${defaultClass}`;
+      }
+
+      if (_isArray(labelClass)) {
+        return [...labelClass, defaultClass];
+      }
+
+      if (_isPlainObject(labelClass)) {
+        return { ...labelClass,
+          [defaultClass]: true
+        };
+      }
+
+      return defaultClass;
+    },
+
+    hasLabelDescription() {
+      return Boolean(this.labelDescription || this.$slots['label-description']);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-group',_vm._b({staticClass:"gl-form-group",attrs:{"label-class":_vm.actualLabelClass},scopedSlots:_vm._u([{key:"label",fn:function(){return [_vm._t("label",[_vm._v("\n      "+_vm._s(_vm.$attrs.label)+"\n      "),(_vm.optional)?_c('span',{staticClass:"optional-label",attrs:{"data-testid":"optional-label"}},[_vm._v(_vm._s(_vm.optionalText))]):_vm._e()]),_vm._v(" "),(_vm.hasLabelDescription)?_c('gl-form-text',{attrs:{"data-testid":"label-description"}},[_vm._t("label-description",[_vm._v(_vm._s(_vm.labelDescription))])],2):_vm._e()]},proxy:true},_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-group',_vm.$attrs,false))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input/form_input.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input/form_input.documentation.js
new file mode 100644
index 00000000000000..6814b810ff7a88
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input/form_input.documentation.js
@@ -0,0 +1,8 @@
+var description = "General user input to be used in forms.\n";
+
+var form_input_documentation = {
+  description,
+  followsDesignSystem: true
+};
+
+export default form_input_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input/form_input.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input/form_input.js
new file mode 100644
index 00000000000000..6e77e9db588dc9
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input/form_input.js
@@ -0,0 +1,109 @@
+import { BFormInput } from 'bootstrap-vue/esm/index.js';
+import { formInputSizes } from '../../../../utils/constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const MODEL_PROP = 'value';
+const MODEL_EVENT = 'input';
+var script = {
+  components: {
+    BFormInput
+  },
+  inheritAttrs: false,
+  model: {
+    prop: MODEL_PROP,
+    event: MODEL_EVENT
+  },
+  props: {
+    /**
+     * Maximum width of the input
+     */
+    size: {
+      type: String,
+      required: false,
+      default: null,
+      validator: value => Object.values(formInputSizes).includes(value)
+    }
+  },
+  computed: {
+    cssClasses() {
+      return {
+        [`gl-form-input-${this.size}`]: this.size !== null
+      };
+    },
+
+    listeners() {
+      var _this = this;
+
+      return { ...this.$listeners,
+        // Swap purpose of input and update events from underlying BFormInput.
+        // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
+        input: function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+
+          /**
+           * Emitted to update the v-model
+           *
+           * @event update
+           * @property {string} value new value
+           */
+          _this.$emit('update', ...args);
+        },
+        update: function () {
+          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+            args[_key2] = arguments[_key2];
+          }
+
+          /**
+           * Triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props).
+           * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
+           *
+           * @event input
+           * @property {string} value new value
+           */
+          _this.$emit(MODEL_EVENT, ...args);
+        }
+      };
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-input',_vm._g(_vm._b({staticClass:"gl-form-input",class:_vm.cssClasses},'b-form-input',_vm.$attrs,false),_vm.listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.basic.example.js
new file mode 100644
index 00000000000000..25e8a8e5c56b21
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.basic.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-input-group',{scopedSlots:_vm._u([{key:"prepend",fn:function(){return [_c('gl-input-group-text',[_vm._v("Username")])]},proxy:true},{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}])})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.predefined_options.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.predefined_options.example.js
new file mode 100644
index 00000000000000..677e38f90abab2
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.predefined_options.example.js
@@ -0,0 +1,54 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      optionValues: [{
+        name: 'Embed',
+        value: 'https://embed.com'
+      }, {
+        name: 'Share',
+        value: 'https://share.org'
+      }]
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-input-group',{attrs:{"predefined-options":_vm.optionValues},scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}])})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.predefined_reactive.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.predefined_reactive.example.js
new file mode 100644
index 00000000000000..216fca5e8787e9
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.predefined_reactive.example.js
@@ -0,0 +1,55 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      testVal: 'foo',
+      optionValues: [{
+        name: 'Embed',
+        value: 'https://embed.com'
+      }, {
+        name: 'Share',
+        value: 'https://share.org'
+      }]
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('label',[_vm._v("\n      Data outside of the component\n      "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.testVal),expression:"testVal"}],staticClass:"gl-form-input",attrs:{"type":"text"},domProps:{"value":(_vm.testVal)},on:{"input":function($event){if($event.target.composing){ return; }_vm.testVal=$event.target.value;}}})]),_vm._v(" "),_c('gl-form-input-group',{attrs:{"predefined-options":_vm.optionValues},scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}]),model:{value:(_vm.testVal),callback:function ($$v) {_vm.testVal=$$v;},expression:"testVal"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.reactive.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.reactive.example.js
new file mode 100644
index 00000000000000..dc22b97b6e0f4e
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/form_input_group.reactive.example.js
@@ -0,0 +1,48 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      testVal: 'foo'
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('label',[_vm._v("\n    Data outside of the component\n    "),_c('gl-form-input',{attrs:{"type":"text"},model:{value:(_vm.testVal),callback:function ($$v) {_vm.testVal=$$v;},expression:"testVal"}})],1),_vm._v(" "),_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"prepend",fn:function(){return [_c('gl-input-group-text',[_vm._v("Username")])]},proxy:true},{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}]),model:{value:(_vm.testVal),callback:function ($$v) {_vm.testVal=$$v;},expression:"testVal"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/index.js
new file mode 100644
index 00000000000000..155ad5e350876b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/examples/index.js
@@ -0,0 +1,27 @@
+import BasicExample from './form_input_group.basic.example';
+import PredefinedOptionsExample from './form_input_group.predefined_options.example';
+import PredefinedReactiveExample from './form_input_group.predefined_reactive.example';
+import ReactiveExample from './form_input_group.reactive.example';
+
+var index = [{
+  name: 'Text Input Group',
+  items: [{
+    id: 'input-text-group',
+    name: 'Basic',
+    component: BasicExample
+  }, {
+    id: 'input-text-group-reactive',
+    name: 'Reactive update of/from the component',
+    component: ReactiveExample
+  }, {
+    id: 'input-text-group-predefined-options',
+    name: 'With predefined options',
+    component: PredefinedOptionsExample
+  }, {
+    id: 'input-text-group-predefined-reactive',
+    name: 'With predefined options and reactive updates',
+    component: PredefinedReactiveExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/form_input_group.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/form_input_group.documentation.js
new file mode 100644
index 00000000000000..5fe5caa6b4f152
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/form_input_group.documentation.js
@@ -0,0 +1,32 @@
+import examples from './examples';
+
+var description = "# Form Group Input\n\n<!-- STORY -->\n\nThe `GlFormInputGroup` component allows one to build more advanced text\ninput fields than generic `GlFormInput` when one needs that flexibility.\nBasic usage of the component:\n\n```html\n<div>\n  <gl-form-input-group>\n    <template #prepend>\n      <!-- Content to prepend your text input field -->\n    </template>\n    <template #append>\n      <!-- Content to append your text input field -->\n    </template>\n  </gl-form-input-group>\n</div>\n```\n\nOne can use any other component (custom or `<gl-*>`) in both slots or\nnot to use the slots at all. In the latter, the component will fallback\nto simple `GlFormInput`.\n\n## Predefined options\n\nSometimes custom text input from the user isn't desired. Instead, the\nuser should pick one of the predefined options that will automatically\npopulate the input field. Typically, such cases will also include an\nactionable button (like **Copy**) put into the `append` slot.\n\nTo achieve this effect, the `GlFormInputGroup` component accepts an\narray of options in the form of `predefinedOptions` param. For example:\n\n```javascript\nconst optionValues = [\n  { name: 'Option #1', value: 'Option #1 is selected!' },\n  { name: 'Option #2', value: 'Option #2 is selected!' },\n];\n...\n<gl-form-input-group :predefined-options=\"optionValues\" />\n```\n\nThis will tell `GlFormInputGroup` to render a dropdown in the `prepend`\nslot with all of the supplied options' `name`s. When one of the options\nis selected, the input field is automatically populated with the\noption's `value`. Check the \"Examples\" section below for \"With\npredefined options\" example.\n\n### Pro tips\n\nRead some useful tips below about specific usage of the component.\n\n### Readonly input\n\nOften you want to make sure user doesn't mess up the predefined content\npasted into the input field. In this case, you can set `readonly`\nparam to `true`. You can play with `Readonly` knob on the right.\n\n### Preselect the text to copy\n\nIf you set the `readonly` param on the `GlFormInputGroup` component,\nusers will still be able to manually select the text and copy it.\nHowever, it's more user-friendly to preselect the text for the users if\nthey click anywhere in the input field. This can be achieved by setting\nthe `select-on-click` param to `true`. You can play with\n`Select text on click` knob on the right. Even better, try enabling\n`Readonly`, `Select text on click`, and `Switch to predefined input`\naltogether. And, probably, remove `Prepend text`. Or leave it. It's your\ncall. :)\n";
+
+var form_input_group_documentation = {
+  followsDesignSystem: false,
+  description,
+  examples,
+  bootstrapComponent: 'b-form-input',
+  propsInfo: {
+    'select-on-click': {
+      type: Boolean,
+      additionalInfo: 'Automatically selects the content of the input field on click'
+    },
+    'predefined-options': {
+      type: Array,
+      additionalInfo: 'Array of options. Each option should have `name` and `value` information: {name: "Foo", value: "Bar"})'
+    }
+  },
+  slots: [{
+    name: 'default',
+    description: 'Allows replacement of default input field.'
+  }, {
+    name: 'prepend',
+    description: 'Is rendered in front of the input field.'
+  }, {
+    name: 'append',
+    description: 'Is rendered after the input field.'
+  }]
+};
+
+export default form_input_group_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/form_input_group.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/form_input_group.js
new file mode 100644
index 00000000000000..d67b460021fbae
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/form_input_group.js
@@ -0,0 +1,106 @@
+import { BInputGroup, BInputGroupPrepend, BInputGroupAppend, BFormInput } from 'bootstrap-vue/esm/index.js';
+import GlDropdown from '../../dropdown/dropdown';
+import GlDropdownItem from '../../dropdown/dropdown_item';
+import { InputGroupMixin } from './form_input_group_mixin';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormInputGroup',
+  components: {
+    BInputGroup,
+    BInputGroupPrepend,
+    BInputGroupAppend,
+    BFormInput,
+    GlDropdown,
+    GlDropdownItem
+  },
+  mixins: [InputGroupMixin],
+  props: {
+    selectOnClick: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    predefinedOptions: {
+      type: Array,
+      required: false,
+      default: () => [{
+        value: '',
+        name: ''
+      }],
+      validator: options => options.every(opt => Object.keys(opt).includes('name', 'value'))
+    },
+    label: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    inputClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      activeOption: this.predefinedOptions && this.predefinedOptions[0].name
+    };
+  },
+
+  methods: {
+    handleClick() {
+      if (this.selectOnClick) {
+        this.$refs.input.$el.select();
+      }
+    },
+
+    updateValue(option) {
+      const {
+        name,
+        value
+      } = option;
+      this.activeOption = name;
+      this.localValue = value;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('b-input-group',[(_vm.activeOption || _vm.$scopedSlots.prepend)?_c('b-input-group-prepend',[_vm._t("prepend"),_vm._v(" "),(_vm.activeOption)?_c('gl-dropdown',{attrs:{"text":_vm.activeOption}},_vm._l((_vm.predefinedOptions),function(option){return _c('gl-dropdown-item',{key:option.value,attrs:{"is-check-item":"","is-checked":_vm.activeOption === option.name},on:{"click":function($event){return _vm.updateValue(option)}}},[_vm._v("\n          "+_vm._s(option.name)+"\n        ")])}),1):_vm._e()],2):_vm._e(),_vm._v(" "),_vm._t("default",[_c('b-form-input',_vm._g(_vm._b({ref:"input",class:['gl-form-input', _vm.inputClass],attrs:{"aria-label":_vm.label},on:{"click":_vm.handleClick},model:{value:(_vm.localValue),callback:function ($$v) {_vm.localValue=$$v;},expression:"localValue"}},'b-form-input',_vm.$attrs,false),_vm.$listeners))]),_vm._v(" "),(_vm.$scopedSlots.append)?_c('b-input-group-append',[_vm._t("append")],2):_vm._e()],2)],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/form_input_group_mixin.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/form_input_group_mixin.js
new file mode 100644
index 00000000000000..10844f90dbe8b4
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_input_group/form_input_group_mixin.js
@@ -0,0 +1,49 @@
+const InputGroupMixin = {
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      localValue: this.stringifyValue(this.value)
+    };
+  },
+
+  watch: {
+    value(newVal) {
+      if (newVal !== this.localValue) {
+        this.localValue = this.stringifyValue(newVal);
+      }
+    },
+
+    localValue(newVal) {
+      if (newVal !== this.value) {
+        this.$emit('input', newVal);
+      }
+    }
+
+  },
+
+  mounted() {
+    const value = this.stringifyValue(this.value);
+
+    if (this.activeOption) {
+      const activeOption = this.predefinedOptions.find(opt => opt.name === this.activeOption);
+      this.localValue = activeOption.value;
+    } else if (value !== this.localValue) {
+      this.localValue = value;
+    }
+  },
+
+  methods: {
+    stringifyValue(value) {
+      return value === undefined || value === null ? '' : String(value);
+    }
+
+  }
+};
+
+export { InputGroupMixin };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio/form_radio.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio/form_radio.documentation.js
new file mode 100644
index 00000000000000..1e4c7439ea9bd9
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio/form_radio.documentation.js
@@ -0,0 +1,8 @@
+var description = "`GlFormRadio` components can be used directly, or via a `GlFormRadioGroup`.\n\nBelow is an example which demonstrates the direct approach. For examples using\n`GlFormRadioGroup`, see the documentation for that component.\n\n```html\n<script>\n  export default {\n    data() {\n      return {\n        selected: 'yes',\n      };\n    },\n  };\n</script>\n\n<template>\n  <div>\n    <gl-form-radio v-model=\"selected\" value=\"yes\">Yes</gl-form-radio>\n    <gl-form-radio v-model=\"selected\" value=\"no\">No</gl-form-radio>\n  </div>\n</template>\n```\n";
+
+var form_radio_documentation = {
+  description,
+  followsDesignSystem: true
+};
+
+export default form_radio_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio/form_radio.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio/form_radio.js
new file mode 100644
index 00000000000000..784031cca301ed
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio/form_radio.js
@@ -0,0 +1,65 @@
+import { BFormRadio } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const {
+  model
+} = BFormRadio.options;
+var script = {
+  name: 'GlFormRadio',
+  components: {
+    BFormRadio
+  },
+  inheritAttrs: false,
+  model: {
+    prop: model.prop,
+    event: model.event
+  },
+  props: {
+    /**
+     * Whether the radio is checked
+     */
+    checked: {
+      type: [String, Number, Boolean, Object],
+      required: false,
+      default: false
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-radio',_vm._g(_vm._b({staticClass:"gl-form-radio",attrs:{"checked":_vm.checked},on:{"input":function($event){return _vm.$emit('input', $event)},"change":function($event){return _vm.$emit('change', $event)}}},'b-form-radio',_vm.$attrs,false),_vm.$listeners),[_vm._t("default"),_vm._v(" "),(_vm.$scopedSlots.help)?_c('p',{staticClass:"help-text"},[_vm._t("help")],2):_vm._e()],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/examples/form_radio_group.options_array.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/examples/form_radio_group.options_array.example.js
new file mode 100644
index 00000000000000..a28a59dbe81ca6
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/examples/form_radio_group.options_array.example.js
@@ -0,0 +1,59 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      selected: 'String option',
+      options: ['String option', {
+        text: 'Object option',
+        value: 'object'
+      }, {
+        html: '<i>HTML</i> option',
+        value: 'html'
+      }, {
+        text: 'Disabled option',
+        value: 'disabledOption',
+        disabled: true
+      }]
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-radio-group',{attrs:{"options":_vm.options},model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/examples/form_radio_group.slots.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/examples/form_radio_group.slots.example.js
new file mode 100644
index 00000000000000..ac2a3a3f9e42c7
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/examples/form_radio_group.slots.example.js
@@ -0,0 +1,48 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      selected: 'one'
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-radio-group',{model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}},[_c('gl-form-radio',{attrs:{"value":"one"}},[_vm._v("One")]),_vm._v(" "),_c('gl-form-radio',{attrs:{"value":"two"},scopedSlots:_vm._u([{key:"help",fn:function(){return [_vm._v("Help text")]},proxy:true}])},[_vm._v("\n    Two\n    ")]),_vm._v(" "),_c('gl-form-radio',{attrs:{"value":"three"}},[_vm._v("Three")]),_vm._v(" "),_c('gl-form-radio',{attrs:{"value":"four","disabled":""}},[_vm._v("Disabled option")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/examples/index.js
new file mode 100644
index 00000000000000..cab6a5bd228310
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/examples/index.js
@@ -0,0 +1,17 @@
+import FormRadioGroupOptionsArray from './form_radio_group.options_array.example';
+import FormRadioGroupSlots from './form_radio_group.slots.example';
+
+var index = [{
+  name: 'Radio Group',
+  items: [{
+    id: 'form-radio-group-slots',
+    name: 'Form Radio Group using Slots',
+    component: FormRadioGroupSlots
+  }, {
+    id: 'form-radio-group-options-array',
+    name: 'Form Radio Group using Options Array',
+    component: FormRadioGroupOptionsArray
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/form_radio_group.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/form_radio_group.documentation.js
new file mode 100644
index 00000000000000..ac58598abb5b3b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/form_radio_group.documentation.js
@@ -0,0 +1,54 @@
+import examples from './examples';
+
+var description = "# GlFormRadioGroup\n\nThe `GlFormRadioGroup` component provides an alternative and sometimes more\ncompact way of setting up a group of `GlFormRadio` components.\n\n## Usage\n\n`GlFormRadioGroup` can be used in a few ways to build a group of `GlFormRadio`\ncomponents: implicitly, explicitly, or a mix of both.\n\nBelow is an example which demonstrates all three approaches, written such that\nall of them produce the same visual result.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      selected: 'one',\n      options: [\n        {\n          value: 'one',\n          text: 'One',\n        },\n        {\n          value: 'two',\n          text: 'Two',\n        },\n        {\n          value: 'three',\n          text: 'Three',\n        },\n      ],\n    };\n  },\n};\n</script>\n\n<template>\n  <div>\n    <!-- Implicit -->\n    <gl-form-radio-group v-model=\"selected\" :options=\"options\" name=\"implicit\" />\n\n    <!-- Explicit -->\n    <gl-form-radio-group v-model=\"selected\" name=\"explicit\">\n      <gl-form-radio value=\"one\">One</gl-form-radio>\n      <gl-form-radio value=\"two\">Two</gl-form-radio>\n      <gl-form-radio value=\"three\">Three</gl-form-radio>\n    </gl-form-radio-group>\n\n    <!-- Mixed -->\n    <gl-form-radio-group v-model=\"selected\" :options=\"[options[1]]\" name=\"mixed\">\n      <template #first>\n        <gl-form-radio value=\"one\">One</gl-form-radio>\n      </template>\n      <gl-form-radio value=\"three\">Three</gl-form-radio>\n    </gl-form-radio-group>\n  </div>\n</template>\n```\n\n## Stacked\n\nBy default, the GitLab Design guide mandates the `<gl-form-radio-group>` be `stacked` by default and\nis non-changeable at this time.\n";
+
+var form_radio_group_documentation = {
+  description,
+  examples,
+  followsDesignSystem: true,
+  bootstrapComponent: 'b-form-radio-group',
+  propsInfo: {
+    options: {
+      additionalInfo: 'Array of objects representing the radios to render'
+    },
+    valueField: {
+      additionalInfo: 'Field name in the options prop that should be used for the value'
+    },
+    textField: {
+      additionalInfo: 'Field name in the options prop that should be used for the text label'
+    },
+    htmlField: {
+      additionalInfo: 'Field name in the options prop that should be used for the html label instead of text field. Use with caution.'
+    },
+    disabledField: {
+      additionalInfo: 'Field name in the options prop that should be used for the disabled state'
+    },
+    checked: {
+      additionalInfo: 'The current value of the checked radio in the group'
+    }
+  },
+  events: [{
+    event: 'input',
+    args: [{
+      arg: 'checked',
+      description: 'current selected value of radio group'
+    }],
+    description: 'Emitted when the selected value is changed'
+  }, {
+    event: 'change',
+    args: [{
+      arg: 'checked',
+      description: 'current selected value of radio group'
+    }],
+    description: 'Emitted when the selected value is changed due to user interaction'
+  }],
+  slots: [{
+    name: 'first',
+    description: 'Slot for GlFormRadios that will appear before radios generated from options prop'
+  }, {
+    name: 'default',
+    description: 'Slot for GlFormRadios that will appear after radios generated from options prop'
+  }]
+};
+
+export default form_radio_group_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/form_radio_group.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/form_radio_group.js
new file mode 100644
index 00000000000000..a6b2909a39c626
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_radio_group/form_radio_group.js
@@ -0,0 +1,59 @@
+import { BFormRadioGroup } from 'bootstrap-vue/esm/index.js';
+import formOptionsMixin from 'bootstrap-vue/esm/mixins/form-options';
+import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
+import GlFormRadio from '../form_radio/form_radio';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const {
+  model
+} = BFormRadioGroup.options;
+var script = {
+  components: {
+    BFormRadioGroup,
+    GlFormRadio
+  },
+  directives: {
+    SafeHtml: SafeHtmlDirective
+  },
+  mixins: [formOptionsMixin],
+  inheritAttrs: false,
+  model
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-radio-group',_vm._g(_vm._b({staticClass:"gl-form-checkbox-group",attrs:{"stacked":""},on:{"input":function($event){return _vm.$emit('input', $event)},"change":function($event){return _vm.$emit('change', $event)}}},'b-form-radio-group',_vm.$attrs,false),_vm.$listeners),[_vm._t("first"),_vm._v(" "),_vm._l((_vm.formOptions),function(option,idx){return _c('gl-form-radio',{key:idx,attrs:{"value":option.value,"disabled":option.disabled}},[(option.html)?_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(option.html),expression:"option.html"}]}):_c('span',[_vm._v(_vm._s(option.text))])])}),_vm._v(" "),_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_select/constants.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_select/constants.js
new file mode 100644
index 00000000000000..422ca04248e1ef
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_select/constants.js
@@ -0,0 +1,12 @@
+const formSelectOptions = [{
+  value: 'Pizza',
+  text: 'Pizza'
+}, {
+  value: 'Tacos',
+  text: 'Tacos'
+}, {
+  value: 'Burger',
+  text: 'Burger'
+}];
+
+export { formSelectOptions };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_select/form_select.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_select/form_select.documentation.js
new file mode 100644
index 00000000000000..1c50dc616da490
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_select/form_select.documentation.js
@@ -0,0 +1,8 @@
+var description = "Form select component used to select from group of options in a form.\n";
+
+var form_select_documentation = {
+  description,
+  followDesignSystem: true
+};
+
+export default form_select_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_select/form_select.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_select/form_select.js
new file mode 100644
index 00000000000000..f8c452e0c7f293
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_select/form_select.js
@@ -0,0 +1,47 @@
+import { BFormSelect } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BFormSelect
+  },
+  inheritAttrs: false
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-select',_vm._g(_vm._b({staticClass:"gl-form-select",scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-select',_vm.$attrs,false),_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_text/form_text.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_text/form_text.documentation.js
new file mode 100644
index 00000000000000..8596ef39a15d03
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_text/form_text.documentation.js
@@ -0,0 +1,14 @@
+var form_text = "# Usage\n\nThe component used to render form group descriptions. Useful for when you need\nto add additional form text elements to a form group.\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': form_text
+});
+
+var form_text_documentation = {
+  description,
+  bootstrapComponent: 'b-form-text',
+  propsInfo: {}
+};
+
+export default form_text_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_text/form_text.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_text/form_text.js
new file mode 100644
index 00000000000000..445d05b03ff3fb
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_text/form_text.js
@@ -0,0 +1,38 @@
+import { BFormText } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+const __vue_script__ = BFormText;
+
+/* template */
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = undefined;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    {},
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_textarea/form_textarea.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_textarea/form_textarea.documentation.js
new file mode 100644
index 00000000000000..ab9f1ca2879fde
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_textarea/form_textarea.documentation.js
@@ -0,0 +1,7 @@
+var description = "**Note:** This needs a `v-model` property to work correctly.\nSee [this issue](https://github.com/bootstrap-vue/bootstrap-vue/issues/1915) on Bootstrap Vue for\nmore information.\n";
+
+var form_textarea_documentation = {
+  description
+};
+
+export default form_textarea_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_textarea/form_textarea.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_textarea/form_textarea.js
new file mode 100644
index 00000000000000..2cc4dd344dd387
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/form_textarea/form_textarea.js
@@ -0,0 +1,116 @@
+import { BFormTextarea } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const model = {
+  prop: 'value',
+  event: 'input'
+};
+var script = {
+  components: {
+    BFormTextarea
+  },
+  inheritAttrs: false,
+  model,
+  props: {
+    // This prop is needed to map the v-model correctly
+    // https://alligator.io/vuejs/add-v-model-support/
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    noResize: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    submitOnEnter: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    listeners() {
+      var _this = this;
+
+      return { ...this.$listeners,
+        // Swap purpose of input and update events from underlying BFormTextarea.
+        // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
+        input: function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+
+          /**
+           * Emitted to update the v-model
+           */
+          _this.$emit('update', ...args);
+        },
+        update: function () {
+          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+            args[_key2] = arguments[_key2];
+          }
+
+          /**
+           * Triggered by user interaction.
+           * Emitted after any formatting (not including 'trim' or 'number' props).
+           * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
+           */
+          _this.$emit(model.event, ...args);
+        }
+      };
+    },
+
+    keypressEvent() {
+      return this.submitOnEnter ? 'keyup' : null;
+    }
+
+  },
+  methods: {
+    handleKeyPress(e) {
+      if (e.keyCode === 13 && (e.metaKey || e.ctrlKey)) {
+        this.$emit('submit');
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-textarea',_vm._g(_vm._b({staticClass:"gl-form-input gl-form-textarea",attrs:{"no-resize":_vm.noResize,"value":_vm.value},nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress($event)}])},'b-form-textarea',_vm.$attrs,false),_vm.listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/input_group_text/input_group_text.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/input_group_text/input_group_text.documentation.js
new file mode 100644
index 00000000000000..dc100b635cf472
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/input_group_text/input_group_text.documentation.js
@@ -0,0 +1,12 @@
+var input_group_text = "### Under the hood\n\nUses [`BInputGroupText`](https://bootstrap-vue.org/docs/components/input-group#comp-ref-b-input-group-text)\nfrom Vue Boostrap\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': input_group_text
+});
+
+var input_group_text_documentation = {
+  description
+};
+
+export default input_group_text_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/form/input_group_text/input_group_text.js b/app/assets/javascripts/gitlab-ui/dist/components/base/form/input_group_text/input_group_text.js
new file mode 100644
index 00000000000000..41a95a576bc4b8
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/form/input_group_text/input_group_text.js
@@ -0,0 +1,47 @@
+import { BInputGroupText } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BInputGroupText
+  },
+  inheritAttrs: false
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-input-group-text',_vm._g(_vm._b({},'b-input-group-text',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/icon/icon.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/icon/icon.documentation.js
new file mode 100644
index 00000000000000..82bab710b9a6e6
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/icon/icon.documentation.js
@@ -0,0 +1,8 @@
+var description = "## Usage\n\nThe Icon component can be used to render any svg within the @gitlab/svgs icon sprites.\n\n### Accessibility\n\n`gl-icon` icons are hidden from screen readers by default, as usages of icons are commonly decorative.\n\nIf the icon is not decorative, add an `aria-label` attribute to `gl-icon` to give it an accessible name.\nThis label is read out by screen readers.\n\nIf the icon is clickable, use `gl-button` instead of `gl-icon` because a clickable element should\nsemantically be a button.\n\n```html\n<!-- icon, which is hidden from screen readers by default  -->\n<gl-icon name=\"rocket\" />\n\n<!-- icon, which has an accessible name \"Confidential issue\" that is read out by screen readers -->\n<gl-icon name=\"eye-slash\" :aria-label=\"__('Confidential issue')\" />\n\n<!-- clickable icon, which is borderless and padding-less -->\n<gl-button icon=\"close\" category=\"tertiary\" class=\"gl-p-0!\" aria-label=\"Close\" />\n```\n\nFor more information about icons within GitLab, visit the\n[GitLab accessibility guidelines](https://docs.gitlab.com/ee/development/fe_guide/accessibility#icons).\n";
+
+var icon_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default icon_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/icon/icon.js b/app/assets/javascripts/gitlab-ui/dist/components/base/icon/icon.js
new file mode 100644
index 00000000000000..9976aef04c7864
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/icon/icon.js
@@ -0,0 +1,118 @@
+import iconsPath from '@gitlab/svgs/dist/icons.svg';
+import { iconSizeOptions } from '../../../utils/constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+let iconValidator = () => true;
+/*
+ During development/tests we want to validate that we are just using icons that are actually defined
+*/
+
+
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line global-require
+  const data = require('@gitlab/svgs/dist/icons.json');
+
+  const {
+    icons
+  } = data;
+
+  iconValidator = value => {
+    if (icons.includes(value)) {
+      return true;
+    } // eslint-disable-next-line no-console
+
+
+    console.warn(`Icon '${value}' is not a known icon of @gitlab/svgs`);
+    return false;
+  };
+}
+/** This is a re-usable vue component for rendering a svg sprite icon
+ *  @example
+ *  <icon
+ *    name="retry"
+ *    :size="32"
+ *    class="top"
+ *  />
+ */
+
+
+var script = {
+  props: {
+    /**
+     * Accessible icon name used by screen readers and other assistive technologies.
+     * Provide when icon is not merely decorative
+     */
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+
+    /**
+     * One of the icons from https://gitlab-org.gitlab.io/gitlab-svgs/ project
+     */
+    name: {
+      type: String,
+      required: true,
+      validator: iconValidator
+    },
+
+    /**
+     * Icon size
+     */
+    size: {
+      type: Number,
+      required: false,
+      default: 16,
+      validator: value => iconSizeOptions.includes(value)
+    }
+  },
+  computed: {
+    spriteHref() {
+      return `${iconsPath}#${this.name}`;
+    },
+
+    iconSizeClass() {
+      return this.size ? `s${this.size}` : '';
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',_vm._g({key:_vm.spriteHref,class:['gl-icon', _vm.iconSizeClass],attrs:{"data-testid":(_vm.name + "-icon"),"role":"img","aria-hidden":!_vm.ariaLabel,"aria-label":_vm.ariaLabel}},_vm.$listeners),[_c('use',{attrs:{"href":_vm.spriteHref}})])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/index.js
new file mode 100644
index 00000000000000..562795ca074e4b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/index.js
@@ -0,0 +1,49 @@
+import InfiniteScrollAllItemsExample from './infinite_scroll.all_items.example';
+import InfiniteScrollBasicExample from './infinite_scroll.basic.example';
+import InfiniteScrollWithFiniteTotalItemsExample from './infinite_scroll.finite_total_items.example';
+import InfiniteScrollWithLargeNumberOfFetchedItemsExample from './infinite_scroll.large_fetched_items.example';
+import InfiniteScrollReverseExample from './infinite_scroll.reverse.example';
+import InfiniteScrollWithSmallNumberOfFetchedItemsExample from './infinite_scroll.small_fetched_items.example';
+import InfiniteScrollTwoWayExample from './infinite_scroll.two_way.example';
+
+var index = [{
+  name: 'Basic',
+  items: [{
+    id: 'infinite-scroll-basic',
+    name: 'Basic',
+    description: 'Basic Infinite Scroll',
+    component: InfiniteScrollBasicExample
+  }, {
+    id: 'infinite-scroll-with-finite-total-items',
+    name: 'Fixed items',
+    description: 'With finite total items',
+    component: InfiniteScrollWithFiniteTotalItemsExample
+  }, {
+    id: 'infinite-scroll-small-fetched-items',
+    name: 'With a small number of fetched items',
+    description: 'Infinite Scroll with small number of fetched items',
+    component: InfiniteScrollWithSmallNumberOfFetchedItemsExample
+  }, {
+    id: 'infinite-scroll-large-fetched-items',
+    name: 'With a large number of fetched items',
+    description: 'Infinite Scroll with large number of fetched items',
+    component: InfiniteScrollWithLargeNumberOfFetchedItemsExample
+  }, {
+    id: 'infinite-scroll-all-items',
+    name: 'Showing all items',
+    description: 'Infinite Scroll with all items',
+    component: InfiniteScrollAllItemsExample
+  }, {
+    id: 'infinite-scroll-reverse',
+    name: 'Reversed',
+    description: 'Infinite Scroll with items added at the top',
+    component: InfiniteScrollReverseExample
+  }, {
+    id: 'infinite-scroll-two-way',
+    name: 'Two way Infinite Scroll',
+    description: 'Infinite Scroll with items added in two directions',
+    component: InfiniteScrollTwoWayExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.all_items.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.all_items.example.js
new file mode 100644
index 00000000000000..7a0bc8998458d7
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.all_items.example.js
@@ -0,0 +1,49 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const FETCHED_ITEMS = 5;
+var script = {
+  data() {
+    return {
+      fetchedItems: FETCHED_ITEMS
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-infinite-scroll',{attrs:{"fetched-items":_vm.fetchedItems},scopedSlots:_vm._u([{key:"items",fn:function(){return [_c('ul',{staticClass:"list-group list-group-flushed list-unstyled"},_vm._l((_vm.fetchedItems),function(item){return _c('li',{key:item,staticClass:"list-group-item"},[_vm._v("Item #"+_vm._s(item))])}),0)]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-mt-3"},[_c('span',[_vm._v("All items loaded")])])]},proxy:true}])})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.basic.example.js
new file mode 100644
index 00000000000000..8073030ef0582b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.basic.example.js
@@ -0,0 +1,62 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const ITEMS_BATCH_SIZE = 20;
+var script = {
+  data() {
+    return {
+      isLoading: false,
+      fetchedItems: ITEMS_BATCH_SIZE,
+      loadTimer: null
+    };
+  },
+
+  methods: {
+    bottomReached() {
+      clearTimeout(this.loadTimer);
+      this.isLoading = true;
+      this.loadTimer = setTimeout(() => {
+        this.fetchedItems += ITEMS_BATCH_SIZE;
+        this.isLoading = false;
+      }, 500);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-infinite-scroll',{attrs:{"max-list-height":285,"fetched-items":_vm.fetchedItems},on:{"bottomReached":_vm.bottomReached},scopedSlots:_vm._u([{key:"items",fn:function(){return [_c('ul',{staticClass:"list-group list-group-flushed list-unstyled"},_vm._l((_vm.fetchedItems),function(item){return _c('li',{key:item,staticClass:"list-group-item"},[_vm._v("Item #"+_vm._s(item))])}),0)]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-mt-3"},[(_vm.isLoading)?_c('gl-loading-icon'):_c('span',[_vm._v(_vm._s(_vm.fetchedItems)+" items loaded")])],1)]},proxy:true}])})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.finite_total_items.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.finite_total_items.example.js
new file mode 100644
index 00000000000000..a4be5ae09c820f
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.finite_total_items.example.js
@@ -0,0 +1,72 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const ITEMS_BATCH_SIZE = 60;
+const TOTAL_ITEMS = 100;
+var script = {
+  data() {
+    return {
+      totalItems: TOTAL_ITEMS,
+      isLoading: false,
+      fetchedItems: ITEMS_BATCH_SIZE,
+      loadTimer: null
+    };
+  },
+
+  methods: {
+    bottomReached() {
+      clearTimeout(this.loadTimer);
+
+      if (this.fetchedItems < TOTAL_ITEMS) {
+        this.isLoading = true;
+        this.loadTimer = setTimeout(() => {
+          this.fetchedItems += ITEMS_BATCH_SIZE;
+
+          if (this.fetchedItems > TOTAL_ITEMS) {
+            this.fetchedItems = TOTAL_ITEMS;
+          }
+
+          this.isLoading = false;
+        }, 500);
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-infinite-scroll',{attrs:{"max-list-height":285,"fetched-items":_vm.fetchedItems,"total-items":_vm.totalItems},on:{"bottomReached":_vm.bottomReached},scopedSlots:_vm._u([{key:"items",fn:function(){return [_c('ul',{staticClass:"list-group list-group-flushed list-unstyled"},_vm._l((_vm.fetchedItems),function(item){return _c('li',{key:item,staticClass:"list-group-item"},[_vm._v("Item #"+_vm._s(item))])}),0)]},proxy:true}])})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.large_fetched_items.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.large_fetched_items.example.js
new file mode 100644
index 00000000000000..61e22b21598dee
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.large_fetched_items.example.js
@@ -0,0 +1,62 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const ITEMS_BATCH_SIZE = 1200;
+var script = {
+  data() {
+    return {
+      isLoading: false,
+      fetchedItems: ITEMS_BATCH_SIZE,
+      loadTimer: null
+    };
+  },
+
+  methods: {
+    bottomReached() {
+      clearTimeout(this.loadTimer);
+      this.isLoading = true;
+      this.loadTimer = setTimeout(() => {
+        this.fetchedItems += ITEMS_BATCH_SIZE;
+        this.isLoading = false;
+      }, 500);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-infinite-scroll',{attrs:{"max-list-height":285,"fetched-items":_vm.fetchedItems},on:{"bottomReached":_vm.bottomReached},scopedSlots:_vm._u([{key:"items",fn:function(){return [_c('ul',{staticClass:"list-group list-group-flushed list-unstyled"},_vm._l((_vm.fetchedItems),function(item){return _c('li',{key:item,staticClass:"list-group-item"},[_vm._v("Item #"+_vm._s(item))])}),0)]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-mt-3"},[(_vm.isLoading)?_c('gl-loading-icon'):_c('span',[_vm._v("Showing "+_vm._s(_vm.fetchedItems)+" of 1000+ items")])],1)]},proxy:true}])})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.reverse.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.reverse.example.js
new file mode 100644
index 00000000000000..435c05f3f01fb5
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.reverse.example.js
@@ -0,0 +1,63 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const ITEMS_BATCH_SIZE = 5;
+const INIT_ITEMS_COUNT = 10;
+var script = {
+  data() {
+    return {
+      isLoading: false,
+      fetchedItems: INIT_ITEMS_COUNT,
+      loadTimer: null
+    };
+  },
+
+  methods: {
+    topReached() {
+      clearTimeout(this.loadTimer);
+      this.isLoading = true;
+      this.loadTimer = setTimeout(() => {
+        this.fetchedItems += ITEMS_BATCH_SIZE;
+        this.isLoading = false;
+      }, 2000);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-infinite-scroll',{attrs:{"max-list-height":285,"fetched-items":_vm.fetchedItems},on:{"topReached":_vm.topReached},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('div',{staticClass:"gl-h-6"},[(_vm.isLoading)?_c('gl-loading-icon'):_vm._e()],1)]},proxy:true},{key:"items",fn:function(){return [_c('ul',{staticClass:"list-group list-group-flushed list-unstyled"},_vm._l((_vm.fetchedItems),function(item){return _c('li',{key:item,staticClass:"list-group-item"},[_vm._v("\n        Item #"+_vm._s(Math.abs(item - _vm.fetchedItems) + 1)+"\n      ")])}),0)]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-mt-3"},[_c('span',[_vm._v(_vm._s(_vm.fetchedItems)+" items loaded, scroll up for more")])])]},proxy:true}])})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.small_fetched_items.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.small_fetched_items.example.js
new file mode 100644
index 00000000000000..eac92004ad7723
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.small_fetched_items.example.js
@@ -0,0 +1,62 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const ITEMS_BATCH_SIZE = 60;
+var script = {
+  data() {
+    return {
+      isLoading: false,
+      fetchedItems: ITEMS_BATCH_SIZE,
+      loadTimer: null
+    };
+  },
+
+  methods: {
+    bottomReached() {
+      clearTimeout(this.loadTimer);
+      this.isLoading = true;
+      this.loadTimer = setTimeout(() => {
+        this.fetchedItems += ITEMS_BATCH_SIZE;
+        this.isLoading = false;
+      }, 500);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-infinite-scroll',{attrs:{"max-list-height":285,"fetched-items":_vm.fetchedItems},on:{"bottomReached":_vm.bottomReached},scopedSlots:_vm._u([{key:"items",fn:function(){return [_c('ul',{staticClass:"list-group list-group-flushed list-unstyled"},_vm._l((_vm.fetchedItems),function(item){return _c('li',{key:item,staticClass:"list-group-item"},[_vm._v("Item #"+_vm._s(item))])}),0)]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-mt-3"},[(_vm.isLoading)?_c('gl-loading-icon'):_c('span',[_vm._v("Showing "+_vm._s(_vm.fetchedItems)+" of 1000+ items")])],1)]},proxy:true}])})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.two_way.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.two_way.example.js
new file mode 100644
index 00000000000000..33e6e7a6144134
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/examples/infinite_scroll.two_way.example.js
@@ -0,0 +1,94 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const ITEMS_BATCH_SIZE = 10;
+const INIT_ITEMS_COUNT = 20;
+const colors = ['Violet', 'Indigo', 'Blue', 'Green', 'Yellow', 'Orange', 'Red'];
+const planets = ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'];
+let key = 0;
+
+const createItem = () => {
+  key += 1;
+  return {
+    key,
+    content: `${colors[key % colors.length]} ${planets[key % planets.length]}`
+  };
+};
+
+const createArray = num => {
+  const res = [];
+
+  for (let i = 0; i < num; i += 1) {
+    res.push(createItem());
+  }
+
+  return res;
+};
+
+var script = {
+  data() {
+    return {
+      isLoading: false,
+      fetchedItems: createArray(INIT_ITEMS_COUNT),
+      loadTimer: null
+    };
+  },
+
+  methods: {
+    topReached() {
+      clearTimeout(this.loadTimer);
+      this.isLoading = true;
+      this.loadTimer = setTimeout(() => {
+        this.fetchedItems.unshift(...createArray(ITEMS_BATCH_SIZE));
+        this.isLoading = false;
+      }, 1000);
+    },
+
+    bottomReached() {
+      clearTimeout(this.loadTimer);
+      this.isLoading = true;
+      this.loadTimer = setTimeout(() => {
+        this.fetchedItems.push(...createArray(ITEMS_BATCH_SIZE));
+        this.isLoading = false;
+      }, 1000);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-infinite-scroll',{attrs:{"max-list-height":285,"fetched-items":_vm.fetchedItems.length},on:{"topReached":_vm.topReached,"bottomReached":_vm.bottomReached},scopedSlots:_vm._u([{key:"items",fn:function(){return [_c('ul',{staticClass:"list-group list-group-flushed list-unstyled"},_vm._l((_vm.fetchedItems),function(item){return _c('li',{key:item.key,staticClass:"list-group-item"},[_vm._v("\n        "+_vm._s(item.content)+"\n      ")])}),0)]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-mt-3"},[(_vm.isLoading)?_c('gl-loading-icon'):_c('span',[_vm._v(_vm._s(_vm.fetchedItems.length)+" items loaded, scroll up or down for more")])],1)]},proxy:true}])})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/infinite_scroll.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/infinite_scroll.documentation.js
new file mode 100644
index 00000000000000..d6e958b3548fc0
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/infinite_scroll.documentation.js
@@ -0,0 +1,8 @@
+var description = "## Usage\n\nThe infinite scroll component wraps around a results list and emits a message\n(`bottomReached`) when the bottom of the viewport is reached, which should trigger\na re-fetching. The `gl-infinite-scroll` component expects its parent component to\nmanage the re-fetching.\n\nAdditionally it emits a `topReached` message when the top of the viewport is reached, which\ncan be useful to load items on top of the available data. If only `topReached` is present, the\nviewport will be scrolled to the bottom the first time this component is mounted.\n\n## Public methods\n\nUseful public methods you can call via `$refs`:\n\n- `.scrollUp()`: Scrolls to the top of the container.\n- `.scrollDown()`: Scrolls to the bottom of the container.\n- `.scrollTo({ top })`: Scrolls to a number of pixels along the Y axis of the container.\n\n## Implementation Example\n\nThis is how a full implementation would look like with paginated results from GitLab's\n`projects` API.\n\nIn the component's state, initialize a `pageInfo` object:\n\n```js\npageInfo: {\n  currentPage: 0,\n  nextPage: 0,\n  totalPages: 0,\n  totalResults: 0,\n}\n```\n\nWhen fetching for the first time, set the state with the header\ninformation in the mutations:\n\n```html\nVue.set(state.pageInfo, 'currentPage', parseInt(headers['X-Page'], 10));\nVue.set(state.pageInfo, 'nextPage', parseInt(headers['X-Next-Page'], 10));\nVue.set(state.pageInfo, 'totalPages', parseInt(headers['X-Total-Pages'], 10));\nVue.set(state.pageInfo, 'totalResults', parseInt(headers['X-Total'], 10));\n```\n\n_Note: There is a function you can use for parsing integers in headers in\nGitLab called `parseIntPagination` in `common/utils.js`_\n\nEvery time `bottomReached` happens, update the state in your mutations:\n\n```js\nstate.searchResults = state.searchResults.concat(results.data);\nVue.set(state.pageInfo, 'nextPage', parseInt(headers['X-Next-Page'],10));\nVue.set(state.pageInfo, 'totalPages', parseInt(headers['X-Total-Pages'],10));\n```\n\nUse the state to fetch the next page in the actions. In this case, the `Projects`\nAPI allows us to send in a `page` parameter to fetch a certain page from the\nlist of results.\n\n```js\nexport const fetchNextPage = ({ state, dispatch }) => {\n  if(state.pageInfo.currentPage < state.pageInfo.totalPages) {\n    Api.projects(searchQuery, { page: state.pageInfo.nextPage })\n      ...\n  }\n};\n```\n\n```html\n<script>\nexportDefault {\n  components: {\n    GlInfiniteScroll,\n  },\n  computed: {\n    ...mapState([\n      'pageInfo',\n      'searchResults',\n    ]),\n  },\n  methods: {\n    ...mapActions([\n      'fetchNextPage',\n    ]),\n    bottomReached() {\n      this.fetchNextPage();\n    },\n  },\n}\n</script>\n<template>\n  <gl-infinite-scroll\n    @bottomReached=\"bottomReached\"\n    :max-list-height=\"400\"\n    :fetched-items=\"searchResults.length\"\n    :total-items=\"totalResults\"\n  >\n    ...Results in a list, another component, etc ....\n  </gl-infinite-scroll>\n</template>\n```\n";
+
+var infinite_scroll_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default infinite_scroll_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/infinite_scroll.js b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/infinite_scroll.js
new file mode 100644
index 00000000000000..b7fbc11b6a4047
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/infinite_scroll/infinite_scroll.js
@@ -0,0 +1,213 @@
+import throttle from 'lodash/throttle';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const throttleDuration = 1000;
+/**
+ * After adding more items, scroll will adjust slightly.
+ * Values in pixels, should be a small amount.
+ */
+
+const adjustScrollGap = 5;
+var script = {
+  props: {
+    /**
+     * Total number of items available
+     */
+    totalItems: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+
+    /**
+     * Numbers of items fetched before scrolling
+     */
+    fetchedItems: {
+      type: Number,
+      required: true
+    },
+
+    /**
+     * Max height of the list before the scrollbar appears
+     */
+    maxListHeight: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  computed: {
+    listHeight() {
+      return {
+        maxHeight: this.maxListHeight ? `${this.maxListHeight}px` : 'auto'
+      };
+    },
+
+    legendText() {
+      if (this.totalItems > 0) {
+        return `Showing ${this.fetchedItems} of ${this.totalItems} items`;
+      }
+
+      return `Showing ${this.fetchedItems} items`;
+    }
+
+  },
+  watch: {
+    fetchedItems(newVal, oldVal) {
+      // Re-adjust scroll to the current item if more items are added
+      if (newVal > oldVal) {
+        const {
+          scrollHeight,
+          scrollTop
+        } = this.$refs.infiniteContainer; // Only when scrolled to the top
+
+        if (scrollHeight !== 0 && scrollTop === 0) {
+          // Store scrollHeight to know how far to scroll
+          this.$options.adjustScrollHeight = scrollHeight;
+        }
+      }
+    }
+
+  },
+
+  mounted() {
+    // Scroll to bottom for reverse effect
+    this.$nextTick(() => {
+      if (this.$listeners.topReached && !this.$listeners.bottomReached) {
+        this.scrollDown();
+      }
+    });
+  },
+
+  updated() {
+    // Wait until the DOM is fully updated to adjust scroll
+    this.$nextTick(() => {
+      if (this.$options.adjustScrollHeight) {
+        const {
+          scrollHeight
+        } = this.$refs.infiniteContainer; // New scrollTop is the new height, minus the old height
+        // minus a small space to allow the user to trigger a scroll once more
+
+        let top = scrollHeight - this.$options.adjustScrollHeight - adjustScrollGap; // Never adjust to 0, or a new event may be be triggered
+
+        if (top < 1) {
+          top = 1;
+        }
+
+        this.scrollTo({
+          top
+        }); // Prevent subsequent updates
+
+        this.$options.adjustScrollHeight = null;
+      }
+    });
+  },
+
+  methods: {
+    /**
+     * Scroll to the top of the container, leaving a gap
+     * to avoid triggering the event.
+     */
+    scrollUp() {
+      this.scrollTo({
+        top: adjustScrollGap
+      });
+    },
+
+    /**
+     * Scroll to the bottom of the container, leaving a gap
+     * to avoid triggering the event.
+     */
+    scrollDown() {
+      const {
+        scrollHeight
+      } = this.$refs.infiniteContainer;
+      this.scrollTo({
+        top: scrollHeight - adjustScrollGap
+      });
+    },
+
+    /**
+     * Scroll to a location in the container
+     *
+     * @param params.top - Number of pixels along Y axis to
+     * scroll the list container.
+     */
+    scrollTo(_ref) {
+      let {
+        top
+      } = _ref;
+      this.$refs.infiniteContainer.scrollTo({
+        top
+      });
+    },
+
+    topReached: throttle(function topReachedThrottled() {
+      /**
+       * Emitted when item container is scrolled to the top
+       */
+      this.$emit('topReached');
+    }, throttleDuration),
+    bottomReached: throttle(function bottomReachedThrottled() {
+      /**
+       * Emitted when item container is scrolled to the bottom
+       */
+      this.$emit('bottomReached');
+    }, throttleDuration),
+
+    itemsListHeight() {
+      return this.$refs.infiniteContainer.scrollHeight;
+    },
+
+    scrollTop() {
+      return this.$refs.infiniteContainer.scrollTop;
+    },
+
+    handleScroll: throttle(function handleScrollThrottled() {
+      if (this.scrollTop() + this.maxListHeight >= this.itemsListHeight()) {
+        this.bottomReached();
+      } else if (this.scrollTop() === 0) {
+        this.topReached();
+      }
+    })
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._t("header"),_vm._v(" "),_c('div',_vm._g(_vm._b({ref:"infiniteContainer",staticClass:"gl-infinite-scroll-container",style:(_vm.listHeight),on:{"scroll":_vm.handleScroll}},'div',_vm.$attrs,false),_vm.$listeners),[_vm._t("items")],2),_vm._v(" "),_c('p',{staticClass:"gl-infinite-scroll-legend"},[_vm._t("default",[_vm._v("\n      "+_vm._s(_vm.legendText)+"\n    ")],{"fetchedItems":_vm.fetchedItems,"totalItems":_vm.totalItems})],2)],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+export { adjustScrollGap };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/keyset_pagination/keyset_pagination.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/keyset_pagination/keyset_pagination.documentation.js
new file mode 100644
index 00000000000000..17f9b57dc511c7
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/keyset_pagination/keyset_pagination.documentation.js
@@ -0,0 +1,13 @@
+var keyset_pagination = "Pagination is used to help users parse a large number of items on a page,\nwhenever there are too many results to show at once. Pagination breaks up\nresults into several pages with controls for navigating forward and backward, or\nto a specific page.\n\n## Usage\n\nThe simplest way to use `GlKeysetPagination` with a paginated GraphQL response\nis to `v-bind` to the\n[`PageInfo`](https://docs.gitlab.com/ee/api/graphql/reference/#pageinfo) type\nreturned by the endpoint:\n\n```html\n<gl-keyset-pagination v-bind=\"pageInfo\" />\n```\n\nThis is possible because the default field names of the `PageInfo` type align\nwith the `props` of this component.\n\n## Dos and don'ts\n\n**✅ Do** provide the `prevText` and `nextText` props with translatable strings.\nThe default strings (\"Prev\" and \"Next\") are hardcoded in this component and\ncan't be translated.\n\nExample:\n\n```html\n<gl-keyset-pagination v-bind=\"pageInfo\" :prev-text=\"__('Prev')\" :next-text=\"__('Next')\" />\n```\n\n**✅ Do** use this component for paginating GraphQL requests<sup>1</sup> (or any\nendpoint that uses keyset pagination).\n\n**❌ Don't** use this component for paginating REST requests<sup>1</sup> (or any\nendpoint that uses offset pagination).\n\nFor offset pagination, use the [`GlPagination`\ncomponent](/?path=/story/base-pagination--default) instead.\n\nFor more information on the difference between offset and keyset pagination see\n[our documentation on GraphQL\npagination](https://docs.gitlab.com/ee/development/graphql_guide/pagination.html).\n\n<small><sup>1</sup>There's no intrinsic reason why GraphQL endpoints can't\nsupport offset pagination (in fact, [the official\ndocumentation](https://graphql.org/learn/pagination/#pagination-and-edges) shows\nan example offset pagination implementation) or why REST endpoints can't support\nkeyset pagination. This is simply how we've chosen to implement our REST and\nGraphQL endpoints at GitLab.</small>\n\n## Pajamas reference\n\n<https://design.gitlab.com/components/pagination>\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': keyset_pagination
+});
+
+var keyset_pagination_documentation = {
+  description,
+  followsDesignSystem: true
+};
+
+export default keyset_pagination_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/keyset_pagination/keyset_pagination.js b/app/assets/javascripts/gitlab-ui/dist/components/base/keyset_pagination/keyset_pagination.js
new file mode 100644
index 00000000000000..f0394cff6a71da
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/keyset_pagination/keyset_pagination.js
@@ -0,0 +1,145 @@
+import GlButton from '../button/button';
+import GlButtonGroup from '../button_group/button_group';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlKeysetPagination',
+  components: {
+    GlButtonGroup,
+    GlButton,
+    GlIcon
+  },
+  props: {
+    // The following 4 properties match the default names of the
+    // [PageInfo](https://docs.gitlab.com/ee/api/graphql/reference/index.html#pageinfo)
+    // GraphQL type, allowing the returned `pageInfo` object to
+    // be bound directly to this component:
+    // `<gl-keyset-pagination v-bind="pageInfo">`
+
+    /**
+     * Whether or not the "Prev" button should be enabled
+     */
+    hasPreviousPage: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * Whether or not the "Next" button should be enabled
+     */
+    hasNextPage: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * A cursor that points to the first item in the current page.
+     * Will be passed as an event parameter when the "prev" event is fired.
+     */
+    startCursor: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * A cursor that points to the last item in the current page.
+     * Will be passed as an event parameter when the "next" event is fired.
+     */
+    endCursor: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * The text that will be rendered inside the "Prev" button.
+     * It\'s important to provide this parameter since the default text is not translatable.
+     */
+    prevText: {
+      type: String,
+      required: false,
+      default: 'Prev'
+    },
+
+    /**
+     * A link that will be used as the "Prev" button\'s "href" attribute.
+     * If provided, the "Prev" button renders as a link button; otherwise, it is rendered as a regular button.
+     */
+    prevButtonLink: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * The text that will be rendered inside the "Next" button.
+     * It\'s important to provide this parameter since the default text is not translatable.
+     */
+    nextText: {
+      type: String,
+      required: false,
+      default: 'Next'
+    },
+
+    /**
+     * A link that will be used as the "Next" button\'s "href" attribute.
+     * If provided, the "Next" button renders as a link button; otherwise, it is rendered as a regular button.
+     */
+    nextButtonLink: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * Whether or not both buttons should be disabled (regardless of the "hasPreviousPage" and "hasNextPage" values).
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',_vm._g(_vm._b({staticClass:"gl-keyset-pagination"},'gl-button-group',_vm.$attrs,false),_vm.$listeners),[_c('gl-button',{attrs:{"href":_vm.prevButtonLink,"disabled":_vm.disabled || !_vm.hasPreviousPage,"data-testid":"prevButton"},on:{"click":function($event){return _vm.$emit('prev', _vm.startCursor)}}},[_vm._t("previous-button-content",[_c('div',{staticClass:"gl-display-flex gl-align-center"},[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v("\n        "+_vm._s(_vm.prevText)+"\n      ")],1)])],2),_vm._v(" "),_c('gl-button',{attrs:{"href":_vm.nextButtonLink,"disabled":_vm.disabled || !_vm.hasNextPage,"data-testid":"nextButton"},on:{"click":function($event){return _vm.$emit('next', _vm.endCursor)}}},[_vm._t("next-button-content",[_c('div',{staticClass:"gl-display-flex gl-align-center"},[_vm._v("\n        "+_vm._s(_vm.nextText)+"\n        "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],1)])],2)],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/label/label.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/label/label.documentation.js
new file mode 100644
index 00000000000000..064ceaf115aa2b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/label/label.documentation.js
@@ -0,0 +1,8 @@
+import description from './label';
+
+var label_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default label_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/label/label.js b/app/assets/javascripts/gitlab-ui/dist/components/base/label/label.js
new file mode 100644
index 00000000000000..3dbaa0dab5d213
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/label/label.js
@@ -0,0 +1,165 @@
+import { labelColorOptions } from '../../../utils/constants';
+import { colorFromBackground } from '../../../utils/utils';
+import CloseButton from '../../shared_components/close_button/close_button';
+import GlLink from '../link/link';
+import GlTooltip from '../tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlLink,
+    GlTooltip,
+    CloseButton
+  },
+  props: {
+    backgroundColor: {
+      type: String,
+      required: true,
+      validator: value => /^(#|rgb|rgba)/.test(value)
+    },
+    title: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    description: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    size: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top'
+    },
+    target: {
+      type: String,
+      required: false,
+      default: '#'
+    },
+    scoped: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    showCloseButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      splitScopedLabelIndex: this.title.lastIndexOf('::')
+    };
+  },
+
+  computed: {
+    cssClasses() {
+      const textColorVariant = colorFromBackground(this.backgroundColor);
+      return {
+        'gl-label-sm': this.size === 'sm',
+        'gl-label-scoped': this.scoped,
+        'gl-label-text-dark': textColorVariant === labelColorOptions.dark,
+        'gl-label-text-light': textColorVariant === labelColorOptions.light
+      };
+    },
+
+    cssVariables() {
+      return {
+        '--label-background-color': this.backgroundColor,
+        '--label-inset-border': `inset 0 0 0 ${this.size === 'sm' ? '1px' : '2px'} ${this.backgroundColor}`
+      };
+    },
+
+    scopedKey() {
+      return this.scoped ? this.title.slice(0, this.splitScopedLabelIndex) : this.title;
+    },
+
+    scopedValue() {
+      return this.title.slice(this.splitScopedLabelIndex + 2);
+    },
+
+    closeIconSize() {
+      return this.size === 'sm' ? 12 : 16;
+    }
+
+  },
+  watch: {
+    title() {
+      this.splitScopedLabelIndex = this.title.lastIndexOf('::');
+    }
+
+  },
+  methods: {
+    onClick(e) {
+      /**
+       * Emitted when label is clicked
+       *
+       * @event click
+       * @type {object}
+       */
+      this.$emit('click', e);
+    },
+
+    onClose(e) {
+      /**
+       * Emitted when x is clicked
+       *
+       * @event close
+       * @type {object}
+       */
+      this.$emit('close', e);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._b({ref:"labelTitle",staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c('gl-link',{staticClass:"gl-label-link",attrs:{"href":_vm.target}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-label-close gl-p-0!",attrs:{"label":"Remove label","variant":"reset","disabled":_vm.disabled},on:{"click":_vm.onClose}}):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.labelTitle; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/link/link.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/link/link.documentation.js
new file mode 100644
index 00000000000000..2df2091b28adae
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/link/link.documentation.js
@@ -0,0 +1,7 @@
+var description = "## Security\n\nThis component implements a few security measures to make it as safe as possible by default.\nSee [SafeLinkDirective docs] for more details.\n\n### Linking to an unsafe URL\n\nIf you're trying to link to a location considered unsafe by the `SafeLink` directive (when rendering\na download link with a [Data URL] for example), you'll need to bypass the `href` attribute's\nsanitization. This component exposes the `is-unsafe-link` prop for that purpose.\n\n> **Warning:** Only disable URL sanitization when absolutely necessary.\n\n```html\n<gl-link\n  is-unsafe-link\n  download=\"file.txt\"\n  href=\"data:text/plain;charset=utf-8,GitLab%20is%20awesome\">Download</gl-link>\n```\n\n[SafeLinkDirective docs]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/directives-safe-link-directive--default\n[Data URL]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs\n";
+
+var link_documentation = {
+  description
+};
+
+export default link_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/link/link.js b/app/assets/javascripts/gitlab-ui/dist/components/base/link/link.js
new file mode 100644
index 00000000000000..8ed8f92fd71e84
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/link/link.js
@@ -0,0 +1,48 @@
+import { BLink } from 'bootstrap-vue/esm/index.js';
+import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BLink
+  },
+  mixins: [SafeLinkMixin]
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-link',_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],staticClass:"gl-link",attrs:{"target":_vm.target}},'b-link',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/loading_icon/loading_icon.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/loading_icon/loading_icon.documentation.js
new file mode 100644
index 00000000000000..040e79e813f195
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/loading_icon/loading_icon.documentation.js
@@ -0,0 +1,8 @@
+var description = "## Under the hood\n\nLoading icon uses pure css to render a spinner.\n";
+
+var loading_icon_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default loading_icon_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/loading_icon/loading_icon.js b/app/assets/javascripts/gitlab-ui/dist/components/base/loading_icon/loading_icon.js
new file mode 100644
index 00000000000000..b379d2f6cf1e9e
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/loading_icon/loading_icon.js
@@ -0,0 +1,102 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const sizes = ['sm', // -> 16px
+'md', // -> 24px
+'lg', // -> 32px
+'xl' // -> 64px
+];
+const colors = {
+  dark: 'dark',
+  light: 'light'
+};
+const defaultColor = colors.dark;
+const baseCssClass = 'gl-spinner';
+var script = {
+  props: {
+    /**
+     * Aria-label.
+     */
+    label: {
+      type: String,
+      required: false,
+      default: 'Loading'
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'sm',
+
+      validator(value) {
+        return sizes.indexOf(value) !== -1;
+      }
+
+    },
+    color: {
+      type: String,
+      required: false,
+      default: defaultColor,
+
+      validator(value) {
+        return Object.keys(colors).includes(value);
+      }
+
+    },
+
+    /**
+     * Wrap in a span or div.
+     */
+    inline: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    rootElementType() {
+      return this.inline ? 'span' : 'div';
+    },
+
+    cssClasses() {
+      return [baseCssClass, `${baseCssClass}-${colors[this.color]}`, `${baseCssClass}-${this.size}`];
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.rootElementType,{tag:"component",staticClass:"gl-spinner-container",attrs:{"role":"status"}},[_c('span',{staticClass:"align-text-bottom",class:_vm.cssClasses,attrs:{"aria-label":_vm.label}})])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/markdown/markdown.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/markdown/markdown.documentation.js
new file mode 100644
index 00000000000000..0a9fc523fec7f1
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/markdown/markdown.documentation.js
@@ -0,0 +1,12 @@
+var markdown = "The `GlMarkdown` component styles markdown-generated HTML following the Pajamas Documentation Markdown\n[styling specifications](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit---Beta?node-id=542%3A2).\n\n## Usage\n\nYou can use the `GlMarkdown` component in two ways.\n\n### Vue component\n\n```html\n<script>\nimport { GlMarkdown } from '@gitlab/ui';\n\nexport default {\n  components: {\n    GlMarkdown,\n  }\n}\n</script>\n<template>\n  <gl-markdown>\n    <!-- All the content inside gl-markdown will inherit the documentation markdown styles -->\n  </gl-markdown>\n</template>\n```\n\n### `gl-markdown` class selector\n\nFollow the [GitLab UI CSS guidelines](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/css.md)\nto include GitLab UI CSS in your application. Afterwards, you can apply the `gl-markdown` class\nselector to the root element that contains the markdown-generated HTML.\n\n```html\n<body class=\"gl-markdown\">\n  <!-- All the content inside body.gl-markdown will inherit the documentation markdown styles -->\n</body>\n```\n\n### Compact markdown\n\nSet the `compact` property to true in `GlMarkdown` to apply the compact markdown styles.\n\n```html\n<gl-markdown compact></gl-compact>\n```\n\nYou can also append the `gl-compact-markdown` class selector after `gl-markdown` in markdown-generated\nHTML.\n\n```html\n<body class=\"gl-markdown gl-compact-markdown\">\n</body>\n```\n\n<!--\n## Browser compatibility\n\nIf the component requires any polyfill or fallback on certain browsers, describe those requirements\nhere.\n-->\n\n<!--\n## Edge cases\n\nIf the component has some known limitations, describe them here.\n-->\n\n<!--\n## Deprecation warning\n\nIf and when this component introduced API changes that would require deprecating old APIs, describe\nthe changes here, and provide a migration paths to the new API.\n-->\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': markdown
+});
+
+var markdown_documentation = {
+  description
+};
+
+export default markdown_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/markdown/markdown.js b/app/assets/javascripts/gitlab-ui/dist/components/base/markdown/markdown.js
new file mode 100644
index 00000000000000..af61fc5590283c
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/markdown/markdown.js
@@ -0,0 +1,49 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  props: {
+    compact: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['gl-markdown', { 'gl-compact-markdown': _vm.compact }]},[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/modal/modal.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/modal/modal.documentation.js
new file mode 100644
index 00000000000000..83297a7388bc41
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/modal/modal.documentation.js
@@ -0,0 +1,8 @@
+var description = "Modals are used to reveal critical information, show information without losing context, or when the\nsystem requires a user response. Modals can also fragment a complex workflow into simpler steps and\nshould serve a single purpose dedicated to completing the user’s task.\n\n## VModel\n\nYou can use the `v-model` directive to control the modal’s visibility. The `v-model`\ndirective interfaces with the `visible` property and the `@change` event.\n\n## Deprecation Warning\n\nWe are deprecating the `modal-ok` and `modal-cancel` slots. We are also changing the way the\n`modal-footer` slot content is populated. This is in order to align this component with the design\nsystem.\n\nThe `modal-footer` slot should only be populated via props: `action-primary`, `action-secondary` and\n`action-cancel`. These props allow you to handle how a primary, secondary and cancel button will\nbehave in the modals footer. The props receive an object as such:\n\n```js\n{\n  text: 'Save Changes',\n  attributes: [\n    { variant: 'confirm' },\n    { disabled: this.someState },\n    { class: 'some-class' },\n    ...\n  ]\n}\n```\n";
+
+var modal_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default modal_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/modal/modal.js b/app/assets/javascripts/gitlab-ui/dist/components/base/modal/modal.js
new file mode 100644
index 00000000000000..412189f2f335d1
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/modal/modal.js
@@ -0,0 +1,200 @@
+import { BModal } from 'bootstrap-vue/esm/index.js';
+import { modalSizeOptions, modalButtonDefaults, focusableTags, COMMA } from '../../../utils/constants';
+import { focusFirstFocusableElement } from '../../../utils/utils';
+import CloseButton from '../../shared_components/close_button/close_button';
+import GlButton from '../button/button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+function validatorHelper(obj) {
+  return Object.keys(obj).every(val => val === 'text' || val === 'attributes');
+}
+
+var script = {
+  components: {
+    BModal,
+    GlButton,
+    CloseButton
+  },
+  inheritAttrs: false,
+  model: {
+    prop: 'visible',
+    event: 'change'
+  },
+  props: {
+    modalId: {
+      type: String,
+      required: true
+    },
+    titleTag: {
+      type: String,
+      required: false,
+      default: 'h4'
+    },
+    title: {
+      type: String,
+      required: false,
+      default: null
+    },
+    modalClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    actionPrimary: {
+      type: Object,
+      required: false,
+      default: null,
+      validator: obj => validatorHelper(obj)
+    },
+    actionSecondary: {
+      type: Object,
+      required: false,
+      default: null,
+      validator: obj => validatorHelper(obj)
+    },
+    actionCancel: {
+      type: Object,
+      required: false,
+      default: null,
+      validator: obj => validatorHelper(obj)
+    },
+    size: {
+      type: String,
+      required: false,
+      default: modalSizeOptions.md,
+      validator: val => Object.keys(modalSizeOptions).includes(val)
+    },
+    dismissLabel: {
+      type: String,
+      required: false,
+      default: 'Close'
+    },
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    shouldRenderModalOk() {
+      return Boolean(this.$slots['modal-ok']);
+    },
+
+    shouldRenderModalCancel() {
+      return Boolean(this.$slots['modal-cancel']);
+    },
+
+    shouldRenderModalFooter() {
+      return Boolean(this.actionCancel || this.actionSecondary || this.actionPrimary || this.$slots['modal-footer']);
+    }
+
+  },
+  methods: {
+    show() {
+      this.$refs.modal.show();
+    },
+
+    hide() {
+      this.$refs.modal.hide();
+    },
+
+    toggle() {
+      this.$refs.modal.toggle();
+    },
+
+    ok() {
+      this.$refs.modal.onOk();
+    },
+
+    cancel() {
+      this.$refs.modal.onCancel();
+    },
+
+    close() {
+      this.$refs.modal.onClose();
+    },
+
+    primary(event) {
+      this.$emit('primary', event);
+    },
+
+    canceled(event) {
+      this.$emit('canceled', event);
+    },
+
+    secondary(event) {
+      this.$emit('secondary', event);
+
+      if (!(event !== null && event !== void 0 && event.defaultPrevented)) {
+        this.close();
+      }
+    },
+
+    // set default variant button styling
+    buttonBinding(prop, name) {
+      if (!prop.attributes) {
+        return modalButtonDefaults[name];
+      }
+
+      return prop.attributes;
+    },
+
+    setFocus() {
+      const btnElts = [...this.$refs.modal.$refs.modal.querySelectorAll('button')];
+      const modalElts = [...this.$refs.modal.$refs.body.querySelectorAll(focusableTags.join(COMMA))]; // Iterate over the array and if you find the close button,
+      // move it to the end
+
+      const closeBtnIndex = btnElts.findIndex(elt => {
+        var _this$$refs$closeBut;
+
+        return elt === ((_this$$refs$closeBut = this.$refs['close-button']) === null || _this$$refs$closeBut === void 0 ? void 0 : _this$$refs$closeBut.$el);
+      });
+
+      if (closeBtnIndex > -1) {
+        btnElts.push(...btnElts.splice(closeBtnIndex, 1));
+      } // ModalElts are the first choice, the btnElts are a backup
+
+
+      focusFirstFocusableElement([...modalElts, ...btnElts]);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"visible":_vm.visible,"lazy":"","modal-class":['gl-modal', _vm.modalClass]},on:{"shown":_vm.setFocus,"ok":_vm.primary,"cancel":_vm.canceled,"change":function($event){return _vm.$emit('change', $event)}},scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._t("default")]},proxy:true},{key:"modal-header",fn:function(){return [_vm._t("modal-header",[_c('h4',{staticClass:"modal-title"},[_vm._t("modal-title",[_vm._v(_vm._s(_vm.title))])],2)]),_vm._v(" "),_c('close-button',{ref:"close-button",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.close}})]},proxy:true},(_vm.shouldRenderModalOk)?{key:"modal-ok",fn:function(){return [_vm._t("modal-ok")]},proxy:true}:null,(_vm.shouldRenderModalCancel)?{key:"modal-cancel",fn:function(){return [_vm._t("modal-cancel")]},proxy:true}:null,(_vm.shouldRenderModalFooter)?{key:"modal-footer",fn:function(){return [_vm._t("modal-footer",[(_vm.actionCancel)?_c('gl-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n         "+_vm._s(_vm.actionCancel.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-secondary",on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n         "+_vm._s(_vm.actionSecondary.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionPrimary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n         "+_vm._s(_vm.actionPrimary.text)+"\n       ")]):_vm._e()])]},proxy:true}:null],null,true)},'b-modal',_vm.$attrs,false),_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/nav/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/examples/index.js
new file mode 100644
index 00000000000000..760a6913bd226c
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/examples/index.js
@@ -0,0 +1,13 @@
+import BasicExample from './nav.basic.example';
+
+var index = [{
+  name: 'Basic',
+  items: [{
+    id: 'nav-basic',
+    name: 'Basic',
+    description: 'Basic Nav',
+    component: BasicExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/nav/examples/nav.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/examples/nav.basic.example.js
new file mode 100644
index 00000000000000..ff7a3ddeea9b00
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/examples/nav.basic.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-nav',[_c('gl-nav-item',{attrs:{"active":""}},[_vm._v("Active")]),_vm._v(" "),_c('gl-nav-item',[_vm._v("Link")]),_vm._v(" "),_c('gl-nav-item',[_vm._v("Another Link")]),_vm._v(" "),_c('gl-nav-item',{attrs:{"disabled":""}},[_vm._v("Disabled")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav.documentation.js
new file mode 100644
index 00000000000000..566f42920689b5
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav.documentation.js
@@ -0,0 +1,17 @@
+import examples from './examples';
+
+var nav = "# Nav\n\n<!-- STORY -->\n\n## Usage\n\nThe navigation component is built with flexbox and provides a strong foundation for building all\ntypes of navigation components.\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': nav
+});
+
+var nav_documentation = {
+  description,
+  examples,
+  bootstrapComponent: 'b-nav',
+  propsInfo: {}
+};
+
+export default nav_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav.js b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav.js
new file mode 100644
index 00000000000000..a9f6acabfab049
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav.js
@@ -0,0 +1,48 @@
+import { BNav } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlNav',
+  components: {
+    BNav
+  },
+  inheritAttrs: false
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-nav',_vm._g(_vm._b({},'b-nav',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item.documentation.js
new file mode 100644
index 00000000000000..01f7d183b51ea5
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item.documentation.js
@@ -0,0 +1,13 @@
+var nav_item = "# Nav Item\n\n<!-- STORY -->\n\n## Usage\n\nThe navigation item component is meant to be used for for actionable links (or router-links).\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': nav_item
+});
+
+var nav_item_documentation = {
+  description,
+  bootstrapComponent: 'b-nav-item'
+};
+
+export default nav_item_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item.js b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item.js
new file mode 100644
index 00000000000000..cadb08f92ffa41
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item.js
@@ -0,0 +1,48 @@
+import { BNavItem } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlNavItem',
+  components: {
+    BNavItem
+  },
+  inheritAttrs: false
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-nav-item',_vm._g(_vm._b({},'b-nav-item',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item_dropdown.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item_dropdown.documentation.js
new file mode 100644
index 00000000000000..da35a1dd0e9903
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item_dropdown.documentation.js
@@ -0,0 +1,14 @@
+var nav_item_dropdown = "# Nav Item Dropdown\n\n<!-- STORY -->\n\n## Usage\n\nUse `<gl-nav-item-dropdown>` to place dropdown items within your nav.\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': nav_item_dropdown
+});
+
+var nav_item_dropdown_documentation = {
+  followsDesignSystem: false,
+  description,
+  bootstrapComponent: 'b-nav-item-dropdown'
+};
+
+export default nav_item_dropdown_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item_dropdown.js b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item_dropdown.js
new file mode 100644
index 00000000000000..5f076eb9e1342c
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/nav/nav_item_dropdown.js
@@ -0,0 +1,62 @@
+import { BNavItemDropdown } from 'bootstrap-vue/esm/index.js';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlNavItemDropdown',
+  components: {
+    BNavItemDropdown,
+    GlIcon
+  },
+  inheritAttrs: false,
+  props: {
+    text: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-nav-item-dropdown',_vm._g(_vm._b({staticClass:"gl-new-dropdown",scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._t("default")]},proxy:true},{key:"button-content",fn:function(){return [_vm._t("button-content",[(_vm.icon)?_c('gl-icon',{staticClass:"dropdown-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v("\n      "+_vm._s(_vm.text)+"\n      "),_c('gl-icon',{staticClass:"dropdown-chevron",attrs:{"name":"chevron-down"}})])]},proxy:true}],null,true)},'b-nav-item-dropdown',_vm.$attrs,false),_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/navbar/navbar.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/navbar/navbar.documentation.js
new file mode 100644
index 00000000000000..c24370948bc1cf
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/navbar/navbar.documentation.js
@@ -0,0 +1,12 @@
+var navbar = "### Navbar\n\nThe component <navbar> is a wrapper that positions branding, navigation, and other elements into a\nconcise header.\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': navbar
+});
+
+var navbar_documentation = {
+  description
+};
+
+export default navbar_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/navbar/navbar.js b/app/assets/javascripts/gitlab-ui/dist/components/base/navbar/navbar.js
new file mode 100644
index 00000000000000..46b576b97479d4
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/navbar/navbar.js
@@ -0,0 +1,48 @@
+import { BNavbar } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlNavbar',
+  components: {
+    BNavbar
+  },
+  inheritAttrs: false
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-navbar',_vm._g(_vm._b({staticClass:"gl-navbar"},'b-navbar',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/paginated_list/paginated_list.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/paginated_list/paginated_list.documentation.js
new file mode 100644
index 00000000000000..b88b3a45d45dcb
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/paginated_list/paginated_list.documentation.js
@@ -0,0 +1,7 @@
+var description = "The paginated list component allows the easy creation of list with pagination and client side sorting.\n";
+
+var paginated_list_documentation = {
+  description
+};
+
+export default paginated_list_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/paginated_list/paginated_list.js b/app/assets/javascripts/gitlab-ui/dist/components/base/paginated_list/paginated_list.js
new file mode 100644
index 00000000000000..d13c3108e6dd68
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/paginated_list/paginated_list.js
@@ -0,0 +1,194 @@
+import GlPagination from '../pagination/pagination';
+import GlSearchBoxByType from '../search_box_by_type/search_box_by_type';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlSearchBoxByType,
+    GlPagination
+  },
+  props: {
+    list: {
+      type: Array,
+      required: true
+    },
+    perPage: {
+      type: Number,
+      required: false,
+      default: 10
+    },
+    page: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    filterable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    itemKey: {
+      type: String,
+      required: false,
+      default: 'id'
+    },
+    filter: {
+      type: [String, Function],
+      required: false,
+      default: 'id'
+    },
+    emptyMessage: {
+      type: String,
+      required: false,
+      default: 'There are currently no items in this list.'
+    },
+    emptySearchMessage: {
+      type: String,
+      required: false,
+      default: 'Sorry, your filter produced no results.'
+    }
+  },
+
+  data() {
+    return {
+      pageIndex: this.page,
+      queryStr: ''
+    };
+  },
+
+  computed: {
+    filteredList() {
+      if (typeof this.filter === 'function') {
+        return this.list.filter(listItem => this.filter(listItem, this.queryStr));
+      }
+
+      return this.list.filter(listItem => listItem[this.filter].toLowerCase().includes(this.queryStr.toLowerCase()));
+    },
+
+    paginatedList() {
+      const offset = (this.pageIndex - 1) * this.perPage;
+      return this.filteredList.slice(offset, offset + this.perPage);
+    },
+
+    pageInfo() {
+      return {
+        perPage: this.perPage,
+        total: this.filterTotal,
+        page: this.pageIndex
+      };
+    },
+
+    total() {
+      return this.list.length;
+    },
+
+    filterTotal() {
+      return this.filteredList.length;
+    },
+
+    /**
+     * Determine if the original list had 0 items
+     *
+     * @return {Boolean} - If we started with an empty list
+     *
+     */
+    zeroTotal() {
+      return this.total === 0;
+    },
+
+    /**
+     * Determine if our search yields an empty list
+     *
+     * @return {Boolean} - If we have an empty search list
+     *
+     */
+    zeroSearchResults() {
+      return this.total > 0 && this.filterTotal === 0;
+    },
+
+    /**
+     * Determine if we originally had 0 results or 0 search results
+     *
+     * @return {Boolean} - If we have an empty search list
+     *
+     */
+    emptyList() {
+      return this.zeroTotal || this.zeroSearchResults;
+    }
+
+  },
+  watch: {
+    /**
+     * In GitLab UI storybook, when a user changes the page knob,
+     * we update the current page index.
+     *
+     * @param {Number}  newPage - A string param
+     * @return {undefined} - Nothing is returned
+     *
+     */
+    page(newPage) {
+      this.pageIndex = newPage;
+    },
+
+    /**
+     * In GitLab UI storybook, when a user changes the perPage knob,
+     * we reset the paginated list to the first page.
+     *
+     * @return {undefined} - Nothing is returned
+     *
+     */
+    perPage() {
+      this.pageIndex = 1;
+    }
+
+  },
+  methods: {
+    change(page) {
+      this.pageIndex = page;
+    },
+
+    query(queryStr) {
+      this.pageIndex = 1;
+      this.queryStr = queryStr;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"},[_vm._t("header"),_vm._v(" "),(_vm.filterable)?_c('gl-search-box-by-type',{on:{"input":_vm.query}}):_vm._e()],2),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),_c('ul',{staticClass:"list-group list-group-flush list-unstyled"},_vm._l((_vm.paginatedList),function(listItem){return _c('li',{key:listItem[_vm.itemKey],staticClass:"list-group-item"},[_vm._t("default",[_vm._v(_vm._s(listItem.id))],{"listItem":listItem,"query":_vm.queryStr})],2)}),0),_vm._v(" "),(!_vm.emptyList)?_c('gl-pagination',_vm._b({staticClass:"d-flex justify-content-center prepend-top-default",attrs:{"per-page":_vm.pageInfo.perPage,"value":_vm.pageInfo.page,"total-items":_vm.pageInfo.total},on:{"input":_vm.change}},'gl-pagination',_vm.$attrs,false)):_vm._e(),_vm._v(" "),(_vm.emptyList)?_c('div',{staticClass:"bs-callout bs-callout-warning mt-3 empty-message",class:{ 'empty-message': _vm.zeroTotal, 'empty-search': _vm.zeroSearchResults }},[_vm._v("\n    "+_vm._s(_vm.zeroTotal ? _vm.emptyMessage : _vm.emptySearchMessage)+"\n  ")]):_vm._e()],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/pagination/pagination.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/pagination/pagination.documentation.js
new file mode 100644
index 00000000000000..60b5996c4a6e2b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/pagination/pagination.documentation.js
@@ -0,0 +1,8 @@
+var description = "## Current page\n\nThe current page's value should be bound using `v-model`, e.g.:\n\n```html\n<script>\n  export default {\n    data: () => ({\n      page: 2,\n    }),\n  };\n</script>\n\n<template>\n  <gl-pagination v-model=\"page\" :per-page=\"10\" :total-items=\"100\" />\n</template>\n```\n\n## Compact pagination\n\nIn some cases, you might not be able to provide the total items count because your API doesn't\nsupport it or because of performance concerns. For such cases, the pagination component supports a\ncompact mode, where only the previous and next buttons are displayed.\n\nTo enable the compact mode, you'll need to provide the previous and/or next page numbers via the\n`prev-page` and `next-page` props respectively.\n\n> NOTE: If one of the props is omitted, the corresponding button will be disabled. If both\n> properties are omitted the pagination won't render at all.\n\n```html\n<template>\n  <gl-pagination :value=\"2\" :prev-page=\"1\" :next-page=\"3\" />\n</template>\n```\n\n## Limits\n\nThe `limits` prop is used to define pagination link limits based on Bootstrap's breakpoint sizes.\nIt is strongly recommended you provide a 'default' property, even if you have accounted for all\nbreakpoint sizes. While unlikely, it is possible breakpoints could change, thus, a default property\nensures a graceful fallback.\n\nHere is `limits` default value:\n\n```js\n{\n  xs: 0,\n  sm: 3,\n  md: 9,\n  default: 9,\n}\n```\n\n> Note: The component will not render any UI if the total items available for display is less than\n> the max items per page.\n\n## Internet Explorer 11\n\nThis component makes use of the\n[`Number.isInteger` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger),\nwhich is not supported in IE11, make sure it's being polyfilled when using the component.\n[`core-js`](https://github.com/zloirock/core-js) incudes the appropriate polyfill for this.\n";
+
+var pagination_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default pagination_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/pagination/pagination.js b/app/assets/javascripts/gitlab-ui/dist/components/base/pagination/pagination.js
new file mode 100644
index 00000000000000..d5f9714c73f02b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/pagination/pagination.js
@@ -0,0 +1,432 @@
+import debounce from 'lodash/debounce';
+import isFunction from 'lodash/isFunction';
+import range from 'lodash/range';
+import Breakpoints, { breakpoints } from '../../../utils/breakpoints';
+import { alignOptions, resizeDebounceTime } from '../../../utils/constants';
+import GlIcon from '../icon/icon';
+import GlLink from '../link/link';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const pageRange = (from, to) => range(from, to + 1, 1);
+
+var script = {
+  name: 'Pagination',
+  components: {
+    GlLink,
+    GlIcon
+  },
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  props: {
+    value: {
+      type: Number,
+      required: false,
+      default: 1,
+      validator: x => x > 0
+    },
+
+    /**
+     * Number of items per page
+     */
+    perPage: {
+      type: Number,
+      required: false,
+      default: 20,
+      validator: x => x > 0
+    },
+
+    /**
+     * Total number of items
+     */
+    totalItems: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+
+    /**
+     * The object must contain the xs, sm, md and default keys
+     */
+    limits: {
+      type: Object,
+      required: false,
+      default: () => ({
+        xs: 0,
+        sm: 3,
+        md: 9,
+        default: 9
+      }),
+      validator: value => {
+        const missingSizes = Object.keys(breakpoints).filter(size => !value[size]).length;
+        return missingSizes === 0 ? true : value.default;
+      }
+    },
+
+    /**
+     * A function that receives the page number and that returns a string representing the page URL
+     */
+    linkGen: {
+      type: Function,
+      required: false,
+      default: null
+    },
+
+    /**
+     * When using the compact pagination, use this prop to pass the previous page number
+     */
+    prevPage: {
+      type: Number,
+      required: false,
+      default: null
+    },
+
+    /**
+     * Text for the previous button (overridden by "previous" slot)
+     */
+    prevText: {
+      type: String,
+      required: false,
+      default: 'Prev'
+    },
+
+    /**
+     * When using the compact pagination, use this prop to pass the next page number
+     */
+    nextPage: {
+      type: Number,
+      required: false,
+      default: null
+    },
+
+    /**
+     * Text for the next button (overridden by "next" slot)
+     */
+    nextText: {
+      type: String,
+      required: false,
+      default: 'Next'
+    },
+
+    /**
+     * Text for the ellipsis (overridden by "ellipsis-left" and "ellipsis-right" slots)
+     */
+    ellipsisText: {
+      type: String,
+      required: false,
+      default: '…'
+    },
+
+    /**
+     * aria-label for the first page item
+     */
+    labelFirstPage: {
+      type: String,
+      required: false,
+      default: 'Go to first page'
+    },
+
+    /**
+     * aria-label for the previous page item
+     */
+    labelPrevPage: {
+      type: String,
+      required: false,
+      default: 'Go to previous page'
+    },
+
+    /**
+     * aria-label for the next page item
+     */
+    labelNextPage: {
+      type: String,
+      required: false,
+      default: 'Go to next page'
+    },
+
+    /**
+     * aria-label for the last page item
+     */
+    labelLastPage: {
+      type: String,
+      required: false,
+      default: 'Go to last page'
+    },
+
+    /**
+     * aria-label getter for numbered page items, defaults to "Go to page <page_number>"
+     */
+    labelPage: {
+      type: Function,
+      required: false,
+      default: page => `Go to page ${page}`
+    },
+
+    /**
+     * Controls the component\'s horizontal alignment, value should be one of "left", "center", "right" or "fill"
+     */
+    align: {
+      type: String,
+      required: false,
+      default: alignOptions.left,
+      validator: value => Object.keys(alignOptions).includes(value)
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      breakpoint: Breakpoints.getBreakpointSize(),
+      // If total pages count is below or equal to minTotalPagesToCollapse, collapsing is disabled
+      minTotalPagesToCollapse: 4
+    };
+  },
+
+  computed: {
+    isVisible() {
+      return this.totalPages > 1 || this.isCompactPagination;
+    },
+
+    isLinkBased() {
+      return isFunction(this.linkGen);
+    },
+
+    paginationLimit() {
+      return typeof this.limits[this.breakpoint] !== 'undefined' ? this.limits[this.breakpoint] : this.limits.default;
+    },
+
+    maxAdjacentPages() {
+      return Math.max(Math.ceil((this.paginationLimit - 1) / 2), 0);
+    },
+
+    totalPages() {
+      return Math.ceil(this.totalItems / this.perPage);
+    },
+
+    isFillAlign() {
+      return this.align === alignOptions.fill;
+    },
+
+    wrapperClasses() {
+      const classes = [];
+
+      if (this.align === alignOptions.center) {
+        classes.push('justify-content-center');
+      }
+
+      if (this.align === alignOptions.right) {
+        classes.push('justify-content-end');
+      }
+
+      if (this.isFillAlign) {
+        classes.push('text-center');
+      }
+
+      return classes;
+    },
+
+    shouldCollapseLeftSide() {
+      const diff = this.value - this.maxAdjacentPages; // Magic 3: prevents collapsing a single page on the left side
+
+      return diff >= this.maxAdjacentPages && diff > 3 && this.totalPages > this.minTotalPagesToCollapse;
+    },
+
+    shouldCollapseRightSide() {
+      // Magic 2: prevents collapsing a single page on the right side
+      const diff = this.totalPages - 2 - this.value;
+      return diff > this.maxAdjacentPages && this.totalPages > this.minTotalPagesToCollapse;
+    },
+
+    visibleItems() {
+      let items = [];
+
+      if (!this.isCompactPagination) {
+        let firstPage = this.shouldCollapseLeftSide ? this.value - this.maxAdjacentPages : 1; // If we're on last page, show at least one page to the left
+
+        firstPage = Math.min(firstPage, this.totalPages - 1);
+        let lastPage = this.shouldCollapseRightSide ? this.value + this.maxAdjacentPages : this.totalPages; // If we're on first page, show at least one page to the right
+
+        lastPage = Math.max(lastPage, 2); // Default numbered items
+
+        items = pageRange(firstPage, lastPage).map(page => this.getPageItem(page));
+
+        if (this.shouldCollapseLeftSide) {
+          items.splice(0, 0, this.getPageItem(1, this.labelFirstPage), this.getEllipsisItem('left'));
+        }
+
+        if (this.shouldCollapseRightSide) {
+          items.push(this.getEllipsisItem('right'), this.getPageItem(this.totalPages, this.labelLastPage));
+        }
+      }
+
+      return items;
+    },
+
+    isCompactPagination() {
+      return Boolean(!this.totalItems && (this.prevPage || this.nextPage));
+    },
+
+    prevPageIsDisabled() {
+      return this.pageIsDisabled(this.value - 1);
+    },
+
+    nextPageIsDisabled() {
+      return this.pageIsDisabled(this.value + 1);
+    }
+
+  },
+
+  created() {
+    window.addEventListener('resize', debounce(this.setBreakpoint, resizeDebounceTime));
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', debounce(this.setBreakpoint, resizeDebounceTime));
+  },
+
+  methods: {
+    setBreakpoint() {
+      this.breakpoint = Breakpoints.getBreakpointSize();
+    },
+
+    pageIsDisabled(page) {
+      return this.disabled || page < 1 || this.isCompactPagination && page > this.value && !this.nextPage || !this.isCompactPagination && page > this.totalPages;
+    },
+
+    getPageItem(page) {
+      let label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      const commonAttrs = {
+        'aria-label': label || this.labelPage(page),
+        href: '#',
+        class: []
+      };
+      const isActivePage = page === this.value;
+      const isDisabled = this.pageIsDisabled(page);
+      const attrs = { ...commonAttrs
+      };
+      const listeners = {};
+
+      if (isActivePage) {
+        attrs.class.push('active');
+      } // Disable previous and/or next buttons if needed
+
+
+      if (this.isLinkBased) {
+        attrs.href = this.linkGen(page);
+      }
+
+      listeners.click = e => this.handleClick(e, page);
+
+      return {
+        content: page,
+        component: isDisabled ? 'span' : GlLink,
+        disabled: isDisabled,
+        key: `page_${page}`,
+        slot: 'page-number',
+        slotData: {
+          page,
+          active: isActivePage,
+          disabled: isDisabled
+        },
+        attrs,
+        listeners
+      };
+    },
+
+    getEllipsisItem(side) {
+      return {
+        content: this.ellipsisText,
+        key: `ellipsis_${side}`,
+        slot: `ellipsis-${side}`,
+        component: 'span',
+        disabled: true
+      };
+    },
+
+    handleClick(event, value) {
+      if (!this.isLinkBased) {
+        event.preventDefault();
+        /**
+         * Emitted when the page changes
+         * @event input
+         * @arg {number} value The page that just got loaded
+         */
+
+        this.$emit('input', value);
+      }
+    },
+
+    handlePrevious(event, value) {
+      this.handleClick(event, value);
+      /**
+       * Emitted when the "previous" button is clicked
+       * @event previous
+       */
+
+      this.$emit('previous');
+    },
+
+    handleNext(event, value) {
+      this.handleClick(event, value);
+      /**
+       * Emitted when the "next" button is clicked
+       * @event next
+       */
+
+      this.$emit('next');
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('ul',{staticClass:"pagination gl-pagination text-nowrap",class:_vm.wrapperClasses,attrs:{"role":"navigation","aria-label":"Pagination"}},[_c('li',{staticClass:"page-item",class:{
+      disabled: _vm.prevPageIsDisabled,
+      'flex-fill': _vm.isFillAlign,
+    }},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"aria-disabled":_vm.prevPageIsDisabled,"aria-label":_vm.labelPrevPage || _vm.labelPage(_vm.value - 1),"href":_vm.isLinkBased ? _vm.linkGen(_vm.value - 1) : '#'},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])],null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
+      disabled: item.disabled,
+      'flex-fill': _vm.isFillAlign,
+    }},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,[_vm._v(_vm._s(item.content))],null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{staticClass:"page-item",class:{
+      disabled: _vm.nextPageIsDisabled,
+      'flex-fill': _vm.isFillAlign,
+    }},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-disabled":_vm.nextPageIsDisabled,"aria-label":_vm.labelNextPage || _vm.labelPage(_vm.value + 1),"href":_vm.isLinkBased ? _vm.linkGen(_vm.value + 1) : '#'},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",[_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2):_vm._e()};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/path/data.js b/app/assets/javascripts/gitlab-ui/dist/components/base/path/data.js
new file mode 100644
index 00000000000000..83819c16eb87db
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/path/data.js
@@ -0,0 +1,33 @@
+const mockPathItems = [{
+  title: 'First',
+  metric: '1d'
+}, {
+  title: 'Second',
+  metric: '2d'
+}, {
+  title: 'Third',
+  metric: '3d'
+}, {
+  title: 'Fourth',
+  metric: '4d'
+}, {
+  title: 'Fifth',
+  metric: '5d'
+}, {
+  title: 'Sixth',
+  metric: '6d'
+}, {
+  title: 'Seventh',
+  metric: '7d'
+}, {
+  title: 'Eighth',
+  metric: '8d'
+}, {
+  title: 'Ninth',
+  metric: '9d'
+}, {
+  title: 'Tenth',
+  metric: '10d'
+}];
+
+export { mockPathItems };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/path/path.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/path/path.documentation.js
new file mode 100644
index 00000000000000..f2916c5e4d66e1
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/path/path.documentation.js
@@ -0,0 +1,8 @@
+var description = "## Usage\n\nPaths are horizontal process flows composed of a series of \"stages\".\nLike tabs, paths let users focus in on specific content at each stage\nwhilst still keeping all the other stages in view. Only one stage can\nbe active at a given time.\n\n### Implemetation\n\nThe component should be initialized with an array of data objects. By\ndefault, the first item in the array will be selected. This can be\noverridden by passing in an object with the selected property set to\ntrue.\n\n```js\nitems: [\n  {\n    title: 'First',\n  },\n  {\n    title: 'Second',\n    selected: true\n  },\n  ...\n```\n\nOnce an item has been selected the `selected` event will be emitted.\nThe emitted event will include the entire object at the selected index.\n\n#### Customization\n\nAdditional attributes can be configured via the `items` object. Currently\nsupport for `metric` and `icon` are provided. Please see the individual\nexamples for further information on these.\n\n### Additional information\n\nA `backgroundColor` property can be specified when using this component\non different colored backgrounds.\n\nThis component supports various themes and is mobile responsive.\n";
+
+var path_documentation = {
+  description,
+  followsDesignSystem: true
+};
+
+export default path_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/path/path.js b/app/assets/javascripts/gitlab-ui/dist/components/base/path/path.js
new file mode 100644
index 00000000000000..a6d40300f640e2
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/path/path.js
@@ -0,0 +1,209 @@
+import _findLast from 'lodash/findLast';
+import _uniqueId from 'lodash/uniqueId';
+import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import { glThemes } from '../../../utils/constants';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const BOUNDARY_WIDTH = 40;
+const PATH_ITEM_CLASS = 'gl-path-button';
+const PATH_ACTIVE_ITEM_PREFIX = 'gl-path-active-item';
+var script = {
+  components: {
+    GlIcon
+  },
+  directives: {
+    GlResizeObserverDirective
+  },
+  props: {
+    /**
+     * A list of path items in the form:
+     * ```
+     * {
+     *   title:  String, required
+     *   metric: Any, optional
+     *   icon:   String, optional
+     * }
+     * ```
+     */
+    items: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+
+    /**
+     * The color theme to be used.
+     */
+    theme: {
+      type: String,
+      required: false,
+      default: 'indigo',
+      validator: theme => glThemes.includes(theme)
+    },
+
+    /**
+     * The items' background color.
+     */
+    backgroundColor: {
+      type: String,
+      required: false,
+      default: 'white'
+    }
+  },
+
+  data() {
+    return {
+      selectedIndex: 0,
+      width: 0,
+      scrollLeft: 0
+    };
+  },
+
+  computed: {
+    activeClass() {
+      return `${PATH_ACTIVE_ITEM_PREFIX}-${this.theme}`;
+    },
+
+    entireListVisible() {
+      return this.width >= this.getScrollWidth();
+    },
+
+    displayScrollLeft() {
+      return !this.entireListVisible && this.scrollLeft;
+    },
+
+    displayScrollRight() {
+      const scrollOffset = this.getScrollWidth() - this.width;
+      return !this.entireListVisible && scrollOffset !== this.scrollLeft;
+    },
+
+    rightHandBoundary() {
+      return this.width - BOUNDARY_WIDTH + this.scrollLeft;
+    },
+
+    leftHandBoundary() {
+      return this.scrollLeft + BOUNDARY_WIDTH;
+    }
+
+  },
+
+  mounted() {
+    const selectedIndex = this.items.findIndex(item => item.selected);
+    this.selectedIndex = selectedIndex > 0 ? selectedIndex : 0;
+  },
+
+  beforeCreate() {
+    this.pathUuid = _uniqueId('path-');
+  },
+
+  methods: {
+    pathItemClass(index) {
+      return index === this.selectedIndex ? `${PATH_ITEM_CLASS} ${this.activeClass}` : PATH_ITEM_CLASS;
+    },
+
+    onItemClicked(selectedIndex) {
+      this.selectedIndex = selectedIndex;
+      /**
+       * Emitted when an item is selected.
+       */
+
+      this.$emit('selected', this.items[this.selectedIndex]);
+    },
+
+    handleResize(_ref) {
+      let {
+        contentRect: {
+          width
+        }
+      } = _ref;
+      this.width = width;
+    },
+
+    scrollPathLeft() {
+      const previousItemToScollTo = _findLast(this.$refs.pathListItems, listItem => {
+        return listItem.offsetLeft < this.leftHandBoundary;
+      });
+
+      const availableWidth = this.width - previousItemToScollTo.offsetWidth - BOUNDARY_WIDTH - BOUNDARY_WIDTH;
+      let scrollTo = previousItemToScollTo.offsetLeft - BOUNDARY_WIDTH - availableWidth;
+
+      if (scrollTo < 0) {
+        scrollTo = 0;
+      }
+
+      this.scrollPath(scrollTo);
+    },
+
+    scrollPathRight() {
+      const nextItemToScollTo = this.$refs.pathListItems.find(listItem => listItem.offsetLeft + listItem.offsetWidth > this.rightHandBoundary);
+      let scrollTo = nextItemToScollTo.offsetLeft - BOUNDARY_WIDTH;
+
+      if (scrollTo > this.getScrollWidth() - this.width) {
+        scrollTo = this.getScrollWidth() - this.width;
+      }
+
+      this.scrollPath(scrollTo);
+    },
+
+    scrollPath(scrollTo) {
+      this.$refs.pathNavList.scrollTo({
+        left: scrollTo,
+        behavior: 'smooth'
+      });
+      this.scrollLeft = scrollTo;
+    },
+
+    getScrollWidth() {
+      return this.$refs.pathNavList ? this.$refs.pathNavList.scrollWidth : 0;
+    },
+
+    shouldDisplayIcon(icon) {
+      return icon && iconSpriteInfo.icons.includes(icon);
+    },
+
+    pathId(index) {
+      return `${this.pathUuid}-item-${index}`;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"gl-resize-observer-directive",rawName:"v-gl-resize-observer-directive",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-path-nav",style:({ '--path-bg-color': _vm.backgroundColor }),attrs:{"data-testid":"gl-path-nav"}},[_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollLeft),expression:"displayScrollLeft"}],staticClass:"gl-path-fade gl-path-fade-left"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll left"},on:{"click":_vm.scrollPathLeft}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-left"}})],1)]),_vm._v(" "),_c('ul',{ref:"pathNavList",staticClass:"gl-path-nav-list"},_vm._l((_vm.items),function(item,index){return _c('li',{key:index,ref:"pathListItems",refInFor:true,staticClass:"gl-path-nav-list-item",attrs:{"id":_vm.pathId(index)}},[_c('button',{class:_vm.pathItemClass(index),on:{"click":function($event){return _vm.onItemClicked(index)}}},[(_vm.shouldDisplayIcon(item.icon))?_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":item.icon,"data-testid":"gl-path-item-icon"}}):_vm._e(),_vm._v("\n        "+_vm._s(item.title)),(item.metric)?_c('span',{staticClass:"gl-font-weight-normal gl-pl-2"},[_vm._v(_vm._s(item.metric))]):_vm._e()],1),_vm._v(" "),_vm._t("default",null,{"pathItem":item,"pathId":_vm.pathId(index)})],2)}),0),_vm._v(" "),_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollRight),expression:"displayScrollRight"}],staticClass:"gl-path-fade gl-path-fade-right"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll right"},on:{"click":_vm.scrollPathRight}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-right"}})],1)])])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/index.js
new file mode 100644
index 00000000000000..711c014a31dff4
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/index.js
@@ -0,0 +1,25 @@
+import PopoverBasicExample from './popover.basic.example';
+import PopoverLoadingExample from './popover.loading.example';
+import PopoverNoTitleExample from './popover.notitle.example';
+
+var index = [{
+  name: 'Examples',
+  items: [{
+    id: 'popover-basic',
+    name: 'Basic',
+    description: 'Basic Popover',
+    component: PopoverBasicExample
+  }, {
+    id: 'popover-loading',
+    name: 'Loading',
+    description: 'Popover with Skeleton Loading',
+    component: PopoverLoadingExample
+  }, {
+    id: 'popover-no-title',
+    name: 'No title',
+    description: 'Popover with no title',
+    component: PopoverNoTitleExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/popover.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/popover.basic.example.js
new file mode 100644
index 00000000000000..7bac2d29a93f8b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/popover.basic.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"popovercontainer"}},[_c('gl-button',{attrs:{"id":"pop-basic"}},[_vm._v("Popover Button")]),_vm._v(" "),_c('gl-popover',{attrs:{"target":"pop-basic","container":"popovercontainer","placement":"top","title":"This is a Popover","triggers":"hover focus","content":"With a placement of top"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/popover.loading.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/popover.loading.example.js
new file mode 100644
index 00000000000000..4fe54ed155609d
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/popover.loading.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"popovercontainer"}},[_c('gl-button',{attrs:{"id":"pop-basic"}},[_vm._v("Popover Button")]),_vm._v(" "),_c('gl-popover',{attrs:{"target":"pop-basic","container":"popovercontainer","placement":"top","title":"My popover","triggers":"hover focus","show":""}},[_c('gl-skeleton-loader')],1)],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/popover.notitle.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/popover.notitle.example.js
new file mode 100644
index 00000000000000..88af18380e84ff
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/popover/examples/popover.notitle.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"popovercontainer"}},[_c('gl-button',{attrs:{"id":"pop-basic"}},[_vm._v("Popover Button")]),_vm._v(" "),_c('gl-popover',{attrs:{"target":"pop-basic","container":"popovercontainer","placement":"top","triggers":"hover focus","content":"Popover content with no title"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/popover/popover.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/popover/popover.documentation.js
new file mode 100644
index 00000000000000..76dfcd7fd1275b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/popover/popover.documentation.js
@@ -0,0 +1,27 @@
+import examples from './examples';
+
+var popover_documentation = {
+  followsDesignSystem: true,
+  examples,
+  bootstrapComponent: 'b-popover',
+  bootstrapPropsInfo: {
+    target: {
+      additionalInfo: 'Element string ID, or a reference to an element or component, that you want to trigger the popover.',
+      required: true
+    },
+    triggers: {
+      enum: 'triggerVariantOptions'
+    },
+    placement: {
+      enum: 'popoverPlacements'
+    },
+    boundary: {
+      additionalInfo: '"scrollParent", "viewport", "window", or a reference to an HTML element. This is the container that the popover will be constrained to visually.You may need to change this if your target element is in a small container with overflow scroll'
+    },
+    container: {
+      additionalInfo: 'Specify container as null (default, appends to <body>) to avoid rendering problems in more complex components (like input groups, button groups, etc). You can use container to optionally specify a different element to append the popover to.'
+    }
+  }
+};
+
+export default popover_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/popover/popover.js b/app/assets/javascripts/gitlab-ui/dist/components/base/popover/popover.js
new file mode 100644
index 00000000000000..13a445a8acd840
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/popover/popover.js
@@ -0,0 +1,92 @@
+import { BPopover } from 'bootstrap-vue/esm/index.js';
+import tooltipMixin from '../../mixins/tooltip_mixin';
+import CloseButton from '../../shared_components/close_button/close_button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const popoverRefName = 'bPopover';
+var script = {
+  components: {
+    BPopover,
+    CloseButton
+  },
+  mixins: [tooltipMixin(popoverRefName)],
+  inheritAttrs: false,
+  props: {
+    cssClasses: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    triggers: {
+      type: String,
+      required: false,
+      default: 'hover focus'
+    },
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    showCloseButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    customClass() {
+      return ['gl-popover', ...this.cssClasses].join(' ');
+    },
+
+    shouldShowTitle() {
+      return this.$scopedSlots.title || this.title || this.showCloseButton;
+    }
+
+  },
+  methods: {
+    close(e) {
+      this.$refs[popoverRefName].doClose();
+      this.$emit('close-button-clicked', e);
+    }
+
+  },
+  popoverRefName
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",[_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-float-right gl-mt-n2 gl-mr-n3",attrs:{"data-testid":"close-button"},on:{"click":_vm.close}}):_vm._e()]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners),[_vm._v(" "),_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/progress_bar/progress_bar.js b/app/assets/javascripts/gitlab-ui/dist/components/base/progress_bar/progress_bar.js
new file mode 100644
index 00000000000000..72c6f88e2ba0cd
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/progress_bar/progress_bar.js
@@ -0,0 +1,46 @@
+import { BProgress } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BProgress
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-progress',_vm._b({},'b-progress',_vm.$attrs,false))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/index.js
new file mode 100644
index 00000000000000..373624203389c1
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/index.js
@@ -0,0 +1,22 @@
+import SearchBoxByClickDefaultExample from './search_box_by_click.default.example';
+import SearchBoxByClickHistoryExample from './search_box_by_click.history.example';
+import SearchBoxByClickVModelExample from './search_box_by_click.v_model.example';
+
+var index = [{
+  name: 'Search Box By Click',
+  items: [{
+    id: 'search-box-by-click',
+    name: 'default',
+    component: SearchBoxByClickDefaultExample
+  }, {
+    id: 'search-box-by-click-v-model',
+    name: 'Using v-model',
+    component: SearchBoxByClickVModelExample
+  }, {
+    id: 'search-box-by-click-with-history',
+    name: 'with history',
+    component: SearchBoxByClickHistoryExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/search_box_by_click.default.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/search_box_by_click.default.example.js
new file mode 100644
index 00000000000000..eebb087faf8779
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/search_box_by_click.default.example.js
@@ -0,0 +1,48 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      value: ''
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"tooltipcontainer"}},[_c('gl-search-box-by-click',{attrs:{"tooltip-container":"#tooltipcontainer"},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/search_box_by_click.history.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/search_box_by_click.history.example.js
new file mode 100644
index 00000000000000..f559477f4ec7a9
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/search_box_by_click.history.example.js
@@ -0,0 +1,51 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      value: '',
+      history: ['author:@admin', 'assignee:@admin milestone:%12.5', 'label:~test']
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"tooltipcontainer"}},[_c('gl-search-box-by-click',{attrs:{"history-items":_vm.history,"tooltip-container":"#tooltipcontainer"},scopedSlots:_vm._u([{key:"history-item",fn:function(ref){
+var historyItem = ref.historyItem;
+return [_vm._v("\n      "+_vm._s(historyItem)+"\n    ")]}}]),model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/search_box_by_click.v_model.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/search_box_by_click.v_model.example.js
new file mode 100644
index 00000000000000..4534826882153d
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/examples/search_box_by_click.v_model.example.js
@@ -0,0 +1,54 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      text: ''
+    };
+  },
+
+  methods: {
+    setText() {
+      this.text = 'Something else';
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"tooltipcontainer"}},[_c('gl-search-box-by-click',{attrs:{"tooltip-container":"#tooltipcontainer"},model:{value:(_vm.text),callback:function ($$v) {_vm.text=$$v;},expression:"text"}}),_vm._v(" "),_c('gl-button',{staticClass:"gl-mt-4",on:{"click":_vm.setText}},[_vm._v("Click here to set text to \"Something else\" using v-model")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/search_box_by_click.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/search_box_by_click.documentation.js
new file mode 100644
index 00000000000000..93b71631a88e0e
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/search_box_by_click.documentation.js
@@ -0,0 +1,83 @@
+import examples from './examples';
+
+var description = "# Search Box By Click\n\nProvides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).\n";
+
+var search_box_by_click_documentation = {
+  followsDesignSystem: true,
+  description,
+  examples,
+  propsInfo: {
+    value: {
+      additionalInfo: 'If provided, used as value of search input'
+    },
+    historyItems: {
+      type: Array,
+      required: false,
+      additionalInfo: 'If provided, used as history items for this component'
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      additionalInfo: 'If provided, used as history items for this component'
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      additionalInfo: 'If provided and true, disables the input and controls'
+    },
+    recentSearchesHeader: {
+      type: String,
+      required: false,
+      default: 'Recent searches',
+      additionalInfo: 'i18n for recent searches title within history dropdown'
+    },
+    clearButtonTitle: {
+      type: String,
+      required: false,
+      default: 'Clear',
+      additionalInfo: 'i18n for clear button title'
+    },
+    closeButtonTitle: {
+      type: String,
+      required: false,
+      default: 'Close',
+      additionalInfo: 'i18n for close button title within history dropdown'
+    },
+    clearRecentSearchesText: {
+      type: String,
+      required: false,
+      default: 'Clear recent searches',
+      additionalInfo: 'i18n for recent searches clear text'
+    },
+    tooltipContainer: {
+      additionalInfo: 'Container for tooltip. Valid values: DOM node, selector string or `false` for default'
+    }
+  },
+  events: [{
+    event: 'clear',
+    description: 'Emitted when search is cleared'
+  }, {
+    event: 'submit',
+    args: [{
+      arg: 'value',
+      description: 'Search value'
+    }],
+    description: 'Emitted when search is submitted'
+  }, {
+    event: 'history-item-selected',
+    args: [{
+      arg: 'value',
+      description: 'History item'
+    }],
+    description: 'Emitted when item from history is selected'
+  }, {
+    event: 'clear-history',
+    description: 'Emitted when clear history button is clicked'
+  }],
+  slots: [{
+    name: 'history-item',
+    description: 'Slot to customize history item in history dropdown. Used only with history-items prop'
+  }]
+};
+
+export default search_box_by_click_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/search_box_by_click.js b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/search_box_by_click.js
new file mode 100644
index 00000000000000..6988d897d9afc9
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_click/search_box_by_click.js
@@ -0,0 +1,194 @@
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button';
+import GlButton from '../button/button';
+import GlDropdown from '../dropdown/dropdown';
+import GlDropdownDivider from '../dropdown/dropdown_divider';
+import GlDropdownItem from '../dropdown/dropdown_item';
+import GlDropdownText from '../dropdown/dropdown_text';
+import GlFormInput from '../form/form_input/form_input';
+import GlFormInputGroup from '../form/form_input_group/form_input_group';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlClearIconButton,
+    GlIcon,
+    GlButton,
+    GlFormInput,
+    GlDropdown,
+    GlDropdownText,
+    GlDropdownItem,
+    GlDropdownDivider,
+    GlFormInputGroup
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  props: {
+    value: {
+      required: false,
+      default: '',
+      // SearchBoxByClick could serve as a container for complex fields (see GlFilteredSearch)
+      // so we should not force any specific type for value here
+      validator: () => true
+    },
+    historyItems: {
+      type: Array,
+      required: false,
+      default: null
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: 'Search'
+    },
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    recentSearchesHeader: {
+      type: String,
+      required: false,
+      default: 'Recent searches'
+    },
+    clearButtonTitle: {
+      type: String,
+      required: false,
+      default: 'Clear'
+    },
+    closeButtonTitle: {
+      type: String,
+      required: false,
+      default: 'Close'
+    },
+    clearRecentSearchesText: {
+      type: String,
+      required: false,
+      default: 'Clear recent searches'
+    },
+    noRecentSearchesText: {
+      type: String,
+      required: false,
+      default: "You don't have any recent searches"
+    },
+    tooltipContainer: {
+      required: false,
+      default: false,
+      validator: value => value === false || typeof value === 'string' || value instanceof HTMLElement
+    }
+  },
+
+  data() {
+    return {
+      currentValue: null,
+      isFocused: false
+    };
+  },
+
+  computed: {
+    inputAttributes() {
+      const attributes = {
+        type: 'search',
+        placeholder: this.placeholder,
+        ...this.$attrs
+      };
+
+      if (!attributes['aria-label']) {
+        attributes['aria-label'] = attributes.placeholder;
+      }
+
+      return attributes;
+    },
+
+    hasValue() {
+      return Boolean(this.currentValue);
+    }
+
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        this.currentValue = newValue;
+      },
+
+      immediate: true
+    },
+
+    currentValue(newValue) {
+      this.$emit('input', newValue);
+    }
+
+  },
+  methods: {
+    closeHistoryDropdown() {
+      this.$refs.historyDropdown.hide();
+    },
+
+    search(value) {
+      this.$emit('submit', value);
+    },
+
+    selectHistoryItem(item) {
+      this.currentValue = item;
+      this.$emit('history-item-selected', item);
+      setTimeout(() => {
+        document.activeElement.blur();
+      });
+    },
+
+    clearInput() {
+      this.currentValue = '';
+      this.$emit('clear');
+
+      if (this.$refs.input) {
+        this.$refs.input.$el.focus();
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-input-group',{staticClass:"gl-search-box-by-click",scopedSlots:_vm._u([(_vm.historyItems)?{key:"prepend",fn:function(){return [_c('gl-dropdown',{ref:"historyDropdown",staticClass:"gl-search-box-by-click-history",attrs:{"menu-class":"gl-search-box-by-click-menu","category":"secondary","disabled":_vm.disabled},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon",attrs:{"name":"history"}}),_vm._v(" "),_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon-chevron",attrs:{"name":"chevron-down"}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only"},[_vm._v("Toggle history")])]},proxy:true}],null,false,2220989388)},[_vm._v(" "),_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-header"},[_vm._v("\n        "+_vm._s(_vm.recentSearchesHeader)+"\n        "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:({ container: _vm.tooltipContainer }),expression:"{ container: tooltipContainer }",modifiers:{"hover":true}}],ref:"closeHistory",staticClass:"gl-search-box-by-click-close-history-button",attrs:{"title":_vm.closeButtonTitle,"aria-label":_vm.closeButtonTitle,"category":"tertiary","name":"close","icon":"close"},on:{"click":_vm.closeHistoryDropdown}})],1),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),(_vm.historyItems.length)?[_vm._l((_vm.historyItems),function(item,idx){return _c('gl-dropdown-item',{key:idx,staticClass:"gl-search-box-by-click-history-item",on:{"click":function($event){return _vm.selectHistoryItem(item)}}},[_vm._t("history-item",[_vm._v(_vm._s(item))],{"historyItem":item})],2)}),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),_c('gl-dropdown-item',{ref:"clearHistory",on:{"click":function($event){return _vm.$emit('clear-history')}}},[_vm._v(_vm._s(_vm.clearRecentSearchesText))])]:_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-no-searches"},[_vm._v(_vm._s(_vm.noRecentSearchesText))])],2)]},proxy:true}:null,{key:"append",fn:function(){return [_c('gl-button',{ref:"searchButton",staticClass:"gl-search-box-by-click-search-button",attrs:{"icon":"search","disabled":_vm.disabled,"aria-label":"Search"},on:{"click":function($event){return _vm.search(_vm.currentValue)}}})]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("input",[_c('gl-form-input',_vm._b({ref:"input",staticClass:"gl-search-box-by-click-input",attrs:{"disabled":_vm.disabled},on:{"focus":function($event){_vm.isFocused = true;},"blur":function($event){_vm.isFocused = false;},"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.search(_vm.currentValue)}},model:{value:(_vm.currentValue),callback:function ($$v) {_vm.currentValue=$$v;},expression:"currentValue"}},'gl-form-input',_vm.inputAttributes,false))]),_vm._v(" "),(_vm.clearable && _vm.hasValue && !_vm.disabled)?_c('gl-clear-icon-button',{staticClass:"gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer,"data-testid":"filtered-search-clear-button"},on:{"click":_vm.clearInput}}):_vm._e()],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/examples/index.js
new file mode 100644
index 00000000000000..73c8368d123fe0
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/examples/index.js
@@ -0,0 +1,17 @@
+import SearchBoxByTypeDefaultExample from './search_box_by_type.default.example';
+import SearchBoxByTypeLoadingExample from './search_box_by_type.loading.example';
+
+var index = [{
+  name: 'Search Box By Type',
+  items: [{
+    id: 'search-box-by-type',
+    name: 'default',
+    component: SearchBoxByTypeDefaultExample
+  }, {
+    id: 'search-box-by-type-loading',
+    name: 'loading',
+    component: SearchBoxByTypeLoadingExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/examples/search_box_by_type.default.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/examples/search_box_by_type.default.example.js
new file mode 100644
index 00000000000000..5c1f5d08bc45f2
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/examples/search_box_by_type.default.example.js
@@ -0,0 +1,48 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      value: ''
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"tooltipcontainer"}},[_c('gl-search-box-by-type',{attrs:{"tooltip-container":"#tooltipcontainer"},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/examples/search_box_by_type.loading.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/examples/search_box_by_type.loading.example.js
new file mode 100644
index 00000000000000..79a8d37d6df782
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/examples/search_box_by_type.loading.example.js
@@ -0,0 +1,65 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      value: '',
+      isLoading: false
+    };
+  },
+
+  watch: {
+    value(newValue) {
+      if (newValue) {
+        clearTimeout(this.loader);
+        this.isLoading = true;
+        this.loader = setTimeout(() => {
+          this.isLoading = false;
+        }, 2000);
+      } else if (this.loader) {
+        this.isLoading = false;
+        clearTimeout(this.loader);
+        this.loader = null;
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"tooltipcontainer"}},[_c('gl-search-box-by-type',{attrs:{"is-loading":_vm.isLoading,"tooltip-container":"#tooltipcontainer"},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/index.js
new file mode 100644
index 00000000000000..8b137891791fe9
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/index.js
@@ -0,0 +1 @@
+
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/search_box_by_type.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/search_box_by_type.documentation.js
new file mode 100644
index 00000000000000..843ff0b5f83c9c
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/search_box_by_type.documentation.js
@@ -0,0 +1,26 @@
+import examples from './examples';
+
+var description = "# Search Box By Type\n\nProvides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).\n";
+
+var search_box_by_type_documentation = {
+  followsDesignSystem: true,
+  description,
+  propsInfo: {
+    value: {
+      additionalInfo: 'If provided, used as value of search input'
+    },
+    disabled: {
+      additionalInfo: 'If provided and true, disables the input and controls'
+    },
+    isLoading: {
+      additionalInfo: 'Puts search box into loading state, rendering spinner'
+    },
+    tooltipContainer: {
+      additionalInfo: 'Container for tooltip. Valid values: DOM node, selector string or `false` for default'
+    }
+  },
+  examples,
+  bootstrapComponent: 'b-form-input'
+};
+
+export default search_box_by_type_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/search_box_by_type.js b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/search_box_by_type.js
new file mode 100644
index 00000000000000..7228ebf0302679
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/search_box_by_type/search_box_by_type.js
@@ -0,0 +1,128 @@
+import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button';
+import GlFormInput from '../form/form_input/form_input';
+import GlIcon from '../icon/icon';
+import GlLoadingIcon from '../loading_icon/loading_icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const model = {
+  prop: 'value',
+  event: 'input'
+};
+var script = {
+  components: {
+    GlClearIconButton,
+    GlIcon,
+    GlFormInput,
+    GlLoadingIcon
+  },
+  inheritAttrs: false,
+  model,
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    clearButtonTitle: {
+      type: String,
+      required: false,
+      default: 'Clear'
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    tooltipContainer: {
+      required: false,
+      default: false,
+      validator: value => value === false || typeof value === 'string' || value instanceof HTMLElement
+    }
+  },
+  computed: {
+    inputAttributes() {
+      const attributes = {
+        type: 'search',
+        placeholder: 'Search',
+        ...this.$attrs
+      };
+
+      if (!attributes['aria-label']) {
+        attributes['aria-label'] = attributes.placeholder;
+      }
+
+      return attributes;
+    },
+
+    hasValue() {
+      return Boolean(this.value.length);
+    },
+
+    inputListeners() {
+      return { ...this.$listeners,
+        input: value => {
+          this.$emit('input', value);
+        }
+      };
+    },
+
+    showClearButton() {
+      return this.hasValue && !this.disabled;
+    }
+
+  },
+  methods: {
+    clearInput() {
+      this.$emit('input', '');
+      this.focusInput();
+    },
+
+    focusInput() {
+      this.$refs.input.$el.focus();
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-search-box-by-type"},[_c('gl-icon',{staticClass:"gl-search-box-by-type-search-icon",attrs:{"name":"search"}}),_vm._v(" "),_c('gl-form-input',_vm._g(_vm._b({ref:"input",staticClass:"gl-search-box-by-type-input",attrs:{"value":_vm.value,"disabled":_vm.disabled}},'gl-form-input',_vm.inputAttributes,false),_vm.inputListeners)),_vm._v(" "),_c('div',{staticClass:"gl-search-box-by-type-right-icons"},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"gl-search-box-by-type-loading-icon"}):_vm._e(),_vm._v(" "),(_vm.showClearButton)?_c('gl-clear-icon-button',{staticClass:"gl-search-box-by-type-clear gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer},on:{"click":function($event){$event.stopPropagation();return _vm.clearInput($event)}}}):_vm._e()],1)],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/segmented_control/segmented_control.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/segmented_control/segmented_control.documentation.js
new file mode 100644
index 00000000000000..9b03c9763e6b05
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/segmented_control/segmented_control.documentation.js
@@ -0,0 +1,8 @@
+var description = "Button group of equal options where only one can be selected and active.\n";
+
+var segmented_control_documentation = {
+  followsDesignSystem: false,
+  description
+};
+
+export default segmented_control_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/segmented_control/segmented_control.js b/app/assets/javascripts/gitlab-ui/dist/components/base/segmented_control/segmented_control.js
new file mode 100644
index 00000000000000..e50d91db999ea2
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/segmented_control/segmented_control.js
@@ -0,0 +1,118 @@
+import { BFormRadioGroup } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const genericErrorMessage = 'Segmented button should always have valid option selected';
+var script = {
+  components: {
+    BFormRadioGroup
+  },
+  inheritAttrs: false,
+  model: {
+    prop: 'checked',
+    event: 'input'
+  },
+  props: {
+    checked: {
+      required: true,
+      validator: () => true
+    },
+    options: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    enabledOptions() {
+      return this.options.filter(option => !option.disabled);
+    }
+
+  },
+  watch: {
+    checked: {
+      handler(newValue, oldValue) {
+        this.checkValue(newValue, oldValue);
+      }
+
+    },
+    options: {
+      handler() {
+        this.checkValue(this.checked);
+      }
+
+    }
+  },
+
+  created() {
+    this.checkValue(this.checked);
+  },
+
+  methods: {
+    checkValue(newValue) {
+      let oldValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+      if (!this.isValidValue(newValue)) {
+        // eslint-disable-next-line no-console
+        console.warn(genericErrorMessage);
+
+        if (this.enabledOptions.length) {
+          const suggestion = oldValue && this.isValidValue(oldValue) ? oldValue : this.enabledOptions[0].value;
+          /**
+           * Emitted when the selection changes
+           * @event input
+           * @argument checked The selected option
+           */
+
+          this.$emit('input', suggestion);
+        }
+      }
+    },
+
+    isValidValue(val) {
+      return this.enabledOptions.some(_ref => {
+        let {
+          value
+        } = _ref;
+        return value === val;
+      });
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-radio-group',_vm._g(_vm._b({staticClass:"gl-segmented-control",attrs:{"buttons":"","button-variant":"gl-segmented-button gl-button"}},'b-form-radio-group',Object.assign({}, _vm.$attrs, {options: _vm.options, checked: _vm.checked}),false),_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loader/skeleton_loader.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loader/skeleton_loader.documentation.js
new file mode 100644
index 00000000000000..0ef426f970c672
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loader/skeleton_loader.documentation.js
@@ -0,0 +1,13 @@
+var skeleton_loader = "Skeleton loaders are to be used when pages or sections can be progressively populated with content,\nsuch as text and images, as they become available. Generally speaking the first batch of content\nwill be the lightest to load and is followed by secondary and tertiary content batches. Each loading\nstep will add in more detail to the page until no skeleton loaders are present anymore. Content\nshould replace skeleton objects immediately when the data is available.\n\nThe skeleton loader component accepts shapes which in return will create a skeleton state with a\nloading animation. Any skeleton state components should be created with\n`<gl-skeleton-loader></gl-skeleton-loader>`. If no shape is passed via the slot the default skeleton\nwill be used. See \"Default\" and \"Default With Custom Props\" examples.\n\n## Progressive Loading\n\nDetermine if progressive loading is available, if it is break apart the skeleton to load data as it\nbecomes readily available. If progessive loading is not available, replace the entire skeleton when\nthe data is available.\n\n## Under the hood\n\nSkeleton Loader is a port of [vue-content-loader](https://github.com/egoist/vue-content-loader).\nSome changes have been made to the code to better suit our codebase, such as removing props and\nrefactoring into a SFC. Please take a look at their documentation and a useful [UI tool](http://danilowoz.com/create-vue-content-loader/)\nfor seeing the code output for `svg` shapes.\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': skeleton_loader
+});
+
+var skeleton_loader_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default skeleton_loader_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loader/skeleton_loader.js b/app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loader/skeleton_loader.js
new file mode 100644
index 00000000000000..d8bd35018c5896
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loader/skeleton_loader.js
@@ -0,0 +1,240 @@
+import _range from 'lodash/range';
+import { uid } from '../../../utils/utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const DEFAULT_LINE_MAX_WIDTH = 235;
+const DEFAULT_LINE_WIDTH_PERCENTAGES = [65, 100, 85];
+const DEFAULT_LINE_HEIGHT = 10;
+const DEFAULT_LINE_SPACING = 4;
+const DEFAULT_SVG_WIDTH = 400;
+const DEFAULT_SVG_HEIGHT = 130;
+var script = {
+  name: 'GlSkeletonLoader',
+  functional: true,
+  props: {
+    /**
+     * It will be set in the viewbox attr in the <svg />.
+     * Defaults to 400 when skeleton is passed via the slot. Defaults to 235 when default skeleton is used
+     */
+    width: {
+      type: Number,
+      default: null,
+      required: false
+    },
+
+    /**
+     * It will be set in the viewbox attr in the <svg />. Defaults to 130 when skeleton is passed via the slot.
+     * Defaults to the combined height of the lines when default skeleton is used
+     */
+    height: {
+      type: Number,
+      default: null,
+      required: false
+    },
+
+    /**
+     * Aspect ratio option of <svg/>
+     */
+    preserveAspectRatio: {
+      type: String,
+      default: 'xMidYMid meet',
+      required: false
+    },
+
+    /**
+     * Required if you're using <base url="/" /> in your <head />. Defaults to an empty string.
+     * This prop is common used as: <gl-skeleton-loader :base-url="$route.fullPath" /> which will fill the SVG attribute with the relative path.
+     */
+    baseUrl: {
+      type: String,
+      default: '',
+      required: false
+    },
+
+    /**
+     * Defaults to unique id
+     */
+    uniqueKey: {
+      type: String,
+      default: () => uid(),
+      required: false
+    },
+
+    /**
+     * Number of lines to show when using the default skeleton
+     */
+    lines: {
+      type: Number,
+      default: 3,
+      required: false
+    },
+
+    /**
+     * If the default skeleton lines should all be the same width
+     */
+    equalWidthLines: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+
+  render(createElement, _ref) {
+    let {
+      props,
+      slots
+    } = _ref;
+
+    const slotIsSet = () => slots().default;
+
+    const propValueOrDefault = (name, defaultValue) => props[name] !== null ? props[name] : defaultValue;
+
+    const width = () => {
+      if (slotIsSet()) {
+        return propValueOrDefault('width', DEFAULT_SVG_WIDTH);
+      }
+
+      return propValueOrDefault('width', DEFAULT_LINE_MAX_WIDTH);
+    };
+
+    const height = () => {
+      if (slotIsSet()) {
+        return propValueOrDefault('height', DEFAULT_SVG_HEIGHT);
+      }
+
+      return propValueOrDefault('height', props.lines * DEFAULT_LINE_HEIGHT + (props.lines - 1) * DEFAULT_LINE_SPACING);
+    };
+
+    const lineWidth = index => {
+      if (props.equalWidthLines) {
+        return '100%';
+      }
+
+      return `${DEFAULT_LINE_WIDTH_PERCENTAGES[index % DEFAULT_LINE_WIDTH_PERCENTAGES.length]}%`;
+    };
+
+    const svg = createElement('svg', {
+      class: {
+        'gl-skeleton-loader': true,
+        'gl-w-full gl-h-full': !slotIsSet()
+      },
+      attrs: {
+        viewBox: `0 0 ${width()} ${height()}`,
+        version: '1.1',
+        preserveAspectRatio: props.preserveAspectRatio
+      }
+    }, [createElement('title', {}, ['Loading']), createElement('rect', {
+      style: {
+        fill: `url(${props.baseUrl}#${props.uniqueKey}-idGradient)`
+      },
+      attrs: {
+        'clip-path': `url(${props.baseUrl}#${props.uniqueKey}-idClip)`,
+        x: 0,
+        y: 0,
+        width: width(),
+        height: height()
+      }
+    }), createElement('defs', {}, [createElement('clipPath', {
+      attrs: {
+        id: `${props.uniqueKey}-idClip`
+      }
+    }, slotIsSet() ? slots().default : _range(props.lines).map(index => createElement('rect', {
+      key: index,
+      attrs: {
+        y: index * DEFAULT_LINE_HEIGHT + index * DEFAULT_LINE_SPACING,
+        width: lineWidth(index),
+        height: DEFAULT_LINE_HEIGHT,
+        rx: 4
+      }
+    }))), createElement('linearGradient', {
+      attrs: {
+        id: `${props.uniqueKey}-idGradient`
+      }
+    }, [createElement('stop', {
+      class: 'primary-stop',
+      attrs: {
+        offset: '0%'
+      }
+    }, [createElement('animate', {
+      attrs: {
+        attributeName: 'offset',
+        values: '-2; 1',
+        dur: '1s',
+        repeatCount: 'indefinite'
+      }
+    })]), createElement('stop', {
+      class: 'secondary-stop',
+      attrs: {
+        offset: '50%'
+      }
+    }, [createElement('animate', {
+      attrs: {
+        attributeName: 'offset',
+        values: '-1.5; 1.5',
+        dur: '1s',
+        repeatCount: 'indefinite'
+      }
+    })]), createElement('stop', {
+      class: 'primary-stop',
+      attrs: {
+        offset: '100%'
+      }
+    }, [createElement('animate', {
+      attrs: {
+        attributeName: 'offset',
+        values: '-1; 2',
+        dur: '1s',
+        repeatCount: 'indefinite'
+      }
+    })])])])]);
+
+    if (slotIsSet()) {
+      return svg;
+    }
+
+    return createElement('div', {
+      class: 'gl-skeleton-loader-default-container gl-max-w-full',
+      style: {
+        width: props.width !== null ? `${props.width}px` : null,
+        height: props.height !== null ? `${props.height}px` : null
+      }
+    }, [svg]);
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = undefined;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    {},
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loading/skeleton_loading.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loading/skeleton_loading.documentation.js
new file mode 100644
index 00000000000000..54c7d04e1102f6
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loading/skeleton_loading.documentation.js
@@ -0,0 +1,7 @@
+var description = "The Skeleton Loading component has been deprecated, please use [Skeleton Loader](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-skeleton-loader--default).\n\nHow to replace this component with [Skeleton Loader](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-skeleton-loader--default):\n\n1. Update imports\n   - `import { GlSkeletonLoading } from '@gitlab/ui'` -> `import { GlSkeletonLoader } from '@gitlab/ui'`\n2. Update component definitions\n   - `components: { GlSkeletonLoading }` -> `components: { GlSkeletonLoader }`\n3. Update template\n   - `<gl-skeleton-loading />` -> `<gl-skeleton-loader />`\n";
+
+var skeleton_loading_documentation = {
+  description
+};
+
+export default skeleton_loading_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loading/skeleton_loading.js b/app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loading/skeleton_loading.js
new file mode 100644
index 00000000000000..4a2a8dcfcadf46
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/skeleton_loading/skeleton_loading.js
@@ -0,0 +1,63 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  props: {
+    /**
+     * Controls the number of lines.
+     */
+    lines: {
+      type: Number,
+      required: false,
+      default: 3,
+
+      validator(value) {
+        return value > 0 && value < 4;
+      }
+
+    }
+  },
+  computed: {
+    lineClasses() {
+      return new Array(this.lines).fill().map((_, i) => `skeleton-line-${i + 1}`);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"animation-container"},_vm._l((_vm.lineClasses),function(css,index){return _c('div',{key:index,class:css})}),0)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting.documentation.js
new file mode 100644
index 00000000000000..25f47a49fbb0a7
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting.documentation.js
@@ -0,0 +1,7 @@
+var description = "## Usage\n\nThe sorting component allows the user to select the field on which they would like to sort a list\nand whether to sort in ascending or descending order.\n\nThe dropdown part of the sorting component is a standard `gl-dropdown` component, with the items\nexposed as a slot. Inside the `gl-sorting` component, you should add a list of `gl-sorting-item`\ncomponents to construct your sorting options. The check icon will be displayed when a\n`gl-sorting-item` has its `active` prop set to `true`.\n\nThe `gl-sorting` component expects its parent component to manage the `text` and `is-ascending`\nprops. It does not track these using internal state.\n\nA sort update should be triggered by clicking a `gl-sorting-item` component (and therefore should\nhave a `@click` event bound or a `href` prop in the case of navigation) or by clicking the direction\nbutton. You should bind a function to the `sortDirectionChange` event to receive the new\n`is-ascending` value and re-order your data appropriately.\n\nA complete implementation example might look like:\n\n```html\n<template>\n  <gl-sorting\n    :text=\"dropdownText\"\n    :is-ascending=\"isAscending\"\n    @sortDirectionChange=\"onDirectionChange\"\n  >\n    <gl-sorting-item @click=\"onSortItemClick('Item 1')\">Item 1</gl-sorting-item>\n    <gl-sorting-item @click=\"onSortItemClick('Item 2')\">Item 2</gl-sorting-item>\n    <gl-sorting-item @click=\"onSortItemClick('Item 3')\">Item 3</gl-sorting-item>\n  </gl-sorting>\n</template>\n\n<script>\nimport { GlSorting, GlSortingItem } from '@gitlab/ui';\n\nexport default {\n  components: {\n    GlSorting,\n    GlSortingItem,\n  },\n  data() {\n    return {\n      isAscending: false,\n      dropdownText: 'Sort...'\n    }\n  },\n  methods: {\n    onSortItemClick(sortByItem) {\n      this.dropdownText = sortByItem;\n      this.sortMyData(sortByItem, this.isAscending);\n    },\n    onDirectionChange(isAscending) {\n      this.isAscending = isAscending;\n      this.sortMyData(this.dropdownText, this.isAscending);\n    },\n    sortMyData(sortBy, isAscending) {\n      // Use sortBy and direction to sort your data\n    },\n  }\n}\n</script>\n```\n";
+
+var sorting_documentation = {
+  description
+};
+
+export default sorting_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting.js b/app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting.js
new file mode 100644
index 00000000000000..a45417d9f62cee
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting.js
@@ -0,0 +1,136 @@
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import GlButton from '../button/button';
+import GlButtonGroup from '../button_group/button_group';
+import GlDropdown from '../dropdown/dropdown';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlSorting',
+  components: {
+    GlButton,
+    GlButtonGroup,
+    GlDropdown
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  props: {
+    /**
+     * Text to place in the toggle button.
+     */
+    text: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Determines the current sort order icon displayed.
+     */
+    isAscending: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * The text of the tool tip for the sort direction toggle button.
+     */
+    sortDirectionToolTip: {
+      type: String,
+      required: false,
+      default: 'Sort direction'
+    },
+
+    /**
+     * Additional class(es) to apply to the root element of the GlDropdown.
+     */
+    dropdownClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Additional class(es) to apply to the dropdown toggle.
+     */
+    dropdownToggleClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Additional class(es) to apply to the sort direction toggle button.
+     */
+    sortDirectionToggleClass: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  computed: {
+    localSortDirection() {
+      return this.isAscending ? 'sort-lowest' : 'sort-highest';
+    },
+
+    sortDirectionAriaLabel() {
+      return this.isAscending ? 'Sorting Direction: Ascending' : 'Sorting Direction: Descending';
+    }
+
+  },
+  methods: {
+    toggleSortDirection() {
+      const newDirection = !this.isAscending;
+      /**
+       * Emitted when the sort direction button is clicked.
+       *
+       * The event's payload will be true if the direction has been changed to
+       * ascending, or false if descending.
+       *
+       * @property {boolean} isAscending
+       */
+
+      this.$emit('sortDirectionChange', newDirection);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',{staticClass:"gl-sorting"},[_c('gl-dropdown',_vm._b({class:_vm.dropdownClass,attrs:{"text":_vm.text,"category":"secondary","toggle-class":_vm.dropdownToggleClass,"right":""}},'gl-dropdown',_vm.$props,false),[_vm._t("default")],2),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionToolTip,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionAriaLabel},on:{"click":_vm.toggleSortDirection}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting_item.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting_item.documentation.js
new file mode 100644
index 00000000000000..4066b62a990fb3
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting_item.documentation.js
@@ -0,0 +1,8 @@
+var description = "## Usage\n\nThe sorting item component is meant to be used for clickable entries inside a `gl-sorting` component.\nThis is a wrapper around the `gl-dropdown-item` component and includes a check icon when active,\nand an empty space for alignment when not.\n";
+
+var sorting_item_documentation = {
+  description,
+  bootstrapComponent: 'b-dropdown-item'
+};
+
+export default sorting_item_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting_item.js b/app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting_item.js
new file mode 100644
index 00000000000000..1748da0611ae49
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/sorting/sorting_item.js
@@ -0,0 +1,101 @@
+import GlDropdownItem from '../dropdown/dropdown_item';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/**
+ * Sorting Item
+ *
+ * This is written as a functional component because it is a simple wrapper over
+ * the GlDropdownItem component and does not use internal state. Functional
+ * components are cheaper to render and often used as wrappers like this. We're
+ * not using the <template functional> syntax here because it does not support
+ * custom child components wihtout extra work inside GitLab or extra work
+ * required by the user.
+ */
+
+var script = {
+  name: 'GlSortingItem',
+  functional: true,
+  props: {
+    /**
+     * Adds a check mark next to the item to indicate it is active.
+     */
+    active: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+
+    /**
+     * If given, makes the item a link pointing to the given value. Otherwise,
+     * the item is a button.
+     */
+    href: {
+      type: String,
+      default: null,
+      required: false
+    }
+  },
+
+  /**
+   * The content of the item.
+   * @slot default
+   */
+  render(createElement, _ref) {
+    let {
+      children,
+      data,
+      props = {}
+    } = _ref;
+    const classNames = `gl-sorting-item js-active-icon gl-flex-shrink-0 gl-mr-2 ${props.active ? '' : 'inactive gl-visibility-hidden'}`;
+    const icon = createElement(GlIcon, {
+      class: classNames,
+      attrs: {
+        name: 'mobile-issue-close',
+        size: 16,
+        ariaLabel: 'Selected'
+      }
+    });
+    return createElement(GlDropdownItem, { ...data,
+      attrs: { ...props
+      }
+    }, [icon, children]);
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = undefined;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    {},
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/table/constants.js b/app/assets/javascripts/gitlab-ui/dist/components/base/table/constants.js
new file mode 100644
index 00000000000000..8521c90be2145f
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/table/constants.js
@@ -0,0 +1,5 @@
+const tableFullSlots = ['bottom-row', 'empty', 'emptyfiltered', 'table-busy', 'thead-top', 'top-row'];
+const tableFullProps = ['api-url', 'busy', 'current-page', 'empty-filtered-html', 'empty-filtered-text', 'empty-html', 'empty-text', 'filter', 'filter-debounce', 'filter-function', 'filter-ignored-fields', 'filter-included-fields', 'label-sort-asc', 'label-sort-clear', 'label-sort-desc', 'no-footer-sorting', 'no-local-sorting', 'no-provider-filtering', 'no-provider-paging', 'no-provider-sorting', 'no-select-on-click', 'no-sort-reset', 'per-page', 'select-mode', 'selectable', 'selected-variant', 'show-empty', 'sort-by', 'sort-compare', 'sort-compare-locale', 'sort-compare-options', 'sort-desc', 'sort-direction', 'sort-icon-left', 'sort-null-last'];
+const glTableLiteWarning = 'This GlTable could be a GlTableLite component, please consider using GlTableLite instead of GlTable to reduce the page bundlesize more about this here: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-table-table-lite--default';
+
+export { glTableLiteWarning, tableFullProps, tableFullSlots };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/table/table.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/table/table.documentation.js
new file mode 100644
index 00000000000000..28ed5ee80a9705
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/table/table.documentation.js
@@ -0,0 +1,8 @@
+var description = "## Usage\n\nThe `gl-table` component wraps BootstrapVue `b-table` component. `b-table` provides a variety of\nslots for custom data rendering. You can learn more about them in the\n[component documentation](https://bootstrap-vue.org/docs/components/table).\nWhen using the component, pass in the `fields` prop as part of the `$options`, and give each table\ndata and table head its own styles if necessary.\n\n## Internationalization\n\nTo ensure we internationalize field labels, always pass an array of objects for the `fields` prop,\nlike mentioned in the implementation example.\n\n_Full documentation for the\n`field` prop [here.](https://bootstrap-vue.org/docs/components/table#fields-column-definitions)_\n\n## Use `GlTableLite` when possible\n\nIf you don't need all the features of `GlTable`, like filtering, sorting, or\npagination, use `GlTableLite` which offers a subset of `GlTable` features.\n\n## Implementation Example\n\n```html\n<script>\n  export default {\n    fields: [\n      {\n        key: 'column_one',\n        label: __('Column One'),\n        thClass: 'w-60p',\n        tdClass: 'table-col d-flex'\n      },\n      {\n        key: 'col_2',\n        label: __('Column 2'),\n        thClass: 'w-15p',\n        tdClass: 'table-col d-flex'\n      },\n    ];\n  }\n</script>\n<template>\n  <gl-table :items=\"items\" :fields=\"$options.fields\">\n    <template #head(column_one)>\n      <div>Column One</div>\n      <!-- This is the column head for the first object in `fields` -->\n    </template>\n\n    <template #cell(column_one)>\n      This is the template for column data belonging to the first object\n    </template>\n  </gl-table>\n</template>\n```\n";
+
+var table_documentation = {
+  followsDesignSystem: false,
+  description
+};
+
+export default table_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/table/table.js b/app/assets/javascripts/gitlab-ui/dist/components/base/table/table.js
new file mode 100644
index 00000000000000..eedd73d742ee08
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/table/table.js
@@ -0,0 +1,66 @@
+import { BTable } from 'bootstrap-vue/esm/index.js';
+import { isDev, logWarning } from '../../../utils/utils';
+import { tableFullProps, tableFullSlots, glTableLiteWarning } from './constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const shouldUseFullTable = _ref => {
+  let {
+    $attrs,
+    $scopedSlots
+  } = _ref;
+  return tableFullProps.some(prop => $attrs[prop] !== undefined) || tableFullSlots.some(slot => $scopedSlots[slot] !== undefined);
+};
+
+var script = {
+  components: {
+    BTable
+  },
+  inheritAttrs: false,
+
+  mounted() {
+    // logWarning will call isDev before logging any message
+    // this additional call to isDev is being made to exit the condition early when run in production
+    if (isDev() && !shouldUseFullTable(this)) {
+      logWarning(glTableLiteWarning);
+    }
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-table',_vm._g(_vm._b({staticClass:"gl-table",scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})],null,true)},'b-table',_vm.$attrs,false),_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/table_lite/table_lite.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/table_lite/table_lite.documentation.js
new file mode 100644
index 00000000000000..af5bd785c5986b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/table_lite/table_lite.documentation.js
@@ -0,0 +1,13 @@
+var table_lite = "## Usage\n\nThe `GlTableLite` component wraps BootstrapVue `BTableLite` component.\n`BTableLite` provides a variety of slots for custom data rendering. You can learn\nmore about them in the\n[component documentation](https://bootstrap-vue.org/docs/components/table#light-weight-tables).\n\n## `GlTable` vs. `GlTableLite`\n\n`GlTableLite` adds less payload to the pagebundle than `GlTable`.\nWhen possible `GlTableLite` should be preferred over `GlTable`.\n\nThe `GlTableLite` component provides all of the styling and formatting features of\n`GlTable` (including row details and stacked support), while excluding the following features:\n\n- Filtering\n- Sorting\n- Pagination\n- Items provider support\n- Selectable rows\n- Busy table state and styling\n- Fixed top and bottom rows\n- Empty row support\n\n## Internationalization\n\nTo ensure we internationalize field labels, always pass an array of objects for the `fields` prop,\nlike mentioned in the implementation example.\n\n_Full documentation for the `field` prop [here.](https://bootstrap-vue.org/docs/components/table#fields-column-definitions)_\n\n## Implementation example\n\n```html\n<script>\nexport default {\n  fields: [\n    {\n      key: 'column_one',\n      label: __('Column One'),\n      thClass: 'w-60p',\n      tdClass: 'table-col d-flex'\n    },\n    {\n      key: 'col_2',\n      label: __('Column 2'),\n      thClass: 'w-15p',\n      tdClass: 'table-col d-flex'\n    },\n  ];\n}\n</script>\n<template>\n  <gl-table-lite\n    :items=\"items\"\n    :fields=\"$options.fields\"\n  >\n    <template #head(column_one)>\n      <div>Column One</div><!-- This is the column head for the first object in `fields` -->\n    </template>\n\n    <template #cell(column_one)>\n      This is the template for column data belonging to the first object\n    </template>\n\n  </gl-table-lite>\n</template>\n```\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': table_lite
+});
+
+var table_lite_documentation = {
+  description,
+  bootstrapComponent: 'b-table-lite'
+};
+
+export default table_lite_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/table_lite/table_lite.js b/app/assets/javascripts/gitlab-ui/dist/components/base/table_lite/table_lite.js
new file mode 100644
index 00000000000000..498969cfd0635e
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/table_lite/table_lite.js
@@ -0,0 +1,47 @@
+import { BTableLite } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BTableLite
+  },
+  inheritAttrs: false
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-table-lite',_vm._g(_vm._b({staticClass:"gl-table",scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})],null,true)},'b-table-lite',_vm.$attrs,false),_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/constants.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/constants.js
new file mode 100644
index 00000000000000..d5ce4581d3cfcd
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/constants.js
@@ -0,0 +1,3 @@
+const DEFAULT_TAB_TITLE_LINK_CLASS = 'gl-tab-nav-item';
+
+export { DEFAULT_TAB_TITLE_LINK_CLASS };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/examples/index.js
new file mode 100644
index 00000000000000..6760a73015ba31
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/examples/index.js
@@ -0,0 +1,13 @@
+import BasicTabExample from './tab.basic.example';
+
+var index = [{
+  name: 'Basic',
+  items: [{
+    id: 'tab-basic',
+    name: 'Basic',
+    description: 'Basic Tab',
+    component: BasicTabExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/examples/tab.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/examples/tab.basic.example.js
new file mode 100644
index 00000000000000..6c7672784d035a
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/examples/tab.basic.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"First"}},[_vm._v("first content")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/tab.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/tab.documentation.js
new file mode 100644
index 00000000000000..ea879cc6dec629
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/tab.documentation.js
@@ -0,0 +1,18 @@
+import examples from './examples';
+
+var description = "### GlTab Component cannot be used alone\n\nIt must be used with `tabs` as the parent\n";
+
+var tab_documentation = {
+  description,
+  examples,
+  bootstrapComponent: 'b-tab',
+  followsDesignSystem: true,
+  propsInfo: {
+    queryParamValue: {
+      additionalInfo: 'Query string parameter value to use when `gl-tabs` `sync-active-tab-with-query-params` prop is set to `true`.',
+      type: String
+    }
+  }
+};
+
+export default tab_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/tab.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/tab.js
new file mode 100644
index 00000000000000..41f2b2dde00272
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tab/tab.js
@@ -0,0 +1,82 @@
+import _isPlainObject from 'lodash/isPlainObject';
+import _isArray from 'lodash/isArray';
+import { BTab } from 'bootstrap-vue/esm/index.js';
+import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    BTab
+  },
+  inheritAttrs: false,
+  props: {
+    titleLinkClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: ''
+    },
+    queryParamValue: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  computed: {
+    linkClass() {
+      const {
+        titleLinkClass
+      } = this;
+
+      if (_isArray(titleLinkClass)) {
+        return [...titleLinkClass, DEFAULT_TAB_TITLE_LINK_CLASS];
+      }
+
+      if (_isPlainObject(titleLinkClass)) {
+        return { ...titleLinkClass,
+          [DEFAULT_TAB_TITLE_LINK_CLASS]: true
+        };
+      }
+
+      return `${titleLinkClass} ${DEFAULT_TAB_TITLE_LINK_CLASS}`.trim();
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tab',_vm._g(_vm._b({attrs:{"title-link-class":_vm.linkClass,"query-param-value":_vm.queryParamValue},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-tab',_vm.$attrs,false),_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/index.js
new file mode 100644
index 00000000000000..60219257f9f529
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/index.js
@@ -0,0 +1,60 @@
+import BasicTabsExample from './tabs.basic.example';
+import ContentlessTabExample from './tabs.contentless_tab.example';
+import TabsWithCounterBadgesExample from './tabs.counterbadges.example';
+import CustomTitleExample from './tabs.custom_title.example';
+import DisabledTabExample from './tabs.disabled.example';
+import JustifiedTabsExample from './tabs.justified.example';
+import NoTabsExample from './tabs.no_tabs.example';
+import TabsScrollableExample from './tabs.scrollable.example';
+import TabsStylesOnlyExample from './tabs.styles_only.example';
+
+var index = [{
+  name: 'Basic',
+  items: [{
+    id: 'tabs-basic',
+    name: 'Basic',
+    description: 'Basic Tabs',
+    component: BasicTabsExample
+  }, {
+    id: 'tabs-disabled',
+    name: 'Disabled',
+    description: 'Disabled Tab',
+    component: DisabledTabExample
+  }, {
+    id: 'tabs-custom-title',
+    name: 'Custom Title',
+    description: 'Custom Title Tab',
+    component: CustomTitleExample
+  }, {
+    id: 'tabs-contentless-tab',
+    name: 'Contentless Tab',
+    description: 'Contentless Tab',
+    component: ContentlessTabExample
+  }, {
+    id: 'tabs-no-tabs',
+    name: 'Empty state when no tabs',
+    description: 'Empty state/content for when there are no tabs',
+    component: NoTabsExample
+  }, {
+    id: 'tabs-with-counter-badges',
+    name: 'Tabs with counter badges',
+    component: TabsWithCounterBadgesExample
+  }, {
+    id: 'tabs-styles-only',
+    name: 'Tabs styles only',
+    component: TabsStylesOnlyExample
+  }, {
+    id: 'justified-tabs',
+    name: 'Justified tabs',
+    component: JustifiedTabsExample
+  }]
+}, {
+  name: 'Scrollable',
+  items: [{
+    id: 'tabs-scrollable',
+    name: 'Scrollable tabs with lots of tabs',
+    component: TabsScrollableExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.basic.example.js
new file mode 100644
index 00000000000000..d3935b0841fc55
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.basic.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"Tab 1"}},[_vm._v("Tab panel 1")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 2"}},[_vm._v("Tab panel 2")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.contentless_tab.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.contentless_tab.example.js
new file mode 100644
index 00000000000000..c08bb37cdc0e3f
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.contentless_tab.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',{scopedSlots:_vm._u([{key:"tabs-end",fn:function(){return [_c('li',{staticClass:"nav-item align-self-center"},[_vm._v("Contentless tab")])]},proxy:true}])},[_c('gl-tab',{attrs:{"title":"Regular tab"}},[_c('p',[_vm._v("Regular tab content.")]),_vm._v(" "),_c('p',[_vm._v("\n      The contentless tab is not selectable, as it has no content. This is useful for displaying\n      things that aren't really tabs after the list of tabs.\n    ")])]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Another tab"}},[_c('p',[_vm._v("Another tab's content.")])])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.counterbadges.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.counterbadges.example.js
new file mode 100644
index 00000000000000..8c5a7b000b7a76
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.counterbadges.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("Tab")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("500")]),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("items")])]},proxy:true}])},[_vm._v("\n    Tab panel 1\n  ")]),_vm._v(" "),_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("Tab")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("250")]),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("items")])]},proxy:true}])},[_vm._v("\n    Tab panel 2\n  ")]),_vm._v(" "),_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("Tab")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("250")]),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("items")])]},proxy:true}])},[_vm._v("\n    Tab panel 3\n  ")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.custom_title.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.custom_title.example.js
new file mode 100644
index 00000000000000..656f9528a076aa
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.custom_title.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"Tab 1"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('i',[_vm._v("custom")]),_vm._v(" "),_c('strong',[_vm._v("Title")])]},proxy:true}])},[_vm._v("\n    Tab panel 1\n  ")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 2"}},[_vm._v("Tab panel 2")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.disabled.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.disabled.example.js
new file mode 100644
index 00000000000000..fc056892bf5e7c
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.disabled.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"Tab 1"}},[_vm._v("Tab panel 1")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 2"}},[_vm._v("Tab panel 2")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 3","disabled":""}},[_vm._v("Disabled tab panel")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.justified.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.justified.example.js
new file mode 100644
index 00000000000000..cc79c0eb7e8c25
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.justified.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',{attrs:{"justified":""}},[_c('gl-tab',{attrs:{"title":"Tab 1"}},[_vm._v("Tab panel 1")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 2"}},[_vm._v("Tab panel 2")])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.no_tabs.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.no_tabs.example.js
new file mode 100644
index 00000000000000..421b6b9e3bab12
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.no_tabs.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',{scopedSlots:_vm._u([{key:"empty",fn:function(){return [_vm._v("\n    This content is only displayed when there are no tabs. Useful for dynamically added/removed\n    tabs.\n  ")]},proxy:true}])})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.scrollable.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.scrollable.example.js
new file mode 100644
index 00000000000000..c680fe7fa176a0
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.scrollable.example.js
@@ -0,0 +1,47 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  tabs: Array(20).fill(1).map((_, index) => index + 1).map(id => ({
+    id,
+    title: `Tab ${id}`,
+    content: `Tab panel ${id} content...`
+  }))
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-scrollable-tabs',_vm._l((_vm.$options.tabs),function(tab){return _c('gl-tab',{key:tab.id,attrs:{"title":tab.title}},[_vm._v("\n    "+_vm._s(tab.content)+"\n  ")])}),1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.styles_only.example.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.styles_only.example.js
new file mode 100644
index 00000000000000..513cfbc961a26d
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/examples/tabs.styles_only.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;_vm._self._c||_h;return _vm._m(0)};
+var __vue_staticRenderFns__ = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"tabs gl-tabs"},[_c('ul',{staticClass:"nav gl-tabs-nav",attrs:{"role":"tablist"}},[_c('li',{staticClass:"nav-item",attrs:{"role":"presentation"}},[_c('a',{staticClass:"nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo",attrs:{"role":"tab","target":"_self","href":"#"}},[_vm._v("Tab 1")])]),_vm._v(" "),_c('li',{staticClass:"nav-item",attrs:{"role":"presentation"}},[_c('a',{staticClass:"nav-link gl-tab-nav-item",attrs:{"role":"tab","target":"_self","href":"#"}},[_vm._v("Tab 2")])])]),_vm._v(" "),_c('div',{staticClass:"tab-content gl-tab-content"},[_c('div',{staticClass:"tab-pane active",attrs:{"role":"tabpanel"}},[_vm._v("Tab panel 1")]),_vm._v(" "),_c('div',{staticClass:"tab-pane",attrs:{"role":"tabpanel"}},[_vm._v("Tab panel 2")])])])}];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/scrollable_tabs.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/scrollable_tabs.js
new file mode 100644
index 00000000000000..613d6a39499a86
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/scrollable_tabs.js
@@ -0,0 +1,164 @@
+import _isArray from 'lodash/isArray';
+import _debounce from 'lodash/debounce';
+import { GlResizeObserverDirective } from '../../../../directives/resize_observer/resize_observer';
+import GlIcon from '../../icon/icon';
+import GlTabs from './tabs';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const NAV_CLASS = 'gl-scrollable-tabs-nav';
+var script = {
+  components: {
+    GlTabs,
+    GlIcon
+  },
+  directives: {
+    GlResizeObserverDirective
+  },
+  inheritAttrs: false,
+
+  data() {
+    return {
+      width: 0,
+      // This is a reactive value of a child element's scrollLeft. It is not two-way bound.
+      // Do not set manually outside of "scroll" callback.
+      scrollLeft: 0,
+      navScrollWidth: 0
+    };
+  },
+
+  computed: {
+    navClass() {
+      const attrsNavClass = this.$attrs.navClass;
+
+      if (!attrsNavClass) {
+        return [NAV_CLASS];
+      }
+
+      if (_isArray(attrsNavClass)) {
+        return [NAV_CLASS, ...attrsNavClass];
+      }
+
+      return [NAV_CLASS, attrsNavClass];
+    },
+
+    displayScrollLeft() {
+      // if we have scrolled && there's overflow
+      return this.scrollLeft && this.width < this.navScrollWidth;
+    },
+
+    displayScrollRight() {
+      // if there's more overflow to the right
+      return this.scrollLeft + this.width < this.navScrollWidth;
+    },
+
+    passthroughAttrs() {
+      return Object.keys(this.$attrs).filter(key => !key.startsWith('action')).reduce((acc, key) => Object.assign(acc, {
+        [key]: this.$attrs[key]
+      }), {});
+    }
+
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.navScrollWidth = this.getScrollWidth();
+    });
+    this.handleNavScroll = _debounce(e => {
+      this.scrollLeft = e.target.scrollLeft;
+    }, 100);
+    this.getNavContainer().addEventListener('scroll', this.handleNavScroll);
+  },
+
+  beforeDestroy() {
+    this.getNavContainer().removeEventListener('scroll', this.handleNavScroll);
+  },
+
+  updated() {
+    // Whenever tabs are added or removed we need to recalculate the reactive scrollWidth
+    this.$nextTick(() => {
+      this.navScrollWidth = this.getScrollWidth();
+    });
+  },
+
+  methods: {
+    handleResize(_ref) {
+      let {
+        contentRect: {
+          width
+        }
+      } = _ref;
+      this.width = width;
+      this.navScrollWidth = this.getScrollWidth();
+    },
+
+    scrollTabsLeft() {
+      const scrollTo = this.scrollLeft - this.width;
+      this.scrollTabs(Math.max(scrollTo, 0));
+    },
+
+    scrollTabsRight() {
+      const scrollTo = this.scrollLeft + this.width;
+      this.scrollTabs(Math.min(scrollTo, this.getScrollWidth() - this.width));
+    },
+
+    scrollTabs(scrollTo) {
+      this.getNavContainer().scrollTo({
+        left: scrollTo,
+        behavior: 'smooth'
+      });
+      this.scrollLeft = scrollTo;
+    },
+
+    getScrollWidth() {
+      var _this$getNavContainer;
+
+      return ((_this$getNavContainer = this.getNavContainer()) === null || _this$getNavContainer === void 0 ? void 0 : _this$getNavContainer.scrollWidth) || 0;
+    },
+
+    getNavContainer() {
+      var _this$$el;
+
+      return (_this$$el = this.$el) === null || _this$$el === void 0 ? void 0 : _this$$el.querySelector(`.${NAV_CLASS}`);
+    }
+
+  },
+  NAV_CLASS
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',_vm._g(_vm._b({directives:[{name:"gl-resize-observer-directive",rawName:"v-gl-resize-observer-directive",value:(_vm.handleResize),expression:"handleResize"}],attrs:{"nav-class":_vm.navClass},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}}),{key:"tabs-start",fn:function(){return [_c('li',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollLeft),expression:"displayScrollLeft"}],staticClass:"gl-tabs-fade gl-tabs-fade-left"},[_c('button',{staticClass:"gl-tabs-fade-icon-button",attrs:{"aria-label":"Scroll left","tabindex":"-1"},on:{"click":_vm.scrollTabsLeft}},[_c('gl-icon',{attrs:{"size":16,"name":"chevron-lg-left"}})],1)])]},proxy:true},{key:"tabs-end",fn:function(){return [_c('li',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollRight),expression:"displayScrollRight"}],staticClass:"gl-tabs-fade gl-tabs-fade-right"},[_c('button',{staticClass:"gl-tabs-fade-icon-button",attrs:{"aria-label":"Scroll right","tabindex":"-1"},on:{"click":_vm.scrollTabsRight}},[_c('gl-icon',{attrs:{"size":16,"name":"chevron-lg-right"}})],1)])]},proxy:true}],null,true)},'gl-tabs',_vm.passthroughAttrs,false),_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/tabs.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/tabs.documentation.js
new file mode 100644
index 00000000000000..42e5f30f3d35d6
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/tabs.documentation.js
@@ -0,0 +1,20 @@
+import examples from './examples';
+
+var description = "# Tabs\n\n<!-- STORY -->\n## Usage\n\nTabs are used to divide content into meaningful, related sections. Tabs allow users to focus on one\nspecific view at a time while maintaining sight of all the relevant content options available. Each\ntab, when active, will reveal it’s own unique content.\n\n## Using the component Vue\n\n~~~js\n<gl-tabs>\n  <gl-tab title=\"Tab 1\">\n    Tab panel 1\n  </gl-tab>\n  <gl-tab title=\"Tab 2\">\n    Tab panel 2\n  </gl-tab>\n</gl-tabs>\n~~~\n\n## Using the component HTML\n\n~~~js\n<div class=\"tabs gl-tabs\">\n  <ul role=\"tablist\" class=\"nav gl-tabs-nav\">\n    <li role=\"presentation\" class=\"nav-item\">\n      <a\n        role=\"tab\"\n        target=\"_self\"\n        href=\"#\"\n        class=\"nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo\"\n      >Tab 1</a>\n    </li>\n    <li role=\"presentation\" class=\"nav-item\">\n      <a role=\"tab\" target=\"_self\" href=\"#\" class=\"nav-link gl-tab-nav-item\">Tab 2</a>\n    </li>\n  </ul>\n  <div class=\"tab-content gl-tab-content\">\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content active\">Tab panel 1</div>\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content\">Tab panel 2</div>\n  </div>\n</div>\n~~~\n\n## Adding Action Buttons to the Tabs\n\nTabs start and end slot can be populated via props: `action-primary`, `action-secondary` and\n`action-tertiary`. These props allow you to handle how a primary, secondary and tertiary button will\nbehave and look. The props receive an object as such:\n\n~~~js\n{\n  text: 'Save Changes',\n  attributes: [\n    { variant: 'info' },\n    { disabled: this.someState },\n    { class: 'some-class' },\n    ...\n  ]\n}\n~~~\n\n## Scrollable tab buttons\n\nBy default, `GlTab` will wrap tab buttons when they overflow the container. To\nenable horizontally scrolling for the tab buttons, use the `GlScrollableTabs`\ncomponent. This is a separate Vue component because of some limitations:\n\n- The action props (e.g., `action-primary`) are not respected in `GlScrollableTabs`. At the\n  moment, BootstrapVue does not provide a reliable way for us to achieve this desired combination.\n\n`GlScrollableTabs` composes `GlTabs` and passes through every listener, slot, or prop (with the above\nexceptions).\n\n~~~html\n<gl-scrollable-tabs>\n  <gl-tab v-for=\"tab in tabs\" :key=\"tab.key\" :title=\"tab.title\"> {{ tab.content }} </gl-tab>\n</gl-scrollable-tabs>\n~~~\n";
+
+var tabs_documentation = {
+  description,
+  examples,
+  bootstrapComponent: 'b-tabs',
+  followsDesignSystem: true,
+  propsInfo: {
+    syncActiveTabWithQueryParams: {
+      additionalInfo: 'Sync active tab with query string parameters. Allows for deep linking into specific tabs.'
+    },
+    queryParamName: {
+      additionalInfo: 'Name to use for query string parameter.'
+    }
+  }
+};
+
+export default tabs_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/tabs.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/tabs.js
new file mode 100644
index 00000000000000..0e5a969bade198
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tabs/tabs/tabs.js
@@ -0,0 +1,241 @@
+import { BTabs } from 'bootstrap-vue/esm/index.js';
+import { tabsButtonDefaults } from '../../../../utils/constants';
+import GlButton from '../../button/button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const validatorHelper = obj => Object.keys(obj).every(val => val === 'text' || val === 'attributes');
+
+var script = {
+  components: {
+    BTabs,
+    GlButton
+  },
+  inheritAttrs: false,
+  props: {
+    actionPrimary: {
+      type: Object,
+      required: false,
+      default: null,
+      validator: obj => validatorHelper(obj)
+    },
+    actionSecondary: {
+      type: Object,
+      required: false,
+      default: null,
+      validator: obj => validatorHelper(obj)
+    },
+    actionTertiary: {
+      type: Object,
+      required: false,
+      default: null,
+      validator: obj => validatorHelper(obj)
+    },
+    contentClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: null
+    },
+    navClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: null
+    },
+    justified: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    syncActiveTabWithQueryParams: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    queryParamName: {
+      type: String,
+      required: false,
+      default: 'tab'
+    },
+    value: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      activeTabIndex: 0
+    };
+  },
+
+  computed: {
+    hasActions() {
+      return [this.actionPrimary, this.actionSecondary, this.actionTertiary].some(Boolean);
+    },
+
+    listeners() {
+      return { ...this.$listeners,
+        input: this.handleInput
+      };
+    }
+
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        if (this.activeTabIndex !== newValue) {
+          this.activeTabIndex = newValue;
+        }
+      },
+
+      immediate: true
+    }
+  },
+
+  mounted() {
+    if (this.syncActiveTabWithQueryParams) {
+      this.syncActiveTabFromQueryParams();
+      window.addEventListener('popstate', this.syncActiveTabFromQueryParams);
+    } // Because we are manually binding `value` attribute to `b-tabs` the `input`
+    // event is no longer automatically fired when the component is mounted.
+    // To maintain parity with original `b-tabs` functionality
+    // we manually fire the `input` event when the component is mounted.
+
+
+    this.$emit('input', this.activeTabIndex);
+  },
+
+  destroyed() {
+    window.removeEventListener('popstate', this.syncActiveTabFromQueryParams);
+  },
+
+  methods: {
+    buttonBinding(prop, name) {
+      if (!prop.attributes) {
+        return tabsButtonDefaults[name];
+      }
+
+      return prop.attributes;
+    },
+
+    primary() {
+      this.$emit('primary');
+    },
+
+    secondary() {
+      this.$emit('secondary');
+    },
+
+    tertiary() {
+      this.$emit('tertiary');
+    },
+
+    /**
+     * When the query parameter is updated, update the active tab to match.
+     */
+    syncActiveTabFromQueryParams() {
+      const queryParamValue = this.getQueryParamValue();
+      const tabIndexToActivate = this.getTabs().findIndex((tab, tabIndex) => this.getTabQueryParamValue(tabIndex) === queryParamValue);
+      this.activeTabIndex = tabIndexToActivate !== -1 ? tabIndexToActivate : 0;
+    },
+
+    /**
+     * Returns a list of all <b-tab> instances associated with this tab control.
+     */
+    getTabs() {
+      return this.$refs.bTabs.getTabs();
+    },
+
+    /**
+     * Get the value of the query param as defined by the `queryParamName` prop.
+     */
+    getQueryParamValue() {
+      const searchParams = new URLSearchParams(window.location.search);
+      return searchParams.get(this.queryParamName);
+    },
+
+    /**
+     * Set the value of the query param as defined by the `queryParamName` prop.
+     * This method does nothing if the query param is already up to date.
+     */
+    setQueryParamValueIfNecessary(tabIndex) {
+      const currentQueryParamValue = this.getQueryParamValue();
+      const newQueryParamValue = this.getTabQueryParamValue(tabIndex); // If the current query parameter is already up-to-date,
+      // avoid creating a duplicate history entry.
+
+      if (tabIndex === 0 && !currentQueryParamValue || tabIndex !== 0 && currentQueryParamValue === newQueryParamValue) {
+        return;
+      }
+
+      const searchParams = new URLSearchParams(window.location.search);
+
+      if (tabIndex === 0) {
+        searchParams.delete(this.queryParamName);
+      } else {
+        searchParams.set(this.queryParamName, newQueryParamValue);
+      }
+
+      window.history.pushState({}, '', `${window.location.pathname}?${searchParams.toString()}`);
+    },
+
+    /**
+     * Returns the query param value for a tab.
+     * Defaults to the tab index unless the `query-param-value` attribute is set.
+     */
+    getTabQueryParamValue(tabIndex) {
+      const tab = this.getTabs()[tabIndex];
+      return (tab === null || tab === void 0 ? void 0 : tab.$attrs['query-param-value']) || tabIndex.toString();
+    },
+
+    /**
+     * Event handler for `input` event.
+     */
+    handleInput(tabIndex) {
+      this.$emit('input', tabIndex);
+      this.activeTabIndex = tabIndex;
+
+      if (this.syncActiveTabWithQueryParams) {
+        this.setQueryParamValueIfNecessary(tabIndex);
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tabs',_vm._g(_vm._b({ref:"bTabs",staticClass:"gl-tabs",attrs:{"no-nav-style":true,"no-fade":true,"active-nav-item-class":"gl-tab-nav-item-active","content-class":[_vm.contentClass, 'gl-tab-content'],"nav-class":[_vm.navClass, 'gl-tabs-nav'],"justified":_vm.justified,"value":_vm.activeTabIndex},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}}),(_vm.hasActions)?{key:"tabs-start",fn:function(){return [_c('div',{staticClass:"gl-actions-tabs-start",attrs:{"data-testid":"actions-tabs-start"}},[(_vm.actionPrimary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-primary"},on:{"click":_vm.primary}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n        "+_vm._s(_vm.actionPrimary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-secondary"},on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n        "+_vm._s(_vm.actionSecondary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionTertiary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-tertiary"},on:{"click":_vm.tertiary}},'gl-button',_vm.buttonBinding(_vm.actionTertiary, 'actionTertiary'),false),[_vm._v("\n        "+_vm._s(_vm.actionTertiary.text)+"\n      ")]):_vm._e()],1)]},proxy:true}:null,(_vm.hasActions)?{key:"tabs-end",fn:function(){return [_c('div',{staticClass:"gl-actions-tabs-end",attrs:{"data-testid":"actions-tabs-end"}},[(_vm.actionPrimary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-primary"},on:{"click":_vm.primary}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n        "+_vm._s(_vm.actionPrimary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-secondary"},on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n        "+_vm._s(_vm.actionSecondary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionTertiary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-tertiary"},on:{"click":_vm.tertiary}},'gl-button',_vm.buttonBinding(_vm.actionTertiary, 'actionTertiary'),false),[_vm._v("\n        "+_vm._s(_vm.actionTertiary.text)+"\n      ")]):_vm._e()],1)]},proxy:true}:null],null,true)},'b-tabs',_vm.$attrs,false),_vm.listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/toast/toast.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/toast/toast.documentation.js
new file mode 100644
index 00000000000000..bb491f4e5c84c3
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/toast/toast.documentation.js
@@ -0,0 +1,8 @@
+var description = "\nToasts are used to display system messages. The messages are short and straightforward. It may\ncontain a dismiss button, and an action button depending on the situation.\n\n## Using the plugin\n\nIn order to use the plugin, it needs to be included in your application with `Vue.use`.\n\n```js\n// myApp.js\n\nimport { GlToast } from '@gitlab/ui';\n\n// Note, this has to be done before `Vue.new()`\nVue.use(GlToast);\n```\n\nOnce included in your application, the toast plugin is globally available.\n\n```js\n// myComponent.vue\n\nthis.$toast.show('Hello GitLab!');\n```\n\nBelow is an example with options\n\n```js\n// myComponent.vue\n\nthis.$toast.show('This is a toast with an option.', {\n  action: {\n    text: 'Undo',\n    onClick: () => { ... },\n  },\n});\n```\n\n### Options\n\nBelow are the options you can pass to create a toast\n\n| **Option**    | **Type**      | **Default** | **Description**                          |\n| ------------- | ------------- | ----------- | ---------------------------------------- |\n| autoHideDelay | Number        | 5000        | Display time of the toast in millisecond |\n| action        | Object        | close       | Add single actions to toast              |\n| toastClass    | String, Array | 'gl-toast'  | Custom css class name of the toast       |\n| onComplete    | Function      | null        | Trigger when toast is completed          |\n";
+
+var toast_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default toast_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/toast/toast.js b/app/assets/javascripts/gitlab-ui/dist/components/base/toast/toast.js
new file mode 100644
index 00000000000000..793e3edd070671
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/toast/toast.js
@@ -0,0 +1,89 @@
+import _isFunction from 'lodash/isFunction';
+import { ToastPlugin } from 'bootstrap-vue/esm/index.js';
+import CloseButton from '../../shared_components/close_button/close_button';
+
+const DEFAULT_OPTIONS = {
+  autoHideDelay: 5000,
+  toastClass: 'gl-toast',
+  noCloseButton: true,
+  toaster: 'b-toaster-bottom-left'
+};
+let toastsCount = 0;
+
+function renderTitle(h, toast, options) {
+  const nodes = [h(CloseButton, {
+    class: ['gl-toast-close-button', 'gl-close-btn-color-inherit'],
+    on: {
+      click: toast.hide
+    }
+  })];
+
+  if (options.action) {
+    nodes.splice(0, 0, h('a', {
+      role: 'button',
+      class: ['gl-toast-action'],
+      on: {
+        click: e => options.action.onClick(e, toast)
+      }
+    }, options.action.text));
+  }
+
+  return nodes;
+}
+
+function showToast(message) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const id = `gl-toast-${toastsCount}`;
+  toastsCount += 1;
+
+  const hide = () => {
+    this.$bvToast.hide(id);
+  };
+
+  const toast = {
+    id,
+    hide
+  };
+
+  if (_isFunction(options.onComplete)) {
+    this.$root.$on('bv::toast:hidden', e => {
+      if (e.componentId === id) {
+        options.onComplete(e);
+      }
+    });
+  }
+
+  this.$bvToast.toast(message, { ...DEFAULT_OPTIONS,
+    id,
+    title: renderTitle(this.$createElement, toast, options)
+  });
+  return toast;
+}
+/**
+ * Note: This is not a typical Vue component and needs to be registered before instantiating a Vue app.
+ * Once registered, the toast will be globally available throughout your app.
+ *
+ * See https://gitlab-org.gitlab.io/gitlab-ui/ for detailed documentation.
+ */
+
+
+var toast = {
+  install(Vue) {
+    Vue.use(ToastPlugin);
+    Vue.mixin({
+      beforeCreate() {
+        if (this.$toast) {
+          return;
+        }
+
+        this.$toast = {
+          show: showToast.bind(this)
+        };
+      }
+
+    });
+  }
+
+};
+
+export default toast;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/toggle/toggle.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/toggle/toggle.documentation.js
new file mode 100644
index 00000000000000..f40394f044a544
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/toggle/toggle.documentation.js
@@ -0,0 +1,13 @@
+var toggle = "# Toggle\n\n## Usage\n\nThe toggle component must have a `label` prop to give the toggle button an accessible name.\nTo visually hide the label, provide it with `label-position=\"hidden\"`.\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': toggle
+});
+
+var toggle_documentation = {
+  description,
+  followsDesignSystem: true
+};
+
+export default toggle_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/toggle/toggle.js b/app/assets/javascripts/gitlab-ui/dist/components/base/toggle/toggle.js
new file mode 100644
index 00000000000000..eb10aa01853d4f
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/toggle/toggle.js
@@ -0,0 +1,166 @@
+import _uniqueId from 'lodash/uniqueId';
+import { toggleLabelPosition } from '../../../utils/constants';
+import GlIcon from '../icon/icon';
+import GlLoadingIcon from '../loading_icon/loading_icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+let uuid = 0;
+var script = {
+  components: {
+    GlIcon,
+    GlLoadingIcon
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * The toggle's state.
+     * @model
+     */
+    value: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+
+    /**
+     * Whether the toggle should be disabled.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * Whether the toggle is in the loading state.
+     */
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * The toggle's label.
+     */
+    label: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * A help text to be shown below the toggle.
+     */
+    help: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+
+    /**
+     * The label's position relative to the toggle. If 'hidden', the toggle will add the .gl-sr-only class so the label is still accessible to screen readers.
+     */
+    labelPosition: {
+      type: String,
+      required: false,
+      default: 'top',
+
+      validator(position) {
+        return Object.values(toggleLabelPosition).includes(position);
+      }
+
+    }
+  },
+
+  data() {
+    return {
+      labelId: _uniqueId('toggle-label-')
+    };
+  },
+
+  computed: {
+    icon() {
+      return this.value ? 'mobile-issue-close' : 'close';
+    },
+
+    helpId() {
+      return this.help ? `toggle-help-${this.uuid}` : undefined;
+    },
+
+    isChecked() {
+      return this.value ? 'true' : 'false';
+    }
+
+  },
+
+  beforeCreate() {
+    this.uuid = uuid;
+    uuid += 1;
+  },
+
+  methods: {
+    toggleFeature() {
+      if (!this.disabled) {
+        /**
+         * Emitted when the state changes.
+         *
+         * @event change
+         * @property {boolean} value Whether the toggle is enabled.
+         */
+        this.$emit('change', !this.value);
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-toggle-wrapper gl-display-flex gl-flex-direction-column gl-mb-0 gl-w-max-content",class:{ 'gl-toggle-label-inline': _vm.labelPosition === 'left', 'is-disabled': _vm.disabled }},[_c('span',{staticClass:"gl-toggle-label",class:{ 'gl-sr-only': _vm.labelPosition === 'hidden' },attrs:{"id":_vm.labelId,"data-testid":"toggle-label"}},[_vm._t("label",[_vm._v(_vm._s(_vm.label))])],2),_vm._v(" "),(_vm.name)?_c('input',{attrs:{"name":_vm.name,"type":"hidden"},domProps:{"value":_vm.value}}):_vm._e(),_vm._v(" "),_c('button',{class:{
+      'gl-toggle': true,
+      'is-checked': _vm.value,
+      'is-disabled': _vm.disabled,
+    },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"aria-describedby":_vm.helpId,"type":"button"},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature($event)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"light"}}):_c('span',{class:{ 'toggle-icon': true, disabled: _vm.disabled }},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":16}})],1)],1),_vm._v(" "),(_vm.help)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",[_vm._v(_vm._s(_vm.help))])],2):_vm._e()])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/token/token.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/token/token.documentation.js
new file mode 100644
index 00000000000000..f6984baa6c593a
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/token/token.documentation.js
@@ -0,0 +1,5 @@
+var token_documentation = {
+  followsDesignSystem: true
+};
+
+export default token_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/token/token.js b/app/assets/javascripts/gitlab-ui/dist/components/base/token/token.js
new file mode 100644
index 00000000000000..ba7017e9f1f1d8
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/token/token.js
@@ -0,0 +1,87 @@
+import { tokenVariants } from '../../../utils/constants';
+import CloseButton from '../../shared_components/close_button/close_button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    CloseButton
+  },
+  props: {
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * Token visual variants: default, search-type, and search-value.
+     */
+    variant: {
+      type: String,
+      required: false,
+      default: 'default',
+      validator: variant => tokenVariants.includes(variant)
+    }
+  },
+  computed: {
+    variantClass() {
+      return `gl-token-${this.variant}-variant`;
+    },
+
+    viewOnlyClass() {
+      return {
+        'gl-token-view-only': this.viewOnly
+      };
+    }
+
+  },
+  methods: {
+    close($event) {
+      /**
+       * Emitted when x is clicked
+       *
+       * @event close
+       */
+      this.$emit('close', $event);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._g({class:['gl-token', _vm.variantClass, _vm.viewOnlyClass]},_vm.$listeners),[_c('span',{staticClass:"gl-token-content"},[_vm._t("default"),_vm._v(" "),(!_vm.viewOnly)?_c('close-button',{staticClass:"gl-token-close gl-close-btn-color-inherit",on:{"click":_vm.close}}):_vm._e()],2)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/helpers.js b/app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/helpers.js
new file mode 100644
index 00000000000000..d76dbd01e7b337
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/helpers.js
@@ -0,0 +1,5 @@
+import has from 'lodash/has';
+
+const tokensValidator = tokens => tokens.every(token => has(token, 'id'));
+
+export { tokensValidator };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_container.js b/app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_container.js
new file mode 100644
index 00000000000000..75f9b4acd00d01
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_container.js
@@ -0,0 +1,173 @@
+import GlToken from '../token/token';
+import { tokensValidator } from './helpers';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlTokenContainer',
+  components: {
+    GlToken
+  },
+  props: {
+    tokens: {
+      type: Array,
+      // All tokens need to have an `id` key
+      validator: tokensValidator,
+      required: true
+    },
+    state: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    registerFocusOnToken: {
+      type: Function,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      bindFocusEvent: true,
+      focusedTokenIndex: null
+    };
+  },
+
+  computed: {
+    focusedToken() {
+      return this.tokens[this.focusedTokenIndex] || null;
+    }
+
+  },
+  watch: {
+    focusedToken(newValue) {
+      var _this$$refs$tokens;
+
+      if (newValue === null) {
+        return;
+      }
+
+      const tokenRef = (_this$$refs$tokens = this.$refs.tokens) === null || _this$$refs$tokens === void 0 ? void 0 : _this$$refs$tokens.find(ref => ref.dataset.tokenId === newValue.id.toString());
+
+      if (tokenRef) {
+        // Prevent `handleTokenFocus` from being called when we manually focus on a token
+        this.bindFocusEvent = false;
+        tokenRef.focus();
+        this.bindFocusEvent = true;
+      }
+    }
+
+  },
+
+  created() {
+    this.registerFocusOnToken(this.focusOnToken);
+  },
+
+  methods: {
+    handleClose(token) {
+      this.$emit('token-remove', token);
+      this.focusedTokenIndex = null;
+    },
+
+    handleLeftArrow() {
+      if (this.focusedTokenIndex === 0) {
+        this.focusLastToken();
+      } else {
+        this.focusPrevToken();
+      }
+    },
+
+    handleRightArrow() {
+      if (this.focusedTokenIndex === this.tokens.length - 1) {
+        this.focusFirstToken();
+      } else {
+        this.focusNextToken();
+      }
+    },
+
+    handleHome() {
+      this.focusFirstToken();
+    },
+
+    handleEnd() {
+      this.focusLastToken();
+    },
+
+    handleDelete() {
+      this.$emit('token-remove', this.focusedToken);
+
+      if (this.focusedTokenIndex > 0) {
+        this.focusPrevToken();
+      }
+    },
+
+    handleEscape() {
+      this.focusedTokenIndex = null;
+      this.$emit('cancel-focus');
+    },
+
+    // Only called when a token is focused by a click/tap
+    handleTokenFocus(index) {
+      this.focusedTokenIndex = index;
+    },
+
+    focusLastToken() {
+      this.focusedTokenIndex = this.tokens.length - 1;
+    },
+
+    focusFirstToken() {
+      this.focusedTokenIndex = 0;
+    },
+
+    focusNextToken() {
+      this.focusedTokenIndex += 1;
+    },
+
+    focusPrevToken() {
+      this.focusedTokenIndex -= 1;
+    },
+
+    focusOnToken() {
+      let tokenIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      this.focusedTokenIndex = tokenIndex;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"tokenContainer",staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1",attrs:{"role":"listbox","aria-multiselectable":"false","aria-orientation":"horizontal","aria-invalid":_vm.state === false && 'true'},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.handleLeftArrow($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }return _vm.handleRightArrow($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.handleHome($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.handleEnd($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleDelete($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape($event)},function($event){$event.preventDefault();}]}},[_vm._l((_vm.tokens),function(token,index){return _c('div',{key:token.id,ref:"tokens",refInFor:true,staticClass:"gl-token-selector-token-container gl-px-1 gl-py-1 gl-outline-none",attrs:{"data-token-id":token.id,"role":"option","tabindex":"-1"},on:{"focus":function($event){_vm.bindFocusEvent ? _vm.handleTokenFocus(index) : null;}}},[_c('gl-token',{staticClass:"gl-cursor-default",class:token.class,style:(token.style),on:{"close":function($event){return _vm.handleClose(token)}}},[_vm._t("token-content",[_c('span',[_vm._v("\n          "+_vm._s(token.name)+"\n        ")])],{"token":token})],2)],1)}),_vm._v(" "),_vm._t("text-input")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_selector.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_selector.documentation.js
new file mode 100644
index 00000000000000..c787e656023621
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_selector.documentation.js
@@ -0,0 +1,12 @@
+var token_selector = "Choose from a provided list of tokens or add a user defined token.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      selectedTokens: [\n        {\n          id: 1,\n          name: 'Vue.js',\n        },\n      ],\n    };\n  },\n};\n</script>\n\n<template>\n  <div>\n    <gl-token-selector\n      v-model=\"selectedTokens\"\n      :dropdown-items=\"[\n        {\n          id: 1,\n          name: 'Vue.js',\n        },\n        {\n          id: 2,\n          name: 'Ruby On Rails',\n        },\n        {\n          id: 3,\n          name: 'GraphQL',\n        },\n        {\n          id: 4,\n          name: 'Redis',\n        },\n      ]\"\n    />\n    {{ selectedTokens }}\n  </div>\n</template>\n```\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': token_selector
+});
+
+var token_selector_documentation = {
+  description
+};
+
+export default token_selector_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_selector.js b/app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_selector.js
new file mode 100644
index 00000000000000..65974919f84445
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_selector.js
@@ -0,0 +1,419 @@
+import _uniqueId from 'lodash/uniqueId';
+import { tokensValidator } from './helpers';
+import GlTokenContainer from './token_container';
+import GlTokenSelectorDropdown from './token_selector_dropdown';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlTokenSelector',
+  componentId: _uniqueId('token-selector'),
+  components: {
+    GlTokenContainer,
+    GlTokenSelectorDropdown
+  },
+  model: {
+    prop: 'selectedTokens',
+    event: 'input'
+  },
+  props: {
+    /**
+     * Items to display in dropdown
+     */
+    dropdownItems: {
+      type: Array,
+      // All items need to have an `id` key
+      validator: tokensValidator,
+      required: false,
+      default: () => []
+    },
+
+    /**
+     * Should users be allowed to add tokens that are not in `dropdown-items`
+     */
+    allowUserDefinedTokens: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * Dropdown items are loading, can be used when requesting new dropdown items
+     */
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * Hide the dropdown if `dropdown-items` is empty. Will show `no-results-content` slot if this is `false`
+     */
+    hideDropdownWithNoItems: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * CSS classes to add to the main token selector container (`.gl-token-selector`)
+     */
+    containerClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * CSS classes to add to dropdown menu `ul` element
+     */
+    menuClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: ''
+    },
+
+    /**
+     * The autocomplete attribute value for the underlying `input` element
+     */
+    autocomplete: {
+      type: String,
+      required: false,
+      default: 'off'
+    },
+
+    /**
+     * The `aria-labelledby` attribute value for the underlying `input` element
+     */
+    ariaLabelledby: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * The `placeholder` attribute value for the underlying `input` element
+     */
+    placeholder: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * HTML attributes to add to the text input. Helpful for adding `data-testid` and `data-qa-selector` attributes
+     */
+    textInputAttrs: {
+      type: Object,
+      required: false,
+      default: null
+    },
+
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
+     */
+    state: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+
+    /**
+     * Tokens that are selected. This prop will automatically be added when using `v-model`
+     */
+    selectedTokens: {
+      type: Array,
+      // All tokens need to have an `id` key
+      validator: tokensValidator,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      inputText: '',
+      inputFocused: false,
+      dropdownIsOpen: false,
+      focusedDropdownItem: null,
+      triggerTokenFocusNextBackspace: true,
+      rootElClasses: '',
+      dropdownEventHandlers: {
+        handleUpArrow: () => {},
+        handleDownArrow: () => {},
+        handleHomeKey: () => {},
+        handleEndKey: () => {}
+      },
+      resetFocusedDropdownItem: () => {},
+      focusOnToken: () => {}
+    };
+  },
+
+  computed: {
+    filteredDropdownItems() {
+      return this.dropdownItems.filter(dropdownItem => this.selectedTokens.findIndex(token => token.id === dropdownItem.id) === -1);
+    },
+
+    dropdownHasNoItems() {
+      return !this.filteredDropdownItems.length;
+    },
+
+    userDefinedTokenCanBeAdded() {
+      return this.allowUserDefinedTokens && this.dropdownHasNoItems && this.inputText !== '';
+    },
+
+    hideDropdown() {
+      if (this.userDefinedTokenCanBeAdded) {
+        return false;
+      }
+
+      if (this.hideDropdownWithNoItems && this.dropdownHasNoItems) {
+        return true;
+      }
+
+      return false;
+    },
+
+    stateClass() {
+      if (this.state === null) {
+        return 'gl-inset-border-1-gray-400!';
+      }
+
+      return this.state ? 'is-valid gl-inset-border-1-gray-400!' : 'is-invalid gl-inset-border-1-red-500!';
+    }
+
+  },
+  watch: {
+    inputText(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        /**
+         * Fired when user types in the token selector
+         *
+         * @property {string} inputText
+         */
+        this.$emit('text-input', newValue);
+        this.resetFocusedDropdownItem();
+
+        if (newValue !== '') {
+          this.triggerTokenFocusNextBackspace = false;
+        } else {
+          this.triggerTokenFocusNextBackspace = true;
+        } // Wait a tick so `text-input` event can be used to validate
+        // the value and change the `allowUserDefinedTokens` and/or
+        // `hideDropdownWithNoItems` props
+
+
+        this.$nextTick(() => {
+          if (this.hideDropdown) {
+            this.closeDropdown();
+          } else if (newValue !== '') {
+            this.openDropdown();
+          }
+        });
+      }
+    }
+
+  },
+  methods: {
+    handleFocus(event) {
+      /**
+       * Fired when the token selector is focused
+       *
+       * @property {FocusEvent} event
+       */
+      this.$emit('focus', event);
+      this.openDropdown();
+      this.inputFocused = true;
+      this.focusOnToken();
+
+      if (this.inputText === '') {
+        this.triggerTokenFocusNextBackspace = true;
+      }
+    },
+
+    handleBlur(event) {
+      /**
+       * Fired when the token selector is blurred
+       *
+       * @property {FocusEvent} event
+       */
+      this.$emit('blur', event);
+      this.inputFocused = false; // `event.relatedTarget` returns `null` on Safari because buttons are not focused on click (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
+      // Workaround is to:
+      // 1. Explicitly focus the dropdown menu item button on `mousedown` event. (see './token_selector_dropdown.vue')
+      // 2. Use `nextTick` so `blur` event is fired after the `mousedown` event
+
+      this.$nextTick(() => {
+        var _event$relatedTarget, _event$relatedTarget$;
+
+        if (!((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && (_event$relatedTarget$ = _event$relatedTarget.closest) !== null && _event$relatedTarget$ !== void 0 && _event$relatedTarget$.call(_event$relatedTarget, '.dropdown-item'))) {
+          this.closeDropdown();
+        }
+      });
+    },
+
+    handleEnter() {
+      if (this.userDefinedTokenCanBeAdded) {
+        this.addToken();
+      } else if (this.focusedDropdownItem && this.dropdownIsOpen) {
+        this.addToken(this.focusedDropdownItem);
+      }
+    },
+
+    handleEscape() {
+      this.inputText = '';
+      this.closeDropdown();
+    },
+
+    handleBackspace(event) {
+      if (this.inputText !== '' || !this.selectedTokens.length) {
+        return;
+      } // Prevent triggering the browser back button
+
+
+      event.preventDefault();
+
+      if (this.triggerTokenFocusNextBackspace) {
+        this.$refs.textInput.blur();
+        this.focusOnToken(this.selectedTokens.length - 1);
+      } else {
+        this.triggerTokenFocusNextBackspace = true;
+      }
+    },
+
+    handleInputClick() {
+      // Open the dropdown if the user clicks an already focused input
+      if (this.inputFocused && this.inputText === '' && !this.dropdownIsOpen) {
+        this.openDropdown();
+      }
+    },
+
+    handleContainerClick(event) {
+      // Bail if token is clicked
+      const {
+        target
+      } = event;
+
+      if ((target === null || target === void 0 ? void 0 : target.closest('.gl-token')) !== null || this.inputFocused) {
+        return;
+      }
+
+      this.focusTextInput();
+    },
+
+    addToken() {
+      let dropdownItem = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      const token = dropdownItem !== null ? dropdownItem : {
+        id: _uniqueId('user-defined-token'),
+        name: this.inputText
+      };
+      /**
+       * Fired when a token is added or removed
+       *
+       * @property {array} selectedTokens
+       */
+
+      this.$emit('input', [...this.selectedTokens, token]);
+      this.inputText = '';
+      this.closeDropdown();
+      /**
+       * Fired when a token is added
+       *
+       * @property {object} token
+       */
+
+      this.$emit('token-add', token);
+    },
+
+    removeToken(token) {
+      /**
+       * Fired when user types in the token selector
+       *
+       * @property {string} inputText
+       */
+      this.$emit('input', this.selectedTokens.filter(selectedToken => selectedToken.id !== token.id));
+      /**
+       * Fired when a token is removed
+       *
+       * @property {object} token
+       */
+
+      this.$emit('token-remove', token);
+    },
+
+    cancelTokenFocus() {
+      this.focusTextInput();
+    },
+
+    closeDropdown() {
+      this.dropdownIsOpen = false;
+      this.resetFocusedDropdownItem();
+    },
+
+    openDropdown() {
+      if (this.hideDropdown) {
+        return;
+      }
+
+      this.dropdownIsOpen = true;
+    },
+
+    focusTextInput() {
+      this.$refs.textInput.focus();
+    },
+
+    // Register methods passed as props from child components
+    registerDropdownEventHandlers(dropdownEventHandlers) {
+      this.dropdownEventHandlers = dropdownEventHandlers;
+    },
+
+    registerResetFocusedDropdownItem(resetFocusedDropdownItem) {
+      this.resetFocusedDropdownItem = resetFocusedDropdownItem;
+    },
+
+    registerFocusOnToken(focusOnToken) {
+      this.focusOnToken = focusOnToken;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{ref:"container",staticClass:"gl-token-selector gl-form-input form-control form-control-plaintext gl-cursor-text! gl-py-2! gl-px-3!",class:[_vm.inputFocused ? 'gl-token-selector-focus-glow' : '', _vm.containerClass, _vm.stateClass],on:{"click":_vm.handleContainerClick}},[_c('gl-token-container',{attrs:{"tokens":_vm.selectedTokens,"state":_vm.state,"register-focus-on-token":_vm.registerFocusOnToken},on:{"token-remove":_vm.removeToken,"cancel-focus":_vm.cancelTokenFocus},scopedSlots:_vm._u([{key:"token-content",fn:function(ref){
+var token = ref.token;
+return [_vm._t("token-content",null,{"token":token})]}},{key:"text-input",fn:function(){return [_c('input',_vm._b({ref:"textInput",staticClass:"gl-token-selector-input gl-bg-none gl-font-regular gl-font-base gl-line-height-normal gl-px-1 gl-h-auto gl-text-gray-900 gl-border-none gl-outline-none gl-flex-grow-1",attrs:{"type":"text","autocomplete":_vm.autocomplete,"aria-labelledby":_vm.ariaLabelledby,"placeholder":_vm.placeholder},domProps:{"value":_vm.inputText},on:{"input":function($event){_vm.inputText = $event.target.value;},"focus":_vm.handleFocus,"blur":_vm.handleBlur,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.handleEnter($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleBackspace($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleUpArrow($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleDownArrow($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleHomeKey($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleEndKey($event)},function($event){$event.stopPropagation();return _vm.$emit('keydown', $event)}],"click":_vm.handleInputClick}},'input',_vm.textInputAttrs,false))]},proxy:true}],null,true)})],1),_vm._v(" "),_c('gl-token-selector-dropdown',{attrs:{"menu-class":_vm.menuClass,"show":_vm.dropdownIsOpen,"loading":_vm.loading,"dropdown-items":_vm.filteredDropdownItems,"selected-tokens":_vm.selectedTokens,"input-text":_vm.inputText,"allow-user-defined-tokens":_vm.allowUserDefinedTokens,"component-id":_vm.$options.componentId,"register-dropdown-event-handlers":_vm.registerDropdownEventHandlers,"register-reset-focused-dropdown-item":_vm.registerResetFocusedDropdownItem},on:{"dropdown-item-click":_vm.addToken,"show":_vm.openDropdown},scopedSlots:_vm._u([{key:"loading-content",fn:function(){return [_vm._t("loading-content")]},proxy:true},{key:"user-defined-token-content",fn:function(){return [_vm._t("user-defined-token-content",null,{"inputText":_vm.inputText})]},proxy:true},{key:"no-results-content",fn:function(){return [_vm._t("no-results-content")]},proxy:true},{key:"dropdown-item-content",fn:function(ref){
+var dropdownItem = ref.dropdownItem;
+return [_vm._t("dropdown-item-content",null,{"dropdownItem":dropdownItem})]}},{key:"dropdown-footer",fn:function(){return [_vm._t("dropdown-footer")]},proxy:true}],null,true),model:{value:(_vm.focusedDropdownItem),callback:function ($$v) {_vm.focusedDropdownItem=$$v;},expression:"focusedDropdownItem"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_selector_dropdown.js b/app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_selector_dropdown.js
new file mode 100644
index 00000000000000..688c3faca1df34
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/token_selector/token_selector_dropdown.js
@@ -0,0 +1,227 @@
+import GlDropdownItem from '../dropdown/dropdown_item';
+import { tokensValidator } from './helpers';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlTokenSelectorDropdown',
+  components: {
+    GlDropdownItem
+  },
+  props: {
+    show: {
+      type: Boolean,
+      required: true
+    },
+    menuClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: ''
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    dropdownItems: {
+      type: Array,
+      // All items need to have an `id` key
+      validator: tokensValidator,
+      required: true
+    },
+    inputText: {
+      type: String,
+      required: true
+    },
+    allowUserDefinedTokens: {
+      type: Boolean,
+      required: true
+    },
+    componentId: {
+      type: String,
+      required: true
+    },
+    registerDropdownEventHandlers: {
+      type: Function,
+      required: true
+    },
+    registerResetFocusedDropdownItem: {
+      type: Function,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      focusedDropdownItemIndex: 0
+    };
+  },
+
+  computed: {
+    focusedDropdownItem() {
+      return this.dropdownItems[this.focusedDropdownItemIndex];
+    }
+
+  },
+  watch: {
+    focusedDropdownItem(newValue, oldValue) {
+      if ((newValue === null || newValue === void 0 ? void 0 : newValue.id) !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.id)) {
+        this.$emit('input', newValue);
+
+        if (!newValue) {
+          return;
+        }
+
+        const dropdownItemRef = this.getDropdownItemRef(newValue);
+
+        if (dropdownItemRef !== null && dropdownItemRef !== void 0 && dropdownItemRef.$el) {
+          dropdownItemRef.$el.scrollIntoView({
+            block: 'nearest',
+            inline: 'end'
+          });
+        }
+      }
+    }
+
+  },
+
+  created() {
+    this.registerDropdownEventHandlers({
+      handleUpArrow: this.handleUpArrow,
+      handleDownArrow: this.handleDownArrow,
+      handleHomeKey: this.handleHomeKey,
+      handleEndKey: this.handleEndKey
+    });
+    this.registerResetFocusedDropdownItem(this.resetFocusedDropdownItem);
+    this.$emit('input', this.focusedDropdownItem);
+  },
+
+  methods: {
+    handleDropdownItemClick(dropdownItem) {
+      this.$emit('dropdown-item-click', dropdownItem);
+    },
+
+    handleMousedown(dropdownItem) {
+      // `event.relatedTarget` returns `null` on Safari because buttons are not focused on click (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
+      // Because of this we need to manually focus on the button. We do this in `mousedown` because it is fired before the `blur` event
+      const dropdownItemRef = dropdownItem === null ? this.$refs.userDefinedTokenDropdownItem : this.getDropdownItemRef(dropdownItem);
+
+      if (dropdownItemRef !== null && dropdownItemRef !== void 0 && dropdownItemRef.$el) {
+        dropdownItemRef.$el.querySelector('button').focus();
+      }
+    },
+
+    handleUpArrow() {
+      if (!this.show) {
+        return;
+      } // First dropdown item has been reached
+
+
+      if (this.focusedDropdownItemIndex === 0) {
+        return;
+      }
+
+      this.focusPrevDropdownItem();
+    },
+
+    handleDownArrow() {
+      if (!this.show) {
+        this.$emit('show');
+        return;
+      } // Last dropdown item has been reached
+
+
+      if (this.focusedDropdownItemIndex === this.dropdownItems.length - 1) {
+        return;
+      }
+
+      this.focusNextDropdownItem();
+    },
+
+    handleHomeKey(event) {
+      event.preventDefault();
+      this.focusFirstDropdownItem();
+    },
+
+    handleEndKey(event) {
+      event.preventDefault();
+      this.focusLastDropdownItem();
+    },
+
+    focusLastDropdownItem() {
+      this.focusedDropdownItemIndex = this.dropdownItems.length - 1;
+    },
+
+    focusFirstDropdownItem() {
+      this.focusedDropdownItemIndex = 0;
+    },
+
+    focusNextDropdownItem() {
+      this.focusedDropdownItemIndex += 1;
+    },
+
+    focusPrevDropdownItem() {
+      this.focusedDropdownItemIndex -= 1;
+    },
+
+    resetFocusedDropdownItem() {
+      this.focusedDropdownItemIndex = 0;
+    },
+
+    dropdownItemIsFocused(dropdownItem) {
+      if (!this.focusedDropdownItem) {
+        return false;
+      }
+
+      return dropdownItem.id === this.focusedDropdownItem.id;
+    },
+
+    getDropdownItemRef(dropdownItem) {
+      var _this$$refs$dropdownI;
+
+      return (_this$$refs$dropdownI = this.$refs.dropdownItems) === null || _this$$refs$dropdownI === void 0 ? void 0 : _this$$refs$dropdownI.find(ref => ref.$attrs['data-dropdown-item-id'] === dropdownItem.id);
+    },
+
+    dropdownItemIdAttribute(dropdownItem) {
+      return dropdownItem ? `${this.componentId}-dropdown-item-${dropdownItem.id}` : null;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dropdown b-dropdown gl-new-dropdown gl-relative",class:{ show: _vm.show }},[_c('ul',{ref:"dropdownMenu",staticClass:"dropdown-menu gl-absolute",class:[{ show: _vm.show }, _vm.menuClass],attrs:{"role":"menu","aria-activedescendant":_vm.dropdownItemIdAttribute(_vm.focusedDropdownItem)}},[(_vm.loading)?_c('gl-dropdown-item',{attrs:{"disabled":""}},[_vm._t("loading-content",[_vm._v("Searching...")])],2):(_vm.dropdownItems.length)?_vm._l((_vm.dropdownItems),function(dropdownItem){return _c('gl-dropdown-item',{key:dropdownItem.id,ref:"dropdownItems",refInFor:true,attrs:{"id":_vm.dropdownItemIdAttribute(dropdownItem),"data-dropdown-item-id":dropdownItem.id,"active":_vm.dropdownItemIsFocused(dropdownItem),"active-class":"is-focused","tabindex":"-1"},on:{"click":function($event){return _vm.handleDropdownItemClick(dropdownItem)}}},[_c('div',{staticClass:"gl-mx-n4 gl-my-n3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(dropdownItem)}}},[_vm._t("dropdown-item-content",[_vm._v("\n            "+_vm._s(dropdownItem.name)+"\n          ")],{"dropdownItem":dropdownItem})],2)])}):[(_vm.allowUserDefinedTokens && _vm.inputText !== '')?_c('gl-dropdown-item',{ref:"userDefinedTokenDropdownItem",attrs:{"active":"","active-class":"is-focused"},on:{"click":function($event){return _vm.handleDropdownItemClick(null)}}},[_c('div',{staticClass:"gl-mx-n4 gl-my-n3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(null)}}},[_vm._t("user-defined-token-content",[_vm._v("\n            Add \""+_vm._s(_vm.inputText)+"\"\n          ")],{"inputText":_vm.inputText})],2)]):_c('gl-dropdown-item',{attrs:{"disabled":""}},[_vm._t("no-results-content",[_vm._v("No matches found")])],2)],_vm._v(" "),_vm._t("dropdown-footer")],2)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tooltip/tooltip.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tooltip/tooltip.documentation.js
new file mode 100644
index 00000000000000..e154e9e82d1a35
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tooltip/tooltip.documentation.js
@@ -0,0 +1,8 @@
+var description = "Using the tooltip component is recommended if you have HTML content.\nIt is also currently required if the tooltip content needs to change while it's visible\n(see [this upstream issue][this upstream issue]). In all other cases, please use the directive.\n\n[this upstream issue]: https://github.com/bootstrap-vue/bootstrap-vue/issues/2142\n\n## Using the component\n\n~~~html\n<gl-button ref=\"someButton\">\n  ...\n</gl-button>\n\n<gl-tooltip :target=\"() => $refs.someButton\">\n  some <em>tooltip<em/> text\n</gl-tooltip>\n~~~\n\n## Using the directive\n\nYou will need to import and register `GlTooltipDirective` before you can use it.\n\n~~~html\n<script>\nimport { GlTooltipDirective } from '@gitlab/ui';\n\nexport default {\n  directives: {\n    GlTooltip: GlTooltipDirective,\n  },\n};\n</script>\n\n<element\n  v-gl-tooltip.${modifier}\n  title=\"some tooltip text\"\n>\n  ...\n</element>\n~~~\n\n## Directive attributes\n\n`v-gl-tooltip` directive uses the same attributes as [`v-b-tooltip`][`v-b-tooltip`].\n\n## Under the hood\n\nTooltip uses [`<b-tooltip>`][`<b-tooltip>`] and [`v-b-tooltip`][`v-b-tooltip`] internally.\n\n[`<b-tooltip>`]: https://bootstrap-vue.org/docs/components/tooltip\n\n[`v-b-tooltip`]: https://bootstrap-vue.org/docs/directives/tooltip\n";
+
+var tooltip_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default tooltip_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/base/tooltip/tooltip.js b/app/assets/javascripts/gitlab-ui/dist/components/base/tooltip/tooltip.js
new file mode 100644
index 00000000000000..e1a7112bcd2a34
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/base/tooltip/tooltip.js
@@ -0,0 +1,53 @@
+import { BTooltip } from 'bootstrap-vue/esm/index.js';
+import { tooltipDelay } from '../../../utils/constants';
+import tooltipMixin from '../../mixins/tooltip_mixin';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const tooltipRefName = 'bvTooltip';
+var script = {
+  tooltipDelay,
+  components: {
+    BTooltip
+  },
+  mixins: [tooltipMixin(tooltipRefName)],
+  inheritAttrs: false,
+  tooltipRefName
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tooltip',_vm._g(_vm._b({ref:_vm.$options.tooltipRefName,attrs:{"delay":_vm.$options.tooltipDelay}},'b-tooltip',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/area/area.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/area/area.documentation.js
new file mode 100644
index 00000000000000..87b62e83d14956
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/area/area.documentation.js
@@ -0,0 +1,11 @@
+import examples from './examples';
+
+var description = "### Area Chart\n";
+
+var area_documentation = {
+  followsDesignSystem: false,
+  description,
+  examples
+};
+
+export default area_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/area/area.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/area/area.js
new file mode 100644
index 00000000000000..88b93b734d9e23
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/area/area.js
@@ -0,0 +1,364 @@
+import merge from 'lodash/merge';
+import defaultChartOptions, { defaultAreaOpacity, lineStyle, getThresholdConfig, generateAnnotationSeries, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid, getDefaultTooltipContent } from '../../../utils/charts/config';
+import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, DATA_TOOLTIP_LEFT_OFFSET, ANNOTATION_TOOLTIP_TOP_OFFSET } from '../../../utils/charts/constants';
+import { colorFromDefaultPalette } from '../../../utils/charts/theme';
+import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
+import { debounceByAnimationFrame } from '../../../utils/utils';
+import ToolboxMixin from '../../mixins/toolbox_mixin';
+import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
+import Chart from '../chart/chart';
+import ChartLegend from '../legend/legend';
+import ChartTooltip from '../tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/**
+ * Area charts as of %12.10 support annotations.
+ * Annotations is composed of a dotted line and an arrow
+ * at the bottom. The dotted line is constructed
+ * with markLine and arrows with markPoint.
+ *
+ * Similar to how custom tooltips are displayed when area chart
+ * is hovered, a tooltip should be displayed when the annotation
+ * arrow is hovered. This component adds event listeners
+ * to figure out if mouse is hovered on charts to show tooltips.
+ * While that works for data points inside the grid, for arrows
+ * that live right under the chart, we use eCharts inbuilt
+ * event listeners to detect hover. Given this limitation,
+ * we use a separate tooltip for data point and arrow.
+ */
+var script = {
+  components: {
+    Chart,
+    ChartLegend,
+    ChartTooltip,
+    TooltipDefaultFormat
+  },
+  mixins: [ToolboxMixin],
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Array,
+      required: true
+    },
+    option: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    thresholds: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    annotations: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    includeLegendAvgMax: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    formatAnnotationsTooltipText: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    formatTooltipText: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    legendAverageText: {
+      type: String,
+      required: false,
+      default: LEGEND_AVERAGE_TEXT
+    },
+    legendMaxText: {
+      type: String,
+      required: false,
+      default: LEGEND_MAX_TEXT
+    },
+    legendMinText: {
+      type: String,
+      required: false,
+      default: LEGEND_MIN_TEXT
+    },
+    legendCurrentText: {
+      type: String,
+      required: false,
+      default: LEGEND_CURRENT_TEXT
+    },
+    legendLayout: {
+      type: String,
+      required: false,
+      default: LEGEND_LAYOUT_INLINE,
+
+      validator(layout) {
+        return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
+      }
+
+    }
+  },
+
+  data() {
+    // Part of the tooltip related data can be
+    // moved into the tooltip component.
+    // Tracking that progress in
+    // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/618
+    return {
+      chart: null,
+      showDataTooltip: false,
+      dataTooltipTitle: '',
+      dataTooltipContent: {},
+      dataTooltipPosition: {
+        left: '0',
+        top: '0'
+      },
+      showAnnotationsTooltip: false,
+      annotationsTooltipTitle: '',
+      annotationsTooltipContent: '',
+      annotationsTooltipPosition: {
+        left: '0',
+        top: '0'
+      },
+      debouncedShowHideTooltip: debounceByAnimationFrame(this.showHideTooltip),
+      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
+    };
+  },
+
+  computed: {
+    series() {
+      const dataSeries = this.data.map((series, index) => {
+        const defaultColor = colorFromDefaultPalette(index);
+
+        const getColor = type => series[type] && series[type].color ? series[type].color : defaultColor;
+
+        return merge({
+          areaStyle: {
+            opacity: defaultAreaOpacity,
+            color: getColor('areaStyle')
+          },
+          showSymbol: false,
+          lineStyle: {
+            color: getColor('lineStyle')
+          },
+          itemStyle: {
+            color: getColor('itemStyle')
+          }
+        }, lineStyle, series, getThresholdConfig(this.thresholds));
+      }); // if annotation series exists, append it
+      // along with data series
+
+      if (this.annotationSeries) {
+        return [...dataSeries, this.annotationSeries];
+      }
+
+      return dataSeries;
+    },
+
+    annotationSeries() {
+      return generateAnnotationSeries(this.annotations);
+    },
+
+    options() {
+      const defaultAreaChartOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            lineStyle: {
+              type: 'solid'
+            },
+            label: {
+              formatter: this.onLabelChange
+            }
+          }
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          show: false
+        }
+      };
+      const mergedOptions = merge({}, defaultChartOptions, defaultAreaChartOptions, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments); // All chart options can be merged but series
+      // needs to be handled specially.
+
+      return mergeSeriesToOptions(mergeAnnotationAxisToOptions(mergedOptions, this.hasAnnotations), this.series);
+    },
+
+    /**
+     * Annotations currently are passed as series options in monitoring dashboard.
+     * Once https://gitlab.com/gitlab-org/gitlab/-/issues/213390 is closed,
+     * annotations will be passed as props and not as series options.
+     *
+     * For backward compatibility, we're having to check for both.
+     */
+    hasAnnotations() {
+      return this.annotations.length !== 0 || seriesHasAnnotations(this.option.series);
+    },
+
+    shouldShowAnnotationsTooltip() {
+      return this.chart && this.hasAnnotations;
+    },
+
+    compiledOptions() {
+      return this.chart ? this.chart.getOption() : null;
+    },
+
+    legendStyle() {
+      return {
+        paddingLeft: `${grid.left}px`
+      };
+    },
+
+    seriesInfo() {
+      return this.compiledOptions.series.reduce((acc, series, index) => {
+        if (series.type === 'line') {
+          acc.push({
+            name: series.name,
+            type: series.lineStyle.type,
+            color: series.lineStyle.color || colorFromDefaultPalette(index),
+            data: this.includeLegendAvgMax ? series.data.map(data => data[1]) : undefined
+          });
+        }
+
+        return acc;
+      }, []);
+    }
+
+  },
+
+  beforeDestroy() {
+    this.chart.getDom().removeEventListener('mousemove', this.debouncedShowHideTooltip);
+    this.chart.getDom().removeEventListener('mouseout', this.debouncedShowHideTooltip);
+    this.chart.off('mouseout', this.hideAnnotationsTooltip);
+    this.chart.off('mouseover', this.onChartMouseOver);
+  },
+
+  methods: {
+    defaultFormatTooltipText(params) {
+      const {
+        xLabels,
+        tooltipContent
+      } = getDefaultTooltipContent(params, this.options.yAxis.name);
+      this.$set(this, 'dataTooltipContent', tooltipContent);
+      this.dataTooltipTitle = xLabels.join(', ');
+    },
+
+    defaultAnnotationTooltipText(params) {
+      var _params$data$tooltipD;
+
+      return {
+        title: params.data.xAxis,
+        content: (_params$data$tooltipD = params.data.tooltipData) === null || _params$data$tooltipD === void 0 ? void 0 : _params$data$tooltipD.content
+      };
+    },
+
+    onCreated(chart) {
+      // These listeners are used to show/hide data tooltips
+      // when the mouse is hovered over the parent container
+      // of echarts' svg element. This works only for data points
+      // and not markPoints.
+      chart.getDom().addEventListener('mousemove', this.debouncedShowHideTooltip);
+      chart.getDom().addEventListener('mouseout', this.debouncedShowHideTooltip); // eCharts inbuild mouse events
+      // https://echarts.apache.org/en/api.html#events.Mouse%20events
+      // is used to attach listeners to markPoints. These listeners
+      // are currently used for annotation arrows at the bottom of the chart.
+      // Because data points and annotations arrows are in different
+      // sections of the charts with their own mouseovers and mouseouts,
+      // there shouldn't be an overlapping situation where both tooltips
+      // are visible.
+
+      if (this.hasAnnotations) {
+        chart.on('mouseout', this.onChartDataPointMouseOut);
+        chart.on('mouseover', this.onChartDataPointMouseOver);
+      }
+
+      this.chart = chart;
+      this.$emit('created', chart);
+    },
+
+    showHideTooltip(mouseEvent) {
+      this.showDataTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
+      this.dataTooltipPosition = {
+        left: `${mouseEvent.zrX + DATA_TOOLTIP_LEFT_OFFSET}px`,
+        top: `${mouseEvent.zrY}px`
+      };
+    },
+
+    onChartDataPointMouseOut() {
+      this.showAnnotationsTooltip = false;
+    },
+
+    /**
+     * Check if the hovered data point is an annotation
+     * point to show the annotation tooltip.
+     */
+    onChartDataPointMouseOver(params) {
+      if (isDataPointAnnotation(params)) {
+        const {
+          event
+        } = params;
+        const toolTipFormatter = this.formatAnnotationsTooltipText || this.defaultAnnotationTooltipText;
+        const {
+          title = '',
+          content = ''
+        } = toolTipFormatter(params);
+        this.showAnnotationsTooltip = true;
+        this.annotationsTooltipTitle = title;
+        this.annotationsTooltipContent = content;
+        this.annotationsTooltipPosition = {
+          left: `${event.event.zrX}px`,
+          top: `${event.event.zrY + ANNOTATION_TOOLTIP_TOP_OFFSET}px`
+        };
+      }
+    },
+
+    onLabelChange(params) {
+      this.selectedFormatTooltipText(params);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()]]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/area/examples/area.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/area/examples/area.basic.example.js
new file mode 100644
index 00000000000000..febd7a31b3874d
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/area/examples/area.basic.example.js
@@ -0,0 +1,45 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-area-chart',{attrs:{"data":[
+    {
+      name: 'Values',
+      data: [
+        [0, 5],
+        [4, 3],
+        [8, 10] ],
+    } ]}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/area/examples/area.basic_plus.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/area/examples/area.basic_plus.example.js
new file mode 100644
index 00000000000000..3cd012aef1c646
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/area/examples/area.basic_plus.example.js
@@ -0,0 +1,53 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-area-chart',{attrs:{"data":[
+    {
+      name: 'Values',
+      data: [
+        [0, 5],
+        [4, 3],
+        [8, 10] ],
+    } ],"option":{
+    series: [
+      {
+        type: 'scatter',
+        data: [
+          [2, 5],
+          [6, 10] ],
+      } ],
+  }}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/area/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/area/examples/index.js
new file mode 100644
index 00000000000000..d732499994f762
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/area/examples/index.js
@@ -0,0 +1,19 @@
+import AreaBasicExample from './area.basic.example';
+import AreaBasicPlusExample from './area.basic_plus.example';
+
+var index = [{
+  name: 'Basic',
+  items: [{
+    id: 'area-basic',
+    name: 'Basic',
+    description: 'Basic Area Chart',
+    component: AreaBasicExample
+  }, {
+    id: 'area-basic-plus',
+    name: 'Basic plus custom series',
+    description: 'Basic area chart with custom series added',
+    component: AreaBasicPlusExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/bar/bar.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/bar/bar.documentation.js
new file mode 100644
index 00000000000000..c1cddfccbcb823
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/bar/bar.documentation.js
@@ -0,0 +1,8 @@
+var description = "A bar chart is similar to a column chart where the the length of bars represents the data value.\nAlthough alike, they are cannot be interchangeably used. Bar charts are good for displaying large\nnumber of categories on the y-axis.\n";
+
+var bar_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default bar_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/bar/bar.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/bar/bar.js
new file mode 100644
index 00000000000000..f32b678b467f1a
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/bar/bar.js
@@ -0,0 +1,273 @@
+import merge from 'lodash/merge';
+import truncate from 'lodash/truncate';
+import { dataZoomAdjustments, mergeSeriesToOptions, grid } from '../../../utils/charts/config';
+import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
+import { colorFromDefaultPalette } from '../../../utils/charts/theme';
+import { engineeringNotation } from '../../../utils/number_utils';
+import { debounceByAnimationFrame, hexToRgba } from '../../../utils/utils';
+import ToolboxMixin from '../../mixins/toolbox_mixin';
+import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
+import Chart from '../chart/chart';
+import ChartTooltip from '../tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/**
+ * `nameGap` in charts/config is set to 50 but it is not
+ * used for bar charts as the axes are flipped. That is why
+ * we're explicitly setting it here
+ */
+
+const DEFAULT_NAME_GAP = 50;
+/**
+ * This is the magic number at which the y-axis name
+ * and y-axis labels don't overlap
+ * @Number
+ */
+
+const AXIS_LABEL_LENGTH = 7;
+/**
+ * Because the axes are reversed in bar charts defaultChartOptions
+ * xAxis and yAxis needs to be handled specifically.
+ */
+
+const defaultOptions = {
+  grid,
+  xAxis: {
+    nameLocation: 'center',
+    axisLabel: {
+      formatter: num => engineeringNotation(num, 2)
+    }
+  },
+  yAxis: {
+    nameGap: DEFAULT_NAME_GAP,
+    boundaryGap: true,
+    nameLocation: 'center',
+    splitLine: {
+      show: false
+    },
+    axisLabel: {
+      interval: 0,
+      formatter: str => truncate(str, {
+        length: AXIS_LABEL_LENGTH,
+        separator: '...'
+      })
+    }
+  }
+};
+var script = {
+  components: {
+    Chart,
+    ChartTooltip,
+    TooltipDefaultFormat
+  },
+  mixins: [ToolboxMixin],
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    option: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    yAxisTitle: {
+      type: String,
+      required: true
+    },
+    xAxisTitle: {
+      type: String,
+      required: true
+    },
+    xAxisType: {
+      type: String,
+      required: false,
+      default: 'value'
+    }
+  },
+
+  data() {
+    return {
+      chart: null,
+      showTooltip: false,
+      tooltipTitle: '',
+      tooltipContent: {},
+      tooltipPosition: {
+        left: '0',
+        top: '0'
+      },
+      debouncedMoveShowTooltip: debounceByAnimationFrame(this.moveShowTooltip)
+    };
+  },
+
+  computed: {
+    series() {
+      return Object.keys(this.data).map((key, index) => {
+        const barColor = colorFromDefaultPalette(index);
+        return {
+          name: key,
+          data: this.data[key],
+          type: 'bar',
+          stack: 'chart',
+          itemStyle: {
+            color: hexToRgba(barColor, 0.2),
+            borderColor: barColor,
+            borderWidth: 1
+          },
+          emphasis: {
+            itemStyle: {
+              color: hexToRgba(barColor, 0.4)
+            }
+          },
+          barMaxWidth: '50%'
+        };
+      });
+    },
+
+    options() {
+      const mergedOptions = merge({}, defaultOptions, {
+        xAxis: {
+          axisLine: {
+            show: false
+          },
+          name: this.xAxisTitle,
+          type: this.xAxisType
+        },
+        yAxis: {
+          name: this.yAxisTitle,
+          type: 'category',
+          axisTick: {
+            show: true
+          },
+          axisPointer: {
+            show: true,
+            type: 'none',
+            label: {
+              formatter: this.onLabelChange
+            }
+          }
+        },
+        legend: {
+          show: false
+        }
+      }, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments); // All chart options can be merged but series
+      // needs to be handled specially
+
+      return mergeSeriesToOptions(mergedOptions, this.series);
+    }
+
+  },
+
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.getDom().removeEventListener('mousemove', this.debouncedMoveShowTooltip);
+      this.chart.getDom().removeEventListener('mouseout', this.debouncedMoveShowTooltip);
+    }
+  },
+
+  methods: {
+    moveShowTooltip(mouseEvent) {
+      this.tooltipPosition = {
+        left: `${mouseEvent.zrX + TOOLTIP_LEFT_OFFSET}px`,
+        top: `${mouseEvent.zrY}px`
+      };
+      this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
+    },
+
+    onCreated(chart) {
+      this.chart = chart;
+      this.$emit('created', chart);
+      chart.getDom().addEventListener('mousemove', this.debouncedMoveShowTooltip);
+      chart.getDom().addEventListener('mouseout', this.debouncedMoveShowTooltip);
+    },
+
+    onLabelChange(params) {
+      const {
+        yLabels,
+        tooltipContent
+      } = this.getDefaultTooltipContent(params, this.xAxisTitle);
+      this.$set(this, 'tooltipContent', tooltipContent);
+      this.tooltipTitle = yLabels.join(', ');
+    },
+
+    /**
+     * The existing getDefaultTooltipContent in utils works against the y-axis value.
+     * However, for bar charts, the tooltip should be against x-axis values.
+     * This method will be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/issues/674
+     *
+     * @param {Object} params series data
+     * @param {String} xAxisTitle x-axis title
+     * @returns {Object} tooltip title and content
+     */
+    getDefaultTooltipContent(params) {
+      let xAxisTitle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      const seriesDataLength = params.seriesData.length;
+      const {
+        yLabels,
+        tooltipContent
+      } = params.seriesData.reduce((acc, chartItem) => {
+        const [value, title] = chartItem.value || []; // The x axis title is used instead of y axis
+
+        const seriesName = seriesDataLength === 1 && xAxisTitle ? xAxisTitle : chartItem.seriesName;
+        const color = seriesDataLength === 1 ? '' : chartItem.color;
+        acc.tooltipContent[seriesName] = {
+          value,
+          color
+        };
+
+        if (!acc.yLabels.includes(title)) {
+          acc.yLabels.push(title);
+        }
+
+        return acc;
+      }, {
+        yLabels: [],
+        tooltipContent: {}
+      });
+      return {
+        yLabels,
+        tooltipContent
+      };
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.yAxisTitle)+")")])]},proxy:true}],null,false,1644826356)},[_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})],1):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/chart/chart.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/chart/chart.documentation.js
new file mode 100644
index 00000000000000..d5f9fb58cae44c
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/chart/chart.documentation.js
@@ -0,0 +1,7 @@
+var description = "### ECharts Wrapper\n\nThe chart component is a Vue component wrapper around [ECharts]. The chart component accepts width\nand height props in order to allow the user to make it responsive, but it is not responsive by\ndefault.\n\n> Note: In every case there should be a specific component for each type of chart\n(i.e. Line, Area, Bar, etc.). This component should only need to be used by chart type components\nwithin GitLab UI as opposed to being used directly within any other codebase.\n\n### EChart Lifecycle\n\nThis component emits the following events during the ECharts lifecycle:\n\n- `created`: emitted after calling `echarts.init`\n- `updated`: emitted after calling `echarts.setOption`\n\nIn all cases, the event payload is the echart instance.\n\n[echarts]: https://echarts.apache.org\n";
+
+var chart_documentation = {
+  description
+};
+
+export default chart_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/chart/chart.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/chart/chart.js
new file mode 100644
index 00000000000000..7f667a95e0586d
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/chart/chart.js
@@ -0,0 +1,188 @@
+import * as echarts from 'echarts';
+import { validRenderers, defaultWidth, defaultHeight } from '../../../utils/charts/config';
+import createTheme, { themeName } from '../../../utils/charts/theme';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  directives: {
+    resizeObserver: GlResizeObserverDirective
+  },
+  props: {
+    options: {
+      type: Object,
+      required: true
+    },
+
+    /**
+     * Warning: this prop is deprecated and will soon be removed
+     * Please do not utilize `disableTheme` for formatting
+     * Use the `options` prop to set desired echarts formatting
+     */
+    disableTheme: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    width: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    height: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    groupId: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    renderer: {
+      type: String,
+      required: false,
+      default: 'svg',
+
+      validator(renderer) {
+        return validRenderers.includes(renderer);
+      }
+
+    },
+    responsive: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      chart: null
+    };
+  },
+
+  watch: {
+    options() {
+      if (this.chart) {
+        this.draw();
+      }
+    },
+
+    width() {
+      this.setChartSize();
+    },
+
+    height() {
+      this.setChartSize();
+    }
+
+  },
+
+  created() {
+    if (!this.disableTheme) {
+      echarts.registerTheme(themeName, createTheme(this.options));
+    }
+  },
+
+  async mounted() {
+    await this.$nextTick();
+    this.chart = echarts.init(this.$refs.chart, this.disableTheme ? null : themeName, {
+      renderer: this.renderer,
+      width: defaultWidth,
+      height: defaultHeight
+    });
+
+    if (this.groupId.length) {
+      this.chart.group = this.groupId;
+      echarts.connect(this.groupId);
+    }
+
+    this.chart.on('click', this.handleClick);
+    /**
+     * Emitted after calling `echarts.init`
+     */
+
+    this.$emit('created', this.chart);
+    this.draw();
+    this.setChartSize();
+  },
+
+  beforeDestroy() {
+    this.chart.off('click', this.handleClick);
+  },
+
+  methods: {
+    draw() {
+      this.chart.setOption(this.options);
+      /**
+       * Emitted after calling `echarts.setOption`
+       */
+
+      this.$emit('updated', this.chart);
+    },
+
+    setChartSize() {
+      this.chart.resize({
+        width: this.width || 'auto',
+        height: this.height || defaultHeight
+      });
+    },
+
+    handleClick(params) {
+      /**
+       * Emitted when clicked on a data item in the chart (e.g., a bar/column).
+       *
+       * @property {object} chart The chart instance
+       * @property {object} params A params object, see also https://echarts.apache.org/en/api.html#events.Mouse%20events
+       */
+      this.$emit('chartItemClicked', {
+        chart: this.chart,
+        params
+      });
+    },
+
+    handleResize() {
+      if (this.responsive) this.chart.resize();
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],ref:"chart"})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/column/column.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/column/column.documentation.js
new file mode 100644
index 00000000000000..7a418cabd7201a
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/column/column.documentation.js
@@ -0,0 +1,5 @@
+var column_documentation = {
+  followsDesignSystem: true
+};
+
+export default column_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/column/column.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/column/column.js
new file mode 100644
index 00000000000000..a799010f2defbf
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/column/column.js
@@ -0,0 +1,257 @@
+import merge from 'lodash/merge';
+import defaultChartOptions, { yAxis, generateBarSeries, generateLineSeries, gridWithSecondaryYAxis, grid, dataZoomAdjustments, mergeSeriesToOptions, getDefaultTooltipContent } from '../../../utils/charts/config';
+import { CHART_TYPE_LINE, TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
+import { colorFromDefaultPalette } from '../../../utils/charts/theme';
+import { columnOptions } from '../../../utils/constants';
+import { debounceByAnimationFrame } from '../../../utils/utils';
+import ToolboxMixin from '../../mixins/toolbox_mixin';
+import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
+import Chart from '../chart/chart';
+import ChartTooltip from '../tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const yAxisDefaults = { ...yAxis,
+  nameLocation: 'center',
+  axisTick: {
+    show: false
+  }
+};
+var script = {
+  components: {
+    Chart,
+    ChartTooltip,
+    TooltipDefaultFormat
+  },
+  mixins: [ToolboxMixin],
+  inheritAttrs: false,
+  props: {
+    bars: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    lines: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    secondaryData: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    option: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    yAxisTitle: {
+      type: String,
+      required: true
+    },
+    secondaryDataTitle: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    xAxisTitle: {
+      type: String,
+      required: true
+    },
+    xAxisType: {
+      type: String,
+      required: true,
+      validator: value => ['value', 'category', 'time', 'log'].indexOf(value) !== -1
+    }
+  },
+
+  data() {
+    return {
+      chart: null,
+      showTooltip: false,
+      tooltipTitle: '',
+      tooltipContent: {},
+      tooltipPosition: {
+        left: '0',
+        top: '0'
+      },
+      debouncedMoveShowTooltip: debounceByAnimationFrame(this.moveShowTooltip)
+    };
+  },
+
+  computed: {
+    hasSecondaryAxis() {
+      return Boolean(this.secondaryData.length);
+    },
+
+    barSeries() {
+      return this.bars.map((_ref, index) => {
+        let {
+          name,
+          data
+        } = _ref;
+        const color = colorFromDefaultPalette(index);
+        return generateBarSeries({
+          stack: this.groupBy,
+          name,
+          data,
+          color
+        });
+      });
+    },
+
+    lineSeries() {
+      const offset = this.bars.length;
+      return this.lines.map((_ref2, index) => {
+        let {
+          name,
+          data
+        } = _ref2;
+        const color = colorFromDefaultPalette(offset + index);
+        return generateLineSeries({
+          name,
+          data,
+          color
+        });
+      });
+    },
+
+    secondarySeries() {
+      const offset = this.bars.length + this.lines.length;
+      return this.secondaryData.map((_ref3, index) => {
+        let {
+          name,
+          data,
+          type,
+          stack = columnOptions.tiled
+        } = _ref3;
+        const color = colorFromDefaultPalette(offset + index);
+        return type === CHART_TYPE_LINE ? generateLineSeries({
+          color,
+          name,
+          data,
+          yAxisIndex: 1
+        }) : generateBarSeries({
+          color,
+          name,
+          data,
+          yAxisIndex: 1,
+          stack
+        });
+      });
+    },
+
+    series() {
+      return [...this.barSeries, ...this.lineSeries, ...this.secondarySeries];
+    },
+
+    options() {
+      const yAxisPrimary = { ...yAxisDefaults,
+        name: this.yAxisTitle
+      };
+      const mergedOptions = merge({}, defaultChartOptions, {
+        grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
+        xAxis: {
+          boundaryGap: true,
+          axisLabel: {
+            margin: 20,
+            verticalAlign: 'bottom'
+          },
+          axisLine: {
+            show: false
+          },
+          axisPointer: {
+            show: true,
+            type: 'none',
+            label: {
+              formatter: this.onLabelChange
+            }
+          },
+          name: this.xAxisTitle,
+          type: this.xAxisType
+        },
+        yAxis: this.hasSecondaryAxis ? [yAxisPrimary, { ...yAxisDefaults,
+          name: this.secondaryDataTitle,
+          show: this.hasSecondaryAxis
+        }] : yAxisPrimary,
+        legend: {
+          show: false
+        }
+      }, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments); // All chart options can be merged but series
+      // needs to be handled specially
+
+      return mergeSeriesToOptions(mergedOptions, this.series);
+    }
+
+  },
+
+  beforeDestroy() {
+    this.chart.getDom().removeEventListener('mousemove', this.debouncedMoveShowTooltip);
+    this.chart.getDom().removeEventListener('mouseout', this.debouncedMoveShowTooltip);
+  },
+
+  methods: {
+    moveShowTooltip(mouseEvent) {
+      this.tooltipPosition = {
+        left: `${mouseEvent.zrX + TOOLTIP_LEFT_OFFSET}px`,
+        top: `${mouseEvent.zrY}px`
+      };
+      this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
+    },
+
+    onCreated(chart) {
+      chart.getDom().addEventListener('mousemove', this.debouncedMoveShowTooltip);
+      chart.getDom().addEventListener('mouseout', this.debouncedMoveShowTooltip);
+      this.chart = chart;
+      this.$emit('created', chart);
+    },
+
+    onLabelChange(params) {
+      const {
+        xLabels,
+        tooltipContent
+      } = getDefaultTooltipContent(params, this.yAxisTitle);
+      this.$set(this, 'tooltipContent', tooltipContent);
+      this.tooltipTitle = xLabels.join(', ');
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")])]},proxy:true}],null,false,643259221)},[_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})],1):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/discrete_scatter/discrete_scatter.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/discrete_scatter/discrete_scatter.documentation.js
new file mode 100644
index 00000000000000..4a692297f9de68
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/discrete_scatter/discrete_scatter.documentation.js
@@ -0,0 +1,5 @@
+var discrete_scatter_documentation = {
+  followsDesignSystem: true
+};
+
+export default discrete_scatter_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/discrete_scatter/discrete_scatter.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/discrete_scatter/discrete_scatter.js
new file mode 100644
index 00000000000000..0c333c93aac6f8
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/discrete_scatter/discrete_scatter.js
@@ -0,0 +1,201 @@
+import merge from 'lodash/merge';
+import defaultChartOptions, { dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
+import { colorFromDefaultPalette } from '../../../utils/charts/theme';
+import { debounceByAnimationFrame } from '../../../utils/utils';
+import ToolboxMixin from '../../mixins/toolbox_mixin';
+import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
+import Chart from '../chart/chart';
+import ChartTooltip from '../tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const gray200 = '#bfbfbf';
+
+var script = {
+  components: {
+    Chart,
+    ChartTooltip,
+    TooltipDefaultFormat
+  },
+  mixins: [ToolboxMixin],
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Array,
+      required: true
+    },
+    option: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    yAxisTitle: {
+      type: String,
+      required: true
+    },
+    xAxisTitle: {
+      type: String,
+      required: true
+    },
+    symbolSize: {
+      type: Number,
+      required: false,
+      default: 8
+    },
+    formatTooltipText: {
+      type: Function,
+      required: false,
+      default: null
+    }
+  },
+
+  data() {
+    return {
+      chart: null,
+      showTooltip: false,
+      tooltipTitle: '',
+      tooltipContent: {},
+      tooltipPosition: {
+        left: '0',
+        top: '0'
+      },
+      debouncedShowHideTooltip: debounceByAnimationFrame(this.showHideTooltip),
+      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
+    };
+  },
+
+  computed: {
+    series() {
+      return this.data.map((series, index) => {
+        const defaultColor = colorFromDefaultPalette(index);
+
+        const getColor = type => series[type] && series[type].color ? series[type].color : defaultColor;
+
+        return merge({
+          symbolSize: this.symbolSize,
+          lineStyle: {
+            color: getColor('lineStyle')
+          },
+          itemStyle: {
+            color: getColor('itemStyle')
+          }
+        }, series);
+      });
+    },
+
+    options() {
+      const mergedOptions = merge({}, defaultChartOptions, {
+        tooltip: {
+          formatter: this.onLabelChange
+        },
+        xAxis: {
+          type: 'category',
+          name: this.xAxisTitle,
+          axisTick: {
+            alignWithLabel: true,
+            show: true,
+            lineStyle: {
+              color: gray200
+            }
+          },
+          axisLabel: {
+            margin: 20,
+            verticalAlign: 'bottom'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: this.yAxisTitle
+        },
+        legend: {
+          show: false
+        }
+      }, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments); // All chart options can be merged but series
+      // needs to be handled specially
+
+      return mergeSeriesToOptions(mergedOptions, this.series);
+    }
+
+  },
+  methods: {
+    defaultFormatTooltipText(params) {
+      const {
+        data
+      } = params;
+      const [title, content] = data;
+      this.tooltipTitle = title;
+      const seriesName = this.yAxisTitle;
+      const tooltipContent = {
+        [seriesName]: {
+          value: content,
+          color: ''
+        }
+      };
+      this.$set(this, 'tooltipContent', tooltipContent);
+    },
+
+    showHideTooltip(mouseEvent) {
+      this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
+    },
+
+    onCreated(chart) {
+      chart.getDom().addEventListener('mousemove', this.debouncedShowHideTooltip);
+      chart.getDom().addEventListener('mouseout', this.debouncedShowHideTooltip);
+      this.chart = chart;
+      this.$emit('created', chart);
+    },
+
+    onLabelChange(params) {
+      this.selectedFormatTooltipText(params);
+      const {
+        data = []
+      } = params;
+
+      if (data.length) {
+        const [left, top] = this.chart.convertToPixel('grid', data);
+        this.tooltipPosition = {
+          left: `${left}px`,
+          top: `${top}px`
+        };
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._t("tooltip-title",[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")])]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("tooltip-content",[_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})])],2):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/gauge/gauge.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/gauge/gauge.documentation.js
new file mode 100644
index 00000000000000..a547ddda61cd2f
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/gauge/gauge.documentation.js
@@ -0,0 +1,12 @@
+var gauge = "Some layout problems can be encountered with this component. Specifically, when the gauge chart's\naxis labels or detail text have larger widths, they can overlap with the chart elements.\n\nAlso, when the containing element of the gauge chart has either of a small calculated `width` and\n`height`, its axis width could become bulkier in relation to other chart elements. This is because\nat this time [eCharts only allows for setting the axis line width in absolute units](https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.width).\n\nThis issue is to be addressed by [https://gitlab.com/gitlab-org/gitlab-ui/-/issues/916](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/916).\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': gauge
+});
+
+var gauge_documentation = {
+  description
+};
+
+export default gauge_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/gauge/gauge.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/gauge/gauge.js
new file mode 100644
index 00000000000000..90c2dee0f1907f
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/gauge/gauge.js
@@ -0,0 +1,224 @@
+import _sortBy from 'lodash/sortBy';
+import _uniq from 'lodash/uniq';
+import _isFinite from 'lodash/isFinite';
+import _merge from 'lodash/merge';
+import { gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
+import ToolboxMixin from '../../mixins/toolbox_mixin';
+import Chart from '../chart/chart';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const AXIS_LABEL_FONT_SIZE_PX = 14;
+const ARC_RADIUS = '80%';
+const DETAIL_FONT_SIZE_PX = 30;
+const DETAIL_FONT_FAMILY = 'sans-serif';
+const DETAIL_FONT_WEIGHT = 'bold';
+const POINTER_LENGTH = '65%';
+const POINTER_WIDTH_PX = 5;
+
+const gaugeChartSeries = _ref => {
+  let {
+    value,
+    text,
+    min,
+    max,
+    splitNumber,
+    axisColor
+  } = _ref;
+  return [{
+    type: 'gauge',
+    detail: {
+      show: true,
+      formatter: () => {
+        const currentValue = _isFinite(value) ? value : null;
+        return text || (currentValue !== null && currentValue !== void 0 ? currentValue : '--');
+      },
+      color: `${gaugeNeutralHues[0]}`,
+      fontSize: DETAIL_FONT_SIZE_PX,
+      fontFamily: DETAIL_FONT_FAMILY,
+      fontWeight: DETAIL_FONT_WEIGHT
+    },
+    axisLabel: {
+      show: true,
+      fontSize: AXIS_LABEL_FONT_SIZE_PX,
+      formatter: theValue => _isFinite(theValue) ? theValue : '--',
+      color: `${gaugeNeutralHues[1]}`
+    },
+    axisLine: {
+      lineStyle: {
+        color: axisColor
+      }
+    },
+    radius: ARC_RADIUS,
+    pointer: {
+      length: POINTER_LENGTH,
+      width: POINTER_WIDTH_PX
+    },
+    data: [{
+      value
+    }],
+    min,
+    max,
+    splitNumber
+  }];
+};
+
+var script = {
+  components: {
+    Chart
+  },
+  mixins: [ToolboxMixin],
+  props: {
+    value: {
+      type: Number,
+      required: true
+    },
+    min: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    max: {
+      type: Number,
+      required: false,
+      default: 100
+    },
+    thresholds: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator: value => {
+        return value !== null && value !== void 0 && value.length ? value.every(item => _isFinite(item)) : true;
+      }
+    },
+    text: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    splitNumber: {
+      type: Number,
+      required: false,
+      default: 10
+    },
+    option: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  computed: {
+    options() {
+      const mergedOptions = _merge({}, {
+        series: gaugeChartSeries({
+          value: this.value,
+          text: this.text,
+          min: this.min,
+          max: this.max,
+          splitNumber: this.splitNumber,
+          axisColor: this.axisColor
+        })
+      }, this.option, this.toolboxAdjustments);
+
+      return mergedOptions;
+    },
+
+    validThresholds() {
+      const {
+        thresholds,
+        min,
+        max
+      } = this;
+      if (!(thresholds !== null && thresholds !== void 0 && thresholds.length)) return [];
+
+      const uniqueThresholds = _uniq(thresholds);
+
+      const filteredThresholds = uniqueThresholds.filter(threshold => {
+        return _isFinite(threshold) && threshold > min && threshold < max;
+      });
+      /**
+       * Only the first two thresholds will be used
+       */
+
+      const reducedThresholdsList = filteredThresholds.length > 2 ? [filteredThresholds[0], filteredThresholds[1]] : [...filteredThresholds];
+
+      const sortedThresholds = _sortBy(reducedThresholdsList);
+
+      return sortedThresholds;
+    },
+
+    valueIsInLastThreshold() {
+      const {
+        validThresholds,
+        value
+      } = this;
+      return validThresholds.length > 0 && value >= validThresholds[validThresholds.length - 1];
+    },
+
+    axisColor() {
+      const {
+        validThresholds,
+        max
+      } = this;
+      let color;
+
+      if (validThresholds.length === 0) {
+        color = [[1, gaugeSafeHues[0]]];
+      } else if (validThresholds.length === 1) {
+        color = [[validThresholds[0] / max, gaugeSafeHues[0]], [1, gaugeWarningHue]];
+      } else if (validThresholds.length >= 2) {
+        /**
+         * If there are more than two ranges set, only the first two will
+         * be used
+         */
+        color = [[validThresholds[0] / max, gaugeSafeHues[0]], [validThresholds[1] / max, gaugeSafeHues[1]], [1, gaugeWarningHue]];
+      }
+
+      return color;
+    }
+
+  },
+  methods: {
+    onCreated(chart) {
+      this.$emit('created', chart);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners))],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.custom_options.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.custom_options.example.js
new file mode 100644
index 00000000000000..f119a5903d7ede
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.custom_options.example.js
@@ -0,0 +1,79 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      series: (() => {
+        const hours = 24;
+        const days = 7;
+        const res = [];
+
+        for (let x = 0; x < hours; x += 1) {
+          for (let y = 0; y < days; y += 1) {
+            let val = Math.random() * 10;
+
+            if (Math.random() > 0.5) {
+              val = '-';
+            }
+
+            res.push([x, y, val]);
+          }
+        }
+
+        return res;
+      })(),
+      xAxisLabels: ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
+      yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun']
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-heatmap',{attrs:{"data-series":_vm.series,"x-axis-labels":_vm.xAxisLabels,"y-axis-labels":_vm.yAxisLabels,"options":{
+    xAxis: {
+      splitArea: {
+        show: false,
+      },
+    },
+    yAxis: {
+      splitArea: {
+        show: false,
+      },
+    },
+  }}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.hourly.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.hourly.example.js
new file mode 100644
index 00000000000000..055501f7fe309f
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.hourly.example.js
@@ -0,0 +1,70 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      series: (() => {
+        const hours = 24;
+        const days = 7;
+        const res = [];
+
+        for (let x = 0; x < hours; x += 1) {
+          for (let y = 0; y < days; y += 1) {
+            let val = Math.random() * 10;
+
+            if (Math.random() > 0.7) {
+              val = '-';
+            }
+
+            res.push([x, y, val]);
+          }
+        }
+
+        return res;
+      })(),
+      xAxisLabels: ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
+      yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
+      xAxisName: 'Hour',
+      yAxisName: 'Day'
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-heatmap',{attrs:{"data-series":_vm.series,"x-axis-labels":_vm.xAxisLabels,"y-axis-labels":_vm.yAxisLabels,"x-axis-name":_vm.xAxisName,"y-axis-name":_vm.yAxisName}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.responsive.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.responsive.example.js
new file mode 100644
index 00000000000000..feeed66ac2e21d
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.responsive.example.js
@@ -0,0 +1,70 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      series: (() => {
+        const hours = 24;
+        const days = 7;
+        const res = [];
+
+        for (let x = 0; x < hours; x += 1) {
+          for (let y = 0; y < days; y += 1) {
+            let val = Math.random() * 10;
+
+            if (Math.random() > 0.7) {
+              val = '-';
+            }
+
+            res.push([x, y, val]);
+          }
+        }
+
+        return res;
+      })(),
+      xAxisLabels: ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
+      yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
+      xAxisName: 'Hour',
+      yAxisName: 'Day'
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-heatmap',{attrs:{"data-series":_vm.series,"x-axis-labels":_vm.xAxisLabels,"y-axis-labels":_vm.yAxisLabels,"x-axis-name":_vm.xAxisName,"y-axis-name":_vm.yAxisName,"responsive":false}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.totals.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.totals.example.js
new file mode 100644
index 00000000000000..007654d669bd02
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/heatmap.totals.example.js
@@ -0,0 +1,62 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      series: (() => {
+        const hours = 12;
+        const days = 20;
+        const res = [];
+
+        for (let x = 0; x < hours; x += 1) {
+          for (let y = 0; y < days; y += 1) {
+            const val = Math.ceil(Math.random() * (y % 12) - 3);
+            res.push([x, y, val]);
+          }
+        }
+
+        return res;
+      })(),
+      xAxisLabels: ['7am', '8am', '9am', '10am', '11am', '12pm', '1pm', '2pm', '3pm', '4pm', '5pm', '6pm']
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-heatmap',{attrs:{"title":"Pageviews per hour","data-series":_vm.series,"x-axis-labels":_vm.xAxisLabels}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/index.js
new file mode 100644
index 00000000000000..da7f82035819e7
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/examples/index.js
@@ -0,0 +1,31 @@
+import CustomOptionsExample from './heatmap.custom_options.example';
+import HourlyExample from './heatmap.hourly.example';
+import CustomResponsiveExample from './heatmap.responsive.example';
+import TotalsExample from './heatmap.totals.example';
+
+var index = [{
+  name: 'Calendar',
+  items: [{
+    id: 'heatmap-hourly',
+    name: 'Hourly breakdown',
+    description: 'HourlyExample',
+    component: HourlyExample
+  }, {
+    id: 'heatmap-totals',
+    name: 'Histograms over time',
+    description: 'TotalsExample',
+    component: TotalsExample
+  }, {
+    id: 'heatmap-custom-options',
+    name: 'Heatmap with no background',
+    description: 'CustomOptionsExample',
+    component: CustomOptionsExample
+  }, {
+    id: 'heatmap-responsive',
+    name: 'Heatmap which is non mobile responsive',
+    description: 'CustomResponsiveExample',
+    component: CustomResponsiveExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/heatmap.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/heatmap.documentation.js
new file mode 100644
index 00000000000000..34ce22d194b8ee
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/heatmap.documentation.js
@@ -0,0 +1,11 @@
+import examples from './examples';
+
+var description = "## Heatmaps\n\n**Note** This component uses `<gl-legend>`, which should allow a user to click on any data point(s)\nin the legend and make the corresponding data point(s) on the chart rendered disappear.\n_See [area chart](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-area-chart--default)\nfor an example_ For this particular chart, there is a [known issue](https://gitlab.com/gitlab-org/gitlab-ui/issues/352)\nwith the functionality of the legend, where clicking on it does nothing.\n";
+
+var heatmap_documentation = {
+  description,
+  examples,
+  followsDesignSystem: true
+};
+
+export default heatmap_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/heatmap.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/heatmap.js
new file mode 100644
index 00000000000000..adef3929d98890
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/heatmap.js
@@ -0,0 +1,312 @@
+import merge from 'lodash/merge';
+import { getDefaultTooltipContent } from '../../../utils/charts/config';
+import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
+import { heatmapHues } from '../../../utils/charts/theme';
+import { engineeringNotation } from '../../../utils/number_utils';
+import { debounceByAnimationFrame } from '../../../utils/utils';
+import ToolboxMixin from '../../mixins/toolbox_mixin';
+import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
+import Chart from '../chart/chart';
+import ChartLegend from '../legend/legend';
+import ChartTooltip from '../tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const white = '#fff';
+const gray100 = '#dbdbdb';
+
+const defaultOptions = {
+  visualMap: {
+    show: false,
+    inRange: {
+      color: heatmapHues
+    }
+  },
+  series: {
+    type: 'heatmap'
+  }
+};
+/*
+ * The series is an array of arrays containing [x, y, value]
+ * x and y are position, value determines the color
+ * We want the min and max from value field to make the range of colors
+ */
+
+function getRange(series) {
+  return series.reduce((acc, curr) => {
+    const value = curr[2] || 0;
+    if (value < acc.min) acc.min = value;
+    if (value > acc.max) acc.max = value;
+    return acc;
+  }, {
+    min: 0,
+    max: 0
+  });
+}
+
+var script = {
+  components: {
+    Chart,
+    ChartLegend,
+    ChartTooltip,
+    TooltipDefaultFormat
+  },
+  mixins: [ToolboxMixin],
+  props: {
+    options: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    dataSeries: {
+      type: Array,
+      required: true
+    },
+    xAxisLabels: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    yAxisLabels: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    xAxisName: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    yAxisName: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    formatTooltipText: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    legendAverageText: {
+      type: String,
+      required: false,
+      default: 'Avg'
+    },
+    legendMaxText: {
+      type: String,
+      required: false,
+      default: 'Max'
+    },
+    responsive: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      chart: null,
+      tooltip: {
+        show: false,
+        title: '',
+        content: {},
+        left: '0',
+        top: '0'
+      },
+      debouncedShowHideTooltip: debounceByAnimationFrame(this.showHideTooltip),
+      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
+    };
+  },
+
+  computed: {
+    computedOptions() {
+      const {
+        min,
+        max
+      } = getRange(this.dataSeries);
+      return merge({}, defaultOptions, {
+        series: {
+          data: this.dataSeries,
+          z: 2
+        },
+        grid: {
+          left: '64px',
+          right: '32px',
+          show: true,
+          borderWidth: 0,
+          backgroundColor: gray100
+        },
+        visualMap: {
+          min,
+          max
+        },
+        xAxis: {
+          data: this.xAxisLabels,
+          z: 3,
+          axisTick: false,
+          axisLabel: {
+            margin: 2
+          },
+          name: this.xAxisName,
+          nameGap: 16,
+          nameLocation: 'middle',
+          nameTextStyle: {
+            verticalAlign: 'middle'
+          },
+          offset: 0,
+          splitLine: {
+            show: true,
+            interval: 0,
+            lineStyle: {
+              color: white,
+              width: 2
+            }
+          },
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.onLabelChange
+            }
+          }
+        },
+        yAxis: {
+          data: this.yAxisLabels,
+          z: 3,
+          type: 'category',
+          axisTick: false,
+          axisLabel: {
+            margin: 8
+          },
+          name: this.yAxisName,
+          nameLocation: 'center',
+          nameGap: 50,
+          nameRotate: 90,
+          splitLine: {
+            show: true,
+            interval: 0,
+            lineStyle: {
+              color: white,
+              width: 2
+            }
+          }
+        }
+      }, this.toolboxAdjustments, this.options);
+    },
+
+    legendStyle() {
+      return {
+        paddingLeft: this.computedOptions.grid.left,
+        marginTop: '-32px'
+      };
+    },
+
+    compiledOptions() {
+      return this.chart ? this.chart.getOption() : null;
+    },
+
+    seriesInfo() {
+      const {
+        min,
+        max
+      } = getRange(this.dataSeries);
+      const step = (max - min) / heatmapHues.length;
+      return heatmapHues.map((color, index) => {
+        const lowerBound = engineeringNotation(min + step * index);
+        const upperBound = engineeringNotation(min + step * (index + 1));
+        return {
+          name: `${lowerBound} - ${upperBound}`,
+          color,
+          type: 'solid'
+        };
+      });
+    }
+
+  },
+
+  beforeDestroy() {
+    this.chart.getDom().removeEventListener('mousemove', this.debouncedShowHideTooltip);
+    this.chart.getDom().removeEventListener('mouseout', this.debouncedShowHideTooltip);
+  },
+
+  methods: {
+    defaultFormatTooltipText(params) {
+      const {
+        xLabels,
+        tooltipContent
+      } = getDefaultTooltipContent(params, this.computedOptions.yAxis.name);
+      this.$set(this.tooltip, 'content', tooltipContent);
+      this.tooltip.title = xLabels.join(', ');
+    },
+
+    onCreated(chart) {
+      chart.getDom().addEventListener('mousemove', this.debouncedShowHideTooltip);
+      chart.getDom().addEventListener('mouseout', this.debouncedShowHideTooltip);
+      this.chart = chart;
+      this.$emit('created', chart);
+    },
+
+    showHideTooltip(mouseEvent) {
+      this.tooltip.show = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
+    },
+
+    onLabelChange(params) {
+      this.selectedFormatTooltipText(params);
+      const {
+        seriesData = []
+      } = params;
+
+      if (seriesData.length && seriesData[0].value) {
+        const {
+          seriesId,
+          value
+        } = seriesData[0];
+        const [left, top] = this.chart.convertToPixel({
+          seriesId
+        }, value);
+        this.tooltip = { ...this.tooltip,
+          left: `${left + TOOLTIP_LEFT_OFFSET}px`,
+          top: `${top}px`
+        };
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-heatmap"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.computedOptions},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.tooltip.show,"chart":_vm.chart,"top":_vm.tooltip.top,"left":_vm.tooltip.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):_c('div',[_vm._v("\n        "+_vm._s(_vm.tooltip.title)+"\n        "),(_vm.computedOptions.xAxis.name)?[_vm._v("("+_vm._s(_vm.computedOptions.xAxis.name)+")")]:_vm._e()],2)]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltip.content}})],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText}}):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/index.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/index.js
new file mode 100644
index 00000000000000..fb1d43fb663310
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/heatmap/index.js
@@ -0,0 +1,2 @@
+import Heatmap from './heatmap';
+export { default } from './heatmap';
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/legend/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/legend/examples/index.js
new file mode 100644
index 00000000000000..63579f68eb75cf
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/legend/examples/index.js
@@ -0,0 +1,22 @@
+import LegendBasicExample from './legend.basic.example';
+import LegendToggledExample from './legend.toggled.example';
+
+var index = [{
+  name: 'Basic',
+  items: [{
+    id: 'chart-legend-basic',
+    name: 'Basic',
+    description: 'Basic Chart Legend',
+    component: LegendBasicExample
+  }]
+}, {
+  name: 'Toggled',
+  items: [{
+    id: 'chart-legend-toggled',
+    name: 'Toggled',
+    description: 'Toggled Chart Legend',
+    component: LegendToggledExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/legend/examples/legend.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/legend/examples/legend.basic.example.js
new file mode 100644
index 00000000000000..d8260f4963cec0
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/legend/examples/legend.basic.example.js
@@ -0,0 +1,93 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      chart: null,
+      options: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        // Generate the series with generateSeriesData() after
+        // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/754
+        // gets implemented
+        series: [{
+          color: '#1f75cb',
+          data: [820, 932, 960, 1150, 1290, 1330, 1390],
+          name: 'Series 1',
+          showSymbol: true,
+          type: 'line'
+        }, {
+          color: '#108548',
+          data: [1640, 1864, 1920, 2300, 2580, 2660, 2780],
+          name: 'Series 2',
+          showSymbol: true,
+          type: 'line'
+        }]
+      }
+    };
+  },
+
+  computed: {
+    seriesData() {
+      return this.options.series.map(series => ({
+        type: 'solid',
+        name: series.name,
+        color: series.color,
+        data: series.data
+      }));
+    }
+
+  },
+  methods: {
+    onCreated(chart) {
+      this.chart = chart;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-chart',{attrs:{"options":_vm.options},on:{"created":_vm.onCreated}}),_vm._v(" "),(_vm.chart)?_c('gl-chart-legend',{attrs:{"chart":_vm.chart,"series-info":_vm.seriesData}}):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/legend/examples/legend.toggled.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/legend/examples/legend.toggled.example.js
new file mode 100644
index 00000000000000..2b684f11cbc484
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/legend/examples/legend.toggled.example.js
@@ -0,0 +1,100 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      chart: null,
+      options: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        // Generate the series with generateSeriesData() after
+        // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/754
+        // gets implemented
+        series: [{
+          color: '#1f75cb',
+          data: [820, 932, 960, 1150, 1290, 1330, 1390],
+          name: 'Toggled Series 1',
+          showSymbol: true,
+          type: 'line'
+        }, {
+          color: '#108548',
+          data: [1640, 1864, 1920, 2300, 2580, 2660, 2780],
+          name: 'Series 2',
+          showSymbol: true,
+          type: 'line'
+        }]
+      }
+    };
+  },
+
+  computed: {
+    seriesData() {
+      return this.options.series.map(series => ({
+        type: 'solid',
+        name: series.name,
+        color: series.color,
+        data: series.data
+      }));
+    }
+
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      document.querySelector('#js-chart-legend [role=button]').click();
+    });
+  },
+
+  methods: {
+    onCreated(chart) {
+      this.chart = chart;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-chart',{attrs:{"options":_vm.options},on:{"created":_vm.onCreated}}),_vm._v(" "),(_vm.chart)?_c('gl-chart-legend',{attrs:{"id":"js-chart-legend","chart":_vm.chart,"series-info":_vm.seriesData}}):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/legend/legend.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/legend/legend.documentation.js
new file mode 100644
index 00000000000000..3b65bdf3523db6
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/legend/legend.documentation.js
@@ -0,0 +1,21 @@
+import examples from './examples';
+
+var description = "";
+
+var legend_documentation = {
+  description,
+  examples,
+  propsInfo: {
+    averageText: {
+      additionalInfo: 'Text for data average (overridden by prop if needed for internationalization)'
+    },
+    maxText: {
+      additionalInfo: 'Text for max amount (overridden by prop if needed for internationalization)'
+    },
+    layout: {
+      additionalInfo: 'Sets the display layout'
+    }
+  }
+};
+
+export default legend_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/legend/legend.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/legend/legend.js
new file mode 100644
index 00000000000000..f2c5f033a75708
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/legend/legend.js
@@ -0,0 +1,189 @@
+import * as echarts from 'echarts';
+import { defaultFontSize } from '../../../utils/charts/config';
+import { LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_MIN_TEXT, LEGEND_MAX_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
+import { engineeringNotation, average } from '../../../utils/number_utils';
+import GlTruncate from '../../utilities/truncate/truncate';
+import GlChartSeriesLabel from '../series_label/series_label';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const gray200 = '#bfbfbf';
+
+var script = {
+  components: {
+    GlChartSeriesLabel,
+    GlTruncate
+  },
+  props: {
+    chart: {
+      type: Object,
+      required: true,
+
+      validator(chart) {
+        return Object.is(chart, echarts.getInstanceByDom(chart.getDom()));
+      }
+
+    },
+    seriesInfo: {
+      type: Array,
+      required: true,
+
+      validator(seriesInfo) {
+        return seriesInfo.every(series => series.type && series.name && series.color);
+      }
+
+    },
+    textStyle: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    averageText: {
+      type: String,
+      required: false,
+      default: LEGEND_AVERAGE_TEXT
+    },
+    currentText: {
+      type: String,
+      required: false,
+      default: LEGEND_CURRENT_TEXT
+    },
+    minText: {
+      type: String,
+      required: false,
+      default: LEGEND_MIN_TEXT
+    },
+    maxText: {
+      type: String,
+      required: false,
+      default: LEGEND_MAX_TEXT
+    },
+    layout: {
+      type: String,
+      required: false,
+      default: LEGEND_LAYOUT_INLINE,
+
+      validator(layout) {
+        return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
+      }
+
+    }
+  },
+
+  data() {
+    return {
+      disabledSeries: {}
+    };
+  },
+
+  computed: {
+    fontStyle() {
+      return {
+        fontFamily: this.textStyle.fontFamily || 'sans-serif',
+        fontSize: `${this.textStyle.fontSize || defaultFontSize}px`
+      };
+    }
+
+  },
+  methods: {
+    sanitizeSeriesData(seriesData) {
+      var _seriesData$filter;
+
+      return (_seriesData$filter = seriesData === null || seriesData === void 0 ? void 0 : seriesData.filter(d => !Number.isNaN(d))) !== null && _seriesData$filter !== void 0 ? _seriesData$filter : [];
+    },
+
+    seriesAverage(seriesData) {
+      const sanitized = this.sanitizeSeriesData(seriesData);
+      return engineeringNotation(average(...sanitized));
+    },
+
+    seriesMax(seriesData) {
+      const sanitized = this.sanitizeSeriesData(seriesData);
+      return engineeringNotation(Math.max(...sanitized));
+    },
+
+    seriesMin(seriesData) {
+      const sanitized = this.sanitizeSeriesData(seriesData);
+      return engineeringNotation(Math.min(...sanitized));
+    },
+
+    seriesLast(seriesData) {
+      const sanitized = this.sanitizeSeriesData(seriesData);
+      return engineeringNotation(sanitized[sanitized.length - 1]);
+    },
+
+    seriesNameIsLong(seriesName) {
+      return seriesName.length > 120;
+    },
+
+    handleClick(name, key) {
+      this.chart.dispatchAction({
+        type: 'legendToggleSelect',
+        name
+      });
+      this.disabledSeries = { ...this.disabledSeries,
+        [key]: !this.disabledSeries[key]
+      };
+    },
+
+    handleMouseEnter(name) {
+      this.chart.dispatchAction({
+        type: 'highlight',
+        seriesName: name
+      });
+    },
+
+    handleMouseLeave(name) {
+      this.chart.dispatchAction({
+        type: 'downplay',
+        seriesName: name
+      });
+    },
+
+    getColor(color, key) {
+      return this.disabledSeries[key] ? gray200 : color;
+    }
+
+  },
+  legendLayoutTypes: {
+    LEGEND_LAYOUT_INLINE,
+    LEGEND_LAYOUT_TABLE
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.layout === _vm.$options.legendLayoutTypes.LEGEND_LAYOUT_INLINE)?[_c('div',{staticClass:"gl-legend-inline"},_vm._l((_vm.seriesInfo),function(series,key){return _c('div',{key:key,staticClass:"gl-legend-inline-series",class:{ 'text-muted': _vm.disabledSeries[key], 'w-100': _vm.seriesNameIsLong(series.name) },style:(_vm.fontStyle),attrs:{"role":"button"},on:{"click":function($event){return _vm.handleClick(series.name, key)},"mouseenter":function($event){return _vm.handleMouseEnter(series.name)},"mouseleave":function($event){return _vm.handleMouseLeave(series.name)}}},[_c('gl-chart-series-label',{staticClass:"gl-legend-inline-series-label",class:{ 'w-75': _vm.seriesNameIsLong(series.name) },attrs:{"color":_vm.getColor(series.color, key),"type":series.type}},[_c('gl-truncate',{staticClass:"gl-font-weight-bold",attrs:{"text":series.name}})],1),_vm._v(" "),(series.data && series.data.length)?_c('span',{class:{ 'gl-white-space-nowrap': _vm.seriesNameIsLong(series.name) }},[_vm._v("\n          "+_vm._s(_vm.averageText)+": "+_vm._s(_vm.seriesAverage(series.data))+" · "+_vm._s(_vm.maxText)+":\n          "+_vm._s(_vm.seriesMax(series.data))+"\n        ")]):_vm._e()],1)}),0)]:_vm._e(),_vm._v(" "),(_vm.layout === _vm.$options.legendLayoutTypes.LEGEND_LAYOUT_TABLE)?[_c('div',{staticClass:"gl-legend-tabular",style:(_vm.fontStyle)},[_c('header',{staticClass:"gl-legend-tabular-header"},[_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.minText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.maxText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.averageText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.currentText))])]),_vm._v(" "),_c('section',{staticClass:"gl-legend-tabular-body"},_vm._l((_vm.seriesInfo),function(series,key){return _c('div',{key:key,staticClass:"gl-legend-tabular-row",class:{ 'text-muted': _vm.disabledSeries[key] },style:(_vm.fontStyle),attrs:{"role":"button"},on:{"click":function($event){return _vm.handleClick(series.name, key)},"mouseenter":function($event){return _vm.handleMouseEnter(series.name)},"mouseleave":function($event){return _vm.handleMouseLeave(series.name)}}},[_c('div',{staticClass:"gl-legend-tabular-title-cell"},[_c('gl-chart-series-label',{style:(_vm.fontStyle),attrs:{"color":_vm.getColor(series.color, key),"type":series.type}},[_c('gl-truncate',{staticClass:"gl-font-weight-bold",attrs:{"text":series.name}})],1)],1),_vm._v(" "),(_vm.sanitizeSeriesData(series.data).length)?[_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesMin(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesMax(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesAverage(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesLast(series.data)))])]:[_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")])]],2)}),0)])]:_vm._e()],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/line/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/line/examples/index.js
new file mode 100644
index 00000000000000..b2de879897a6dc
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/line/examples/index.js
@@ -0,0 +1,19 @@
+import LineBasicExample from './line.basic.example';
+import LineSeriesExample from './line.series.example';
+
+var index = [{
+  name: 'Basic',
+  items: [{
+    id: 'line-basic',
+    name: 'Basic',
+    description: 'Basic line chart',
+    component: LineBasicExample
+  }, {
+    id: 'line-basic-plus',
+    name: 'Basic plus custom series',
+    description: 'Basic line chart with custom series added',
+    component: LineSeriesExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/line/examples/line.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/line/examples/line.basic.example.js
new file mode 100644
index 00000000000000..7b9bdc7a106ef7
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/line/examples/line.basic.example.js
@@ -0,0 +1,45 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-line-chart',{attrs:{"data":[
+    {
+      name: 'Values',
+      data: [
+        [0, 5],
+        [4, 3],
+        [8, 10] ],
+    } ]}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/line/examples/line.series.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/line/examples/line.series.example.js
new file mode 100644
index 00000000000000..c4c05ae6edf7ec
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/line/examples/line.series.example.js
@@ -0,0 +1,53 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-line-chart',{attrs:{"data":[
+    {
+      name: 'Values',
+      data: [
+        [0, 5],
+        [4, 3],
+        [8, 10] ],
+    } ],"option":{
+    series: [
+      {
+        type: 'scatter',
+        data: [
+          [2, 5],
+          [6, 10] ],
+      } ],
+  }}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/line/line.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/line/line.documentation.js
new file mode 100644
index 00000000000000..63defb6416c877
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/line/line.documentation.js
@@ -0,0 +1,11 @@
+import examples from './examples';
+
+var description = "### Line Chart\n\nThis is a basic line chart.\n\n### Implementation Details\n\nThis component wraps the Gitlab UI `chart` component, which in turn wraps the ECharts component.\n\nSee the [chart](./?path=/story/charts-chart--default) component for more info.\n";
+
+var line_documentation = {
+  followsDesignSystem: false,
+  description,
+  examples
+};
+
+export default line_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/line/line.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/line/line.js
new file mode 100644
index 00000000000000..78e1795281b193
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/line/line.js
@@ -0,0 +1,362 @@
+import merge from 'lodash/merge';
+import defaultChartOptions, { symbolSize, lineStyle, getThresholdConfig, generateAnnotationSeries, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid, getDefaultTooltipContent } from '../../../utils/charts/config';
+import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, DATA_TOOLTIP_LEFT_OFFSET, ANNOTATION_TOOLTIP_TOP_OFFSET } from '../../../utils/charts/constants';
+import { colorFromDefaultPalette } from '../../../utils/charts/theme';
+import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
+import { debounceByAnimationFrame } from '../../../utils/utils';
+import ToolboxMixin from '../../mixins/toolbox_mixin';
+import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
+import Chart from '../chart/chart';
+import ChartLegend from '../legend/legend';
+import ChartTooltip from '../tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const gray200 = '#bfbfbf';
+
+/**
+ * Line charts as of %12.10 support annotations.
+ * Annotations is composed of a dotted line and an arrow
+ * at the bottom. The dotted line is constructed
+ * with markLine and arrows with markPoint. Most of this
+ * logic is in GitLab and should be eventually moved to
+ * GitLab UI https://gitlab.com/gitlab-org/gitlab/-/issues/213390.
+ *
+ * Similar to how custom tooltips are displayed when line chart
+ * is hovered, a tooltip should be displayed when the annotation
+ * arrow is hovered. This component adds event listeners
+ * to figure out if mouse is hovered on charts to show tooltips.
+ * While that works for data points inside the grid, for arrows
+ * that live right under the chart, we use eCharts inbuilt
+ * event listeners to detect hover. Given this limitation,
+ * we use a separate tooltip for data point and arrow.
+ */
+var script = {
+  components: {
+    Chart,
+    ChartLegend,
+    ChartTooltip,
+    TooltipDefaultFormat
+  },
+  mixins: [ToolboxMixin],
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Array,
+      required: true
+    },
+    option: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    thresholds: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    annotations: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    includeLegendAvgMax: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    formatTooltipText: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    legendAverageText: {
+      type: String,
+      required: false,
+      default: LEGEND_AVERAGE_TEXT
+    },
+    legendMaxText: {
+      type: String,
+      required: false,
+      default: LEGEND_MAX_TEXT
+    },
+    legendMinText: {
+      type: String,
+      required: false,
+      default: LEGEND_MIN_TEXT
+    },
+    legendCurrentText: {
+      type: String,
+      required: false,
+      default: LEGEND_CURRENT_TEXT
+    },
+    legendLayout: {
+      type: String,
+      required: false,
+      default: LEGEND_LAYOUT_INLINE,
+
+      validator(layout) {
+        return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
+      }
+
+    }
+  },
+
+  data() {
+    // Part of the tooltip related data can be
+    // moved into the tooltip component.
+    // Tracking that progress in
+    // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/618
+    return {
+      chart: null,
+      showDataTooltip: false,
+      dataTooltipTitle: '',
+      dataTooltipContent: {},
+      dataTooltipPosition: {
+        left: '0',
+        top: '0'
+      },
+      showAnnotationsTooltip: false,
+      annotationsTooltipTitle: '',
+      annotationsTooltipContent: '',
+      annotationsTooltipPosition: {
+        left: '0',
+        top: '0'
+      },
+      debouncedShowHideTooltip: debounceByAnimationFrame(this.showHideTooltip),
+      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
+    };
+  },
+
+  computed: {
+    series() {
+      const dataSeries = this.data.map((series, index) => {
+        const defaultColor = colorFromDefaultPalette(index);
+
+        const getColor = type => {
+          var _series$type$color, _series$type;
+
+          return (_series$type$color = (_series$type = series[type]) === null || _series$type === void 0 ? void 0 : _series$type.color) !== null && _series$type$color !== void 0 ? _series$type$color : defaultColor;
+        };
+
+        return merge({
+          showSymbol: true,
+          lineStyle: {
+            color: getColor('lineStyle')
+          },
+          itemStyle: {
+            color: getColor('itemStyle')
+          }
+        }, symbolSize, lineStyle, series, getThresholdConfig(this.thresholds));
+      }); // if annotation series exists, append it
+      // along with data series
+
+      if (this.annotationSeries) {
+        return [...dataSeries, this.annotationSeries];
+      }
+
+      return dataSeries;
+    },
+
+    annotationSeries() {
+      return generateAnnotationSeries(this.annotations);
+    },
+
+    options() {
+      const defaultLineChartOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.onLabelChange
+            }
+          },
+          axisTick: {
+            alignWithLabel: true,
+            show: true,
+            lineStyle: {
+              color: gray200
+            }
+          }
+        },
+        legend: {
+          show: false
+        }
+      };
+      const mergedOptions = merge({}, defaultChartOptions, defaultLineChartOptions, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments); // All chart options can be merged but series
+      // needs to be handled specially
+
+      return mergeSeriesToOptions(mergeAnnotationAxisToOptions(mergedOptions, this.hasAnnotations), this.series);
+    },
+
+    /**
+     * Annotations currently are passed as series options in monitoring dashboard.
+     * Once https://gitlab.com/gitlab-org/gitlab/-/issues/213390 is closed,
+     * annotations will be passed as props and not as series options.
+     *
+     * For backward compatibility, we're having to check for both.
+     */
+    hasAnnotations() {
+      return this.annotations.length !== 0 || seriesHasAnnotations(this.option.series);
+    },
+
+    shouldShowAnnotationsTooltip() {
+      return this.chart && this.hasAnnotations;
+    },
+
+    compiledOptions() {
+      return this.chart ? this.chart.getOption() : null;
+    },
+
+    legendStyle() {
+      return {
+        paddingLeft: `${grid.left}px`
+      };
+    },
+
+    seriesInfo() {
+      return this.compiledOptions.series.reduce((acc, series, index) => {
+        if (series.type === 'line') {
+          acc.push({
+            name: series.name,
+            type: series.lineStyle.type,
+            color: series.lineStyle.color || colorFromDefaultPalette(index),
+            data: this.includeLegendAvgMax ? series.data.map(data => data[1]) : undefined
+          });
+        }
+
+        return acc;
+      }, []);
+    }
+
+  },
+
+  beforeDestroy() {
+    this.chart.getDom().removeEventListener('mousemove', this.debouncedShowHideTooltip);
+    this.chart.getDom().removeEventListener('mouseout', this.debouncedShowHideTooltip);
+    this.chart.off('mouseout', this.onChartDataPointMouseOut);
+    this.chart.off('mouseover', this.onChartDataPointMouseOver);
+  },
+
+  methods: {
+    defaultFormatTooltipText(params) {
+      const {
+        xLabels,
+        tooltipContent
+      } = getDefaultTooltipContent(params, this.options.yAxis.name);
+      this.$set(this, 'dataTooltipContent', tooltipContent);
+      this.dataTooltipTitle = xLabels.join(', ');
+    },
+
+    defaultAnnotationTooltipText(params) {
+      var _params$data$tooltipD;
+
+      return {
+        title: params.data.xAxis,
+        content: (_params$data$tooltipD = params.data.tooltipData) === null || _params$data$tooltipD === void 0 ? void 0 : _params$data$tooltipD.content
+      };
+    },
+
+    onCreated(chart) {
+      // These listeners are used to show/hide data tooltips
+      // when the mouse is hovered over the parent container
+      // of echarts' svg element. This works only for data points
+      // and not markPoints.
+      chart.getDom().addEventListener('mousemove', this.debouncedShowHideTooltip);
+      chart.getDom().addEventListener('mouseout', this.debouncedShowHideTooltip); // eCharts inbuild mouse events
+      // https://echarts.apache.org/en/api.html#events.Mouse%20events
+      // is used to attach listeners to markPoints. These listeners
+      // are currently used for annotation arrows at the bottom of the chart.
+      // Because data points and annotations arrows are in different
+      // sections of the charts with their own mouseovers and mouseouts,
+      // there shouldn't be an overlapping situation where both tooltips
+      // are visible.
+
+      if (this.hasAnnotations) {
+        chart.on('mouseout', this.onChartDataPointMouseOut);
+        chart.on('mouseover', this.onChartDataPointMouseOver);
+      }
+
+      this.chart = chart;
+      this.$emit('created', chart);
+    },
+
+    showHideTooltip(mouseEvent) {
+      this.showDataTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
+      this.dataTooltipPosition = {
+        left: `${mouseEvent.zrX + DATA_TOOLTIP_LEFT_OFFSET}px`,
+        top: `${mouseEvent.zrY}px`
+      };
+    },
+
+    onChartDataPointMouseOut() {
+      this.showAnnotationsTooltip = false;
+    },
+
+    /**
+     * Check if the hovered data point is an annotation
+     * point to show the annotation tooltip.
+     */
+    onChartDataPointMouseOver(params) {
+      if (isDataPointAnnotation(params)) {
+        const {
+          event
+        } = params;
+        const toolTipFormatter = this.formatAnnotationsTooltipText || this.defaultAnnotationTooltipText;
+        const {
+          title = '',
+          content = ''
+        } = toolTipFormatter(params);
+        this.showAnnotationsTooltip = true;
+        this.annotationsTooltipTitle = title;
+        this.annotationsTooltipContent = content;
+        this.annotationsTooltipPosition = {
+          left: `${event.event.zrX}px`,
+          top: `${event.event.zrY + ANNOTATION_TOOLTIP_TOP_OFFSET}px`
+        };
+      }
+    },
+
+    onLabelChange(params) {
+      this.selectedFormatTooltipText(params);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):_c('div',[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()],2)]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/examples/index.js
new file mode 100644
index 00000000000000..846ad3339483a6
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/examples/index.js
@@ -0,0 +1,13 @@
+import SeriesLabelBasicExample from './series_label.basic.example';
+
+var index = [{
+  name: 'Basic',
+  items: [{
+    id: 'series-label-basic',
+    name: 'Basic',
+    description: 'Basic Series Label',
+    component: SeriesLabelBasicExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/examples/series_label.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/examples/series_label.basic.example.js
new file mode 100644
index 00000000000000..953579f87f5e72
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/examples/series_label.basic.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-chart-series-label',{attrs:{"color":"#1F78D1"}},[_vm._v("Series Name")])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/series_label.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/series_label.documentation.js
new file mode 100644
index 00000000000000..e437a38cbd287a
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/series_label.documentation.js
@@ -0,0 +1,10 @@
+import examples from './examples';
+
+var description = "# Chart Series Label\n\nDisplays chart data series name as a label for chart legend, tooltip, etc.\n";
+
+var series_label_documentation = {
+  description,
+  examples
+};
+
+export default series_label_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/series_label.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/series_label.js
new file mode 100644
index 00000000000000..8a8811b9990a10
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/series_label/series_label.js
@@ -0,0 +1,111 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const makePathRect = (startX, startY, width, height) => `M${startX},${startY}H${startX + width}V${startY + height}H${startX}Z`;
+
+var script = {
+  props: {
+    color: {
+      type: String,
+      required: true
+    },
+    type: {
+      type: String,
+      required: false,
+      default: 'solid'
+    }
+  },
+
+  data() {
+    return {
+      labelLineHeight: 0
+    };
+  },
+
+  computed: {
+    pathContent() {
+      const width = this.$options.svgWidth;
+      const height = this.$options.svgHeight;
+
+      if (this.type === 'dashed') {
+        const dashWidth = Math.ceil(width / 3);
+        const firstDash = makePathRect(0, 0, dashWidth, height);
+        const secondDash = makePathRect(width - dashWidth, 0, dashWidth, height);
+        return `${firstDash}${secondDash}`;
+      }
+
+      return makePathRect(0, 0, width, height);
+    },
+
+    svgStyles() {
+      return {
+        fill: this.color,
+        transform: `translateY(${this.formatPixelDimension(this.svgYTranslationValue)})`,
+        width: 'auto'
+      };
+    },
+
+    svgYTranslationValue() {
+      const value = this.labelLineHeight / 2 - this.$options.svgHeight / 2;
+      return Math.round(value) || 0;
+    }
+
+  },
+
+  mounted() {
+    if (getComputedStyle && this.$refs.label) {
+      const computedStyle = getComputedStyle(this.$refs.label);
+      const lineHeight = computedStyle['line-height'].match(/(\d+)px/);
+
+      if (lineHeight !== null) {
+        this.labelLineHeight = parseFloat(lineHeight[1]);
+      }
+    }
+  },
+
+  methods: {
+    formatPixelDimension(dimension) {
+      return `${dimension}px`;
+    }
+
+  },
+  svgWidth: 16,
+  svgHeight: 4
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-series-label-container"},[(_vm.color.length)?_c('div',{staticClass:"gl-series-label-color"},[_c('svg',{style:(_vm.svgStyles),attrs:{"width":_vm.formatPixelDimension(_vm.$options.svgWidth),"height":_vm.formatPixelDimension(_vm.$options.svgHeight)}},[_c('path',{attrs:{"d":_vm.pathContent}})])]):_vm._e(),_vm._v(" "),_c('div',{ref:"label",staticClass:"gl-series-label-text"},[_vm._t("default")],2)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/index.js
new file mode 100644
index 00000000000000..be8af43339f898
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/index.js
@@ -0,0 +1,32 @@
+import SingleStatBadgeExample from './single_stat.badge.example';
+import SingleStatHoverExample from './single_stat.hover.example';
+import SingleStatIconExample from './single_stat.meta_icon.example';
+import SingleStatSimpleExample from './single_stat.simple.example';
+import SingleStatTitleIconExample from './single_stat.title_icon.example';
+
+var index = [{
+  name: 'Basic',
+  items: [{
+    id: 'simple',
+    name: 'Simple',
+    component: SingleStatSimpleExample
+  }, {
+    id: 'metaIcon',
+    name: 'Meta Icon',
+    component: SingleStatIconExample
+  }, {
+    id: 'badge',
+    name: 'Badge',
+    component: SingleStatBadgeExample
+  }, {
+    id: 'titleIcon',
+    name: 'Title Icon',
+    component: SingleStatTitleIconExample
+  }, {
+    id: 'hover',
+    name: 'Hover',
+    component: SingleStatHoverExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.badge.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.badge.example.js
new file mode 100644
index 00000000000000..e35e3eb27ea3fe
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.badge.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"row"},[_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Success stat","value":"100","variant":"success","meta-text":"passed","meta-icon":"status_success_solid"}})],1),_vm._v(" "),_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Warning stat","value":"1000","variant":"warning","meta-text":"warning","meta-icon":"status-alert"}})],1),_vm._v(" "),_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Danger stat","value":"100000","variant":"danger","meta-text":"failed","meta-icon":"status-failed"}})],1)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.hover.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.hover.example.js
new file mode 100644
index 00000000000000..07a49ead7acae8
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.hover.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"row"},[_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Single stat","value":"100","tabindex":"0"}})],1)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.meta_icon.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.meta_icon.example.js
new file mode 100644
index 00000000000000..40bcce2648874b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.meta_icon.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"row"},[_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Trend up","value":"100","variant":"success","meta-icon":"trend-up"}})],1),_vm._v(" "),_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Trend down","value":"100000","variant":"danger","meta-icon":"trend-down"}})],1)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.simple.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.simple.example.js
new file mode 100644
index 00000000000000..e465cba5bcca09
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.simple.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"row"},[_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Single stat","value":"100"}})],1)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.title_icon.example.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.title_icon.example.js
new file mode 100644
index 00000000000000..632e07dceabf06
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/examples/single_stat.title_icon.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"row"},[_c('div',{staticClass:"col-sm-4"},[_c('gl-single-stat',{attrs:{"title":"Likes","value":"100,000","title-icon":"heart"}})],1)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/single_stat.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/single_stat.documentation.js
new file mode 100644
index 00000000000000..98b1e59aa8fd1d
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/single_stat.documentation.js
@@ -0,0 +1,10 @@
+import examples from './examples';
+
+var description = "### Single Stat\n\nThe single stat component is used to show a single value. The color of the meta icon / badge is\ndetermined by the **variant** prop, which can be one of \"success\", \"warning\", \"danger\", \"info\",\n\"neutral\" or \"muted\" (default).\n\n#### Hover state\n\nYou can make the component focusable by adding a `tabindex=0` attribute to it. This will also apply\na hover state to the component.\n";
+
+var single_stat_documentation = {
+  examples,
+  description
+};
+
+export default single_stat_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/single_stat.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/single_stat.js
new file mode 100644
index 00000000000000..9aeab1c875b6e9
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/single_stat/single_stat.js
@@ -0,0 +1,132 @@
+import { badgeVariantOptions, variantCssColorMap } from '../../../utils/constants';
+import GlBadge from '../../base/badge/badge';
+import GlIcon from '../../base/icon/icon';
+import GlAnimatedNumber from '../../utilities/animated_number/animated_number';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlIcon,
+    GlBadge,
+    GlAnimatedNumber
+  },
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: String,
+      required: true
+    },
+    unit: {
+      type: [String, Number],
+      required: false,
+      default: null
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: badgeVariantOptions.muted,
+      validator: variant => Object.values(badgeVariantOptions).includes(variant)
+    },
+    titleIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    metaIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    metaText: {
+      type: String,
+      required: false,
+      default: null
+    },
+    shouldAnimate: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    animationDecimalPlaces: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      hideUnits: false
+    };
+  },
+
+  computed: {
+    showMetaIcon() {
+      return Boolean(this.metaIcon && !this.metaText);
+    },
+
+    showBadge() {
+      return Boolean(this.metaText);
+    },
+
+    showTitleIcon() {
+      return Boolean(this.titleIcon);
+    },
+
+    textColor() {
+      return variantCssColorMap[this.variant];
+    },
+
+    canAnimate() {
+      return this.shouldAnimate && !Number.isNaN(Number(this.value));
+    }
+
+  },
+  methods: {
+    setHideUnits(flag) {
+      this.hideUnits = flag;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({staticClass:"gl-single-stat gl-display-flex gl-flex-direction-column gl-p-2"},'div',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-text-gray-700 gl-mb-2"},[(_vm.showTitleIcon)?_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":_vm.titleIcon,"data-testid":"title-icon"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-font-base gl-font-weight-normal",attrs:{"data-testid":"title-text"}},[_vm._v(_vm._s(_vm.title))])],1),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-baseline gl-font-weight-bold gl-text-gray-900"},[_c('span',{staticClass:"gl-font-size-h-display",class:{ 'gl-mr-2': !_vm.unit },attrs:{"data-testid":"displayValue"}},[(_vm.canAnimate)?_c('gl-animated-number',{attrs:{"number":Number(_vm.value),"decimal-places":_vm.animationDecimalPlaces},on:{"animating":function($event){return _vm.setHideUnits(true)},"animated":function($event){return _vm.setHideUnits(false)}}}):_c('span',{attrs:{"data-testid":"non-animated-value"}},[_vm._v(_vm._s(_vm.value))])],1),_vm._v(" "),(_vm.unit)?_c('span',{staticClass:"gl-font-sm gl-mr-2 gl-transition-medium gl-opacity-10",class:{ 'gl-opacity-0!': _vm.hideUnits },attrs:{"data-testid":"unit"}},[_vm._v(_vm._s(_vm.unit))]):_vm._e(),_vm._v(" "),(_vm.showMetaIcon)?_c('gl-icon',{class:_vm.textColor,attrs:{"name":_vm.metaIcon,"data-testid":"meta-icon"}}):_vm._e(),_vm._v(" "),(_vm.showBadge)?_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))]):_vm._e()],1)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/sparkline/sparkline.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/sparkline/sparkline.documentation.js
new file mode 100644
index 00000000000000..750ba2038b97aa
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/sparkline/sparkline.documentation.js
@@ -0,0 +1,8 @@
+var description = "\nThis is a basic sparkline chart.\n\n### Implementation Details\n\nThis component wraps the Gitlab UI `chart` component, which in turn wraps the ECharts component.\n\nSee the [chart](./?path=/story/charts-chart--default) component for more info.\n";
+
+var sparkline_documentation = {
+  followsDesignSystem: false,
+  description
+};
+
+export default sparkline_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/sparkline/sparkline.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/sparkline/sparkline.js
new file mode 100644
index 00000000000000..6da372c06aea64
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/sparkline/sparkline.js
@@ -0,0 +1,229 @@
+import merge from 'lodash/merge';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import defaultChartOptions, { mergeSeriesToOptions, symbolSize } from '../../../utils/charts/config';
+import Chart from '../chart/chart';
+import ChartTooltip from '../tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const gridPadding = symbolSize / 2;
+var script = {
+  components: {
+    Chart,
+    ChartTooltip
+  },
+  directives: {
+    resizeObserver: GlResizeObserverDirective
+  },
+  props: {
+    /**
+     * The data that is used to plot the chart.
+     */
+    data: {
+      type: Array,
+      required: true
+    },
+
+    /**
+     * Controls the label that is shown within the chart's tooltip. Use it to describe your data.
+     */
+    tooltipLabel: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Sets the chart's height in pixel.
+     */
+    height: {
+      type: Number,
+      required: false,
+      default: 50
+    },
+
+    /**
+     * If enabled will show the value of the latest "y" data-point on the side right of the chart.
+     */
+    showLastYValue: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      chartInstance: null,
+      tooltip: {
+        show: false,
+        title: '',
+        content: '',
+        position: {
+          left: '0',
+          top: '0'
+        }
+      }
+    };
+  },
+
+  computed: {
+    options() {
+      const sparkLineChartOptions = {
+        grid: {
+          top: gridPadding,
+          bottom: gridPadding,
+          left: gridPadding,
+          right: gridPadding
+        },
+        xAxis: {
+          type: 'category',
+          show: false,
+          axisLabel: {
+            show: true
+          },
+          axisPointer: {
+            show: true,
+            type: 'none',
+            label: {
+              formatter: this.xAxisLabelFormatter
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          show: false,
+          min: 'datamin'
+        }
+      };
+      const mergedOptions = merge({}, defaultChartOptions, sparkLineChartOptions);
+      return mergeSeriesToOptions(mergedOptions, this.series);
+    },
+
+    series() {
+      const {
+        data
+      } = this;
+      return {
+        type: 'line',
+        symbol: 'circle',
+        hoverAnimation: false,
+        animation: true,
+        cursor: 'auto',
+        symbolSize,
+        markPoint: {
+          symbol: 'circle',
+          cursor: 'auto',
+          animation: false,
+          symbolSize,
+          data: [{
+            xAxis: data.length - 1,
+            yAxis: data[data.length - 1][1]
+          }]
+        },
+        data
+      };
+    },
+
+    lastYValue() {
+      const latestEntry = this.data.slice(-1)[0];
+      return latestEntry[1];
+    }
+
+  },
+  methods: {
+    onChartCreated(chartInstance) {
+      this.chartInstance = chartInstance;
+      /**
+       * Emitted when the chart is created.
+       * The payload contains the echarts instance.
+       * @event chartCreated
+       * @type {object}
+       */
+
+      this.$emit('chartCreated', chartInstance);
+    },
+
+    handleResize() {
+      this.chartInstance.resize();
+    },
+
+    hideTooltip() {
+      this.tooltip.show = false;
+    },
+
+    formatTooltipText(_ref) {
+      let [xValue, yValue] = _ref;
+      this.tooltip.title = xValue;
+      this.tooltip.content = yValue;
+    },
+
+    setTooltipPosition(data) {
+      const [left, top] = this.chartInstance.convertToPixel('grid', data);
+      this.tooltip.position = {
+        left: `${left}px`,
+        top: `${top}px`
+      };
+    },
+
+    // This function is called any time the axis pointer is changed (the black bubble showing which
+    // point on the line is selected). Note that it will not trigger if the axis pointer is removed,
+    // only when it changes from one point to another or is shown for the first time.
+    xAxisLabelFormatter(_ref2) {
+      let {
+        seriesData = []
+      } = _ref2;
+      // seriesData is an array of nearby data point coordinates
+      // seriesData[0] is the nearest point at which the tooltip is displayed
+      // https://echarts.apache.org/en/option.html#xAxis.axisPointer.label.formatter
+      const [firstEntry = {}] = seriesData;
+      const {
+        data
+      } = firstEntry;
+
+      if (data) {
+        this.tooltip.show = true;
+        this.formatTooltipText(data);
+        this.setTooltipPosition(data);
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-display-flex gl-align-items-center",on:{"mouseleave":_vm.hideTooltip}},[_vm._t("default"),_vm._v(" "),_c('div',{staticClass:"gl-flex-grow-1 gl-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onChartCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chartInstance)?_c('chart-tooltip',{style:({ pointerEvents: 'none' }),attrs:{"show":_vm.tooltip.show,"chart":_vm.chartInstance,"top":_vm.tooltip.position.top,"left":_vm.tooltip.position.left,"placement":"top"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',{staticClass:"gl-white-space-nowrap",attrs:{"data-testid":"tooltip-title"}},[_vm._v("\n          "+_vm._s(_vm.tooltip.title)+"\n        ")])]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-display-flex",attrs:{"data-testid":"tooltip-content"}},[(_vm.tooltipLabel)?_c('span',{staticClass:"gl-pr-6 gl-mr-auto"},[_vm._v(_vm._s(_vm.tooltipLabel))]):_vm._e(),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.tooltip.content))])])]},proxy:true}],null,false,2830367259)}):_vm._e()],1),_vm._v(" "),(_vm.showLastYValue)?_c('span',{staticClass:"gl-display-inline-flex gl-justify-content-center gl-ml-5",attrs:{"data-testid":"last-y-value"}},[_vm._v("\n    "+_vm._s(_vm.lastYValue)+"\n  ")]):_vm._e()],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/stacked_column/stacked_column.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/stacked_column/stacked_column.documentation.js
new file mode 100644
index 00000000000000..912d157d3f53d7
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/stacked_column/stacked_column.documentation.js
@@ -0,0 +1,8 @@
+var description = "The `presentation` property allows you to change between a stacked and tiled presentation style. It\nis only setup to accept `stacked` or `tiled` as values, the default value is `tiled`.\n\nThe `stacked` presentation allows to view multiple series of the same stack as a single column,\nwhile `tiled` presents the information in multiple columns for each series of a stack.\n\n`groupBy` is a property that defines how the data is going to be grouped by for each of the series\nthat the `data` property provides. For example if the `data` property has a total of 3 series, with\n7 elements each, `groupBy` could use a 7 element array to show 7 stacked bars or 7 groups of bars\ndepending on the preference set by the `presentation` property.\n";
+
+var stacked_column_documentation = {
+  followsDesignSystem: false,
+  description
+};
+
+export default stacked_column_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/stacked_column/stacked_column.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/stacked_column/stacked_column.js
new file mode 100644
index 00000000000000..ef174a1ac60ca4
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/stacked_column/stacked_column.js
@@ -0,0 +1,360 @@
+import merge from 'lodash/merge';
+import defaultChartOptions, { yAxis, generateBarSeries, generateLineSeries, gridWithSecondaryYAxis, grid, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
+import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, CHART_TYPE_LINE } from '../../../utils/charts/constants';
+import { colorFromDefaultPalette } from '../../../utils/charts/theme';
+import { columnOptions } from '../../../utils/constants';
+import { debounceByAnimationFrame } from '../../../utils/utils';
+import ToolboxMixin from '../../mixins/toolbox_mixin';
+import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
+import Chart from '../chart/chart';
+import ChartLegend from '../legend/legend';
+import ChartTooltip from '../tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const yAxisDefaults = { ...yAxis,
+  nameLocation: 'center',
+  axisTick: {
+    show: false
+  }
+};
+var script = {
+  components: {
+    Chart,
+    ChartTooltip,
+    ChartLegend,
+    TooltipDefaultFormat
+  },
+  mixins: [ToolboxMixin],
+  inheritAttrs: false,
+  props: {
+    bars: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    lines: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    secondaryData: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    option: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    presentation: {
+      type: String,
+      required: false,
+      default: 'stacked',
+      validator: value => ['stacked', 'tiled'].indexOf(value) !== -1
+    },
+    groupBy: {
+      type: Array,
+      required: true
+    },
+    xAxisType: {
+      type: String,
+      required: true,
+      validator: value => ['value', 'category', 'time', 'log'].indexOf(value) !== -1
+    },
+    xAxisTitle: {
+      type: String,
+      required: true
+    },
+    yAxisTitle: {
+      type: String,
+      required: true
+    },
+    secondaryDataTitle: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    seriesNames: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    legendAverageText: {
+      type: String,
+      required: false,
+      default: LEGEND_AVERAGE_TEXT
+    },
+    legendMaxText: {
+      type: String,
+      required: false,
+      default: LEGEND_MAX_TEXT
+    },
+    legendMinText: {
+      type: String,
+      required: false,
+      default: LEGEND_MIN_TEXT
+    },
+    legendCurrentText: {
+      type: String,
+      required: false,
+      default: LEGEND_CURRENT_TEXT
+    },
+    legendLayout: {
+      type: String,
+      required: false,
+      default: LEGEND_LAYOUT_INLINE,
+
+      validator(layout) {
+        return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
+      }
+
+    },
+    formatTooltipText: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    customPalette: {
+      type: Array,
+      required: false,
+      default: null
+    }
+  },
+
+  data() {
+    return {
+      chart: null,
+      showTooltip: false,
+      tooltipTitle: '',
+      tooltipContent: {},
+      tooltipPosition: {
+        left: '0',
+        top: '0'
+      },
+      debouncedMoveShowTooltip: debounceByAnimationFrame(this.moveShowTooltip)
+    };
+  },
+
+  computed: {
+    hasSecondaryAxis() {
+      return Boolean(this.secondaryData.length);
+    },
+
+    barSeries() {
+      return this.bars.map((_ref, index) => {
+        let {
+          name,
+          data
+        } = _ref;
+        const stack = this.presentation === 'stacked' ? this.groupBy : null;
+        const color = this.getColor(index);
+        return generateBarSeries({
+          stack,
+          name,
+          data,
+          color
+        });
+      });
+    },
+
+    lineSeries() {
+      const offset = this.bars.length;
+      return this.lines.map((_ref2, index) => {
+        let {
+          name,
+          data
+        } = _ref2;
+        const color = this.getColor(offset + index);
+        return generateLineSeries({
+          name,
+          data,
+          color
+        });
+      });
+    },
+
+    secondarySeries() {
+      const offset = this.bars.length + this.lines.length;
+      return this.secondaryData.map((_ref3, index) => {
+        let {
+          name,
+          data,
+          type,
+          stack = columnOptions.tiled
+        } = _ref3;
+        const color = this.getColor(offset + index);
+        return type === CHART_TYPE_LINE ? generateLineSeries({
+          color,
+          name,
+          data,
+          yAxisIndex: 1
+        }) : generateBarSeries({
+          color,
+          name,
+          data,
+          yAxisIndex: 1,
+          stack
+        });
+      });
+    },
+
+    series() {
+      return [...this.barSeries, ...this.lineSeries, ...this.secondarySeries];
+    },
+
+    options() {
+      const mergedOptions = merge({}, defaultChartOptions, {
+        grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
+        xAxis: {
+          boundaryGap: true,
+          axisLabel: {
+            margin: 20,
+            verticalAlign: 'bottom'
+          },
+          axisLine: {
+            show: false
+          },
+          axisPointer: {
+            show: true,
+            type: 'none',
+            label: {
+              formatter: this.onLabelChange
+            }
+          },
+          data: this.groupBy,
+          name: this.xAxisTitle,
+          type: this.xAxisType
+        },
+        yAxis: [{ ...yAxisDefaults,
+          name: this.yAxisTitle
+        }, { ...yAxisDefaults,
+          name: this.secondaryDataTitle,
+          show: this.hasSecondaryAxis
+        }],
+        legend: {
+          show: false
+        }
+      }, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments); // All chart options can be merged but series
+      // needs to be handled specially
+
+      return mergeSeriesToOptions(mergedOptions, this.series);
+    },
+
+    legendStyle() {
+      return {
+        paddingLeft: `${grid.left}px`
+      };
+    },
+
+    compiledOptions() {
+      return this.chart ? this.chart.getOption() : null;
+    },
+
+    seriesInfo() {
+      return this.compiledOptions.series.reduce((acc, series, index) => {
+        acc.push({
+          name: series.name,
+          type: series.type,
+          color: this.getColor(index),
+          data: series.data.map(data => data),
+          yAxisIndex: series.yAxisIndex
+        });
+        return acc;
+      }, []);
+    }
+
+  },
+
+  beforeDestroy() {
+    this.chart.getDom().removeEventListener('mousemove', this.debouncedMoveShowTooltip);
+    this.chart.getDom().removeEventListener('mouseout', this.debouncedMoveShowTooltip);
+  },
+
+  methods: {
+    getColor(index) {
+      var _this$customPalette;
+
+      return this.customPalette ? (_this$customPalette = this.customPalette) === null || _this$customPalette === void 0 ? void 0 : _this$customPalette[index] : colorFromDefaultPalette(index);
+    },
+
+    moveShowTooltip(mouseEvent) {
+      this.tooltipPosition = {
+        left: `${mouseEvent.zrX}px`,
+        top: `${mouseEvent.zrY}px`
+      };
+      this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
+    },
+
+    onCreated(chart) {
+      chart.getDom().addEventListener('mousemove', this.debouncedMoveShowTooltip);
+      chart.getDom().addEventListener('mouseout', this.debouncedMoveShowTooltip);
+      this.chart = chart;
+      this.$emit('created', chart);
+    },
+
+    defaultFormatTooltipText(params) {
+      const {
+        tooltipContent
+      } = params.seriesData.reverse().reduce((acc, bar) => {
+        acc.tooltipContent[bar.seriesName] = {
+          value: bar.value,
+          index: bar.seriesIndex,
+          color: this.getColor(bar.seriesIndex)
+        };
+        return acc;
+      }, {
+        tooltipContent: {}
+      });
+      this.tooltipTitle = params.value;
+      this.$set(this, 'tooltipContent', tooltipContent);
+    },
+
+    onLabelChange(params) {
+      if (this.formatTooltipText) {
+        this.formatTooltipText(params);
+      } else {
+        this.defaultFormatTooltipText(params);
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._t("tooltip-title",[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")])]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("tooltip-content",[_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})])],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/tooltip/tooltip.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/tooltip/tooltip.documentation.js
new file mode 100644
index 00000000000000..8667f95e7891c8
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/tooltip/tooltip.documentation.js
@@ -0,0 +1,8 @@
+var description = "### ECharts custom tooltip\n\nUses GitLab UI's `popover` component in lieu of echart's tooltip.\n";
+
+var tooltip_documentation = {
+  followsDesignSystem: false,
+  description
+};
+
+export default tooltip_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/charts/tooltip/tooltip.js b/app/assets/javascripts/gitlab-ui/dist/components/charts/tooltip/tooltip.js
new file mode 100644
index 00000000000000..74f49a5c1cc951
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/charts/tooltip/tooltip.js
@@ -0,0 +1,106 @@
+import * as echarts from 'echarts';
+import { uid } from '../../../utils/utils';
+import GlPopover from '../../base/popover/popover';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlPopover
+  },
+  inheritAttrs: false,
+  props: {
+    chart: {
+      type: Object,
+      required: true,
+
+      validator(chart) {
+        return Object.is(chart, echarts.getInstanceByDom(chart.getDom()));
+      }
+
+    },
+    id: {
+      type: String,
+      required: false,
+      default: () => uid()
+    },
+    top: {
+      type: String,
+      required: false,
+      default: null
+    },
+    bottom: {
+      type: String,
+      required: false,
+      default: null
+    },
+    left: {
+      type: String,
+      required: false,
+      default: null
+    },
+    right: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  computed: {
+    containerId() {
+      // if multiple tooltips are used in a chart component,
+      // `this.id` can be used to uniquely identify them
+      return `${this.chart.getDom().getAttribute('_echarts_instance_')}-tooltip-${this.id}`;
+    },
+
+    containerPosition() {
+      const props = ['top', 'bottom', 'left', 'right'];
+      return props.reduce((accumulator, prop) => {
+        const position = this[prop];
+
+        if (position) {
+          accumulator[prop] = position;
+        }
+
+        return accumulator;
+      }, {});
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"gl-chart-tooltip",staticStyle:{"width":"1px","height":"1px"},style:(_vm.containerPosition),attrs:{"id":_vm.containerId}}),_vm._v(" "),_c('gl-popover',_vm._b({attrs:{"target":_vm.containerId,"container":_vm.containerId,"triggers":""},scopedSlots:_vm._u([(_vm.$scopedSlots.title)?{key:"title",fn:function(){return [_vm._t("title")]},proxy:true}:null],null,true)},'gl-popover',_vm.$attrs,false),[_vm._v(" "),_vm._t("default")],2)],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/editors/rich_text_editor/rich_text_editor.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/editors/rich_text_editor/rich_text_editor.documentation.js
new file mode 100644
index 00000000000000..9ce1d0eea35be4
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/editors/rich_text_editor/rich_text_editor.documentation.js
@@ -0,0 +1,12 @@
+var rich_text_editor = "<!--\nBriefly describe the component's purpose here.\nThis should correspond to the short description in Pajamas' website: https://design.gitlab.com/components/status/\n-->\n\nThe Rich Text Editor is a UI component that provides a WYSIWYG editing\nexperience for[GitLab Flavored Markdown](https://docs.gitlab.com/ee/user/markdown.md#gitlab-flavored-markdown-gfm)\n(GFM) in the GitLab application.\nIt also serves as the foundation for implementing Markdown-focused editors that target other engines,\nlike static site generators.\n\n<!-- Provide technical information on how to use the component, add code examples if relevant. -->\n\n<!--\n## Dos and don'ts\n\nIf relevant, describe how the component is expected to be used, and how it's not.\n-->\n\n<!--\n## Browser compatibility\n\nIf the component requires any polyfill or fallback on certain browsers, describe those requirements\nhere.\n-->\n\n<!--\n## Edge cases\n\nIf the component has some known limitations, describe them here.\n-->\n\n<!--\n## Deprecation warning\n\nIf and when this component introduced API changes that would require deprecating old APIs, describe\nthe changes here, and provide a migration paths to the new API.\n-->\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': rich_text_editor
+});
+
+var rich_text_editor_documentation = {
+  description
+};
+
+export default rich_text_editor_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/editors/rich_text_editor/rich_text_editor.js b/app/assets/javascripts/gitlab-ui/dist/components/editors/rich_text_editor/rich_text_editor.js
new file mode 100644
index 00000000000000..10757240182780
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/editors/rich_text_editor/rich_text_editor.js
@@ -0,0 +1,41 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._v("This is a rich-text-editor")])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/mixins/button_mixin.js b/app/assets/javascripts/gitlab-ui/dist/components/mixins/button_mixin.js
new file mode 100644
index 00000000000000..e4bda86597ccf8
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/mixins/button_mixin.js
@@ -0,0 +1,12 @@
+import { buttonSizeOptionsMap } from '../../utils/constants';
+
+const ButtonMixin = {
+  computed: {
+    buttonSize() {
+      return buttonSizeOptionsMap[this.size];
+    }
+
+  }
+};
+
+export { ButtonMixin };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/mixins/safe_link_mixin.js b/app/assets/javascripts/gitlab-ui/dist/components/mixins/safe_link_mixin.js
new file mode 100644
index 00000000000000..c6aa83218f119d
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/mixins/safe_link_mixin.js
@@ -0,0 +1,31 @@
+import { SafeLinkDirective } from '../../directives/safe_link/safe_link';
+
+const SafeLinkMixin = {
+  directives: {
+    SafeLink: SafeLinkDirective
+  },
+  props: {
+    isUnsafeLink: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // This prevents bootstrap-vue from setting target="_self"
+    // when target attribute is not present
+    target: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  computed: {
+    safeLinkConfig() {
+      return {
+        skipSanitization: this.isUnsafeLink
+      };
+    }
+
+  }
+};
+
+export { SafeLinkMixin };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/mixins/toolbox_mixin.js b/app/assets/javascripts/gitlab-ui/dist/components/mixins/toolbox_mixin.js
new file mode 100644
index 00000000000000..16160c028925ea
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/mixins/toolbox_mixin.js
@@ -0,0 +1,46 @@
+import { getToolboxConfig } from '../../utils/charts/config';
+
+/**
+ *  Toolbox mixin for the chart based components
+ *  this allows for the toolbox that echarts already includes to be rendered,
+ *  the mixin also handles the icon customization for the 4 different default
+ *  toolbox options
+ */
+var toolbox_mixin = {
+  props: {
+    showToolbox: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    toolboxZoomIconPath: {
+      type: String,
+      required: false
+    },
+    toolboxBackIconPath: {
+      type: String,
+      required: false
+    },
+    toolboxRestoreIconPath: {
+      type: String,
+      required: false
+    },
+    toolboxSaveAsImageIconPath: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    toolboxAdjustments() {
+      return this.showToolbox ? getToolboxConfig({
+        restoreIconPath: this.toolboxRestoreIconPath,
+        saveImageIconPath: this.toolboxSaveAsImageIconPath,
+        zoomIconPath: this.toolboxZoomIconPath,
+        backIconPath: this.toolboxBackIconPath
+      }) : {};
+    }
+
+  }
+};
+
+export default toolbox_mixin;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/mixins/tooltip_mixin.js b/app/assets/javascripts/gitlab-ui/dist/components/mixins/tooltip_mixin.js
new file mode 100644
index 00000000000000..b3e80eb32fac36
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/mixins/tooltip_mixin.js
@@ -0,0 +1,22 @@
+import { tooltipActionEvents } from '../../utils/constants';
+
+var tooltip_mixin = (tooltipRefName => ({
+  mounted() {
+    /**
+     * Pass through the events to programmatically open, close, enable
+     * and disable a tooltip or a popover.
+     *
+     * References
+     * https://bootstrap-vue.org/docs/components/popover#programmatically-show-and-hide-popover
+     * https://bootstrap-vue.org/docs/components/tooltip#programmatically-show-and-hide-tooltip
+     */
+    tooltipActionEvents.forEach(event => this.$on(event, () => this.$refs[tooltipRefName].$emit(event)));
+  },
+
+  beforeDestroy() {
+    tooltipActionEvents.forEach(event => this.$off(event));
+  }
+
+}));
+
+export default tooltip_mixin;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/regions/dashboard_skeleton/dashboard_skeleton.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/regions/dashboard_skeleton/dashboard_skeleton.documentation.js
new file mode 100644
index 00000000000000..01d8f7aa511c11
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/regions/dashboard_skeleton/dashboard_skeleton.documentation.js
@@ -0,0 +1,7 @@
+var description = "## Dashboard Skeleton\n\nThis is a skeleton loading component for a dashboards page. Renders three cards, but can be adjusted\nbased on the `cards` prop.\n";
+
+var dashboard_skeleton_documentation = {
+  description
+};
+
+export default dashboard_skeleton_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/regions/dashboard_skeleton/dashboard_skeleton.js b/app/assets/javascripts/gitlab-ui/dist/components/regions/dashboard_skeleton/dashboard_skeleton.js
new file mode 100644
index 00000000000000..cded51a18feb13
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/regions/dashboard_skeleton/dashboard_skeleton.js
@@ -0,0 +1,52 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  props: {
+    /**
+     * Number of cards to be shown
+     */
+    cards: {
+      type: Number,
+      required: false,
+      default: 3
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"row dashboard-cards"},_vm._l((_vm.cards),function(index){return _c('div',{key:index,staticClass:"col-12 col-md-6 col-xl-4 px-2"},[_c('div',{staticClass:"rounded-top py-4 bg-light"}),_vm._v(" "),_vm._m(0,true)])}),0)};
+var __vue_staticRenderFns__ = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dashboard-card-body card-body bg-secondary"},[_c('div',{staticClass:"row"},[_c('div',{staticClass:"col-1 align-self-center"},[_c('div',{staticClass:"bg-light p-3 rounded-circle"})]),_vm._v(" "),_c('div',{staticClass:"col-10 col-sm-6 align-self-center pl-4"},[_c('div',{staticClass:"dashboard-card-skeleton-info bg-light py-2 w-100 mb-2"}),_vm._v(" "),_c('div',{staticClass:"dashboard-card-skeleton-info bg-light py-2 w-100"})]),_vm._v(" "),_c('div',{staticClass:"col-sm-5 align-self-center d-none d-sm-block"},[_c('div',{staticClass:"dashboard-card-skeleton-info bg-light py-2 w-100"})])]),_vm._v(" "),_c('div',{staticClass:"dashboard-card-footer bg-light py-3 mt-3"})])}];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/regions/empty_state/empty_state.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/regions/empty_state/empty_state.documentation.js
new file mode 100644
index 00000000000000..2dc40c06c10e51
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/regions/empty_state/empty_state.documentation.js
@@ -0,0 +1,7 @@
+var description = "### Buttons\n\nYou can either have a primary button, a secondary button, or both.\nButtons require both text a link in order for the button to render.\n";
+
+var empty_state_documentation = {
+  description
+};
+
+export default empty_state_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/regions/empty_state/empty_state.js b/app/assets/javascripts/gitlab-ui/dist/components/regions/empty_state/empty_state.js
new file mode 100644
index 00000000000000..d94d68ca128c28
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/regions/empty_state/empty_state.js
@@ -0,0 +1,148 @@
+import GlButton from '../../base/button/button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlButton
+  },
+  props: {
+    /**
+     * The title (heading) of the empty state.
+     */
+    title: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * The illustration's URL.
+     */
+    svgPath: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * The illustration's height used to prevent content reflow.
+     */
+    svgHeight: {
+      type: Number,
+      required: false,
+      default: null
+    },
+
+    /**
+     * The desciption/body text of the empty state.
+     */
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * The primary GlButton's href.
+     */
+    primaryButtonLink: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * The primary GlButton's text. If falsey, the button is not shown.
+     */
+    primaryButtonText: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * The secondary GlButton's href.
+     */
+    secondaryButtonLink: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * The secondary GlButton's text. If falsey, the button is not shown.
+     */
+    secondaryButtonText: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * Determines whether to render the compact layout.
+     */
+    compact: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    height() {
+      return this.shouldPreventImageReflow ? this.svgHeight : null;
+    },
+
+    shouldPreventImageReflow() {
+      return Boolean(this.svgHeight);
+    },
+
+    shouldRenderPrimaryButton() {
+      return Boolean(this.primaryButtonLink && this.primaryButtonText);
+    },
+
+    shouldRenderSecondaryButton() {
+      return Boolean(this.secondaryButtonLink && this.secondaryButtonText);
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:"gl-display-flex",class:{
+    'empty-state gl-text-center gl-flex-direction-column': !_vm.compact,
+    'gl-flex-direction-row': _vm.compact,
+  }},[_c('div',{class:{ 'gl-display-none gl-sm-display-block gl-px-4': _vm.compact, 'gl-max-w-full': !_vm.compact }},[(_vm.svgPath)?_c('div',{staticClass:"svg-250",class:{ 'svg-content': !_vm.compact }},[_c('img',{staticClass:"gl-max-w-full",attrs:{"src":_vm.svgPath,"alt":"","role":"img","height":_vm.height}})]):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto'},[_c('div',{staticClass:"gl-mx-auto gl-my-0",class:{ 'gl-p-5': !_vm.compact }},[_c('h1',{ref:"title",staticClass:"gl-font-size-h-display gl-line-height-36",class:_vm.compact ? 'h5' : 'h4'},[_vm._v("\n        "+_vm._s(_vm.title)+"\n      ")]),_vm._v(" "),(_vm.description || _vm.$scopedSlots.description)?_c('p',{ref:"description",staticClass:"gl-mt-3"},[_vm._t("description",[_vm._v("\n          "+_vm._s(_vm.description)+"\n        ")])],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-wrap",class:{ 'gl-justify-content-center': !_vm.compact }},[_vm._t("actions",[(_vm.shouldRenderPrimaryButton)?_c('gl-button',{staticClass:"gl-mb-3",class:_vm.compact ? 'gl-mr-3' : 'gl-mx-2',attrs:{"variant":"confirm","href":_vm.primaryButtonLink}},[_vm._v(_vm._s(_vm.primaryButtonText))]):_vm._e(),_vm._v(" "),(_vm.shouldRenderSecondaryButton)?_c('gl-button',{staticClass:"gl-mb-3 gl-mr-3",class:{ 'gl-mx-2!': !_vm.compact },attrs:{"href":_vm.secondaryButtonLink}},[_vm._v(_vm._s(_vm.secondaryButtonText)+"\n          ")]):_vm._e()])],2)])])])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/shared_components/charts/tooltip_default_format.js b/app/assets/javascripts/gitlab-ui/dist/components/shared_components/charts/tooltip_default_format.js
new file mode 100644
index 00000000000000..72513548889a37
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/shared_components/charts/tooltip_default_format.js
@@ -0,0 +1,52 @@
+import SeriesLabel from '../../charts/series_label/series_label';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    SeriesLabel
+  },
+  props: {
+    tooltipContent: {
+      type: Object,
+      required: true
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.tooltipContent),function(value,label){return _c('div',{key:("" + label + (value.value)),staticClass:"gl-charts-tooltip-default-format-series"},[_c('series-label',{staticClass:"gl-charts-tooltip-default-format-series-label",attrs:{"color":value.color}},[_vm._v("\n      "+_vm._s(label)+"\n    ")]),_vm._v(" "),_c('div',{staticClass:"gl-charts-tooltip-default-format-series-value"},[_vm._v("\n      "+_vm._s(value.value)+"\n    ")])],1)}),0)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/shared_components/clear_icon_button/clear_icon_button.js b/app/assets/javascripts/gitlab-ui/dist/components/shared_components/clear_icon_button/clear_icon_button.js
new file mode 100644
index 00000000000000..9c92aa61b6d04c
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/shared_components/clear_icon_button/clear_icon_button.js
@@ -0,0 +1,62 @@
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import GlButton from '../../base/button/button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlButton
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: 'Clear'
+    },
+    tooltipContainer: {
+      required: false,
+      default: false,
+      validator: value => value === false || typeof value === 'string' || value instanceof HTMLElement
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button',_vm._g({directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:({ container: _vm.tooltipContainer }),expression:"{ container: tooltipContainer }",modifiers:{"hover":true}}],staticClass:"gl-clear-icon-button",attrs:{"variant":"default","category":"tertiary","size":"small","name":"clear","icon":"clear","title":_vm.title,"aria-label":_vm.title}},_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/shared_components/close_button/close_button.js b/app/assets/javascripts/gitlab-ui/dist/components/shared_components/close_button/close_button.js
new file mode 100644
index 00000000000000..f27d33fd721a1c
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/shared_components/close_button/close_button.js
@@ -0,0 +1,54 @@
+import GlButton from '../../base/button/button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'CloseButton',
+  components: {
+    GlButton
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: 'Close'
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button',_vm._g(_vm._b({attrs:{"category":"tertiary","size":"small","icon":"close","aria-label":_vm.label}},'gl-button',_vm.$attrs,false),_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/utilities/animated_number/animated_number.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/utilities/animated_number/animated_number.documentation.js
new file mode 100644
index 00000000000000..3448a671f393d6
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/utilities/animated_number/animated_number.documentation.js
@@ -0,0 +1,13 @@
+var animated_number = "Animated numbers provide a signifier that values are being changed.\n\n## Usage\n\nThe animated number component can be used with or without decimal places. Decimal places will\nnot be rounded if chosen to be omitted.\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': animated_number
+});
+
+var animated_number_documentation = {
+  description,
+  followsDesignSystem: false
+};
+
+export default animated_number_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/utilities/animated_number/animated_number.js b/app/assets/javascripts/gitlab-ui/dist/components/utilities/animated_number/animated_number.js
new file mode 100644
index 00000000000000..54c55e579fa306
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/utilities/animated_number/animated_number.js
@@ -0,0 +1,135 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'AnimatedNumber',
+  props: {
+    number: {
+      type: Number,
+      required: true
+    },
+
+    /**
+     * Controls how long it takes for the animation to complete.
+     */
+    duration: {
+      type: Number,
+      required: false,
+      default: 2000
+    },
+
+    /**
+     * Controls the number of decimal places displayed in the output.
+     */
+    decimalPlaces: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    animateOnMount: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      displayNumber: 0,
+      startTime: null
+    };
+  },
+
+  computed: {
+    animatedNumber() {
+      return this.displayNumber.toFixed(this.decimalPlaces);
+    }
+
+  },
+
+  ready() {
+    this.displayNumber = this.number ? this.number : 0;
+  },
+
+  watch: {
+    number() {
+      this.animate();
+    }
+
+  },
+
+  mounted() {
+    if (this.animateOnMount) {
+      this.animate();
+    } else {
+      this.displayNumber = this.number;
+    }
+  },
+
+  methods: {
+    animate() {
+      this.$emit('animating');
+      window.requestAnimationFrame(this.count);
+    },
+
+    count(timestamp) {
+      if (!this.startTime) {
+        this.startTime = timestamp;
+      }
+
+      const progress = timestamp - this.startTime;
+
+      if (progress < this.duration) {
+        if (this.displayNumber !== this.number) {
+          const change = (this.number - this.displayNumber) / (this.duration / 100);
+          this.displayNumber += change;
+        }
+
+        window.requestAnimationFrame(this.count);
+      } else {
+        this.displayNumber = this.number; // Ensures that the final number is accurate.
+
+        this.startTime = null;
+        this.$emit('animated');
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',[_vm._v(_vm._s(_vm.animatedNumber))])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/utilities/friendly_wrap/friendly_wrap.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/utilities/friendly_wrap/friendly_wrap.documentation.js
new file mode 100644
index 00000000000000..d4c4efd1004eb8
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/utilities/friendly_wrap/friendly_wrap.documentation.js
@@ -0,0 +1,7 @@
+var description = "The friendly-wrap component lets you wrap text in a predictable way by appending [`<wbr>`] elements\nto specific break-symbols.\n\n[`<wbr>`]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr\n\n## Internet Explorer 11\n\nIE11 doesn't support the `<wbr>` element: <https://caniuse.com/#search=wbr>\nTo use this component on IE11, you'll need some CSS to preserve its behaviour:\n\n```css\nwbr {\n  display: inline-block;\n}\n```\n\n## Usage\n\n### Default\n\nBy default, `GlFriendlyWrap` wraps text with slashes (`/`) as the break-symbol, which is especially\nuseful when displaying paths or URLs:\n\n```html\n<gl-friendly-wrap text=\"/some/file/path\" />\n```\n\nThe code above renders to the following HTML:\n\n```html\n<span class=\"text-break\">/<wbr>some/<wbr>file/<wbr>path</span>\n```\n\n### Custom symbols\n\nMultiple custom break-symbols can be defined via the `GlFriendlyWrap` prop:\n\n```html\n<gl-friendly-wrap\n  :symbols=\"[';', '-', '.']\"\n  text=\"some;text-that.needs;to-be.wrapped\"\n/>\n```\n\nWhich renders to:\n\n```html\n<span class=\"text-break\">some;<wbr>text-<wbr>that.<wbr>needs;<wbr>to-<wbr>be.<wbr>wrapped</span>\n```\n\n### Break words\n\nSymbols can be words too:\n\n```html\n<gl-friendly-wrap\n  :symbols=\"['and']\"\n  text=\"it goes on and on and on and on\"\n/>\n```\n\nWhich renders to:\n\n```html\n<span class=\"text-break\">it goes on and<wbr> on and<wbr> on and<wbr> on</span>\n```\n";
+
+var friendly_wrap_documentation = {
+  description
+};
+
+export default friendly_wrap_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/utilities/friendly_wrap/friendly_wrap.js b/app/assets/javascripts/gitlab-ui/dist/components/utilities/friendly_wrap/friendly_wrap.js
new file mode 100644
index 00000000000000..3b86568b3c9411
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/utilities/friendly_wrap/friendly_wrap.js
@@ -0,0 +1,77 @@
+import { intersperse } from '../../../utils/data_utils';
+import { splitAfterSymbols } from '../../../utils/string_utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  functional: true,
+  props: {
+    /**
+     * Text to be wrapped.
+     */
+    text: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * A list of strings representing the break-words.
+     */
+    symbols: {
+      type: Array,
+      required: false,
+      default: () => ['/']
+    }
+  },
+
+  render(createElement, _ref) {
+    let {
+      props
+    } = _ref;
+    const {
+      symbols,
+      text
+    } = props;
+    const textParts = splitAfterSymbols(symbols, text !== null && text !== void 0 ? text : '');
+    const content = intersperse(() => createElement('wbr'), textParts);
+    return createElement('span', {
+      class: 'text-break'
+    }, content);
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = undefined;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    {},
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/utilities/intersection_observer/intersection_observer.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/utilities/intersection_observer/intersection_observer.documentation.js
new file mode 100644
index 00000000000000..e3edf9014b48d5
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/utilities/intersection_observer/intersection_observer.documentation.js
@@ -0,0 +1,12 @@
+var intersection_observer = "This intersection observer component is an invisible watcher that emits events when it appears and\ndissapears from view.\n\nIt acts a a vue-friendly wrapper around the [intersection observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).\n\nBecause of it's simplicity you can use it for a lot of different things.\nIt's especially helpful for the lazy loading of images, and infinite scrolling of lists.\n\nAnything slotted inside this component will become the element that is being observed.\n\nThis slot can also be used as a fallback for the browsers that don't support the intersection\nobserver, or in the case that the observer fails to work.\nFor example, adding a \"Fetch more posts\" button inside an observer that should fetch more posts\nautomatically when visible. If the observer fails to work for any reason, the button will still be\nclickable, and the experience preserved. Please use a fallback wherever possible as\n**the intersection observer API is not supported in IE11**.\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': intersection_observer
+});
+
+var intersection_observer_documentation = {
+  description
+};
+
+export default intersection_observer_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/utilities/intersection_observer/intersection_observer.js b/app/assets/javascripts/gitlab-ui/dist/components/utilities/intersection_observer/intersection_observer.js
new file mode 100644
index 00000000000000..c15aa4c78c92c6
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/utilities/intersection_observer/intersection_observer.js
@@ -0,0 +1,95 @@
+import _memoize from 'lodash/memoize';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const getObserver = _memoize(options => new IntersectionObserver(entries => {
+  entries.forEach(entry => {
+    entry.target.$_gl_intersectionHandler(entry);
+  });
+}, options || {}));
+
+var script = {
+  name: 'GlIntersectionObserver',
+  props: {
+    /**
+     * Extra options to pass directly to the intersection observer API.
+     */
+    options: {
+      type: Object,
+      required: false,
+      default: null
+    }
+  },
+
+  mounted() {
+    const observer = getObserver(this.options);
+
+    this.$el.$_gl_intersectionHandler = entry => {
+      /**
+       * Emitted when the element's visibility changes
+       */
+      this.$emit('update', entry);
+
+      if (entry.isIntersecting) {
+        /**
+         * Emitted when the element appears on the page
+         */
+        this.$emit('appear');
+      } else {
+        /**
+         * Emitted when the element disappears from the page
+         */
+        this.$emit('disappear');
+      }
+    };
+
+    this.$el.$_gl_intersectionObserver = observer;
+    observer.observe(this.$el);
+  },
+
+  destroyed() {
+    this.$el.$_gl_intersectionObserver.unobserve(this.$el);
+    delete this.$el.$_gl_intersectionHandler;
+    delete this.$el.$_gl_intersectionObserver;
+  },
+
+  // Expose getObserver method for tests
+  getObserver
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/utilities/intersperse/intersperse.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/utilities/intersperse/intersperse.documentation.js
new file mode 100644
index 00000000000000..4c440448fb6365
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/utilities/intersperse/intersperse.documentation.js
@@ -0,0 +1,8 @@
+var description = "The intersperse component separates a list of elements\nby a given character (the default is `, `).\n\nIt takes all direct descendants of its default slot and inserts\nthe given separator between each item:\n\n`item 1, item 2, item 3`\n\nOptionally the character used for separating each item and the last separator can be set\nindependently:\n\n* `separator=\"/\"`  renders `item 1/item 2/item 3`\n* `lastSeparator=\" and \"` will render `item 1, item 2, and item 3`\n* `lastSeparator=\" and \"` and given two items will render `item 1 and item 2`\n\n**Note**:\n\nThe component provides an inline context since the result is wrapped in a `span`.\n\nAlso, whitespace elements that are direct children of the default-slot get removed to ensure\nconsistent formatting.\n\n## Usage\n\n### Default\n\n```html\n<gl-intersperse>\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>, <span>Item 2</span>, <span>Item 3</span></span>\n```\n\n### Custom Separator\n\nA custom separator can be defined via the `separator` prop:\n\n```html\n<gl-intersperse separator=\"/\">\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>/<span>Item 2</span>/<span>Item 3</span></span>\n```\n\n### Custom Last Separator\n\nA custom last separator can be defined via the `lastSeparator` prop:\n\n```html\n<gl-intersperse last-separator=\" and \">\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>, <span>Item 2</span>, and <span>Item 3</span></span>\n```\n\nA custom last separator used on two items will only place `lastSeparator` between them:\n\n```html\n<gl-intersperse last-separator=\" and \">\n    <span>Item 1</span>\n    <span>Item 2</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span> and <span>Item 2</span></span>\n```\n";
+
+var intersperse_documentation = {
+  followsDesignSystem: false,
+  description
+};
+
+export default intersperse_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/utilities/intersperse/intersperse.js b/app/assets/javascripts/gitlab-ui/dist/components/utilities/intersperse/intersperse.js
new file mode 100644
index 00000000000000..0c9763141bace3
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/utilities/intersperse/intersperse.js
@@ -0,0 +1,89 @@
+import compose from 'lodash/fp/compose';
+import fill from 'lodash/fp/fill';
+import filter from 'lodash/fp/filter';
+import { insert, intersperse } from '../../../utils/data_utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const containsWhitespaceOnly = vNode => vNode.text.trim() === '';
+
+const isTag = vNode => vNode.tag !== undefined;
+
+const filterWhitespaceNodes = filter(vNode => isTag(vNode) || !containsWhitespaceOnly(vNode));
+const insertAfterSecondLastItem = insert(-1);
+const replaceSecondLastItem = fill(-2, -1); // handles the addition of the lastSeparator in these two cases:
+// item1, item2, item3 => item1, item2, and item3
+// item1, item2 => item1 and item2
+
+const addLastSeparator = lastSeparator => items => {
+  if (!lastSeparator) {
+    return items;
+  }
+
+  return items.length > 3 ? insertAfterSecondLastItem(lastSeparator, items) : replaceSecondLastItem(lastSeparator, items);
+};
+
+var script = {
+  functional: true,
+  props: {
+    separator: {
+      type: String,
+      default: ', ',
+      required: false
+    },
+    lastSeparator: {
+      type: String,
+      default: '',
+      required: false
+    }
+  },
+
+  render(createElement, context) {
+    const {
+      props: {
+        separator,
+        lastSeparator
+      },
+      slots,
+      data
+    } = context;
+    const filterAndSeparate = compose(addLastSeparator(lastSeparator), intersperse(separator), filterWhitespaceNodes);
+    return createElement('span', data, filterAndSeparate(slots().default));
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = undefined;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    {},
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/utilities/sprintf/sprintf.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/utilities/sprintf/sprintf.documentation.js
new file mode 100644
index 00000000000000..8617f83c27cb62
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/utilities/sprintf/sprintf.documentation.js
@@ -0,0 +1,8 @@
+var description = "## Overview\n\nThe `GlSprintf` component lets you do `sprintf`-style string interpolation with\nchild components. Each placeholder in the translated string, provided via the\n`message` prop, becomes a slot that you can use to insert any components or\nmarkup in the rendered output.\n\n> NOTE: `gl-sprintf` does not translate the message for you; you must provide\n> it already translated. In the following examples, it is assumed that\n> a `gettext`-style `__` translation function is available in your Vue\n> templates.\n\n## Displaying messages with text between placeholders (e.g., links, buttons)\n\nSentences should not be split up into different messages, otherwise they may\nnot be translatable into certain languages. To help with this, `GlSprintf`\ninterprets placeholders suffixed with `Start` and `End` to indicate the\nboundaries of a component to display within the message. Any text between\nthem is passed, via the `content` scoped slot property, to the slot name common\nto the placeholders.\n\nFor example, using `linkStart` and `linkEnd` placeholders in a message defines\na `link` scoped slot:\n\n```html\n<div>\n  <gl-sprintf :message=\"__('Learn more about %{linkStart}zones%{linkEnd}')\">\n    <template #link=\"{ content }\">\n      <gl-link\n        href=\"https://cloud.google.com/compute/docs/regions-zones/regions-zones\"\n        target=\"_blank\"\n      >{{ content }}</gl-link>\n    </template>\n  </gl-sprintf>\n</div>\n```\n\nwill render as:\n\n```html\n<div>\n  Learn more about\n  <a\n    href=\"https://cloud.google.com/compute/docs/regions-zones/regions-zones\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n  >zones</a>\n</div>\n```\n\nNote that _any_ arbitrary HTML tags or Vue component(s) can be used within\na scoped slot, and that the content passed to it can be used in any way at all;\nfor instance, as regular text, or in component attributes or slots.\n\nHere's a more complex example, which `<gl-sprintf>` lets you do in a breeze:\n\n```html\n<div>\n  <gl-sprintf :message=\"__('Written by %{authorStart}someone%{authorEnd}')\">\n    <template #author=\"{ content }\">\n      <my-vue-component v-gl-tooltip=\"content\" @event=\"handleEvent(content)\">\n        {{ content }}\n      </my-vue-component>\n      <p>\n          {{ content }}\n          <div>{{ content }}</div>\n      </p>\n    </template>\n  </gl-sprintf>\n</div>\n```\n\nThis is not feasible in a JS-only solution, since arbitrary Vue components\ncannot easily be used. In addition, a JS-only solution is more likely to be\nprone to XSS attacks, as the Vue compiler isn't available to help protect\nagainst them.\n\n### Customizing start/end placeholders\n\nYou can customize the start and end placeholders that `GlSprintf` looks for\nusing the `placeholders` prop. For instance:\n\n```html\n<div>\n  <gl-sprintf\n    :message=\"__('Learn more about %{my_custom_start}zones%{my_custom_end}')\"\n    :placeholders=\"{ link: ['my_custom_start', 'my_custom_end'] }\"\n  >\n    <template #link=\"{ content }\">\n      <gl-link\n        href=\"https://cloud.google.com/compute/docs/regions-zones/regions-zones\"\n        target=\"_blank\"\n      >{{ content }}</gl-link>\n    </template>\n  </gl-sprintf>\n</div>\n```\n\nThis can be useful if you are migrating an existing string to `GlSprintf` that\nuses different placeholder naming conventions, and don't want invalidate\nexisting translations.\n\n## Displaying components within a message\n\nUse slots to replace placeholders in the message with the slots' contents.\nThere is a slot for every placeholder in the message. For example, the `author`\nslot name can be used when there is an `%{author}` placeholder in the message:\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      authorName: 'Some author',\n    };\n  },\n};\n</script>\n\n<template>\n  <div>\n    <gl-sprintf :message=\"__('Written by %{author}')\">\n      <template #author>\n        <span>{{ authorName }}</span>\n      </template>\n    </gl-sprintf>\n  </div>\n</template>\n```\n\nThe example above renders to this HTML:\n\n```html\n<div>Written by <span>Some author</span></div>\n```\n\n## Usage caveats\n\n### White space\n\n`GlSprintf` does not handle white space in scoped slots specially; it is passed\nthrough and rendered just like regular text. This means that white space in the\nscoped slot templates *themselves*, including newlines and indentation, are\npassed through untouched (assuming the template compiler you're using doesn't\ntrim text nodes at compile time; `vue-template-compiler` preserves white space\nby default, for instance).\n\nMost of the time you don't need to worry about this, since\n[browsers normalize white space][1] automatically, but here's an example, using\npunctuation, where you might want to be conscious of the white space in the\ntemplate:\n\n```html\n<div>\n  <gl-sprintf :message=\"__('Foo %{boldStart}bar%{boldEnd}!')\">\n    <template #bold=\"{ content }\">\n      <b>\n        {{ content }}\n      </b>\n    </template>\n  </gl-sprintf>\n</div>\n```\n\nAs written, the literal markup rendered would be:\n\n```html\n<div>  Foo <b>\n        bar\n      </b>!\n</div>\n```\n\nwhere the white space (including newlines) before and after `bar` is exactly\nthe newlines and indentation in the source template. The browser will render\nthis as:\n\n<div>  Foo <b>\n        bar\n      </b>!\n</div>\n\nNote the single space between `bar` and `!`. To avoid that, remove the\nwhite space in the template, or use `v-text`:\n\n```html\n<div>\n  <gl-sprintf :message=\"__('Foo %{boldStart}bar%{boldEnd}!')\">\n    <template #bold=\"{ content }\">\n      <b>{{ content }}</b>\n      <!-- OR -->\n      <b v-text=\"content\" />\n    </template>\n  </gl-sprintf>\n</div>\n```\n\n### Miscellaneous\n\nWhile there are a lot of caveats here, you don't need to worry about reading\nthem _unless_ you find `GlSprintf` isn't rendering what you'd expect.\n\n- Since `GlSprintf` typically renders multiple elements, it can't be used as\n  a component's root, it must be wrapped with at least one other root element,\n  otherwise Vue will throw a `Multiple root nodes returned from render\n  function` error.\n- If a slot for a given placeholder _isn't_ provided, the placeholder\n  will be rendered as-is, e.g., literally `Written by %{author}` if the\n  `author` slot _isn't_ provided, or literally `%{linkStart}foo%{linkEnd}` if\n  the `link` slot isn't provided.\n- Content between `Start` and `End` placeholders is effectively thrown away if\n  the scoped slot of the correct name doesn't consume the `content` property in\n  some way, though the slot's components should still be rendered.\n- If there's no placeholder in the message for a provided named slot, the\n  content of that slot is silently thrown away.\n- If only one of the `Start` or `End` placeholders is in the message, or they\n  are in the wrong order, they are treated as plain slots, i.e., it is assumed\n  there is no text to extract and pass to the scoped slot. This allows you to\n  use plain slots whose names end in `Start` or `End`, e.g., `backEnd`, or\n  `fromStart` in isolation, without their `Start`/`End` counterparts.\n- Text extraction between `Start` and `End` placeholders is only done one level\n  deep. This is intentional, so as to avoid building complex sprintf messages\n  that would better be implemented in components. As an example,\n  `${linkStart}test%{icon}%{linkEnd}`, if provided both the `link` and `icon`\n  slots, would pass `test%{icon}` as a literal string as content to the `link`\n  scoped slot.\n- For more examples and edge cases, please see the test suite for `GlSprintf`.\n- To be successfully used in `GlSprintf`, slot names should:\n  - start with a letter (`[A-Za-z]`)\n  - only contain alpha-numeric characters (`[A-Za-z0-9]`), underscore (`_`) and\n    dash (`-`),\n  - should not end with underscore (`_`) or dash (`-`) So for example:\n    `%{author}`, `%{author_name}`, `%{authorName}` or `%{author-name-100}` are\n    all valid placeholders.\n\n## Internet Explorer 11\n\nThis component uses [`String.prototype.startsWith()`] and [`String.prototype.endsWith()`] under the\nhood. Make sure those methods are polyfilled if you plan on using the component on IE11.\n\n[1]: https://www.w3.org/TR/css-text-3/#white-space-phase-1\n[`String.prototype.startsWith()`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith\n[`String.prototype.endsWith()`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith\n";
+
+var sprintf_documentation = {
+  description,
+  followsDesignSystem: false
+};
+
+export default sprintf_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/utilities/sprintf/sprintf.js b/app/assets/javascripts/gitlab-ui/dist/components/utilities/sprintf/sprintf.js
new file mode 100644
index 00000000000000..a4c112d15c978c
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/utilities/sprintf/sprintf.js
@@ -0,0 +1,182 @@
+import _isString from 'lodash/isString';
+import _has from 'lodash/has';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const PREFIX = '%{';
+const SUFFIX = '}';
+const START_SUFFIX = 'Start';
+const END_SUFFIX = 'End';
+const PLACE_HOLDER_REGEX = new RegExp(`(${PREFIX}[a-z]+[\\w-]*[a-z0-9]+${SUFFIX})`, 'gi');
+
+function groupPlaceholdersByStartTag() {
+  let placeholders = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return Object.entries(placeholders).reduce((acc, _ref) => {
+    let [slotName, [startTag, endTag]] = _ref;
+    acc[startTag] = {
+      slotName,
+      endTag
+    };
+    return acc;
+  }, {});
+}
+
+function getPlaceholderDefinition(chunk, placeholdersByStartTag) {
+  const tagName = chunk.slice(PREFIX.length, -SUFFIX.length);
+
+  if (_has(placeholdersByStartTag, tagName)) {
+    // Use provided custom placeholder definition
+    return { ...placeholdersByStartTag[tagName],
+      tagName
+    };
+  }
+
+  if (tagName.endsWith(START_SUFFIX)) {
+    // Tag conforms to default start/end tag naming convention
+    const slotName = tagName.slice(0, -START_SUFFIX.length);
+    return {
+      slotName,
+      endTag: `${slotName}${END_SUFFIX}`,
+      tagName
+    };
+  }
+
+  return {
+    slotName: tagName,
+    endTag: undefined,
+    tagName
+  };
+}
+
+var script = {
+  functional: true,
+  props: {
+    /**
+     * A translated string with named placeholders, e.g., "Written by %{author}".
+     */
+    message: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * An object mapping slot names to custom start/end placeholders. Use this
+     * to avoid changing an existing message, and in turn invalidating existing
+     * translations, in the case it uses non-default placeholders.
+     */
+    placeholders: {
+      type: Object,
+      required: false,
+      default: undefined,
+      validator: value => Object.values(value).every(tagPair => Array.isArray(tagPair) && tagPair.length === 2 && tagPair.every(_isString))
+    }
+  },
+
+  /**
+   * Available slots are determined by the placeholders in the provided
+   * message prop. For example, a message of "Written by %{author}" has
+   * a slot called "author", and its content is used to replace "%{author}"
+   * in the rendered output. When two placeholders indicate a start and an
+   * end region in the message, e.g., "%{linkStart}foo%{linkEnd}", the common
+   * base name can be used as a scoped slot, where the content between the
+   * placeholders is passed via the `content` scoped slot prop.
+   * @slot * (arbitrary)
+   * @binding {string} content The content to place between start and end placeholders.
+   */
+  render(createElement, context) {
+    // While a functional style is generally preferred, an imperative style is
+    // used here, as it lends itself better to the message parsing algorithm.
+    // This approach is also more performant, as it minimizes (relatively) object
+    // creation/garbage collection, which is important given how frequently this
+    // code may run on a given page.
+    let i = 0;
+    const vnodes = [];
+    const slots = context.scopedSlots;
+    const chunks = context.props.message.split(PLACE_HOLDER_REGEX);
+    const placeholdersByStartTag = groupPlaceholdersByStartTag(context.props.placeholders);
+
+    while (i < chunks.length) {
+      const chunk = chunks[i]; // Skip past this chunk now we have it
+
+      i += 1;
+
+      if (!PLACE_HOLDER_REGEX.test(chunk)) {
+        // Not a placeholder, so pass through as-is
+        vnodes.push(chunk);
+        continue;
+      }
+
+      const {
+        slotName,
+        endTag,
+        tagName
+      } = getPlaceholderDefinition(chunk, placeholdersByStartTag);
+
+      if (endTag) {
+        // Peek ahead to find end placeholder, if any
+        const indexOfEnd = chunks.indexOf(`${PREFIX}${endTag}${SUFFIX}`, i);
+
+        if (indexOfEnd > -1) {
+          // We have a valid start/end placeholder pair! Extract the content
+          // between them and skip past the end placeholder
+          const content = chunks.slice(i, indexOfEnd);
+          i = indexOfEnd + 1;
+
+          if (!_has(slots, slotName)) {
+            // Slot hasn't been provided; return placeholders and content as-is
+            vnodes.push(chunk, ...content, chunks[indexOfEnd]);
+            continue;
+          } // Provide content to provided scoped slot
+
+
+          vnodes.push(slots[slotName]({
+            content: content.join('')
+          }));
+          continue;
+        }
+      } // By process of elimination, chunk must be a plain placeholder
+
+
+      vnodes.push(_has(slots, tagName) ? slots[tagName]() : chunk);
+      continue;
+    }
+
+    return vnodes;
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = undefined;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    {},
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/constants.js b/app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/constants.js
new file mode 100644
index 00000000000000..2b8993c61bb653
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/constants.js
@@ -0,0 +1,7 @@
+const POSITION = {
+  START: 'start',
+  MIDDLE: 'middle',
+  END: 'end'
+};
+
+export { POSITION };
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/examples/index.js
new file mode 100644
index 00000000000000..1d4326076f30b9
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/examples/index.js
@@ -0,0 +1,13 @@
+import TruncateBasicExample from './truncate.basic.example';
+
+var index = [{
+  name: 'Basic',
+  items: [{
+    id: 'truncate',
+    name: 'Basic',
+    description: 'Basic truncation',
+    component: TruncateBasicExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/examples/truncate.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/examples/truncate.basic.example.js
new file mode 100644
index 00000000000000..8d2fded58a315a
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/examples/truncate.basic.example.js
@@ -0,0 +1,38 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/* script */
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-truncate',{attrs:{"text":"ee/app/assets/javascripts/vue_shared/security_reports/components/utils/truncate/smart-truncate/src/index.js"}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    {},
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/truncate.documentation.js b/app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/truncate.documentation.js
new file mode 100644
index 00000000000000..e65d5a0ead8d47
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/truncate.documentation.js
@@ -0,0 +1,22 @@
+import examples from './examples';
+
+var description = "# Truncate\n\nThe `GlTruncate` component lets you truncate the long texts with ellipsis.\n\n<!-- STORY -->\n\n> **Tip:** Try resizing the side panel for truncation.\n\n## Usage\n\n```html\n<gl-truncate :text=\"text\" :position=\"position\" />\n```\n\nBy default, the ellipsis position is at the `end`.\n\nPro Tip: Truncating long filepaths from the `middle` / `start` can help preventing the important\ninformation in the end, i.e. filenames.\n";
+
+var truncate_documentation = {
+  description,
+  examples,
+  propsInfo: {
+    text: {
+      additionalInfo: 'Text to be ellipsized'
+    },
+    position: {
+      additionalInfo: 'Ellipsis position',
+      enum: 'truncateOptions'
+    },
+    withTooltip: {
+      additionalInfo: 'Display the full text in a tooltip only if it is being truncated'
+    }
+  }
+};
+
+export default truncate_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/truncate.js b/app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/truncate.js
new file mode 100644
index 00000000000000..21baac7d82afcc
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/components/utilities/truncate/truncate.js
@@ -0,0 +1,108 @@
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import { POSITION } from './constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  POSITION,
+  directives: {
+    GlTooltip: GlTooltipDirective,
+    GlResizeObserver: GlResizeObserverDirective
+  },
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    position: {
+      type: String,
+      required: false,
+      default: POSITION.END,
+      validator: value => Object.values(POSITION).includes(value)
+    },
+    withTooltip: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      isTruncated: false
+    };
+  },
+
+  computed: {
+    middleIndex() {
+      return Math.floor(this.text.length / 2);
+    },
+
+    first() {
+      return this.text.slice(0, this.middleIndex);
+    },
+
+    last() {
+      return this.text.slice(this.middleIndex);
+    },
+
+    isTooltipDisabled() {
+      return !this.withTooltip || !this.isTruncated;
+    }
+
+  },
+  watch: {
+    withTooltip(withTooltip) {
+      if (withTooltip) {
+        this.checkTruncationState();
+      }
+    }
+
+  },
+  methods: {
+    checkTruncationState() {
+      if (this.withTooltip) {
+        this.isTruncated = this.$refs.text.scrollWidth > this.$refs.text.offsetWidth;
+      }
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.position === _vm.$options.POSITION.START)?_c('span',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ disabled: _vm.isTooltipDisabled }),expression:"{ disabled: isTooltipDisabled }"},{name:"gl-resize-observer",rawName:"v-gl-resize-observer:[withTooltip]",value:(_vm.checkTruncationState),expression:"checkTruncationState",arg:_vm.withTooltip}],staticClass:"gl-truncate",attrs:{"title":_vm.text}},[_c('span',{ref:"text",staticClass:"gl-truncate-start gl-text-overflow-ellipsis!"},[_vm._v("‎"+_vm._s(_vm.text)+"‎")])]):(_vm.position === _vm.$options.POSITION.MIDDLE)?_c('span',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ disabled: _vm.isTooltipDisabled }),expression:"{ disabled: isTooltipDisabled }"},{name:"gl-resize-observer",rawName:"v-gl-resize-observer:[withTooltip]",value:(_vm.checkTruncationState),expression:"checkTruncationState",arg:_vm.withTooltip}],staticClass:"gl-truncate",attrs:{"title":_vm.text}},[_c('span',{ref:"text",staticClass:"gl-truncate-end"},[_vm._v(_vm._s(_vm.first))]),_c('span',{staticClass:"gl-truncate-start"},[_vm._v("‎"+_vm._s(_vm.last)+"‎")])]):_c('span',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ disabled: _vm.isTooltipDisabled }),expression:"{ disabled: isTooltipDisabled }"},{name:"gl-resize-observer",rawName:"v-gl-resize-observer:[withTooltip]",value:(_vm.checkTruncationState),expression:"checkTruncationState",arg:_vm.withTooltip}],staticClass:"gl-truncate",attrs:{"data-testid":"truncate-end-container","title":_vm.text}},[_c('span',{ref:"text",staticClass:"gl-truncate-end"},[_vm._v(_vm._s(_vm.text))])])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/config.js b/app/assets/javascripts/gitlab-ui/dist/config.js
new file mode 100644
index 00000000000000..72772ad37a3abd
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/config.js
@@ -0,0 +1,37 @@
+import { BVConfigPlugin } from 'bootstrap-vue/esm/index.js';
+import Vue from 'vue';
+import { tooltipDelay } from './utils/constants';
+
+const bFormTextGlobalConfig = {
+  textVariant: 'gl-muted'
+};
+const tooltipGlobalConfig = {
+  customClass: 'gl-tooltip',
+  delay: tooltipDelay
+};
+/**
+ * Guard against nonexistent localStorage,
+ * or corrupted localStorage
+ *
+ * localStorage access is not possible in certain environments like
+ * - in iframe usage in Chrome if embedded on another domain
+ * - tests / node
+ */
+
+try {
+  const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');
+
+  if (glTooltipDelay) {
+    tooltipGlobalConfig.delay = JSON.parse(glTooltipDelay);
+  }
+} catch (e) {// localStorage doesn't exist (or the value is not properly formatted)
+}
+
+const setConfigs = () => {
+  Vue.use(BVConfigPlugin, {
+    BFormText: bFormTextGlobalConfig,
+    BTooltip: tooltipGlobalConfig
+  });
+};
+
+export default setConfigs;
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/collapse_toggle.js b/app/assets/javascripts/gitlab-ui/dist/directives/collapse_toggle.js
new file mode 100644
index 00000000000000..56aab4a01dd568
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/collapse_toggle.js
@@ -0,0 +1 @@
+export { VBToggle as GlCollapseToggleDirective } from 'bootstrap-vue/esm/index.js';
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/hover_load/hover_load.documentation.js b/app/assets/javascripts/gitlab-ui/dist/directives/hover_load/hover_load.documentation.js
new file mode 100644
index 00000000000000..3cc5e8de9d3c3c
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/hover_load/hover_load.documentation.js
@@ -0,0 +1,13 @@
+var hover_load = "# Hover Load\n\nA Vue Directive to help with preloading resources when hovering over an element.\n\n## Usage\n\n```html\n<script>\nimport { GlHoverLoadDirective } from '@gitlab/ui';\n\nexport default {\n  directives: { GlHoverLoadDirective },\n  methods: {\n    handlePreload() {\n      fetch('some/endpoint');\n    },\n  },\n};\n</script>\n\n<template>\n  <div v-gl-hover-load=\"handlePreload\">Hover me to preload</div>\n</template>\n```\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': hover_load
+});
+
+var hover_load_documentation = {
+  description,
+  followsDesignSystem: false
+};
+
+export default hover_load_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/hover_load/hover_load.js b/app/assets/javascripts/gitlab-ui/dist/directives/hover_load/hover_load.js
new file mode 100644
index 00000000000000..9d2b8a890006af
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/hover_load/hover_load.js
@@ -0,0 +1,51 @@
+import isFunction from 'lodash/isFunction';
+
+const DELAY_ON_HOVER = 100;
+let mouseOverTimer;
+let mouseOverHandler;
+
+const bind = (el, _ref) => {
+  let {
+    value: loadHandler
+  } = _ref;
+
+  if (!isFunction(loadHandler)) {
+    throw TypeError('Directive value must be a function');
+  }
+
+  const mouseOutHandler = () => {
+    if (mouseOverTimer) {
+      clearTimeout(mouseOverTimer);
+      mouseOverTimer = undefined;
+    }
+  };
+
+  mouseOverHandler = () => {
+    el.addEventListener('mouseout', mouseOutHandler, {
+      passive: true
+    });
+    mouseOverTimer = setTimeout(() => {
+      loadHandler(el); // Only execute once
+
+      el.removeEventListener('mouseover', mouseOverHandler, true);
+      el.removeEventListener('mouseout', mouseOutHandler);
+      mouseOverTimer = undefined;
+    }, DELAY_ON_HOVER);
+  };
+
+  el.addEventListener('mouseover', mouseOverHandler, {
+    capture: true,
+    passive: true
+  });
+};
+
+const unbind = el => {
+  el.removeEventListener('mouseover', mouseOverHandler, true);
+};
+
+const HoverLoadDirective = {
+  bind,
+  unbind
+};
+
+export { HoverLoadDirective };
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/modal.js b/app/assets/javascripts/gitlab-ui/dist/directives/modal.js
new file mode 100644
index 00000000000000..de1dacc594f37f
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/modal.js
@@ -0,0 +1 @@
+export { VBModal as GlModalDirective } from 'bootstrap-vue/esm/index.js';
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/outside/get_event_like_time_stamp.js b/app/assets/javascripts/gitlab-ui/dist/directives/outside/get_event_like_time_stamp.js
new file mode 100644
index 00000000000000..f0cfa28e82e78c
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/outside/get_event_like_time_stamp.js
@@ -0,0 +1,31 @@
+/**
+ * This file is based on Vue's scheduler code:
+ * https://github.com/vuejs/vue/blob/v2.6.12/src/core/observer/scheduler.js#L44-L66
+ *
+ * See the LICENSE file in this directory.
+ */
+const {
+  performance
+} = window;
+/**
+ * Get a current timestamp that can be meaningfully compared to an event's
+ * `timeStamp` property.
+ *
+ * Event timestamps can be a DOMHighResTimeStamp (if supported), otherwise
+ * a DOMTimeStamp (used by jsdom and older browsers).
+ *
+ * This function will return a current timestamp of the same type used by the
+ * underlying environment when it creates DOM events.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp for
+ * more details.
+ *
+ * @returns {number}
+ */
+
+const getEventLikeTimeStamp = // If the event timestamp, although evaluated AFTER the Date.now(), is
+// smaller, it means the event is using a hi-res timestamp, and we need to
+// use the hi-res version for event listener timestamps as well.
+typeof (performance === null || performance === void 0 ? void 0 : performance.now) === 'function' && Date.now() > document.createEvent('Event').timeStamp ? () => performance.now() : () => Date.now();
+
+export { getEventLikeTimeStamp };
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/outside/outside.documentation.js b/app/assets/javascripts/gitlab-ui/dist/directives/outside/outside.documentation.js
new file mode 100644
index 00000000000000..ce3b159c5ef147
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/outside/outside.documentation.js
@@ -0,0 +1,13 @@
+var outside = "A Vue Directive to call a callback when a click occurs *outside* of the element\nthe directive is bound to. Any clicks on the element or any descendant elements are ignored.\n\n## Usage\n\n```html\n<script>\nimport { GlOutsideDirective as Outside } from '@gitlab/ui';\n\nexport default {\n  directives: { Outside },\n  methods: {\n    onClick(event) {\n      console.log('User clicked somewhere outside of this component', event);\n    },\n  },\n};\n</script>\n\n<template>\n  <div v-outside=\"onClick\">Click anywhere but here</div>\n</template>\n```\n\n## Caveats\n\n- If a click event is stopped (e.g., via `event.stopPropagation()`) before it\n  bubbles up to the `document`, it cannot be detected by `GlOutsideDirective`.\n- Clicks cannot be detected across document boundaries (e.g., across an\n  `iframe` boundary), in either direction.\n";
+
+var description = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': outside
+});
+
+var outside_documentation = {
+  description,
+  followsDesignSystem: false
+};
+
+export default outside_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/outside/outside.js b/app/assets/javascripts/gitlab-ui/dist/directives/outside/outside.js
new file mode 100644
index 00000000000000..cfd12240d8f17a
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/outside/outside.js
@@ -0,0 +1,106 @@
+import { getEventLikeTimeStamp } from './get_event_like_time_stamp';
+
+/**
+ * Map<HTMLElement, { bindTimeStamp: number, callback: Function }>
+ */
+
+const callbacks = new Map();
+/**
+ * Is a global listener already set up?
+ */
+
+let listening = false;
+
+const globalListener = event => {
+  callbacks.forEach((_ref, element) => {
+    let {
+      bindTimeStamp,
+      callback
+    } = _ref;
+
+    if ( // Ignore events that aren't targeted outside the element
+    element.contains(event.target) || // Only consider events triggered after the directive was bound
+    event.timeStamp <= bindTimeStamp) {
+      return;
+    }
+
+    try {
+      callback(event);
+    } catch (e) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.error(e);
+      }
+    }
+  });
+};
+
+const startListening = () => {
+  if (listening) {
+    return;
+  }
+
+  document.addEventListener('click', globalListener);
+  listening = true;
+};
+
+const stopListening = () => {
+  if (!listening) {
+    return;
+  }
+
+  document.removeEventListener('click', globalListener);
+  listening = false;
+};
+
+const bind = (el, _ref2) => {
+  let {
+    value,
+    arg = 'click'
+  } = _ref2;
+
+  if (typeof value !== 'function') {
+    throw new Error(`[GlOutsideDirective] Value must be a function; got ${typeof value}!`);
+  }
+
+  if (arg !== 'click') {
+    throw new Error(`[GlOutsideDirective] Cannot bind ${arg} events; only click events are currently supported!`);
+  }
+
+  if (callbacks.has(el)) {
+    // This element is already bound. This is possible if two components, which
+    // share the same root node, (i.e., one is a higher-order component
+    // wrapping another) _both_ have this directive applied.
+    //
+    // Because Vue binds directives in the direction towards the root, only the
+    // deepest instance of this directive will be bound.
+    //
+    // A future iteration may add support for binding all instances on a given
+    // element.
+    return;
+  }
+
+  if (!listening) {
+    startListening();
+  }
+
+  callbacks.set(el, {
+    bindTimeStamp: getEventLikeTimeStamp(),
+    callback: value
+  });
+};
+
+const unbind = el => {
+  callbacks.delete(el);
+
+  if (callbacks.size === 0) {
+    stopListening();
+  }
+};
+
+const OutsideDirective = {
+  bind,
+  unbind
+};
+
+export { OutsideDirective };
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/examples/index.js b/app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/examples/index.js
new file mode 100644
index 00000000000000..2cf4f2dc707942
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/examples/index.js
@@ -0,0 +1,12 @@
+import BasicExample from './resize_observer.basic.example';
+
+var index = [{
+  name: 'ResizeObserver directive',
+  items: [{
+    id: 'resize-observer-directive-example',
+    name: 'ResizeObserver directive example',
+    component: BasicExample
+  }]
+}];
+
+export default index;
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/examples/resize_observer.basic.example.js b/app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/examples/resize_observer.basic.example.js
new file mode 100644
index 00000000000000..cbd700b0e20aae
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/examples/resize_observer.basic.example.js
@@ -0,0 +1,62 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  data() {
+    return {
+      width: 0,
+      height: 0
+    };
+  },
+
+  methods: {
+    handleResize(_ref) {
+      let {
+        contentRect: {
+          width,
+          height
+        }
+      } = _ref;
+      this.width = width;
+      this.height = height;
+    }
+
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"gl-resize-observer-directive",rawName:"v-gl-resize-observer-directive",value:(_vm.handleResize),expression:"handleResize"}]},[_c('p',[_vm._v(_vm._s(_vm.width)+" x "+_vm._s(_vm.height))])])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+
+
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/resize_observer.documentation.js b/app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/resize_observer.documentation.js
new file mode 100644
index 00000000000000..75838a3c850d1d
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/resize_observer.documentation.js
@@ -0,0 +1,11 @@
+import examples from './examples';
+
+var description = "# Resize Observer\n\n<!-- STORY -->\n\n## Usage\n\nThis directive can be used to get notified whenever a given element's size (width or height) changes\nand to retrieve the updated dimensions.\n\nUnder the hood, it leverages the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\nIf you use GitLab UI in an older browser which doesn't support the Resize Observer API,\nyou can use a [polyfill](https://github.com/que-etc/resize-observer-polyfill).\n\nThe directive accepts a callback as a value and passes on the received\n[contentRect](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect)\nand the target element whenever a resize event gets triggered.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      width: 0,\n      height: 0,\n    };\n  },\n  methods: {\n    handleResize({ contentRect: { width, height } }) {\n      this.width = width;\n      this.height = height;\n    },\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive=\"handleResize\">\n    <p>{{ width }} x {{ height }}</p>\n  </div>\n</template>\n```\n\nThe observer can be toggled on or off by passing a boolean argument to the directive:\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      shouldObserve: true,\n    };\n  },\n  methods: {\n    handleResize() {},\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive[shouldObserve]=\"handleResize\"></div>\n</template>\n```\n";
+
+var resize_observer_documentation = {
+  followsDesignSystem: false,
+  description,
+  examples
+};
+
+export default resize_observer_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/resize_observer.js b/app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/resize_observer.js
new file mode 100644
index 00000000000000..ffa8e55f9e8ff0
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/resize_observer/resize_observer.js
@@ -0,0 +1,61 @@
+import isFunction from 'lodash/isFunction';
+
+let observer = null;
+
+const attachObserver = (el, resizeHandler) => {
+  if (!isFunction(resizeHandler)) {
+    throw TypeError('directive value must be a function');
+  }
+
+  if (!observer) {
+    // the observer instance is shared for performance reasons
+    // more information: https://github.com/WICG/ResizeObserver/issues/59
+    observer = new ResizeObserver(entries => {
+      entries.forEach(event => {
+        event.target.glResizeHandler(event);
+      });
+    });
+  }
+
+  el.glResizeHandler = resizeHandler;
+  observer.observe(el);
+};
+
+const detachObserver = el => {
+  if (el.glResizeHandler) {
+    var _observer;
+
+    delete el.glResizeHandler;
+    (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.unobserve(el);
+  }
+};
+
+const GlResizeObserverDirective = {
+  bind(el, _ref) {
+    let {
+      value: resizeHandler,
+      arg: enabled = true
+    } = _ref;
+
+    if (enabled) {
+      attachObserver(el, resizeHandler);
+    }
+  },
+
+  update(el, _ref2) {
+    let {
+      value: resizeHandler,
+      arg: enabled = true
+    } = _ref2;
+
+    if (enabled) {
+      attachObserver(el, resizeHandler);
+    } else {
+      detachObserver(el);
+    }
+  },
+
+  unbind: detachObserver
+};
+
+export { GlResizeObserverDirective };
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/safe_html/constants.js b/app/assets/javascripts/gitlab-ui/dist/directives/safe_html/constants.js
new file mode 100644
index 00000000000000..a593a5396faf57
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/safe_html/constants.js
@@ -0,0 +1,5 @@
+// See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1421#note_617098438
+// for more details
+const forbiddenDataAttrs = ['data-remote', 'data-url', 'data-type', 'data-method'];
+
+export { forbiddenDataAttrs };
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/safe_html/safe_html.documentation.js b/app/assets/javascripts/gitlab-ui/dist/directives/safe_html/safe_html.documentation.js
new file mode 100644
index 00000000000000..309e640cee971c
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/safe_html/safe_html.documentation.js
@@ -0,0 +1,8 @@
+var description = "# Safe Html\n\nA Vue Directive to sanitize HTML to avoid any XSS vulnerabilities.\n\n<!-- STORY -->\n\n## Usage\n\nThis directive can be used to sanitize HTML code which may contain user input, to prevent cross-site\nscripting (XSS) vulnerabilities.\n\nUnder the hood, it uses [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the provided HTML.\n\nDOMPurify will strip out dangerous HTML and will keep the safe HTML. You can refer complete list of\n[tags][1] and [attributes][2] allowed by DOMPurify.\n\n[1]: https://github.com/cure53/DOMPurify/blob/main/src/tags.js\n[2]: https://github.com/cure53/DOMPurify/blob/main/src/attrs.js\n\n## Example\n\n```html\n<script>\nimport { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';\n\nexport default {\n  directives: {\n    SafeHtml,\n  },\n  data() {\n    return {\n      rawHtml: \"Hello! <script>alert('XSS')</script>\",\n    };\n  },\n};\n</script>\n\n<template>\n  <div v-safe-html=\"rawHtml\"></div>\n</template>\n```\n\n## Advanced configuration\n\n```js\n// It allows only <b> tags\nconst config = { ALLOWED_TAGS: ['b'] };\n\n// It doesn't allow any html tags\nconst config = { ALLOWED_TAGS: [] };\n```\n\n```html\n<div v-safe-html:[config]=\"rawHtml\"></div>\n```\n\nFor advanced configuration options, please refer to [DOMPurify's documentation](https://github.com/cure53/DOMPurify#can-i-configure-dompurify).\n\n### Notes\n\n1. `target` attribute is not allowed by default - See <https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1427>.\n1. To know more about other tips & caveats - See <https://gitlab.com/groups/gitlab-org/-/epics/4273#caveats>.\n";
+
+var safe_html_documentation = {
+  followsDesignSystem: false,
+  description
+};
+
+export default safe_html_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/safe_html/safe_html.js b/app/assets/javascripts/gitlab-ui/dist/directives/safe_html/safe_html.js
new file mode 100644
index 00000000000000..f335e9968f1358
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/safe_html/safe_html.js
@@ -0,0 +1,31 @@
+import { sanitize } from 'dompurify';
+import { forbiddenDataAttrs } from './constants';
+
+// avoiding additional serialize/parse round trip.
+// See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1782
+// and https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2127
+// for more details.
+
+const DEFAULT_CONFIG = {
+  RETURN_DOM_FRAGMENT: true,
+  FORBID_ATTR: [...forbiddenDataAttrs]
+};
+
+const transform = (el, binding) => {
+  if (binding.oldValue !== binding.value) {
+    var _binding$arg;
+
+    const config = { ...DEFAULT_CONFIG,
+      ...((_binding$arg = binding.arg) !== null && _binding$arg !== void 0 ? _binding$arg : {})
+    };
+    el.textContent = '';
+    el.appendChild(sanitize(binding.value, config));
+  }
+};
+
+const SafeHtmlDirective = {
+  bind: transform,
+  update: transform
+};
+
+export { SafeHtmlDirective };
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/safe_link/mock_data.js b/app/assets/javascripts/gitlab-ui/dist/directives/safe_link/mock_data.js
new file mode 100644
index 00000000000000..2636ae21394134
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/safe_link/mock_data.js
@@ -0,0 +1,10 @@
+const absoluteUrls = ['http://example.org', 'http://example.org:8080', 'https://example.org', 'https://example.org:8080', 'https://192.168.1.1', 'ftp://192.168.1.1', 'mailto:someone@example.com'];
+/* eslint-disable no-script-url */
+
+const javascriptUrls = ['javascript:', 'javascript:alert("XSS")', 'jav\tascript:alert("XSS");'];
+/* eslint-disable no-script-url */
+
+const encodedJavaScriptUrls = ['&#0000106&#0000097&#0000118&#0000097&#0000115&#0000099&#0000114&#0000105&#0000112&#0000116&#0000058&#0000097&#0000108&#0000101&#0000114&#0000116&#0000040&#0000039&#0000088&#0000083&#0000083&#0000039&#0000041', '&#106;&#97;&#118;&#97;&#115;&#99;&#114;&#105;&#112;&#116;&#58;&#97;&#108;&#101;&#114;&#116;&#40;&#39;&#88;&#83;&#83;&#39;&#41;', '&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29', ' &#14;  javascript:alert("XSS");'];
+const relativeUrls = ['./relative/link', '../relative/link', '/relative/link', '/users/sign_in', '#docs/link', '#'];
+
+export { absoluteUrls, encodedJavaScriptUrls, javascriptUrls, relativeUrls };
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/safe_link/safe_link.documentation.js b/app/assets/javascripts/gitlab-ui/dist/directives/safe_link/safe_link.documentation.js
new file mode 100644
index 00000000000000..63e6b6430ca0c0
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/safe_link/safe_link.documentation.js
@@ -0,0 +1,9 @@
+var description = "# Safe Link Directive\n\nA Vue directive to make the hyperlinks secure by default.\n\n<!-- STORY -->\n\n## Security measures\n\n### rel\n\nWhen setting target to `_blank`, the rel attribute gets set automatically to `noopener noreferrer`,\nthis is done to avoid the `window.opener` [API exploit]. If you set the `rel` attribute manually,\nthis will overwrite the aforementioned logic.\n\n### href\n\nThis directive enforces \"safe\" URLs. What this means is that, if the provided `href`\ndoesn't point to a safe protocol (one of `http:`, `https:`, `mailto:` or `ftp:`), then it is\nreplaced with `about:blank` to prevent [URL injections].\n\n```html\n<script>\nimport { GlSafeLinkDirective as SafeLink } from '@gitlab/ui';\n\nexport default {\n  data() {\n    return {\n      url: 'javascript:alert(1)',\n    };\n  },\n  directives: { SafeLink },\n};\n</script>\n<template>\n  <a v-safe-link href=\"url\" target=\"_blank\">Click</a>\n  <!-- Renders to: <a href=\"about:blank\" target=\"_blank\">Click</a> -->\n</template>\n```\n\n[API exploit]: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/\n[URL injections]: https://vuejs.org/v2/guide/security.html#Injecting-URLs\n";
+
+var safe_link_documentation = {
+  followsDesignSystem: false,
+  description,
+  examples: false
+};
+
+export default safe_link_documentation;
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/safe_link/safe_link.js b/app/assets/javascripts/gitlab-ui/dist/directives/safe_link/safe_link.js
new file mode 100644
index 00000000000000..28ff2e89c1e864
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/safe_link/safe_link.js
@@ -0,0 +1,78 @@
+import Vue from 'vue';
+
+const getBaseURL = () => {
+  const {
+    protocol,
+    host
+  } = window.location;
+  return `${protocol}//${host}`;
+};
+
+const isExternalURL = (target, hostname) => {
+  return target === '_blank' && hostname !== window.location.hostname;
+};
+
+const secureRel = rel => {
+  const rels = rel ? rel.trim().split(' ') : [];
+
+  if (!rels.includes('noopener')) {
+    rels.push('noopener');
+  }
+
+  if (!rels.includes('noreferrer')) {
+    rels.push('noreferrer');
+  }
+
+  return rels.join(' ');
+};
+
+const isSafeURL = url => {
+  try {
+    const parsedURL = new URL(url, getBaseURL());
+    return ['http:', 'https:', 'mailto:', 'ftp:'].includes(parsedURL.protocol);
+  } catch (e) {
+    return false;
+  }
+};
+
+const transform = function (el) {
+  let {
+    arg: {
+      skipSanitization = false
+    } = {}
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  if (skipSanitization) {
+    return;
+  }
+
+  const {
+    href,
+    target,
+    rel,
+    hostname
+  } = el;
+
+  if (!isSafeURL(href)) {
+    el.href = 'about:blank';
+  }
+
+  if (isExternalURL(target, hostname)) {
+    el.rel = secureRel(rel);
+  }
+};
+
+const SafeLinkDirective = {
+  inserted: transform,
+  update: function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    Vue.nextTick(() => {
+      transform(...args);
+    });
+  }
+};
+
+export { SafeLinkDirective };
diff --git a/app/assets/javascripts/gitlab-ui/dist/directives/tooltip.js b/app/assets/javascripts/gitlab-ui/dist/directives/tooltip.js
new file mode 100644
index 00000000000000..cd328c72783c5b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/directives/tooltip.js
@@ -0,0 +1 @@
+export { VBTooltip as GlTooltipDirective } from 'bootstrap-vue/esm/index.js';
diff --git a/app/assets/javascripts/gitlab-ui/dist/utility_classes.js b/app/assets/javascripts/gitlab-ui/dist/utility_classes.js
new file mode 100644
index 00000000000000..8b137891791fe9
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utility_classes.js
@@ -0,0 +1 @@
+
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils.js b/app/assets/javascripts/gitlab-ui/dist/utils.js
new file mode 100644
index 00000000000000..70fb20b4194cfd
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils.js
@@ -0,0 +1 @@
+export { default as GlBreakpointInstance, breakpoints } from './utils/breakpoints';
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/breakpoints.js b/app/assets/javascripts/gitlab-ui/dist/utils/breakpoints.js
new file mode 100644
index 00000000000000..9096ec201c70d8
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/breakpoints.js
@@ -0,0 +1,24 @@
+const breakpoints = {
+  xl: 1200,
+  lg: 992,
+  md: 768,
+  sm: 576,
+  xs: 0
+};
+const BreakpointInstance = {
+  windowWidth: () => window.innerWidth,
+
+  getBreakpointSize() {
+    const windowWidth = this.windowWidth();
+    const breakpoint = Object.keys(breakpoints).find(key => windowWidth > breakpoints[key]);
+    return breakpoint;
+  },
+
+  isDesktop() {
+    return ['xl', 'lg'].includes(this.getBreakpointSize());
+  }
+
+};
+
+export default BreakpointInstance;
+export { breakpoints };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/charts/config.js b/app/assets/javascripts/gitlab-ui/dist/utils/charts/config.js
new file mode 100644
index 00000000000000..d1b13191b57174
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/charts/config.js
@@ -0,0 +1,553 @@
+import castArray from 'lodash/castArray';
+import isArray from 'lodash/isArray';
+import merge from 'lodash/merge';
+import Breakpoints from '../breakpoints';
+import { columnOptions } from '../constants';
+import { areDatesEqual } from '../datetime_utility';
+import { engineeringNotation } from '../number_utils';
+import { hexToRgba } from '../utils';
+import { arrowSymbol, ANNOTATIONS_SERIES_NAME, CHART_TYPE_BAR, CHART_TYPE_LINE } from './constants';
+
+const blue500 = '#1f75cb';
+
+const defaultAreaOpacity = 0.2;
+const defaultFontSize = 12;
+const defaultHeight = 400;
+const defaultWidth = 300;
+const validRenderers = ['canvas', 'svg'];
+const axes = {
+  name: 'Value',
+  type: 'value',
+  nameLocation: 'center'
+};
+const xAxis = merge({}, axes, {
+  boundaryGap: false,
+  splitLine: {
+    show: false
+  }
+});
+const yAxis = merge({}, axes, {
+  nameGap: 50,
+  axisLabel: {
+    formatter: num => engineeringNotation(num, 2)
+  }
+});
+const grid = {
+  top: 16,
+  bottom: 44,
+  left: 64,
+  right: 32
+};
+const gridWithSecondaryYAxis = { ...grid,
+  right: 64
+};
+const lineStyle = {
+  symbol: 'circle',
+  type: 'line',
+  width: 2
+};
+/**
+ * Annotations series consists of annotations lines
+ * along with markers. Annotations co-exist with data
+ * series but have their own virtual coords so that they stay put
+ * irrespective of data series extents.
+ */
+
+const annotationsYAxisCoords = {
+  min: 0,
+  pos: 3,
+  // 3% height of chart's grid
+  max: 100,
+  show: false
+};
+const symbolSize = 6;
+/**
+ * These comparison operators are currently in monitoring
+ * charts that have alerting related data.
+ *
+ * {Array} Possible values for greater than
+ */
+
+const GREATER_THAN = ['>', '&gt;'];
+/**
+ * These comparison operators are currently in monitoring
+ * charts that have alerting related data.
+ *
+ * {Array} Possible values for less than
+ */
+
+const LESS_THAN = ['<', '&lt;'];
+/**
+ * All default dataZoom configs will have slider & inside
+ * (for reference, see https://gitlab.com/gitlab-org/gitlab-ui/issues/240)
+ * Inside is disabled for larger viewports (lg and xl)
+ * and is specifically to enable touch zoom for mobile devices
+ * @param {Object} options
+ */
+
+const getDataZoomConfig = function () {
+  let {
+    filterMode = 'none'
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const disabledBreakpoints = ['lg', 'xl'];
+  const disabled = disabledBreakpoints.includes(Breakpoints.getBreakpointSize());
+  const minSpan = filterMode === 'none' ? 0.01 : null;
+  return {
+    grid: {
+      bottom: 81
+    },
+    xAxis: {
+      nameGap: 67
+    },
+    dataZoom: [{
+      type: 'slider',
+      bottom: 22,
+      filterMode,
+      minSpan
+    }, {
+      type: 'inside',
+      filterMode,
+      minSpan,
+      disabled
+    }]
+  };
+}; // All chart options can be merged but series
+// needs to be concatenated.
+// Series can be an object for single series or
+// an array of objects.
+
+const mergeSeriesToOptions = function (options) {
+  let series = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  const {
+    series: optSeries = []
+  } = options;
+  return { ...options,
+    series: [...castArray(series), ...castArray(optSeries)]
+  };
+};
+/**
+ * If an annotation series exists, the chart options should have an
+ * array of yAxis settings so that the series can exist in its own
+ * coordinate system without interfering with the data series
+ *
+ * @param {Object} options options to merge annotation series yAxis with
+ * @param {Boolean} hasAnnotations if annotation series yAxis should be merged
+ * @returns {Object} options
+ */
+
+const mergeAnnotationAxisToOptions = function (options) {
+  let hasAnnotations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return { ...options,
+    ...(hasAnnotations && {
+      yAxis: [options.yAxis, annotationsYAxisCoords]
+    })
+  };
+};
+const dataZoomAdjustments = dataZoom => {
+  // handle cases where dataZoom is array and object.
+  const useSlider = dataZoom && isArray(dataZoom) ? dataZoom.length : Boolean(dataZoom);
+  return useSlider ? getDataZoomConfig({
+    filterMode: 'weakFilter'
+  }) : [];
+};
+const getToolboxConfig = function () {
+  let {
+    restoreIconPath = '',
+    saveImageIconPath = '',
+    zoomIconPath = '',
+    backIconPath = ''
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const toolboxConfig = {
+    toolbox: {
+      feature: {}
+    }
+  };
+
+  if (restoreIconPath.length) {
+    toolboxConfig.toolbox.feature.restore = {
+      icon: restoreIconPath
+    };
+  }
+
+  if (saveImageIconPath.length) {
+    toolboxConfig.toolbox.feature.saveAsImage = {
+      icon: restoreIconPath
+    };
+  }
+
+  if (zoomIconPath.length && backIconPath.length) {
+    toolboxConfig.toolbox.feature.dataZoom = {
+      icon: {
+        zoom: zoomIconPath,
+        back: backIconPath
+      }
+    };
+  }
+
+  return toolboxConfig;
+};
+/**
+ * Generate eCharts markArea arrays for thresholds and annotations.
+ *
+ * This method purposefully has no knowledge of comparison
+ * operators used in thresholds as it is not necessary and instead
+ * expects explict value bounds
+ *
+ * Examples:
+ * { min: 7, max: 10 } => markArea from 7 to 10
+ * { min: 1, max: 7 } => markArea from 1 to 7
+ *
+ * If min and max are equal it would be markLine and would be
+ * generated by `generateMarkLines`
+ *
+ * @param {Object} threshold Threshold/Annotation object with min and max values
+ * @param {String} axis markArea is generated against this axis
+ * @returns {Array}
+ */
+
+const generateMarkArea = function (_ref) {
+  let {
+    min,
+    max
+  } = _ref;
+  let axis = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'yAxis';
+  return [{
+    [axis]: min
+  }, {
+    [axis]: max
+  }];
+};
+/**
+ * Generate eCharts markLine objects for thresholds and annotations.
+ *
+ * This method purposefully has no knowledge of comparison
+ * operators used in thresholds as it is not necessary and instead
+ * expects explict value bounds
+ *
+ * In order to continue supporting existing thresholds format, min
+ * is passed as undefined so the correct markLine object is generated.
+ *
+ * For annotations, min and max will be the same value.
+ *
+ * Threshold Examples:
+ * { max: 7 } => markLine at 7
+ *
+ * Annotation Examples:
+ * { min: 7, max: 7 } => markLine at 7
+ *
+ * @param {Object} threshold Threshold/Annotation object with min and max values
+ * @param {String} axis markLine is generated against this axis
+ * @returns {Object}
+ */
+
+
+const generateMarkLines = function (_ref2) {
+  let {
+    min,
+    max
+  } = _ref2;
+  let axis = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'yAxis';
+
+  if (min) {
+    return {
+      [axis]: min
+    };
+  }
+
+  return {
+    [axis]: max
+  };
+};
+/**
+ * Generates markPoints that are placed under the markLines.
+ *
+ * These are used only in annotation lines. For annotation lines,
+ * both min and max are same values so only one is enough to generate
+ * the markPoint.
+ *
+ * @param {Object} annotation object
+ * @return {Object}
+ */
+
+
+const generateMarkPoints = _ref3 => {
+  let {
+    min,
+    tooltipData
+  } = _ref3;
+  return {
+    name: 'annotations',
+    xAxis: min,
+    yAxis: 0,
+    tooltipData
+  };
+};
+/**
+ * Generate set of markAreas and markLines to draw on charts
+ * as alert thresholds.
+ *
+ * Alert thresholds always have a markLine associated with a markArea
+ *
+ * @param {Array} thresholds Array of alert thresholds
+ * @returns {Object} markAreas and markLines
+ */
+
+
+function getThresholdConfig(thresholds) {
+  if (!thresholds.length) {
+    return {};
+  }
+
+  const data = thresholds.reduce((acc, alert) => {
+    const {
+      threshold,
+      operator
+    } = alert;
+
+    if (GREATER_THAN.includes(operator)) {
+      acc.areas.push(generateMarkArea({
+        min: threshold,
+        max: Infinity
+      }));
+    } else if (LESS_THAN.includes(operator)) {
+      acc.areas.push(generateMarkArea({
+        min: Number.NEGATIVE_INFINITY,
+        max: threshold
+      }));
+    }
+
+    acc.lines.push(generateMarkLines({
+      max: threshold
+    }));
+    return acc;
+  }, {
+    lines: [],
+    areas: []
+  });
+  return {
+    markLine: {
+      data: data.lines
+    },
+    markArea: {
+      data: data.areas,
+      zlevel: -1
+    }
+  };
+}
+/**
+ * This method is only for testing both markLines and markAreas
+ * that are used for annotations.
+ *
+ * `getAnnotationsConfig` as of %12.10 supports only markLines.
+ * But this method can generate lines, points and areas.
+ *
+ * @param {Array} annotations Array of annotation objects
+ * @returns {Object} { areas, lines, points }
+ */
+
+const parseAnnotations = annotations => annotations.reduce((acc, annotation) => {
+  // because only markLines are supported all cases will
+  // satisfy this condition. This is more of a sanity check
+  // until markAreas are supported.
+  // https://gitlab.com/gitlab-org/gitlab/-/issues/212910
+  if (areDatesEqual(annotation.min, annotation.max)) {
+    acc.lines.push(generateMarkLines(annotation, 'xAxis'));
+    acc.points.push(generateMarkPoints(annotation));
+    return acc;
+  }
+
+  acc.areas.push(generateMarkArea(annotation, 'xAxis'));
+  return acc;
+}, {
+  areas: [],
+  lines: [],
+  points: []
+});
+/**
+ * Generate set of markAreas and markLines to draw on charts
+ * as annotations.
+ *
+ * Annotations as of %12.10 will only be markLines.
+ * markAreas are not supported yet. They are generated by
+ * `parseAnnotations` but not rendered.
+ *
+ * @param {Array} annotations Array of annotations
+ * @returns {Object} { markLines }
+ */
+
+const getAnnotationsConfig = annotations => {
+  if (!annotations.length) {
+    return {};
+  } // annotations parsing is moved out so that it can be tested
+  // for markLines and markAreas.
+
+
+  const {
+    lines,
+    points
+  } = parseAnnotations(annotations);
+  return {
+    markLine: {
+      lineStyle: {
+        color: blue500
+      },
+      silent: true,
+      data: lines
+    },
+    markPoint: {
+      itemStyle: {
+        color: blue500
+      },
+      symbol: arrowSymbol,
+      symbolSize: '8',
+      symbolOffset: [0, ' 60%'],
+      data: points
+    }
+  };
+};
+/**
+ * Given thresholds and annotations options, this method generates
+ * an annotation series that co-exists along with the data series.
+ *
+ * yAxis option is useful in cases where multiple yAxis settings
+ * are used in a chart. Currently, all of our charts have single
+ * yAxis settings.
+ *
+ * @param {Object} params Thresholds, annotations and yAxis options
+ * @returns {Object} Annotation series
+ */
+
+const generateAnnotationSeries = function (annotations) {
+  let yAxisIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+
+  if (!annotations.length) {
+    return null;
+  }
+
+  return merge({
+    name: ANNOTATIONS_SERIES_NAME,
+    yAxisIndex,
+    type: 'scatter',
+    data: []
+  }, getAnnotationsConfig(annotations));
+};
+/**
+ * This method generates the data series and relevant defaults for a bar chart
+ *
+ * @param {Object} options
+ * @param {string} options.name - xAxis name for the chart
+ * @param {string} options.color - color to render the data series
+ * @param {Array} options.data - data set to be rendered
+ * @param {string} [options.stack] - controls how the stacked charts should render either `stacked` or `tiled`
+ * @param {number} [options.yAxisIndex] - specifies the yAxis to use (if there are multiple)
+ * @returns {Object} Bar chart series
+ */
+
+const generateBarSeries = _ref4 => {
+  let {
+    name,
+    color,
+    data = [],
+    stack = columnOptions.stacked,
+    yAxisIndex = 0
+  } = _ref4;
+  return {
+    type: CHART_TYPE_BAR,
+    name,
+    data,
+    stack,
+    barMaxWidth: '50%',
+    yAxisIndex,
+    itemStyle: {
+      color: hexToRgba(color, 0.2),
+      borderColor: color,
+      borderWidth: 1
+    },
+    emphasis: {
+      itemStyle: {
+        color: hexToRgba(color, 0.4)
+      }
+    }
+  };
+};
+/**
+ * This method generates the data series and relevant defaults for a line chart
+ *
+ * @param {Object} options
+ * @param {string} options.name - xAxis name for the chart
+ * @param {string} options.color - color to render the data series
+ * @param {Array} options.data - data set to be rendered
+ * @param {number} [options.yAxisIndex] - specifies the yAxis to use (if there are multiple)
+ * @returns {Object} Line chart series
+ */
+
+const generateLineSeries = _ref5 => {
+  let {
+    name,
+    color,
+    data = [],
+    yAxisIndex = 0
+  } = _ref5;
+  return {
+    name,
+    data,
+    type: CHART_TYPE_LINE,
+    yAxisIndex,
+    lineStyle: {
+      color
+    },
+    itemStyle: {
+      color
+    }
+  };
+};
+/**
+ * The method works well if tooltip content should be against y-axis values.
+ * However, for bar charts, the tooltip should be against x-axis values.
+ * This method should be updated to work with all types of visualizations.
+ * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/674
+ *
+ * @param {Object} params series data
+ * @param {String} yAxisTitle y-axis title
+ * @returns {Object} tooltip title and content
+ */
+
+const getDefaultTooltipContent = function (params) {
+  let yAxisTitle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  const seriesDataLength = params.seriesData.length;
+  const {
+    xLabels,
+    tooltipContent
+  } = params.seriesData.reduce((acc, chartItem) => {
+    const [title, value] = chartItem.value || []; // Let's use the y axis title as series name when only one series exists
+    // This way, TooltipDefaultFormat will display the y axis title as label
+
+    const seriesName = seriesDataLength === 1 && yAxisTitle ? yAxisTitle : chartItem.seriesName;
+    const color = seriesDataLength === 1 ? '' : chartItem.color;
+    acc.tooltipContent[seriesName] = {
+      value,
+      color
+    };
+
+    if (!acc.xLabels.includes(title)) {
+      acc.xLabels.push(title);
+    }
+
+    return acc;
+  }, {
+    xLabels: [],
+    tooltipContent: {}
+  });
+  return {
+    xLabels,
+    tooltipContent
+  };
+};
+var config = {
+  grid,
+  xAxis,
+  yAxis
+};
+
+export default config;
+export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getToolboxConfig, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, validRenderers, xAxis, yAxis };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/charts/constants.js b/app/assets/javascripts/gitlab-ui/dist/utils/charts/constants.js
new file mode 100644
index 00000000000000..f7c8b8fb3f79c4
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/charts/constants.js
@@ -0,0 +1,67 @@
+/**
+ * As of %12.10 all annotations are added as a decorations
+ * by piggybacking a scatter series. The series should
+ * have 'annotations' as name for the annotation tooltips
+ * to work.
+ *
+ * More info here https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28825
+ *
+ */
+const ANNOTATIONS_SERIES_NAME = 'annotations';
+/**
+ * Annotations have a line (markLine) and an arrow (markPoint).
+ * When the markPoint is hovered, a tooltip is displayed to
+ * show the annotation description.
+ *
+ * All markPoints have this component type
+ */
+
+const ANNOTATIONS_COMPONENT_TYPE = 'markPoint';
+/**
+ * This is so that the mouse doesn't go over the
+ * tooltip and call mouseout which will hide the
+ * tooltip.
+ */
+
+const ANNOTATION_TOOLTIP_TOP_OFFSET = 10;
+/**
+ * This is a slight offset that gets applied to the left
+ * of the chart tooltips to ensure a correct position.
+ */
+
+const TOOLTIP_LEFT_OFFSET = 2;
+/**
+ * This is an offset that gets applied between the mouse
+ * cursor and the left of the chart data tooltips to provide
+ * some spacing.
+ */
+
+const DATA_TOOLTIP_LEFT_OFFSET = 10;
+/**
+ * These are the accepted values for the layout prop
+ * of the chart legend component
+ */
+
+const LEGEND_LAYOUT_INLINE = 'inline';
+const LEGEND_LAYOUT_TABLE = 'table';
+/**
+ * Default values for the chart legend field labels
+ */
+
+const LEGEND_AVERAGE_TEXT = 'Avg';
+const LEGEND_CURRENT_TEXT = 'Current';
+const LEGEND_MIN_TEXT = 'Min';
+const LEGEND_MAX_TEXT = 'Max';
+/**
+ * These arrow symbols are used as markPoints under the annotations lines
+ * within area and line charts. This icon doesn't exist in the svg
+ * library yet. The below issue is to track the progress of the svg icon
+ * https://gitlab.com/gitlab-org/gitlab-svgs/-/issues/118
+ */
+
+const arrowSymbol = 'path://m5 229 5 8h-10z'; // Constants for the type property of charts
+
+const CHART_TYPE_BAR = 'bar';
+const CHART_TYPE_LINE = 'line';
+
+export { ANNOTATIONS_COMPONENT_TYPE, ANNOTATIONS_SERIES_NAME, ANNOTATION_TOOLTIP_TOP_OFFSET, CHART_TYPE_BAR, CHART_TYPE_LINE, DATA_TOOLTIP_LEFT_OFFSET, LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, TOOLTIP_LEFT_OFFSET, arrowSymbol };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/charts/mock_data.js b/app/assets/javascripts/gitlab-ui/dist/utils/charts/mock_data.js
new file mode 100644
index 00000000000000..3aaee4327829bc
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/charts/mock_data.js
@@ -0,0 +1,212 @@
+import { hexToRgba } from '../utils';
+import { colorFromDefaultPalette } from './theme';
+
+const blue500 = '#1f75cb';
+
+const mockDefaultDataZoomConfig = {
+  dataZoom: [{
+    bottom: 22,
+    filterMode: 'none',
+    minSpan: 0.01,
+    type: 'slider'
+  }, {
+    type: 'inside',
+    filterMode: 'none',
+    minSpan: 0.01,
+    disabled: true
+  }],
+  grid: {
+    bottom: 81
+  },
+  xAxis: {
+    nameGap: 67
+  }
+};
+const mockDefaultChartOptions = {
+  grid: {
+    top: 16,
+    bottom: 44,
+    left: 64,
+    right: 32
+  },
+  xAxis: {
+    name: 'Value',
+    type: 'value',
+    nameLocation: 'center',
+    boundaryGap: false,
+    splitLine: {
+      show: false
+    },
+    axisPointer: {
+      show: true,
+      label: {},
+      lineStyle: {
+        type: 'solid'
+      }
+    }
+  },
+  yAxis: {
+    name: 'Value',
+    type: 'value',
+    nameLocation: 'center',
+    nameGap: 50,
+    axisLabel: {},
+    axisTick: {
+      show: false
+    }
+  },
+  legend: {
+    show: false
+  }
+};
+/**
+ * This is currently used in area.stories.js and line.stories.js
+ */
+
+const mockAnnotationsSeries = {
+  series: [{
+    type: 'scatter',
+    name: 'annotations',
+    data: [],
+    markLine: {
+      lineStyle: {
+        color: blue500
+      },
+      data: [{
+        xAxis: '2018-01-25T01:00:00.000Z'
+      }, {
+        xAxis: '2018-01-25T10:00:00.000Z'
+      }, {
+        xAxis: '2018-02-06T08:00:00.000Z'
+      }]
+    },
+    markPoint: {
+      symbol: 'path://m5 229 5 8h-10z',
+      symbolSize: '8',
+      symbolOffset: [0, ' 60%'],
+      itemStyle: {
+        color: blue500
+      },
+      data: [{
+        name: 'annotations',
+        xAxis: '2018-01-25T01:00:00.000Z',
+        yAxis: 0,
+        tooltipData: {
+          content: 'Scranton strangler was caught.'
+        }
+      }, {
+        name: 'annotations',
+        xAxis: '2018-01-25T10:00:00.000Z',
+        yAxis: 0,
+        tooltipData: {
+          content: 'Tobys green car is missing.'
+        }
+      }, {
+        name: 'annotations',
+        xAxis: '2018-02-06T08:00:00.000Z',
+        yAxis: 0,
+        tooltipData: {
+          content: 'It was actually Toby!'
+        }
+      }]
+    }
+  }]
+};
+/**
+ * This is currently used in area.stories.js and line.stories.js
+ */
+
+const mockAnnotationsConfigs = {
+  annotations: [{
+    min: '2018-01-25T01:00:00.000Z',
+    max: '2018-01-25T01:00:00.000Z',
+    tooltipData: {
+      content: 'Scranton strangler was caught.'
+    }
+  }, {
+    min: '2018-01-25T10:00:00.000Z',
+    max: '2018-01-25T10:00:00.000Z',
+    tooltipData: {
+      content: 'Tobys green car is missing.'
+    }
+  }, {
+    min: '2018-02-06T08:00:00.000Z',
+    max: '2018-02-06T08:00:00.000Z',
+    tooltipData: {
+      content: 'It was actually Toby!'
+    }
+  }]
+};
+const mockDefaultStackedBarData = [{
+  name: 'Fun 1',
+  data: [58, 49, 38, 23, 27, 68, 38, 35, 7, 64, 65, 31]
+}, {
+  name: 'Fun 2',
+  data: [8, 6, 34, 19, 9, 7, 17, 25, 14, 7, 10, 32]
+}, {
+  name: 'Fun 3',
+  data: [67, 60, 66, 32, 61, 54, 13, 50, 16, 11, 47, 28]
+}, {
+  name: 'Fun 4',
+  data: [8, 9, 5, 40, 13, 19, 58, 21, 47, 59, 23, 46]
+}];
+const mockDefaultStackedLineData = [{
+  name: 'Stacked median line',
+  data: [67, 60, 66, 32, 61, 54, 13, 50, 16, 11, 47, 28]
+}];
+const mockDefaultLineData = [{
+  name: 'Median line',
+  data: [['Joe', 1120], ['Sarah', 732], ['Tom', 501], ['Mary', 634], ['Mike', 290], ['Ben', 130], ['Jane', 120]]
+}];
+const mockDefaultBarData = [{
+  name: 'Full',
+  data: [['Joe', 1220], ['Sarah', 932], ['Tom', 901], ['Mary', 934], ['Mike', 1290], ['Ben', 1330], ['Jane', 1320]]
+}];
+const mockRawBarData = [['Mon', 1220], ['Tue', 932], ['Wed', 901], ['Thu', 934], ['Fri', 1290], ['Sat', 1330], ['Sun', 1320]];
+const color = colorFromDefaultPalette(0);
+const mockDefaultLineChartConfig = {
+  name: 'Line chart',
+  data: [],
+  type: 'line',
+  yAxisIndex: 0,
+  lineStyle: {
+    color
+  },
+  itemStyle: {
+    color
+  }
+};
+const mockDefaultBarChartConfig = {
+  type: 'bar',
+  name: 'Bar chart',
+  data: [],
+  stack: null,
+  barMaxWidth: '50%',
+  yAxisIndex: 0,
+  itemStyle: {
+    color: hexToRgba(color, 0.2),
+    borderColor: color,
+    borderWidth: 1
+  },
+  emphasis: {
+    itemStyle: {
+      color: hexToRgba(color, 0.4)
+    }
+  }
+};
+const mockSecondaryData = [{
+  name: 'Secondary 1',
+  data: [13, 25, 38, 23, 27, 28, 29, 27, 1, 15, 65, 31]
+}];
+const mockSecondaryBarData = [{
+  name: 'Secondary',
+  type: 'bar',
+  data: [['Joe', 220], ['Sarah', 392], ['Tom', 291], ['Mary', 594], ['Mike', 320], ['Ben', 230], ['Jane', 120], ['Anne', 290]]
+}];
+const mockSecondaryTrendlineData = [{
+  type: 'line',
+  name: 'Median line',
+  data: [['Joe', 220], ['Sarah', 392], ['Tom', 291], ['Mary', 594], ['Mike', 320], ['Ben', 230], ['Jane', 120], ['Anne', 290]]
+}];
+
+export { mockAnnotationsConfigs, mockAnnotationsSeries, mockDefaultBarChartConfig, mockDefaultBarData, mockDefaultChartOptions, mockDefaultDataZoomConfig, mockDefaultLineChartConfig, mockDefaultLineData, mockDefaultStackedBarData, mockDefaultStackedLineData, mockRawBarData, mockSecondaryBarData, mockSecondaryData, mockSecondaryTrendlineData };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/charts/story_config.js b/app/assets/javascripts/gitlab-ui/dist/utils/charts/story_config.js
new file mode 100644
index 00000000000000..71cb9f1f6b24fb
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/charts/story_config.js
@@ -0,0 +1,42 @@
+import times from 'lodash/times';
+import { SERIES_NAME, SERIES_NAME_SHORT } from '../stories_utils';
+import { marqueeSelectionSvgPath, redoSvgPath, clearAllSvgPath, downloadSvgPath } from '../svgs/svg_paths';
+import { colorFromDefaultPalette } from './theme';
+
+const toolbox = {
+  feature: {
+    dataZoom: {
+      icon: {
+        zoom: marqueeSelectionSvgPath,
+        back: redoSvgPath
+      }
+    },
+    restore: {
+      icon: clearAllSvgPath
+    },
+    saveAsImage: {
+      icon: downloadSvgPath
+    }
+  }
+};
+/**
+ * Generates series data for usage in chart examples
+ *
+ * @param {Number} amount number of generated series
+ * @param {String} nameType type of names - how long they should be
+ * @returns {Array} generated series data
+ */
+
+const generateSeriesData = function () {
+  let amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+  let nameType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SERIES_NAME_SHORT;
+  const defaultData = [820, 932, 960, 1150, 1290, 1330, 1390];
+  const name = SERIES_NAME[nameType];
+  return times(amount, index => ({
+    color: colorFromDefaultPalette(index),
+    data: defaultData.map(value => value * index),
+    name: `${name}${index + 1}`
+  }));
+};
+
+export { generateSeriesData, toolbox };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/charts/theme.js b/app/assets/javascripts/gitlab-ui/dist/utils/charts/theme.js
new file mode 100644
index 00000000000000..2f9839f9a59c15
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/charts/theme.js
@@ -0,0 +1,231 @@
+import { scrollHandleSvgPath } from '../svgs/svg_paths';
+import { hexToRgba } from '../utils';
+
+const whiteNormal = '#f0f0f0';
+const red500 = '#dd2b0e';
+const gray50 = '#f0f0f0';
+const gray100 = '#dbdbdb';
+const gray200 = '#bfbfbf';
+const gray300 = '#999';
+const gray500 = '#666';
+const gray600 = '#5e5e5e';
+const gray700 = '#525252';
+const gray900 = '#303030';
+const dataVizGreen500 = '#608b2f';
+const dataVizGreen600 = '#487900';
+const dataVizGreen700 = '#366800';
+const dataVizGreen800 = '#275600';
+const dataVizGreen900 = '#1a4500';
+const dataVizGreen950 = '#0f3300';
+const dataVizAqua500 = '#0094b6';
+const dataVizAqua600 = '#0080a1';
+const dataVizAqua700 = '#006887';
+const dataVizAqua800 = '#004d67';
+const dataVizAqua900 = '#003f57';
+const dataVizAqua950 = '#00293d';
+const dataVizBlue200 = '#b7c6ff';
+const dataVizBlue400 = '#748eff';
+const dataVizBlue500 = '#5772ff';
+const dataVizBlue600 = '#445cf2';
+const dataVizBlue700 = '#3547de';
+const dataVizBlue800 = '#232fcf';
+const dataVizBlue900 = '#1e23a8';
+const dataVizBlue950 = '#11118a';
+const dataVizMagenta500 = '#d84280';
+const dataVizMagenta600 = '#c52c6b';
+const dataVizMagenta700 = '#b31756';
+const dataVizMagenta800 = '#950943';
+const dataVizMagenta900 = '#7a0033';
+const dataVizMagenta950 = '#570028';
+const dataVizOrange500 = '#d14e00';
+const dataVizOrange600 = '#b24800';
+const dataVizOrange700 = '#944100';
+const dataVizOrange800 = '#6f3500';
+const dataVizOrange900 = '#5c2b00';
+const dataVizOrange950 = '#421e00';
+
+const themeName = 'gitlab';
+const heatmapHues = [gray100, dataVizBlue200, dataVizBlue400, dataVizBlue600, dataVizBlue800];
+const gaugeNeutralHues = [gray900, gray500];
+const gaugeSafeHues = [dataVizBlue500, dataVizBlue900];
+const gaugeWarningHue = dataVizOrange500;
+/**
+ * The default palette is based on the Categorical data palette
+ * Categorical data (also known as qualitative or thematic) uses hue to
+ * differentiate qualitative data, and lightness to differentiate quantitive data.
+ * More info: https://gitlab.com/gitlab-org/gitlab-design/-/issues/719#categorical
+ */
+
+const colorPaletteDefault = [dataVizBlue500, dataVizOrange600, dataVizAqua500, dataVizGreen700, dataVizMagenta800, dataVizBlue700, dataVizOrange800, dataVizAqua700, dataVizGreen900, dataVizMagenta950, dataVizBlue900, dataVizOrange950, dataVizAqua900, dataVizGreen600, dataVizMagenta700, dataVizBlue600, dataVizOrange700, dataVizAqua600, dataVizGreen800, dataVizMagenta900, dataVizBlue800, dataVizOrange900, dataVizAqua800, dataVizGreen950, dataVizMagenta500, dataVizBlue950, dataVizOrange500, dataVizAqua950, dataVizGreen500, dataVizMagenta600];
+const colorFromDefaultPalette = index => colorPaletteDefault[index % colorPaletteDefault.length];
+const axes = {
+  axisLabel: {
+    margin: 8,
+    show: true,
+    color: gray600,
+    hideOverlap: true
+  },
+  axisLine: {
+    show: false
+  },
+  axisPointer: {
+    lineStyle: {
+      type: 'solid',
+      color: gray600
+    },
+    label: {
+      show: false
+    }
+  },
+  axisTick: {
+    show: true,
+    alignWithLabel: true,
+    lineStyle: {
+      color: gray200
+    }
+  },
+  nameGap: 30,
+  nameTextStyle: {
+    fontStyle: 'bold'
+  },
+  splitLine: {
+    lineStyle: {
+      color: [gray200]
+    }
+  },
+  splitArea: {
+    show: false,
+    areaStyle: {
+      color: [hexToRgba(whiteNormal, 0.3), hexToRgba(gray300, 0.3)]
+    }
+  }
+};
+
+const isLineChartWithoutArea = options => Array.isArray(options === null || options === void 0 ? void 0 : options.series) && options.series.some(series => series.type === 'line' && !series.areaStyle);
+
+const createTheme = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    color: colorPaletteDefault,
+    backgroundColor: 'transparent',
+    textStyle: {
+      color: gray900
+    },
+    markLine: {
+      silent: true,
+      symbol: 'none',
+      label: {
+        show: false
+      },
+      lineStyle: {
+        color: red500,
+        width: 1,
+        type: 'dashed'
+      }
+    },
+    markArea: {
+      silent: true,
+      itemStyle: {
+        color: hexToRgba(red500, 0.1)
+      }
+    },
+    dataZoom: {
+      borderColor: 'transparent',
+      filterMode: 'none',
+      brushSelect: false,
+      dataBackground: {
+        lineStyle: {
+          width: 2,
+          color: gray200,
+          opacity: 1
+        },
+        // render unfilled zoom-graph if the series is a line chart without area styles
+        // more details: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2364#note_666637306
+        areaStyle: isLineChartWithoutArea(options) ? {} // Use empty object instead of null, see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2185#note_707711029 for more context
+        : {
+          color: gray50,
+          opacity: 1
+        }
+      },
+      fillerColor: hexToRgba(gray200, 0.23),
+      handleIcon: scrollHandleSvgPath,
+      handleStyle: {
+        borderColor: 'transparent',
+        color: gray500
+      },
+      handleSize: '50%',
+      labelFormatter: () => null,
+      textStyle: {
+        color: gray600
+      }
+    },
+    toolbox: {
+      top: '-5',
+      left: 'center',
+      itemSize: 14,
+      emphasis: {
+        iconStyle: {
+          borderWidth: 0,
+          color: gray700
+        }
+      },
+      iconStyle: {
+        color: gray200,
+        borderWidth: 0
+      },
+      itemGap: 8,
+      feature: {
+        dataZoom: {
+          title: {
+            zoom: 'Click to zoom in on a portion of the graph',
+            back: 'Remove selection'
+          }
+        },
+        restore: {
+          title: 'Remove all selections and return chart to default state'
+        },
+        saveAsImage: {
+          title: 'Save chart as an image',
+          name: 'graph'
+        }
+      }
+    },
+    markPoint: {
+      label: {
+        normal: {
+          textStyle: {
+            color: whiteNormal
+          }
+        },
+        emphasis: {
+          textStyle: {
+            color: whiteNormal
+          }
+        }
+      }
+    },
+    line: {
+      itemStyle: {
+        normal: {
+          borderWidth: 1
+        }
+      },
+      lineStyle: {
+        normal: {
+          width: 2
+        }
+      },
+      symbolSize: '6',
+      symbol: 'circle',
+      showSymbol: false,
+      smooth: false
+    },
+    categoryAxis: axes,
+    valueAxis: axes,
+    logAxis: axes,
+    timeAxis: axes
+  };
+};
+
+export default createTheme;
+export { colorFromDefaultPalette, colorPaletteDefault, gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue, heatmapHues, themeName };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/charts/utils.js b/app/assets/javascripts/gitlab-ui/dist/utils/charts/utils.js
new file mode 100644
index 00000000000000..3c807ad3b472c3
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/charts/utils.js
@@ -0,0 +1,58 @@
+import { ANNOTATIONS_SERIES_NAME, ANNOTATIONS_COMPONENT_TYPE } from './constants';
+
+/**
+ * Check if passed series has annotations related data.
+ *
+ * This is currently used in time series charts (area & line).
+ *
+ * @param {Array} series Array of series
+ * @returns {Boolean}
+ */
+
+const seriesHasAnnotations = function () {
+  let series = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return (series || []).filter(seriesData => {
+    var _seriesData$ANNOTATIO, _seriesData$ANNOTATIO2;
+
+    return seriesData.name === ANNOTATIONS_SERIES_NAME && ((_seriesData$ANNOTATIO = seriesData[ANNOTATIONS_COMPONENT_TYPE]) === null || _seriesData$ANNOTATIO === void 0 ? void 0 : (_seriesData$ANNOTATIO2 = _seriesData$ANNOTATIO.data) === null || _seriesData$ANNOTATIO2 === void 0 ? void 0 : _seriesData$ANNOTATIO2.length);
+  }).length !== 0;
+};
+/**
+ * Check if a data point is from an annotation series.
+ *
+ * This is triggered when hovered over time series charts.
+ *
+ * This is currently used in
+ * @param {Object} params data point object
+ * @returns {boolean}
+ */
+
+const isDataPointAnnotation = function () {
+  let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return params.name === ANNOTATIONS_SERIES_NAME && params.componentType === ANNOTATIONS_COMPONENT_TYPE;
+};
+/**
+ * Date formatter to make date strings more
+ * readable.
+ *
+ * This is currently used in area and line charts
+ * stories.
+ *
+ * @param {String} d date string
+ * @returns {String}
+ */
+
+const timeSeriesDateFormatter = function () {
+  let d = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+
+  if (!d) {
+    return '';
+  }
+
+  const date = new Date(d);
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  return `${date.getFullYear()}-${month}-${day}`;
+};
+
+export { isDataPointAnnotation, seriesHasAnnotations, timeSeriesDateFormatter };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/constants.js b/app/assets/javascripts/gitlab-ui/dist/utils/constants.js
new file mode 100644
index 00000000000000..0dcfb43966ca9c
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/constants.js
@@ -0,0 +1,254 @@
+import { POSITION } from '../components/utilities/truncate/constants';
+
+const glThemes$1 = 'indigo ,  blue ,  light-blue ,  green ,  red ,  light-red';
+const glIconSizes = '8 12 14 16 24 32 48 72';
+
+function appendDefaultOption(options) {
+  return { ...options,
+    default: ''
+  };
+}
+
+const COMMA = ',';
+const glThemes = glThemes$1.split(COMMA).map(glTheme => glTheme.trim());
+const variantOptions = {
+  primary: 'primary',
+  secondary: 'secondary',
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+  info: 'info',
+  light: 'light',
+  dark: 'dark'
+};
+const badgeSizeOptions = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg'
+};
+const badgeVariantOptions = {
+  muted: 'muted',
+  neutral: 'neutral',
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger'
+};
+const variantCssColorMap = {
+  muted: 'gl-text-gray-500',
+  neutral: 'gl-text-blue-100',
+  info: 'gl-text-blue-500',
+  success: 'gl-text-green-500',
+  warning: 'gl-text-orange-500',
+  danger: 'gl-text-red-500'
+};
+const targetOptions = ['_self', '_blank', '_parent', '_top', null];
+const sizeOptions = {
+  default: null,
+  sm: 'sm',
+  lg: 'lg'
+};
+const labelSizeOptions = {
+  default: null,
+  sm: 'sm'
+};
+const viewModeOptions = {
+  dark: 'dark',
+  light: 'light'
+};
+const labelColorOptions = { ...viewModeOptions
+};
+const avatarSizeOptions = [96, 64, 48, 32, 24, 16];
+const avatarsInlineSizeOptions = [32, 24];
+const avatarShapeOptions = {
+  circle: 'circle',
+  rect: 'rect'
+};
+const formStateOptions = {
+  default: null,
+  valid: true,
+  invalid: false
+};
+const buttonCategoryOptions = {
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary'
+};
+const buttonVariantOptions = {
+  default: 'default',
+  confirm: 'confirm',
+  info: 'info (deprecated)',
+  success: 'success (deprecated)',
+  warning: 'warning (deprecated)',
+  danger: 'danger',
+  dashed: 'dashed',
+  link: 'link',
+
+  /**
+   * The "reset" variant can be used when customization of GlButton styles is required
+   * (e.g. for the "close" button in GlLabel).
+   * It should be used sparingly and only when other approaches fail.
+   * Prefer supported variants where ever possible.
+   */
+  reset: 'gl-reset'
+};
+const badgeForButtonOptions = {
+  [buttonVariantOptions.default]: badgeVariantOptions.neutral,
+  [buttonVariantOptions.confirm]: badgeVariantOptions.info,
+  [buttonVariantOptions.danger]: badgeVariantOptions.danger
+};
+const dropdownVariantOptions = {
+  default: 'default',
+  confirm: 'confirm',
+  info: 'info (deprecated)',
+  success: 'success (deprecated)',
+  warning: 'warning (deprecated)',
+  danger: 'danger',
+  link: 'link'
+};
+const buttonSizeOptions = {
+  small: 'small',
+  medium: 'medium'
+};
+const buttonSizeOptionsMap = {
+  small: 'sm',
+  medium: 'md'
+}; // size options all have corresponding styles (e.g. .s12 defined in icon.scss)
+
+const iconSizeOptions = glIconSizes.split(' ').map(Number);
+const triggerVariantOptions = {
+  click: 'click',
+  hover: 'hover',
+  focus: 'focus'
+};
+const tooltipPlacements = {
+  top: 'top',
+  left: 'left',
+  right: 'right',
+  bottom: 'bottom'
+}; // in milliseconds
+
+const tooltipDelay = {
+  show: 500,
+  hide: 0
+};
+const popoverPlacements = {
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left'
+};
+const columnOptions = {
+  stacked: 'stacked',
+  tiled: 'tiled'
+};
+const alignOptions = {
+  left: 'left',
+  center: 'center',
+  right: 'right',
+  fill: 'fill'
+};
+const alertVariantOptions = {
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+  info: 'info',
+  tip: 'tip'
+};
+const alertVariantIconMap = {
+  success: 'check-circle',
+  warning: 'warning',
+  danger: 'error',
+  info: 'information-o',
+  tip: 'bulb'
+};
+const colorThemes = {
+  indigo: 'theme-indigo-900',
+  'light-indigo': 'theme-indigo-700',
+  blue: 'theme-blue-900',
+  'light-blue': 'theme-blue-700',
+  green: 'theme-green-900',
+  'light-green': 'theme-green-700',
+  red: 'theme-red-900',
+  'light-red': 'theme-red-700',
+  dark: 'gray-900',
+  light: 'gray-700'
+};
+const modalButtonDefaults = {
+  actionPrimary: {
+    variant: 'confirm',
+    category: 'primary'
+  },
+  actionSecondary: {
+    variant: 'confirm',
+    category: 'secondary'
+  },
+  actionCancel: {
+    variant: 'default'
+  }
+};
+const tabsButtonDefaults = {
+  actionPrimary: {
+    variant: 'success',
+    category: 'primary'
+  },
+  actionSecondary: {
+    variant: 'default',
+    category: 'secondary'
+  },
+  actionTertiary: {
+    variant: 'default'
+  }
+};
+const tokenVariants = ['default', 'search-type', 'search-value'];
+const resizeDebounceTime = 200;
+const variantOptionsWithNoDefault = appendDefaultOption(variantOptions);
+const sizeOptionsWithNoDefault = appendDefaultOption(sizeOptions); // Datetime constants
+
+const defaultDateFormat = 'YYYY-MM-DD';
+const bannerVariants = ['promotion', 'introduction'];
+const maxZIndex = 10;
+const modalSizeOptions = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg'
+};
+const focusableTags = ['INPUT', 'TEXTAREA', 'A', 'BUTTON', 'SELECT'];
+const keyboard = {
+  escape: 'Escape',
+  backspace: 'Backspace',
+  delete: 'Delete',
+  left: 'Left',
+  arrowLeft: 'ArrowLeft',
+  right: 'Right',
+  arrowRight: 'ArrowRight',
+  home: 'Home',
+  end: 'End'
+};
+const truncateOptions = POSITION;
+const formInputSizes = {
+  xs: 'xs',
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl',
+  '(unset or null)': null
+};
+const toggleLabelPosition = {
+  hidden: 'hidden',
+  left: 'left',
+  top: 'top'
+};
+const tooltipActionEvents = ['open', 'close', 'enable', 'disable'];
+const drawerVariants = {
+  default: 'default',
+  sidebar: 'sidebar'
+};
+const loadingIconSizes = {
+  'sm (16x16)': 'sm',
+  'md (24x24)': 'md',
+  'lg (32x32)': 'lg',
+  'xl (64x64)': 'xl'
+};
+
+export { COMMA, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, sizeOptions, sizeOptionsWithNoDefault, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/data_utils.js b/app/assets/javascripts/gitlab-ui/dist/utils/data_utils.js
new file mode 100644
index 00000000000000..99eae20f9c8c91
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/data_utils.js
@@ -0,0 +1,20 @@
+import curry from 'lodash/fp/curry';
+
+const getRepeatingValue = index => {
+  const values = [100, 500, 400, 200, 100, 800, 400, 500, 600, 300, 800, 900, 110, 700, 400, 300, 500, 300, 400, 600, 700];
+  return index < values.length ? values[index] : values[index % values.length];
+};
+
+const generateTimeSeries = () => new Array(100).fill(0).map((el, i) => [new Date(2018, 0, i), getRepeatingValue(i)]); // takes an element and a list and `intersperses' that element between the elements of the list.
+// (',' ['a', 'b', 'c']) -> ['a', ',', 'b', ',', 'c']
+
+const intersperse = curry((separator, items) => {
+  const [head, ...rest] = items;
+  const separatorFactory = typeof separator === 'function' ? separator : () => separator;
+  return [head, ...rest.flatMap(item => [separatorFactory(), item], rest)];
+}); // inserts a value at a given index into an array
+// (1, 2, [1, 3, 4]) -> [1, 2, 3, 4]
+
+const insert = curry((index, newItem, items) => [...items.slice(0, index), newItem, ...items.slice(index)]);
+
+export { generateTimeSeries, insert, intersperse };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/datetime_utility.js b/app/assets/javascripts/gitlab-ui/dist/utils/datetime_utility.js
new file mode 100644
index 00000000000000..388360a422277f
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/datetime_utility.js
@@ -0,0 +1,61 @@
+// These utility methods come from the Gitlab repo; app/assets/javascripts/lib/utils/datetime_utility.js
+
+/**
+ * This method allows you to create new Date instance from existing
+ * date instance without keeping the reference.
+ *
+ * @param {Date} date
+ */
+const newDate = date => date instanceof Date ? new Date(date.getTime()) : new Date();
+/**
+ * Computes the difference between 2 date objects.
+ *
+ * @param {Date} a the start date
+ * @param {Date} b the end date
+ * @example
+ * // returns 5
+ * getDayDifference(new Date('2020-08-10'), new Date('2020-08-15'));
+ * @returns {Number} Number of days between the 2 dates
+ */
+
+const getDayDifference = (a, b) => {
+  const millisecondsPerDay = 1000 * 60 * 60 * 24;
+  const date1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
+  const date2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
+  return Math.floor((date2 - date1) / millisecondsPerDay);
+};
+/**
+ * Subtracts a given number of days from a given date and returns the new date.
+ *
+ * @param {Date} date the date that we will substract days from
+ * @param {Number} daysInPast number of days that are subtracted from a given date
+ * @example
+ * // returns Mon Aug 10 2020 00:00:00
+ * getDateInPast(new Date('2020-08-15'), 5);
+ * @returns {Date} Date in past as Date object
+ */
+
+const getDateInPast = (date, daysInPast) => new Date(newDate(date).setDate(date.getDate() - daysInPast));
+/**
+ * Adds a given number of days to a given date and returns the new date.
+ *
+ * @param {Date} date the date that we will add days to
+ * @param {Number} daysInFuture number of days that are added to a given date
+ * @example
+ * // returns Mon Aug 15 2020 00:00:00
+ * getDateInFuture(new Date('2020-08-10'), 5);
+ * @returns {Date} Date in future as Date object
+ */
+
+const getDateInFuture = (date, daysInFuture) => new Date(newDate(date).setDate(date.getDate() + daysInFuture));
+/**
+ * Are the given two dates equal
+ *
+ * @param {Date} date1
+ * @param {Date} date2
+ * @returns {Boolean}
+ */
+
+const areDatesEqual = (date1, date2) => Boolean(date1 && date2 && new Date(date1).getTime() === new Date(date2).getTime());
+
+export { areDatesEqual, getDateInFuture, getDateInPast, getDayDifference, newDate };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/index.js b/app/assets/javascripts/gitlab-ui/dist/utils/index.js
new file mode 100644
index 00000000000000..0d0cc565a649fa
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/index.js
@@ -0,0 +1 @@
+export * from '../../../../../../node_modules/@gitlab/ui/dist/utils/utils.js';
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/number_utils.js b/app/assets/javascripts/gitlab-ui/dist/utils/number_utils.js
new file mode 100644
index 00000000000000..52d37c5bceee81
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/number_utils.js
@@ -0,0 +1,82 @@
+/**
+ * Adds two numbers together
+ * @param {Number} a
+ * @param {Number} b
+ */
+const addition = (a, b) => a + b;
+/**
+ * Returns the sum of all arguments
+ * @param  {...Number} numbers
+ */
+
+const sum = function () {
+  for (var _len = arguments.length, numbers = new Array(_len), _key = 0; _key < _len; _key++) {
+    numbers[_key] = arguments[_key];
+  }
+
+  return numbers.reduce(addition);
+};
+/**
+ * Returns the average of all arguments
+ * @param  {...Number} numbers
+ */
+
+const average = function () {
+  return sum(...arguments) / arguments.length;
+};
+/**
+ * Convert number to engineering format, using SI suffix
+ * @param {Number|String} value - Number or Number-convertible String
+ * @param {Number} precision
+ * @return {String} number, possibly with a suffix
+ */
+
+const engineeringNotation = function (value) {
+  let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  const invalidValues = [NaN, Infinity, -Infinity];
+  const num = Number(value);
+
+  if (invalidValues.includes(num) || invalidValues.includes(Number(precision))) {
+    return num.toString();
+  }
+
+  const allYourBase = {
+    '-24': 'y',
+    '-21': 'z',
+    '-18': 'a',
+    '-15': 'f',
+    '-12': 'p',
+    '-9': 'n',
+    '-6': 'μ',
+    '-3': 'm',
+    0: '',
+    3: 'k',
+    6: 'M',
+    9: 'G',
+    12: 'T',
+    15: 'P',
+    18: 'E',
+    21: 'Z',
+    24: 'Y'
+  };
+  const exponentialNotation = num.toExponential(precision);
+  const power = exponentialNotation.split('e').map(Number)[1] || 0;
+
+  if (power < -24 || power > 24) {
+    return exponentialNotation;
+  }
+
+  const scaledPower = 3 * Math.floor(power / 3);
+  const scaledMantissa = (exponentialNotation / 10 ** scaledPower // strip trailing decimals from floating point rounding errors
+  ).toFixed(precision) // strip trailing 0s after a decimal point
+  .replace(/\.([1-9]*)0+$/, (_, fractionalDigits) => {
+    if (fractionalDigits) {
+      return `.${fractionalDigits}`;
+    }
+
+    return '';
+  });
+  return `${scaledMantissa}${allYourBase[scaledPower]}`;
+};
+
+export { addition, average, engineeringNotation, sum };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/stories_utils.js b/app/assets/javascripts/gitlab-ui/dist/utils/stories_utils.js
new file mode 100644
index 00000000000000..5acc9d07fa1c1d
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/stories_utils.js
@@ -0,0 +1,13 @@
+/**
+ * These are used to test varying lengths of series names
+ */
+const SERIES_NAME_SHORT = 'SERIES_NAME_SHORT';
+const SERIES_NAME_LONG = 'SERIES_NAME_LONG';
+const SERIES_NAME_LONG_WITHOUT_SPACES = 'SERIES_NAME_LONG_WITHOUT_SPACES';
+const SERIES_NAME = {
+  [SERIES_NAME_SHORT]: 'Series ',
+  [SERIES_NAME_LONG]: 'Series name long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt interdum sapien ut blandit. Nulla fermentum nisi id euismod vulputate. END',
+  [SERIES_NAME_LONG_WITHOUT_SPACES]: 'Series_name_long._Lorem_ipsum_dolor_sit_amet,_consectetur_adipiscing_elit._Sed_tincidunt_interdum_sapien_ut_blandit._Nulla_fermentum_nisi_id_euismod_vulputate._END'
+};
+
+export { SERIES_NAME, SERIES_NAME_LONG, SERIES_NAME_LONG_WITHOUT_SPACES, SERIES_NAME_SHORT };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/story_decorators/container.js b/app/assets/javascripts/gitlab-ui/dist/utils/story_decorators/container.js
new file mode 100644
index 00000000000000..cb5c7e9b709fde
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/story_decorators/container.js
@@ -0,0 +1,17 @@
+/**
+ * Return a story decorator function, which wraps the given story in a `div`
+ * element with the given `style` attributes.
+ *
+ * @param {object} style The style attribute to apply to the container.
+ * @return {function} The story decorator.
+ */
+const makeContainer = style => Story => ({
+  render(h) {
+    return h('div', {
+      style
+    }, [h(Story())]);
+  }
+
+});
+
+export { makeContainer };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/string_utils.js b/app/assets/javascripts/gitlab-ui/dist/utils/string_utils.js
new file mode 100644
index 00000000000000..090724a87d4b1d
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/string_utils.js
@@ -0,0 +1,83 @@
+import emojiRegexFactory from 'emoji-regex';
+
+/**
+ * Split the given string after each occurrence of each of the given symbols.
+ *
+ * Symbols are strings, and can be of length one or more. Zero-length symbols
+ * are ignored.
+ *
+ * Unlike with `String::split`, the symbol is left in results, with
+ * the split occurring _after_ the symbol.
+ *
+ * For example:
+ *
+ *     splitAfterSymbols(['/'], 'a/b/c')    // ['a/', 'b/', 'c']
+ *     splitAfterSymbols(['foo'], 'foobar') // ['foo', 'bar']
+ *
+ * @param {string[]} symbols The symbols to split the string by.
+ * @param {string} string The string to split.
+ * @returns {string[]} The resulting strings.
+ */
+
+const splitAfterSymbols = (symbols, string) => {
+  const textParts = [];
+  let textPartStartIndex = 0;
+
+  if (string.length === 0) {
+    return [string];
+  }
+
+  for (let i = 0; i < string.length;) {
+    let symbolFound = false;
+
+    for (let j = 0; j < symbols.length; j += 1) {
+      const symbol = symbols[j];
+
+      if (!symbol) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+
+      symbolFound = string.slice(i, i + symbol.length) === symbol;
+
+      if (symbolFound) {
+        const textPartEndIndex = i + symbol.length;
+        const textPart = string.slice(textPartStartIndex, textPartEndIndex);
+        textParts.push(textPart);
+        textPartStartIndex = textPartEndIndex;
+        i = textPartStartIndex;
+        break;
+      }
+    }
+
+    if (!symbolFound) {
+      i += 1;
+    }
+  }
+
+  const final = string.slice(textPartStartIndex);
+
+  if (final) {
+    textParts.push(final);
+  }
+
+  return textParts;
+};
+const startsWithEmojiRegex = `^(${emojiRegexFactory().source})`;
+const getAvatarChar = name => {
+  if (name) {
+    // Check if string starts with an emoji (which could be multiple characters and zero-width joined)
+    const match = name.match(startsWithEmojiRegex);
+
+    if (match) {
+      // Return the first match
+      return match[0];
+    }
+
+    return name.charAt(0).toUpperCase();
+  }
+
+  return '';
+};
+
+export { getAvatarChar, splitAfterSymbols };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/svgs/svg_paths.js b/app/assets/javascripts/gitlab-ui/dist/utils/svgs/svg_paths.js
new file mode 100644
index 00000000000000..e5715e40e6a832
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/svgs/svg_paths.js
@@ -0,0 +1,7 @@
+const scrollHandleSvgPath = 'path://M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zM6 4a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V5a1 1 0 0 0-1-1zm4 0a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V5a1 1 0 0 0-1-1z';
+const marqueeSelectionSvgPath = 'path://M2 7h2v2H2zm7-5v2H7V2zm3.6 9.24l1.08 1.042a1 1 0 1 1-1.39 1.439l-1.079-1.042-.695.719a.5.5 0 0 1-.815-.142L7.493 8.344a.5.5 0 0 1 .645-.668l4.986 2.034a.5.5 0 0 1 .171.81zM2 5V3a1 1 0 0 1 1-1h2v2H4v1zm10-1h-1V2h2a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0V4zm-7 8a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1v-2h2v1z';
+const redoSvgPath = 'path://M5.413 4.949L6.904 6.44a.328.328 0 0 1-.232.56H2.328A.328.328 0 0 1 2 6.672V2.328a.328.328 0 0 1 .56-.232l1.435 1.436a6 6 0 1 1 .455 9.306 1 1 0 1 1 1.184-1.612 4 4 0 1 0-.222-6.277z';
+const clearAllSvgPath = 'path://M2.004 9.136h2.052a3.998 3.998 0 0 0 3.918 2.88c2.208-.039 3.968-1.846 3.93-4.037a3.936 3.936 0 0 0-.995-2.55L9.444 6.936a.33.33 0 0 1-.564-.22l-.075-4.309a.326.326 0 0 1 .322-.33L13.47 2a.33.33 0 0 1 .234.091c.13.125.134.33.008.46L12.302 4a5.912 5.912 0 0 1 1.6 3.945c.059 3.286-2.58 5.997-5.893 6.054-2.975.052-5.482-2.054-6.005-4.863zM14 7.856v.365a5.861 5.861 0 0 0 0-.365zM2.084 9.036h2.044zM4 8.046H2a5.919 5.919 0 0 1 .246-1.686l1.903.618A4.017 4.017 0 0 0 4 8.045zm.612-2.11L2.942 4.84A5.96 5.96 0 0 1 4.405 3.28l1.054 1.7c-.329.269-.616.59-.847.956zm1.247-3.451a6.017 6.017 0 0 1 1.942-.39v1.985a4.013 4.013 0 0 0-1.273.275z';
+const downloadSvgPath = 'path://M14 9a1 1 0 0 1 1 1v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3a1 1 0 0 1 2 0v3h10v-3a1 1 0 0 1 1-1zM8 1a1 1 0 0 1 1 1v4.586l1.293-1.293a1 1 0 1 1 1.414 1.414L8 10.414 4.293 6.707a1 1 0 0 1 1.414-1.414L7 6.586V2a1 1 0 0 1 1-1z';
+
+export { clearAllSvgPath, downloadSvgPath, marqueeSelectionSvgPath, redoSvgPath, scrollHandleSvgPath };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/test_utils.js b/app/assets/javascripts/gitlab-ui/dist/utils/test_utils.js
new file mode 100644
index 00000000000000..1ef8c32e210852
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/test_utils.js
@@ -0,0 +1,26 @@
+/**
+ * Wrapper around setTimeout which executes immediately in visual tests
+ * in order to avoid flaky tests
+ */
+function setStoryTimeout(fn, timeout) {
+  return setTimeout(fn, process.env.IS_VISUAL_TEST ? 0 : timeout);
+} // adopted this method from Bootstraps utils
+// https://github.com/bootstrap-vue/bootstrap-vue/blob/2fd03f0b1d0cc41f9930078ba8b1c16b10e4ac2f/tests/utils.js#L6
+
+const waitForAnimationFrame = () => new Promise(resolve => requestAnimationFrame(resolve));
+const getResetAnimationsCSS = () => `
+  *, *::after, *::before {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -ms-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important;
+
+    -webkit-animation: none !important;
+    -moz-animation: none !important;
+    -ms-animation: none !important;
+    -o-animation: none !important;
+    animation: none !important;
+  }`;
+
+export { getResetAnimationsCSS, setStoryTimeout, waitForAnimationFrame };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/use_fake_date.js b/app/assets/javascripts/gitlab-ui/dist/utils/use_fake_date.js
new file mode 100644
index 00000000000000..d09fe44658abe8
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/use_fake_date.js
@@ -0,0 +1,33 @@
+import MockDate from 'mockdate';
+
+/**
+ * When applied to a story, this mixin mocks the current date to make
+ * visual tests that rely on the date deterministic
+ *
+ * Usage:
+ *
+ * import { useFakeDate } from '../../../../tests/utils/use_fake_date';
+ * documentedStoriesOf('some|story')
+ * .add('default', () => ({
+ *   mixins: [useFakeDate()],
+ * })
+ */
+
+const useFakeDate = () => {
+  if (process.env.IS_VISUAL_TEST) {
+    return {
+      created() {
+        MockDate.set('2020-01-10', 0);
+      },
+
+      destroyed() {
+        MockDate.reset();
+      }
+
+    };
+  }
+
+  return {};
+};
+
+export { useFakeDate };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/use_mock_intersection_observer.js b/app/assets/javascripts/gitlab-ui/dist/utils/use_mock_intersection_observer.js
new file mode 100644
index 00000000000000..a6b43f9ab23635
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/use_mock_intersection_observer.js
@@ -0,0 +1,122 @@
+import _isArray from 'lodash/isArray';
+import _isMatch from 'lodash/isMatch';
+
+/**
+ * This class gives us a JSDom friendly DOM observer which we can manually trigger in tests
+ *
+ * Use this in place of MutationObserver or IntersectionObserver
+ *
+ * This class is largely influenced from [a test helper][1] in the main GitLab project
+ *
+ * [1]: https://gitlab.com/gitlab-org/gitlab/blob/a123813c63147392b95cd03c4744ae9db0575b0f/spec/frontend/helpers/mock_dom_observer.js#L95
+ */
+class MockObserver {
+  constructor(cb) {
+    this.$_cb = cb;
+    this.$_observers = [];
+  }
+
+  observe(node) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    this.$_observers.push([node, options]);
+  }
+
+  disconnect() {
+    this.$_observers = [];
+  }
+
+  takeRecords() {} // eslint-disable-next-line babel/camelcase
+
+
+  $_triggerObserve(nodeParam) {
+    let {
+      entry = {},
+      options = {}
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const nodes = this.$_getNodesFromParam(nodeParam);
+    nodes.forEach(node => {
+      if (this.$_hasObserver(node, options)) {
+        this.$_cb([{
+          target: node,
+          ...entry
+        }]);
+      }
+    });
+  } // eslint-disable-next-line babel/camelcase
+
+
+  $_hasObserver(node) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return this.$_observers.some(_ref => {
+      let [obvNode, obvOptions] = _ref;
+      return node === obvNode && _isMatch(options, obvOptions);
+    });
+  }
+
+  $_getNodesFromParam(nodeParam) {
+    if (!nodeParam) {
+      return this.$_observers.map(_ref2 => {
+        let [node] = _ref2;
+        return node;
+      });
+    }
+
+    if (!_isArray(nodeParam)) {
+      return [nodeParam];
+    }
+
+    return nodeParam;
+  }
+
+}
+
+class MockIntersectionObserver extends MockObserver {
+  unobserve(node) {
+    this.$_observers = this.$_observers.filter(_ref3 => {
+      let [obvNode] = _ref3;
+      return node !== obvNode;
+    });
+  }
+
+}
+
+const useMockIntersectionObserver = () => {
+  let instances;
+  let origObserver;
+  beforeEach(() => {
+    instances = [];
+    origObserver = global.IntersectionObserver;
+    global.IntersectionObserver = jest.fn().mockImplementation(function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      const mockObserver = new MockIntersectionObserver(...args);
+      instances.push(mockObserver);
+      return mockObserver;
+    });
+  });
+  afterEach(() => {
+    instances = [];
+    global.IntersectionObserver = origObserver;
+  });
+
+  const trigger = function (observer) {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+
+    observer.$_triggerObserve(...args);
+  };
+
+  const getInstances = () => {
+    return instances;
+  };
+
+  return {
+    getInstances,
+    trigger
+  };
+};
+
+export default useMockIntersectionObserver;
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/utils.js b/app/assets/javascripts/gitlab-ui/dist/utils/utils.js
new file mode 100644
index 00000000000000..059c26a2352102
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/utils.js
@@ -0,0 +1,123 @@
+import { COMMA, labelColorOptions, focusableTags } from './constants';
+
+function debounceByAnimationFrame(fn) {
+  let requestId;
+  return function debounced() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    if (requestId) {
+      window.cancelAnimationFrame(requestId);
+    }
+
+    requestId = window.requestAnimationFrame(() => fn.apply(this, args));
+  };
+}
+function throttle(fn) {
+  let frameId = null;
+  return function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    if (frameId) {
+      return;
+    }
+
+    frameId = window.requestAnimationFrame(() => {
+      fn(...args);
+      frameId = null;
+    });
+  };
+}
+function rgbFromHex(hex) {
+  const cleanHex = hex.replace('#', '');
+  const rgb = cleanHex.length === 3 ? cleanHex.split('').map(val => val + val) : cleanHex.match(/[\da-f]{2}/gi);
+  const [r, g, b] = rgb.map(val => parseInt(val, 16));
+  return [r, g, b];
+}
+function rgbFromString(color, sub) {
+  const rgb = color.substring(sub, color.length - 1).split(COMMA);
+  const [r, g, b] = rgb.map(i => parseInt(i, 10));
+  return [r, g, b];
+}
+function hexToRgba(hex) {
+  let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  const [r, g, b] = rgbFromHex(hex);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+function colorFromBackground(backgroundColor) {
+  let r;
+  let g;
+  let b;
+
+  if (backgroundColor.startsWith('#')) {
+    [r, g, b] = rgbFromHex(backgroundColor);
+  } else if (backgroundColor.startsWith('rgba(')) {
+    [r, g, b] = rgbFromString(backgroundColor, 5);
+  } else if (backgroundColor.startsWith('rgb(')) {
+    [r, g, b] = rgbFromString(backgroundColor, 4);
+  }
+
+  if (r + g + b <= 500) {
+    return labelColorOptions.light;
+  }
+
+  return labelColorOptions.dark;
+}
+function uid() {
+  return Math.random().toString(36).substring(2);
+}
+/**
+ * Receives an element and validates that it can be focused
+ * @param { HTMLElement } The element we want to validate
+ * @return { boolean } Is the element focusable
+ */
+
+function isElementFocusable(elt) {
+  if (!elt) return false;
+  const {
+    tagName
+  } = elt;
+  const isValidTag = focusableTags.includes(tagName);
+  const hasValidType = elt.getAttribute('type') !== 'hidden';
+  const isDisabled = elt.getAttribute('disabled') === '' || elt.getAttribute('disabled');
+  const hasValidZIndex = elt.getAttribute('z-index') !== '-1';
+  const isInvalidAnchorTag = tagName === 'A' && !elt.getAttribute('href');
+  return isValidTag && hasValidType && !isDisabled && hasValidZIndex && !isInvalidAnchorTag;
+}
+/**
+ * Receives an array of HTML elements and focus the first one possible
+ * @param { Array.<HTMLElement> } An array of element to potentially focus
+ * @return { undefined }
+ */
+
+function focusFirstFocusableElement(elts) {
+  const focusableElt = elts.find(el => isElementFocusable(el));
+  if (focusableElt) focusableElt.focus();
+}
+/**
+ * Returns true if the current environment is considered a development environment (it's not
+ * production or test).
+ *
+ * @returns {boolean}
+ */
+
+function isDev() {
+  return !['test', 'production'].includes(process.env.NODE_ENV);
+}
+/**
+ * Prints a warning message to the console in non-test and non-production environments.
+ * @param {string} message message to print to the console
+ */
+
+function logWarning() {
+  let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+
+  if (message.length && isDev()) {
+    console.warn(message); // eslint-disable-line no-console
+  }
+}
+
+export { colorFromBackground, debounceByAnimationFrame, focusFirstFocusableElement, hexToRgba, isDev, isElementFocusable, logWarning, rgbFromHex, rgbFromString, throttle, uid };
diff --git a/app/assets/javascripts/gitlab-ui/dist/utils/validation_utils.js b/app/assets/javascripts/gitlab-ui/dist/utils/validation_utils.js
new file mode 100644
index 00000000000000..85ecdb087d089b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/dist/utils/validation_utils.js
@@ -0,0 +1,14 @@
+// Creates out of validation configurations from .documentation.js files and creates a readable string out of it
+const getValidationInfoText = function () {
+  let validation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  switch (validation.type) {
+    case 'range':
+      return `${validation.min}-${validation.max}`;
+
+    default:
+      return '';
+  }
+};
+
+export { getValidationInfoText };
diff --git a/app/assets/javascripts/gitlab-ui/index.js b/app/assets/javascripts/gitlab-ui/index.js
new file mode 100644
index 00000000000000..ede5629da49187
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/index.js
@@ -0,0 +1,100 @@
+export { default as GlTableLite } from './dist/components/base/table_lite/table_lite';
+export { default as GlDropdownForm } from './dist/components/base/dropdown/dropdown_form';
+export { default as GlKeysetPagination } from './dist/components/base/keyset_pagination/keyset_pagination';
+export { default as GlInputGroupText } from './dist/components/base/form/input_group_text/input_group_text';
+export { default as GlFormText } from './dist/components/base/form/form_text/form_text';
+export { default as GlFormCombobox } from './dist/components/base/form/form_combobox/form_combobox';
+export { default as GlTokenSelector } from './dist/components/base/token_selector/token_selector';
+export { default as GlNavItemDropdown } from './dist/components/base/nav/nav_item_dropdown';
+export { default as GlNav } from './dist/components/base/nav/nav';
+export { default as GlNavItem } from './dist/components/base/nav/nav_item';
+export { default as GlFormCheckboxTree } from './dist/components/base/form/form_checkbox_tree/form_checkbox_tree';
+export { default as GlMarkdown } from './dist/components/base/markdown/markdown';
+export { default as GlNavbar } from './dist/components/base/navbar/navbar';
+export { default as GlIntersectionObserver } from './dist/components/utilities/intersection_observer/intersection_observer';
+export { default as GlLink } from './dist/components/base/link/link';
+export { default as GlIcon } from './dist/components/base/icon/icon';
+export { default as GlLoadingIcon } from './dist/components/base/loading_icon/loading_icon';
+export { default as GlModal } from './dist/components/base/modal/modal';
+export { default as GlPagination } from './dist/components/base/pagination/pagination';
+export { default as GlPaginatedList } from './dist/components/base/paginated_list/paginated_list';
+export { default as GlPopover } from './dist/components/base/popover/popover';
+export { default as GlProgressBar } from './dist/components/base/progress_bar/progress_bar';
+export { default as GlToken } from './dist/components/base/token/token';
+export { default as GlDeprecatedSkeletonLoading, default as GlSkeletonLoading } from './dist/components/base/skeleton_loading/skeleton_loading';
+export { default as GlBadge } from './dist/components/base/badge/badge';
+export { default as GlBanner } from './dist/components/base/banner/banner';
+export { default as GlButton } from './dist/components/base/button/button';
+export { default as GlTooltip } from './dist/components/base/tooltip/tooltip';
+export { default as GlToast } from './dist/components/base/toast/toast';
+export { default as GlDashboardSkeleton } from './dist/components/regions/dashboard_skeleton/dashboard_skeleton';
+export { default as GlEmptyState } from './dist/components/regions/empty_state/empty_state';
+export { default as GlForm } from './dist/components/base/form/form';
+export { default as GlFormInput } from './dist/components/base/form/form_input/form_input';
+export { default as GlFormInputGroup } from './dist/components/base/form/form_input_group/form_input_group';
+export { default as GlFormRadio } from './dist/components/base/form/form_radio/form_radio';
+export { default as GlFormRadioGroup } from './dist/components/base/form/form_radio_group/form_radio_group';
+export { default as GlFormSelect } from './dist/components/base/form/form_select/form_select';
+export { default as GlFormTextarea } from './dist/components/base/form/form_textarea/form_textarea';
+export { default as GlFormGroup } from './dist/components/base/form/form_group/form_group';
+export { default as GlSearchBoxByType } from './dist/components/base/search_box_by_type/search_box_by_type';
+export { default as GlSearchBoxByClick } from './dist/components/base/search_box_by_click/search_box_by_click';
+export { default as GlDropdownItem } from './dist/components/base/dropdown/dropdown_item';
+export { default as GlDropdownSectionHeader } from './dist/components/base/dropdown/dropdown_section_header';
+export { default as GlDropdownDivider } from './dist/components/base/dropdown/dropdown_divider';
+export { default as GlDropdownText } from './dist/components/base/dropdown/dropdown_text';
+export { default as GlDropdown } from './dist/components/base/dropdown/dropdown';
+export { default as GlPath } from './dist/components/base/path/path';
+export { default as GlTable } from './dist/components/base/table/table';
+export { default as GlBreadcrumb } from './dist/components/base/breadcrumb/breadcrumb';
+export { default as GlScrollableTabs } from './dist/components/base/tabs/tabs/scrollable_tabs';
+export { default as GlTabs } from './dist/components/base/tabs/tabs/tabs';
+export { default as GlTab } from './dist/components/base/tabs/tab/tab';
+export { default as GlButtonGroup } from './dist/components/base/button_group/button_group';
+export { default as GlFormCheckbox } from './dist/components/base/form/form_checkbox/form_checkbox';
+export { default as GlFormCheckboxGroup } from './dist/components/base/form/form_checkbox/form_checkbox_group';
+export { default as GlAvatar } from './dist/components/base/avatar/avatar';
+export { default as GlAvatarsInline } from './dist/components/base/avatars_inline/avatars_inline';
+export { default as GlAvatarLabeled } from './dist/components/base/avatar_labeled/avatar_labeled';
+export { default as GlAvatarLink } from './dist/components/base/avatar_link/avatar_link';
+export { default as GlLabel } from './dist/components/base/label/label';
+export const GlDatepicker = {};
+export const GlDaterangePicker = {};
+// export { default as GlDatepicker } from './dist/components/base/datepicker/datepicker';
+// export { default as GlDaterangePicker } from './dist/components/base/daterange_picker/daterange_picker';
+export { default as GlToggle } from './dist/components/base/toggle/toggle';
+export { default as GlSorting } from './dist/components/base/sorting/sorting';
+export { default as GlSortingItem } from './dist/components/base/sorting/sorting_item';
+export { default as GlInfiniteScroll } from './dist/components/base/infinite_scroll/infinite_scroll';
+export { default as GlAlert } from './dist/components/base/alert/alert';
+export { default as GlSegmentedControl } from './dist/components/base/segmented_control/segmented_control';
+export { default as GlSkeletonLoader } from './dist/components/base/skeleton_loader/skeleton_loader';
+export { default as GlDrawer } from './dist/components/base/drawer/drawer';
+export { default as GlCard } from './dist/components/base/card/card';
+export { default as GlFilteredSearchSuggestion } from './dist/components/base/filtered_search/filtered_search_suggestion';
+export { default as GlFilteredSearchSuggestionList } from './dist/components/base/filtered_search/filtered_search_suggestion_list';
+export { default as GlFilteredSearchTerm } from './dist/components/base/filtered_search/filtered_search_term';
+export { default as GlFilteredSearchToken } from './dist/components/base/filtered_search/filtered_search_token';
+export { default as GlFilteredSearchTokenSegment } from './dist/components/base/filtered_search/filtered_search_token_segment';
+export { default as GlFilteredSearch } from './dist/components/base/filtered_search/filtered_search';
+export { default as GlBroadcastMessage } from './dist/components/base/broadcast_message/broadcast_message';
+export { default as GlCollapse } from './dist/components/base/collapse/collapse';
+export { default as GlAccordion } from './dist/components/base/accordion/accordion';
+export { default as GlAccordionItem } from './dist/components/base/accordion/accordion_item';
+export { default as GlCarousel } from './dist/components/base/carousel/carousel';
+export { default as GlCarouselSlide } from './dist/components/base/carousel/carousel_slide';
+export { default as RichTextEditor } from './dist/components/editors/rich_text_editor/rich_text_editor';
+export { default as GlAnimatedNumber } from './dist/components/utilities/animated_number/animated_number';
+export { default as GlFriendlyWrap } from './dist/components/utilities/friendly_wrap/friendly_wrap';
+export { default as GlIntersperse } from './dist/components/utilities/intersperse/intersperse';
+export { default as GlSprintf } from './dist/components/utilities/sprintf/sprintf';
+export { default as GlTruncate } from './dist/components/utilities/truncate/truncate';
+export { GlModalDirective } from './dist/directives/modal';
+export { GlTooltipDirective } from './dist/directives/tooltip';
+export { GlResizeObserverDirective } from './dist/directives/resize_observer/resize_observer';
+export { GlCollapseToggleDirective } from './dist/directives/collapse_toggle';
+export { SafeLinkDirective as GlSafeLinkDirective } from './dist/directives/safe_link/safe_link';
+export { SafeHtmlDirective as GlSafeHtmlDirective } from './dist/directives/safe_html/safe_html';
+// export { OutsideDirective as GlOutsideDirective } from './dist/directives/outside/outside';
+export { HoverLoadDirective as GlHoverLoadDirective } from './dist/directives/hover_load/hover_load';
+
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/breakpoints.js b/app/assets/javascripts/gitlab-ui/src/utils/breakpoints.js
new file mode 100644
index 00000000000000..71ea2eb409666a
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/breakpoints.js
@@ -0,0 +1,23 @@
+export const breakpoints = {
+  xl: 1200,
+  lg: 992,
+  md: 768,
+  sm: 576,
+  xs: 0,
+};
+
+const BreakpointInstance = {
+  windowWidth: () => window.innerWidth,
+  getBreakpointSize() {
+    const windowWidth = this.windowWidth();
+
+    const breakpoint = Object.keys(breakpoints).find((key) => windowWidth > breakpoints[key]);
+
+    return breakpoint;
+  },
+  isDesktop() {
+    return ['xl', 'lg'].includes(this.getBreakpointSize());
+  },
+};
+
+export default BreakpointInstance;
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/charts/config.js b/app/assets/javascripts/gitlab-ui/src/utils/charts/config.js
new file mode 100644
index 00000000000000..970703c08e09ae
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/charts/config.js
@@ -0,0 +1,507 @@
+import castArray from 'lodash/castArray';
+import isArray from 'lodash/isArray';
+import merge from 'lodash/merge';
+import { blue500 } from '../../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
+import Breakpoints from '../breakpoints';
+import { columnOptions } from '../constants';
+import { areDatesEqual } from '../datetime_utility';
+import { engineeringNotation } from '../number_utils';
+import { hexToRgba } from '../utils';
+import { ANNOTATIONS_SERIES_NAME, arrowSymbol, CHART_TYPE_BAR, CHART_TYPE_LINE } from './constants';
+
+export const defaultAreaOpacity = 0.2;
+export const defaultFontSize = 12;
+export const defaultHeight = 400;
+export const defaultWidth = 300;
+export const validRenderers = ['canvas', 'svg'];
+
+export const axes = {
+  name: 'Value',
+  type: 'value',
+  nameLocation: 'center',
+};
+
+export const xAxis = merge({}, axes, {
+  boundaryGap: false,
+  splitLine: {
+    show: false,
+  },
+});
+
+export const yAxis = merge({}, axes, {
+  nameGap: 50,
+  axisLabel: {
+    formatter: (num) => engineeringNotation(num, 2),
+  },
+});
+
+export const grid = {
+  top: 16,
+  bottom: 44,
+  left: 64,
+  right: 32,
+};
+
+export const gridWithSecondaryYAxis = {
+  ...grid,
+  right: 64,
+};
+
+export const lineStyle = {
+  symbol: 'circle',
+  type: 'line',
+  width: 2,
+};
+
+/**
+ * Annotations series consists of annotations lines
+ * along with markers. Annotations co-exist with data
+ * series but have their own virtual coords so that they stay put
+ * irrespective of data series extents.
+ */
+export const annotationsYAxisCoords = {
+  min: 0,
+  pos: 3, // 3% height of chart's grid
+  max: 100,
+  show: false,
+};
+
+export const symbolSize = 6;
+
+/**
+ * These comparison operators are currently in monitoring
+ * charts that have alerting related data.
+ *
+ * {Array} Possible values for greater than
+ */
+const GREATER_THAN = ['>', '&gt;'];
+
+/**
+ * These comparison operators are currently in monitoring
+ * charts that have alerting related data.
+ *
+ * {Array} Possible values for less than
+ */
+const LESS_THAN = ['<', '&lt;'];
+
+/**
+ * All default dataZoom configs will have slider & inside
+ * (for reference, see https://gitlab.com/gitlab-org/gitlab-ui/issues/240)
+ * Inside is disabled for larger viewports (lg and xl)
+ * and is specifically to enable touch zoom for mobile devices
+ * @param {Object} options
+ */
+export const getDataZoomConfig = ({ filterMode = 'none' } = {}) => {
+  const disabledBreakpoints = ['lg', 'xl'];
+  const disabled = disabledBreakpoints.includes(Breakpoints.getBreakpointSize());
+  const minSpan = filterMode === 'none' ? 0.01 : null;
+
+  return {
+    grid: {
+      bottom: 81,
+    },
+    xAxis: {
+      nameGap: 67,
+    },
+    dataZoom: [
+      {
+        type: 'slider',
+        bottom: 22,
+        filterMode,
+        minSpan,
+      },
+      {
+        type: 'inside',
+        filterMode,
+        minSpan,
+        disabled,
+      },
+    ],
+  };
+};
+
+// All chart options can be merged but series
+// needs to be concatenated.
+// Series can be an object for single series or
+// an array of objects.
+export const mergeSeriesToOptions = (options, series = []) => {
+  const { series: optSeries = [] } = options;
+  return {
+    ...options,
+    series: [...castArray(series), ...castArray(optSeries)],
+  };
+};
+
+/**
+ * If an annotation series exists, the chart options should have an
+ * array of yAxis settings so that the series can exist in its own
+ * coordinate system without interfering with the data series
+ *
+ * @param {Object} options options to merge annotation series yAxis with
+ * @param {Boolean} hasAnnotations if annotation series yAxis should be merged
+ * @returns {Object} options
+ */
+export const mergeAnnotationAxisToOptions = (options, hasAnnotations = false) => ({
+  ...options,
+  ...(hasAnnotations && { yAxis: [options.yAxis, annotationsYAxisCoords] }),
+});
+
+export const dataZoomAdjustments = (dataZoom) => {
+  // handle cases where dataZoom is array and object.
+  const useSlider = dataZoom && isArray(dataZoom) ? dataZoom.length : Boolean(dataZoom);
+
+  return useSlider ? getDataZoomConfig({ filterMode: 'weakFilter' }) : [];
+};
+
+export const getToolboxConfig = ({
+  restoreIconPath = '',
+  saveImageIconPath = '',
+  zoomIconPath = '',
+  backIconPath = '',
+} = {}) => {
+  const toolboxConfig = {
+    toolbox: {
+      feature: {},
+    },
+  };
+
+  if (restoreIconPath.length) {
+    toolboxConfig.toolbox.feature.restore = {
+      icon: restoreIconPath,
+    };
+  }
+
+  if (saveImageIconPath.length) {
+    toolboxConfig.toolbox.feature.saveAsImage = {
+      icon: restoreIconPath,
+    };
+  }
+
+  if (zoomIconPath.length && backIconPath.length) {
+    toolboxConfig.toolbox.feature.dataZoom = {
+      icon: {
+        zoom: zoomIconPath,
+        back: backIconPath,
+      },
+    };
+  }
+
+  return toolboxConfig;
+};
+
+/**
+ * Generate eCharts markArea arrays for thresholds and annotations.
+ *
+ * This method purposefully has no knowledge of comparison
+ * operators used in thresholds as it is not necessary and instead
+ * expects explict value bounds
+ *
+ * Examples:
+ * { min: 7, max: 10 } => markArea from 7 to 10
+ * { min: 1, max: 7 } => markArea from 1 to 7
+ *
+ * If min and max are equal it would be markLine and would be
+ * generated by `generateMarkLines`
+ *
+ * @param {Object} threshold Threshold/Annotation object with min and max values
+ * @param {String} axis markArea is generated against this axis
+ * @returns {Array}
+ */
+const generateMarkArea = ({ min, max }, axis = 'yAxis') => [{ [axis]: min }, { [axis]: max }];
+
+/**
+ * Generate eCharts markLine objects for thresholds and annotations.
+ *
+ * This method purposefully has no knowledge of comparison
+ * operators used in thresholds as it is not necessary and instead
+ * expects explict value bounds
+ *
+ * In order to continue supporting existing thresholds format, min
+ * is passed as undefined so the correct markLine object is generated.
+ *
+ * For annotations, min and max will be the same value.
+ *
+ * Threshold Examples:
+ * { max: 7 } => markLine at 7
+ *
+ * Annotation Examples:
+ * { min: 7, max: 7 } => markLine at 7
+ *
+ * @param {Object} threshold Threshold/Annotation object with min and max values
+ * @param {String} axis markLine is generated against this axis
+ * @returns {Object}
+ */
+const generateMarkLines = ({ min, max }, axis = 'yAxis') => {
+  if (min) {
+    return { [axis]: min };
+  }
+  return { [axis]: max };
+};
+
+/**
+ * Generates markPoints that are placed under the markLines.
+ *
+ * These are used only in annotation lines. For annotation lines,
+ * both min and max are same values so only one is enough to generate
+ * the markPoint.
+ *
+ * @param {Object} annotation object
+ * @return {Object}
+ */
+const generateMarkPoints = ({ min, tooltipData }) => {
+  return {
+    name: 'annotations',
+    xAxis: min,
+    yAxis: 0,
+    tooltipData,
+  };
+};
+
+/**
+ * Generate set of markAreas and markLines to draw on charts
+ * as alert thresholds.
+ *
+ * Alert thresholds always have a markLine associated with a markArea
+ *
+ * @param {Array} thresholds Array of alert thresholds
+ * @returns {Object} markAreas and markLines
+ */
+export function getThresholdConfig(thresholds) {
+  if (!thresholds.length) {
+    return {};
+  }
+
+  const data = thresholds.reduce(
+    (acc, alert) => {
+      const { threshold, operator } = alert;
+
+      if (GREATER_THAN.includes(operator)) {
+        acc.areas.push(
+          generateMarkArea({
+            min: threshold,
+            max: Infinity,
+          })
+        );
+      } else if (LESS_THAN.includes(operator)) {
+        acc.areas.push(
+          generateMarkArea({
+            min: Number.NEGATIVE_INFINITY,
+            max: threshold,
+          })
+        );
+      }
+
+      acc.lines.push(
+        generateMarkLines({
+          max: threshold,
+        })
+      );
+
+      return acc;
+    },
+    { lines: [], areas: [] }
+  );
+
+  return {
+    markLine: {
+      data: data.lines,
+    },
+    markArea: {
+      data: data.areas,
+      zlevel: -1,
+    },
+  };
+}
+
+/**
+ * This method is only for testing both markLines and markAreas
+ * that are used for annotations.
+ *
+ * `getAnnotationsConfig` as of %12.10 supports only markLines.
+ * But this method can generate lines, points and areas.
+ *
+ * @param {Array} annotations Array of annotation objects
+ * @returns {Object} { areas, lines, points }
+ */
+export const parseAnnotations = (annotations) =>
+  annotations.reduce(
+    (acc, annotation) => {
+      // because only markLines are supported all cases will
+      // satisfy this condition. This is more of a sanity check
+      // until markAreas are supported.
+      // https://gitlab.com/gitlab-org/gitlab/-/issues/212910
+      if (areDatesEqual(annotation.min, annotation.max)) {
+        acc.lines.push(generateMarkLines(annotation, 'xAxis'));
+        acc.points.push(generateMarkPoints(annotation, 'xAxis'));
+        return acc;
+      }
+
+      acc.areas.push(generateMarkArea(annotation, 'xAxis'));
+      return acc;
+    },
+    { areas: [], lines: [], points: [] }
+  );
+
+/**
+ * Generate set of markAreas and markLines to draw on charts
+ * as annotations.
+ *
+ * Annotations as of %12.10 will only be markLines.
+ * markAreas are not supported yet. They are generated by
+ * `parseAnnotations` but not rendered.
+ *
+ * @param {Array} annotations Array of annotations
+ * @returns {Object} { markLines }
+ */
+export const getAnnotationsConfig = (annotations) => {
+  if (!annotations.length) {
+    return {};
+  }
+
+  // annotations parsing is moved out so that it can be tested
+  // for markLines and markAreas.
+  const { lines, points } = parseAnnotations(annotations);
+
+  return {
+    markLine: {
+      lineStyle: {
+        color: blue500,
+      },
+      silent: true,
+      data: lines,
+    },
+    markPoint: {
+      itemStyle: {
+        color: blue500,
+      },
+      symbol: arrowSymbol,
+      symbolSize: '8',
+      symbolOffset: [0, ' 60%'],
+      data: points,
+    },
+  };
+};
+
+/**
+ * Given thresholds and annotations options, this method generates
+ * an annotation series that co-exists along with the data series.
+ *
+ * yAxis option is useful in cases where multiple yAxis settings
+ * are used in a chart. Currently, all of our charts have single
+ * yAxis settings.
+ *
+ * @param {Object} params Thresholds, annotations and yAxis options
+ * @returns {Object} Annotation series
+ */
+export const generateAnnotationSeries = (annotations, yAxisIndex = 1) => {
+  if (!annotations.length) {
+    return null;
+  }
+  return merge(
+    {
+      name: ANNOTATIONS_SERIES_NAME,
+      yAxisIndex,
+      type: 'scatter',
+      data: [],
+    },
+    getAnnotationsConfig(annotations)
+  );
+};
+
+/**
+ * This method generates the data series and relevant defaults for a bar chart
+ *
+ * @param {Object} options
+ * @param {string} options.name - xAxis name for the chart
+ * @param {string} options.color - color to render the data series
+ * @param {Array} options.data - data set to be rendered
+ * @param {string} [options.stack] - controls how the stacked charts should render either `stacked` or `tiled`
+ * @param {number} [options.yAxisIndex] - specifies the yAxis to use (if there are multiple)
+ * @returns {Object} Bar chart series
+ */
+export const generateBarSeries = ({
+  name,
+  color,
+  data = [],
+  stack = columnOptions.stacked,
+  yAxisIndex = 0,
+}) => ({
+  type: CHART_TYPE_BAR,
+  name,
+  data,
+  stack,
+  barMaxWidth: '50%',
+  yAxisIndex,
+  itemStyle: {
+    color: hexToRgba(color, 0.2),
+    borderColor: color,
+    borderWidth: 1,
+  },
+  emphasis: {
+    itemStyle: {
+      color: hexToRgba(color, 0.4),
+    },
+  },
+});
+
+/**
+ * This method generates the data series and relevant defaults for a line chart
+ *
+ * @param {Object} options
+ * @param {string} options.name - xAxis name for the chart
+ * @param {string} options.color - color to render the data series
+ * @param {Array} options.data - data set to be rendered
+ * @param {number} [options.yAxisIndex] - specifies the yAxis to use (if there are multiple)
+ * @returns {Object} Line chart series
+ */
+export const generateLineSeries = ({ name, color, data = [], yAxisIndex = 0 }) => ({
+  name,
+  data,
+  type: CHART_TYPE_LINE,
+  yAxisIndex,
+  lineStyle: { color },
+  itemStyle: { color },
+});
+
+/**
+ * The method works well if tooltip content should be against y-axis values.
+ * However, for bar charts, the tooltip should be against x-axis values.
+ * This method should be updated to work with all types of visualizations.
+ * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/674
+ *
+ * @param {Object} params series data
+ * @param {String} yAxisTitle y-axis title
+ * @returns {Object} tooltip title and content
+ */
+export const getDefaultTooltipContent = (params, yAxisTitle = null) => {
+  const seriesDataLength = params.seriesData.length;
+  const { xLabels, tooltipContent } = params.seriesData.reduce(
+    (acc, chartItem) => {
+      const [title, value] = chartItem.value || [];
+      // Let's use the y axis title as series name when only one series exists
+      // This way, TooltipDefaultFormat will display the y axis title as label
+      const seriesName = seriesDataLength === 1 && yAxisTitle ? yAxisTitle : chartItem.seriesName;
+      const color = seriesDataLength === 1 ? '' : chartItem.color;
+      acc.tooltipContent[seriesName] = {
+        value,
+        color,
+      };
+      if (!acc.xLabels.includes(title)) {
+        acc.xLabels.push(title);
+      }
+      return acc;
+    },
+    {
+      xLabels: [],
+      tooltipContent: {},
+    }
+  );
+
+  return { xLabels, tooltipContent };
+};
+
+export default {
+  grid,
+  xAxis,
+  yAxis,
+};
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/charts/config.spec.js b/app/assets/javascripts/gitlab-ui/src/utils/charts/config.spec.js
new file mode 100644
index 00000000000000..e793e98c949b11
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/charts/config.spec.js
@@ -0,0 +1,385 @@
+import merge from 'lodash/merge';
+import Breakpoints from '../breakpoints';
+import { columnOptions } from '../constants';
+import { hexToRgba } from '../utils';
+import {
+  getDataZoomConfig,
+  getThresholdConfig,
+  mergeSeriesToOptions,
+  parseAnnotations,
+  generateBarSeries,
+  generateLineSeries,
+} from './config';
+import {
+  mockDefaultDataZoomConfig,
+  mockDefaultChartOptions,
+  mockDefaultStackedBarData,
+  mockDefaultLineData,
+} from './mock_data';
+import { colorFromDefaultPalette } from './theme';
+
+describe('chart config helpers', () => {
+  describe('getThresholdConfig', () => {
+    const makeThreshold = (threshold, operator) => [
+      {
+        threshold,
+        operator,
+      },
+    ];
+
+    it('returns empty object for no thresholds', () => {
+      expect(getThresholdConfig([])).toEqual({});
+    });
+
+    it('draws area below line for < threshold', () => {
+      const threshold = 3;
+      const thresholds = makeThreshold(threshold, '<');
+      const expectedLineData = [{ yAxis: threshold }];
+      const expectedAreaData = [[{ yAxis: Number.NEGATIVE_INFINITY }, { yAxis: threshold }]];
+
+      const { markLine, markArea } = getThresholdConfig(thresholds);
+
+      expect(markLine.data).toEqual(expectedLineData);
+      expect(markArea.data).toEqual(expectedAreaData);
+    });
+
+    it('draws line only for = threshold', () => {
+      const threshold = 7;
+      const thresholds = makeThreshold(threshold, '=');
+      const expectedLineData = [{ yAxis: threshold }];
+      const expectedAreaData = [];
+
+      const { markLine, markArea } = getThresholdConfig(thresholds);
+
+      expect(markLine.data).toEqual(expectedLineData);
+      expect(markArea.data).toEqual(expectedAreaData);
+    });
+
+    it('draws area above line for > threshold', () => {
+      const threshold = 9000;
+      const thresholds = makeThreshold(threshold, '>');
+      const expectedLineData = [{ yAxis: threshold }];
+      const expectedAreaData = [[{ yAxis: threshold }, { yAxis: Infinity }]];
+
+      const { markLine, markArea } = getThresholdConfig(thresholds);
+
+      expect(markLine.data).toEqual(expectedLineData);
+      expect(markArea.data).toEqual(expectedAreaData);
+    });
+  });
+
+  describe('parseAnnotations', () => {
+    const makeAnnotation = ({ min, max }) => [
+      {
+        min,
+        max,
+      },
+    ];
+
+    it('returns empty object for no annotations', () => {
+      expect(parseAnnotations([])).toEqual({
+        areas: [],
+        lines: [],
+        points: [],
+      });
+    });
+
+    it('draws an annotation range between two fixed points', () => {
+      const annotation = makeAnnotation({
+        min: 10,
+        max: 40,
+      });
+      const expectedLineData = [];
+      const expectedAreaData = [[{ xAxis: 10 }, { xAxis: 40 }]];
+
+      const { lines, areas } = parseAnnotations(annotation);
+
+      expect(lines).toEqual(expectedLineData);
+      expect(areas).toEqual(expectedAreaData);
+    });
+
+    it('draws an annotation range with infinity upper bound', () => {
+      const annotation = makeAnnotation({
+        min: 10,
+        max: Infinity,
+      });
+      const expectedLineData = [];
+      const expectedAreaData = [[{ xAxis: 10 }, { xAxis: Infinity }]];
+
+      const { lines, areas } = parseAnnotations(annotation);
+
+      expect(lines).toEqual(expectedLineData);
+      expect(areas).toEqual(expectedAreaData);
+    });
+
+    it('draws an annotation range with infinity lower bound', () => {
+      const annotation = makeAnnotation({
+        min: Number.NEGATIVE_INFINITY,
+        max: 10,
+      });
+      const expectedLineData = [];
+      const expectedAreaData = [[{ xAxis: -Infinity }, { xAxis: 10 }]];
+
+      const { lines, areas } = parseAnnotations(annotation);
+
+      expect(lines).toEqual(expectedLineData);
+      expect(areas).toEqual(expectedAreaData);
+    });
+
+    it('draws an annotation range without upper bound', () => {
+      const annotation = makeAnnotation({
+        min: 10,
+      });
+      const expectedLineData = [];
+      const expectedAreaData = [[{ xAxis: 10 }, { xAxis: undefined }]];
+
+      const { lines, areas } = parseAnnotations(annotation);
+
+      expect(lines).toEqual(expectedLineData);
+      expect(areas).toEqual(expectedAreaData);
+    });
+
+    it('draws an annotation range without lower bound', () => {
+      const annotation = makeAnnotation({
+        max: 10,
+      });
+      const expectedLineData = [];
+      const expectedAreaData = [[{ xAxis: undefined }, { xAxis: 10 }]];
+
+      const { lines, areas } = parseAnnotations(annotation);
+
+      expect(lines).toEqual(expectedLineData);
+      expect(areas).toEqual(expectedAreaData);
+    });
+
+    it('draws an annotation line', () => {
+      const annotation = makeAnnotation({
+        min: 10,
+        max: 10,
+      });
+      const expectedLineData = [{ xAxis: 10 }];
+      const expectedAreaData = [];
+
+      const { lines, areas } = parseAnnotations(annotation);
+
+      expect(lines).toEqual(expectedLineData);
+      expect(areas).toEqual(expectedAreaData);
+    });
+
+    it('draws multiple annotation lines', () => {
+      const annotation1 = makeAnnotation({
+        min: 10,
+        max: 10,
+      });
+      const annotation2 = makeAnnotation({
+        min: 30,
+        max: 30,
+      });
+      const expectedLineData = [{ xAxis: 10 }, { xAxis: 30 }];
+      const expectedAreaData = [];
+
+      const { lines, areas } = parseAnnotations([...annotation1, ...annotation2]);
+
+      expect(lines).toEqual(expectedLineData);
+      expect(areas).toEqual(expectedAreaData);
+    });
+  });
+
+  describe('getDataZoomConfig', () => {
+    describe('on large viewports (lg, xl)', () => {
+      it('creates a basic dataZoomConfig with inside scrolling being disabled', () => {
+        const actual = getDataZoomConfig();
+        const expected = mockDefaultDataZoomConfig;
+
+        expect(actual).toEqual(expected);
+      });
+    });
+
+    describe('on small viewports', () => {
+      it('creates a basic dataZoomConfig with inside scrolling being enabled', () => {
+        jest.spyOn(Breakpoints, 'getBreakpointSize').mockImplementationOnce(() => 'sm');
+        const actual = getDataZoomConfig();
+        const dataZoomWithInsideEnabled = [
+          {
+            bottom: 22,
+            filterMode: 'none',
+            minSpan: 0.01,
+            type: 'slider',
+          },
+          {
+            type: 'inside',
+            filterMode: 'none',
+            minSpan: 0.01,
+            disabled: false,
+          },
+        ];
+        const expected = merge(mockDefaultDataZoomConfig, {
+          dataZoom: dataZoomWithInsideEnabled,
+        });
+
+        expect(actual).toEqual(expected);
+      });
+    });
+
+    it('allows the filterMode to be set', () => {
+      const actual = getDataZoomConfig({ filterMode: 'filter' });
+      // After https://gitlab.com/gitlab-org/gitlab-ui/issues/240
+      // all default dataZoom configs will have slider & inside.
+      // inside is specifically to enable touch zoom for mobile devices
+      const dataZoomWithFilter = [
+        {
+          type: 'slider',
+          filterMode: 'filter',
+          minSpan: null,
+        },
+        {
+          type: 'inside',
+          filterMode: 'filter',
+          minSpan: null,
+          disabled: true,
+        },
+      ];
+      const expected = merge(mockDefaultDataZoomConfig, {
+        dataZoom: dataZoomWithFilter,
+      });
+
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  describe('mergeSeriesToOptions', () => {
+    const series = {
+      areaStyle: {
+        opacity: 0.2,
+        color: '#1f78d1',
+      },
+      showSymbol: false,
+      lineStyle: {
+        color: '#1f78d1',
+      },
+      itemStyle: {
+        color: '#1f78d1',
+      },
+      symbol: 'circle',
+      type: 'line',
+      width: 2,
+      name: 'Values',
+      data: [
+        [0, 5],
+        [4, 3],
+        [8, 10],
+      ],
+    };
+
+    it('create chart options with invalid series props', () => {
+      const chartOptionsOutput = {
+        ...mockDefaultChartOptions,
+        series: [],
+      };
+      expect(mergeSeriesToOptions(mockDefaultChartOptions)).toEqual(chartOptionsOutput);
+      expect(mergeSeriesToOptions(mockDefaultChartOptions, [])).toEqual(chartOptionsOutput);
+    });
+
+    it('creates chart options with single series object passed as data prop', () => {
+      // data for chart can also be passed as a data prop which is transformed to series
+      const chartOptions = mergeSeriesToOptions({
+        ...mockDefaultChartOptions,
+        series,
+      });
+
+      expect(chartOptions.series).toBeInstanceOf(Array);
+      expect(chartOptions.series.length).toBe(1);
+    });
+
+    it('creates chart options with single series array passed as data prop', () => {
+      const chartOptions = mergeSeriesToOptions({
+        ...mockDefaultChartOptions,
+        series: [series],
+      });
+
+      expect(chartOptions.series).toBeInstanceOf(Array);
+      expect(chartOptions.series.length).toBe(1);
+    });
+
+    it('creates chart options with multiple series array passed as data prop', () => {
+      const chartOptions = mergeSeriesToOptions({
+        ...mockDefaultChartOptions,
+        series: [series, series],
+      });
+
+      expect(chartOptions.series).toBeInstanceOf(Array);
+      expect(chartOptions.series.length).toBe(2);
+    });
+
+    it('creates chart options with single series object passed as series prop', () => {
+      const chartOptions = mergeSeriesToOptions(mockDefaultChartOptions, series);
+
+      expect(chartOptions.series).toBeInstanceOf(Array);
+      expect(chartOptions.series.length).toBe(1);
+    });
+
+    it('creates chart options with single series array passed as series prop', () => {
+      const chartOptions = mergeSeriesToOptions(mockDefaultChartOptions, [series]);
+
+      expect(chartOptions.series).toBeInstanceOf(Array);
+      expect(chartOptions.series.length).toBe(1);
+    });
+
+    it('creates chart options with multiple series array passed as series prop', () => {
+      const chartOptions = mergeSeriesToOptions(mockDefaultChartOptions, [series, series]);
+
+      expect(chartOptions.series).toBeInstanceOf(Array);
+      expect(chartOptions.series.length).toBe(2);
+    });
+  });
+
+  describe('generateBarSeries', () => {
+    const defaultBarColors = {
+      itemStyle: { color: hexToRgba(colorFromDefaultPalette(1), 0.2) },
+      emphasis: { itemStyle: { color: hexToRgba(colorFromDefaultPalette(1), 0.4) } },
+    };
+    const barDefaultParams = {
+      name: 'Bar chart',
+      color: colorFromDefaultPalette(0),
+      stack: columnOptions.stacked,
+    };
+
+    it.each`
+      param           | value                         | result
+      ${'name'}       | ${'Cool new bar chart'}       | ${{ name: 'Cool new bar chart' }}
+      ${'color'}      | ${colorFromDefaultPalette(1)} | ${defaultBarColors}
+      ${'data'}       | ${mockDefaultStackedBarData}  | ${{ data: mockDefaultStackedBarData }}
+      ${'stack'}      | ${columnOptions.tiled}        | ${{ stack: columnOptions.tiled }}
+      ${'yAxisIndex'} | ${3}                          | ${{ yAxisIndex: 3 }}
+    `('with $param set will contain $result', ({ param, value, result }) => {
+      expect(
+        generateBarSeries({
+          ...barDefaultParams,
+          [param]: value,
+        })
+      ).toMatchObject(result);
+    });
+  });
+  describe('generateLineSeries', () => {
+    const defaultLineColors = {
+      itemStyle: { color: colorFromDefaultPalette(1) },
+      lineStyle: { color: colorFromDefaultPalette(1) },
+    };
+    const lineDefaultParams = { name: 'Line chart', color: colorFromDefaultPalette(0) };
+
+    it.each`
+      param           | value                         | result
+      ${'name'}       | ${'Cool new line chart'}      | ${{ name: 'Cool new line chart' }}
+      ${'color'}      | ${colorFromDefaultPalette(1)} | ${defaultLineColors}
+      ${'data'}       | ${mockDefaultLineData}        | ${{ data: mockDefaultLineData }}
+      ${'yAxisIndex'} | ${2}                          | ${{ yAxisIndex: 2 }}
+    `('with $param set will contain $result', ({ param, value, result }) => {
+      expect(
+        generateLineSeries({
+          ...lineDefaultParams,
+          [param]: value,
+        })
+      ).toMatchObject(result);
+    });
+  });
+});
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/charts/constants.js b/app/assets/javascripts/gitlab-ui/src/utils/charts/constants.js
new file mode 100644
index 00000000000000..68afa855fa5c76
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/charts/constants.js
@@ -0,0 +1,65 @@
+/**
+ * As of %12.10 all annotations are added as a decorations
+ * by piggybacking a scatter series. The series should
+ * have 'annotations' as name for the annotation tooltips
+ * to work.
+ *
+ * More info here https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28825
+ *
+ */
+export const ANNOTATIONS_SERIES_NAME = 'annotations';
+/**
+ * Annotations have a line (markLine) and an arrow (markPoint).
+ * When the markPoint is hovered, a tooltip is displayed to
+ * show the annotation description.
+ *
+ * All markPoints have this component type
+ */
+export const ANNOTATIONS_COMPONENT_TYPE = 'markPoint';
+
+/**
+ * This is so that the mouse doesn't go over the
+ * tooltip and call mouseout which will hide the
+ * tooltip.
+ */
+export const ANNOTATION_TOOLTIP_TOP_OFFSET = 10;
+
+/**
+ * This is a slight offset that gets applied to the left
+ * of the chart tooltips to ensure a correct position.
+ */
+export const TOOLTIP_LEFT_OFFSET = 2;
+
+/**
+ * This is an offset that gets applied between the mouse
+ * cursor and the left of the chart data tooltips to provide
+ * some spacing.
+ */
+export const DATA_TOOLTIP_LEFT_OFFSET = 10;
+
+/**
+ * These are the accepted values for the layout prop
+ * of the chart legend component
+ */
+export const LEGEND_LAYOUT_INLINE = 'inline';
+export const LEGEND_LAYOUT_TABLE = 'table';
+
+/**
+ * Default values for the chart legend field labels
+ */
+export const LEGEND_AVERAGE_TEXT = 'Avg';
+export const LEGEND_CURRENT_TEXT = 'Current';
+export const LEGEND_MIN_TEXT = 'Min';
+export const LEGEND_MAX_TEXT = 'Max';
+
+/**
+ * These arrow symbols are used as markPoints under the annotations lines
+ * within area and line charts. This icon doesn't exist in the svg
+ * library yet. The below issue is to track the progress of the svg icon
+ * https://gitlab.com/gitlab-org/gitlab-svgs/-/issues/118
+ */
+export const arrowSymbol = 'path://m5 229 5 8h-10z';
+
+// Constants for the type property of charts
+export const CHART_TYPE_BAR = 'bar';
+export const CHART_TYPE_LINE = 'line';
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/charts/mock_data.js b/app/assets/javascripts/gitlab-ui/src/utils/charts/mock_data.js
new file mode 100644
index 00000000000000..3bae3a46cbd425
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/charts/mock_data.js
@@ -0,0 +1,259 @@
+import { blue500 } from '../../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
+import { hexToRgba } from '../utils';
+import { colorFromDefaultPalette } from './theme';
+
+export const mockDefaultDataZoomConfig = {
+  dataZoom: [
+    {
+      bottom: 22,
+      filterMode: 'none',
+      minSpan: 0.01,
+      type: 'slider',
+    },
+    {
+      type: 'inside',
+      filterMode: 'none',
+      minSpan: 0.01,
+      disabled: true,
+    },
+  ],
+  grid: {
+    bottom: 81,
+  },
+  xAxis: {
+    nameGap: 67,
+  },
+};
+
+export const mockDefaultChartOptions = {
+  grid: {
+    top: 16,
+    bottom: 44,
+    left: 64,
+    right: 32,
+  },
+  xAxis: {
+    name: 'Value',
+    type: 'value',
+    nameLocation: 'center',
+    boundaryGap: false,
+    splitLine: {
+      show: false,
+    },
+    axisPointer: {
+      show: true,
+      label: {},
+      lineStyle: {
+        type: 'solid',
+      },
+    },
+  },
+  yAxis: {
+    name: 'Value',
+    type: 'value',
+    nameLocation: 'center',
+    nameGap: 50,
+    axisLabel: {},
+    axisTick: {
+      show: false,
+    },
+  },
+  legend: {
+    show: false,
+  },
+};
+
+/**
+ * This is currently used in area.stories.js and line.stories.js
+ */
+export const mockAnnotationsSeries = {
+  series: [
+    {
+      type: 'scatter',
+      name: 'annotations',
+      data: [],
+      markLine: {
+        lineStyle: {
+          color: blue500,
+        },
+        data: [
+          { xAxis: '2018-01-25T01:00:00.000Z' },
+          { xAxis: '2018-01-25T10:00:00.000Z' },
+          { xAxis: '2018-02-06T08:00:00.000Z' },
+        ],
+      },
+      markPoint: {
+        symbol: 'path://m5 229 5 8h-10z',
+        symbolSize: '8',
+        symbolOffset: [0, ' 60%'],
+        itemStyle: {
+          color: blue500,
+        },
+        data: [
+          {
+            name: 'annotations',
+            xAxis: '2018-01-25T01:00:00.000Z',
+            yAxis: 0,
+            tooltipData: { content: 'Scranton strangler was caught.' },
+          },
+          {
+            name: 'annotations',
+            xAxis: '2018-01-25T10:00:00.000Z',
+            yAxis: 0,
+            tooltipData: { content: 'Tobys green car is missing.' },
+          },
+          {
+            name: 'annotations',
+            xAxis: '2018-02-06T08:00:00.000Z',
+            yAxis: 0,
+            tooltipData: { content: 'It was actually Toby!' },
+          },
+        ],
+      },
+    },
+  ],
+};
+
+/**
+ * This is currently used in area.stories.js and line.stories.js
+ */
+export const mockAnnotationsConfigs = {
+  annotations: [
+    {
+      min: '2018-01-25T01:00:00.000Z',
+      max: '2018-01-25T01:00:00.000Z',
+      tooltipData: { content: 'Scranton strangler was caught.' },
+    },
+    {
+      min: '2018-01-25T10:00:00.000Z',
+      max: '2018-01-25T10:00:00.000Z',
+      tooltipData: { content: 'Tobys green car is missing.' },
+    },
+    {
+      min: '2018-02-06T08:00:00.000Z',
+      max: '2018-02-06T08:00:00.000Z',
+      tooltipData: { content: 'It was actually Toby!' },
+    },
+  ],
+};
+
+export const mockDefaultStackedBarData = [
+  { name: 'Fun 1', data: [58, 49, 38, 23, 27, 68, 38, 35, 7, 64, 65, 31] },
+  { name: 'Fun 2', data: [8, 6, 34, 19, 9, 7, 17, 25, 14, 7, 10, 32] },
+  { name: 'Fun 3', data: [67, 60, 66, 32, 61, 54, 13, 50, 16, 11, 47, 28] },
+  { name: 'Fun 4', data: [8, 9, 5, 40, 13, 19, 58, 21, 47, 59, 23, 46] },
+];
+
+export const mockDefaultStackedLineData = [
+  { name: 'Stacked median line', data: [67, 60, 66, 32, 61, 54, 13, 50, 16, 11, 47, 28] },
+];
+
+export const mockDefaultLineData = [
+  {
+    name: 'Median line',
+    data: [
+      ['Joe', 1120],
+      ['Sarah', 732],
+      ['Tom', 501],
+      ['Mary', 634],
+      ['Mike', 290],
+      ['Ben', 130],
+      ['Jane', 120],
+    ],
+  },
+];
+
+export const mockDefaultBarData = [
+  {
+    name: 'Full',
+    data: [
+      ['Joe', 1220],
+      ['Sarah', 932],
+      ['Tom', 901],
+      ['Mary', 934],
+      ['Mike', 1290],
+      ['Ben', 1330],
+      ['Jane', 1320],
+    ],
+  },
+];
+
+export const mockRawBarData = [
+  ['Mon', 1220],
+  ['Tue', 932],
+  ['Wed', 901],
+  ['Thu', 934],
+  ['Fri', 1290],
+  ['Sat', 1330],
+  ['Sun', 1320],
+];
+
+const color = colorFromDefaultPalette(0);
+export const mockDefaultLineChartConfig = {
+  name: 'Line chart',
+  data: [],
+  type: 'line',
+  yAxisIndex: 0,
+  lineStyle: { color },
+  itemStyle: { color },
+};
+
+export const mockDefaultBarChartConfig = {
+  type: 'bar',
+  name: 'Bar chart',
+  data: [],
+  stack: null,
+  barMaxWidth: '50%',
+  yAxisIndex: 0,
+  itemStyle: {
+    color: hexToRgba(color, 0.2),
+    borderColor: color,
+    borderWidth: 1,
+  },
+  emphasis: {
+    itemStyle: {
+      color: hexToRgba(color, 0.4),
+    },
+  },
+};
+
+export const mockSecondaryData = [
+  {
+    name: 'Secondary 1',
+    data: [13, 25, 38, 23, 27, 28, 29, 27, 1, 15, 65, 31],
+  },
+];
+
+export const mockSecondaryBarData = [
+  {
+    name: 'Secondary',
+    type: 'bar',
+    data: [
+      ['Joe', 220],
+      ['Sarah', 392],
+      ['Tom', 291],
+      ['Mary', 594],
+      ['Mike', 320],
+      ['Ben', 230],
+      ['Jane', 120],
+      ['Anne', 290],
+    ],
+  },
+];
+
+export const mockSecondaryTrendlineData = [
+  {
+    type: 'line',
+    name: 'Median line',
+    data: [
+      ['Joe', 220],
+      ['Sarah', 392],
+      ['Tom', 291],
+      ['Mary', 594],
+      ['Mike', 320],
+      ['Ben', 230],
+      ['Jane', 120],
+      ['Anne', 290],
+    ],
+  },
+];
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/charts/story_config.js b/app/assets/javascripts/gitlab-ui/src/utils/charts/story_config.js
new file mode 100644
index 00000000000000..21a66157a0d135
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/charts/story_config.js
@@ -0,0 +1,45 @@
+import times from 'lodash/times';
+import { SERIES_NAME, SERIES_NAME_SHORT } from '../stories_utils';
+
+import {
+  marqueeSelectionSvgPath,
+  redoSvgPath,
+  clearAllSvgPath,
+  downloadSvgPath,
+} from '../svgs/svg_paths';
+import { colorFromDefaultPalette } from './theme';
+
+export const toolbox = {
+  feature: {
+    dataZoom: {
+      icon: {
+        zoom: marqueeSelectionSvgPath,
+        back: redoSvgPath,
+      },
+    },
+    restore: {
+      icon: clearAllSvgPath,
+    },
+    saveAsImage: {
+      icon: downloadSvgPath,
+    },
+  },
+};
+
+/**
+ * Generates series data for usage in chart examples
+ *
+ * @param {Number} amount number of generated series
+ * @param {String} nameType type of names - how long they should be
+ * @returns {Array} generated series data
+ */
+export const generateSeriesData = (amount = 10, nameType = SERIES_NAME_SHORT) => {
+  const defaultData = [820, 932, 960, 1150, 1290, 1330, 1390];
+  const name = SERIES_NAME[nameType];
+
+  return times(amount, (index) => ({
+    color: colorFromDefaultPalette(index),
+    data: defaultData.map((value) => value * index),
+    name: `${name}${index + 1}`,
+  }));
+};
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/charts/theme.js b/app/assets/javascripts/gitlab-ui/src/utils/charts/theme.js
new file mode 100644
index 00000000000000..6d9c2137fbf61f
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/charts/theme.js
@@ -0,0 +1,272 @@
+import {
+  gray50,
+  gray100,
+  gray200,
+  gray300,
+  gray500,
+  gray600,
+  gray700,
+  gray900,
+  red500,
+  whiteNormal,
+  dataVizAqua500,
+  dataVizAqua600,
+  dataVizAqua700,
+  dataVizAqua800,
+  dataVizAqua900,
+  dataVizAqua950,
+  dataVizBlue200,
+  dataVizBlue400,
+  dataVizBlue500,
+  dataVizBlue600,
+  dataVizBlue700,
+  dataVizBlue800,
+  dataVizBlue900,
+  dataVizBlue950,
+  dataVizGreen500,
+  dataVizGreen600,
+  dataVizGreen700,
+  dataVizGreen800,
+  dataVizGreen900,
+  dataVizGreen950,
+  dataVizMagenta500,
+  dataVizMagenta600,
+  dataVizMagenta700,
+  dataVizMagenta800,
+  dataVizMagenta900,
+  dataVizMagenta950,
+  dataVizOrange500,
+  dataVizOrange600,
+  dataVizOrange700,
+  dataVizOrange800,
+  dataVizOrange950,
+  dataVizOrange900,
+} from '../../../scss_to_js/scss_variables';
+import { scrollHandleSvgPath } from '../svgs/svg_paths';
+import { hexToRgba } from '../utils';
+
+export const themeName = 'gitlab';
+
+export const heatmapHues = [
+  gray100,
+  dataVizBlue200,
+  dataVizBlue400,
+  dataVizBlue600,
+  dataVizBlue800,
+];
+
+export const gaugeNeutralHues = [gray900, gray500];
+export const gaugeSafeHues = [dataVizBlue500, dataVizBlue900];
+export const gaugeWarningHue = dataVizOrange500;
+
+/**
+ * The default palette is based on the Categorical data palette
+ * Categorical data (also known as qualitative or thematic) uses hue to
+ * differentiate qualitative data, and lightness to differentiate quantitive data.
+ * More info: https://gitlab.com/gitlab-org/gitlab-design/-/issues/719#categorical
+ */
+export const colorPaletteDefault = [
+  dataVizBlue500,
+  dataVizOrange600,
+  dataVizAqua500,
+  dataVizGreen700,
+  dataVizMagenta800,
+  dataVizBlue700,
+  dataVizOrange800,
+  dataVizAqua700,
+  dataVizGreen900,
+  dataVizMagenta950,
+  dataVizBlue900,
+  dataVizOrange950,
+  dataVizAqua900,
+  dataVizGreen600,
+  dataVizMagenta700,
+  dataVizBlue600,
+  dataVizOrange700,
+  dataVizAqua600,
+  dataVizGreen800,
+  dataVizMagenta900,
+  dataVizBlue800,
+  dataVizOrange900,
+  dataVizAqua800,
+  dataVizGreen950,
+  dataVizMagenta500,
+  dataVizBlue950,
+  dataVizOrange500,
+  dataVizAqua950,
+  dataVizGreen500,
+  dataVizMagenta600,
+];
+export const colorFromDefaultPalette = (index) =>
+  colorPaletteDefault[index % colorPaletteDefault.length];
+
+const axes = {
+  axisLabel: {
+    margin: 8,
+    show: true,
+    color: gray600,
+    hideOverlap: true,
+  },
+  axisLine: {
+    show: false,
+  },
+  axisPointer: {
+    lineStyle: {
+      type: 'solid',
+      color: gray600,
+    },
+    label: {
+      show: false,
+    },
+  },
+  axisTick: {
+    show: true,
+    alignWithLabel: true,
+    lineStyle: {
+      color: gray200,
+    },
+  },
+  nameGap: 30,
+  nameTextStyle: {
+    fontStyle: 'bold',
+  },
+  splitLine: {
+    lineStyle: {
+      color: [gray200],
+    },
+  },
+  splitArea: {
+    show: false,
+    areaStyle: {
+      color: [hexToRgba(whiteNormal, 0.3), hexToRgba(gray300, 0.3)],
+    },
+  },
+};
+
+const isLineChartWithoutArea = (options) =>
+  Array.isArray(options?.series) &&
+  options.series.some((series) => series.type === 'line' && !series.areaStyle);
+
+const createTheme = (options = {}) => ({
+  color: colorPaletteDefault,
+  backgroundColor: 'transparent',
+  textStyle: {
+    color: gray900,
+  },
+  markLine: {
+    silent: true,
+    symbol: 'none',
+    label: {
+      show: false,
+    },
+    lineStyle: {
+      color: red500,
+      width: 1,
+      type: 'dashed',
+    },
+  },
+  markArea: {
+    silent: true,
+    itemStyle: {
+      color: hexToRgba(red500, 0.1),
+    },
+  },
+  dataZoom: {
+    borderColor: 'transparent',
+    filterMode: 'none',
+    brushSelect: false,
+    dataBackground: {
+      lineStyle: {
+        width: 2,
+        color: gray200,
+        opacity: 1,
+      },
+      // render unfilled zoom-graph if the series is a line chart without area styles
+      // more details: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2364#note_666637306
+      areaStyle: isLineChartWithoutArea(options)
+        ? {} // Use empty object instead of null, see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2185#note_707711029 for more context
+        : {
+            color: gray50,
+            opacity: 1,
+          },
+    },
+    fillerColor: hexToRgba(gray200, 0.23),
+    handleIcon: scrollHandleSvgPath,
+    handleStyle: {
+      borderColor: 'transparent',
+      color: gray500,
+    },
+    handleSize: '50%',
+    labelFormatter: () => null,
+    textStyle: {
+      color: gray600,
+    },
+  },
+  toolbox: {
+    top: '-5',
+    left: 'center',
+    itemSize: 14,
+    emphasis: {
+      iconStyle: {
+        borderWidth: 0,
+        color: gray700,
+      },
+    },
+    iconStyle: {
+      color: gray200,
+      borderWidth: 0,
+    },
+    itemGap: 8,
+    feature: {
+      dataZoom: {
+        title: {
+          zoom: 'Click to zoom in on a portion of the graph',
+          back: 'Remove selection',
+        },
+      },
+      restore: {
+        title: 'Remove all selections and return chart to default state',
+      },
+      saveAsImage: {
+        title: 'Save chart as an image',
+        name: 'graph',
+      },
+    },
+  },
+  markPoint: {
+    label: {
+      normal: {
+        textStyle: {
+          color: whiteNormal,
+        },
+      },
+      emphasis: {
+        textStyle: {
+          color: whiteNormal,
+        },
+      },
+    },
+  },
+  line: {
+    itemStyle: {
+      normal: {
+        borderWidth: 1,
+      },
+    },
+    lineStyle: {
+      normal: {
+        width: 2,
+      },
+    },
+    symbolSize: '6',
+    symbol: 'circle',
+    showSymbol: false,
+    smooth: false,
+  },
+  categoryAxis: axes,
+  valueAxis: axes,
+  logAxis: axes,
+  timeAxis: axes,
+});
+
+export default createTheme;
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/charts/utils.js b/app/assets/javascripts/gitlab-ui/src/utils/charts/utils.js
new file mode 100644
index 00000000000000..42ca0728399497
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/charts/utils.js
@@ -0,0 +1,49 @@
+import { ANNOTATIONS_SERIES_NAME, ANNOTATIONS_COMPONENT_TYPE } from './constants';
+
+/**
+ * Check if passed series has annotations related data.
+ *
+ * This is currently used in time series charts (area & line).
+ *
+ * @param {Array} series Array of series
+ * @returns {Boolean}
+ */
+export const seriesHasAnnotations = (series = []) =>
+  (series || []).filter(
+    (seriesData) =>
+      seriesData.name === ANNOTATIONS_SERIES_NAME &&
+      seriesData[ANNOTATIONS_COMPONENT_TYPE]?.data?.length
+  ).length !== 0;
+
+/**
+ * Check if a data point is from an annotation series.
+ *
+ * This is triggered when hovered over time series charts.
+ *
+ * This is currently used in
+ * @param {Object} params data point object
+ * @returns {boolean}
+ */
+export const isDataPointAnnotation = (params = {}) =>
+  params.name === ANNOTATIONS_SERIES_NAME && params.componentType === ANNOTATIONS_COMPONENT_TYPE;
+
+/**
+ * Date formatter to make date strings more
+ * readable.
+ *
+ * This is currently used in area and line charts
+ * stories.
+ *
+ * @param {String} d date string
+ * @returns {String}
+ */
+export const timeSeriesDateFormatter = (d = '') => {
+  if (!d) {
+    return '';
+  }
+  const date = new Date(d);
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+
+  return `${date.getFullYear()}-${month}-${day}`;
+};
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/charts/utils.spec.js b/app/assets/javascripts/gitlab-ui/src/utils/charts/utils.spec.js
new file mode 100644
index 00000000000000..9a14d8f614f808
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/charts/utils.spec.js
@@ -0,0 +1,106 @@
+import { seriesHasAnnotations, isDataPointAnnotation, timeSeriesDateFormatter } from './utils';
+
+const mockMarkPoint = {
+  symbol: 'path://m5 229 5 8h-10z',
+  symbolSize: '8',
+  symbolOffset: [0, ' 60%'],
+  data: [],
+};
+
+const markPointData = [
+  {
+    name: 'annotations',
+    xAxis: '2018-01-25T01:00:00.000Z',
+    yAxis: 0,
+    tooltipData: { content: 'Scranton strangler was caught.' },
+  },
+  {
+    name: 'annotations',
+    xAxis: '2018-01-25T10:00:00.000Z',
+    yAxis: 0,
+    tooltipData: { content: 'Tobys green car is missing.' },
+  },
+  {
+    name: 'annotations',
+    xAxis: '2018-02-06T08:00:00.000Z',
+    yAxis: 0,
+    tooltipData: { content: 'It was actually Toby!' },
+  },
+];
+const defaultDataWithoutMarkPoint = [
+  {
+    type: 'scatter',
+    name: 'annotations',
+    data: [],
+  },
+];
+
+const defaultDataWithMarkPoint = [
+  {
+    ...defaultDataWithoutMarkPoint[0],
+    markPoint: mockMarkPoint,
+  },
+];
+
+const defaultDataWithMarkPointData = [
+  {
+    ...defaultDataWithoutMarkPoint[0],
+    markPoint: {
+      ...mockMarkPoint,
+      data: markPointData,
+    },
+  },
+];
+
+const defaultDataWithoutAnnotations = [
+  {
+    type: 'line',
+    name: 'Line data',
+    data: [['Mon', 20]],
+  },
+];
+
+const hoveredMarkPoint = (type) => ({
+  ...markPointData[0],
+  componentType: type,
+});
+
+describe('chart utils', () => {
+  describe('seriesHasAnnotations', () => {
+    it.each`
+      name                                                               | input                            | expected
+      ${'Returns false for no input'}                                    | ${undefined}                     | ${false}
+      ${'Returns false for null input'}                                  | ${null}                          | ${false}
+      ${'Returns false for empty series'}                                | ${[]}                            | ${false}
+      ${'Returns false for series with no markPoint'}                    | ${defaultDataWithoutMarkPoint}   | ${false}
+      ${'Returns false for series with markPoint but no markPoint.data'} | ${defaultDataWithMarkPoint}      | ${false}
+      ${'Returns false for non-annotations series'}                      | ${defaultDataWithoutAnnotations} | ${false}
+      ${'Returns true for series with markPoint and markPoint data'}     | ${defaultDataWithMarkPointData}  | ${true}
+    `(`$name`, ({ input, expected }) => {
+      expect(seriesHasAnnotations(input)).toBe(expected);
+    });
+  });
+
+  describe('isDataPointAnnotation', () => {
+    it.each`
+      name                                                               | input                            | expected
+      ${'Returns false for undefined input'}                             | ${undefined}                     | ${false}
+      ${'Returns false for empty input'}                                 | ${{}}                            | ${false}
+      ${'Returns false if hovered data point is a scatter series datum'} | ${hoveredMarkPoint('scatter')}   | ${false}
+      ${'Returns true if hovered data point is a markPoint'}             | ${hoveredMarkPoint('markPoint')} | ${true}
+    `(`$name`, ({ input, expected }) => {
+      expect(isDataPointAnnotation(input)).toBe(expected);
+    });
+  });
+
+  describe('timeSeriesDateFormatter', () => {
+    it.each`
+      name                                             | input            | expected
+      ${'Returns empty string for empty input'}        | ${''}            | ${''}
+      ${'Returns empty string for null input'}         | ${null}          | ${''}
+      ${'Returns formatted date for epoch time input'} | ${1514707200000} | ${'2017-12-31'}
+    `(`$name`, ({ input, expected }) => {
+      expect(timeSeriesDateFormatter(input)).toBe(expected);
+    });
+  });
+});
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/constants.js b/app/assets/javascripts/gitlab-ui/src/utils/constants.js
new file mode 100644
index 00000000000000..7938e9c70dfdf9
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/constants.js
@@ -0,0 +1,299 @@
+import {
+  glThemes as glThemesVariable,
+  glIconSizes as glIconSizesVariable,
+} from '../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
+
+import { POSITION } from '../components/utilities/truncate/constants';
+
+function appendDefaultOption(options) {
+  return { ...options, default: '' };
+}
+
+export const COMMA = ',';
+
+export const glThemes = glThemesVariable.split(COMMA).map((glTheme) => glTheme.trim());
+
+export const variantOptions = {
+  primary: 'primary',
+  secondary: 'secondary',
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+  info: 'info',
+  light: 'light',
+  dark: 'dark',
+};
+
+export const badgeSizeOptions = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+};
+
+export const badgeVariantOptions = {
+  muted: 'muted',
+  neutral: 'neutral',
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+};
+
+export const variantCssColorMap = {
+  muted: 'gl-text-gray-500',
+  neutral: 'gl-text-blue-100',
+  info: 'gl-text-blue-500',
+  success: 'gl-text-green-500',
+  warning: 'gl-text-orange-500',
+  danger: 'gl-text-red-500',
+};
+
+export const targetOptions = ['_self', '_blank', '_parent', '_top', null];
+
+export const sizeOptions = {
+  default: null,
+  sm: 'sm',
+  lg: 'lg',
+};
+
+export const labelSizeOptions = {
+  default: null,
+  sm: 'sm',
+};
+
+export const viewModeOptions = {
+  dark: 'dark',
+  light: 'light',
+};
+
+export const labelColorOptions = {
+  ...viewModeOptions,
+};
+
+export const avatarSizeOptions = [96, 64, 48, 32, 24, 16];
+
+export const avatarsInlineSizeOptions = [32, 24];
+
+export const avatarShapeOptions = {
+  circle: 'circle',
+  rect: 'rect',
+};
+
+export const formStateOptions = {
+  default: null,
+  valid: true,
+  invalid: false,
+};
+
+export const buttonCategoryOptions = {
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+};
+
+export const buttonVariantOptions = {
+  default: 'default',
+  confirm: 'confirm',
+  info: 'info (deprecated)',
+  success: 'success (deprecated)',
+  warning: 'warning (deprecated)',
+  danger: 'danger',
+  dashed: 'dashed',
+  link: 'link',
+  /**
+   * The "reset" variant can be used when customization of GlButton styles is required
+   * (e.g. for the "close" button in GlLabel).
+   * It should be used sparingly and only when other approaches fail.
+   * Prefer supported variants where ever possible.
+   */
+  reset: 'gl-reset',
+};
+
+export const badgeForButtonOptions = {
+  [buttonVariantOptions.default]: badgeVariantOptions.neutral,
+  [buttonVariantOptions.confirm]: badgeVariantOptions.info,
+  [buttonVariantOptions.danger]: badgeVariantOptions.danger,
+};
+
+export const dropdownVariantOptions = {
+  default: 'default',
+  confirm: 'confirm',
+  info: 'info (deprecated)',
+  success: 'success (deprecated)',
+  warning: 'warning (deprecated)',
+  danger: 'danger',
+  link: 'link',
+};
+
+export const buttonSizeOptions = {
+  small: 'small',
+  medium: 'medium',
+};
+
+export const buttonSizeOptionsMap = {
+  small: 'sm',
+  medium: 'md',
+};
+
+// size options all have corresponding styles (e.g. .s12 defined in icon.scss)
+export const iconSizeOptions = glIconSizesVariable.split(' ').map(Number);
+
+export const triggerVariantOptions = {
+  click: 'click',
+  hover: 'hover',
+  focus: 'focus',
+};
+
+export const tooltipPlacements = {
+  top: 'top',
+  left: 'left',
+  right: 'right',
+  bottom: 'bottom',
+};
+
+// in milliseconds
+export const tooltipDelay = {
+  show: 500,
+  hide: 0,
+};
+
+export const popoverPlacements = {
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+};
+
+export const columnOptions = {
+  stacked: 'stacked',
+  tiled: 'tiled',
+};
+
+export const alignOptions = {
+  left: 'left',
+  center: 'center',
+  right: 'right',
+  fill: 'fill',
+};
+
+export const alertVariantOptions = {
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+  info: 'info',
+  tip: 'tip',
+};
+
+export const alertVariantIconMap = {
+  success: 'check-circle',
+  warning: 'warning',
+  danger: 'error',
+  info: 'information-o',
+  tip: 'bulb',
+};
+
+export const colorThemes = {
+  indigo: 'theme-indigo-900',
+  'light-indigo': 'theme-indigo-700',
+  blue: 'theme-blue-900',
+  'light-blue': 'theme-blue-700',
+  green: 'theme-green-900',
+  'light-green': 'theme-green-700',
+  red: 'theme-red-900',
+  'light-red': 'theme-red-700',
+  dark: 'gray-900',
+  light: 'gray-700',
+};
+
+export const modalButtonDefaults = {
+  actionPrimary: {
+    variant: 'confirm',
+    category: 'primary',
+  },
+  actionSecondary: {
+    variant: 'confirm',
+    category: 'secondary',
+  },
+  actionCancel: {
+    variant: 'default',
+  },
+};
+
+export const tabsButtonDefaults = {
+  actionPrimary: {
+    variant: 'success',
+    category: 'primary',
+  },
+  actionSecondary: {
+    variant: 'default',
+    category: 'secondary',
+  },
+  actionTertiary: {
+    variant: 'default',
+  },
+};
+
+export const tokenVariants = ['default', 'search-type', 'search-value'];
+
+export const resizeDebounceTime = 200;
+
+export const variantOptionsWithNoDefault = appendDefaultOption(variantOptions);
+export const sizeOptionsWithNoDefault = appendDefaultOption(sizeOptions);
+
+// Datetime constants
+export const defaultDateFormat = 'YYYY-MM-DD';
+
+export const bannerVariants = ['promotion', 'introduction'];
+
+export const maxZIndex = 10;
+
+export const modalSizeOptions = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+};
+
+export const focusableTags = ['INPUT', 'TEXTAREA', 'A', 'BUTTON', 'SELECT'];
+
+export const keyboard = {
+  escape: 'Escape',
+  backspace: 'Backspace',
+  delete: 'Delete',
+  left: 'Left',
+  arrowLeft: 'ArrowLeft',
+  right: 'Right',
+  arrowRight: 'ArrowRight',
+  home: 'Home',
+  end: 'End',
+};
+
+export const truncateOptions = POSITION;
+
+export const formInputSizes = {
+  xs: 'xs',
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl',
+  '(unset or null)': null,
+};
+
+export const toggleLabelPosition = {
+  hidden: 'hidden',
+  left: 'left',
+  top: 'top',
+};
+
+export const tooltipActionEvents = ['open', 'close', 'enable', 'disable'];
+
+export const drawerVariants = {
+  default: 'default',
+  sidebar: 'sidebar',
+};
+
+export const loadingIconSizes = {
+  'sm (16x16)': 'sm',
+  'md (24x24)': 'md',
+  'lg (32x32)': 'lg',
+  'xl (64x64)': 'xl',
+};
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/data_utils.js b/app/assets/javascripts/gitlab-ui/src/utils/data_utils.js
new file mode 100644
index 00000000000000..511b48db7ce57d
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/data_utils.js
@@ -0,0 +1,47 @@
+import curry from 'lodash/fp/curry';
+
+const getRepeatingValue = (index) => {
+  const values = [
+    100,
+    500,
+    400,
+    200,
+    100,
+    800,
+    400,
+    500,
+    600,
+    300,
+    800,
+    900,
+    110,
+    700,
+    400,
+    300,
+    500,
+    300,
+    400,
+    600,
+    700,
+  ];
+  return index < values.length ? values[index] : values[index % values.length];
+};
+
+export const generateTimeSeries = () =>
+  new Array(100).fill(0).map((el, i) => [new Date(2018, 0, i), getRepeatingValue(i)]);
+
+// takes an element and a list and `intersperses' that element between the elements of the list.
+// (',' ['a', 'b', 'c']) -> ['a', ',', 'b', ',', 'c']
+export const intersperse = curry((separator, items) => {
+  const [head, ...rest] = items;
+  const separatorFactory = typeof separator === 'function' ? separator : () => separator;
+  return [head, ...rest.flatMap((item) => [separatorFactory(), item], rest)];
+});
+
+// inserts a value at a given index into an array
+// (1, 2, [1, 3, 4]) -> [1, 2, 3, 4]
+export const insert = curry((index, newItem, items) => [
+  ...items.slice(0, index),
+  newItem,
+  ...items.slice(index),
+]);
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/datetime_utility.js b/app/assets/javascripts/gitlab-ui/src/utils/datetime_utility.js
new file mode 100644
index 00000000000000..7cc8813899af7b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/datetime_utility.js
@@ -0,0 +1,63 @@
+// These utility methods come from the Gitlab repo; app/assets/javascripts/lib/utils/datetime_utility.js
+
+/**
+ * This method allows you to create new Date instance from existing
+ * date instance without keeping the reference.
+ *
+ * @param {Date} date
+ */
+export const newDate = (date) => (date instanceof Date ? new Date(date.getTime()) : new Date());
+
+/**
+ * Computes the difference between 2 date objects.
+ *
+ * @param {Date} a the start date
+ * @param {Date} b the end date
+ * @example
+ * // returns 5
+ * getDayDifference(new Date('2020-08-10'), new Date('2020-08-15'));
+ * @returns {Number} Number of days between the 2 dates
+ */
+export const getDayDifference = (a, b) => {
+  const millisecondsPerDay = 1000 * 60 * 60 * 24;
+  const date1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
+  const date2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
+
+  return Math.floor((date2 - date1) / millisecondsPerDay);
+};
+
+/**
+ * Subtracts a given number of days from a given date and returns the new date.
+ *
+ * @param {Date} date the date that we will substract days from
+ * @param {Number} daysInPast number of days that are subtracted from a given date
+ * @example
+ * // returns Mon Aug 10 2020 00:00:00
+ * getDateInPast(new Date('2020-08-15'), 5);
+ * @returns {Date} Date in past as Date object
+ */
+export const getDateInPast = (date, daysInPast) =>
+  new Date(newDate(date).setDate(date.getDate() - daysInPast));
+
+/**
+ * Adds a given number of days to a given date and returns the new date.
+ *
+ * @param {Date} date the date that we will add days to
+ * @param {Number} daysInFuture number of days that are added to a given date
+ * @example
+ * // returns Mon Aug 15 2020 00:00:00
+ * getDateInFuture(new Date('2020-08-10'), 5);
+ * @returns {Date} Date in future as Date object
+ */
+export const getDateInFuture = (date, daysInFuture) =>
+  new Date(newDate(date).setDate(date.getDate() + daysInFuture));
+
+/**
+ * Are the given two dates equal
+ *
+ * @param {Date} date1
+ * @param {Date} date2
+ * @returns {Boolean}
+ */
+export const areDatesEqual = (date1, date2) =>
+  Boolean(date1 && date2 && new Date(date1).getTime() === new Date(date2).getTime());
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/number_utils.js b/app/assets/javascripts/gitlab-ui/src/utils/number_utils.js
new file mode 100644
index 00000000000000..1e9072d7b4b782
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/number_utils.js
@@ -0,0 +1,75 @@
+/**
+ * Adds two numbers together
+ * @param {Number} a
+ * @param {Number} b
+ */
+export const addition = (a, b) => a + b;
+
+/**
+ * Returns the sum of all arguments
+ * @param  {...Number} numbers
+ */
+export const sum = (...numbers) => numbers.reduce(addition);
+
+/**
+ * Returns the average of all arguments
+ * @param  {...Number} numbers
+ */
+export const average = (...numbers) => sum(...numbers) / numbers.length;
+
+/**
+ * Convert number to engineering format, using SI suffix
+ * @param {Number|String} value - Number or Number-convertible String
+ * @param {Number} precision
+ * @return {String} number, possibly with a suffix
+ */
+export const engineeringNotation = (value, precision = 2) => {
+  const invalidValues = [NaN, Infinity, -Infinity];
+  const num = Number(value);
+
+  if (invalidValues.includes(num) || invalidValues.includes(Number(precision))) {
+    return num.toString();
+  }
+
+  const allYourBase = {
+    '-24': 'y',
+    '-21': 'z',
+    '-18': 'a',
+    '-15': 'f',
+    '-12': 'p',
+    '-9': 'n',
+    '-6': 'μ',
+    '-3': 'm',
+    0: '',
+    3: 'k',
+    6: 'M',
+    9: 'G',
+    12: 'T',
+    15: 'P',
+    18: 'E',
+    21: 'Z',
+    24: 'Y',
+  };
+
+  const exponentialNotation = num.toExponential(precision);
+
+  const power = exponentialNotation.split('e').map(Number)[1] || 0;
+
+  if (power < -24 || power > 24) {
+    return exponentialNotation;
+  }
+
+  const scaledPower = 3 * Math.floor(power / 3);
+  const scaledMantissa = (exponentialNotation / 10 ** scaledPower)
+    // strip trailing decimals from floating point rounding errors
+    .toFixed(precision)
+    // strip trailing 0s after a decimal point
+    .replace(/\.([1-9]*)0+$/, (_, fractionalDigits) => {
+      if (fractionalDigits) {
+        return `.${fractionalDigits}`;
+      }
+      return '';
+    });
+
+  return `${scaledMantissa}${allYourBase[scaledPower]}`;
+};
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/stories_utils.js b/app/assets/javascripts/gitlab-ui/src/utils/stories_utils.js
new file mode 100644
index 00000000000000..d5d728de4c5cf9
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/stories_utils.js
@@ -0,0 +1,14 @@
+/**
+ * These are used to test varying lengths of series names
+ */
+export const SERIES_NAME_SHORT = 'SERIES_NAME_SHORT';
+export const SERIES_NAME_LONG = 'SERIES_NAME_LONG';
+export const SERIES_NAME_LONG_WITHOUT_SPACES = 'SERIES_NAME_LONG_WITHOUT_SPACES';
+
+export const SERIES_NAME = {
+  [SERIES_NAME_SHORT]: 'Series ',
+  [SERIES_NAME_LONG]:
+    'Series name long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt interdum sapien ut blandit. Nulla fermentum nisi id euismod vulputate. END',
+  [SERIES_NAME_LONG_WITHOUT_SPACES]:
+    'Series_name_long._Lorem_ipsum_dolor_sit_amet,_consectetur_adipiscing_elit._Sed_tincidunt_interdum_sapien_ut_blandit._Nulla_fermentum_nisi_id_euismod_vulputate._END',
+};
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/story_decorators/container.js b/app/assets/javascripts/gitlab-ui/src/utils/story_decorators/container.js
new file mode 100644
index 00000000000000..2bc7fa92b8acd8
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/story_decorators/container.js
@@ -0,0 +1,12 @@
+/**
+ * Return a story decorator function, which wraps the given story in a `div`
+ * element with the given `style` attributes.
+ *
+ * @param {object} style The style attribute to apply to the container.
+ * @return {function} The story decorator.
+ */
+export const makeContainer = (style) => (Story) => ({
+  render(h) {
+    return h('div', { style }, [h(Story())]);
+  },
+});
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/string_utils.js b/app/assets/javascripts/gitlab-ui/src/utils/string_utils.js
new file mode 100644
index 00000000000000..e0abad71d62b3d
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/string_utils.js
@@ -0,0 +1,79 @@
+import emojiRegexFactory from 'emoji-regex';
+
+/**
+ * Split the given string after each occurrence of each of the given symbols.
+ *
+ * Symbols are strings, and can be of length one or more. Zero-length symbols
+ * are ignored.
+ *
+ * Unlike with `String::split`, the symbol is left in results, with
+ * the split occurring _after_ the symbol.
+ *
+ * For example:
+ *
+ *     splitAfterSymbols(['/'], 'a/b/c')    // ['a/', 'b/', 'c']
+ *     splitAfterSymbols(['foo'], 'foobar') // ['foo', 'bar']
+ *
+ * @param {string[]} symbols The symbols to split the string by.
+ * @param {string} string The string to split.
+ * @returns {string[]} The resulting strings.
+ */
+export const splitAfterSymbols = (symbols, string) => {
+  const textParts = [];
+  let textPartStartIndex = 0;
+
+  if (string.length === 0) {
+    return [string];
+  }
+
+  for (let i = 0; i < string.length; ) {
+    let symbolFound = false;
+
+    for (let j = 0; j < symbols.length; j += 1) {
+      const symbol = symbols[j];
+
+      if (!symbol) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+
+      symbolFound = string.slice(i, i + symbol.length) === symbol;
+
+      if (symbolFound) {
+        const textPartEndIndex = i + symbol.length;
+        const textPart = string.slice(textPartStartIndex, textPartEndIndex);
+        textParts.push(textPart);
+        textPartStartIndex = textPartEndIndex;
+        i = textPartStartIndex;
+        break;
+      }
+    }
+
+    if (!symbolFound) {
+      i += 1;
+    }
+  }
+
+  const final = string.slice(textPartStartIndex);
+  if (final) {
+    textParts.push(final);
+  }
+
+  return textParts;
+};
+
+const startsWithEmojiRegex = `^(${emojiRegexFactory().source})`;
+
+export const getAvatarChar = (name) => {
+  if (name) {
+    // Check if string starts with an emoji (which could be multiple characters and zero-width joined)
+    const match = name.match(startsWithEmojiRegex);
+    if (match) {
+      // Return the first match
+      return match[0];
+    }
+    return name.charAt(0).toUpperCase();
+  }
+
+  return '';
+};
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/svgs/svg_paths.js b/app/assets/javascripts/gitlab-ui/src/utils/svgs/svg_paths.js
new file mode 100644
index 00000000000000..fad1653523e69b
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/svgs/svg_paths.js
@@ -0,0 +1,10 @@
+export const scrollHandleSvgPath =
+  'path://M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zM6 4a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V5a1 1 0 0 0-1-1zm4 0a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V5a1 1 0 0 0-1-1z';
+export const marqueeSelectionSvgPath =
+  'path://M2 7h2v2H2zm7-5v2H7V2zm3.6 9.24l1.08 1.042a1 1 0 1 1-1.39 1.439l-1.079-1.042-.695.719a.5.5 0 0 1-.815-.142L7.493 8.344a.5.5 0 0 1 .645-.668l4.986 2.034a.5.5 0 0 1 .171.81zM2 5V3a1 1 0 0 1 1-1h2v2H4v1zm10-1h-1V2h2a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0V4zm-7 8a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1v-2h2v1z';
+export const redoSvgPath =
+  'path://M5.413 4.949L6.904 6.44a.328.328 0 0 1-.232.56H2.328A.328.328 0 0 1 2 6.672V2.328a.328.328 0 0 1 .56-.232l1.435 1.436a6 6 0 1 1 .455 9.306 1 1 0 1 1 1.184-1.612 4 4 0 1 0-.222-6.277z';
+export const clearAllSvgPath =
+  'path://M2.004 9.136h2.052a3.998 3.998 0 0 0 3.918 2.88c2.208-.039 3.968-1.846 3.93-4.037a3.936 3.936 0 0 0-.995-2.55L9.444 6.936a.33.33 0 0 1-.564-.22l-.075-4.309a.326.326 0 0 1 .322-.33L13.47 2a.33.33 0 0 1 .234.091c.13.125.134.33.008.46L12.302 4a5.912 5.912 0 0 1 1.6 3.945c.059 3.286-2.58 5.997-5.893 6.054-2.975.052-5.482-2.054-6.005-4.863zM14 7.856v.365a5.861 5.861 0 0 0 0-.365zM2.084 9.036h2.044zM4 8.046H2a5.919 5.919 0 0 1 .246-1.686l1.903.618A4.017 4.017 0 0 0 4 8.045zm.612-2.11L2.942 4.84A5.96 5.96 0 0 1 4.405 3.28l1.054 1.7c-.329.269-.616.59-.847.956zm1.247-3.451a6.017 6.017 0 0 1 1.942-.39v1.985a4.013 4.013 0 0 0-1.273.275z';
+export const downloadSvgPath =
+  'path://M14 9a1 1 0 0 1 1 1v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3a1 1 0 0 1 2 0v3h10v-3a1 1 0 0 1 1-1zM8 1a1 1 0 0 1 1 1v4.586l1.293-1.293a1 1 0 1 1 1.414 1.414L8 10.414 4.293 6.707a1 1 0 0 1 1.414-1.414L7 6.586V2a1 1 0 0 1 1-1z';
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/test_utils.js b/app/assets/javascripts/gitlab-ui/src/utils/test_utils.js
new file mode 100644
index 00000000000000..baa59c0cd3d110
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/test_utils.js
@@ -0,0 +1,26 @@
+/**
+ * Wrapper around setTimeout which executes immediately in visual tests
+ * in order to avoid flaky tests
+ */
+export function setStoryTimeout(fn, timeout) {
+  return setTimeout(fn, process.env.IS_VISUAL_TEST ? 0 : timeout);
+}
+
+// adopted this method from Bootstraps utils
+// https://github.com/bootstrap-vue/bootstrap-vue/blob/2fd03f0b1d0cc41f9930078ba8b1c16b10e4ac2f/tests/utils.js#L6
+export const waitForAnimationFrame = () => new Promise((resolve) => requestAnimationFrame(resolve));
+
+export const getResetAnimationsCSS = () => `
+  *, *::after, *::before {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -ms-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important;
+
+    -webkit-animation: none !important;
+    -moz-animation: none !important;
+    -ms-animation: none !important;
+    -o-animation: none !important;
+    animation: none !important;
+  }`;
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/use_fake_date.js b/app/assets/javascripts/gitlab-ui/src/utils/use_fake_date.js
new file mode 100644
index 00000000000000..5e4d1d767fe035
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/use_fake_date.js
@@ -0,0 +1,27 @@
+import MockDate from 'mockdate';
+
+/**
+ * When applied to a story, this mixin mocks the current date to make
+ * visual tests that rely on the date deterministic
+ *
+ * Usage:
+ *
+ * import { useFakeDate } from '../../../../tests/utils/use_fake_date';
+ * documentedStoriesOf('some|story')
+ * .add('default', () => ({
+ *   mixins: [useFakeDate()],
+ * })
+ */
+export const useFakeDate = () => {
+  if (process.env.IS_VISUAL_TEST) {
+    return {
+      created() {
+        MockDate.set('2020-01-10', 0);
+      },
+      destroyed() {
+        MockDate.reset();
+      },
+    };
+  }
+  return {};
+};
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/use_mock_intersection_observer.js b/app/assets/javascripts/gitlab-ui/src/utils/use_mock_intersection_observer.js
new file mode 100644
index 00000000000000..2370c46413af45
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/use_mock_intersection_observer.js
@@ -0,0 +1,98 @@
+/* global jest, beforeEach, afterEach */
+/* eslint-disable class-methods-use-this, max-classes-per-file, babel/camelcase */
+import { isMatch, isArray } from 'lodash';
+
+/**
+ * This class gives us a JSDom friendly DOM observer which we can manually trigger in tests
+ *
+ * Use this in place of MutationObserver or IntersectionObserver
+ *
+ * This class is largely influenced from [a test helper][1] in the main GitLab project
+ *
+ * [1]: https://gitlab.com/gitlab-org/gitlab/blob/a123813c63147392b95cd03c4744ae9db0575b0f/spec/frontend/helpers/mock_dom_observer.js#L95
+ */
+class MockObserver {
+  constructor(cb) {
+    this.$_cb = cb;
+    this.$_observers = [];
+  }
+
+  observe(node, options = {}) {
+    this.$_observers.push([node, options]);
+  }
+
+  disconnect() {
+    this.$_observers = [];
+  }
+
+  takeRecords() {}
+
+  // eslint-disable-next-line babel/camelcase
+  $_triggerObserve(nodeParam, { entry = {}, options = {} } = {}) {
+    const nodes = this.$_getNodesFromParam(nodeParam);
+
+    nodes.forEach((node) => {
+      if (this.$_hasObserver(node, options)) {
+        this.$_cb([{ target: node, ...entry }]);
+      }
+    });
+  }
+
+  // eslint-disable-next-line babel/camelcase
+  $_hasObserver(node, options = {}) {
+    return this.$_observers.some(
+      ([obvNode, obvOptions]) => node === obvNode && isMatch(options, obvOptions)
+    );
+  }
+
+  $_getNodesFromParam(nodeParam) {
+    if (!nodeParam) {
+      return this.$_observers.map(([node]) => node);
+    }
+    if (!isArray(nodeParam)) {
+      return [nodeParam];
+    }
+
+    return nodeParam;
+  }
+}
+
+class MockIntersectionObserver extends MockObserver {
+  unobserve(node) {
+    this.$_observers = this.$_observers.filter(([obvNode]) => node !== obvNode);
+  }
+}
+
+const useMockIntersectionObserver = () => {
+  let instances;
+  let origObserver;
+
+  beforeEach(() => {
+    instances = [];
+    origObserver = global.IntersectionObserver;
+    global.IntersectionObserver = jest.fn().mockImplementation((...args) => {
+      const mockObserver = new MockIntersectionObserver(...args);
+
+      instances.push(mockObserver);
+
+      return mockObserver;
+    });
+  });
+
+  afterEach(() => {
+    instances = [];
+    global.IntersectionObserver = origObserver;
+  });
+
+  const trigger = (observer, ...args) => {
+    observer.$_triggerObserve(...args);
+  };
+
+  const getInstances = () => {
+    return instances;
+  };
+
+  return { getInstances, trigger };
+};
+
+export default useMockIntersectionObserver;
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/utils.js b/app/assets/javascripts/gitlab-ui/src/utils/utils.js
new file mode 100644
index 00000000000000..64a19c13a8b5c1
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/utils.js
@@ -0,0 +1,124 @@
+import { COMMA, labelColorOptions, focusableTags } from './constants';
+
+export function debounceByAnimationFrame(fn) {
+  let requestId;
+
+  return function debounced(...args) {
+    if (requestId) {
+      window.cancelAnimationFrame(requestId);
+    }
+    requestId = window.requestAnimationFrame(() => fn.apply(this, args));
+  };
+}
+
+export function throttle(fn) {
+  let frameId = null;
+
+  return (...args) => {
+    if (frameId) {
+      return;
+    }
+
+    frameId = window.requestAnimationFrame(() => {
+      fn(...args);
+      frameId = null;
+    });
+  };
+}
+
+export function rgbFromHex(hex) {
+  const cleanHex = hex.replace('#', '');
+  const rgb =
+    cleanHex.length === 3
+      ? cleanHex.split('').map((val) => val + val)
+      : cleanHex.match(/[\da-f]{2}/gi);
+  const [r, g, b] = rgb.map((val) => parseInt(val, 16));
+  return [r, g, b];
+}
+
+export function rgbFromString(color, sub) {
+  const rgb = color.substring(sub, color.length - 1).split(COMMA);
+  const [r, g, b] = rgb.map((i) => parseInt(i, 10));
+  return [r, g, b];
+}
+
+export function hexToRgba(hex, opacity = 1) {
+  const [r, g, b] = rgbFromHex(hex);
+
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+
+export function colorFromBackground(backgroundColor) {
+  let r;
+  let g;
+  let b;
+
+  if (backgroundColor.startsWith('#')) {
+    [r, g, b] = rgbFromHex(backgroundColor);
+  } else if (backgroundColor.startsWith('rgba(')) {
+    [r, g, b] = rgbFromString(backgroundColor, 5);
+  } else if (backgroundColor.startsWith('rgb(')) {
+    [r, g, b] = rgbFromString(backgroundColor, 4);
+  }
+
+  if (r + g + b <= 500) {
+    return labelColorOptions.light;
+  }
+  return labelColorOptions.dark;
+}
+
+export function uid() {
+  return Math.random().toString(36).substring(2);
+}
+
+/**
+ * Receives an element and validates that it can be focused
+ * @param { HTMLElement } The element we want to validate
+ * @return { boolean } Is the element focusable
+ */
+
+export function isElementFocusable(elt) {
+  if (!elt) return false;
+
+  const { tagName } = elt;
+
+  const isValidTag = focusableTags.includes(tagName);
+  const hasValidType = elt.getAttribute('type') !== 'hidden';
+  const isDisabled = elt.getAttribute('disabled') === '' || elt.getAttribute('disabled');
+  const hasValidZIndex = elt.getAttribute('z-index') !== '-1';
+  const isInvalidAnchorTag = tagName === 'A' && !elt.getAttribute('href');
+
+  return isValidTag && hasValidType && !isDisabled && hasValidZIndex && !isInvalidAnchorTag;
+}
+
+/**
+ * Receives an array of HTML elements and focus the first one possible
+ * @param { Array.<HTMLElement> } An array of element to potentially focus
+ * @return { undefined }
+ */
+
+export function focusFirstFocusableElement(elts) {
+  const focusableElt = elts.find((el) => isElementFocusable(el));
+
+  if (focusableElt) focusableElt.focus();
+}
+
+/**
+ * Returns true if the current environment is considered a development environment (it's not
+ * production or test).
+ *
+ * @returns {boolean}
+ */
+export function isDev() {
+  return !['test', 'production'].includes(process.env.NODE_ENV);
+}
+
+/**
+ * Prints a warning message to the console in non-test and non-production environments.
+ * @param {string} message message to print to the console
+ */
+export function logWarning(message = '') {
+  if (message.length && isDev()) {
+    console.warn(message); // eslint-disable-line no-console
+  }
+}
diff --git a/app/assets/javascripts/gitlab-ui/src/utils/validation_utils.js b/app/assets/javascripts/gitlab-ui/src/utils/validation_utils.js
new file mode 100644
index 00000000000000..b9a0db1d78b794
--- /dev/null
+++ b/app/assets/javascripts/gitlab-ui/src/utils/validation_utils.js
@@ -0,0 +1,9 @@
+// Creates out of validation configurations from .documentation.js files and creates a readable string out of it
+export const getValidationInfoText = (validation = {}) => {
+  switch (validation.type) {
+    case 'range':
+      return `${validation.min}-${validation.max}`;
+    default:
+      return '';
+  }
+};
-- 
GitLab


From ada0cfe91de769f3e237994cfbb9fb92e98b5351 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Wed, 16 Feb 2022 17:35:09 +0300
Subject: [PATCH 3/4] Fix manual host and cookies passing to the ssr server

---
 .../diffs/components/batch_fetcher.vue        | 12 +---
 app/assets/javascripts/diffs/store/actions.js | 34 +++-------
 app/assets/javascripts/diffs/streaming.js     | 17 +++--
 app/assets/javascripts/entry-server.js        |  6 ++
 .../javascripts/lib/utils/async_storage.js    |  6 ++
 .../javascripts/lib/utils/url_utility.js      | 18 +++--
 .../javascripts/mr_notes/stores/index.js      |  2 -
 .../projects/merge_requests/show/index.js     |  3 +-
 server.js                                     | 67 +++++++++++--------
 9 files changed, 86 insertions(+), 79 deletions(-)
 create mode 100644 app/assets/javascripts/lib/utils/async_storage.js

diff --git a/app/assets/javascripts/diffs/components/batch_fetcher.vue b/app/assets/javascripts/diffs/components/batch_fetcher.vue
index 6b8dbef19850a7..cf4738905ac585 100644
--- a/app/assets/javascripts/diffs/components/batch_fetcher.vue
+++ b/app/assets/javascripts/diffs/components/batch_fetcher.vue
@@ -32,22 +32,12 @@ export default {
   },
   methods: {
     async fetchFilesBatch() {
-      let baseUrl = '';
-      let headers = {};
-      if (typeof window === 'undefined') {
-        baseUrl = process.env.BASE_URL;
-        headers = { cookie: process.env.COOKIE };
-      }
       const urlParams = {
         w: this.showWhitespace ? '0' : '1',
         view: 'inline',
       };
       const { data: { diff_files: filesBatch } } = await axios
-        .get(
-          `${baseUrl}${mergeUrlParams({ ...urlParams, page: this.page, per_page: this.perPage }, this.endpoint)}`,
-          {
-          headers
-        });
+        .get(mergeUrlParams({ ...urlParams, page: this.page, per_page: this.perPage }, this.endpoint));
       this.filesBatch = filesBatch;
     },
   },
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 1bb0d765dedf51..d812c1a5798588 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import { generateTreeList } from "~/diffs/utils/tree_worker_utils.js";
-import { sortTree } from "~/ide/stores/utils.js";
+import { generateTreeList } from '~/diffs/utils/tree_worker_utils.js';
+import { sortTree } from '~/ide/stores/utils.js';
 import {
   setCookie,
   handleLocationHash,
@@ -11,7 +11,6 @@ import createFlash from '~/flash';
 import { diffViewerModes } from '~/ide/constants';
 import axios from '~/lib/utils/axios_utils';
 
-
 import httpStatusCodes from '~/lib/utils/http_status';
 import Poll from '~/lib/utils/poll';
 import { mergeUrlParams, getLocationHash } from '~/lib/utils/url_utility';
@@ -111,7 +110,10 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
     w: state.showWhitespace ? '0' : '1',
     view: 'inline',
   };
-  const hash = typeof window === 'undefined' ? '' : window.location.hash.replace('#', '').split('diff-content-').pop();
+  const hash =
+    typeof window === 'undefined'
+      ? ''
+      : window.location.hash.replace('#', '').split('diff-content-').pop();
   let totalLoaded = 0;
   let scrolledVirtualScroller = false;
 
@@ -119,18 +121,9 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
   commit(types.SET_RETRIEVING_BATCHES, true);
   eventHub.$emit(EVT_PERF_MARK_DIFF_FILES_START);
 
-  let baseUrl = '';
-  let headers = {};
-  if (typeof window === 'undefined') {
-    baseUrl = process.env.BASE_URL;
-    headers = { cookie: process.env.COOKIE };
-  }
-
   const getBatch = (page = startPage) =>
     axios
-      .get(`${baseUrl}${mergeUrlParams({ ...urlParams, page, per_page: perPage }, state.endpointBatch)}`, {
-        headers
-      })
+      .get(mergeUrlParams({ ...urlParams, page, per_page: perPage }, state.endpointBatch))
       .then(({ data: { pagination, diff_files } }) => {
         totalLoaded += diff_files.length;
 
@@ -194,7 +187,7 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
         return nextPage;
       })
       .then((nextPage) => {
-        if (typeof window !== "undefined") dispatch('startRenderDiffsQueue');
+        if (typeof window !== 'undefined') dispatch('startRenderDiffsQueue');
 
         if (nextPage) {
           return getBatch(nextPage);
@@ -217,7 +210,7 @@ function getTree(data) {
   return {
     treeEntries,
     tree: sortTree(tree),
-  }
+  };
 }
 
 export const fetchDiffFilesMeta = ({ commit, state }) => {
@@ -225,8 +218,6 @@ export const fetchDiffFilesMeta = ({ commit, state }) => {
     view: 'inline',
   };
   let worker;
-  let baseUrl = '';
-  let headers = {};
   if (typeof window !== 'undefined') {
     worker = new TreeWorker();
 
@@ -239,15 +230,10 @@ export const fetchDiffFilesMeta = ({ commit, state }) => {
 
       worker.terminate();
     });
-  } else {
-    baseUrl = process.env.BASE_URL;
-    headers = { cookie: process.env.COOKIE };
   }
 
   return axios
-    .get(`${baseUrl}${mergeUrlParams(urlParams, state.endpointMetadata)}`, {
-      headers
-    })
+    .get(mergeUrlParams(urlParams, state.endpointMetadata))
     .then(({ data }) => {
       const strippedData = { ...data };
       delete strippedData.diff_files;
diff --git a/app/assets/javascripts/diffs/streaming.js b/app/assets/javascripts/diffs/streaming.js
index baed84d84702cf..65290ecac80244 100644
--- a/app/assets/javascripts/diffs/streaming.js
+++ b/app/assets/javascripts/diffs/streaming.js
@@ -1,25 +1,24 @@
 export const renderStreamingDiffsApp = async (config) => {
   const configQuery = new URLSearchParams(config);
-  const { body } = await fetch(`http://localhost:8080/?${configQuery}`, {
-    credentials: "include"
+  const { body } = await fetch(`http://gdk.test:8080/?${configQuery}`, {
+    credentials: 'include',
   });
   const reader = body.getReader();
-  const decoder = new TextDecoder("utf-8");
+  const decoder = new TextDecoder('utf-8');
 
-  const streamDocument = document.implementation.createHTMLDocument("stream");
+  const streamDocument = document.implementation.createHTMLDocument('stream');
 
   streamDocument.open();
-  streamDocument.write("<streaming-element>");
+  streamDocument.write('<streaming-element>');
 
-  const virtualStreamingElement =
-    streamDocument.querySelector("streaming-element");
+  const virtualStreamingElement = streamDocument.querySelector('streaming-element');
   const diffsApp = document.querySelector('#js-diffs-app');
   diffsApp.appendChild(virtualStreamingElement);
   diffsApp.style.display = 'block';
 
   await reader.read().then(async function processText({ done, value }) {
     if (done) {
-      streamDocument.write("</streaming-element>");
+      streamDocument.write('</streaming-element>');
       streamDocument.close();
       return;
     }
@@ -29,4 +28,4 @@ export const renderStreamingDiffsApp = async (config) => {
     const result = await reader.read();
     await processText(result);
   });
-}
+};
diff --git a/app/assets/javascripts/entry-server.js b/app/assets/javascripts/entry-server.js
index 6a07ff873b35bc..52b491cd7abe19 100644
--- a/app/assets/javascripts/entry-server.js
+++ b/app/assets/javascripts/entry-server.js
@@ -1,5 +1,11 @@
 import initDiffsApp from '~/diffs/index.js';
 import { createStore } from '~/mr_notes/stores/index.js';
+import axios from 'axios';
+import { setStorage } from '~/lib/utils/async_storage';
+
+export const initAxios = (callback) => callback(axios);
+
+export const setAsyncStorage = setStorage;
 
 export const createApp = async (config) => {
   return initDiffsApp(createStore({ page: { activeTab: 'diffs' } }), config);
diff --git a/app/assets/javascripts/lib/utils/async_storage.js b/app/assets/javascripts/lib/utils/async_storage.js
new file mode 100644
index 00000000000000..1cbf84677becbd
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/async_storage.js
@@ -0,0 +1,6 @@
+let storage;
+
+export const setStorage = (newStorage) => {
+  storage = newStorage;
+};
+export const getStorageValue = () => storage?.getStore();
diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js
index 5baf8c0bc48050..651344aff9f1da 100644
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -1,3 +1,5 @@
+import { getStorageValue } from '~/lib/utils/async_storage';
+
 export const DASH_SCOPE = '-';
 
 export const PATH_SEPARATOR = '/';
@@ -102,8 +104,13 @@ export function joinPaths(...paths) {
 // Returns an array containing the value(s) of the
 // of the key passed as an argument
 export function getParameterValues(sParam, url) {
-  url = typeof window !== 'undefined' ? url || window.location : process.env.BASE_URL;
-  const sPageURL = decodeURIComponent(new URL(url).search.substring(1));
+  let fullUrl;
+  if (typeof window !== 'undefined') {
+    fullUrl = new URL(url || window.location);
+  } else {
+    fullUrl = new URL(getStorageValue().referer, url);
+  }
+  const sPageURL = decodeURIComponent(fullUrl.search.substring(1));
 
   return sPageURL.split('&').reduce((acc, urlParam) => {
     const sParameterName = urlParam.split('=');
@@ -455,7 +462,10 @@ export const getUrlParamsArray = () => urlParamsToArray(window.location.search);
  *
  * ex: "?one=1&two=2" into {one: 1, two: 2}
  */
-export function queryToObject(query = '', { gatherArrays = false, legacySpacesDecode = false } = {}) {
+export function queryToObject(
+  query = '',
+  { gatherArrays = false, legacySpacesDecode = false } = {},
+) {
   const removeQuestionMarkFromQuery = String(query).startsWith('?') ? query.slice(1) : query;
   return removeQuestionMarkFromQuery.split('&').reduce((accumulator, curr) => {
     const [key, value] = curr.split('=');
@@ -492,7 +502,7 @@ export function queryToObject(query = '', { gatherArrays = false, legacySpacesDe
  * @returns value of the parameter as string
  */
 export const getParameterByName = (name, query = '') => {
-  if (typeof window !== 'undefined') query = query || window.location.search
+  if (typeof window !== 'undefined') query = query || window.location.search;
   return queryToObject(query)[name] || null;
 };
 
diff --git a/app/assets/javascripts/mr_notes/stores/index.js b/app/assets/javascripts/mr_notes/stores/index.js
index 448dd632773bcd..b599a6e322bfca 100644
--- a/app/assets/javascripts/mr_notes/stores/index.js
+++ b/app/assets/javascripts/mr_notes/stores/index.js
@@ -16,5 +16,3 @@ export const createStore = ({ page } = {}) =>
       batchComments: batchCommentsModule(),
     },
   });
-
-export default createStore();
diff --git a/app/assets/javascripts/pages/projects/merge_requests/show/index.js b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
index 7f49eb60c5cdaa..0c6335f89aef1e 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/show/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
@@ -1,7 +1,7 @@
 import { initReviewBar } from '~/batch_comments';
 import { initIssuableHeaderWarnings } from '~/issuable';
 import initMrNotes from '~/mr_notes';
-import store from '~/mr_notes/stores';
+import { createStore } from '~/mr_notes/stores';
 import initSidebarBundle from '~/sidebar/sidebar_bundle';
 import initShow from '../init_merge_request_show';
 
@@ -9,6 +9,7 @@ initMrNotes();
 initShow();
 
 requestIdleCallback(() => {
+  const store = createStore();
   initSidebarBundle(store);
   initReviewBar();
   initIssuableHeaderWarnings(store);
diff --git a/server.js b/server.js
index 1e5b12f355f446..2e1850d467257c 100644
--- a/server.js
+++ b/server.js
@@ -1,36 +1,47 @@
 const server = require('express')();
 const renderer = require('vue-server-renderer').createRenderer();
-const fetch = require('node-fetch');
-const { createApp } = require('./out/main.bundle.js');
+const { createApp, initAxios, setAsyncStorage } = require('./out/main.bundle.js');
+const { AsyncLocalStorage } = require('async_hooks');
 
-const {Worker: NodeJSWorker} = require('worker_threads');
-const {resolve: resolvePath} = require('path');
+const asyncSessionStorage = new AsyncLocalStorage();
 
-global.Worker = function NodeJSWorkerThreadsPathResolveWrap(path, options) {
-  // this __dirname will travel into the bundle and only resolved at
-  // runtime there, so it will be the path to the dist bin
-  // and we can assume to find the worker there.
-  // generally, this has to be an absolute path with NodeJS worker-threads,
-  // so this is why we use resolve here and not join.
-  return new NodeJSWorker(resolvePath(__dirname, 'out', path), options);
-}
+setAsyncStorage(asyncSessionStorage);
+
+initAxios((axios) => {
+  // eslint-disable-next-line arrow-body-style
+  axios.interceptors.request.use((config) => {
+    const { headers, referer } = asyncSessionStorage.getStore();
+    return {
+      ...config,
+      headers: {
+        ...config.headers,
+        ...headers,
+      },
+      baseURL: referer,
+    };
+  });
+});
 
 server.get('*', async (req, res) => {
-  // const response = await fetch('http://gdk.test:3000/gitlab-org/gitlab-shell/-/merge_requests/6/diffs', {
-  //   headers: {
-  //     Accept: 'application/json',
-  //     cookie: process.env.COOKIE,
-  //   }
-  // });
-  // const config = await response.json();
-  const app = await createApp(req.query, req.headers.cookie);
-  const stream = renderer.renderToStream(app);
-  res.setHeader('Access-Control-Allow-Origin', req.get('origin'));
-  // eslint-disable-next-line @gitlab/require-i18n-strings
-  res.setHeader('Access-Control-Allow-Headers', 'origin, content-type, accept, cookie');
-  res.setHeader('Access-Control-Allow-Credentials', 'true');
-  res.set({ 'content-type': 'text/html; charset=utf-8' });
-  stream.pipe(res);
+  const sessionStore = {
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    referer: req.get('Referrer'),
+    headers: {
+      cookie: req.headers.cookie || '',
+    },
+  };
+  asyncSessionStorage.run(sessionStore, async () => {
+    const app = await createApp(req.query);
+    const stream = renderer.renderToStream(app);
+    res.setHeader('Access-Control-Allow-Origin', req.get('origin'));
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    res.setHeader('Access-Control-Allow-Headers', 'origin, content-type, accept, cookie');
+    res.setHeader('Access-Control-Allow-Credentials', 'true');
+    res.set({ 'content-type': 'text/html; charset=utf-8' });
+    stream.pipe(res);
+  });
 });
 
-server.listen(8080);
+// this assumes you've setup gdk to use gdk.test domain
+// otherwise use the same IP that's used for GDK
+server.listen(8080, process.env.SERVER_HOSTNAME || '172.16.123.1');
-- 
GitLab


From 7da724afd4b9fbdcb6bcdf674885fd5e14f256b7 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Wed, 16 Feb 2022 19:59:11 +0300
Subject: [PATCH 4/4] Load file by file, add lazy anchor links in sidebar

---
 .../javascripts/diffs/components/app.vue      | 27 ++++++++-------
 .../diffs/components/diff_file.vue            |  2 ++
 app/assets/javascripts/diffs/streaming.js     |  2 +-
 app/assets/javascripts/lazy_loader.js         | 34 +++++++++----------
 .../diff_file_loaded_web_component.js         | 11 ++++++
 app/assets/javascripts/mr_notes/index.js      |  8 ++++-
 .../vue_shared/components/file_row.vue        |  6 ++--
 app/assets/stylesheets/framework/diffs.scss   |  5 +++
 .../page_bundles/merge_requests.scss          |  8 +++++
 9 files changed, 69 insertions(+), 34 deletions(-)
 create mode 100644 app/assets/javascripts/mr_notes/diff_file_loaded_web_component.js

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 68d3cfe61d5059..8afa7f9fb79832 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -264,9 +264,6 @@ export default {
       return 5;
       return this.diffFilesLength ? 1 : 5;
     },
-    perPageLength() {
-      return Math.floor(this.diffFilesLength / this.perPage);
-    },
     canCurrentUserFork() {
       return this.currentUser.can_fork === true && this.currentUser.can_create_merge_request;
     },
@@ -747,23 +744,27 @@ export default {
             </dynamic-scroller>
             <template v-else>
               <batch-fetcher
-                v-for="index in perPageLength"
+                v-for="index in diffFilesLength"
                 :key="index"
-                :page="index"
-                :per-page="perPage"
+                :page="index - 1"
+                :per-page="1"
                 :endpoint="endpointBatch"
                 :show-whitespace="showWhitespace"
               >
                 <template #default="{ files }">
-                  <diff-file
+                  <div
                     v-for="file in files"
                     :key="file.new_path"
-                    :file="file"
-                    :reviewed="fileReviews[file.id]"
-                    :help-page-path="helpPagePath"
-                    :can-current-user-fork="canCurrentUserFork"
-                    :view-diffs-file-by-file="viewDiffsFileByFile"
-                  />
+                  >
+                    <diff-file
+                      :file="file"
+                      :reviewed="fileReviews[file.id]"
+                      :help-page-path="helpPagePath"
+                      :can-current-user-fork="canCurrentUserFork"
+                      :view-diffs-file-by-file="viewDiffsFileByFile"
+                    />
+                    <diff-file-fetched :path="file.new_path"></diff-file-fetched>
+                  </div>
                 </template>
               </batch-fetcher>
             </template>
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 1a2a5f711b18ae..713139bb96aa91 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -339,6 +339,7 @@ export default {
     :data-path="file.new_path"
     class="diff-file file-holder gl-border-none"
   >
+    <div :id="`path-${file.new_path}`">
     <diff-file-header
       :can-current-user-fork="canCurrentUserFork"
       :diff-file="file"
@@ -477,6 +478,7 @@ export default {
       </div>
     </template>
   </div>
+  </div>
 </template>
 
 <style>
diff --git a/app/assets/javascripts/diffs/streaming.js b/app/assets/javascripts/diffs/streaming.js
index 65290ecac80244..d12c49af17d8c0 100644
--- a/app/assets/javascripts/diffs/streaming.js
+++ b/app/assets/javascripts/diffs/streaming.js
@@ -1,6 +1,6 @@
 export const renderStreamingDiffsApp = async (config) => {
   const configQuery = new URLSearchParams(config);
-  const { body } = await fetch(`http://gdk.test:8080/?${configQuery}`, {
+  const { body } = await fetch(`http://${window.location.hostname}:8080/?${configQuery}`, {
     credentials: 'include',
   });
   const reader = body.getReader();
diff --git a/app/assets/javascripts/lazy_loader.js b/app/assets/javascripts/lazy_loader.js
index 2b4dd205cf1c96..3bd3074463fd8f 100644
--- a/app/assets/javascripts/lazy_loader.js
+++ b/app/assets/javascripts/lazy_loader.js
@@ -23,23 +23,23 @@ export default class LazyLoader {
   }
 
   searchLazyImages() {
-    window.requestIdleCallback(
-      () => {
-        const lazyImages = [].slice.call(document.querySelectorAll('.lazy'));
-
-        if (LazyLoader.supportsNativeLazyLoading()) {
-          lazyImages.forEach((img) => LazyLoader.loadImage(img));
-        } else if (LazyLoader.supportsIntersectionObserver()) {
-          if (this.intersectionObserver) {
-            lazyImages.forEach((img) => this.intersectionObserver.observe(img));
-          }
-        } else if (lazyImages.length) {
-          this.lazyImages = lazyImages;
-          this.checkElementsInView();
-        }
-      },
-      { timeout: 500 },
-    );
+    // window.requestIdleCallback(
+    //   () => {
+    //     const lazyImages = [].slice.call(document.querySelectorAll('.lazy'));
+    //
+    //     if (LazyLoader.supportsNativeLazyLoading()) {
+    //       lazyImages.forEach((img) => LazyLoader.loadImage(img));
+    //     } else if (LazyLoader.supportsIntersectionObserver()) {
+    //       if (this.intersectionObserver) {
+    //         lazyImages.forEach((img) => this.intersectionObserver.observe(img));
+    //       }
+    //     } else if (lazyImages.length) {
+    //       this.lazyImages = lazyImages;
+    //       this.checkElementsInView();
+    //     }
+    //   },
+    //   { timeout: 500 },
+    // );
   }
 
   startContentObserver() {
diff --git a/app/assets/javascripts/mr_notes/diff_file_loaded_web_component.js b/app/assets/javascripts/mr_notes/diff_file_loaded_web_component.js
new file mode 100644
index 00000000000000..21c43700514845
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/diff_file_loaded_web_component.js
@@ -0,0 +1,11 @@
+export default class DiffFileFetched extends HTMLElement {
+  static get observedAttributes() {
+    return ['path'];
+  }
+
+  connectedCallback() {
+    const path = this.getAttribute('path');
+    const button = document.querySelector(`.file-row[href="#path-${path}"]`);
+    button.removeAttribute('disabled');
+  }
+}
diff --git a/app/assets/javascripts/mr_notes/index.js b/app/assets/javascripts/mr_notes/index.js
index 1aca21658c96e3..a65bc79be00c65 100644
--- a/app/assets/javascripts/mr_notes/index.js
+++ b/app/assets/javascripts/mr_notes/index.js
@@ -3,6 +3,7 @@ import store from '~/mr_notes/stores';
 import initCherryPickCommitModal from '~/projects/commit/init_cherry_pick_commit_modal';
 import initRevertCommitModal from '~/projects/commit/init_revert_commit_modal';
 import initDiffsApp from '../diffs';
+import DiffFileFetched from './diff_file_loaded_web_component.js';
 import { renderStreamingDiffsApp } from '../diffs/streaming.js';
 import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
 import MergeRequest from '../merge_request';
@@ -11,6 +12,8 @@ import initDiscussionFilters from '../notes/discussion_filters';
 import initSortDiscussions from '../notes/sort_discussions';
 import initNotesApp from './init_notes';
 
+customElements.define('diff-file-fetched', DiffFileFetched);
+
 export default async function initMrNotes() {
   resetServiceWorkersPublicPath();
 
@@ -20,7 +23,10 @@ export default async function initMrNotes() {
     action: mrShowNode.dataset.mrAction,
   });
 
-  await renderStreamingDiffsApp(document.querySelector('#js-diffs-app').dataset);
+  const $diffsApp = document.querySelector('#js-diffs-app');
+  $diffsApp.removeAttribute('class');
+  await renderStreamingDiffsApp($diffsApp.dataset);
+
   // initDiffsApp(store);
   initNotesApp();
 
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index 2227047a909d2f..610908adef8e78 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -127,13 +127,15 @@ export default {
 
 <template>
   <file-header v-if="file.isHeader" :path="file.path" />
-  <div
+  <a
     v-else
     :class="fileClass"
     :title="textForTitle"
     :data-level="level"
     class="file-row"
     role="button"
+    :href="`#path-${file.path}`"
+    disabled
     @click="clickFile"
     @mouseleave="$emit('mouseleave', $event)"
   >
@@ -167,7 +169,7 @@ export default {
       </span>
       <slot></slot>
     </div>
-  </div>
+  </a>
 </template>
 
 <style>
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index b078398a24eb57..368b725adddd4c 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -695,6 +695,11 @@ table.code {
   }
 }
 
+.file-content {
+  content-visibility: auto;
+  contain-intrinsic-size: 1px 108px;
+}
+
 .file-content .diff-file {
   margin: 0;
   border: 0;
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 1ee154f9aebc66..6a9f8349c3755f 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -65,6 +65,14 @@ $tabs-holder-z-index: 250;
   }
 }
 
+.file-row {
+  transition: opacity .3s;
+}
+
+.file-row[disabled] {
+  opacity: 0.5;
+}
+
 .tree-list-scroll {
   max-height: 100%;
   padding-bottom: $grid-size;
-- 
GitLab