Improve Health Status code

Make changes as a result of reviewer comments

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

@@ -145,20 +145,20 @@ export default {
       </div>
 
       <gl-loading-icon v-if="isFetching" :inline="true" />
-      <p v-else class="value m-0" :class="{ 'no-value': !status }">
+      <p v-else class="value d-flex align-items-center m-0" :class="{ 'no-value': !status }">
         <gl-icon
           v-if="status"
           name="severity-low"
           :size="14"
-          class="align-bottom mr-2"
+          class="align-bottom append-right-10"
           :class="statusColor"
         />
         {{ statusText }}
         <template v-if="canRemoveStatus">
-          <span class="text-secondary" aria-hidden="true">-</span>
-          <button class="btn-link text-secondary" @click="removeStatus">
+          <span class="text-secondary mx-1" aria-hidden="true">-</span>
+          <gl-button variant="link" class="text-secondary" @click="removeStatus">
             {{ __('remove status') }}
-          </button>
+          </gl-button>
         </template>
       </p>
     </div>

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

@@ -59,9 +59,12 @@ describe('SidebarStatus', () => {
         status: 'onTrack',
       },
       updateStatus(status) {
-        const newMediator = { ...this };
-        newMediator.store.status = status;
-        wrapper.setProps({ mediator: newMediator });
+        this.store.status = status;
+        wrapper.setProps({
+          mediator: {
+            ...this,
+          },
+        });
         return Promise.resolve();
       },
     };
@@ -77,7 +80,7 @@ describe('SidebarStatus', () => {
     wrapper.find('button.btn-link').trigger('click');
 
     return Vue.nextTick().then(() => {
-      expect(getStatusText(wrapper)).toContain('None');
+      expect(getStatusText(wrapper)).toBe('None');
     });
   });
 });

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

-import { GlFormRadioGroup, GlLoadingIcon, GlTooltip } from '@gitlab/ui';
+import { GlButton, GlFormRadioGroup, GlLoadingIcon, GlTooltip } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Status from 'ee/sidebar/components/status/status.vue';
@@ -12,7 +12,7 @@ const getStatusIconCssClasses = wrapper => wrapper.find('[name="severity-low"]')
 
 const getEditButton = wrapper => wrapper.find({ ref: 'editButton' });
 
-const getRemoveStatusButton = wrapper => wrapper.find('.value .btn-link');
+const getRemoveStatusButton = wrapper => wrapper.find(GlButton);
 
 const getEditForm = wrapper => wrapper.find('form');
 
@@ -120,7 +120,7 @@ describe('Status', () => {
 
       shallowMountStatus(props);
 
-      getRemoveStatusButton(wrapper).trigger('click');
+      getRemoveStatusButton(wrapper).vm.$emit('click');
 
       expect(wrapper.emitted().onStatusChange[0]).toEqual([null]);
     });