Fix broken "Show whitespace changes" button on MR "Changes" tab

This MR fixes the issue where the Show/Hide whitespace changes button was getting stuck in the Show whitespace changes state once it has been toggled.

The problem was that the w=0 parameter in the URL was getting handled as if it was an integer flag. Since url params are always strings the flag will always result in true regardless of the value.

This MR fixes the issue by converting the w flag to an integer when it is read out.

Tests for the component has also been added.

What are the relevant issue numbers?

Closes #52122 (closed)

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Tests added for this feature/bug
• Conforms to the code review guidelines
• Conforms to the merge request performance guidelines

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -149,7 +149,7 @@ export default {
           .catch(() => Flash(s__('Metrics|There was an error getting deployment information.'))),
         this.service
           .getEnvironmentsData()
-          .then((data) => this.store.storeEnvironmentsData(data))
+          .then(data => this.store.storeEnvironmentsData(data))
           .catch(() => Flash(s__('Metrics|There was an error getting environments information.'))),
       ])
         .then(() => {
@@ -157,6 +157,7 @@ export default {
             this.state = 'noData';
             return;
           }
+
           this.showEmptyState = false;
         })
         .then(this.resize)
@@ -195,7 +196,10 @@ export default {
             name="chevron-down"
           />
         </button>
-        <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
+        <div 
+          v-if="store.environmentsData.length > 0"  
+          class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"
+        >
           <ul>
             <li
               v-for="environment in store.environmentsData"