Merge branch '350373-requirements-badge' into 'master'

Update icon prop for requirements badge

See merge request gitlab-org/gitlab!78412

ee/app/assets/javascripts/requirements/components/requirement_status_badge.vue

 <script>
-import { GlBadge, GlIcon, GlTooltip } from '@gitlab/ui';
+import { GlBadge, GlTooltip } from '@gitlab/ui';
 import { __ } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 
@@ -8,7 +8,6 @@ import { TestReportStatus } from '../constants';
 export default {
   components: {
     GlBadge,
-    GlIcon,
     GlTooltip,
   },
   mixins: [timeagoMixin],
@@ -58,8 +57,7 @@ export default {
 
 <template>
   <component :is="elementType" class="requirement-status-badge">
-    <gl-badge ref="testReportBadge" :variant="testReportBadge.variant">
-      <gl-icon :name="testReportBadge.icon" class="mr-1" />
+    <gl-badge ref="testReportBadge" :variant="testReportBadge.variant" :icon="testReportBadge.icon">
       {{ testReportBadge.text }}
     </gl-badge>
     <gl-tooltip

ee/spec/frontend/requirements/components/requirement_status_badge_spec.js

-import { GlBadge, GlIcon, GlTooltip } from '@gitlab/ui';
+import { GlBadge, GlTooltip } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
 import { nextTick } from 'vue';
@@ -94,9 +94,8 @@ describe('RequirementStatusBadge', () => {
 
           expect(badgeEl.exists()).toBe(true);
           expect(badgeEl.props('variant')).toBe(badgeProps.variant);
+          expect(badgeEl.props('icon')).toBe(badgeProps.icon);
           expect(badgeEl.text()).toBe(badgeProps.text);
-          expect(badgeEl.findComponent(GlIcon).exists()).toBe(true);
-          expect(badgeEl.findComponent(GlIcon).props('name')).toBe(badgeProps.icon);
         });
 
         it('renders GlTooltip component', () => {

ee/spec/frontend/requirements/components/requirements_root_spec.js

-import { GlPagination, GlIcon } from '@gitlab/ui';
+import { GlPagination, GlBadge } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { defaultDataIdFromObject } from 'apollo-cache-inmemory';
 import VueApollo from 'vue-apollo';
@@ -131,7 +131,7 @@ const createComponentWithApollo = ({ props = {}, requestHandlers = [] } = {}) =>
       stubs: {
         RequirementItem,
         RequirementStatusBadge,
-        GlIcon,
+        GlBadge,
       },
     }),
   );
@@ -142,7 +142,7 @@ describe('RequirementsRoot', () => {
   let trackingSpy;
 
   const findRequirementEditForm = () => wrapper.findByTestId('edit-form');
-  const findFailedStatusIcon = () => wrapper.findByTestId('status_failed-icon');
+  const findBadge = () => wrapper.findComponent(GlBadge);
 
   beforeEach(() => {
     wrapper = createComponent();
@@ -1106,12 +1106,13 @@ describe('RequirementsRoot', () => {
         });
 
         it('renders a failed badge after the update', async () => {
-          expect(findFailedStatusIcon().exists()).toBe(false);
+          await nextTick();
+          expect(findBadge().props('icon')).toBe('status_success');
 
           editRequirementToFailed();
           await waitForPromises();
 
-          expect(findFailedStatusIcon().exists()).toBe(true);
+          expect(findBadge().props('icon')).toBe('status_failed');
         });
       });