Hide "Health status" edit button when the user has no permission'

ee/app/assets/javascripts/sidebar/components/status/sidebar_status.vue

@@ -36,7 +36,8 @@ export default {
 
 <template>
   <status
-    :is-editable="mediator.store.editable && isOpen"
+    :is-open="isOpen"
+    :is-editable="mediator.store.editable"
     :is-fetching="mediator.store.isFetching.status"
     :status="mediator.store.status"
     @onDropdownClick="handleDropdownClick"

ee/app/assets/javascripts/sidebar/components/status/status.vue

@@ -26,6 +26,11 @@ export default {
   },
   mixins: [Tracking.mixin()],
   props: {
+    isOpen: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     isEditable: {
       type: Boolean,
       required: false,
@@ -74,7 +79,7 @@ export default {
       };
     },
     editTooltip() {
-      const tooltipText = !this.isEditable
+      const tooltipText = !this.isOpen
         ? s__('Health status cannot be edited because this issue is closed')
         : '';
 
@@ -147,12 +152,17 @@ export default {
     <div class="hide-collapsed">
       <p class="title gl-display-flex justify-content-between">
         <span data-testid="statusTitle">{{ s__('Sidebar|Health status') }}</span>
-        <span v-gl-tooltip.topleft="editTooltip" data-testid="editButtonTooltip" tabindex="0">
+        <span
+          v-if="isEditable"
+          v-gl-tooltip.topleft="editTooltip"
+          data-testid="editButtonTooltip"
+          tabindex="0"
+        >
           <gl-button
             ref="editButton"
             variant="link"
             class="edit-link btn-link-hover gl-text-black-normal!"
-            :disabled="!isEditable"
+            :disabled="!isOpen"
             @click.stop="toggleFormDropdown"
             @keydown.esc="hideDropdown"
           >

ee/changelogs/unreleased/273156-hide-health-status-tooltip-when-no-permission.yml

+---
+title: Hide "Health status" edit button when the user has no permission
+merge_request: 49535
+author: Kev @KevSlashNull
+type: fixed

ee/spec/frontend/sidebar/components/status/sidebar_status_spec.js

@@ -39,7 +39,11 @@ describe('SidebarStatus', () => {
 
   beforeEach(() => {
     createMediator();
-    createWrapper();
+    createWrapper({
+      getters: {
+        getNoteableData: {},
+      },
+    });
   });
 
   afterEach(() => {

ee/spec/frontend/sidebar/components/status/status_spec.js

@@ -76,32 +76,65 @@ describe('Status', () => {
   });
 
   describe('edit button', () => {
-    it('is displayed when user can edit', () => {
+    it('is displayed when user can edit and the issue is open', () => {
       const props = {
         isEditable: true,
+        isOpen: true,
       };
 
       shallowMountStatus(props);
 
       expect(getEditButton(wrapper).exists()).toBe(true);
+      expect(getEditButton(wrapper).props().disabled).toBe(false);
     });
 
-    describe('when disabled', () => {
+    describe('when closed and user does not have permission', () => {
       beforeEach(() => {
         const props = {
           isEditable: false,
+          isOpen: false,
         };
 
         shallowMountStatus(props);
       });
-      it('is disabled when user cannot edit', () => {
-        expect(getEditButton(wrapper).attributes().disabled).toBe('true');
+
+      it('does not render the edit button', () => {
+        expect(getEditButton(wrapper).exists()).toBe(false);
+      });
+    });
+
+    describe('when closed and user has permission', () => {
+      beforeEach(() => {
+        const props = {
+          isEditable: true,
+          isOpen: false,
+        };
+
+        shallowMountStatus(props);
       });
 
       it('will render a tooltip with an informative message', () => {
         const tooltipTitle = 'Health status cannot be edited because this issue is closed';
         expect(getEditButtonTooltipValue(wrapper).title).toBe(tooltipTitle);
       });
+
+      it('is disabled', () => {
+        expect(getEditButton(wrapper).props().disabled).toBe(true);
+      });
+    });
+
+    describe('when the user does not have permission', () => {
+      beforeEach(() => {
+        const props = {
+          isEditable: false,
+        };
+
+        shallowMountStatus(props);
+      });
+
+      it('does not render the edit button', () => {
+        expect(getEditButton(wrapper).exists()).toBe(false);
+      });
     });
   });
 
@@ -198,6 +231,7 @@ describe('Status', () => {
       beforeEach(() => {
         const props = {
           isEditable: true,
+          isOpen: true,
         };
 
         mountStatus(props);
@@ -215,6 +249,7 @@ describe('Status', () => {
       beforeEach(() => {
         const props = {
           isEditable: true,
+          isOpen: true,
         };
 
         mountStatus(props);