Fix sticky header issue status not syncing

If a user closes an open issue or vice versa, the sticky header
state does not update. This commit fixes this.

app/assets/javascripts/issue_show/components/app.vue

@@ -217,8 +217,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 +226,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 +432,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,7 +448,7 @@ 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>

app/assets/javascripts/issue_show/constants.js

 import { __ } from '~/locale';
 
 export const IssuableStatus = {
-  Open: 'opened',
   Closed: 'closed',
+  Open: 'opened',
+  Reopened: 'reopened',
 };
 
 export const IssuableStatusText = {
-  [IssuableStatus.Open]: __('Open'),
   [IssuableStatus.Closed]: __('Closed'),
+  [IssuableStatus.Open]: __('Open'),
+  [IssuableStatus.Reopened]: __('Open'),
 };
 
 export const IssuableType = {

app/assets/javascripts/issue_show/issue.js

 import Vue from 'vue';
-import issuableApp from './components/app.vue';
+import { mapGetters } from 'vuex';
+import IssuableApp from './components/app.vue';
 
-export default function initIssuableApp(issuableData) {
+export default function initIssuableApp(issuableData, store) {
   return new Vue({
     el: document.getElementById('js-issuable-app'),
-    components: {
-      issuableApp,
+    store,
+    computed: {
+      ...mapGetters(['getNoteableData']),
     },
     render(createElement) {
-      return createElement('issuable-app', {
-        props: issuableData,
+      return createElement(IssuableApp, {
+        props: {
+          ...issuableData,
+          issuableStatus: this.getNoteableData?.state,
+        },
       });
     },
   });

app/assets/javascripts/pages/projects/issues/show.js

@@ -24,7 +24,7 @@ export default function() {
       initIncidentApp(issuableData);
       break;
     case IssuableType.Issue:
-      initIssueApp(issuableData);
+      initIssueApp(issuableData, store);
       break;
     default:
       break;

app/helpers/issuables_helper.rb

@@ -275,7 +275,6 @@ module IssuablesHelper
       canUpdate: can?(current_user, :"update_#{issuable.to_ability_name}", issuable),
       canDestroy: can?(current_user, :"destroy_#{issuable.to_ability_name}", issuable),
       issuableRef: issuable.to_reference,
-      issuableStatus: issuable.state,
       markdownPreviewPath: preview_markdown_path(parent),
       markdownDocsPath: help_page_path('user/markdown'),
       lockVersion: issuable.lock_version,

changelogs/unreleased/252137-sync-sticky-header-issue-status.yml

+---
+title: Fix sticky header issue status not syncing
+merge_request: 45895
+author:
+type: fixed

ee/spec/helpers/ee/issuables_helper_spec.rb

@@ -27,7 +27,6 @@ RSpec.describe IssuablesHelper do
           canDestroy: true,
           canAdmin: true,
           issuableRef: "&#{epic.iid}",
-          issuableStatus: "opened",
           markdownPreviewPath: "/groups/#{@group.full_path}/preview_markdown",
           markdownDocsPath: '/help/user/markdown',
           issuableTemplateNamesPath: '',

spec/frontend/issue_show/issue_spec.js

@@ -5,6 +5,7 @@ import axios from '~/lib/utils/axios_utils';
 import initIssuableApp from '~/issue_show/issue';
 import * as parseData from '~/issue_show/utils/parse_data';
 import { appProps } from './mock_data';
+import createStore from '~/notes/stores';
 
 const mock = new MockAdapter(axios);
 mock.onGet().reply(200);
@@ -30,7 +31,7 @@ describe('Issue show index', () => {
       });
 
       const issuableData = parseData.parseIssuableData();
-      initIssuableApp(issuableData);
+      initIssuableApp(issuableData, createStore());
 
       await waitForPromises();