1 files changed, 27 insertions, 7 deletions

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 22db0f1cfc1..61e5db0970a 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -136,6 +136,16 @@ export default {
       type: String,
       required: true,
     },
+    isConfidential: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isLocked: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     issuableType: {
       type: String,
       required: false,
@@ -217,8 +227,8 @@ export default {
     defaultErrorMessage() {
       return sprintf(s__('Error updating %{issuableType}'), { issuableType: this.issuableType });
     },
-    isOpenStatus() {
-      return this.issuableStatus === IssuableStatus.Open;
+    isClosed() {
+      return this.issuableStatus === IssuableStatus.Closed;
     },
     pinnedLinkClasses() {
       return this.showTitleBorder
@@ -226,13 +236,13 @@ export default {
         : '';
     },
     statusIcon() {
-      return this.isOpenStatus ? 'issue-open-m' : 'mobile-issue-close';
+      return this.isClosed ? 'mobile-issue-close' : 'issue-open-m';
     },
     statusText() {
       return IssuableStatusText[this.issuableStatus];
     },
     shouldShowStickyHeader() {
-      return this.isStickyHeaderShowing && this.issuableType === IssuableType.Issue;
+      return this.issuableType === IssuableType.Issue;
     },
   },
   created() {
@@ -432,10 +442,14 @@ export default {
         :show-inline-edit-button="showInlineEditButton"
       />
 
-      <gl-intersection-observer @appear="hideStickyHeader" @disappear="showStickyHeader">
+      <gl-intersection-observer
+        v-if="shouldShowStickyHeader"
+        @appear="hideStickyHeader"
+        @disappear="showStickyHeader"
+      >
         <transition name="issuable-header-slide">
           <div
-            v-if="shouldShowStickyHeader"
+            v-if="isStickyHeaderShowing"
             class="issue-sticky-header gl-fixed gl-z-index-3 gl-bg-white gl-border-1 gl-border-b-solid gl-border-b-gray-100 gl-py-3"
             data-testid="issue-sticky-header"
           >
@@ -444,11 +458,17 @@ export default {
             >
               <p
                 class="issuable-status-box status-box gl-my-0"
-                :class="[isOpenStatus ? 'status-box-open' : 'status-box-issue-closed']"
+                :class="[isClosed ? 'status-box-issue-closed' : 'status-box-open']"
               >
                 <gl-icon :name="statusIcon" class="gl-display-block d-sm-none gl-h-6!" />
                 <span class="gl-display-none d-sm-block">{{ statusText }}</span>
               </p>
+              <span v-if="isLocked" data-testid="locked" class="issuable-warning-icon">
+                <gl-icon name="lock" :aria-label="__('Locked')" />
+              </span>
+              <span v-if="isConfidential" data-testid="confidential" class="issuable-warning-icon">
+                <gl-icon name="eye-slash" :aria-label="__('Confidential')" />
+              </span>
               <p
                 class="gl-font-weight-bold gl-overflow-hidden gl-white-space-nowrap gl-text-overflow-ellipsis gl-my-0"
                 :title="state.titleText"