From 8b573c94895dc0ac0e1d9d59cf3e8745e8b539ca Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Thu, 17 Dec 2020 11:59:07 +0000
Subject: Add latest changes from gitlab-org/gitlab@13-7-stable-ee

---
 .../vue_shared/components/awards_list.vue          |  39 ++--
 .../components/blob_viewers/constants.js           |   2 -
 .../javascripts/vue_shared/components/callout.vue  |  24 ---
 .../vue_shared/components/ci_badge_link.vue        |   1 +
 .../javascripts/vue_shared/components/ci_icon.vue  |   4 +-
 .../vue_shared/components/clipboard_button.vue     |   5 +-
 .../components/color_picker/color_picker.vue       | 142 ++++++++++++
 .../content_viewer/viewers/image_viewer.vue        |  18 +-
 .../content_viewer/viewers/markdown_viewer.vue     |   2 +-
 .../date_time_picker/date_time_picker.vue          |   2 +-
 .../date_time_picker/date_time_picker_lib.js       |   2 -
 .../components/diff_viewer/diff_viewer.vue         |   8 +-
 .../viewers/image_diff/onion_skin_viewer.vue       |   8 +-
 .../viewers/image_diff/swipe_viewer.vue            |   8 +-
 .../viewers/image_diff/two_up_viewer.vue           |   8 +-
 .../diff_viewer/viewers/image_diff_viewer.vue      |  16 +-
 .../components/dismissible_container.vue           |   2 +-
 .../components/dropdown/dropdown_search_input.vue  |   2 +-
 .../vue_shared/components/file_finder/index.vue    |   1 -
 .../javascripts/vue_shared/components/file_row.vue |   1 +
 .../filtered_search_bar_root.vue                   |  14 +-
 .../gfm_autocomplete/gfm_autocomplete.vue          |  97 +++++++++
 .../components/gfm_autocomplete/utils.js           | 142 ++++++++++++
 .../vue_shared/components/gl_mentions.vue          | 238 ---------------------
 .../vue_shared/components/help_popover.vue         |   8 +-
 .../vue_shared/components/lib/utils/dom_utils.js   |   2 -
 .../vue_shared/components/loading_button.vue       |  61 ------
 .../components/markdown/apply_suggestion.vue       |  59 +++++
 .../vue_shared/components/markdown/field.vue       |  10 +-
 .../access_request_action_buttons.vue              |  59 -----
 .../members/action_buttons/action_button_group.vue |  11 -
 .../approve_access_request_button.vue              |  42 ----
 .../action_buttons/group_action_buttons.vue        |  27 ---
 .../action_buttons/invite_action_buttons.vue       |  48 -----
 .../members/action_buttons/leave_button.vue        |  40 ----
 .../action_buttons/remove_group_link_button.vue    |  36 ----
 .../action_buttons/remove_member_button.vue        |  57 -----
 .../action_buttons/resend_invite_button.vue        |  41 ----
 .../members/action_buttons/user_action_buttons.vue |  70 ------
 .../components/members/avatars/group_avatar.vue    |  34 ---
 .../components/members/avatars/invite_avatar.vue   |  32 ---
 .../components/members/avatars/user_avatar.vue     |  91 --------
 .../vue_shared/components/members/constants.js     |  71 ------
 .../components/members/modals/leave_modal.vue      |  70 ------
 .../members/modals/remove_group_link_modal.vue     |  69 ------
 .../components/members/table/created_at.vue        |  40 ----
 .../members/table/expiration_datepicker.vue        |  99 ---------
 .../components/members/table/expires_at.vue        |  66 ------
 .../members/table/member_action_buttons.vue        |  57 -----
 .../components/members/table/member_avatar.vue     |  35 ---
 .../components/members/table/member_source.vue     |  27 ---
 .../components/members/table/members_table.vue     | 158 --------------
 .../members/table/members_table_cell.vue           |  65 ------
 .../components/members/table/role_dropdown.vue     |  95 --------
 .../vue_shared/components/members/utils.js         |  48 -----
 .../components/notes/noteable_warning.vue          |   2 +-
 .../javascripts/vue_shared/components/pikaday.vue  |   6 +-
 .../rich_content_editor/rich_content_editor.vue    |   2 +
 .../vue_shared/components/select2_select.vue       |  13 +-
 .../sidebar/labels_select/dropdown_header.vue      |   2 +-
 .../labels_select_vue/labels_select_root.vue       |  10 +
 .../vue_shared/components/tooltip_on_truncate.vue  |   3 +-
 62 files changed, 579 insertions(+), 1873 deletions(-)
 delete mode 100644 app/assets/javascripts/vue_shared/components/callout.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/gfm_autocomplete/utils.js
 delete mode 100644 app/assets/javascripts/vue_shared/components/gl_mentions.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/loading_button.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/action_buttons/access_request_action_buttons.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/action_buttons/action_button_group.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/action_buttons/approve_access_request_button.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/action_buttons/group_action_buttons.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/action_buttons/invite_action_buttons.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/action_buttons/leave_button.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/action_buttons/remove_group_link_button.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/action_buttons/remove_member_button.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/action_buttons/resend_invite_button.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/action_buttons/user_action_buttons.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/avatars/group_avatar.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/avatars/invite_avatar.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/avatars/user_avatar.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/constants.js
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/modals/leave_modal.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/modals/remove_group_link_modal.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/table/created_at.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/table/expiration_datepicker.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/table/expires_at.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/table/member_action_buttons.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/table/member_avatar.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/table/member_source.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/table/members_table.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/table/members_table_cell.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/table/role_dropdown.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/members/utils.js

(limited to 'app/assets/javascripts/vue_shared/components')

diff --git a/app/assets/javascripts/vue_shared/components/awards_list.vue b/app/assets/javascripts/vue_shared/components/awards_list.vue
index 7a687ea4ad0..9a6433963bc 100644
--- a/app/assets/javascripts/vue_shared/components/awards_list.vue
+++ b/app/assets/javascripts/vue_shared/components/awards_list.vue
@@ -1,7 +1,7 @@
 <script>
 /* eslint-disable vue/no-v-html */
 import { groupBy } from 'lodash';
