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/ci_variable_list/ajax_variable_list.js

@@ -7,11 +7,13 @@ import statusCodes from '../lib/utils/http_status';
 import VariableList from './ci_variable_list';
 
 function generateErrorBoxContent(errors) {
-  const errorList = [].concat(errors).map(errorString => `
+  const errorList = [].concat(errors).map(
+    errorString => `
     <li>
       ${_.escape(errorString)}
     </li>
-  `);
+  `,
+  );
 
   return `
     <p>
@@ -25,13 +27,7 @@ function generateErrorBoxContent(errors) {
 
 // Used for the variable list on CI/CD projects/groups settings page
 export default class AjaxVariableList {
-  constructor({
-    container,
-    saveButton,
-    errorBox,
-    formField = 'variables',
-    saveEndpoint,
-  }) {
+  constructor({ container, saveButton, errorBox, formField = 'variables', saveEndpoint }) {
     this.container = container;
     this.saveButton = saveButton;
     this.errorBox = errorBox;
@@ -58,18 +54,21 @@ export default class AjaxVariableList {
     // to match it up in `updateRowsWithPersistedVariables`
     this.variableList.toggleEnableRow(false);
 
-    return axios.patch(this.saveEndpoint, {
-      variables_attributes: this.variableList.getAllData(),
-    }, {
-      // We want to be able to process the `res.data` from a 400 error response
-      // and print the validation messages such as duplicate variable keys
-      validateStatus: status => (
-          status >= statusCodes.OK &&
-          status < statusCodes.MULTIPLE_CHOICES
-        ) ||
-        status === statusCodes.BAD_REQUEST,
-    })
-      .then((res) => {
+    return axios
+      .patch(
+        this.saveEndpoint,
+        {
+          variables_attributes: this.variableList.getAllData(),
+        },
+        {
+          // We want to be able to process the `res.data` from a 400 error response
+          // and print the validation messages such as duplicate variable keys
+          validateStatus: status =>
+            (status >= statusCodes.OK && status < statusCodes.MULTIPLE_CHOICES) ||
+            status === statusCodes.BAD_REQUEST,
+        },
+      )
+      .then(res => {
         loadingIcon.classList.toggle('hide', true);
         this.variableList.toggleEnableRow(true);
 
@@ -90,18 +89,21 @@ export default class AjaxVariableList {
   }
 
   updateRowsWithPersistedVariables(persistedVariables = []) {
-    const persistedVariableMap = [].concat(persistedVariables).reduce((variableMap, variable) => ({
-      ...variableMap,
-      [variable.key]: variable,
-    }), {});
+    const persistedVariableMap = [].concat(persistedVariables).reduce(
+      (variableMap, variable) => ({
+        ...variableMap,
+        [variable.key]: variable,
+      }),
+      {},
+    );
 
-    this.container.querySelectorAll('.js-row').forEach((row) => {
+    this.container.querySelectorAll('.js-row').forEach(row => {
       // If we submitted a row that was destroyed, remove it so we don't try
       // to destroy it again which would cause a BE error
       const destroyInput = row.querySelector('.js-ci-variable-input-destroy');
       if (convertPermissionToBoolean(destroyInput.value)) {
         row.remove();
-      // Update the ID input so any future edits and `_destroy` will apply on the BE
+        // Update the ID input so any future edits and `_destroy` will apply on the BE
       } else {
         const key = row.querySelector('.js-ci-variable-input-key').value;
         const persistedVariable = persistedVariableMap[key];