Add latest changes from gitlab-org/gitlab@master

1 files changed, 18 insertions, 3 deletions

diff --git a/app/assets/javascripts/vue_shared/components/confidentiality_badge.vue b/app/assets/javascripts/vue_shared/components/confidentiality_badge.vue
index 447820471b3..025e38a55ad 100644
--- a/app/assets/javascripts/vue_shared/components/confidentiality_badge.vue
+++ b/app/assets/javascripts/vue_shared/components/confidentiality_badge.vue
@@ -1,10 +1,11 @@
 <script>
-import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
+import { GlBadge, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { confidentialityInfoText } from '../constants';
 
 export default {
   components: {
     GlBadge,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -18,17 +19,31 @@ export default {
       type: String,
       required: true,
     },
+    hideTextInSmallScreens: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     confidentialTooltip() {
       return confidentialityInfoText(this.workspaceType, this.issuableType);
     },
+    confidentialTextClass() {
+      return {
+        'gl-display-none gl-sm-display-block': this.hideTextInSmallScreens,
+        'gl-ml-2': true,
+      };
+    },
   },
 };
 </script>
 
 <template>
-  <gl-badge v-gl-tooltip icon="eye-slash" :title="confidentialTooltip" variant="warning">
-    {{ __('Confidential') }}
+  <gl-badge v-gl-tooltip :title="confidentialTooltip" variant="warning">
+    <gl-icon name="eye-slash" :size="16" />
+    <span data-testid="confidential-badge-text" :class="confidentialTextClass">{{
+      __('Confidential')
+    }}</span>
   </gl-badge>
 </template>