1 files changed, 21 insertions, 6 deletions
diff --git a/app/assets/javascripts/issuable/components/issuable_header_warnings.vue b/app/assets/javascripts/issuable/components/issuable_header_warnings.vue
index 82223ab9ef4..06d1a2ee233 100644
--- a/app/assets/javascripts/issuable/components/issuable_header_warnings.vue
+++ b/app/assets/javascripts/issuable/components/issuable_header_warnings.vue
@@ -2,14 +2,21 @@
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import { __ } from '~/locale';
+import { IssuableType, WorkspaceType } from '~/issues/constants';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue';
 
 export default {
+  WorkspaceType,
+  IssuableType,
   components: {
     GlIcon,
+    ConfidentialityBadge,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: ['hidden'],
   computed: {
     ...mapGetters(['getNoteableData']),
@@ -19,6 +26,9 @@ export default {
     isConfidential() {
       return this.getNoteableData.confidential;
     },
+    isMergeRequest() {
+      return this.getNoteableData.targetType === 'merge_request' && this.glFeatures.updatedMrHeader;
+    },
     warningIconsMeta() {
       return [
         {
@@ -27,11 +37,6 @@ export default {
           dataTestId: 'locked',
         },
         {
-          iconName: 'eye-slash',
-          visible: this.isConfidential,
-          dataTestId: 'confidential',
-        },
-        {
           iconName: 'spam',
           visible: this.hidden,
           dataTestId: 'hidden',
@@ -45,6 +50,12 @@ export default {
 
 <template>
   <div class="gl-display-inline-block">
+    <confidentiality-badge
+      v-if="isConfidential"
+      data-testid="confidential"
+      :workspace-type="$options.WorkspaceType.project"
+      :issuable-type="$options.IssuableType.Issue"
+    />
     <template v-for="meta in warningIconsMeta">
       <div
         v-if="meta.visible"
@@ -52,7 +63,11 @@ export default {
         v-gl-tooltip
         :data-testid="meta.dataTestId"
         :title="meta.tooltip || null"
-        class="issuable-warning-icon inline"
+        :class="{
+          'gl-mr-3 gl-mt-2 gl-display-flex gl-justify-content-center gl-align-items-center': isMergeRequest,
+          'gl-display-inline-block': !isMergeRequest,
+        }"
+        class="issuable-warning-icon"
       >
         <gl-icon :name="meta.iconName" class="icon" />
       </div>