Initial review MR feedback

- Updated approval status to be easier to read
- Updated tests to check each status for the correct values

ee/app/assets/javascripts/compliance_dashboard/components/approval_status.vue

@@ -4,6 +4,8 @@ import { GlTooltipDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
+const APPROVAL_WARNING_ICON = 'success-with-warnings';
+
 export default {
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -21,22 +23,17 @@ export default {
     tooltip() {
       return this.$options.tooltips[this.status];
     },
-    iconName() {
+    icon() {
       return `status_${this.status}`;
     },
-    iconStatus() {
-      const { status, iconName: icon } = this;
-      let group = status;
+    group() {
+      const { status } = this;
 
-      // Need to set this to be the group for warnings so the correct icon color fill is used
-      if (group === 'warning') {
-        group = 'success-with-warnings';
+      if (status === 'warning') {
+        return APPROVAL_WARNING_ICON;
       }
 
-      return {
-        group,
-        icon,
-      };
+      return status;
     },
   },
   tooltips: {
@@ -51,6 +48,6 @@ export default {
   <a
     href="https://docs.gitlab.com/ee/user/compliance/compliance_dashboard/#approval-status-and-separation-of-duties"
   >
-    <ci-icon v-gl-tooltip.left="tooltip" class="gl-display-flex" :status="iconStatus" />
+    <ci-icon v-gl-tooltip.left="tooltip" class="gl-display-flex" :status="{ icon, group }" />
   </a>
 </template>

ee/spec/frontend/compliance_dashboard/components/approval_status_spec.js

@@ -41,29 +41,26 @@ describe('ApprovalStatus component', () => {
       expect(findIcon().text()).toEqual(`status_${approvalStatus}`);
     });
 
-    it.each`
-      status       | tooltip
-      ${'success'} | ${'Adheres to separation of duties'}
-      ${'warning'} | ${'At least one rule does not adhere to separation of duties'}
-      ${'failed'}  | ${'Fails to adhere to separation of duties'}
-    `('shows the correct tooltip for $status', ({ status, tooltip }) => {
-      wrapper = createComponent(status);
-
-      expect(wrapper.vm.tooltip).toEqual(tooltip);
-    });
-  });
+    describe.each`
+      status       | icon                | group                      | tooltip
+      ${'success'} | ${'status_success'} | ${'success'}               | ${'Adheres to separation of duties'}
+      ${'warning'} | ${'status_warning'} | ${'success-with-warnings'} | ${'At least one rule does not adhere to separation of duties'}
+      ${'failed'}  | ${'status_failed'}  | ${'failed'}                | ${'Fails to adhere to separation of duties'}
+    `('returns the correct values for $status', ({ status, icon, group, tooltip }) => {
+      beforeEach(() => {
+        wrapper = createComponent(status);
+      });
 
-  describe('with a warning approval status', () => {
-    const approvalStatus = 'warning';
+      it('returns the correct icon', () => {
+        expect(wrapper.vm.icon).toEqual(icon);
+      });
 
-    beforeEach(() => {
-      wrapper = createComponent(approvalStatus);
-    });
+      it('returns the correct group', () => {
+        expect(wrapper.vm.group).toEqual(group);
+      });
 
-    it('returns the correct status object`', () => {
-      expect(wrapper.vm.iconStatus).toEqual({
-        group: 'success-with-warnings',
-        icon: 'status_warning',
+      it('returns the correct tooltip', () => {
+        expect(wrapper.vm.tooltip).toEqual(tooltip);
       });
     });
   });