9 files changed, 99 insertions, 45 deletions

diff --git a/app/assets/javascripts/lib/dompurify.js b/app/assets/javascripts/lib/dompurify.js
index 27760e483aa..5372f6555d2 100644
--- a/app/assets/javascripts/lib/dompurify.js
+++ b/app/assets/javascripts/lib/dompurify.js
@@ -18,7 +18,7 @@ export const defaultConfig = {
     'data-disable',
     'data-turbo',
   ],
-  FORBID_TAGS: ['style', 'mstyle'],
+  FORBID_TAGS: ['style', 'mstyle', 'form'],
   ALLOW_UNKNOWN_PROTOCOLS: true,
 };
 
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index beced4f9144..4ce63d518a6 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -4,9 +4,9 @@
 
 import { GlBreakpointInstance as breakpointInstance } from '@gitlab/ui/dist/utils';
 import $ from 'jquery';
-import { isFunction, defer } from 'lodash';
+import { isFunction, defer, escape } from 'lodash';
 import Cookies from '~/lib/utils/cookies';
-import { SCOPED_LABEL_DELIMITER } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
+import { SCOPED_LABEL_DELIMITER } from '~/sidebar/components/labels/labels_select_widget/constants';
 import { convertToCamelCase, convertToSnakeCase } from './text_utility';
 import { isObject } from './type_utility';
 import { getLocationHash } from './url_utility';
