Add latest changes from gitlab-org/gitlab@master

4 files changed, 16 insertions, 30 deletions

diff --git a/app/assets/javascripts/issues/constants.js b/app/assets/javascripts/issues/constants.js
index 80344efc44c..3d8017e6e07 100644
--- a/app/assets/javascripts/issues/constants.js
+++ b/app/assets/javascripts/issues/constants.js
@@ -28,7 +28,7 @@ export const issuableStatusText = {
   [STATUS_LOCKED]: __('Open'),
 };
 
-export const IssuableTypeText = {
+export const issuableTypeText = {
   [TYPE_ISSUE]: __('issue'),
   [TYPE_EPIC]: __('epic'),
   [TYPE_MERGE_REQUEST]: __('merge request'),
diff --git a/app/assets/javascripts/issues/show/components/header_actions.vue b/app/assets/javascripts/issues/show/components/header_actions.vue
index 81e5c30a264..ae5b4350512 100644
--- a/app/assets/javascripts/issues/show/components/header_actions.vue
+++ b/app/assets/javascripts/issues/show/components/header_actions.vue
@@ -14,7 +14,7 @@ import * as Sentry from '@sentry/browser';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { createAlert, VARIANT_SUCCESS } from '~/alert';
 import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
-import { STATUS_CLOSED, TYPE_ISSUE, IssuableTypeText } from '~/issues/constants';
+import { STATUS_CLOSED, TYPE_ISSUE, issuableTypeText } from '~/issues/constants';
 import {
   ISSUE_STATE_EVENT_CLOSE,
   ISSUE_STATE_EVENT_REOPEN,
@@ -138,7 +138,7 @@ export default {
     issueTypeText() {
       const { issueType } = this;
 
-      return IssuableTypeText[issueType] ?? issueType;
+      return issuableTypeText[issueType] ?? issueType;
     },
     buttonText() {
       return this.isClosed
diff --git a/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue b/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue
index f7a324d9f3f..1e5eb53e220 100644
--- a/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue
+++ b/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue
@@ -4,7 +4,7 @@ import { s__, sprintf } from '~/locale';
 import { getCookie, parseBoolean, setCookie } from '~/lib/utils/common_utils';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { NEW_ACTIONS_POPOVER_KEY } from '~/issues/show/constants';
-import { IssuableTypeText } from '~/issues/constants';
+import { issuableTypeText } from '~/issues/constants';
 
 export default {
   name: 'NewHeaderActionsPopover',
@@ -34,7 +34,7 @@ export default {
   computed: {
     popoverText() {
       return sprintf(this.$options.i18n.popoverText, {
-        issueType: IssuableTypeText[this.issueType],
+        issueType: issuableTypeText[this.issueType],
       });
     },
     showPopover() {
diff --git a/app/assets/javascripts/issues/show/components/sticky_header.vue b/app/assets/javascripts/issues/show/components/sticky_header.vue
index b8e0937d51c..738bb2c2aa0 100644
--- a/app/assets/javascripts/issues/show/components/sticky_header.vue
+++ b/app/assets/javascripts/issues/show/components/sticky_header.vue
@@ -1,5 +1,7 @@
 <script>
-import { GlBadge, GlIcon, GlIntersectionObserver, GlTooltipDirective } from '@gitlab/ui';
+import { GlBadge, GlIcon, GlIntersectionObserver, GlLink } from '@gitlab/ui';
+import HiddenBadge from '~/issuable/components/hidden_badge.vue';
+import LockedBadge from '~/issuable/components/locked_badge.vue';
 import {
   issuableStatusText,
   STATUS_CLOSED,
@@ -15,9 +17,9 @@ export default {
     GlBadge,
     GlIcon,
     GlIntersectionObserver,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
+    GlLink,
+    HiddenBadge,
+    LockedBadge,
   },
   props: {
     isConfidential: {
@@ -88,36 +90,20 @@ export default {
             <gl-icon :name="statusIcon" />
             <span class="gl-display-none gl-sm-display-block gl-ml-2">{{ statusText }}</span>
           </gl-badge>
-          <span
-            v-if="isLocked"
-            v-gl-tooltip.bottom
-            data-testid="locked"
-            class="issuable-warning-icon"
-            :title="__('This issue is locked. Only project members can comment.')"
-          >
-            <gl-icon name="lock" :aria-label="__('Locked')" />
-          </span>
           <confidentiality-badge
             v-if="isConfidential"
             :issuable-type="issuableType"
             :workspace-type="$options.WORKSPACE_PROJECT"
           />
-          <span
-            v-if="isHidden"
-            v-gl-tooltip.bottom
-            :title="__('This issue is hidden because its author has been banned')"
-            data-testid="hidden"
-            class="issuable-warning-icon"
-          >
-            <gl-icon name="spam" />
-          </span>
-          <a
+          <locked-badge v-if="isLocked" :issuable-type="issuableType" />
+          <hidden-badge v-if="isHidden" :issuable-type="issuableType" />
+          <gl-link
+            class="gl-font-weight-bold gl-text-black-normal gl-text-truncate"
             href="#top"
-            class="gl-font-weight-bold gl-overflow-hidden gl-white-space-nowrap gl-text-overflow-ellipsis gl-my-0 gl-text-black-normal"
             :title="title"
           >
             {{ title }}
-          </a>
+          </gl-link>
         </div>
       </div>
     </transition>