Merge branch...

Merge branch '347508-requirements-should-use-a-generic-status-icons-instead-of-pipeline-status' into 'master'

Update status icons for requirements

See merge request gitlab-org/gitlab!80775

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

@@ -27,14 +27,14 @@ export default {
       if (this.testReport.state === TestReportStatus.Passed) {
         return {
           variant: 'success',
-          icon: 'status_success',
+          icon: 'status-success',
           text: __('satisfied'),
           tooltipTitle: __('Passed on'),
         };
       } else if (this.testReport.state === TestReportStatus.Failed) {
         return {
           variant: 'danger',
-          icon: 'status_failed',
+          icon: 'status-failed',
           text: __('failed'),
           tooltipTitle: __('Failed on'),
         };

ee/app/assets/javascripts/requirements/components/tokens/status_token.vue

@@ -8,7 +8,7 @@ export default {
       id: 1,
       value: 'satisfied',
       text: __('Satisfied'),
-      icon: 'status_success',
+      icon: 'status-success',
       iconClass: 'gl-text-green-700',
       containerClass: 'gl-bg-green-100 gl-text-gray-900',
     },
@@ -16,7 +16,7 @@ export default {
       id: 2,
       value: 'failed',
       text: __('Failed'),
-      icon: 'status_failed',
+      icon: 'status-failed',
       iconClass: 'gl-text-red-700',
       containerClass: 'gl-bg-red-100 gl-text-gray-900',
     },

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

@@ -21,14 +21,14 @@ const findGlTooltip = (wrapper) => wrapper.findComponent(GlTooltip);
 
 const successBadgeProps = {
   variant: 'success',
-  icon: 'status_success',
+  icon: 'status-success',
   text: 'satisfied',
   tooltipTitle: 'Passed on',
 };
 
 const failedBadgeProps = {
   variant: 'danger',
-  icon: 'status_failed',
+  icon: 'status-failed',
   text: 'failed',
   tooltipTitle: 'Failed on',
 };

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

@@ -1107,12 +1107,12 @@ describe('RequirementsRoot', () => {
 
         it('renders a failed badge after the update', async () => {
           await nextTick();
-          expect(findBadge().props('icon')).toBe('status_success');
+          expect(findBadge().props('icon')).toBe('status-success');
 
           editRequirementToFailed();
           await waitForPromises();
 
-          expect(findBadge().props('icon')).toBe('status_failed');
+          expect(findBadge().props('icon')).toBe('status-failed');
         });
       });
 

ee/spec/frontend/requirements/components/tokens/status_token_spec.js

@@ -9,11 +9,11 @@ import { mockStatusToken } from '../../mock_data';
 const mockStatuses = [
   {
     text: 'Satisfied',
-    icon: 'status_success',
+    icon: 'status-success',
   },
   {
     text: 'Failed',
-    icon: 'status_failed',
+    icon: 'status-failed',
   },
   {
     text: 'Missing',
@@ -62,8 +62,8 @@ describe('StatusToken', () => {
 
     it.each`
       value          | text           | icon
-      ${'satisfied'} | ${'Satisfied'} | ${'status_success'}
-      ${'failed'}    | ${'Failed'}    | ${'status_failed'}
+      ${'satisfied'} | ${'Satisfied'} | ${'status-success'}
+      ${'failed'}    | ${'Failed'}    | ${'status-failed'}
       ${'missing'}   | ${'Missing'}   | ${'status-waiting'}
     `(
       'renders token icon and text representing status "$text" when `value.data` is set to "$value"',