@@ -28,16 +28,12 @@ export const checkPageAndAction = (page, action) => {
 export const isInIncidentPage = () => checkPageAndAction('incidents', 'show');
 export const isInIssuePage = () => checkPageAndAction('issues', 'show');
 export const isInDesignPage = () => checkPageAndAction('issues', 'designs');
-export const isInMRPage = () => checkPageAndAction('merge_requests', 'show');
+export const isInMRPage = () =>
+  checkPageAndAction('merge_requests', 'show') || checkPageAndAction('merge_requests', 'diffs');
 export const isInEpicPage = () => checkPageAndAction('epics', 'show');
 
 export const getDashPath = (path = window.location.pathname) => path.split('/-/')[1] || null;
 
-export const getCspNonceValue = () => {
-  const metaTag = document.querySelector('meta[name=csp-nonce]');
-  return metaTag && metaTag.content;
-};
-
 export const rstrip = (val) => {
   if (val) {
     return val.replace(/\s+$/, '');
@@ -469,7 +465,7 @@ export const backOff = (fn, timeout = 60000) => {
 export const spriteIcon = (icon, className = '') => {
   const classAttribute = className.length > 0 ? `class="${className}"` : '';
 
-  return `<svg ${classAttribute}><use xlink:href="${gon.sprite_icons}#${icon}" /></svg>`;
+  return `<svg ${classAttribute}><use xlink:href="${gon.sprite_icons}#${escape(icon)}" /></svg>`;
 };
 
 /**
@@ -715,3 +711,16 @@ export const getFirstPropertyValue = (data) => {
 
   return data[key];
 };
+
+// TODO: remove when FF `new_fonts` is removed https://gitlab.com/gitlab-org/gitlab/-/issues/379147
+/**
+ * This method checks the FF `new_fonts`
+ * as well as a query parameter `new_fonts`.
+ * If either of them is enabled, new fonts will be applied.
+ *
+ * @returns Boolean Whether to apply new fonts
+ */
+export const useNewFonts = () => {
+  const hasQueryParam = new URLSearchParams(window.location.search).has('new_fonts');
+  return window?.gon.features?.newFonts || hasQueryParam;
+};
diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
index 3788d8ab20c..ea91ccec546 100644
--- a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
+++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_modal.vue
@@ -1,10 +1,11 @@
 <script>
-import { GlModal, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlModal } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { __ } from '~/locale';
 
 export default {
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   components: {
     GlModal,
diff --git a/app/assets/javascripts/lib/utils/constants.js b/app/assets/javascripts/lib/utils/constants.js
index 379c57f3945..2c8953237cf 100644
--- a/app/assets/javascripts/lib/utils/constants.js
+++ b/app/assets/javascripts/lib/utils/constants.js
@@ -1,6 +1,5 @@
 export const BYTES_IN_KIB = 1024;
 export const DEFAULT_DEBOUNCE_AND_THROTTLE_MS = 250;
-export const HIDDEN_CLASS = 'hidden';
 export const THOUSAND = 1000;
 export const TRUNCATE_WIDTH_DEFAULT_WIDTH = 80;
 export const TRUNCATE_WIDTH_DEFAULT_FONT_SIZE = 12;
diff --git a/app/assets/javascripts/lib/utils/create_and_submit_form.js b/app/assets/javascripts/lib/utils/create_and_submit_form.js
new file mode 100644
index 00000000000..fce4f898f2f
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/create_and_submit_form.js
@@ -0,0 +1,26 @@
+import csrf from '~/lib/utils/csrf';
+
+export const createAndSubmitForm = ({ url, data }) => {
+  const form = document.createElement('form');
+
+  form.action = url;
+  // For now we only support 'post'.
+  // `form.method` doesn't support other methods so we would need to
+  // use a hidden `_method` input, which is out of scope for now.
+  form.method = 'post';
+  form.style.display = 'none';
+
+  Object.entries(data)
+    .concat([['authenticity_token', csrf.token]])
+    .forEach(([key, value]) => {
+      const input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = key;
+      input.value = value;
+
+      form.appendChild(input);
+    });
+
+  document.body.appendChild(form);
+  form.submit();
+};
diff --git a/app/assets/javascripts/lib/utils/dom_utils.js b/app/assets/javascripts/lib/utils/dom_utils.js
index cafee641174..317c401e404 100644
--- a/app/assets/javascripts/lib/utils/dom_utils.js
+++ b/app/assets/javascripts/lib/utils/dom_utils.js
@@ -118,3 +118,24 @@ export const getContentWrapperHeight = (contentWrapperClass) => {
   const wrapperEl = document.querySelector(contentWrapperClass);
   return wrapperEl ? `${wrapperEl.offsetTop}px` : '';
 };
+
+/**
+ * Replaces comment nodes in a DOM tree with a different element
+ * containing the text of the comment.
+ *
+ * @param {*} el
+ * @param {*} tagName
+ */
+export const replaceCommentsWith = (el, tagName) => {
+  const iterator = document.createNodeIterator(el, NodeFilter.SHOW_COMMENT);
+  let commentNode = iterator.nextNode();
+
+  while (commentNode) {
+    const newNode = document.createElement(tagName);
+    newNode.textContent = commentNode.textContent;
+
+    commentNode.parentNode.replaceChild(newNode, commentNode);
+
+    commentNode = iterator.nextNode();
+  }
+};
diff --git a/app/assets/javascripts/lib/utils/http_status.js b/app/assets/javascripts/lib/utils/http_status.js
index c5190592bb6..ec0d8d433a5 100644
--- a/app/assets/javascripts/lib/utils/http_status.js
+++ b/app/assets/javascripts/lib/utils/http_status.js
@@ -1,45 +1,43 @@
-/**
- * exports HTTP status codes
- */
+export const HTTP_STATUS_ABORTED = 0;
+export const HTTP_STATUS_CREATED = 201;
+export const HTTP_STATUS_ACCEPTED = 202;
+export const HTTP_STATUS_NON_AUTHORITATIVE_INFORMATION = 203;
+export const HTTP_STATUS_NO_CONTENT = 204;
+export const HTTP_STATUS_RESET_CONTENT = 205;
+export const HTTP_STATUS_PARTIAL_CONTENT = 206;
+export const HTTP_STATUS_MULTI_STATUS = 207;
+export const HTTP_STATUS_ALREADY_REPORTED = 208;
+export const HTTP_STATUS_IM_USED = 226;
+export const HTTP_STATUS_METHOD_NOT_ALLOWED = 405;
+export const HTTP_STATUS_CONFLICT = 409;
+export const HTTP_STATUS_GONE = 410;
+export const HTTP_STATUS_PAYLOAD_TOO_LARGE = 413;
+export const HTTP_STATUS_UNPROCESSABLE_ENTITY = 422;
+export const HTTP_STATUS_TOO_MANY_REQUESTS = 429;
 
+// TODO move the rest of the status codes to primitive constants
+// https://docs.gitlab.com/ee/development/fe_guide/style/javascript.html#export-constants-as-primitives
 const httpStatusCodes = {
-  ABORTED: 0,
   OK: 200,
-  CREATED: 201,
-  ACCEPTED: 202,
-  NON_AUTHORITATIVE_INFORMATION: 203,
-  NO_CONTENT: 204,
-  RESET_CONTENT: 205,
-  PARTIAL_CONTENT: 206,
-  MULTI_STATUS: 207,
-  ALREADY_REPORTED: 208,
-  IM_USED: 226,
-  MULTIPLE_CHOICES: 300,
   BAD_REQUEST: 400,
   UNAUTHORIZED: 401,
   FORBIDDEN: 403,
   NOT_FOUND: 404,
-  METHOD_NOT_ALLOWED: 405,
-  CONFLICT: 409,
-  GONE: 410,
-  PAYLOAD_TOO_LARGE: 413,
-  UNPROCESSABLE_ENTITY: 422,
-  TOO_MANY_REQUESTS: 429,
   INTERNAL_SERVER_ERROR: 500,
   SERVICE_UNAVAILABLE: 503,
 };
 
 export const successCodes = [
   httpStatusCodes.OK,
-  httpStatusCodes.CREATED,
-  httpStatusCodes.ACCEPTED,
-  httpStatusCodes.NON_AUTHORITATIVE_INFORMATION,
-  httpStatusCodes.NO_CONTENT,
-  httpStatusCodes.RESET_CONTENT,
-  httpStatusCodes.PARTIAL_CONTENT,
-  httpStatusCodes.MULTI_STATUS,
-  httpStatusCodes.ALREADY_REPORTED,
-  httpStatusCodes.IM_USED,
+  HTTP_STATUS_CREATED,
+  HTTP_STATUS_ACCEPTED,
+  HTTP_STATUS_NON_AUTHORITATIVE_INFORMATION,
+  HTTP_STATUS_NO_CONTENT,
+  HTTP_STATUS_RESET_CONTENT,
+  HTTP_STATUS_PARTIAL_CONTENT,
+  HTTP_STATUS_MULTI_STATUS,
+  HTTP_STATUS_ALREADY_REPORTED,
+  HTTP_STATUS_IM_USED,
 ];
 
 export default httpStatusCodes;
diff --git a/app/assets/javascripts/lib/utils/poll.js b/app/assets/javascripts/lib/utils/poll.js
index 71782c9a4ce..73add1e37ee 100644
--- a/app/assets/javascripts/lib/utils/poll.js
+++ b/app/assets/javascripts/lib/utils/poll.js
@@ -1,5 +1,5 @@
 import { normalizeHeaders } from './common_utils';
-import httpStatusCodes, { successCodes } from './http_status';
+import { HTTP_STATUS_ABORTED, successCodes } from './http_status';
 
 /**
  * Polling utility for handling realtime updates.
@@ -108,7 +108,7 @@ export default class Poll {
       })
       .catch((error) => {
         notificationCallback(false);
-        if (error.status === httpStatusCodes.ABORTED) {
+        if (error.status === HTTP_STATUS_ABORTED) {
           return;
         }
         errorCallback(error);
diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js
index b1a0baf8150..f33484f4192 100644
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -86,7 +86,7 @@ export function cleanLeadingSeparator(path) {
   return path.replace(PATH_SEPARATOR_LEADING_REGEX, '');
 }
 
-function cleanEndingSeparator(path) {
+export function cleanEndingSeparator(path) {
   return path.replace(PATH_SEPARATOR_ENDING_REGEX, '');
 }