Add ability to remove health status

Added the ability to remove the health status
in the issue sidebar

doc/user/project/issues/index.md

@@ -168,15 +168,15 @@ requires [GraphQL](../../../api/graphql/index.md) to be enabled.
 
 ### Status **(ULTIMATE)**
 
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/issues/36427) in [GitLab Ultimate](https://about.gitlab.com/pricing/) 12.9.
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/issues/36427) in [GitLab Ultimate](https://about.gitlab.com/pricing/) 12.10.
 
 To help you track the status of your issues, you can assign a status to each issue to flag work that's progressing as planned or needs attention to keep on schedule:
 
-- `On track` (green)
-- `Needs attention` (amber)
-- `At risk` (red)
+- **On track** (green)
+- **Needs attention** (amber)
+- **At risk** (red)
 
-!["On track" health status on an issue](img/issue_health_status_v12_9.png)
+!["On track" health status on an issue](img/issue_health_status_v12_10.png)
 
 ---
 

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

@@ -47,6 +47,9 @@ export default {
     };
   },
   computed: {
+    canRemoveStatus() {
+      return this.isEditable && this.status;
+    },
     statusText() {
       return this.status ? healthStatusTextMap[this.status] : s__('Sidebar|None');
     },
@@ -80,6 +83,9 @@ export default {
     toggleFormDropdown() {
       this.isFormShowing = !this.isFormShowing;
     },
+    removeStatus() {
+      this.$emit('onFormSubmit', null);
+    },
   },
 };
 </script>
@@ -148,6 +154,12 @@ export default {
           :class="statusColor"
         />
         {{ statusText }}
+        <template v-if="canRemoveStatus">
+          <span class="text-secondary" aria-hidden="true">-</span>
+          <button class="btn-link text-secondary" @click="removeStatus">
+            {{ __('remove status') }}
+          </button>
+        </template>
       </p>
     </div>
   </div>

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

@@ -12,6 +12,8 @@ const getStatusIconCssClasses = wrapper => wrapper.find('[name="severity-low"]')
 
 const getEditButton = wrapper => wrapper.find({ ref: 'editButton' });
 
+const getRemoveStatusButton = wrapper => wrapper.find('.value .btn-link');
+
 const getEditForm = wrapper => wrapper.find('form');
 
 const getRadioInputs = wrapper => wrapper.findAll('input[type="radio"]');
@@ -87,6 +89,43 @@ describe('Status', () => {
     });
   });
 
+  describe('remove status button', () => {
+    it('is hidden when there is no status', () => {
+      const props = {
+        isEditable: true,
+        status: '',
+      };
+
+      shallowMountStatus(props);
+
+      expect(getRemoveStatusButton(wrapper).exists()).toBe(false);
+    });
+
+    it('is displayed when there is a status', () => {
+      const props = {
+        isEditable: true,
+        status: healthStatus.AT_RISK,
+      };
+
+      shallowMountStatus(props);
+
+      expect(getRemoveStatusButton(wrapper).exists()).toBe(true);
+    });
+
+    it('emits an onFormSubmit event with argument null when clicked', () => {
+      const props = {
+        isEditable: true,
+        status: healthStatus.AT_RISK,
+      };
+
+      shallowMountStatus(props);
+
+      getRemoveStatusButton(wrapper).trigger('click');
+
+      expect(wrapper.emitted().onFormSubmit[0]).toEqual([null]);
+    });
+  });
+
   describe('status text', () => {
     describe('when no value is provided for status', () => {
       beforeEach(() => {

locale/gitlab.pot

@@ -24701,6 +24701,9 @@ msgstr ""
 msgid "remove due date"
 msgstr ""
 
+msgid "remove status"
+msgstr ""
+
 msgid "remove weight"
 msgstr ""