Merge branch 'normalize_frontend_headers' into 'master'

Create a util for normalizing headers on the frontend

See merge request !8750

app/assets/javascripts/lib/utils/common_utils.js.es6

@@ -159,5 +159,19 @@
       if (!results[2]) return '';
       return decodeURIComponent(results[2].replace(/\+/g, ' '));
     };
+
+    /**
+      this will take in the headers from an API response and normalize them
+      this way we don't run into production issues when nginx gives us lowercased header keys
+    */
+    w.gl.utils.normalizeHeaders = (headers) => {
+      const upperCaseHeaders = {};
+
+      Object.keys(headers).forEach((e) => {
+        upperCaseHeaders[e.toUpperCase()] = headers[e];
+      });
+
+      return upperCaseHeaders;
+    };
   })(window);
 }).call(this);

app/assets/javascripts/vue_pipelines_index/store.js.es6

@@ -4,19 +4,15 @@
 
 ((gl) => {
   const pageValues = (headers) => {
-    const normalizedHeaders = {};
-
-    Object.keys(headers).forEach((e) => {
-      normalizedHeaders[e.toUpperCase()] = headers[e];
-    });
+    const normalized = gl.utils.normalizeHeaders(headers);
 
     const paginationInfo = {
-      perPage: +normalizedHeaders['X-PER-PAGE'],
-      page: +normalizedHeaders['X-PAGE'],
-      total: +normalizedHeaders['X-TOTAL'],
-      totalPages: +normalizedHeaders['X-TOTAL-PAGES'],
-      nextPage: +normalizedHeaders['X-NEXT-PAGE'],
-      previousPage: +normalizedHeaders['X-PREV-PAGE'],
+      perPage: +normalized['X-PER-PAGE'],
+      page: +normalized['X-PAGE'],
+      total: +normalized['X-TOTAL'],
+      totalPages: +normalized['X-TOTAL-PAGES'],
+      nextPage: +normalized['X-NEXT-PAGE'],
+      previousPage: +normalized['X-PREV-PAGE'],
     };
 
     return paginationInfo;

spec/javascripts/lib/utils/common_utils_spec.js.es6

@@ -52,5 +52,22 @@
         expect(value).toBe(null);
       });
     });
+
+    describe('gl.utils.normalizedHeaders', () => {
+      it('should upperCase all the header keys to keep them consistent', () => {
+        const apiHeaders = {
+          'X-Something-Workhorse': { workhorse: 'ok' },
+          'x-something-nginx': { nginx: 'ok' },
+        };
+
+        const normalized = gl.utils.normalizeHeaders(apiHeaders);
+
+        const WORKHORSE = 'X-SOMETHING-WORKHORSE';
+        const NGINX = 'X-SOMETHING-NGINX';
+
+        expect(normalized[WORKHORSE].workhorse).toBe('ok');
+        expect(normalized[NGINX].nginx).toBe('ok');
+      });
+    });
   });
 })();