-import { GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { glEmojiTag } from '../../emoji';
 import { __, sprintf } from '~/locale';
 
@@ -10,8 +10,8 @@ const NO_USER_ID = -1;
 
 export default {
   components: {
+    GlButton,
     GlIcon,
-    GlLoadingIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -64,7 +64,7 @@ export default {
   methods: {
     getAwardClassBindings(awardList) {
       return {
-        active: this.hasReactionByCurrentUser(awardList),
+        selected: this.hasReactionByCurrentUser(awardList),
         disabled: this.currentUserId === NO_USER_ID,
       };
     },
@@ -150,40 +150,39 @@ export default {
 
 <template>
   <div class="awards js-awards-block">
-    <button
+    <gl-button
       v-for="awardList in groupedAwards"
       :key="awardList.name"
       v-gl-tooltip.viewport
+      class="gl-mr-3"
       :class="awardList.classes"
       :title="awardList.title"
       data-testid="award-button"
-      class="btn award-control"
-      type="button"
       @click="handleAward(awardList.name)"
     >
-      <span data-testid="award-html" v-html="awardList.html"></span>
-      <span class="award-control-text js-counter">{{ awardList.list.length }}</span>
-    </button>
+      <template #emoji>
+        <span class="award-emoji-block" data-testid="award-html" v-html="awardList.html"></span>
+      </template>
+      <span class="js-counter">{{ awardList.list.length }}</span>
+    </gl-button>
     <div v-if="canAwardEmoji" class="award-menu-holder">
-      <button
+      <gl-button
         v-gl-tooltip.viewport
         :class="addButtonClass"
-        class="award-control btn js-add-award"
+        class="add-reaction-button js-add-award"
         title="Add reaction"
         :aria-label="__('Add reaction')"
-        type="button"
       >
-        <span class="award-control-icon award-control-icon-neutral">
-          <gl-icon aria-hidden="true" name="slight-smile" />
+        <span class="reaction-control-icon reaction-control-icon-neutral">
+          <gl-icon name="slight-smile" />
         </span>
-        <span class="award-control-icon award-control-icon-positive">
-          <gl-icon aria-hidden="true" name="smiley" />
+        <span class="reaction-control-icon reaction-control-icon-positive">
+          <gl-icon name="smiley" />
         </span>
-        <span class="award-control-icon award-control-icon-super-positive">
-          <gl-icon aria-hidden="true" name="smiley" />
+        <span class="reaction-control-icon reaction-control-icon-super-positive">
+          <gl-icon name="smile" />
         </span>
-        <gl-loading-icon size="md" color="dark" class="award-control-icon-loading" />
-      </button>
+      </gl-button>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/constants.js b/app/assets/javascripts/vue_shared/components/blob_viewers/constants.js
index d4c1808eec2..106dd7a3b97 100644
--- a/app/assets/javascripts/vue_shared/components/blob_viewers/constants.js
+++ b/app/assets/javascripts/vue_shared/components/blob_viewers/constants.js
@@ -1,3 +1 @@
 export const HIGHLIGHT_CLASS_NAME = 'hll';
-
-export default {};
diff --git a/app/assets/javascripts/vue_shared/components/callout.vue b/app/assets/javascripts/vue_shared/components/callout.vue
deleted file mode 100644
index 56bafebf4ce..00000000000
--- a/app/assets/javascripts/vue_shared/components/callout.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-const calloutVariants = ['danger', 'success', 'info', 'warning'];
-
-export default {
-  props: {
-    category: {
-      type: String,
-      required: false,
-      default: calloutVariants[0],
-      validator: value => calloutVariants.includes(value),
-    },
-    message: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-};
-</script>
-<template>
-  <div :class="`bs-callout bs-callout-${category}`" role="alert" aria-live="assertive">
-    {{ message }} <slot></slot>
-  </div>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
index 1b7e51b7d02..f388a468fd2 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -20,6 +20,7 @@ import CiIcon from './ci_icon.vue';
  * - Pipeline show view - header
  * - Job show view - header
  * - MR widget
+ * - Terraform table
  */
 
 export default {
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue
index d775a093f5f..07bd6019b80 100644
--- a/app/assets/javascripts/vue_shared/components/ci_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue
@@ -63,5 +63,7 @@ export default {
 };
 </script>
 <template>
-  <span :class="cssClass"> <gl-icon :name="icon" :size="size" :class="cssClasses" /> </span>
+  <span :class="cssClass">
+    <gl-icon :name="icon" :size="size" :class="cssClasses" :aria-label="status.icon" />
+  </span>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index 960551fae91..bf1361f1a6a 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -84,5 +84,8 @@ export default {
     :size="size"
     icon="copy-to-clipboard"
     :aria-label="__('Copy this value')"
-  />
+    v-on="$listeners"
+  >
+    <slot></slot>
+  </gl-button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue b/app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue
new file mode 100644
index 00000000000..6977692e30c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue
@@ -0,0 +1,142 @@
+<script>
+/**
+ * Renders a color picker input with preset colors to choose from
+ *
+ * @example
+ * <color-picker :label="__('Background color')" set-color="#FF0000" />
+ */
+import { GlFormGroup, GlFormInput, GlFormInputGroup, GlLink, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+const VALID_RGB_HEX_COLOR = /^#([0-9A-F]{3}){1,2}$/i;
+const PREVIEW_COLOR_DEFAULT_CLASSES =
+  'gl-relative gl-w-7 gl-bg-gray-10 gl-rounded-top-left-base gl-rounded-bottom-left-base';
+
+export default {
+  name: 'ColorPicker',
+  components: {
+    GlFormGroup,
+    GlFormInput,
+    GlFormInputGroup,
+    GlLink,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    setColor: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      selectedColor: this.setColor.trim() || '',
+    };
+  },
+  computed: {
+    description() {
+      return this.hasSuggestedColors
+        ? this.$options.i18n.fullDescription
+        : this.$options.i18n.shortDescription;
+    },
+    suggestedColors() {
+      return gon.suggested_label_colors;
+    },
+    previewColor() {
+      if (this.isValidColor) {
+        return { backgroundColor: this.selectedColor };
+      }
+
+      return {};
+    },
+    previewColorClasses() {
+      const borderStyle = this.isInvalidColor
+        ? 'gl-inset-border-1-red-500'
+        : 'gl-inset-border-1-gray-400';
+
+      return `${PREVIEW_COLOR_DEFAULT_CLASSES} ${borderStyle}`;
+    },
+    hasSuggestedColors() {
+      return Object.keys(this.suggestedColors).length;
+    },
+    isInvalidColor() {
+      return this.isValidColor === false;
+    },
+    isValidColor() {
+      if (this.selectedColor === '') {
+        return null;
+      }
+
+      return VALID_RGB_HEX_COLOR.test(this.selectedColor);
+    },
+  },
+  methods: {
+    handleColorChange(color) {
+      this.selectedColor = color.trim();
+
+      if (this.isValidColor) {
+        this.$emit('input', this.selectedColor);
+      }
+    },
+  },
+  i18n: {
+    fullDescription: __('Choose any color. Or you can choose one of the suggested colors below'),
+    shortDescription: __('Choose any color'),
+    invalid: __('Please enter a valid hex (#RRGGBB or #RGB) color value'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-form-group
+      :label="label"
+      label-for="color-picker"
+      :description="description"
+      :invalid-feedback="this.$options.i18n.invalid"
+      :state="isValidColor"
+      :class="{ 'gl-mb-3!': hasSuggestedColors }"
+    >
+      <gl-form-input-group
+        id="color-picker"
+        :state="isValidColor"
+        max-length="7"
+        type="text"
+        class="gl-align-center gl-rounded-0 gl-rounded-top-right-base gl-rounded-bottom-right-base"
+        :value="selectedColor"
+        @input="handleColorChange"
+      >
+        <template #prepend>
+          <div :class="previewColorClasses" :style="previewColor" data-testid="color-preview">
+            <gl-form-input
+              type="color"
+              class="gl-absolute gl-top-0 gl-left-0 gl-h-full! gl-p-0! gl-m-0! gl-cursor-pointer gl-opacity-0"
+              tabindex="-1"
+              :value="selectedColor"
+              @input="handleColorChange"
+            />
+          </div>
+        </template>
+      </gl-form-input-group>
+    </gl-form-group>
+
+    <div v-if="hasSuggestedColors" class="gl-mb-3">
+      <gl-link
+        v-for="(name, hex) in suggestedColors"
+        :key="hex"
+        v-gl-tooltip
+        :title="name"
+        :style="{ backgroundColor: hex }"
+        class="gl-rounded-base gl-w-7 gl-h-7 gl-display-inline-block gl-mr-3 gl-mb-3 gl-text-decoration-none"
+        @click.prevent="handleColorChange(hex)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
index 328c7e3fd32..eb7e24734ce 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
@@ -28,6 +28,8 @@ export default {
     return {
       width: 0,
       height: 0,
+      renderedWidth: 0,
+      renderedHeight: 0,
     };
   },
   computed: {
@@ -63,11 +65,14 @@ export default {
         this.height = contentImg.naturalHeight;
 
         this.$nextTick(() => {
+          this.renderedWidth = contentImg.clientWidth;
+          this.renderedHeight = contentImg.clientHeight;
+
           this.$emit('imgLoaded', {
             width: this.width,
             height: this.height,
-            renderedWidth: contentImg.clientWidth,
-            renderedHeight: contentImg.clientHeight,
+            renderedWidth: this.renderedWidth,
+            renderedHeight: this.renderedHeight,
           });
         });
       }
@@ -77,9 +82,14 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div data-testid="image-viewer">
     <div :class="innerCssClasses" class="position-relative">
-      <img ref="contentImg" :src="path" @load="onImgLoad" /> <slot name="image-overlay"></slot>
+      <img ref="contentImg" :src="path" @load="onImgLoad" />
+      <slot
+        name="image-overlay"
+        :rendered-width="renderedWidth"
+        :rendered-height="renderedHeight"
+      ></slot>
     </div>
     <p v-if="renderInfo" class="image-info">
       <template v-if="hasFileSize">
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
index 6bb05e59f6b..67be76604a3 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
@@ -109,7 +109,7 @@ export default {
 </script>
 
 <template>
-  <div ref="markdownPreview" class="md-previewer">
+  <div ref="markdownPreview" class="md-previewer" data-testid="md-previewer">
     <gl-skeleton-loading v-if="isLoading" />
     <div v-else class="md" v-html="previewContent"></div>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
index a7e6438a935..79cdf308ac5 100644
--- a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
@@ -219,7 +219,7 @@ export default {
         <span v-if="utc" class="gl-text-gray-500 gl-font-weight-bold gl-font-sm">{{
           __('UTC')
         }}</span>
-        <gl-icon class="gl-dropdown-caret" name="chevron-down" aria-hidden="true" />
+        <gl-icon class="gl-dropdown-caret" name="chevron-down" />
       </template>
 
       <div class="d-flex justify-content-between gl-p-2">
diff --git a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_lib.js b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_lib.js
index 40708453d79..aaadc9766db 100644
--- a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_lib.js
+++ b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_lib.js
@@ -89,5 +89,3 @@ export const inputStringToIsoDate = (value, utc = false) => {
  */
 export const isoDateToInputString = (date, utc = false) =>
   dateformat(date, dateFormats.inputFormat, utc);
-
-export default {};
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
index a2fe19f9672..e755494a668 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
@@ -106,7 +106,13 @@ export default {
       :a-mode="aMode"
       :b-mode="bMode"
     >
-      <slot slot="image-overlay" name="image-overlay"></slot>
+      <template #image-overlay="{ renderedWidth, renderedHeight }">
+        <slot
+          :rendered-width="renderedWidth"
+          :rendered-height="renderedHeight"
+          name="image-overlay"
+        ></slot>
+      </template>
     </component>
     <slot></slot>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
index 2b5b2269ec8..433aafdeb9e 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
@@ -141,7 +141,13 @@ export default {
           :path="newPath"
           @imgLoaded="onionNewImgLoaded"
         >
-          <slot slot="image-overlay" name="image-overlay"> </slot>
+          <template #image-overlay="{ renderedWidth, renderedHeight }">
+            <slot
+              :rendered-width="renderedWidth"
+              :rendered-height="renderedHeight"
+              name="image-overlay"
+            ></slot>
+          </template>
         </image-viewer>
       </div>
       <div class="controls">
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
index 2f2618d448f..acca6ba117f 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
@@ -143,7 +143,13 @@ export default {
           class="frame added"
           @imgLoaded="swipeNewImgLoaded"
         >
-          <slot slot="image-overlay" name="image-overlay"> </slot>
+          <template #image-overlay="{ renderedWidth, renderedHeight }">
+            <slot
+              :rendered-width="renderedWidth"
+              :rendered-height="renderedHeight"
+              name="image-overlay"
+            ></slot>
+          </template>
         </image-viewer>
       </div>
       <span
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
index 4dbfdb6d79c..97cac919b2a 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
@@ -44,7 +44,13 @@ export default {
       :inner-css-classes="['frame', 'added']"
       class="wrap w-50"
     >
-      <slot slot="image-overlay" name="image-overlay"> </slot>
+      <template #image-overlay="{ renderedWidth, renderedHeight }">
+        <slot
+          :rendered-width="renderedWidth"
+          :rendered-height="renderedHeight"
+          name="image-overlay"
+        ></slot>
+      </template>
     </image-viewer>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
index 6f5a133b225..00033145603 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
@@ -76,7 +76,13 @@ export default {
     <div v-if="diffMode === $options.diffModes.replaced" class="diff-viewer">
       <div class="image js-replaced-image">
         <component :is="imageViewComponent" v-bind="$props">
-          <slot slot="image-overlay" name="image-overlay"> </slot>
+          <template #image-overlay="{ renderedWidth, renderedHeight }">
+            <slot
+              :rendered-width="renderedWidth"
+              :rendered-height="renderedHeight"
+              name="image-overlay"
+            ></slot>
+          </template>
         </component>
       </div>
       <div class="view-modes">
@@ -121,7 +127,13 @@ export default {
             },
           ]"
         >
-          <slot v-if="isNew || isRenamed" slot="image-overlay" name="image-overlay"> </slot>
+          <template v-if="isNew || isRenamed" #image-overlay="{ renderedWidth, renderedHeight }">
+            <slot
+              :rendered-width="renderedWidth"
+              :rendered-height="renderedHeight"
+              name="image-overlay"
+            ></slot>
+          </template>
         </image-viewer>
       </div>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/dismissible_container.vue b/app/assets/javascripts/vue_shared/components/dismissible_container.vue
index b4227bae09e..6d5fd065751 100644
--- a/app/assets/javascripts/vue_shared/components/dismissible_container.vue
+++ b/app/assets/javascripts/vue_shared/components/dismissible_container.vue
@@ -45,7 +45,7 @@ export default {
           data-testid="close"
           @click="dismiss"
         >
-          <gl-icon name="close" aria-hidden="true" class="gl-text-gray-500" />
+          <gl-icon name="close" class="gl-text-gray-500" />
         </button>
       </div>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
index 48b94fdc181..edb5ffdc39c 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
@@ -44,6 +44,6 @@ export default {
       type="search"
       autocomplete="off"
     />
-    <gl-icon name="search" class="dropdown-input-search" aria-hidden="true" data-hidden="true" />
+    <gl-icon name="search" class="dropdown-input-search" data-hidden="true" />
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/file_finder/index.vue b/app/assets/javascripts/vue_shared/components/file_finder/index.vue
index 386df617d47..05403b38850 100644
--- a/app/assets/javascripts/vue_shared/components/file_finder/index.vue
+++ b/app/assets/javascripts/vue_shared/components/file_finder/index.vue
@@ -234,7 +234,6 @@ export default {
           name="search"
           class="dropdown-input-search"
           :class="{ hidden: showClearInputButton }"
-          aria-hidden="true"
         />
         <gl-icon
           name="close"
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index b4115b0c6a4..4d07d9fcfdd 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -143,6 +143,7 @@ export default {
         :style="levelIndentation"
         class="file-row-name"
         data-qa-selector="file_name_content"
+        data-testid="file-row-name-container"
         :class="[fileClasses, { 'str-truncated': !truncateMiddle, 'gl-min-w-0': truncateMiddle }]"
       >
         <file-icon
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
index 97b4ceda033..3988b3814f9 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
@@ -286,6 +286,7 @@ export default {
     handleFilterSubmit() {
       const filterTokens = uniqueTokens(this.filterValue);
       this.filterValue = filterTokens;
+
       if (this.recentSearchesStorageKey) {
         this.recentSearchesPromise
           .then(() => {
@@ -302,6 +303,17 @@ export default {
       this.blurSearchInput();
       this.$emit('onFilter', this.removeQuotesEnclosure(filterTokens));
     },
+    historyTokenOptionTitle(historyToken) {
+      const tokenOption = this.tokens
+        .find(token => token.type === historyToken.type)
+        ?.options?.find(option => option.value === historyToken.value.data);
+
+      if (!tokenOption?.title) {
+        return historyToken.value.data;
+      }
+
+      return tokenOption.title;
+    },
   },
 };
 </script>
@@ -333,7 +345,7 @@ export default {
             <span v-if="tokenTitles[token.type]"
               >{{ tokenTitles[token.type] }} :{{ token.value.operator }}</span
             >
-            <strong>{{ tokenSymbols[token.type] }}{{ token.value.data }}</strong>
+            <strong>{{ tokenSymbols[token.type] }}{{ historyTokenOptionTitle(token) }}</strong>
           </span>
         </template>
       </template>
diff --git a/app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue b/app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue
new file mode 100644
index 00000000000..1ad0ca36bf8
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue
@@ -0,0 +1,97 @@
+<script>
+import Tribute from '@gitlab/tributejs';
+import {
+  GfmAutocompleteType,
+  tributeConfig,
+} from 'ee_else_ce/vue_shared/components/gfm_autocomplete/utils';
+import createFlash from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+import SidebarMediator from '~/sidebar/sidebar_mediator';
+
+export default {
+  errorMessage: __(
+    'An error occurred while getting autocomplete data. Please refresh the page and try again.',
+  ),
+  props: {
+    autocompleteTypes: {
+      type: Array,
+      required: false,
+      default: () => Object.values(GfmAutocompleteType),
+    },
+    dataSources: {
+      type: Object,
+      required: false,
+      default: () => gl.GfmAutoComplete?.dataSources || {},
+    },
+  },
+  computed: {
+    config() {
+      return this.autocompleteTypes.map(type => ({
+        ...tributeConfig[type].config,
+        loadingItemTemplate: `<span class="gl-spinner gl-vertical-align-text-bottom gl-ml-3 gl-mr-2"></span>${__(
+          'Loading',
+        )}`,
+        requireLeadingSpace: true,
+        values: this.getValues(type),
+      }));
+    },
+  },
+  mounted() {
+    this.cache = {};
+    this.tribute = new Tribute({ collection: this.config });
+
+    const input = this.$slots.default?.[0]?.elm;
+    this.tribute.attach(input);
+  },
+  beforeDestroy() {
+    const input = this.$slots.default?.[0]?.elm;
+    this.tribute.detach(input);
+  },
+  methods: {
+    cacheAssignees() {
+      const isAssigneesLengthSame =
+        this.assignees?.length === SidebarMediator.singleton?.store?.assignees?.length;
+
+      if (!this.assignees || !isAssigneesLengthSame) {
+        this.assignees =
+          SidebarMediator.singleton?.store?.assignees?.map(assignee => assignee.username) || [];
+      }
+    },
+    filterValues(type) {
+      // The assignees AJAX response can come after the user first invokes autocomplete
+      // so we need to check more than once if we need to update the assignee cache
+      this.cacheAssignees();
+
+      return tributeConfig[type].filterValues
+        ? tributeConfig[type].filterValues({
+            assignees: this.assignees,
+            collection: this.cache[type],
+            fullText: this.$slots.default?.[0]?.elm?.value,
+            selectionStart: this.$slots.default?.[0]?.elm?.selectionStart,
+          })
+        : this.cache[type];
+    },
+    getValues(type) {
+      return (inputText, processValues) => {
+        if (this.cache[type]) {
+          processValues(this.filterValues(type));
+        } else if (this.dataSources[type]) {
+          axios
+            .get(this.dataSources[type])
+            .then(response => {
+              this.cache[type] = response.data;
+              processValues(this.filterValues(type));
+            })
+            .catch(() => createFlash({ message: this.$options.errorMessage }));
+        } else {
+          processValues([]);
+        }
+      };
+    },
+  },
+  render(createElement) {
+    return createElement('div', this.$slots.default);
+  },
+};
+</script>
diff --git a/app/assets/javascripts/vue_shared/components/gfm_autocomplete/utils.js b/app/assets/javascripts/vue_shared/components/gfm_autocomplete/utils.js
new file mode 100644
index 00000000000..2581888b504
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/gfm_autocomplete/utils.js
@@ -0,0 +1,142 @@
+import { escape, last } from 'lodash';
+import { spriteIcon } from '~/lib/utils/common_utils';
+
+const groupType = 'Group'; // eslint-disable-line @gitlab/require-i18n-strings
+
+const nonWordOrInteger = /\W|^\d+$/;
+
+export const GfmAutocompleteType = {
+  Issues: 'issues',
+  Labels: 'labels',
+  Members: 'members',
+  MergeRequests: 'mergeRequests',
+  Milestones: 'milestones',
+  Snippets: 'snippets',
+};
+
+function doesCurrentLineStartWith(searchString, fullText, selectionStart) {
+  const currentLineNumber = fullText.slice(0, selectionStart).split('\n').length;
+  const currentLine = fullText.split('\n')[currentLineNumber - 1];
+  return currentLine.startsWith(searchString);
+}
+
+export const tributeConfig = {
+  [GfmAutocompleteType.Issues]: {
+    config: {
+      trigger: '#',
+      lookup: value => `${value.iid}${value.title}`,
+      menuItemTemplate: ({ original }) =>
+        `<small>${original.reference || original.iid}</small> ${escape(original.title)}`,
+      selectTemplate: ({ original }) => original.reference || `#${original.iid}`,
+    },
+  },
+
+  [GfmAutocompleteType.Labels]: {
+    config: {
+      trigger: '~',
+      lookup: 'title',
+      menuItemTemplate: ({ original }) => `
+        <span class="dropdown-label-box" style="background: ${escape(original.color)};"></span>
+        ${escape(original.title)}`,
+      selectTemplate: ({ original }) =>
+        nonWordOrInteger.test(original.title)
+          ? `~"${escape(original.title)}"`
+          : `~${escape(original.title)}`,
+    },
+    filterValues({ collection, fullText, selectionStart }) {
+      if (doesCurrentLineStartWith('/label', fullText, selectionStart)) {
+        return collection.filter(label => !label.set);
+      }
+
+      if (doesCurrentLineStartWith('/unlabel', fullText, selectionStart)) {
+        return collection.filter(label => label.set);
+      }
+
+      return collection;
+    },
+  },
+
+  [GfmAutocompleteType.Members]: {
+    config: {
+      trigger: '@',
+      fillAttr: 'username',
+      lookup: value =>
+        value.type === groupType ? last(value.name.split(' / ')) : `${value.name}${value.username}`,
+      menuItemTemplate: ({ original }) => {
+        const commonClasses = 'gl-avatar gl-avatar-s24 gl-flex-shrink-0';
+        const noAvatarClasses = `${commonClasses} gl-rounded-small
+        gl-display-flex gl-align-items-center gl-justify-content-center`;
+
+        const avatar = original.avatar_url
+          ? `<img class="${commonClasses} gl-avatar-circle" src="${original.avatar_url}" alt="" />`
+          : `<div class="${noAvatarClasses}" aria-hidden="true">
+            ${original.username.charAt(0).toUpperCase()}</div>`;
+
+        let displayName = original.name;
+        let parentGroupOrUsername = `@${original.username}`;
+
+        if (original.type === groupType) {
+          const splitName = original.name.split(' / ');
+          displayName = splitName.pop();
+          parentGroupOrUsername = splitName.pop();
+        }
+
+        const count = original.count && !original.mentionsDisabled ? ` (${original.count})` : '';
+
+        const disabledMentionsIcon = original.mentionsDisabled
+          ? spriteIcon('notifications-off', 's16 gl-ml-3')
+          : '';
+
+        return `
+        <div class="gl-display-flex gl-align-items-center">
+          ${avatar}
+          <div class="gl-font-sm gl-line-height-normal gl-ml-3">
+            <div>${escape(displayName)}${count}</div>
+            <div class="gl-text-gray-700">${escape(parentGroupOrUsername)}</div>
+          </div>
+          ${disabledMentionsIcon}
+        </div>
+      `;
+      },
+    },
+    filterValues({ assignees, collection, fullText, selectionStart }) {
+      if (doesCurrentLineStartWith('/assign', fullText, selectionStart)) {
+        return collection.filter(member => !assignees.includes(member.username));
+      }
+
+      if (doesCurrentLineStartWith('/unassign', fullText, selectionStart)) {
+        return collection.filter(member => assignees.includes(member.username));
+      }
+
+      return collection;
+    },
+  },
+
+  [GfmAutocompleteType.MergeRequests]: {
+    config: {
+      trigger: '!',
+      lookup: value => `${value.iid}${value.title}`,
+      menuItemTemplate: ({ original }) =>
+        `<small>${original.reference || original.iid}</small> ${escape(original.title)}`,
+      selectTemplate: ({ original }) => original.reference || `!${original.iid}`,
+    },
+  },
+
+  [GfmAutocompleteType.Milestones]: {
+    config: {
+      trigger: '%',
+      lookup: 'title',
+      menuItemTemplate: ({ original }) => escape(original.title),
+      selectTemplate: ({ original }) => `%"${escape(original.title)}"`,
+    },
+  },
+
+  [GfmAutocompleteType.Snippets]: {
+    config: {
+      trigger: '$',
+      fillAttr: 'id',
+      lookup: value => `${value.id}${value.title}`,
+      menuItemTemplate: ({ original }) => `<small>${original.id}</small> ${escape(original.title)}`,
+    },
+  },
+};
diff --git a/app/assets/javascripts/vue_shared/components/gl_mentions.vue b/app/assets/javascripts/vue_shared/components/gl_mentions.vue
deleted file mode 100644
index dde7e3ebe13..00000000000
--- a/app/assets/javascripts/vue_shared/components/gl_mentions.vue
+++ /dev/null
@@ -1,238 +0,0 @@
-<script>
-import { escape, last } from 'lodash';
-import Tribute from 'tributejs';
-import axios from '~/lib/utils/axios_utils';
-import { spriteIcon } from '~/lib/utils/common_utils';
-import SidebarMediator from '~/sidebar/sidebar_mediator';
-
-const AutoComplete = {
-  Issues: 'issues',
-  Labels: 'labels',
-  Members: 'members',
-  MergeRequests: 'mergeRequests',
-  Milestones: 'milestones',
-  Snippets: 'snippets',
-};
-
-const groupType = 'Group'; // eslint-disable-line @gitlab/require-i18n-strings
-
-function doesCurrentLineStartWith(searchString, fullText, selectionStart) {
-  const currentLineNumber = fullText.slice(0, selectionStart).split('\n').length;
-  const currentLine = fullText.split('\n')[currentLineNumber - 1];
-  return currentLine.startsWith(searchString);
-}
-
-const autoCompleteMap = {
-  [AutoComplete.Issues]: {
-    filterValues() {
-      return this[AutoComplete.Issues];
-    },
-    menuItemTemplate({ original }) {
-      return `<small>${original.reference || original.iid}</small> ${escape(original.title)}`;
-    },
-  },
-  [AutoComplete.Labels]: {
-    filterValues() {
-      const fullText = this.$slots.default?.[0]?.elm?.value;
-      const selectionStart = this.$slots.default?.[0]?.elm?.selectionStart;
-
-      if (doesCurrentLineStartWith('/label', fullText, selectionStart)) {
-        return this.labels.filter(label => !label.set);
-      }
-
-      if (doesCurrentLineStartWith('/unlabel', fullText, selectionStart)) {
-        return this.labels.filter(label => label.set);
-      }
-
-      return this.labels;
-    },
-    menuItemTemplate({ original }) {
-      return `
-        <span class="dropdown-label-box" style="background: ${escape(original.color)};"></span>
-        ${escape(original.title)}`;
-    },
-  },
-  [AutoComplete.Members]: {
-    filterValues() {
-      const fullText = this.$slots.default?.[0]?.elm?.value;
-      const selectionStart = this.$slots.default?.[0]?.elm?.selectionStart;
-
-      // Need to check whether sidebar store assignees has been updated
-      // in the case where the assignees AJAX response comes after the user does @ autocomplete
-      const isAssigneesLengthSame =
-        this.assignees?.length === SidebarMediator.singleton?.store?.assignees?.length;
-
-      if (!this.assignees || !isAssigneesLengthSame) {
-        this.assignees =
-          SidebarMediator.singleton?.store?.assignees?.map(assignee => assignee.username) || [];
-      }
-
-      if (doesCurrentLineStartWith('/assign', fullText, selectionStart)) {
-        return this.members.filter(member => !this.assignees.includes(member.username));
-      }
-
-      if (doesCurrentLineStartWith('/unassign', fullText, selectionStart)) {
-        return this.members.filter(member => this.assignees.includes(member.username));
-      }
-
-      return this.members;
-    },
-    menuItemTemplate({ original }) {
-      const commonClasses = 'gl-avatar gl-avatar-s24 gl-flex-shrink-0';
-      const noAvatarClasses = `${commonClasses} gl-rounded-small
-        gl-display-flex gl-align-items-center gl-justify-content-center`;
-
-      const avatar = original.avatar_url
-        ? `<img class="${commonClasses} gl-avatar-circle" src="${original.avatar_url}" alt="" />`
-        : `<div class="${noAvatarClasses}" aria-hidden="true">
-            ${original.username.charAt(0).toUpperCase()}</div>`;
-
-      let displayName = original.name;
-      let parentGroupOrUsername = `@${original.username}`;
-
-      if (original.type === groupType) {
-        const splitName = original.name.split(' / ');
-        displayName = splitName.pop();
-        parentGroupOrUsername = splitName.pop();
-      }
-
-      const count = original.count && !original.mentionsDisabled ? ` (${original.count})` : '';
-
-      const disabledMentionsIcon = original.mentionsDisabled
-        ? spriteIcon('notifications-off', 's16 gl-ml-3')
-        : '';
-
-      return `
-        <div class="gl-display-flex gl-align-items-center">
-          ${avatar}
-          <div class="gl-font-sm gl-line-height-normal gl-ml-3">
-            <div>${escape(displayName)}${count}</div>
-            <div class="gl-text-gray-700">${escape(parentGroupOrUsername)}</div>
-          </div>
-          ${disabledMentionsIcon}
-        </div>
-      `;
-    },
-  },
-  [AutoComplete.MergeRequests]: {
-    filterValues() {
-      return this[AutoComplete.MergeRequests];
-    },
-    menuItemTemplate({ original }) {
-      return `<small>${original.reference || original.iid}</small> ${escape(original.title)}`;
-    },
-  },
-  [AutoComplete.Milestones]: {
-    filterValues() {
-      return this[AutoComplete.Milestones];
-    },
-    menuItemTemplate({ original }) {
-      return escape(original.title);
-    },
-  },
-  [AutoComplete.Snippets]: {
-    filterValues() {
-      return this[AutoComplete.Snippets];
-    },
-    menuItemTemplate({ original }) {
-      return `<small>${original.id}</small> ${escape(original.title)}`;
-    },
-  },
-};
-
-export default {
-  name: 'GlMentions',
-  props: {
-    dataSources: {
-      type: Object,
-      required: false,
-      default: () => gl.GfmAutoComplete?.dataSources || {},
-    },
-  },
-  mounted() {
-    const NON_WORD_OR_INTEGER = /\W|^\d+$/;
-
-    this.tribute = new Tribute({
-      collection: [
-        {
-          trigger: '#',
-          lookup: value => value.iid + value.title,
-          menuItemTemplate: autoCompleteMap[AutoComplete.Issues].menuItemTemplate,
-          selectTemplate: ({ original }) => original.reference || `#${original.iid}`,
-          values: this.getValues(AutoComplete.Issues),
-        },
-        {
-          trigger: '@',
-          fillAttr: 'username',
-          lookup: value =>
-            value.type === groupType ? last(value.name.split(' / ')) : value.name + value.username,
-          menuItemTemplate: autoCompleteMap[AutoComplete.Members].menuItemTemplate,
-          values: this.getValues(AutoComplete.Members),
-        },
-        {
-          trigger: '~',
-          lookup: 'title',
-          menuItemTemplate: autoCompleteMap[AutoComplete.Labels].menuItemTemplate,
-          selectTemplate: ({ original }) =>
-            NON_WORD_OR_INTEGER.test(original.title)
-              ? `~"${escape(original.title)}"`
-              : `~${escape(original.title)}`,
-          values: this.getValues(AutoComplete.Labels),
-        },
-        {
-          trigger: '!',
-          lookup: value => value.iid + value.title,
-          menuItemTemplate: autoCompleteMap[AutoComplete.MergeRequests].menuItemTemplate,
-          selectTemplate: ({ original }) => original.reference || `!${original.iid}`,
-          values: this.getValues(AutoComplete.MergeRequests),
-        },
-        {
-          trigger: '%',
-          lookup: 'title',
-          menuItemTemplate: autoCompleteMap[AutoComplete.Milestones].menuItemTemplate,
-          selectTemplate: ({ original }) => `%"${escape(original.title)}"`,
-          values: this.getValues(AutoComplete.Milestones),
-        },
-        {
-          trigger: '$',
-          fillAttr: 'id',
-          lookup: value => value.id + value.title,
-          menuItemTemplate: autoCompleteMap[AutoComplete.Snippets].menuItemTemplate,
-          values: this.getValues(AutoComplete.Snippets),
-        },
-      ],
-    });
-
-    const input = this.$slots.default?.[0]?.elm;
-    this.tribute.attach(input);
-  },
-  beforeDestroy() {
-    const input = this.$slots.default?.[0]?.elm;
-    this.tribute.detach(input);
-  },
-  methods: {
-    getValues(autoCompleteType) {
-      return (inputText, processValues) => {
-        if (this[autoCompleteType]) {
-          const filteredValues = autoCompleteMap[autoCompleteType].filterValues.call(this);
-          processValues(filteredValues);
-        } else if (this.dataSources[autoCompleteType]) {
-          axios
-            .get(this.dataSources[autoCompleteType])
-            .then(response => {
-              this[autoCompleteType] = response.data;
-              const filteredValues = autoCompleteMap[autoCompleteType].filterValues.call(this);
-              processValues(filteredValues);
-            })
-            .catch(() => {});
-        } else {
-          processValues([]);
-        }
-      };
-    },
-  },
-  render(createElement) {
-    return createElement('div', this.$slots.default);
-  },
-};
-</script>
diff --git a/app/assets/javascripts/vue_shared/components/help_popover.vue b/app/assets/javascripts/vue_shared/components/help_popover.vue
index 7154360611f..821ae6cec52 100644
--- a/app/assets/javascripts/vue_shared/components/help_popover.vue
+++ b/app/assets/javascripts/vue_shared/components/help_popover.vue
@@ -1,6 +1,6 @@
 <script>
 import $ from 'jquery';
-import { GlIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { inserted } from '~/feature_highlight/feature_highlight_helper';
 import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover';
 
@@ -11,7 +11,7 @@ import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover
 export default {
   name: 'HelpPopover',
   components: {
-    GlIcon,
+    GlButton,
   },
   props: {
     options: {
@@ -43,7 +43,5 @@ export default {
 };
 </script>
 <template>
-  <button type="button" class="btn btn-blank btn-transparent btn-help" tabindex="0">
-    <gl-icon name="question" />
-  </button>
+  <gl-button variant="link" icon="question" tabindex="0" />
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/lib/utils/dom_utils.js b/app/assets/javascripts/vue_shared/components/lib/utils/dom_utils.js
index 02f28da8bb0..61ab2a698ce 100644
--- a/app/assets/javascripts/vue_shared/components/lib/utils/dom_utils.js
+++ b/app/assets/javascripts/vue_shared/components/lib/utils/dom_utils.js
@@ -1,5 +1,3 @@
 export function pixeliseValue(val) {
   return val ? `${val}px` : '';
 }
-
-export default {};
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
deleted file mode 100644
index 59ce632c4a2..00000000000
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script>
-import { GlLoadingIcon } from '@gitlab/ui';
-/* eslint-disable vue/require-default-prop */
-/*
-This component will be deprecated in favor of gl-deprecated-button.
-https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-button--loading-button
-https://gitlab.com/gitlab-org/gitlab/issues/207412
-*/
-
-export default {
-  components: {
-    GlLoadingIcon,
-  },
-  props: {
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    label: {
-      type: String,
-      required: false,
-    },
-    containerClass: {
-      type: [String, Array, Object],
-      required: false,
-      default: 'btn btn-align-content',
-    },
-  },
-  methods: {
-    onClick(e) {
-      this.$emit('click', e);
-    },
-  },
-};
-</script>
-
-<template>
-  <button :class="containerClass" :disabled="loading || disabled" type="button" @click="onClick">
-    <transition name="fade-in">
-      <gl-loading-icon
-        v-if="loading"
-        :inline="true"
-        :class="{
-          'gl-mr-2': label,
-        }"
-        class="js-loading-button-icon"
-      />
-    </transition>
-    <transition name="fade-in">
-      <slot>
-        <span v-if="label" class="js-loading-button-label"> {{ label }} </span>
-      </slot>
-    </transition>
-  </button>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
new file mode 100644
index 00000000000..b9729a3dc5c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
@@ -0,0 +1,59 @@
+<script>
+import { GlDropdown, GlDropdownForm, GlFormTextarea, GlButton } from '@gitlab/ui';
+import { __, sprintf } from '~/locale';
+
+export default {
+  components: { GlDropdown, GlDropdownForm, GlFormTextarea, GlButton },
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    fileName: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      message: null,
+      buttonText: __('Apply suggestion'),
+      headerText: __('Apply suggestion commit message'),
+    };
+  },
+  computed: {
+    placeholderText() {
+      return sprintf(__('Apply suggestion on %{fileName}'), { fileName: this.fileName });
+    },
+  },
+  methods: {
+    onApply() {
+      this.$emit('apply', this.message || this.placeholderText);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown
+    :text="buttonText"
+    :header-text="headerText"
+    :disabled="disabled"
+    boundary="window"
+    right
+    menu-class="gl-w-full! gl-pb-0!"
+  >
+    <gl-dropdown-form class="gl-m-3!">
+      <gl-form-textarea v-model="message" :placeholder="placeholderText" />
+      <gl-button
+        class="gl-w-quarter! gl-mt-3 gl-text-center! float-right"
+        category="secondary"
+        variant="success"
+        @click="onApply"
+      >
+        {{ __('Apply') }}
+      </gl-button>
+    </gl-dropdown-form>
+  </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 9cfba85e0d8..232a3054cd0 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -10,14 +10,14 @@ import { deprecatedCreateFlash as Flash } from '~/flash';
 import GLForm from '~/gl_form';
 import MarkdownHeader from './header.vue';
 import MarkdownToolbar from './toolbar.vue';
-import GlMentions from '~/vue_shared/components/gl_mentions.vue';
+import GfmAutocomplete from '~/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue';
 import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import axios from '~/lib/utils/axios_utils';
 
 export default {
   components: {
-    GlMentions,
+    GfmAutocomplete,
     MarkdownHeader,
     MarkdownToolbar,
     GlIcon,
@@ -173,7 +173,7 @@ export default {
         members: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
         issues: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
         mergeRequests: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
-        epics: this.enableAutocomplete,
+        epics: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
         milestones: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
         labels: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
         snippets: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
@@ -246,9 +246,9 @@ export default {
     />
     <div v-show="!previewMarkdown" class="md-write-holder">
       <div class="zen-backdrop">
-        <gl-mentions v-if="glFeatures.tributeAutocomplete">
+        <gfm-autocomplete v-if="glFeatures.tributeAutocomplete">
           <slot name="textarea"></slot>
-        </gl-mentions>
+        </gfm-autocomplete>
         <slot v-else name="textarea"></slot>
         <a
           class="zen-control zen-control-leave js-zen-leave gl-text-gray-500"
diff --git a/app/assets/javascripts/vue_shared/components/members/action_buttons/access_request_action_buttons.vue b/app/assets/javascripts/vue_shared/components/members/action_buttons/access_request_action_buttons.vue
deleted file mode 100644
index 10078d5cd64..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/action_buttons/access_request_action_buttons.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script>
-import ActionButtonGroup from './action_button_group.vue';
-import RemoveMemberButton from './remove_member_button.vue';
-import ApproveAccessRequestButton from './approve_access_request_button.vue';
-import { s__, sprintf } from '~/locale';
-
-export default {
-  name: 'AccessRequestActionButtons',
-  components: { ActionButtonGroup, RemoveMemberButton, ApproveAccessRequestButton },
-  props: {
-    member: {
-      type: Object,
-      required: true,
-    },
-    permissions: {
-      type: Object,
-      required: true,
-    },
-    isCurrentUser: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  computed: {
-    message() {
-      const { user, source } = this.member;
-
-      if (this.isCurrentUser) {
-        return sprintf(
-          s__('Members|Are you sure you want to withdraw your access request for "%{source}"'),
-          { source: source.name },
-        );
-      }
-
-      return sprintf(
-        s__('Members|Are you sure you want to deny %{usersName}\'s request to join "%{source}"'),
-        { usersName: user.name, source: source.name },
-      );
-    },
-  },
-};
-</script>
-
-<template>
-  <action-button-group>
-    <div v-if="permissions.canUpdate" class="gl-px-1">
-      <approve-access-request-button :member-id="member.id" />
-    </div>
-    <div v-if="permissions.canRemove" class="gl-px-1">
-      <remove-member-button
-        :member-id="member.id"
-        :message="message"
-        :title="s__('Member|Deny access')"
-        :is-access-request="true"
-        icon="close"
-      />
-    </div>
-  </action-button-group>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/action_buttons/action_button_group.vue b/app/assets/javascripts/vue_shared/components/members/action_buttons/action_button_group.vue
deleted file mode 100644
index 8356fdb60b1..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/action_buttons/action_button_group.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-export default {
-  name: 'ActionButtonGroup',
-};
-</script>
-
-<template>
-  <div class="gl-display-flex gl-flex-align-items-center gl-justify-content-end gl-mx-n1">
-    <slot></slot>
-  </div>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/action_buttons/approve_access_request_button.vue b/app/assets/javascripts/vue_shared/components/members/action_buttons/approve_access_request_button.vue
deleted file mode 100644
index e8a53ff173d..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/action_buttons/approve_access_request_button.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-import { mapState } from 'vuex';
-import { GlButton, GlForm, GlTooltipDirective } from '@gitlab/ui';
-import csrf from '~/lib/utils/csrf';
-import { __ } from '~/locale';
-
-export default {
-  name: 'ApproveAccessRequestButton',
-  csrf,
-  title: __('Grant access'),
-  components: { GlButton, GlForm },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    memberId: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapState(['memberPath']),
-    approvePath() {
-      return this.memberPath.replace(/:id$/, `${this.memberId}/approve_access_request`);
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-form :action="approvePath" method="post">
-    <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
-    <gl-button
-      v-gl-tooltip.hover
-      :title="$options.title"
-      :aria-label="$options.title"
-      icon="check"
-      variant="success"
-      type="submit"
-    />
-  </gl-form>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/action_buttons/group_action_buttons.vue b/app/assets/javascripts/vue_shared/components/members/action_buttons/group_action_buttons.vue
deleted file mode 100644
index 2aebfe80db5..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/action_buttons/group_action_buttons.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-import ActionButtonGroup from './action_button_group.vue';
-import RemoveGroupLinkButton from './remove_group_link_button.vue';
-
-export default {
-  name: 'GroupActionButtons',
-  components: { ActionButtonGroup, RemoveGroupLinkButton },
-  props: {
-    member: {
-      type: Object,
-      required: true,
-    },
-    permissions: {
-      type: Object,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <action-button-group>
-    <div v-if="permissions.canRemove" class="gl-px-1">
-      <remove-group-link-button :group-link="member" />
-    </div>
-  </action-button-group>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/action_buttons/invite_action_buttons.vue b/app/assets/javascripts/vue_shared/components/members/action_buttons/invite_action_buttons.vue
deleted file mode 100644
index 2b0a75640e2..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/action_buttons/invite_action_buttons.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script>
-import ActionButtonGroup from './action_button_group.vue';
-import RemoveMemberButton from './remove_member_button.vue';
-import ResendInviteButton from './resend_invite_button.vue';
-import { s__, sprintf } from '~/locale';
-
-export default {
-  name: 'InviteActionButtons',
-  components: { ActionButtonGroup, RemoveMemberButton, ResendInviteButton },
-  props: {
-    member: {
-      type: Object,
-      required: true,
-    },
-    permissions: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    message() {
-      const { invite, source } = this.member;
-
-      return sprintf(
-        s__(
-          'Members|Are you sure you want to revoke the invitation for %{inviteEmail} to join "%{source}"',
-        ),
-        { inviteEmail: invite.email, source: source.name },
-      );
-    },
-  },
-};
-</script>
-
-<template>
-  <action-button-group>
-    <div v-if="permissions.canResend" class="gl-px-1">
-      <resend-invite-button :member-id="member.id" />
-    </div>
-    <div v-if="permissions.canRemove" class="gl-px-1">
-      <remove-member-button
-        :member-id="member.id"
-        :message="message"
-        :title="s__('Member|Revoke invite')"
-      />
-    </div>
-  </action-button-group>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/action_buttons/leave_button.vue b/app/assets/javascripts/vue_shared/components/members/action_buttons/leave_button.vue
deleted file mode 100644
index d9976e7181c..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/action_buttons/leave_button.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
-import { __ } from '~/locale';
-import LeaveModal from '../modals/leave_modal.vue';
-import { LEAVE_MODAL_ID } from '../constants';
-
-export default {
-  name: 'LeaveButton',
-  title: __('Leave'),
-  modalId: LEAVE_MODAL_ID,
-  components: {
-    GlButton,
-    LeaveModal,
-  },
-  directives: {
-    GlModal: GlModalDirective,
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    member: {
-      type: Object,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-button
-      v-gl-tooltip.hover
-      v-gl-modal="$options.modalId"
-      :title="$options.title"
-      :aria-label="$options.title"
-      icon="leave"
-      variant="danger"
-    />
-    <leave-modal :member="member" />
-  </div>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/action_buttons/remove_group_link_button.vue b/app/assets/javascripts/vue_shared/components/members/action_buttons/remove_group_link_button.vue
deleted file mode 100644
index 9d89cb40676..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/action_buttons/remove_group_link_button.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-import { mapActions } from 'vuex';
-import { GlButton, GlTooltipDirective } from '@gitlab/ui';
-import { s__ } from '~/locale';
-
-export default {
-  name: 'RemoveGroupLinkButton',
-  i18n: {
-    buttonTitle: s__('Members|Remove group'),
-  },
-  components: { GlButton },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    groupLink: {
-      type: Object,
-      required: true,
-    },
-  },
-  methods: {
-    ...mapActions(['showRemoveGroupLinkModal']),
-  },
-};
-</script>
-
-<template>
-  <gl-button
-    v-gl-tooltip.hover
-    variant="danger"
-    :title="$options.i18n.buttonTitle"
-    :aria-label="$options.i18n.buttonTitle"
-    icon="remove"
-    @click="showRemoveGroupLinkModal(groupLink)"
-  />
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/action_buttons/remove_member_button.vue b/app/assets/javascripts/vue_shared/components/members/action_buttons/remove_member_button.vue
deleted file mode 100644
index b0b7ff4ce9a..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/action_buttons/remove_member_button.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script>
-import { mapState } from 'vuex';
-import { GlButton, GlTooltipDirective } from '@gitlab/ui';
-
-export default {
-  name: 'RemoveMemberButton',
-  components: { GlButton },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    memberId: {
-      type: Number,
-      required: true,
-    },
-    message: {
-      type: String,
-      required: true,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-    icon: {
-      type: String,
-      required: false,
-      default: 'remove',
-    },
-    isAccessRequest: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    ...mapState(['memberPath']),
-    computedMemberPath() {
-      return this.memberPath.replace(':id', this.memberId);
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-button
-    v-gl-tooltip.hover
-    class="js-remove-member-button"
-    variant="danger"
-    :title="title"
-    :aria-label="title"
-    :icon="icon"
-    :data-member-path="computedMemberPath"
-    :data-is-access-request="isAccessRequest"
-    :data-message="message"
-    data-qa-selector="delete_member_button"
-  />
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/action_buttons/resend_invite_button.vue b/app/assets/javascripts/vue_shared/components/members/action_buttons/resend_invite_button.vue
deleted file mode 100644
index 1cc3fd17e98..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/action_buttons/resend_invite_button.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-import { mapState } from 'vuex';
-import { GlButton, GlTooltipDirective } from '@gitlab/ui';
-import csrf from '~/lib/utils/csrf';
-import { __ } from '~/locale';
-
-export default {
-  name: 'ResendInviteButton',
-  csrf,
-  title: __('Resend invite'),
-  components: { GlButton },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    memberId: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapState(['memberPath']),
-    resendPath() {
-      return this.memberPath.replace(/:id$/, `${this.memberId}/resend_invite`);
-    },
-  },
-};
-</script>
-
-<template>
-  <form :action="resendPath" method="post">
-    <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
-    <gl-button
-      v-gl-tooltip.hover
-      :title="$options.title"
-      :aria-label="$options.title"
-      icon="paper-airplane"
-      type="submit"
-    />
-  </form>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/action_buttons/user_action_buttons.vue b/app/assets/javascripts/vue_shared/components/members/action_buttons/user_action_buttons.vue
deleted file mode 100644
index 484dbb8fef5..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/action_buttons/user_action_buttons.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<script>
-import ActionButtonGroup from './action_button_group.vue';
-import RemoveMemberButton from './remove_member_button.vue';
-import LeaveButton from './leave_button.vue';
-import { s__, sprintf } from '~/locale';
-
-export default {
-  name: 'UserActionButtons',
-  components: {
-    ActionButtonGroup,
-    RemoveMemberButton,
-    LeaveButton,
-    LdapOverrideButton: () =>
-      import('ee_component/vue_shared/components/members/ldap/ldap_override_button.vue'),
-  },
-  props: {
-    member: {
-      type: Object,
-      required: true,
-    },
-    isCurrentUser: {
-      type: Boolean,
-      required: true,
-    },
-    permissions: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    message() {
-      const { user, source } = this.member;
-
-      if (user) {
-        return sprintf(
-          s__('Members|Are you sure you want to remove %{usersName} from "%{source}"'),
-          {
-            usersName: user.name,
-            source: source.name,
-          },
-        );
-      }
-
-      return sprintf(
-        s__('Members|Are you sure you want to remove this orphaned member from "%{source}"'),
-        {
-          source: source.name,
-        },
-      );
-    },
-  },
-};
-</script>
-
-<template>
-  <action-button-group>
-    <div v-if="permissions.canRemove" class="gl-px-1">
-      <leave-button v-if="isCurrentUser" :member="member" />
-      <remove-member-button
-        v-else
-        :member-id="member.id"
-        :message="message"
-        :title="s__('Member|Remove member')"
-      />
-    </div>
-    <div v-else-if="permissions.canOverride && !member.isOverridden" class="gl-px-1">
-      <ldap-override-button :member="member" />
-    </div>
-  </action-button-group>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/avatars/group_avatar.vue b/app/assets/javascripts/vue_shared/components/members/avatars/group_avatar.vue
deleted file mode 100644
index 12b748f9ab6..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/avatars/group_avatar.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script>
-import { GlAvatarLink, GlAvatarLabeled } from '@gitlab/ui';
-import { AVATAR_SIZE } from '../constants';
-
-export default {
-  name: 'GroupAvatar',
-  avatarSize: AVATAR_SIZE,
-  components: { GlAvatarLink, GlAvatarLabeled },
-  props: {
-    member: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    group() {
-      return this.member.sharedWithGroup;
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-avatar-link :href="group.webUrl">
-    <gl-avatar-labeled
-      :label="group.fullName"
-      :src="group.avatarUrl"
-      :alt="group.fullName"
-      :size="$options.avatarSize"
-      :entity-name="group.name"
-      :entity-id="group.id"
-    />
-  </gl-avatar-link>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/avatars/invite_avatar.vue b/app/assets/javascripts/vue_shared/components/members/avatars/invite_avatar.vue
deleted file mode 100644
index 28654a60860..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/avatars/invite_avatar.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script>
-import { GlAvatarLabeled } from '@gitlab/ui';
-import { AVATAR_SIZE } from '../constants';
-
-export default {
-  name: 'InviteAvatar',
-  avatarSize: AVATAR_SIZE,
-  components: { GlAvatarLabeled },
-  props: {
-    member: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    invite() {
-      return this.member.invite;
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-avatar-labeled
-    :label="invite.email"
-    :src="invite.avatarUrl"
-    :alt="invite.email"
-    :size="$options.avatarSize"
-    :entity-name="invite.email"
-    :entity-id="member.id"
-  />
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/avatars/user_avatar.vue b/app/assets/javascripts/vue_shared/components/members/avatars/user_avatar.vue
deleted file mode 100644
index e5e7cdf149c..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/avatars/user_avatar.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<script>
-import {
-  GlAvatarLink,
-  GlAvatarLabeled,
-  GlBadge,
-  GlSafeHtmlDirective as SafeHtml,
-} from '@gitlab/ui';
-import { generateBadges } from 'ee_else_ce/vue_shared/components/members/utils';
-import { __ } from '~/locale';
-import { AVATAR_SIZE } from '../constants';
-import { glEmojiTag } from '~/emoji';
-
-export default {
-  name: 'UserAvatar',
-  avatarSize: AVATAR_SIZE,
-  orphanedUserLabel: __('Orphaned member'),
-  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
-  components: {
-    GlAvatarLink,
-    GlAvatarLabeled,
-    GlBadge,
-  },
-  directives: {
-    SafeHtml,
-  },
-  props: {
-    member: {
-      type: Object,
-      required: true,
-    },
-    isCurrentUser: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  computed: {
-    user() {
-      return this.member.user;
-    },
-    badges() {
-      return generateBadges(this.member, this.isCurrentUser).filter(badge => badge.show);
-    },
-    statusEmoji() {
-      return this.user?.status?.emoji;
-    },
-  },
-  methods: {
-    glEmojiTag,
-  },
-};
-</script>
-
-<template>
-  <gl-avatar-link
-    v-if="user"
-    class="js-user-link"
-    :href="user.webUrl"
-    :data-user-id="user.id"
-    :data-username="user.username"
-  >
-    <gl-avatar-labeled
-      :label="user.name"
-      :sub-label="`@${user.username}`"
-      :src="user.avatarUrl"
-      :alt="user.name"
-      :size="$options.avatarSize"
-      :entity-name="user.name"
-      :entity-id="user.id"
-    >
-      <template #meta>
-        <div v-if="statusEmoji" class="gl-p-1">
-          <span v-safe-html:[$options.safeHtmlConfig]="glEmojiTag(statusEmoji)"></span>
-        </div>
-        <div v-for="badge in badges" :key="badge.text" class="gl-p-1">
-          <gl-badge size="sm" :variant="badge.variant">
-            {{ badge.text }}
-          </gl-badge>
-        </div>
-      </template>
-    </gl-avatar-labeled>
-  </gl-avatar-link>
-
-  <gl-avatar-labeled
-    v-else
-    :label="$options.orphanedUserLabel"
-    :alt="$options.orphanedUserLabel"
-    :size="$options.avatarSize"
-    :entity-name="$options.orphanedUserLabel"
-    :entity-id="member.id"
-  />
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/constants.js b/app/assets/javascripts/vue_shared/components/members/constants.js
deleted file mode 100644
index 5885420a122..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/constants.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { __ } from '~/locale';
-
-export const FIELDS = [
-  {
-    key: 'account',
-    label: __('Account'),
-  },
-  {
-    key: 'source',
-    label: __('Source'),
-    thClass: 'col-meta',
-    tdClass: 'col-meta',
-  },
-  {
-    key: 'granted',
-    label: __('Access granted'),
-    thClass: 'col-meta',
-    tdClass: 'col-meta',
-  },
-  {
-    key: 'invited',
-    label: __('Invited'),
-    thClass: 'col-meta',
-    tdClass: 'col-meta',
-  },
-  {
-    key: 'requested',
-    label: __('Requested'),
-    thClass: 'col-meta',
-    tdClass: 'col-meta',
-  },
-  {
-    key: 'expires',
-    label: __('Access expires'),
-    thClass: 'col-meta',
-    tdClass: 'col-meta',
-  },
-  {
-    key: 'maxRole',
-    label: __('Max role'),
-    thClass: 'col-max-role',
-    tdClass: 'col-max-role',
-  },
-  {
-    key: 'expiration',
-    label: __('Expiration'),
-    thClass: 'col-expiration',
-    tdClass: 'col-expiration',
-  },
-  {
-    key: 'actions',
-    thClass: 'col-actions',
-    tdClass: 'col-actions',
-    showFunction: 'showActionsField',
-  },
-];
-
-export const AVATAR_SIZE = 48;
-
-export const MEMBER_TYPES = {
-  user: 'user',
-  group: 'group',
-  invite: 'invite',
-  accessRequest: 'accessRequest',
-};
-
-export const DAYS_TO_EXPIRE_SOON = 7;
-
-export const LEAVE_MODAL_ID = 'member-leave-modal';
-
-export const REMOVE_GROUP_LINK_MODAL_ID = 'remove-group-link-modal-id';
diff --git a/app/assets/javascripts/vue_shared/components/members/modals/leave_modal.vue b/app/assets/javascripts/vue_shared/components/members/modals/leave_modal.vue
deleted file mode 100644
index 9a2ce0d4931..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/modals/leave_modal.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<script>
-import { mapState } from 'vuex';
-import { GlModal, GlForm, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
-import csrf from '~/lib/utils/csrf';
-import { __, s__, sprintf } from '~/locale';
-import { LEAVE_MODAL_ID } from '../constants';
-
-export default {
-  name: 'LeaveModal',
-  actionCancel: {
-    text: __('Cancel'),
-  },
-  actionPrimary: {
-    text: __('Leave'),
-    attributes: {
-      variant: 'danger',
-    },
-  },
-  csrf,
-  modalId: LEAVE_MODAL_ID,
-  modalContent: s__('Members|Are you sure you want to leave "%{source}"?'),
-  components: { GlModal, GlForm, GlSprintf },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    member: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapState(['memberPath']),
-    leavePath() {
-      return this.memberPath.replace(/:id$/, 'leave');
-    },
-    modalTitle() {
-      return sprintf(s__('Members|Leave "%{source}"'), { source: this.member.source.name });
-    },
-  },
-  methods: {
-    handlePrimary() {
-      this.$refs.form.$el.submit();
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-modal
-    v-bind="$attrs"
-    :modal-id="$options.modalId"
-    :title="modalTitle"
-    :action-primary="$options.actionPrimary"
-    :action-cancel="$options.actionCancel"
-    size="sm"
-    @primary="handlePrimary"
-  >
-    <gl-form ref="form" :action="leavePath" method="post">
-      <p>
-        <gl-sprintf :message="$options.modalContent">
-          <template #source>{{ member.source.name }}</template>
-        </gl-sprintf>
-      </p>
-
-      <input type="hidden" name="_method" value="delete" />
-      <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
-    </gl-form>
-  </gl-modal>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/modals/remove_group_link_modal.vue b/app/assets/javascripts/vue_shared/components/members/modals/remove_group_link_modal.vue
deleted file mode 100644
index e8890717724..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/modals/remove_group_link_modal.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script>
-import { mapState, mapActions } from 'vuex';
-import { GlModal, GlSprintf, GlForm } from '@gitlab/ui';
-import csrf from '~/lib/utils/csrf';
-import { __, s__, sprintf } from '~/locale';
-import { REMOVE_GROUP_LINK_MODAL_ID } from '../constants';
-
-export default {
-  name: 'RemoveGroupLinkModal',
-  actionCancel: {
-    text: __('Cancel'),
-  },
-  actionPrimary: {
-    text: s__('Members|Remove group'),
-    attributes: {
-      variant: 'danger',
-    },
-  },
-  csrf,
-  i18n: {
-    modalBody: s__('Members|Are you sure you want to remove "%{groupName}"?'),
-  },
-  modalId: REMOVE_GROUP_LINK_MODAL_ID,
-  components: { GlModal, GlSprintf, GlForm },
-  computed: {
-    ...mapState(['memberPath', 'groupLinkToRemove', 'removeGroupLinkModalVisible']),
-    groupLinkPath() {
-      return this.memberPath.replace(/:id$/, this.groupLinkToRemove?.id);
-    },
-    groupName() {
-      return this.groupLinkToRemove?.sharedWithGroup.fullName;
-    },
-    modalTitle() {
-      return sprintf(s__('Members|Remove "%{groupName}"'), { groupName: this.groupName });
-    },
-  },
-  methods: {
-    ...mapActions(['hideRemoveGroupLinkModal']),
-    handlePrimary() {
-      this.$refs.form.$el.submit();
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-modal
-    v-bind="$attrs"
-    :modal-id="$options.modalId"
-    :visible="removeGroupLinkModalVisible"
-    :title="modalTitle"
-    :action-primary="$options.actionPrimary"
-    :action-cancel="$options.actionCancel"
-    size="sm"
-    @primary="handlePrimary"
-    @hide="hideRemoveGroupLinkModal"
-  >
-    <gl-form ref="form" :action="groupLinkPath" method="post">
-      <p>
-        <gl-sprintf :message="$options.i18n.modalBody">
-          <template #groupName>{{ groupName }}</template>
-        </gl-sprintf>
-      </p>
-
-      <input type="hidden" name="_method" value="delete" />
-      <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
-    </gl-form>
-  </gl-modal>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/table/created_at.vue b/app/assets/javascripts/vue_shared/components/members/table/created_at.vue
deleted file mode 100644
index 0bad70894f9..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/table/created_at.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-import { GlSprintf } from '@gitlab/ui';
-import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-
-export default {
-  name: 'CreatedAt',
-  components: { GlSprintf, TimeAgoTooltip },
-  props: {
-    date: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    createdBy: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-  },
-  computed: {
-    showCreatedBy() {
-      return this.createdBy?.name && this.createdBy?.webUrl;
-    },
-  },
-};
-</script>
-
-<template>
-  <span>
-    <gl-sprintf v-if="showCreatedBy" :message="s__('Members|%{time} by %{user}')">
-      <template #time>
-        <time-ago-tooltip :time="date" />
-      </template>
-      <template #user>
-        <a :href="createdBy.webUrl">{{ createdBy.name }}</a>
-      </template>
-    </gl-sprintf>
-    <time-ago-tooltip v-else :time="date" />
-  </span>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/table/expiration_datepicker.vue b/app/assets/javascripts/vue_shared/components/members/table/expiration_datepicker.vue
deleted file mode 100644
index 0a8af81c1d1..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/table/expiration_datepicker.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<script>
-import { GlDatepicker } from '@gitlab/ui';
-import { mapActions } from 'vuex';
-import { getDateInFuture } from '~/lib/utils/datetime_utility';
-import { s__ } from '~/locale';
-
-export default {
-  name: 'ExpirationDatepicker',
-  components: { GlDatepicker },
-  props: {
-    member: {
-      type: Object,
-      required: true,
-    },
-    permissions: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      selectedDate: null,
-      busy: false,
-    };
-  },
-  computed: {
-    minDate() {
-      // Members expire at the beginning of the day.
-      // The first selectable day should be tomorrow.
-      const today = new Date();
-      const beginningOfToday = new Date(today.setHours(0, 0, 0, 0));
-
-      return getDateInFuture(beginningOfToday, 1);
-    },
-    disabled() {
-      return (
-        this.busy ||
-        !this.permissions.canUpdate ||
-        (this.permissions.canOverride && !this.member.isOverridden)
-      );
-    },
-  },
-  mounted() {
-    if (this.member.expiresAt) {
-      this.selectedDate = new Date(this.member.expiresAt);
-    }
-  },
-  methods: {
-    ...mapActions(['updateMemberExpiration']),
-    handleInput(date) {
-      this.busy = true;
-      this.updateMemberExpiration({
-        memberId: this.member.id,
-        expiresAt: date,
-      })
-        .then(() => {
-          this.$toast.show(s__('Members|Expiration date updated successfully.'));
-          this.busy = false;
-        })
-        .catch(() => {
-          this.busy = false;
-        });
-    },
-    handleClear() {
-      this.busy = true;
-
-      this.updateMemberExpiration({
-        memberId: this.member.id,
-        expiresAt: null,
-      })
-        .then(() => {
-          this.$toast.show(s__('Members|Expiration date removed successfully.'));
-          this.selectedDate = null;
-          this.busy = false;
-        })
-        .catch(() => {
-          this.busy = false;
-        });
-    },
-  },
-};
-</script>
-
-<template>
-  <!-- `:target="null"` allows the datepicker to be opened on focus -->
-  <!-- `:container="null"` renders the datepicker in the body to prevent conflicting CSS table styles -->
-  <gl-datepicker
-    v-model="selectedDate"
-    class="gl-max-w-full"
-    show-clear-button
-    :target="null"
-    :container="null"
-    :min-date="minDate"
-    :placeholder="__('Expiration date')"
-    :disabled="disabled"
-    @input="handleInput"
-    @clear="handleClear"
-  />
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/table/expires_at.vue b/app/assets/javascripts/vue_shared/components/members/table/expires_at.vue
deleted file mode 100644
index de65e3fb10f..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/table/expires_at.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script>
-import { GlSprintf, GlTooltipDirective } from '@gitlab/ui';
-import {
-  approximateDuration,
-  differenceInSeconds,
-  formatDate,
-  getDayDifference,
-} from '~/lib/utils/datetime_utility';
-import { DAYS_TO_EXPIRE_SOON } from '../constants';
-
-export default {
-  name: 'ExpiresAt',
-  components: { GlSprintf },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    date: {
-      type: String,
-      required: false,
-      default: null,
-    },
-  },
-  computed: {
-    noExpirationSet() {
-      return this.date === null;
-    },
-    parsed() {
-      return new Date(this.date);
-    },
-    differenceInSeconds() {
-      return differenceInSeconds(new Date(), this.parsed);
-    },
-    isExpired() {
-      return this.differenceInSeconds <= 0;
-    },
-    inWords() {
-      return approximateDuration(this.differenceInSeconds);
-    },
-    formatted() {
-      return formatDate(this.parsed);
-    },
-    expiresSoon() {
-      return getDayDifference(new Date(), this.parsed) < DAYS_TO_EXPIRE_SOON;
-    },
-    cssClass() {
-      return {
-        'gl-text-red-500': this.isExpired,
-        'gl-text-orange-500': this.expiresSoon,
-      };
-    },
-  },
-};
-</script>
-
-<template>
-  <span v-if="noExpirationSet">{{ s__('Members|No expiration set') }}</span>
-  <span v-else v-gl-tooltip.hover :title="formatted" :class="cssClass">
-    <template v-if="isExpired">{{ s__('Members|Expired') }}</template>
-    <gl-sprintf v-else :message="s__('Members|in %{time}')">
-      <template #time>
-        {{ inWords }}
-      </template>
-    </gl-sprintf>
-  </span>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/table/member_action_buttons.vue b/app/assets/javascripts/vue_shared/components/members/table/member_action_buttons.vue
deleted file mode 100644
index 320d8c99223..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/table/member_action_buttons.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script>
-import UserActionButtons from '../action_buttons/user_action_buttons.vue';
-import GroupActionButtons from '../action_buttons/group_action_buttons.vue';
-import InviteActionButtons from '../action_buttons/invite_action_buttons.vue';
-import AccessRequestActionButtons from '../action_buttons/access_request_action_buttons.vue';
-import { MEMBER_TYPES } from '../constants';
-
-export default {
-  name: 'MemberActionButtons',
-  components: {
-    UserActionButtons,
-    GroupActionButtons,
-    InviteActionButtons,
-    AccessRequestActionButtons,
-  },
-  props: {
-    member: {
-      type: Object,
-      required: true,
-    },
-    memberType: {
-      type: String,
-      required: true,
-    },
-    permissions: {
-      type: Object,
-      required: true,
-    },
-    isCurrentUser: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  computed: {
-    actionButtonComponent() {
-      const dictionary = {
-        [MEMBER_TYPES.user]: 'user-action-buttons',
-        [MEMBER_TYPES.group]: 'group-action-buttons',
-        [MEMBER_TYPES.invite]: 'invite-action-buttons',
-        [MEMBER_TYPES.accessRequest]: 'access-request-action-buttons',
-      };
-
-      return dictionary[this.memberType];
-    },
-  },
-};
-</script>
-
-<template>
-  <component
-    :is="actionButtonComponent"
-    v-if="actionButtonComponent"
-    :member="member"
-    :permissions="permissions"
-    :is-current-user="isCurrentUser"
-  />
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/table/member_avatar.vue b/app/assets/javascripts/vue_shared/components/members/table/member_avatar.vue
deleted file mode 100644
index a1f98d4008a..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/table/member_avatar.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-import { kebabCase } from 'lodash';
-import UserAvatar from '../avatars/user_avatar.vue';
-import InviteAvatar from '../avatars/invite_avatar.vue';
-import GroupAvatar from '../avatars/group_avatar.vue';
-
-export default {
-  name: 'MemberAvatar',
-  components: { UserAvatar, InviteAvatar, GroupAvatar, AccessRequestAvatar: UserAvatar },
-  props: {
-    memberType: {
-      type: String,
-      required: true,
-    },
-    isCurrentUser: {
-      type: Boolean,
-      required: true,
-    },
-    member: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    avatarComponent() {
-      // eslint-disable-next-line @gitlab/require-i18n-strings
-      return `${kebabCase(this.memberType)}-avatar`;
-    },
-  },
-};
-</script>
-
-<template>
-  <component :is="avatarComponent" :member="member" :is-current-user="isCurrentUser" />
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/table/member_source.vue b/app/assets/javascripts/vue_shared/components/members/table/member_source.vue
deleted file mode 100644
index 030d72c3420..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/table/member_source.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-import { GlTooltipDirective } from '@gitlab/ui';
-
-export default {
-  name: 'MemberSource',
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    memberSource: {
-      type: Object,
-      required: true,
-    },
-    isDirectMember: {
-      type: Boolean,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <span v-if="isDirectMember">{{ __('Direct member') }}</span>
-  <a v-else v-gl-tooltip.hover :title="__('Inherited')" :href="memberSource.webUrl">{{
-    memberSource.name
-  }}</a>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/table/members_table.vue b/app/assets/javascripts/vue_shared/components/members/table/members_table.vue
deleted file mode 100644
index a4f67caff31..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/table/members_table.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script>
-import { mapState } from 'vuex';
-import { GlTable, GlBadge } from '@gitlab/ui';
-import MembersTableCell from 'ee_else_ce/vue_shared/components/members/table/members_table_cell.vue';
-import {
-  canOverride,
-  canRemove,
-  canResend,
-  canUpdate,
-} from 'ee_else_ce/vue_shared/components/members/utils';
-import { FIELDS } from '../constants';
-import initUserPopovers from '~/user_popovers';
-import MemberAvatar from './member_avatar.vue';
-import MemberSource from './member_source.vue';
-import CreatedAt from './created_at.vue';
-import ExpiresAt from './expires_at.vue';
-import MemberActionButtons from './member_action_buttons.vue';
-import RoleDropdown from './role_dropdown.vue';
-import RemoveGroupLinkModal from '../modals/remove_group_link_modal.vue';
-import ExpirationDatepicker from './expiration_datepicker.vue';
-
-export default {
-  name: 'MembersTable',
-  components: {
-    GlTable,
-    GlBadge,
-    MemberAvatar,
-    CreatedAt,
-    ExpiresAt,
-    MembersTableCell,
-    MemberSource,
-    MemberActionButtons,
-    RoleDropdown,
-    RemoveGroupLinkModal,
-    ExpirationDatepicker,
-    LdapOverrideConfirmationModal: () =>
-      import(
-        'ee_component/vue_shared/components/members/ldap/ldap_override_confirmation_modal.vue'
-      ),
-  },
-  computed: {
-    ...mapState(['members', 'tableFields', 'tableAttrs', 'currentUserId', 'sourceId']),
-    filteredFields() {
-      return FIELDS.filter(field => this.tableFields.includes(field.key) && this.showField(field));
-    },
-    userIsLoggedIn() {
-      return this.currentUserId !== null;
-    },
-  },
-  mounted() {
-    initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
-  },
-  methods: {
-    showField(field) {
-      if (!Object.prototype.hasOwnProperty.call(field, 'showFunction')) {
-        return true;
-      }
-
-      return this[field.showFunction]();
-    },
-    showActionsField() {
-      if (!this.userIsLoggedIn) {
-        return false;
-      }
-
-      return this.members.some(member => {
-        return (
-          canRemove(member, this.sourceId) ||
-          canResend(member) ||
-          canUpdate(member, this.currentUserId, this.sourceId) ||
-          canOverride(member)
-        );
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-table
-      v-bind="tableAttrs.table"
-      class="members-table"
-      data-testid="members-table"
-      head-variant="white"
-      stacked="lg"
-      :fields="filteredFields"
-      :items="members"
-      primary-key="id"
-      thead-class="border-bottom"
-      :empty-text="__('No members found')"
-      show-empty
-      :tbody-tr-attr="tableAttrs.tr"
-    >
-      <template #cell(account)="{ item: member }">
-        <members-table-cell #default="{ memberType, isCurrentUser }" :member="member">
-          <member-avatar
-            :member-type="memberType"
-            :is-current-user="isCurrentUser"
-            :member="member"
-          />
-        </members-table-cell>
-      </template>
-
-      <template #cell(source)="{ item: member }">
-        <members-table-cell #default="{ isDirectMember }" :member="member">
-          <member-source :is-direct-member="isDirectMember" :member-source="member.source" />
-        </members-table-cell>
-      </template>
-
-      <template #cell(granted)="{ item: { createdAt, createdBy } }">
-        <created-at :date="createdAt" :created-by="createdBy" />
-      </template>
-
-      <template #cell(invited)="{ item: { createdAt, createdBy } }">
-        <created-at :date="createdAt" :created-by="createdBy" />
-      </template>
-
-      <template #cell(requested)="{ item: { createdAt } }">
-        <created-at :date="createdAt" />
-      </template>
-
-      <template #cell(expires)="{ item: { expiresAt } }">
-        <expires-at :date="expiresAt" />
-      </template>
-
-      <template #cell(maxRole)="{ item: member }">
-        <members-table-cell #default="{ permissions }" :member="member">
-          <role-dropdown v-if="permissions.canUpdate" :permissions="permissions" :member="member" />
-          <gl-badge v-else>{{ member.accessLevel.stringValue }}</gl-badge>
-        </members-table-cell>
-      </template>
-
-      <template #cell(expiration)="{ item: member }">
-        <members-table-cell #default="{ permissions }" :member="member">
-          <expiration-datepicker :permissions="permissions" :member="member" />
-        </members-table-cell>
-      </template>
-
-      <template #cell(actions)="{ item: member }">
-        <members-table-cell #default="{ memberType, isCurrentUser, permissions }" :member="member">
-          <member-action-buttons
-            :member-type="memberType"
-            :is-current-user="isCurrentUser"
-            :permissions="permissions"
-            :member="member"
-          />
-        </members-table-cell>
-      </template>
-
-      <template #head(actions)="{ label }">
-        <span data-testid="col-actions" class="gl-sr-only">{{ label }}</span>
-      </template>
-    </gl-table>
-    <remove-group-link-modal />
-    <ldap-override-confirmation-modal />
-  </div>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/table/members_table_cell.vue b/app/assets/javascripts/vue_shared/components/members/table/members_table_cell.vue
deleted file mode 100644
index 11e1aef9803..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/table/members_table_cell.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script>
-import { mapState } from 'vuex';
-import { MEMBER_TYPES } from '../constants';
-import { isGroup, isDirectMember, isCurrentUser, canRemove, canResend, canUpdate } from '../utils';
-
-export default {
-  name: 'MembersTableCell',
-  props: {
-    member: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapState(['sourceId', 'currentUserId']),
-    isGroup() {
-      return isGroup(this.member);
-    },
-    isInvite() {
-      return Boolean(this.member.invite);
-    },
-    isAccessRequest() {
-      return Boolean(this.member.requestedAt);
-    },
-    memberType() {
-      if (this.isGroup) {
-        return MEMBER_TYPES.group;
-      } else if (this.isInvite) {
-        return MEMBER_TYPES.invite;
-      } else if (this.isAccessRequest) {
-        return MEMBER_TYPES.accessRequest;
-      }
-
-      return MEMBER_TYPES.user;
-    },
-    isDirectMember() {
-      return isDirectMember(this.member, this.sourceId);
-    },
-    isCurrentUser() {
-      return isCurrentUser(this.member, this.currentUserId);
-    },
-    canRemove() {
-      return canRemove(this.member, this.sourceId);
-    },
-    canResend() {
-      return canResend(this.member);
-    },
-    canUpdate() {
-      return canUpdate(this.member, this.currentUserId, this.sourceId);
-    },
-  },
-  render() {
-    return this.$scopedSlots.default({
-      memberType: this.memberType,
-      isDirectMember: this.isDirectMember,
-      isCurrentUser: this.isCurrentUser,
-      permissions: {
-        canRemove: this.canRemove,
-        canResend: this.canResend,
-        canUpdate: this.canUpdate,
-      },
-    });
-  },
-};
-</script>
diff --git a/app/assets/javascripts/vue_shared/components/members/table/role_dropdown.vue b/app/assets/javascripts/vue_shared/components/members/table/role_dropdown.vue
deleted file mode 100644
index 6f6cae6072d..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/table/role_dropdown.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
-import { mapActions } from 'vuex';
-import { s__ } from '~/locale';
-
-export default {
-  name: 'RoleDropdown',
-  components: {
-    GlDropdown,
-    GlDropdownItem,
-    LdapDropdownItem: () =>
-      import('ee_component/vue_shared/components/members/ldap/ldap_dropdown_item.vue'),
-  },
-  props: {
-    member: {
-      type: Object,
-      required: true,
-    },
-    permissions: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      isDesktop: false,
-      busy: false,
-    };
-  },
-  computed: {
-    disabled() {
-      return this.busy || (this.permissions.canOverride && !this.member.isOverridden);
-    },
-  },
-  mounted() {
-    this.isDesktop = bp.isDesktop();
-
-    // Bootstrap Vue and GlDropdown to not support adding attributes to the dropdown toggle
-    // This can be changed once https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1060 is implemented
-    const dropdownToggle = this.$refs.glDropdown.$el.querySelector('.dropdown-toggle');
-
-    if (dropdownToggle) {
-      dropdownToggle.setAttribute('data-qa-selector', 'access_level_dropdown');
-    }
-  },
-  methods: {
-    ...mapActions(['updateMemberRole']),
-    handleSelect(value, name) {
-      if (value === this.member.accessLevel.integerValue) {
-        return;
-      }
-
-      this.busy = true;
-
-      this.updateMemberRole({
-        memberId: this.member.id,
-        accessLevel: { integerValue: value, stringValue: name },
-      })
-        .then(() => {
-          this.$toast.show(s__('Members|Role updated successfully.'));
-          this.busy = false;
-        })
-        .catch(() => {
-          this.busy = false;
-        });
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-dropdown
-    ref="glDropdown"
-    :right="!isDesktop"
-    :text="member.accessLevel.stringValue"
-    :header-text="__('Change permissions')"
-    :disabled="disabled"
-  >
-    <gl-dropdown-item
-      v-for="(value, name) in member.validRoles"
-      :key="value"
-      is-check-item
-      :is-checked="value === member.accessLevel.integerValue"
-      data-qa-selector="access_level_link"
-      @click="handleSelect(value, name)"
-    >
-      {{ name }}
-    </gl-dropdown-item>
-    <ldap-dropdown-item
-      v-if="permissions.canOverride && member.isOverridden"
-      :member-id="member.id"
-    />
-  </gl-dropdown>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/members/utils.js b/app/assets/javascripts/vue_shared/components/members/utils.js
deleted file mode 100644
index 4229a62c0a7..00000000000
--- a/app/assets/javascripts/vue_shared/components/members/utils.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { __ } from '~/locale';
-
-export const generateBadges = (member, isCurrentUser) => [
-  {
-    show: isCurrentUser,
-    text: __("It's you"),
-    variant: 'success',
-  },
-  {
-    show: member.user?.blocked,
-    text: __('Blocked'),
-    variant: 'danger',
-  },
-  {
-    show: member.user?.twoFactorEnabled,
-    text: __('2FA'),
-    variant: 'info',
-  },
-];
-
-export const isGroup = member => {
-  return Boolean(member.sharedWithGroup);
-};
-
-export const isDirectMember = (member, sourceId) => {
-  return isGroup(member) || member.source?.id === sourceId;
-};
-
-export const isCurrentUser = (member, currentUserId) => {
-  return member.user?.id === currentUserId;
-};
-
-export const canRemove = (member, sourceId) => {
-  return isDirectMember(member, sourceId) && member.canRemove;
-};
-
-export const canResend = member => {
-  return Boolean(member.invite?.canResend);
-};
-
-export const canUpdate = (member, currentUserId, sourceId) => {
-  return (
-    !isCurrentUser(member, currentUserId) && isDirectMember(member, sourceId) && member.canUpdate
-  );
-};
-
-// Defined in `ee/app/assets/javascripts/vue_shared/components/members/utils.js`
-export const canOverride = () => false;
diff --git a/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue b/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue
index c12012d8419..ad6f6e0e2e3 100644
--- a/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue
@@ -88,7 +88,7 @@ export default {
 };
 </script>
 <template>
-  <div class="issuable-note-warning">
+  <div class="issuable-note-warning" data-testid="confidential-warning">
     <gl-icon v-if="!isLockedAndConfidential" :name="warningIcon" :size="16" class="icon inline" />
 
     <span v-if="isLockedAndConfidential" ref="lockedAndConfidential">
diff --git a/app/assets/javascripts/vue_shared/components/pikaday.vue b/app/assets/javascripts/vue_shared/components/pikaday.vue
index 8104d919bf6..85481f3f7b4 100644
--- a/app/assets/javascripts/vue_shared/components/pikaday.vue
+++ b/app/assets/javascripts/vue_shared/components/pikaday.vue
@@ -1,10 +1,14 @@
 <script>
 import Pikaday from 'pikaday';
+import { GlIcon } from '@gitlab/ui';
 import { parsePikadayDate, pikadayToString } from '~/lib/utils/datetime_utility';
 import { __ } from '~/locale';
 
 export default {
   name: 'DatePicker',
+  components: {
+    GlIcon,
+  },
   props: {
     label: {
       type: String,
@@ -66,7 +70,7 @@ export default {
     <div class="dropdown open">
       <button type="button" class="dropdown-menu-toggle" data-toggle="dropdown" @click="toggled">
         <span class="dropdown-toggle-text"> {{ label }} </span>
-        <i class="fa fa-chevron-down" aria-hidden="true"> </i>
+        <gl-icon name="chevron-down" class="gl-absolute gl-right-3 gl-top-3 gl-text-gray-500" />
       </button>
     </div>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue b/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue
index 9eacf74bba8..fe50a459e52 100644
--- a/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue
+++ b/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue
@@ -105,6 +105,8 @@ export default {
       registerHTMLToMarkdownRenderer(editorApi);
 
       this.addListeners(editorApi);
+
+      this.$emit('load', { formattedMarkdown: editorApi.getMarkdown() });
     },
     onOpenAddImageModal() {
       this.$refs.addImageModal.show();
diff --git a/app/assets/javascripts/vue_shared/components/select2_select.vue b/app/assets/javascripts/vue_shared/components/select2_select.vue
index c90bd4da6c2..3dbf0ccdfa9 100644
--- a/app/assets/javascripts/vue_shared/components/select2_select.vue
+++ b/app/assets/javascripts/vue_shared/components/select2_select.vue
@@ -1,6 +1,7 @@
 <script>
 import $ from 'jquery';
 import 'select2';
+import { loadCSSFile } from '~/lib/utils/css_utils';
 
 export default {
   // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
@@ -20,10 +21,14 @@ export default {
   },
 
   mounted() {
-    $(this.$refs.dropdownInput)
-      .val(this.value)
-      .select2(this.options)
-      .on('change', event => this.$emit('input', event.target.value));
+    loadCSSFile(gon.select2_css_path)
+      .then(() => {
+        $(this.$refs.dropdownInput)
+          .val(this.value)
+          .select2(this.options)
+          .on('change', event => this.$emit('input', event.target.value));
+      })
+      .catch(() => {});
   },
 
   beforeDestroy() {
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue
index 7b2802650a2..4f505b9e678 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue
@@ -16,7 +16,7 @@ export default {
       type="button"
       class="dropdown-title-button dropdown-menu-close gl-ml-auto"
     >
-      <gl-icon name="close" aria-hidden="true" class="dropdown-menu-close-icon" />
+      <gl-icon name="close" class="dropdown-menu-close-icon" />
     </button>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
index 2f71907f772..8ce624aa303 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
@@ -105,6 +105,11 @@ export default {
       required: false,
       default: __('Manage group labels'),
     },
+    isEditing: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -131,6 +136,11 @@ export default {
     showDropdownContents(showDropdownContents) {
       this.setContentIsOnViewport(showDropdownContents);
     },
+    isEditing(newVal) {
+      if (newVal) {
+        this.toggleDropdownContents();
+      }
+    },
   },
   mounted() {
     this.setInitialState({
diff --git a/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue b/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue
index 579ad53e6db..b48dfa8b452 100644
--- a/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue
+++ b/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue
@@ -1,6 +1,7 @@
 <script>
 import { isFunction } from 'lodash';
 import tooltip from '../directives/tooltip';
+import { hasHorizontalOverflow } from '~/lib/utils/dom_utils';
 
 export default {
   directives: {
@@ -49,7 +50,7 @@ export default {
     },
     updateTooltip() {
       const target = this.selectTarget();
-      this.showTooltip = Boolean(target && target.scrollWidth > target.offsetWidth);
+      this.showTooltip = hasHorizontalOverflow(target);
     },
   },
 };
-- 
cgit v1.2.3