Changes tab VUE refactoring

1 files changed, 86 insertions, 53 deletions

diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index d0b0e5e1ba1..68f92c7f08a 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -1,10 +1,14 @@
 import $ from 'jquery';
-import Cookies from 'js-cookie';
 import axios from './axios_utils';
 import { getLocationHash } from './url_utility';
 import { convertToCamelCase } from './text_utility';
+import { isObject } from './type_utility';
 
-export const getPagePath = (index = 0) => $('body').attr('data-page').split(':')[index];
+export const getPagePath = (index = 0) => {
+  const page = $('body').attr('data-page') || '';
+
+  return page.split(':')[index];
+};
 
 export const isInGroupsPage = () => getPagePath() === 'groups';
 
@@ -34,17 +38,18 @@ export const checkPageAndAction = (page, action) => {
 export const isInIssuePage = () => checkPageAndAction('issues', 'show');
 export const isInMRPage = () => checkPageAndAction('merge_requests', 'show');
 export const isInEpicPage = () => checkPageAndAction('epics', 'show');
-export const isInNoteablePage = () => isInIssuePage() || isInMRPage();
-export const hasVueMRDiscussionsCookie = () => Cookies.get('vue_mr_discussions');
-
-export const ajaxGet = url => axios.get(url, {
-  params: { format: 'js' },
-  responseType: 'text',
-}).then(({ data }) => {
-  $.globalEval(data);
-});
 
-export const rstrip = (val) => {
+export const ajaxGet = url =>
+  axios
+    .get(url, {
+      params: { format: 'js' },
+      responseType: 'text',
+    })
+    .then(({ data }) => {
+      $.globalEval(data);
+    });
+
+export const rstrip = val => {
   if (val) {
     return val.replace(/\s+$/, '');
   }
@@ -60,7 +65,7 @@ export const disableButtonIfEmptyField = (fieldSelector, buttonSelector, eventNa
     closestSubmit.disable();
   }
   // eslint-disable-next-line func-names
-  return field.on(eventName, function () {
+  return field.on(eventName, function() {
     if (rstrip($(this).val()) === '') {
       return closestSubmit.disable();
     }
@@ -79,7 +84,7 @@ export const handleLocationHash = () => {
 
   const target = document.getElementById(hash) || document.getElementById(`user-content-${hash}`);
   const fixedTabs = document.querySelector('.js-tabs-affix');
-  const fixedDiffStats = document.querySelector('.js-diff-files-changed.is-stuck');
+  const fixedDiffStats = document.querySelector('.js-diff-files-changed');
   const fixedNav = document.querySelector('.navbar-gitlab');
 
   let adjustment = 0;
@@ -102,7 +107,7 @@ export const handleLocationHash = () => {
 
 // Check if element scrolled into viewport from above or below
 // Courtesy http://stackoverflow.com/a/7557433/414749
-export const isInViewport = (el) => {
+export const isInViewport = el => {
   const rect = el.getBoundingClientRect();
 
   return (
@@ -113,13 +118,13 @@ export const isInViewport = (el) => {
   );
 };
 
-export const parseUrl = (url) => {
+export const parseUrl = url => {
   const parser = document.createElement('a');
   parser.href = url;
   return parser;
 };
 
-export const parseUrlPathname = (url) => {
+export const parseUrlPathname = url => {
   const parsedUrl = parseUrl(url);
   // parsedUrl.pathname will return an absolute path for Firefox and a relative path for IE11
   // We have to make sure we always have an absolute path.
@@ -128,10 +133,14 @@ export const parseUrlPathname = (url) => {
 
 // We can trust that each param has one & since values containing & will be encoded
 // Remove the first character of search as it is always ?
-export const getUrlParamsArray = () => window.location.search.slice(1).split('&').map((param) => {
-  const split = param.split('=');
-  return [decodeURI(split[0]), split[1]].join('=');
-});
+export const getUrlParamsArray = () =>
+  window.location.search
+    .slice(1)
+    .split('&')
+    .map(param => {
+      const split = param.split('=');
+      return [decodeURI(split[0]), split[1]].join('=');
+    });
 
 export const isMetaKey = e => e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
 
@@ -141,18 +150,28 @@ export const isMetaKey = e => e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
 // 3) Middle-click or Mouse Wheel Click (e.which is 2)
 export const isMetaClick = e => e.metaKey || e.ctrlKey || e.which === 2;
 
-export const scrollToElement = (element) => {
+export const contentTop = () => {
+  const perfBar = $('#js-peek').height() || 0;
+  const mrTabsHeight = $('.merge-request-tabs').height() || 0;
+  const headerHeight = $('.navbar-gitlab').height() || 0;
+  const diffFilesChanged = $('.js-diff-files-changed').height() || 0;
+
+  return perfBar + mrTabsHeight + headerHeight + diffFilesChanged;
+};
+
+export const scrollToElement = element => {
   let $el = element;
   if (!(element instanceof $)) {
     $el = $(element);
   }
   const top = $el.offset().top;
-  const mrTabsHeight = $('.merge-request-tabs').height() || 0;
-  const headerHeight = $('.navbar-gitlab').height() || 0;
 
-  return $('body, html').animate({
-    scrollTop: top - mrTabsHeight - headerHeight,
-  }, 200);
+  return $('body, html').animate(
+    {
+      scrollTop: top - contentTop(),
+    },
+    200,
+  );
 };
 
 /**
@@ -212,7 +231,8 @@ export const insertText = (target, text) => {
 };
 
 export const nodeMatchesSelector = (node, selector) => {
-  const matches = Element.prototype.matches ||
+  const matches =
+    Element.prototype.matches ||
     Element.prototype.matchesSelector ||
     Element.prototype.mozMatchesSelector ||
     Element.prototype.msMatchesSelector ||
@@ -241,10 +261,10 @@ export const nodeMatchesSelector = (node, selector) => {
   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
 */
-export const normalizeHeaders = (headers) => {
+export const normalizeHeaders = headers => {
   const upperCaseHeaders = {};
 
-  Object.keys(headers || {}).forEach((e) => {
+  Object.keys(headers || {}).forEach(e => {
     upperCaseHeaders[e.toUpperCase()] = headers[e];
   });
 
@@ -255,11 +275,11 @@ export const normalizeHeaders = (headers) => {
   this will take in the getAllResponseHeaders result and normalize them
   this way we don't run into production issues when nginx gives us lowercased header keys
 */
-export const normalizeCRLFHeaders = (headers) => {
+export const normalizeCRLFHeaders = headers => {
   const headersObject = {};
   const headersArray = headers.split('\n');
 
-  headersArray.forEach((header) => {
+  headersArray.forEach(header => {
     const keyValue = header.split(': ');
     headersObject[keyValue[0]] = keyValue[1];
   });
@@ -295,15 +315,13 @@ export const parseIntPagination = paginationInformation => ({
 export const parseQueryStringIntoObject = (query = '') => {
   if (query === '') return {};
 
-  return query
-    .split('&')
-    .reduce((acc, element) => {
-      const val = element.split('=');
-      Object.assign(acc, {
-        [val[0]]: decodeURIComponent(val[1]),
-      });
-      return acc;
-    }, {});
+  return query.split('&').reduce((acc, element) => {
+    const val = element.split('=');
+    Object.assign(acc, {
+      [val[0]]: decodeURIComponent(val[1]),
+    });
+    return acc;
+  }, {});
 };
 
 /**
@@ -312,9 +330,13 @@ export const parseQueryStringIntoObject = (query = '') => {
  *
  * @param {Object} params
  */
-export const objectToQueryString = (params = {}) => Object.keys(params).map(param => `${param}=${params[param]}`).join('&');
+export const objectToQueryString = (params = {}) =>
+  Object.keys(params)
+    .map(param => `${param}=${params[param]}`)
+    .join('&');
 
-export const buildUrlWithCurrentLocation = param => (param ? `${window.location.pathname}${param}` : window.location.pathname);
+export const buildUrlWithCurrentLocation = param =>
+  (param ? `${window.location.pathname}${param}` : window.location.pathname);
 
 /**
  * Based on the current location and the string parameters provided
@@ -322,7 +344,7 @@ export const buildUrlWithCurrentLocation = param => (param ? `${window.location.
  *
  * @param {String} param
  */
-export const historyPushState = (newUrl) => {
+export const historyPushState = newUrl => {
   window.history.pushState({}, document.title, newUrl);
 };
 
@@ -371,7 +393,7 @@ export const backOff = (fn, timeout = 60000) => {
   let timeElapsed = 0;
 
   return new Promise((resolve, reject) => {
-    const stop = arg => ((arg instanceof Error) ? reject(arg) : resolve(arg));
+    const stop = arg => (arg instanceof Error ? reject(arg) : resolve(arg));
 
     const next = () => {
       if (timeElapsed < timeout) {
@@ -447,7 +469,8 @@ export const resetFavicon = () => {
 };
 
 export const setCiStatusFavicon = pageUrl =>
-  axios.get(pageUrl)
+  axios
+    .get(pageUrl)
     .then(({ data }) => {
       if (data && data.favicon) {
         return setFaviconOverlay(data.favicon);
@@ -469,28 +492,38 @@ export const spriteIcon = (icon, className = '') => {
  * Reasoning for this method is to ensure consistent property
  * naming conventions across JS code.
  */
-export const convertObjectPropsToCamelCase = (obj = {}) => {
+export const convertObjectPropsToCamelCase = (obj = {}, options = {}) => {
   if (obj === null) {
     return {};
   }
 
+  const initial = Array.isArray(obj) ? [] : {};
+
   return Object.keys(obj).reduce((acc, prop) => {
     const result = acc;
+    const val = obj[prop];
 
-    result[convertToCamelCase(prop)] = obj[prop];
+    if (options.deep && (isObject(val) || Array.isArray(val))) {
+      result[convertToCamelCase(prop)] = convertObjectPropsToCamelCase(val, options);
+    } else {
+      result[convertToCamelCase(prop)] = obj[prop];
+    }
     return acc;
-  }, {});
+  }, initial);
 };
 
-export const imagePath = imgUrl => `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/${imgUrl}`;
+export const imagePath = imgUrl =>
+  `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/${imgUrl}`;
 
 export const addSelectOnFocusBehaviour = (selector = '.js-select-on-focus') => {
   // Click a .js-select-on-focus field, select the contents
   // Prevent a mouseup event from deselecting the input
   $(selector).on('focusin', function selectOnFocusCallback() {
-    $(this).select().one('mouseup', (e) => {
-      e.preventDefault();
-    });
+    $(this)
+      .select()
+      .one('mouseup', e => {
+        e.preventDefault();
+      });
   });
 };