debian-mirror-gitlab/app/assets/javascripts/lib/utils/common_utils.js

824 lines
25 KiB
JavaScript
Raw Normal View History

2019-03-02 22:35:43 +05:30
/**
* @module common-utils
*/
2020-03-13 15:44:24 +05:30
import { GlBreakpointInstance as breakpointInstance } from '@gitlab/ui/dist/utils';
2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2020-10-24 23:57:45 +05:30
import Cookies from 'js-cookie';
2021-03-11 19:13:27 +05:30
import { isFunction, defer } from 'lodash';
2020-01-01 13:55:28 +05:30
import { convertToCamelCase, convertToSnakeCase } from './text_utility';
2018-11-08 19:23:39 +05:30
import { isObject } from './type_utility';
2021-03-11 19:13:27 +05:30
import { getLocationHash } from './url_utility';
2018-03-17 18:26:18 +05:30
2018-11-08 19:23:39 +05:30
export const getPagePath = (index = 0) => {
const page = $('body').attr('data-page') || '';
return page.split(':')[index];
};
2018-03-17 18:26:18 +05:30
2019-12-21 20:55:43 +05:30
export const getDashPath = (path = window.location.pathname) => path.split('/-/')[1] || null;
2018-03-17 18:26:18 +05:30
export const isInGroupsPage = () => getPagePath() === 'groups';
export const isInProjectPage = () => getPagePath() === 'projects';
export const getProjectSlug = () => {
if (isInProjectPage()) {
return $('body').data('project');
}
return null;
};
export const getGroupSlug = () => {
2020-06-23 00:09:42 +05:30
if (isInProjectPage() || isInGroupsPage()) {
2018-03-17 18:26:18 +05:30
return $('body').data('group');
}
return null;
};
2018-03-27 19:54:05 +05:30
export const checkPageAndAction = (page, action) => {
const pagePath = getPagePath(1);
const actionPath = getPagePath(2);
2018-03-17 18:26:18 +05:30
2018-03-27 19:54:05 +05:30
return pagePath === page && actionPath === action;
2018-03-17 18:26:18 +05:30
};
2021-01-03 14:25:43 +05:30
export const isInIncidentPage = () => checkPageAndAction('incidents', 'show');
2018-03-27 19:54:05 +05:30
export const isInIssuePage = () => checkPageAndAction('issues', 'show');
2021-03-11 19:13:27 +05:30
export const isInDesignPage = () => checkPageAndAction('issues', 'designs');
2018-03-27 19:54:05 +05:30
export const isInMRPage = () => checkPageAndAction('merge_requests', 'show');
2018-05-09 12:01:36 +05:30
export const isInEpicPage = () => checkPageAndAction('epics', 'show');
2018-03-17 18:26:18 +05:30
2019-10-12 21:52:04 +05:30
export const getCspNonceValue = () => {
const metaTag = document.querySelector('meta[name=csp-nonce]');
return metaTag && metaTag.content;
};
2021-03-08 18:12:59 +05:30
export const rstrip = (val) => {
2018-03-17 18:26:18 +05:30
if (val) {
return val.replace(/\s+$/, '');
}
return val;
};
export const disableButtonIfEmptyField = (fieldSelector, buttonSelector, eventName = 'input') => {
const field = $(fieldSelector);
const closestSubmit = field.closest('form').find(buttonSelector);
if (rstrip(field.val()) === '') {
closestSubmit.disable();
}
// eslint-disable-next-line func-names
2021-03-08 18:12:59 +05:30
return field.on(eventName, function () {
2018-03-17 18:26:18 +05:30
if (rstrip($(this).val()) === '') {
return closestSubmit.disable();
}
return closestSubmit.enable();
});
};
// automatically adjust scroll position for hash urls taking the height of the navbar into account
// https://github.com/twitter/bootstrap/issues/1768
export const handleLocationHash = () => {
let hash = getLocationHash();
if (!hash) return;
// This is required to handle non-unicode characters in hash
hash = decodeURIComponent(hash);
const target = document.getElementById(hash) || document.getElementById(`user-content-${hash}`);
const fixedTabs = document.querySelector('.js-tabs-affix');
2018-11-08 19:23:39 +05:30
const fixedDiffStats = document.querySelector('.js-diff-files-changed');
2018-03-17 18:26:18 +05:30
const fixedNav = document.querySelector('.navbar-gitlab');
2018-11-20 20:47:30 +05:30
const performanceBar = document.querySelector('#js-peek');
2018-12-05 23:21:45 +05:30
const topPadding = 8;
2019-09-04 21:01:54 +05:30
const diffFileHeader = document.querySelector('.js-file-title');
const versionMenusContainer = document.querySelector('.mr-version-menus-container');
2020-07-28 23:09:34 +05:30
const fixedIssuableTitle = document.querySelector('.issue-sticky-header');
2018-03-17 18:26:18 +05:30
let adjustment = 0;
if (fixedNav) adjustment -= fixedNav.offsetHeight;
if (target && target.scrollIntoView) {
target.scrollIntoView(true);
}
if (fixedTabs) {
adjustment -= fixedTabs.offsetHeight;
}
if (fixedDiffStats) {
adjustment -= fixedDiffStats.offsetHeight;
}
2018-11-20 20:47:30 +05:30
if (performanceBar) {
adjustment -= performanceBar.offsetHeight;
}
2019-09-04 21:01:54 +05:30
if (diffFileHeader) {
adjustment -= diffFileHeader.offsetHeight;
}
if (versionMenusContainer) {
adjustment -= versionMenusContainer.offsetHeight;
}
2020-07-28 23:09:34 +05:30
if (isInIssuePage()) {
2021-03-11 19:13:27 +05:30
adjustment -= fixedIssuableTitle?.offsetHeight;
2020-07-28 23:09:34 +05:30
}
2018-12-05 23:21:45 +05:30
if (isInMRPage()) {
adjustment -= topPadding;
}
2020-03-13 15:44:24 +05:30
setTimeout(() => {
window.scrollBy(0, adjustment);
});
2018-03-17 18:26:18 +05:30
};
// Check if element scrolled into viewport from above or below
// Courtesy http://stackoverflow.com/a/7557433/414749
2019-03-02 22:35:43 +05:30
export const isInViewport = (el, offset = {}) => {
2018-03-17 18:26:18 +05:30
const rect = el.getBoundingClientRect();
2019-03-02 22:35:43 +05:30
const { top, left } = offset;
2018-03-17 18:26:18 +05:30
return (
2019-03-02 22:35:43 +05:30
rect.top >= (top || 0) &&
rect.left >= (left || 0) &&
2018-03-17 18:26:18 +05:30
rect.bottom <= window.innerHeight &&
2019-07-07 11:18:12 +05:30
parseInt(rect.right, 10) <= window.innerWidth
2018-03-17 18:26:18 +05:30
);
};
2021-03-08 18:12:59 +05:30
export const parseUrl = (url) => {
2018-03-17 18:26:18 +05:30
const parser = document.createElement('a');
parser.href = url;
return parser;
};
2021-03-08 18:12:59 +05:30
export const parseUrlPathname = (url) => {
2018-03-17 18:26:18 +05:30
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.
return parsedUrl.pathname.charAt(0) === '/' ? parsedUrl.pathname : `/${parsedUrl.pathname}`;
};
2018-11-20 20:47:30 +05:30
const splitPath = (path = '') => path.replace(/^\?/, '').split('&');
export const urlParamsToArray = (path = '') =>
splitPath(path)
2021-03-08 18:12:59 +05:30
.filter((param) => param.length > 0)
.map((param) => {
2018-11-08 19:23:39 +05:30
const split = param.split('=');
return [decodeURI(split[0]), split[1]].join('=');
});
2018-03-17 18:26:18 +05:30
2018-11-20 20:47:30 +05:30
export const getUrlParamsArray = () => urlParamsToArray(window.location.search);
2019-12-21 20:55:43 +05:30
/**
* Accepts encoding string which includes query params being
* sent to URL.
*
* @param {string} path Query param string
*
* @returns {object} Query params object containing key-value pairs
* with both key and values decoded into plain string.
*/
2018-11-20 20:47:30 +05:30
export const urlParamsToObject = (path = '') =>
splitPath(path).reduce((dataParam, filterParam) => {
if (filterParam === '') {
return dataParam;
}
const data = dataParam;
let [key, value] = filterParam.split('=');
2019-12-21 20:55:43 +05:30
key = /%\w+/g.test(key) ? decodeURIComponent(key) : key;
2018-11-20 20:47:30 +05:30
const isArray = key.includes('[]');
key = key.replace('[]', '');
value = decodeURIComponent(value.replace(/\+/g, ' '));
if (isArray) {
if (!data[key]) {
data[key] = [];
}
data[key].push(value);
} else {
data[key] = value;
}
return data;
}, {});
2021-03-08 18:12:59 +05:30
export const isMetaKey = (e) => e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
2018-03-17 18:26:18 +05:30
// Identify following special clicks
// 1) Cmd + Click on Mac (e.metaKey)
// 2) Ctrl + Click on PC (e.ctrlKey)
// 3) Middle-click or Mouse Wheel Click (e.which is 2)
2021-03-08 18:12:59 +05:30
export const isMetaClick = (e) => e.metaKey || e.ctrlKey || e.which === 2;
2018-03-17 18:26:18 +05:30
2018-11-08 19:23:39 +05:30
export const contentTop = () => {
2019-07-07 11:18:12 +05:30
const isDesktop = breakpointInstance.isDesktop();
2021-02-22 17:27:13 +05:30
const heightCalculators = [
() => $('#js-peek').outerHeight(),
() => $('.navbar-gitlab').outerHeight(),
({ desktop }) => {
const container = document.querySelector('.line-resolve-all-container');
let size = 0;
if (!desktop && container) {
size = container.offsetHeight;
}
2018-11-08 19:23:39 +05:30
2021-02-22 17:27:13 +05:30
return size;
},
() => $('.merge-request-tabs').outerHeight(),
() => $('.js-diff-files-changed').outerHeight(),
({ desktop }) => {
const diffsTabIsActive = window.mrTabs?.currentAction === 'diffs';
let size;
if (desktop && diffsTabIsActive) {
size = $('.diff-file .file-title-flex-parent:visible').outerHeight();
}
return size;
},
({ desktop }) => {
let size;
if (desktop) {
size = $('.mr-version-controls').outerHeight();
}
return size;
},
];
return heightCalculators.reduce((totalHeight, calculator) => {
return totalHeight + (calculator({ desktop: isDesktop }) || 0);
}, 0);
2018-11-08 19:23:39 +05:30
};
2020-06-23 00:09:42 +05:30
export const scrollToElement = (element, options = {}) => {
2021-03-08 18:12:59 +05:30
let el = element;
if (element instanceof $) {
// eslint-disable-next-line prefer-destructuring
el = element[0];
} else if (typeof el === 'string') {
el = document.querySelector(element);
2018-03-27 19:54:05 +05:30
}
2018-03-17 18:26:18 +05:30
2021-03-08 18:12:59 +05:30
if (el && el.getBoundingClientRect) {
// In the previous implementation, jQuery naturally deferred this scrolling.
// Unfortunately, we're quite coupled to this implementation detail now.
defer(() => {
const { duration = 200, offset = 0 } = options;
const y = el.getBoundingClientRect().top + window.pageYOffset + offset - contentTop();
window.scrollTo({ top: y, behavior: duration ? 'smooth' : 'auto' });
});
}
2018-03-17 18:26:18 +05:30
};
2021-03-08 18:12:59 +05:30
export const scrollToElementWithContext = (element) => {
2020-06-23 00:09:42 +05:30
const offsetMultiplier = -0.1;
return scrollToElement(element, { offset: window.innerHeight * offsetMultiplier });
};
2019-03-02 22:35:43 +05:30
/**
* Returns a function that can only be invoked once between
* each browser screen repaint.
* @param {Function} fn
*/
2021-03-08 18:12:59 +05:30
export const debounceByAnimationFrame = (fn) => {
2019-03-02 22:35:43 +05:30
let requestId;
return function debounced(...args) {
if (requestId) {
window.cancelAnimationFrame(requestId);
}
requestId = window.requestAnimationFrame(() => fn.apply(this, args));
};
};
2018-03-17 18:26:18 +05:30
/**
this will take in the `name` of the param you want to parse in the url
if the name does not exist this function will return `null`
otherwise it will return the value of the param key provided
*/
export const getParameterByName = (name, urlToParse) => {
const url = urlToParse || window.location.href;
const parsedName = name.replace(/[[\]]/g, '\\$&');
const regex = new RegExp(`[?&]${parsedName}(=([^&#]*)|&|#|$)`);
const results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
};
2019-02-15 15:39:39 +05:30
const handleSelectedRange = (range, restrictToNode) => {
// Make sure this range is within the restricting container
if (restrictToNode && !range.intersectsNode(restrictToNode)) return null;
// If only a part of the range is within the wanted container, we need to restrict the range to it
if (restrictToNode && !restrictToNode.contains(range.commonAncestorContainer)) {
if (!restrictToNode.contains(range.startContainer)) range.setStart(restrictToNode, 0);
if (!restrictToNode.contains(range.endContainer))
range.setEnd(restrictToNode, restrictToNode.childNodes.length);
}
2018-11-08 19:23:39 +05:30
const container = range.commonAncestorContainer;
// add context to fragment if needed
if (container.tagName === 'OL') {
const parentContainer = document.createElement(container.tagName);
parentContainer.appendChild(range.cloneContents());
return parentContainer;
}
return range.cloneContents();
};
2021-03-08 18:12:59 +05:30
export const getSelectedFragment = (restrictToNode) => {
2018-03-17 18:26:18 +05:30
const selection = window.getSelection();
if (selection.rangeCount === 0) return null;
2019-02-15 15:39:39 +05:30
// Most usages of the selection only want text from a part of the page (e.g. discussion)
if (restrictToNode && !selection.containsNode(restrictToNode, true)) return null;
2018-03-17 18:26:18 +05:30
const documentFragment = document.createDocumentFragment();
2019-02-15 15:39:39 +05:30
documentFragment.originalNodes = [];
2018-11-08 19:23:39 +05:30
2018-03-17 18:26:18 +05:30
for (let i = 0; i < selection.rangeCount; i += 1) {
2018-11-08 19:23:39 +05:30
const range = selection.getRangeAt(i);
2019-02-15 15:39:39 +05:30
const handledRange = handleSelectedRange(range, restrictToNode);
if (handledRange) {
documentFragment.appendChild(handledRange);
documentFragment.originalNodes.push(range.commonAncestorContainer);
}
2018-03-17 18:26:18 +05:30
}
2020-03-13 15:44:24 +05:30
if (documentFragment.textContent.length === 0 && documentFragment.children.length === 0) {
return null;
}
2018-03-17 18:26:18 +05:30
return documentFragment;
};
export const insertText = (target, text) => {
// Firefox doesn't support `document.execCommand('insertText', false, text)` on textareas
2018-11-08 19:23:39 +05:30
const { selectionStart, selectionEnd, value } = target;
2018-03-17 18:26:18 +05:30
const textBefore = value.substring(0, selectionStart);
const textAfter = value.substring(selectionEnd, value.length);
const insertedText = text instanceof Function ? text(textBefore, textAfter) : text;
const newText = textBefore + insertedText + textAfter;
// eslint-disable-next-line no-param-reassign
target.value = newText;
// eslint-disable-next-line no-param-reassign
2018-11-08 19:23:39 +05:30
target.selectionStart = selectionStart + insertedText.length;
// eslint-disable-next-line no-param-reassign
target.selectionEnd = selectionStart + insertedText.length;
2018-03-17 18:26:18 +05:30
// Trigger autosave
target.dispatchEvent(new Event('input'));
// Trigger autosize
const event = document.createEvent('Event');
event.initEvent('autosize:update', true, false);
target.dispatchEvent(event);
};
/**
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
*/
2021-03-08 18:12:59 +05:30
export const normalizeHeaders = (headers) => {
2018-03-17 18:26:18 +05:30
const upperCaseHeaders = {};
2021-03-08 18:12:59 +05:30
Object.keys(headers || {}).forEach((e) => {
2018-03-17 18:26:18 +05:30
upperCaseHeaders[e.toUpperCase()] = headers[e];
});
return upperCaseHeaders;
};
/**
* Parses pagination object string values into numbers.
*
* @param {Object} paginationInformation
* @returns {Object}
*/
2021-03-08 18:12:59 +05:30
export const parseIntPagination = (paginationInformation) => ({
2018-03-17 18:26:18 +05:30
perPage: parseInt(paginationInformation['X-PER-PAGE'], 10),
page: parseInt(paginationInformation['X-PAGE'], 10),
total: parseInt(paginationInformation['X-TOTAL'], 10),
totalPages: parseInt(paginationInformation['X-TOTAL-PAGES'], 10),
nextPage: parseInt(paginationInformation['X-NEXT-PAGE'], 10),
previousPage: parseInt(paginationInformation['X-PREV-PAGE'], 10),
});
/**
* Given a string of query parameters creates an object.
*
* @example
* `scope=all&page=2` -> { scope: 'all', page: '2'}
* `scope=all` -> { scope: 'all' }
* ``-> {}
* @param {String} query
* @returns {Object}
*/
export const parseQueryStringIntoObject = (query = '') => {
if (query === '') return {};
2018-11-08 19:23:39 +05:30
return query.split('&').reduce((acc, element) => {
const val = element.split('=');
Object.assign(acc, {
[val[0]]: decodeURIComponent(val[1]),
});
return acc;
}, {});
2018-03-17 18:26:18 +05:30
};
2018-03-27 19:54:05 +05:30
/**
* Converts object with key-value pairs
* into query-param string
*
* @param {Object} params
*/
2018-11-08 19:23:39 +05:30
export const objectToQueryString = (params = {}) =>
Object.keys(params)
2021-03-08 18:12:59 +05:30
.map((param) => `${param}=${params[param]}`)
2018-11-08 19:23:39 +05:30
.join('&');
2018-03-27 19:54:05 +05:30
2021-03-08 18:12:59 +05:30
export const buildUrlWithCurrentLocation = (param) => {
2018-12-05 23:21:45 +05:30
if (param) return `${window.location.pathname}${param}`;
return window.location.pathname;
};
2018-03-17 18:26:18 +05:30
/**
* Based on the current location and the string parameters provided
* creates a new entry in the history without reloading the page.
*
* @param {String} param
*/
2021-03-08 18:12:59 +05:30
export const historyPushState = (newUrl) => {
2018-03-17 18:26:18 +05:30
window.history.pushState({}, document.title, newUrl);
};
2020-03-13 15:44:24 +05:30
/**
* Based on the current location and the string parameters provided
* overwrites the current entry in the history without reloading the page.
*
* @param {String} param
*/
2021-03-08 18:12:59 +05:30
export const historyReplaceState = (newUrl) => {
2020-03-13 15:44:24 +05:30
window.history.replaceState({}, document.title, newUrl);
};
2019-02-15 15:39:39 +05:30
/**
2019-03-02 22:35:43 +05:30
* Returns true for a String value of "true" and false otherwise.
* This is the opposite of Boolean(...).toString().
* `parseBoolean` is idempotent.
2019-02-15 15:39:39 +05:30
*
* @param {String} value
* @returns {Boolean}
*/
2021-03-08 18:12:59 +05:30
export const parseBoolean = (value) => (value && value.toString()) === 'true';
2019-02-15 15:39:39 +05:30
2020-01-01 13:55:28 +05:30
export const BACKOFF_TIMEOUT = 'BACKOFF_TIMEOUT';
2019-03-02 22:35:43 +05:30
/**
* @callback backOffCallback
* @param {Function} next
* @param {Function} stop
*/
2018-03-17 18:26:18 +05:30
/**
* Back Off exponential algorithm
* backOff :: (Function<next, stop>, Number) -> Promise<Any, Error>
*
2019-03-02 22:35:43 +05:30
* @param {backOffCallback} fn function to be called
2018-03-17 18:26:18 +05:30
* @param {Number} timeout
* @return {Promise<Any, Error>}
* @example
* ```
* backOff(function (next, stop) {
* // Let's perform this function repeatedly for 60s or for the timeout provided.
*
* ourFunction()
* .then(function (result) {
* // continue if result is not what we need
* next();
*
* // when result is what we need let's stop with the repetions and jump out of the cycle
* stop(result);
* })
* .catch(function (error) {
* // if there is an error, we need to stop this with an error.
* stop(error);
* })
* }, 60000)
* .then(function (result) {})
* .catch(function (error) {
* // deal with errors passed to stop()
* })
* ```
*/
export const backOff = (fn, timeout = 60000) => {
const maxInterval = 32000;
let nextInterval = 2000;
let timeElapsed = 0;
return new Promise((resolve, reject) => {
2021-03-08 18:12:59 +05:30
const stop = (arg) => (arg instanceof Error ? reject(arg) : resolve(arg));
2018-03-17 18:26:18 +05:30
const next = () => {
if (timeElapsed < timeout) {
setTimeout(() => fn(next, stop), nextInterval);
timeElapsed += nextInterval;
nextInterval = Math.min(nextInterval + nextInterval, maxInterval);
2017-08-17 22:00:37 +05:30
} else {
2020-01-01 13:55:28 +05:30
reject(new Error(BACKOFF_TIMEOUT));
2017-08-17 22:00:37 +05:30
}
};
2018-03-17 18:26:18 +05:30
fn(next, stop);
});
};
export const spriteIcon = (icon, className = '') => {
const classAttribute = className.length > 0 ? `class="${className}"` : '';
return `<svg ${classAttribute}><use xlink:href="${gon.sprite_icons}#${icon}" /></svg>`;
};
/**
2020-04-08 14:13:33 +05:30
* @callback ConversionFunction
* @param {string} prop
*/
/**
* This function takes a conversion function as the first parameter
* and applies this function to each prop in the provided object.
2019-03-02 22:35:43 +05:30
*
* This method also supports additional params in `options` object
*
2020-04-08 14:13:33 +05:30
* @param {ConversionFunction} conversionFunction - Function to apply to each prop of the object.
2019-03-02 22:35:43 +05:30
* @param {Object} obj - Object to be converted.
* @param {Object} options - Object containing additional options.
* @param {boolean} options.deep - FLag to allow deep object converting
2020-04-08 14:13:33 +05:30
* @param {Array[]} options.dropKeys - List of properties to discard while building new object
* @param {Array[]} options.ignoreKeyNames - List of properties to leave intact (as snake_case) while building new object
2018-03-17 18:26:18 +05:30
*/
2020-04-08 14:13:33 +05:30
export const convertObjectProps = (conversionFunction, obj = {}, options = {}) => {
if (!isFunction(conversionFunction) || obj === null) {
2018-03-17 18:26:18 +05:30
return {};
}
2019-03-02 22:35:43 +05:30
const { deep = false, dropKeys = [], ignoreKeyNames = [] } = options;
2018-11-08 19:23:39 +05:30
2020-04-08 14:13:33 +05:30
const isObjParameterArray = Array.isArray(obj);
const initialValue = isObjParameterArray ? [] : {};
2018-03-17 18:26:18 +05:30
return Object.keys(obj).reduce((acc, prop) => {
2018-11-08 19:23:39 +05:30
const val = obj[prop];
2018-03-17 18:26:18 +05:30
2019-03-02 22:35:43 +05:30
// Drop properties from new object if
// there are any mentioned in options
if (dropKeys.indexOf(prop) > -1) {
return acc;
}
// Skip converting properties in new object
// if there are any mentioned in options
if (ignoreKeyNames.indexOf(prop) > -1) {
2020-04-08 14:13:33 +05:30
acc[prop] = val;
2019-03-02 22:35:43 +05:30
return acc;
}
if (deep && (isObject(val) || Array.isArray(val))) {
2020-04-08 14:13:33 +05:30
if (isObjParameterArray) {
acc[prop] = convertObjectProps(conversionFunction, val, options);
} else {
acc[conversionFunction(prop)] = convertObjectProps(conversionFunction, val, options);
}
2020-06-23 00:09:42 +05:30
} else if (isObjParameterArray) {
acc[prop] = val;
2018-11-08 19:23:39 +05:30
} else {
2020-04-08 14:13:33 +05:30
acc[conversionFunction(prop)] = val;
2018-11-08 19:23:39 +05:30
}
2018-03-17 18:26:18 +05:30
return acc;
2020-04-08 14:13:33 +05:30
}, initialValue);
2018-03-17 18:26:18 +05:30
};
2020-04-08 14:13:33 +05:30
/**
* This method takes in object with snake_case property names
* and returns a new object with camelCase property names
*
* Reasoning for this method is to ensure consistent property
* naming conventions across JS code.
*
* This method also supports additional params in `options` object
*
* @param {Object} obj - Object to be converted.
* @param {Object} options - Object containing additional options.
* @param {boolean} options.deep - FLag to allow deep object converting
* @param {Array[]} options.dropKeys - List of properties to discard while building new object
* @param {Array[]} options.ignoreKeyNames - List of properties to leave intact (as snake_case) while building new object
*/
export const convertObjectPropsToCamelCase = (obj = {}, options = {}) =>
convertObjectProps(convertToCamelCase, obj, options);
2020-01-01 13:55:28 +05:30
/**
* Converts all the object keys to snake case
*
2020-04-08 14:13:33 +05:30
* This method also supports additional params in `options` object
*
* @param {Object} obj - Object to be converted.
* @param {Object} options - Object containing additional options.
* @param {boolean} options.deep - FLag to allow deep object converting
* @param {Array[]} options.dropKeys - List of properties to discard while building new object
* @param {Array[]} options.ignoreKeyNames - List of properties to leave intact (as snake_case) while building new object
2020-01-01 13:55:28 +05:30
*/
2020-04-08 14:13:33 +05:30
export const convertObjectPropsToSnakeCase = (obj = {}, options = {}) =>
convertObjectProps(convertToSnakeCase, obj, options);
2020-01-01 13:55:28 +05:30
2018-03-27 19:54:05 +05:30
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() {
2018-11-08 19:23:39 +05:30
$(this)
.select()
2021-03-08 18:12:59 +05:30
.one('mouseup', (e) => {
2018-11-08 19:23:39 +05:30
e.preventDefault();
});
2018-03-27 19:54:05 +05:30
});
};
2018-11-18 11:00:15 +05:30
/**
* Method to round of values with decimal places
* with provided precision.
*
* Taken from https://stackoverflow.com/a/7343013/414749
*
* Eg; roundOffFloat(3.141592, 3) = 3.142
*
* Refer to spec/javascripts/lib/utils/common_utils_spec.js for
* more supported examples.
*
* @param {Float} number
* @param {Number} precision
*/
export const roundOffFloat = (number, precision = 0) => {
// eslint-disable-next-line no-restricted-properties
const multiplier = Math.pow(10, precision);
return Math.round(number * multiplier) / multiplier;
};
2021-04-29 21:17:54 +05:30
/**
* Method to round values to the nearest half (0.5)
*
* Eg; roundToNearestHalf(3.141592) = 3, roundToNearestHalf(3.41592) = 3.5
*
* Refer to spec/javascripts/lib/utils/common_utils_spec.js for
* more supported examples.
*
* @param {Float} number
* @returns {Float|Number}
*/
export const roundToNearestHalf = (num) => Math.round(num * 2).toFixed() / 2;
2021-01-29 00:20:46 +05:30
/**
* Method to round down values with decimal places
* with provided precision.
*
* Eg; roundDownFloat(3.141592, 3) = 3.141
*
* Refer to spec/javascripts/lib/utils/common_utils_spec.js for
* more supported examples.
*
* @param {Float} number
* @param {Number} precision
*/
export const roundDownFloat = (number, precision = 0) => {
// eslint-disable-next-line no-restricted-properties
const multiplier = Math.pow(10, precision);
return Math.floor(number * multiplier) / multiplier;
};
2018-12-05 23:21:45 +05:30
/**
* Represents navigation type constants of the Performance Navigation API.
* Detailed explanation see https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation.
*/
export const NavigationType = {
TYPE_NAVIGATE: 0,
TYPE_RELOAD: 1,
TYPE_BACK_FORWARD: 2,
TYPE_RESERVED: 255,
};
2019-12-04 20:38:33 +05:30
/**
* Method to perform case-insensitive search for a string
* within multiple properties and return object containing
* properties in case there are multiple matches or `null`
* if there's no match.
*
* Eg; Suppose we want to allow user to search using for a string
* within `iid`, `title`, `url` or `reference` props of a target object;
*
* const objectToSearch = {
* "iid": 1,
* "title": "Error omnis quos consequatur ullam a vitae sed omnis libero cupiditate. &3",
* "url": "/groups/gitlab-org/-/epics/1",
* "reference": "&1",
* };
*
* Following is how we call searchBy and the return values it will yield;
*
* - `searchBy('omnis', objectToSearch);`: This will return `{ title: ... }` as our
* query was found within title prop we only return that.
* - `searchBy('1', objectToSearch);`: This will return `{ "iid": ..., "reference": ..., "url": ... }`.
* - `searchBy('https://gitlab.com/groups/gitlab-org/-/epics/1', objectToSearch);`:
* This will return `{ "url": ... }`.
* - `searchBy('foo', objectToSearch);`: This will return `null` as no property value
* matched with our query.
*
* You can learn more about behaviour of this method by referring to tests
* within `spec/javascripts/lib/utils/common_utils_spec.js`.
*
* @param {string} query String to search for
* @param {object} searchSpace Object containing properties to search in for `query`
*/
export const searchBy = (query = '', searchSpace = {}) => {
const targetKeys = searchSpace !== null ? Object.keys(searchSpace) : [];
if (!query || !targetKeys.length) {
return null;
}
const normalizedQuery = query.toLowerCase();
const matches = targetKeys
2021-03-08 18:12:59 +05:30
.filter((item) => {
2019-12-04 20:38:33 +05:30
const searchItem = `${searchSpace[item]}`.toLowerCase();
return (
searchItem.indexOf(normalizedQuery) > -1 ||
normalizedQuery.indexOf(searchItem) > -1 ||
normalizedQuery === searchItem
);
})
.reduce((acc, prop) => {
const match = acc;
match[prop] = searchSpace[prop];
return acc;
}, {});
return Object.keys(matches).length ? matches : null;
};
2019-07-31 22:56:46 +05:30
/**
* Checks if the given Label has a special syntax `::` in
* it's title.
*
* Expected Label to be an Object with `title` as a key:
* { title: 'LabelTitle', ...otherProperties };
*
* @param {Object} label
* @returns Boolean
*/
export const isScopedLabel = ({ title = '' }) => title.indexOf('::') !== -1;
2020-04-22 19:07:51 +05:30
// Methods to set and get Cookie
export const setCookie = (name, value) => Cookies.set(name, value, { expires: 365 });
2021-03-08 18:12:59 +05:30
export const getCookie = (name) => Cookies.get(name);
2020-04-22 19:07:51 +05:30
2021-03-08 18:12:59 +05:30
export const removeCookie = (name) => Cookies.remove(name);
2020-04-22 19:07:51 +05:30
/**
* Returns the status of a feature flag.
* Currently, there is no way to access feature
* flags in Vuex other than directly tapping into
* window.gon.
*
* This should only be used on Vuex. If feature flags
* need to be accessed in Vue components consider
* using the Vue feature flag mixin.
*
* @param {String} flag Feature flag
* @returns {Boolean} on/off
*/
2021-03-08 18:12:59 +05:30
export const isFeatureFlagEnabled = (flag) => window.gon.features?.[flag];
2021-03-11 19:13:27 +05:30
/**
* This method takes in array with snake_case strings
* and returns a new array with camelCase strings
*
* @param {Array[String]} array - Array to be converted
* @returns {Array[String]} Converted array
*/
export const convertArrayToCamelCase = (array) => array.map((i) => convertToCamelCase(i));