3 files changed, 80 insertions, 5 deletions

diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 59930f8d4a3..2906604da57 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -7,7 +7,7 @@ import axios from './axios_utils';
 import { getLocationHash } from './url_utility';
 import { convertToCamelCase } from './text_utility';
 import { isObject } from './type_utility';
-import BreakpointInstance from '../../breakpoints';
+import breakpointInstance from '../../breakpoints';
 
 export const getPagePath = (index = 0) => {
   const page = $('body').attr('data-page') || '';
@@ -198,11 +198,10 @@ export const contentTop = () => {
   const mrTabsHeight = $('.merge-request-tabs').outerHeight() || 0;
   const headerHeight = $('.navbar-gitlab').outerHeight() || 0;
   const diffFilesChanged = $('.js-diff-files-changed').outerHeight() || 0;
-  const mdScreenOrBigger = ['lg', 'md'].includes(BreakpointInstance.getBreakpointSize());
+  const isDesktop = breakpointInstance.isDesktop();
   const diffFileTitleBar =
-    (mdScreenOrBigger && $('.diff-file .file-title-flex-parent:visible').outerHeight()) || 0;
-  const compareVersionsHeaderHeight =
-    (mdScreenOrBigger && $('.mr-version-controls').outerHeight()) || 0;
+    (isDesktop && $('.diff-file .file-title-flex-parent:visible').outerHeight()) || 0;
+  const compareVersionsHeaderHeight = (isDesktop && $('.mr-version-controls').outerHeight()) || 0;
 
   return (
     perfBar +
diff --git a/app/assets/javascripts/lib/utils/highlight.js b/app/assets/javascripts/lib/utils/highlight.js
new file mode 100644
index 00000000000..4f7eff2cca1
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/highlight.js
@@ -0,0 +1,44 @@
+import fuzzaldrinPlus from 'fuzzaldrin-plus';
+import _ from 'underscore';
+import sanitize from 'sanitize-html';
+
+/**
+ * Wraps substring matches with HTML `<span>` elements.
+ * Inputs are sanitized before highlighting, so this
+ * filter is safe to use with `v-html` (as long as `matchPrefix`
+ * and `matchSuffix` are not being dynamically generated).
+ *
+ * Note that this function can't be used inside `v-html` as a filter
+ * (Vue filters cannot be used inside `v-html`).
+ *
+ * @param {String} string The string to highlight
+ * @param {String} match The substring match to highlight in the string
+ * @param {String} matchPrefix The string to insert at the beginning of a match
+ * @param {String} matchSuffix The string to insert at the end of a match
+ */
+export default function highlight(string, match = '', matchPrefix = '<b>', matchSuffix = '</b>') {
+  if (_.isUndefined(string) || _.isNull(string)) {
+    return '';
+  }
+
+  if (_.isUndefined(match) || _.isNull(match) || match === '') {
+    return string;
+  }
+
+  const sanitizedValue = sanitize(string.toString(), { allowedTags: [] });
+
+  // occurences is an array of character indices that should be
+  // highlighted in the original string, i.e. [3, 4, 5, 7]
+  const occurences = fuzzaldrinPlus.match(sanitizedValue, match.toString());
+
+  return sanitizedValue
+    .split('')
+    .map((character, i) => {
+      if (_.contains(occurences, i)) {
+        return `${matchPrefix}${character}${matchSuffix}`;
+      }
+
+      return character;
+    })
+    .join('');
+}
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index c49b1bb5a2f..1b7f8732c65 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -1,3 +1,5 @@
+import _ from 'underscore';
+
 /**
  * Adds a , to a string composed by numbers, at every 3 chars.
  *
@@ -160,3 +162,33 @@ export const splitCamelCase = string =>
     .replace(/([A-Z]+)([A-Z][a-z])/g, ' $1 $2')
     .replace(/([a-z\d])([A-Z])/g, '$1 $2')
     .trim();
+
+/**
+ * Intelligently truncates an item's namespace by doing two things:
+ * 1. Only include group names in path by removing the item name
+ * 2. Only include the first and last group names in the path
+ *    when the namespace includes more than 2 groups
+ *
+ * @param {String} string A string namespace,
+ *      i.e. "My Group / My Subgroup / My Project"
+ */
+export const truncateNamespace = (string = '') => {
+  if (_.isNull(string) || !_.isString(string)) {
+    return '';
+  }
+
+  const namespaceArray = string.split(' / ');
+
+  if (namespaceArray.length === 1) {
+    return string;
+  }
+
+  namespaceArray.splice(-1, 1);
+  let namespace = namespaceArray.join(' / ');
+
+  if (namespaceArray.length > 2) {
+    namespace = `${namespaceArray[0]} / ... / ${namespaceArray.pop()}`;
+  }
+
+  return namespace;
+};