Add locked and confidential badge to issue sticky header

The normal issue header shows locked and confidential badges
when the issue has those properties. This information is
missing from the sticky header which this commit adds.

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,
@@ -453,6 +463,12 @@ export default {
                 <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"

app/assets/javascripts/issue_show/issue.js

@@ -17,6 +17,8 @@ export function initIssuableApp(issuableData, store) {
       return createElement(IssuableApp, {
         props: {
           ...issuableData,
+          isConfidential: this.getNoteableData?.confidential,
+          isLocked: this.getNoteableData?.discussion_locked,
           issuableStatus: this.getNoteableData?.state,
         },
       });

app/assets/stylesheets/pages/issuable.scss

 .issuable-warning-icon {
   background-color: $orange-50;
   border-radius: $border-radius-default;
+  color: $orange-600;
   width: $issuable-warning-size;
   height: $issuable-warning-size;
   text-align: center;
   margin-right: $issuable-warning-icon-margin;
   line-height: $gl-line-height-24;
-
-  .icon {
-    fill: $orange-600;
-    vertical-align: text-bottom;
-  }
 }
 
 .limit-container-width {

changelogs/unreleased/250484-add-locked-and-confidential-badge-to-issue-sticky-header.yml

+---
+title: Add locked and confidential badge to issue sticky header
+merge_request: 46996
+author:
+type: added

spec/frontend/issue_show/components/app_spec.js

@@ -17,6 +17,7 @@ import {
 import IncidentTabs from '~/issue_show/components/incidents/incident_tabs.vue';
 import DescriptionComponent from '~/issue_show/components/description.vue';
 import PinnedLinks from '~/issue_show/components/pinned_links.vue';
+import { IssuableStatus, IssuableStatusText } from '~/issue_show/constants';
 
 function formatText(text) {
   return text.trim().replace(/\s\s+/g, ' ');
@@ -36,6 +37,10 @@ describe('Issuable output', () => {
 
   const findStickyHeader = () => wrapper.find('[data-testid="issue-sticky-header"]');
 
+  const findLockedBadge = () => wrapper.find('[data-testid="locked"]');
+
+  const findConfidentialBadge = () => wrapper.find('[data-testid="confidential"]');
+
   const mountComponent = (props = {}, options = {}) => {
     wrapper = mount(IssuableApp, {
       propsData: { ...appProps, ...props },
@@ -532,7 +537,7 @@ describe('Issuable output', () => {
   describe('sticky header', () => {
     describe('when title is in view', () => {
       it('is not shown', () => {
-        expect(wrapper.find('.issue-sticky-header').exists()).toBe(false);
+        expect(findStickyHeader().exists()).toBe(false);
       });
     });
 
@@ -542,24 +547,45 @@ describe('Issuable output', () => {
         wrapper.find(GlIntersectionObserver).vm.$emit('disappear');
       });
 
-      it('is shown with title', () => {
+      it('shows with title', () => {
         expect(findStickyHeader().text()).toContain('Sticky header title');
       });
 
-      it('is shown with Open when status is opened', () => {
-        wrapper.setProps({ issuableStatus: 'opened' });
+      it.each`
+        title                                        | state
+        ${'shows with Open when status is opened'}   | ${IssuableStatus.Open}
+        ${'shows with Closed when status is closed'} | ${IssuableStatus.Closed}
+        ${'shows with Open when status is reopened'} | ${IssuableStatus.Reopened}
+      `('$title', async ({ state }) => {
+        wrapper.setProps({ issuableStatus: state });
 
-        return wrapper.vm.$nextTick(() => {
-          expect(findStickyHeader().text()).toContain('Open');
-        });
+        await wrapper.vm.$nextTick();
+
+        expect(findStickyHeader().text()).toContain(IssuableStatusText[state]);
       });
 
-      it('is shown with Closed when status is closed', () => {
-        wrapper.setProps({ issuableStatus: 'closed' });
+      it.each`
+        title                                                                | isConfidential
+        ${'does not show confidential badge when issue is not confidential'} | ${true}
+        ${'shows confidential badge when issue is confidential'}             | ${false}
+      `('$title', async ({ isConfidential }) => {
+        wrapper.setProps({ isConfidential });
 
-        return wrapper.vm.$nextTick(() => {
-          expect(findStickyHeader().text()).toContain('Closed');
-        });
+        await wrapper.vm.$nextTick();
+
+        expect(findConfidentialBadge().exists()).toBe(isConfidential);
+      });
+
+      it.each`
+        title                                                    | isLocked
+        ${'does not show locked badge when issue is not locked'} | ${true}
+        ${'shows locked badge when issue is locked'}             | ${false}
+      `('$title', async ({ isLocked }) => {
+        wrapper.setProps({ isLocked });
+
+        await wrapper.vm.$nextTick();
+
+        expect(findLockedBadge().exists()).toBe(isLocked);
       });
     });
   });