differentiate neutral performance line items (neither improved nor degraded)

app/assets/stylesheets/pages/merge_requests.scss

@@ -811,6 +811,10 @@
       .failed {
         color: $red-500;
       }
+
+      .neutral {
+        color: $gl-gray-light;
+      }
     }
   }
 }

ee/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_report_collapsible_section.vue

@@ -39,6 +39,11 @@ export default {
       required: false,
       default: () => [],
     },
+    neutralIssues: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
 
   components: {
@@ -131,6 +136,14 @@ export default {
         :issues="resolvedIssues"
         />
 
+      <issues-block
+        class="js-mr-code-non-issues"
+        v-if="neutralIssues.length"
+        :type="type"
+        status="neutral"
+        :issues="neutralIssues"
+        />
+
       <issues-block
         class="js-mr-code-new-issues"
         v-if="unresolvedIssues.length"

ee/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_report_issues.vue

@@ -21,7 +21,7 @@
     },
     computed: {
       icon() {
-        return this.isStatusFailed ? spriteIcon('cut') : spriteIcon('plus');
+        return this.isStatusSuccess ? spriteIcon('plus') : spriteIcon('cut');
       },
       isStatusFailed() {
         return this.status === 'failed';
@@ -29,6 +29,9 @@
       isStatusSuccess() {
         return this.status === 'success';
       },
+      isStatusNeutral() {
+        return this.status === 'neutral';
+      },
       isTypeQuality() {
         return this.type === 'codequality';
       },
@@ -46,7 +49,8 @@
     <li
       :class="{
         failed: isStatusFailed,
-        success: isStatusSuccess
+        success: isStatusSuccess,
+        neutral: isStatusNeutral
       }
       "v-for="issue in issues">
 

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -248,6 +248,7 @@ export default {
         :success-text="performanceText"
         :unresolvedIssues="mr.performanceMetrics.degraded"
         :resolvedIssues="mr.performanceMetrics.improved"
+        :neutralIssues="mr.performanceMetrics.neutral"
         />
       <collapsible-section
         class="js-sast-widget"

ee/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js

@@ -50,6 +50,15 @@ export default class MRWidgetService extends CEWidgetService {
           },
           {
             subject: '/some/other/path',
+            metrics: [
+              {
+                name: 'Sitespeed Score',
+                value: 79,
+              },
+            ],
+          },
+          {
+            subject: '/yet/another/path',
             metrics: [
               {
                 name: 'Sitespeed Score',

ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -102,6 +102,7 @@ export default class MergeRequestStore extends CEMergeRequestStore {
 
     const improved = [];
     const degraded = [];
+    const neutral = [];
 
     Object.keys(headMetricsIndexed).forEach((subject) => {
       const subjectMetrics = headMetricsIndexed[subject];
@@ -117,13 +118,15 @@ export default class MergeRequestStore extends CEMergeRequestStore {
             delta: headMetricData.value - baseMetricData.value,
           };
 
-          if (headMetricData.value >= baseMetricData.value) {
+          if (headMetricData.value > baseMetricData.value) {
             improved.push(metricData);
-          } else {
+          } else if (headMetricData.value < baseMetricData.value) {
             degraded.push(metricData);
+          } else {
+            neutral.push(metricData);
           }
         } else {
-          improved.push({
+          neutral.push({
             name: metric,
             path: subject,
             score: headMetricData.value,
@@ -132,7 +135,7 @@ export default class MergeRequestStore extends CEMergeRequestStore {
       });
     });
 
-    this.performanceMetrics = { improved, degraded };
+    this.performanceMetrics = { improved, degraded, neutral };
   }
 
   /**