Add latest changes from gitlab-org/gitlab@master

55 files changed, 348 insertions, 145 deletions

diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js
index 071ae8ca8cf..5e3932db235 100644
--- a/app/assets/javascripts/api.js
+++ b/app/assets/javascripts/api.js
@@ -142,6 +142,12 @@ const Api = {
     return axios.get(url);
   },
 
+  // Update a single project
+  updateProject(projectPath, data) {
+    const url = Api.buildUrl(Api.projectPath).replace(':id', encodeURIComponent(projectPath));
+    return axios.put(url, data);
+  },
+
   /**
    * Get all projects for a forked relationship to a specified project
    * @param {string} projectPath - Path or ID of a project
diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue
index 5d7be0c705a..eeb0fbec1ed 100644
--- a/app/assets/javascripts/boards/components/boards_selector.vue
+++ b/app/assets/javascripts/boards/components/boards_selector.vue
@@ -9,7 +9,6 @@ import {
   GlDropdownItem,
 } from '@gitlab/ui';
 
-import Icon from '~/vue_shared/components/icon.vue';
 import httpStatusCodes from '~/lib/utils/http_status';
 import boardsStore from '../stores/boards_store';
 import BoardForm from './board_form.vue';
@@ -19,7 +18,6 @@ const MIN_BOARDS_TO_VIEW_RECENT = 10;
 export default {
   name: 'BoardsSelector',
   components: {
-    Icon,
     BoardForm,
     GlLoadingIcon,
     GlSearchBoxByType,
diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index c6c8dc6352c..ab1e5f92698 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -2,7 +2,6 @@
 /* eslint-disable vue/require-default-prop */
 /* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { GlLink, GlModalDirective } from '@gitlab/ui';
-import TimeagoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
 import { s__, __, sprintf } from '~/locale';
 import eventHub from '../event_hub';
 import identicon from '../../vue_shared/components/identicon.vue';
@@ -16,7 +15,6 @@ export default {
   components: {
     loadingButton,
     identicon,
-    TimeagoTooltip,
     GlLink,
     UninstallApplicationButton,
     UninstallApplicationConfirmationModal,
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index a0ab20a97aa..99844a356c8 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -19,7 +19,6 @@ import applicationRow from './application_row.vue';
 import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
 import KnativeDomainEditor from './knative_domain_editor.vue';
 import { CLUSTER_TYPE, PROVIDER_TYPE, APPLICATION_STATUS, INGRESS } from '../constants';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import eventHub from '~/clusters/event_hub';
 import CrossplaneProviderStack from './crossplane_provider_stack.vue';
 
@@ -27,7 +26,6 @@ export default {
   components: {
     applicationRow,
     clipboardButton,
-    LoadingButton,
     GlLoadingIcon,
     KnativeDomainEditor,
     CrossplaneProviderStack,
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 8ea443814e9..c07850b1a4f 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -2,7 +2,6 @@
 import { mapState, mapGetters, mapActions } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
 import Mousetrap from 'mousetrap';
-import Icon from '~/vue_shared/components/icon.vue';
 import { __ } from '~/locale';
 import createFlash from '~/flash';
 import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
@@ -27,7 +26,6 @@ import {
 export default {
   name: 'DiffsApp',
   components: {
-    Icon,
     CompareVersions,
     DiffFile,
     NoChanges,
@@ -95,7 +93,6 @@ export default {
       parseInt(localStorage.getItem(TREE_LIST_WIDTH_STORAGE_KEY), 10) || INITIAL_TREE_WIDTH;
 
     return {
-      assignedDiscussions: false,
       treeWidth,
     };
   },
@@ -114,6 +111,7 @@ export default {
       numVisibleFiles: state => state.diffs.size,
       plainDiffPath: state => state.diffs.plainDiffPath,
       emailPatchPath: state => state.diffs.emailPatchPath,
+      retrievingBatches: state => state.diffs.retrievingBatches,
     }),
     ...mapState('diffs', ['showTreeList', 'isLoading', 'startVersion']),
     ...mapGetters('diffs', ['isParallelView', 'currentDiffIndex']),
@@ -144,9 +142,6 @@ export default {
     isLimitedContainer() {
       return !this.showTreeList && !this.isParallelView && !this.isFluidLayout;
     },
-    shouldSetDiscussions() {
-      return this.isNotesFetched && !this.assignedDiscussions && !this.isLoading;
-    },
   },
   watch: {
     diffViewType() {
@@ -163,10 +158,8 @@ export default {
     },
     isLoading: 'adjustView',
     showTreeList: 'adjustView',
-    shouldSetDiscussions(newVal) {
-      if (newVal) {
-        this.setDiscussions();
-      }
+    retrievingBatches(newVal) {
+      if (!newVal) this.unwatchDiscussions();
     },
   },
   mounted() {
@@ -192,10 +185,14 @@ export default {
   },
   created() {
     this.adjustView();
-    eventHub.$once('fetchedNotesData', this.setDiscussions);
     eventHub.$once('fetchDiffData', this.fetchData);
     eventHub.$on('refetchDiffData', this.refetchDiffData);
     this.CENTERED_LIMITED_CONTAINER_CLASSES = CENTERED_LIMITED_CONTAINER_CLASSES;
+
+    this.unwatchDiscussions = this.$watch(
+      () => `${this.diffFiles.length}:${this.$store.state.notes.discussions.length}`,
+      () => this.setDiscussions(),
+    );
   },
   beforeDestroy() {
     eventHub.$off('fetchDiffData', this.fetchData);
@@ -217,7 +214,6 @@ export default {
       'toggleShowTreeList',
     ]),
     refetchDiffData() {
-      this.assignedDiscussions = false;
       this.fetchData(false);
     },
     startDiffRendering() {
@@ -269,17 +265,13 @@ export default {
       }
     },
     setDiscussions() {
-      if (this.shouldSetDiscussions) {
-        this.assignedDiscussions = true;
-
-        requestIdleCallback(
-          () =>
-            this.assignDiscussionsToDiff()
-              .then(this.$nextTick)
-              .then(this.startTaskList),
-          { timeout: 1000 },
-        );
-      }
+      requestIdleCallback(
+        () =>
+          this.assignDiscussionsToDiff()
+            .then(this.$nextTick)
+            .then(this.startTaskList),
+        { timeout: 1000 },
+      );
     },
     adjustView() {
       if (this.shouldShow) {
diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index 43a7703f611..cfffccd54eb 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -2,7 +2,6 @@
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import CIIcon from '~/vue_shared/components/ci_icon.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import initUserPopovers from '../../user_popovers';
@@ -25,7 +24,6 @@ export default {
     UserAvatarLink,
     Icon,
     ClipboardButton,
-    CIIcon,
     TimeAgoTooltip,
     CommitPipelineStatus,
   },
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 91d374eafc0..5d27c6eb865 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -1,7 +1,7 @@
 <script>
 import _ from 'underscore';
 import { mapActions, mapGetters } from 'vuex';
-import { GlButton, GlTooltipDirective, GlTooltip, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
 import { polyfillSticky } from '~/lib/utils/sticky';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -15,7 +15,6 @@ import { scrollToElement } from '~/lib/utils/common_utils';
 
 export default {
   components: {
-    GlTooltip,
     GlLoadingIcon,
     GlButton,
     ClipboardButton,
diff --git a/app/assets/javascripts/diffs/components/inline_diff_expansion_row.vue b/app/assets/javascripts/diffs/components/inline_diff_expansion_row.vue
index 6e732727f42..071a988d789 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_expansion_row.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_expansion_row.vue
@@ -1,11 +1,9 @@
 <script>
-import Icon from '~/vue_shared/components/icon.vue';
 import DiffExpansionCell from './diff_expansion_cell.vue';
 import { MATCH_LINE_TYPE } from '../constants';
 
 export default {
   components: {
-    Icon,
     DiffExpansionCell,
   },
   props: {
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 992b45c97ac..6f2467ddf71 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -91,6 +91,7 @@ export const fetchDiffFiles = ({ state, commit }) => {
 
 export const fetchDiffFilesBatch = ({ commit, state }) => {
   commit(types.SET_BATCH_LOADING, true);
+  commit(types.SET_RETRIEVING_BATCHES, true);
 
   const getBatch = page =>
     axios
@@ -100,9 +101,11 @@ export const fetchDiffFilesBatch = ({ commit, state }) => {
       .then(({ data: { pagination, diff_files } }) => {
         commit(types.SET_DIFF_DATA_BATCH, { diff_files });
         commit(types.SET_BATCH_LOADING, false);
+        if (!pagination.next_page) commit(types.SET_RETRIEVING_BATCHES, false);
         return pagination.next_page;
       })
-      .then(nextPage => nextPage && getBatch(nextPage));
+      .then(nextPage => nextPage && getBatch(nextPage))
+      .catch(() => commit(types.SET_RETRIEVING_BATCHES, false));
 
   return getBatch()
     .then(handleLocationHash)
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index 7366c50752c..011cd24500a 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -9,6 +9,7 @@ const defaultViewType = INLINE_DIFF_VIEW_TYPE;
 export default () => ({
   isLoading: true,
   isBatchLoading: false,
+  retrievingBatches: false,
   addedLines: null,
   removedLines: null,
   endpoint: '',
diff --git a/app/assets/javascripts/diffs/store/mutation_types.js b/app/assets/javascripts/diffs/store/mutation_types.js
index 5a90d78b2bc..2097c8d3655 100644
--- a/app/assets/javascripts/diffs/store/mutation_types.js
+++ b/app/assets/javascripts/diffs/store/mutation_types.js
@@ -1,6 +1,7 @@
 export const SET_BASE_CONFIG = 'SET_BASE_CONFIG';
 export const SET_LOADING = 'SET_LOADING';
 export const SET_BATCH_LOADING = 'SET_BATCH_LOADING';
+export const SET_RETRIEVING_BATCHES = 'SET_RETRIEVING_BATCHES';
 export const SET_DIFF_DATA = 'SET_DIFF_DATA';
 export const SET_DIFF_DATA_BATCH = 'SET_DIFF_DATA_BATCH';
 export const SET_DIFF_VIEW_TYPE = 'SET_DIFF_VIEW_TYPE';
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index 859f43b3b6d..a4986e26966 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -40,6 +40,10 @@ export default {
     Object.assign(state, { isBatchLoading });
   },
 
+  [types.SET_RETRIEVING_BATCHES](state, retrievingBatches) {
+    Object.assign(state, { retrievingBatches });
+  },
+
   [types.SET_DIFF_DATA](state, data) {
     if (
       !(
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index bafbc00597e..6279bbc83ee 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -8,7 +8,6 @@
 import { GlTooltipDirective, GlLoadingIcon, GlModalDirective, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
-import ConfirmRollbackModal from './confirm_rollback_modal.vue';
 import eventHub from '../event_hub';
 
 export default {
@@ -16,7 +15,6 @@ export default {
     Icon,
     GlLoadingIcon,
     GlButton,
-    ConfirmRollbackModal,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
diff --git a/app/assets/javascripts/environments/components/stop_environment_modal.vue b/app/assets/javascripts/environments/components/stop_environment_modal.vue
index 1ea4e30a7c1..43ebd7b2824 100644
--- a/app/assets/javascripts/environments/components/stop_environment_modal.vue
+++ b/app/assets/javascripts/environments/components/stop_environment_modal.vue
@@ -3,7 +3,6 @@
 import { GlTooltipDirective } from '@gitlab/ui';
 import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import { s__, sprintf } from '~/locale';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import eventHub from '../event_hub';
 
 export default {
@@ -12,7 +11,6 @@ export default {
 
   components: {
     GlModal: DeprecatedModal2,
-    LoadingButton,
   },
 
   directives: {
diff --git a/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue b/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue
index 82df02afafd..11fd06fb40b 100644
--- a/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue
+++ b/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue
@@ -1,14 +1,11 @@
 <script>
-import { GlDropdown, GlDropdownHeader, GlDropdownItem } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { getDisplayName } from '../utils';
 
 export default {
   components: {
     GlDropdown,
-    GlDropdownHeader,
     GlDropdownItem,
-    Icon,
   },
   props: {
     dropdownLabel: {
diff --git a/app/assets/javascripts/grafana_integration/components/grafana_integration.vue b/app/assets/javascripts/grafana_integration/components/grafana_integration.vue
index 6258ee7f153..41d83e45c52 100644
--- a/app/assets/javascripts/grafana_integration/components/grafana_integration.vue
+++ b/app/assets/javascripts/grafana_integration/components/grafana_integration.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlFormGroup, GlFormInput, GlFormCheckbox, GlLink } from '@gitlab/ui';
+import { GlButton, GlFormGroup, GlFormInput, GlFormCheckbox } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 
@@ -9,7 +9,6 @@ export default {
     GlFormCheckbox,
     GlFormGroup,
     GlFormInput,
-    GlLink,
     Icon,
   },
   data() {
diff --git a/app/assets/javascripts/groups/components/item_stats.vue b/app/assets/javascripts/groups/components/item_stats.vue
index 675552e6c2b..53da3f7b2ee 100644
--- a/app/assets/javascripts/groups/components/item_stats.vue
+++ b/app/assets/javascripts/groups/components/item_stats.vue
@@ -1,5 +1,4 @@
 <script>
-import icon from '~/vue_shared/components/icon.vue';
 import { GlBadge } from '@gitlab/ui';
 import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import {
@@ -13,7 +12,6 @@ import isProjectPendingRemoval from 'ee_else_ce/groups/mixins/is_project_pending
 
 export default {
   components: {
-    icon,
     timeAgoTooltip,
     itemStatsValue,
     GlBadge,
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 230dfaf047b..46a96301e88 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -3,16 +3,12 @@ import { mapActions } from 'vuex';
 import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
-import StageButton from './stage_button.vue';
-import UnstageButton from './unstage_button.vue';
 import { viewerTypes } from '../../constants';
 import { getCommitIconMap } from '../../utils';
 
 export default {
   components: {
     Icon,
-    StageButton,
-    UnstageButton,
     FileIcon,
   },
   directives: {
diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue
index f93496132a4..598f3a1dac6 100644
--- a/app/assets/javascripts/ide/components/ide_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_tree.vue
@@ -1,13 +1,11 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import Icon from '~/vue_shared/components/icon.vue';
 import IdeTreeList from './ide_tree_list.vue';
 import Upload from './new_dropdown/upload.vue';
 import NewEntryButton from './new_dropdown/button.vue';
 
 export default {
   components: {
-    Icon,
     Upload,
     IdeTreeList,
     NewEntryButton,
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index 3a0dd60f0e0..bacdfc7c05e 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -1,14 +1,12 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlSkeletonLoading } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
 import FileRow from '~/vue_shared/components/file_row.vue';
 import NavDropdown from './nav_dropdown.vue';
 import FileRowExtra from './file_row_extra.vue';
 
 export default {
   components: {
-    Icon,
     GlSkeletonLoading,
     NavDropdown,
     FileRow,
diff --git a/app/assets/javascripts/ide/components/nav_dropdown.vue b/app/assets/javascripts/ide/components/nav_dropdown.vue
index e45d2a62dae..2e290de0943 100644
--- a/app/assets/javascripts/ide/components/nav_dropdown.vue
+++ b/app/assets/javascripts/ide/components/nav_dropdown.vue
@@ -1,12 +1,10 @@
 <script>
 import $ from 'jquery';
-import Icon from '~/vue_shared/components/icon.vue';
 import NavForm from './nav_form.vue';
 import NavDropdownButton from './nav_dropdown_button.vue';
 
 export default {
   components: {
-    Icon,
     NavDropdownButton,
     NavForm,
   },
diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
index 188518dd419..e52613086a4 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
@@ -1,10 +1,8 @@
 <script>
-import Icon from '~/vue_shared/components/icon.vue';
 import ItemButton from './button.vue';
 
 export default {
   components: {
-    Icon,
     ItemButton,
   },
   props: {
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index 5201c33b1b4..35d52bf7528 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -1,7 +1,6 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import tooltip from '~/vue_shared/directives/tooltip';
-import Icon from '~/vue_shared/components/icon.vue';
 import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import CommitFilesList from './commit_sidebar/list.vue';
 import EmptyState from './commit_sidebar/empty_state.vue';
@@ -11,7 +10,6 @@ import { activityBarViews, stageKeys } from '../constants';
 export default {
   components: {
     DeprecatedModal,
-    Icon,
     CommitFilesList,
     EmptyState,
   },
diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue
index 4dbc4383894..1b7f149097b 100644
--- a/app/assets/javascripts/ide/components/repo_tabs.vue
+++ b/app/assets/javascripts/ide/components/repo_tabs.vue
@@ -1,13 +1,11 @@
 <script>
 import { mapActions } from 'vuex';
 import RepoTab from './repo_tab.vue';
-import EditorMode from './editor_mode_dropdown.vue';
 import router from '../ide_router';
 
 export default {
   components: {
     RepoTab,
-    EditorMode,
   },
   props: {
     activeFile: {
diff --git a/app/assets/javascripts/import_projects/components/provider_repo_table_row.vue b/app/assets/javascripts/import_projects/components/provider_repo_table_row.vue
index 3c6c9c71b8c..6e227ab3d82 100644
--- a/app/assets/javascripts/import_projects/components/provider_repo_table_row.vue
+++ b/app/assets/javascripts/import_projects/components/provider_repo_table_row.vue
@@ -2,7 +2,6 @@
 import { mapState, mapGetters, mapActions } from 'vuex';
 import Select2Select from '~/vue_shared/components/select2_select.vue';
 import { __ } from '~/locale';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import eventHub from '../event_hub';
 import { STATUSES } from '../constants';
 import ImportStatus from './import_status.vue';
@@ -11,7 +10,6 @@ export default {
   name: 'ProviderRepoTableRow',
   components: {
     Select2Select,
-    LoadingButton,
     ImportStatus,
   },
   props: {
diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index 6e92b599b0a..09f9647a680 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -2,12 +2,10 @@
 import _ from 'underscore';
 import { GlLink } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     CiIcon,
-    Icon,
     GlLink,
   },
   props: {
diff --git a/app/assets/javascripts/monitoring/components/charts/anomaly.vue b/app/assets/javascripts/monitoring/components/charts/anomaly.vue
index 1df7ca37a98..64704701d1a 100644
--- a/app/assets/javascripts/monitoring/components/charts/anomaly.vue
+++ b/app/assets/javascripts/monitoring/components/charts/anomaly.vue
@@ -1,6 +1,6 @@
 <script>
 import { flatten, isNumber } from 'underscore';
-import { GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
+import { GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import { roundOffFloat } from '~/lib/utils/common_utils';
 import { hexToRgb } from '~/lib/utils/color_utils';
 import { areaOpacityValues, symbolSizes, colorValues } from '../../constants';
@@ -48,7 +48,6 @@ const AREA_COLOR_RGBA = `rgba(${hexToRgb(AREA_COLOR).join(',')},${AREA_OPACITY})
  */
 export default {
   components: {
-    GlLineChart,
     GlChartSeriesLabel,
     MonitorTimeSeriesChart,
   },
diff --git a/app/assets/javascripts/monitoring/components/embed.vue b/app/assets/javascripts/monitoring/components/embed.vue
index eb8945c1a57..2f562071764 100644
--- a/app/assets/javascripts/monitoring/components/embed.vue
+++ b/app/assets/javascripts/monitoring/components/embed.vue
@@ -2,7 +2,6 @@
 import { mapActions, mapState, mapGetters } from 'vuex';
 import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
 import { getParameterValues, removeParams } from '~/lib/utils/url_utility';
-import GraphGroup from './graph_group.vue';
 import { sidebarAnimationDuration } from '../constants';
 import { getTimeDiff } from '../utils';
 
@@ -10,7 +9,6 @@ let sidebarMutationObserver;
 
 export default {
   components: {
-    GraphGroup,
     PanelType,
   },
   props: {
diff --git a/app/assets/javascripts/mr_popover/components/mr_popover.vue b/app/assets/javascripts/mr_popover/components/mr_popover.vue
index ce08b0964a1..bbc2feae812 100644
--- a/app/assets/javascripts/mr_popover/components/mr_popover.vue
+++ b/app/assets/javascripts/mr_popover/components/mr_popover.vue
@@ -1,7 +1,6 @@
 <script>
 /* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { GlPopover, GlSkeletonLoading } from '@gitlab/ui';
-import Icon from '../../vue_shared/components/icon.vue';
 import CiIcon from '../../vue_shared/components/ci_icon.vue';
 import timeagoMixin from '../../vue_shared/mixins/timeago';
 import query from '../queries/merge_request.query.graphql';
@@ -13,7 +12,6 @@ export default {
   components: {
     GlPopover,
     GlSkeletonLoading,
-    Icon,
     CiIcon,
   },
   mixins: [timeagoMixin],
diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue
index c6990683ec7..5e4147f8805 100644
--- a/app/assets/javascripts/pipelines/components/nav_controls.vue
+++ b/app/assets/javascripts/pipelines/components/nav_controls.vue
@@ -1,12 +1,11 @@
 <script>
-import { GlLink, GlButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import LoadingButton from '../../vue_shared/components/loading_button.vue';
 
 export default {
   name: 'PipelineNavControls',
   components: {
     LoadingButton,
-    GlLink,
     GlButton,
   },
   props: {
diff --git a/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue b/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue
index 7c4e651373f..6ca96bbba5e 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue
@@ -2,7 +2,6 @@
 import _ from 'underscore';
 import { GlLink } from '@gitlab/ui';
 import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { s__, sprintf } from '~/locale';
 
@@ -15,7 +14,6 @@ export default {
   components: {
     GlModal: DeprecatedModal2,
     GlLink,
-    ClipboardButton,
     CiIcon,
   },
   props: {
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 30c830d78f9..743c3ea271d 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -2,7 +2,6 @@
 import { GlLink, GlTooltipDirective } from '@gitlab/ui';
 import _ from 'underscore';
 import { __, sprintf } from '~/locale';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import popover from '~/vue_shared/directives/popover';
 
 const popoverTitle = sprintf(
@@ -17,7 +16,6 @@ const popoverTitle = sprintf(
 
 export default {
   components: {
-    UserAvatarLink,
     GlLink,
   },
   directives: {
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue b/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
index 1bac7ce9ac5..2fa3fa41eed 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlLink, GlProgressBar } from '@gitlab/ui';
+import { GlButton, GlProgressBar } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { formatTime, secondsToMilliseconds } from '~/lib/utils/datetime_utility';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -8,7 +8,6 @@ export default {
   name: 'TestSummary',
   components: {
     GlButton,
-    GlLink,
     GlProgressBar,
     Icon,
   },
diff --git a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
index b2c700b817c..c770fd70260 100644
--- a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
+++ b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
@@ -1,26 +1,23 @@
 <script>
-import { mapState } from 'vuex';
-import { s__, sprintf } from '~/locale';
+import { mapState, mapActions } from 'vuex';
+import { GlLoadingIcon } from '@gitlab/ui';
+import SettingsForm from './settings_form.vue';
 
 export default {
-  components: {},
+  components: {
+    GlLoadingIcon,
+    SettingsForm,
+  },
   computed: {
     ...mapState({
-      helpPagePath: 'helpPagePath',
+      isLoading: 'isLoading',
     }),
-
-    helpText() {
-      return sprintf(
-        s__(
-          'PackageRegistry|Read more about the %{helpLinkStart}Container Registry tag retention policies%{helpLinkEnd}',
-        ),
-        {
-          helpLinkStart: `<a href="${this.helpPagePath}" target="_blank">`,
-          helpLinkEnd: '</a>',
-        },
-        false,
-      );
-    },
+  },
+  mounted() {
+    this.fetchSettings();
+  },
+  methods: {
+    ...mapActions(['fetchSettings']),
   },
 };
 </script>
@@ -28,16 +25,19 @@ export default {
 <template>
   <div>
     <p>
-      {{ s__('PackageRegistry|Tag retention policies are designed to:') }}
+      {{ s__('ContainerRegistry|Tag expiration policy is designed to:') }}
     </p>
     <ul>
-      <li>{{ s__('PackageRegistry|Keep and protect the images that matter most.') }}</li>
+      <li>{{ s__('ContainerRegistry|Keep and protect the images that matter most.') }}</li>
       <li>
         {{
-          s__("PackageRegistry|Automatically remove extra images that aren't designed to be kept.")
+          s__(
+            "ContainerRegistry|Automatically remove extra images that aren't designed to be kept.",
+          )
         }}
       </li>
     </ul>
-    <p ref="help-link" v-html="helpText"></p>
+    <gl-loading-icon v-if="isLoading" ref="loading-icon" />
+    <settings-form v-else ref="settings-form" />
   </div>
 </template>
diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue
new file mode 100644
index 00000000000..402763e2e21
--- /dev/null
+++ b/app/assets/javascripts/registry/settings/components/settings_form.vue
@@ -0,0 +1,158 @@
+<script>
+import { mapActions } from 'vuex';
+import { GlFormGroup, GlToggle, GlFormSelect, GlFormTextarea, GlButton } from '@gitlab/ui';
+import { s__, __, sprintf } from '~/locale';
+import { NAME_REGEX_LENGTH } from '../constants';
+import { mapComputed } from '~/vuex_shared/bindings';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlToggle,
+    GlFormSelect,
+    GlFormTextarea,
+    GlButton,
+  },
+  labelsConfig: {
+    cols: 3,
+    align: 'right',
+  },
+  computed: {
+    ...mapComputed('settings', 'updateSettings', [
+      'enabled',
+      'cadence',
+      'older_than',
+      'keep_n',
+      'name_regex',
+    ]),
+    policyEnabledText() {
+      return this.enabled ? __('enabled') : __('disabled');
+    },
+    toggleDescriptionText() {
+      return sprintf(
+        s__('ContainerRegistry|Docker tag expiration policy is %{toggleStatus}'),
+        {
+          toggleStatus: `<strong>${this.policyEnabledText}</strong>`,
+        },
+        false,
+      );
+    },
+    regexHelpText() {
+      return sprintf(
+        s__(
+          'ContainerRegistry|Wildcards such as %{codeStart}*-stable%{codeEnd} or %{codeStart}production/*%{codeEnd} are supported',
+        ),
+        {
+          codeStart: '<code>',
+          codeEnd: '</code>',
+        },
+        false,
+      );
+    },
+    nameRegexPlaceholder() {
+      return '.*';
+    },
+    nameRegexState() {
+      return this.name_regex ? this.name_regex.length <= NAME_REGEX_LENGTH : null;
+    },
+    formIsValid() {
+      return this.nameRegexState === false;
+    },
+  },
+  methods: {
+    ...mapActions(['resetSettings', 'saveSettings']),
+  },
+};
+</script>
+
+<template>
+  <div class="card">
+    <form ref="form-element" @submit.prevent="saveSettings" @reset.prevent="resetSettings">
+      <div class="card-header">
+        {{ s__('ContainerRegistry|Tag expiration policy') }}
+      </div>
+      <div class="card-body">
+        <gl-form-group
+          id="expiration-policy-toggle-group"
+          :label-cols="$options.labelsConfig.cols"
+          :label-align="$options.labelsConfig.align"
+          label-for="expiration-policy-toggle"
+          :label="s__('ContainerRegistry|Expiration policy:')"
+        >
+          <div class="d-flex align-items-start">
+            <gl-toggle id="expiration-policy-toggle" v-model="enabled" />
+            <span class="mb-2 ml-1 lh-2" v-html="toggleDescriptionText"></span>
+          </div>
+        </gl-form-group>
+
+        <gl-form-group
+          id="expiration-policy-interval-group"
+          :label-cols="$options.labelsConfig.cols"
+          :label-align="$options.labelsConfig.align"
+          label-for="expiration-policy-interval"
+          :label="s__('ContainerRegistry|Expiration interval:')"
+        >
+          <gl-form-select id="expiration-policy-interval" v-model="older_than">
+            <option value="1">{{ __('Option 1') }}</option>
+            <option value="2">{{ __('Option 2') }}</option>
+          </gl-form-select>
+        </gl-form-group>
+
+        <gl-form-group
+          id="expiration-policy-schedule-group"
+          :label-cols="$options.labelsConfig.cols"
+          :label-align="$options.labelsConfig.align"
+          label-for="expiration-policy-schedule"
+          :label="s__('ContainerRegistry|Expiration schedule:')"
+        >
+          <gl-form-select id="expiration-policy-schedule" v-model="cadence">
+            <option value="1">{{ __('Option 1') }}</option>
+            <option value="2">{{ __('Option 2') }}</option>
+          </gl-form-select>
+        </gl-form-group>
+
+        <gl-form-group
+          id="expiration-policy-latest-group"
+          :label-cols="$options.labelsConfig.cols"
+          :label-align="$options.labelsConfig.align"
+          label-for="expiration-policy-latest"
+          :label="s__('ContainerRegistry|Expiration latest:')"
+        >
+          <gl-form-select id="expiration-policy-latest" v-model="keep_n">
+            <option value="1">{{ __('Option 1') }}</option>
+            <option value="2">{{ __('Option 2') }}</option>
+          </gl-form-select>
+        </gl-form-group>
+
+        <gl-form-group
+          id="expiration-policy-name-matching-group"
+          :label-cols="$options.labelsConfig.cols"
+          :label-align="$options.labelsConfig.align"
+          label-for="expiration-policy-name-matching"
+          :label="s__('ContainerRegistry|Expire Docker tags with name matching:')"
+          :state="nameRegexState"
+          :invalid-feedback="
+            s__('ContainerRegistry|The value of this input should be less than 255 characters')
+          "
+        >
+          <gl-form-textarea
+            id="expiration-policy-name-matching"
+            v-model="name_regex"
+            :placeholder="nameRegexPlaceholder"
+            :state="nameRegexState"
+            trim
+          />
+          <template #description>
+            <span ref="regex-description" v-html="regexHelpText"></span>
+          </template>
+        </gl-form-group>
+      </div>
+      <div class="card-footer text-right">
+        <gl-button ref="cancel-button" type="reset">{{ __('Cancel') }}</gl-button>
+        <gl-button ref="save-button" type="submit" :disabled="formIsValid" variant="success">
+          {{ __('Save Expiration Policy') }}
+        </gl-button>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/assets/javascripts/registry/settings/constants.js b/app/assets/javascripts/registry/settings/constants.js
new file mode 100644
index 00000000000..c0dac466b29
--- /dev/null
+++ b/app/assets/javascripts/registry/settings/constants.js
@@ -0,0 +1,15 @@
+import { s__ } from '~/locale';
+
+export const FETCH_SETTINGS_ERROR_MESSAGE = s__(
+  'ContainerRegistry|Something went wrong while fetching the expiration policy.',
+);
+
+export const UPDATE_SETTINGS_ERROR_MESSAGE = s__(
+  'ContainerRegistry|Something went wrong while updating the expiration policy.',
+);
+
+export const UPDATE_SETTINGS_SUCCESS_MESSAGE = s__(
+  'ContainerRegistry|Expiration policy successfully saved.',
+);
+
+export const NAME_REGEX_LENGTH = 255;
diff --git a/app/assets/javascripts/registry/settings/registry_settings_bundle.js b/app/assets/javascripts/registry/settings/registry_settings_bundle.js
index 2938178ea86..927b6059884 100644
--- a/app/assets/javascripts/registry/settings/registry_settings_bundle.js
+++ b/app/assets/javascripts/registry/settings/registry_settings_bundle.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
-import store from './stores/';
+import store from './store/';
 import RegistrySettingsApp from './components/registry_settings_app.vue';
 
 Vue.use(Translate);
diff --git a/app/assets/javascripts/registry/settings/store/actions.js b/app/assets/javascripts/registry/settings/store/actions.js
new file mode 100644
index 00000000000..b161373dd0a
--- /dev/null
+++ b/app/assets/javascripts/registry/settings/store/actions.js
@@ -0,0 +1,40 @@
+import Api from '~/api';
+import createFlash from '~/flash';
+import {
+  FETCH_SETTINGS_ERROR_MESSAGE,
+  UPDATE_SETTINGS_ERROR_MESSAGE,
+  UPDATE_SETTINGS_SUCCESS_MESSAGE,
+} from '../constants';
+import * as types from './mutation_types';
+
+export const setInitialState = ({ commit }, data) => commit(types.SET_INITIAL_STATE, data);
+export const updateSettings = ({ commit }, data) => commit(types.UPDATE_SETTINGS, data);
+export const toggleLoading = ({ commit }) => commit(types.TOGGLE_LOADING);
+export const receiveSettingsSuccess = ({ commit }, data = {}) => commit(types.SET_SETTINGS, data);
+export const receiveSettingsError = () => createFlash(FETCH_SETTINGS_ERROR_MESSAGE);
+export const updateSettingsError = () => createFlash(UPDATE_SETTINGS_ERROR_MESSAGE);
+export const resetSettings = ({ commit }) => commit(types.RESET_SETTINGS);
+
+export const fetchSettings = ({ dispatch, state }) => {
+  dispatch('toggleLoading');
+  return Api.project(state.projectId)
+    .then(({ tag_expiration_policies }) =>
+      dispatch('receiveSettingsSuccess', tag_expiration_policies),
+    )
+    .catch(() => dispatch('receiveSettingsError'))
+    .finally(() => dispatch('toggleLoading'));
+};
+
+export const saveSettings = ({ dispatch, state }) => {
+  dispatch('toggleLoading');
+  return Api.updateProject(state.projectId, { tag_expiration_policies: state.settings })
+    .then(({ tag_expiration_policies }) => {
+      dispatch('receiveSettingsSuccess', tag_expiration_policies);
+      createFlash(UPDATE_SETTINGS_SUCCESS_MESSAGE);
+    })
+    .catch(() => dispatch('updateSettingsError'))
+    .finally(() => dispatch('toggleLoading'));
+};
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/registry/settings/stores/index.js b/app/assets/javascripts/registry/settings/store/index.js
index 91a35aac149..91a35aac149 100644
--- a/app/assets/javascripts/registry/settings/stores/index.js
+++ b/app/assets/javascripts/registry/settings/store/index.js
diff --git a/app/assets/javascripts/registry/settings/store/mutation_types.js b/app/assets/javascripts/registry/settings/store/mutation_types.js
new file mode 100644
index 00000000000..db499ffa761
--- /dev/null
+++ b/app/assets/javascripts/registry/settings/store/mutation_types.js
@@ -0,0 +1,5 @@
+export const SET_INITIAL_STATE = 'SET_INITIAL_STATE';
+export const UPDATE_SETTINGS = 'UPDATE_SETTINGS';
+export const TOGGLE_LOADING = 'TOGGLE_LOADING';
+export const SET_SETTINGS = 'SET_SETTINGS';
+export const RESET_SETTINGS = 'RESET_SETTINGS';
diff --git a/app/assets/javascripts/registry/settings/store/mutations.js b/app/assets/javascripts/registry/settings/store/mutations.js
new file mode 100644
index 00000000000..b8384fd4a45
--- /dev/null
+++ b/app/assets/javascripts/registry/settings/store/mutations.js
@@ -0,0 +1,20 @@
+import * as types from './mutation_types';
+
+export default {
+  [types.SET_INITIAL_STATE](state, initialState) {
+    state.projectId = initialState.projectId;
+  },
+  [types.UPDATE_SETTINGS](state, settings) {
+    state.settings = { ...state.settings, ...settings };
+  },
+  [types.SET_SETTINGS](state, settings) {
+    state.settings = settings;
+    state.original = Object.freeze(settings);
+  },
+  [types.RESET_SETTINGS](state) {
+    state.settings = { ...state.original };
+  },
+  [types.TOGGLE_LOADING](state) {
+    state.isLoading = !state.isLoading;
+  },
+};
diff --git a/app/assets/javascripts/registry/settings/store/state.js b/app/assets/javascripts/registry/settings/store/state.js
new file mode 100644
index 00000000000..c3a26083c9f
--- /dev/null
+++ b/app/assets/javascripts/registry/settings/store/state.js
@@ -0,0 +1,26 @@
+export default () => ({
+  /*
+   * Project Id used to build the API call
+   */
+  projectId: '',
+  /*
+   * Boolean to determine if the UI is loading data from the API
+   */
+  isLoading: false,
+  /*
+   * This contains the data shown and manipulated in the UI
+   * Has the following structure:
+   * {
+   *  enabled: Boolean
+   *  cadence: String,
+   *  older_than: String,
+   *  keep_n: String,
+   *  name_regex: String
+   * }
+   */
+  settings: {},
+  /*
+   * Same structure as settings, above but Frozen object and used only in case the user clicks 'cancel'
+   */
+  original: {},
+});
diff --git a/app/assets/javascripts/registry/settings/stores/actions.js b/app/assets/javascripts/registry/settings/stores/actions.js
deleted file mode 100644
index f2c469d4edb..00000000000
--- a/app/assets/javascripts/registry/settings/stores/actions.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as types from './mutation_types';
-
-export const setInitialState = ({ commit }, data) => commit(types.SET_INITIAL_STATE, data);
-
-// to avoid eslint error until more actions are added to the store
-export default () => {};
diff --git a/app/assets/javascripts/registry/settings/stores/mutation_types.js b/app/assets/javascripts/registry/settings/stores/mutation_types.js
deleted file mode 100644
index 8a0f519eabd..00000000000
--- a/app/assets/javascripts/registry/settings/stores/mutation_types.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const SET_INITIAL_STATE = 'SET_INITIAL_STATE';
-
-// to avoid eslint error until more actions are added to the store
-export default () => {};
diff --git a/app/assets/javascripts/registry/settings/stores/mutations.js b/app/assets/javascripts/registry/settings/stores/mutations.js
deleted file mode 100644
index 4f32e11ed52..00000000000
--- a/app/assets/javascripts/registry/settings/stores/mutations.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as types from './mutation_types';
-
-export default {
-  [types.SET_INITIAL_STATE](state, initialState) {
-    state.helpPagePath = initialState.helpPagePath;
-    state.registrySettingsEndpoint = initialState.registrySettingsEndpoint;
-  },
-};
diff --git a/app/assets/javascripts/registry/settings/stores/state.js b/app/assets/javascripts/registry/settings/stores/state.js
deleted file mode 100644
index 4c0439458b6..00000000000
--- a/app/assets/javascripts/registry/settings/stores/state.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default () => ({
-  /*
-   * Help page path to generate the link
-   */
-  helpPagePath: '',
-  /*
-   * Settings endpoint to call to fetch and update the settings
-   */
-  registrySettingsEndpoint: '',
-});
diff --git a/app/assets/javascripts/releases/list/components/release_block.vue b/app/assets/javascripts/releases/list/components/release_block.vue
index 4d8d8682401..d5621808ed7 100644
--- a/app/assets/javascripts/releases/list/components/release_block.vue
+++ b/app/assets/javascripts/releases/list/components/release_block.vue
@@ -1,7 +1,7 @@
 <script>
 /* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import _ from 'underscore';
-import { GlTooltipDirective, GlLink, GlBadge, GlButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlBadge } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
@@ -20,7 +20,6 @@ export default {
     EvidenceBlock,
     GlLink,
     GlBadge,
-    GlButton,
     Icon,
     UserAvatarLink,
     ReleaseBlockFooter,
diff --git a/app/assets/javascripts/reports/components/modal.vue b/app/assets/javascripts/reports/components/modal.vue
index 6019af2dfe0..40ce200befb 100644
--- a/app/assets/javascripts/reports/components/modal.vue
+++ b/app/assets/javascripts/reports/components/modal.vue
@@ -1,14 +1,12 @@
 <script>
 // import { sprintf, __ } from '~/locale';
 import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 import { fieldTypes } from '../constants';
 
 export default {
   components: {
     Modal: DeprecatedModal2,
-    LoadingButton,
     CodeBlock,
   },
   props: {
diff --git a/app/assets/javascripts/serverless/components/functions.vue b/app/assets/javascripts/serverless/components/functions.vue
index 308bc4a2ddd..cdbf57f3e55 100644
--- a/app/assets/javascripts/serverless/components/functions.vue
+++ b/app/assets/javascripts/serverless/components/functions.vue
@@ -2,7 +2,6 @@
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
-import FunctionRow from './function_row.vue';
 import EnvironmentRow from './environment_row.vue';
 import EmptyState from './empty_state.vue';
 import { CHECKING_INSTALLED } from '../constants';
@@ -10,7 +9,6 @@ import { CHECKING_INSTALLED } from '../constants';
 export default {
   components: {
     EnvironmentRow,
-    FunctionRow,
     EmptyState,
     GlLoadingIcon,
   },
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
index 36f291e995c..96603d23374 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
@@ -1,12 +1,11 @@
 <script>
-import { GlButton, GlLink, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     GlButton,
-    GlLink,
     GlLoadingIcon,
     Icon,
   },
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
index e9aac8b385c..8f38ca69453 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
@@ -2,7 +2,6 @@
 import { sprintf, s__ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 import statusIcon from '../mr_widget_status_icon.vue';
-import mrWidgetMergeHelp from '../../components/mr_widget_merge_help.vue';
 
 export default {
   name: 'MRWidgetMissingBranch',
@@ -10,7 +9,6 @@ export default {
     tooltip,
   },
   components: {
-    mrWidgetMergeHelp,
     statusIcon,
   },
   props: {
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
index 7f0fcfac071..20a14d78f9b 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
@@ -5,7 +5,6 @@ import SuggestionDiff from './suggestion_diff.vue';
 import Flash from '~/flash';
 
 export default {
-  components: { SuggestionDiff },
   props: {
     lineType: {
       type: String,
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_regular_label.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_regular_label.vue
index 282b181f11e..f519f90445e 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_regular_label.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_regular_label.vue
@@ -1,10 +1,9 @@
 <script>
-import { GlLink, GlTooltip } from '@gitlab/ui';
+import { GlTooltip } from '@gitlab/ui';
 
 export default {
   components: {
     GlTooltip,
-    GlLink,
   },
   props: {
     label: {
diff --git a/app/assets/javascripts/vuex_shared/bindings.js b/app/assets/javascripts/vuex_shared/bindings.js
new file mode 100644
index 00000000000..51035ebc8a8
--- /dev/null
+++ b/app/assets/javascripts/vuex_shared/bindings.js
@@ -0,0 +1,16 @@
+export const mapComputed = (root, updateFn, list) => {
+  const result = {};
+  list.forEach(key => {
+    result[key] = {
+      get() {
+        return this.$store.state[root][key];
+      },
+      set(value) {
+        this.$store.dispatch(updateFn, { [key]: value });
+      },
+    };
+  });
+  return result;
+};
+
+export default () => {};
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 1f4bba5fc33..d6bc4d26bff 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -22,6 +22,12 @@
   }
 }
 
+@each $index, $size in $type-scale {
+  #{'.lh-#{$index}'} {
+    line-height: $size;
+  }
+}
+
 .border-width-1px { border-width: 1px; }
 .border-style-dashed { border-style: dashed; }
 .border-style-solid { border-style: solid; }