Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

9 files changed, 56 insertions, 24 deletions

diff --git a/app/assets/javascripts/lib/gfm/index.js b/app/assets/javascripts/lib/gfm/index.js
index 4e704eb69b2..b4f941294de 100644
--- a/app/assets/javascripts/lib/gfm/index.js
+++ b/app/assets/javascripts/lib/gfm/index.js
@@ -1,10 +1,33 @@
 import { unified } from 'unified';
 import remarkParse from 'remark-parse';
-import remarkRehype from 'remark-rehype';
+import remarkGfm from 'remark-gfm';
+import remarkRehype, { all } from 'remark-rehype';
 import rehypeRaw from 'rehype-raw';
 
 const createParser = () => {
-  return unified().use(remarkParse).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeRaw);
+  return unified()
+    .use(remarkParse)
+    .use(remarkGfm)
+    .use(remarkRehype, {
+      allowDangerousHtml: true,
+      handlers: {
+        footnoteReference: (h, node) =>
+          h(
+            node.position,
+            'footnoteReference',
+            { identifier: node.identifier, label: node.label },
+            [],
+          ),
+        footnoteDefinition: (h, node) =>
+          h(
+            node.position,
+            'footnoteDefinition',
+            { identifier: node.identifier, label: node.label },
+            all(h, node),
+          ),
+      },
+    })
+    .use(rehypeRaw);
 };
 
 const compilerFactory = (renderer) =>
diff --git a/app/assets/javascripts/lib/graphql.js b/app/assets/javascripts/lib/graphql.js
index 451950346b0..cfcce234bfb 100644
--- a/app/assets/javascripts/lib/graphql.js
+++ b/app/assets/javascripts/lib/graphql.js
@@ -105,7 +105,7 @@ export default (resolvers = {}, config = {}) => {
   const {
     baseUrl,
     batchMax = 10,
-    cacheConfig,
+    cacheConfig = { typePolicies: {}, possibleTypes: {} },
     fetchPolicy = fetchPolicies.CACHE_FIRST,
     typeDefs,
     path = '/api/graphql',
@@ -166,6 +166,7 @@ export default (resolvers = {}, config = {}) => {
         PerformanceBarService.interceptor({
           config: {
             url: httpResponse.url,
+            operationName: operation.operationName,
           },
           headers: {
             'x-request-id': httpResponse.headers.get('x-request-id'),
@@ -221,9 +222,15 @@ export default (resolvers = {}, config = {}) => {
     typeDefs,
     link: appLink,
     cache: new InMemoryCache({
-      typePolicies,
-      possibleTypes,
       ...cacheConfig,
+      typePolicies: {
+        ...typePolicies,
+        ...cacheConfig.typePolicies,
+      },
+      possibleTypes: {
+        ...possibleTypes,
+        ...cacheConfig.possibleTypes,
+      },
     }),
     resolvers,
     defaultOptions: {
diff --git a/app/assets/javascripts/lib/utils/color_utils.js b/app/assets/javascripts/lib/utils/color_utils.js
index 66d52051905..3d8df4fde05 100644
--- a/app/assets/javascripts/lib/utils/color_utils.js
+++ b/app/assets/javascripts/lib/utils/color_utils.js
@@ -67,7 +67,7 @@ export function darkModeEnabled() {
   const ideDarkThemes = ['dark', 'solarized-dark', 'monokai'];
 
   // eslint-disable-next-line @gitlab/require-i18n-strings
-  const isWebIde = document.body.dataset.page.startsWith('ide:');
+  const isWebIde = document.body.dataset.page?.startsWith('ide:');
 
   if (isWebIde) {
     return ideDarkThemes.includes(window.gon?.user_color_scheme);
diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
index 173116062c9..2dc479db80a 100644
--- a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
+++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
@@ -56,7 +56,7 @@ export function confirmAction(
 export function confirmViaGlModal(message, element) {
   const primaryBtnConfig = {};
 
-  const confirmBtnVariant = element.getAttribute('data-confirm-btn-variant');
+  const { confirmBtnVariant } = element.dataset;
 
   if (confirmBtnVariant) {
     primaryBtnConfig.primaryBtnVariant = confirmBtnVariant;
diff --git a/app/assets/javascripts/lib/utils/dom_utils.js b/app/assets/javascripts/lib/utils/dom_utils.js
index 4262329aae7..bca6978c206 100644
--- a/app/assets/javascripts/lib/utils/dom_utils.js
+++ b/app/assets/javascripts/lib/utils/dom_utils.js
@@ -67,17 +67,6 @@ export const parseBooleanDataAttributes = ({ dataset }, names) =>
 export const isElementVisible = (element) =>
   Boolean(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
 
-/**
- * The opposite of `isElementVisible`.
- * Returns whether or not the provided element is currently hidden.
- * This function operates identically to jQuery's `:hidden` pseudo-selector.
- * Documentation for this selector: https://api.jquery.com/hidden-selector/
- * Implementation of this selector: https://github.com/jquery/jquery/blob/d0ce00cdfa680f1f0c38460bc51ea14079ae8b07/src/css/hiddenVisibleSelectors.js#L6
- * @param {HTMLElement} element The element to test
- * @returns {Boolean} `true` if the element is currently hidden, otherwise false
- */
-export const isElementHidden = (element) => !isElementVisible(element);
-
 export const getParents = (element) => {
   const parents = [];
   let parent = element.parentNode;
diff --git a/app/assets/javascripts/lib/utils/forms.js b/app/assets/javascripts/lib/utils/forms.js
index b58aef15dda..1d8c6ee23fc 100644
--- a/app/assets/javascripts/lib/utils/forms.js
+++ b/app/assets/javascripts/lib/utils/forms.js
@@ -119,12 +119,14 @@ export const parseRailsFormFields = (mountEl) => {
     }
 
     const fieldNameCamelCase = convertToCamelCase(fieldName);
-    const { id, placeholder, name, value, type, checked } = input;
+    const { id, placeholder, name, value, type, checked, maxLength, pattern } = input;
     const attributes = {
       name,
       id,
       value,
       ...(placeholder && { placeholder }),
+      ...(input.hasAttribute('maxlength') && { maxLength }),
+      ...(pattern && { pattern }),
     };
 
     // Store radio buttons and checkboxes as an array so they can be
diff --git a/app/assets/javascripts/lib/utils/rails_ujs.js b/app/assets/javascripts/lib/utils/rails_ujs.js
index b4f425da871..48f1b32526f 100644
--- a/app/assets/javascripts/lib/utils/rails_ujs.js
+++ b/app/assets/javascripts/lib/utils/rails_ujs.js
@@ -37,9 +37,7 @@ function monkeyPatchConfirmModal() {
   Rails.confirm = confirmViaModal;
 }
 
-if (gon?.features?.bootstrapConfirmationModals) {
-  monkeyPatchConfirmModal();
-}
+monkeyPatchConfirmModal();
 
 export const initRails = () => {
   // eslint-disable-next-line no-underscore-dangle
diff --git a/app/assets/javascripts/lib/utils/table_utility.js b/app/assets/javascripts/lib/utils/table_utility.js
index 6d66335b832..5d3aba9f4ed 100644
--- a/app/assets/javascripts/lib/utils/table_utility.js
+++ b/app/assets/javascripts/lib/utils/table_utility.js
@@ -2,6 +2,7 @@ import { convertToSnakeCase, convertToCamelCase } from '~/lib/utils/text_utility
 import { DEFAULT_TH_CLASSES } from './constants';
 
 /**
+ * Deprecated: use thWidthPercent instead
  * Generates the table header classes to be used for GlTable fields.
  *
  * @param {Number} width - The column width as a percentage.
@@ -10,6 +11,15 @@ import { DEFAULT_TH_CLASSES } from './constants';
 export const thWidthClass = (width) => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`;
 
 /**
+ * Generates the table header class for width to be used for GlTable fields.
+ *
+ * @param {Number} width - The column width as a percentage. Only accepts values
+ * as defined in https://gitlab.com/gitlab-org/gitlab-ui/blob/main/src/scss/utility-mixins/sizing.scss
+ * @returns {String} The class to be used in GlTable fields object.
+ */
+export const thWidthPercent = (width) => `gl-w-${width}p`;
+
+/**
  * Converts a GlTable sort-changed event object into string format.
  * This string can be used as a sort argument on GraphQL queries.
  *
diff --git a/app/assets/javascripts/lib/utils/users_cache.js b/app/assets/javascripts/lib/utils/users_cache.js
index bd000bb26fe..670acbbabd7 100644
--- a/app/assets/javascripts/lib/utils/users_cache.js
+++ b/app/assets/javascripts/lib/utils/users_cache.js
@@ -29,8 +29,11 @@ class UsersCache extends Cache {
     }
 
     return getUser(userId).then(({ data }) => {
-      this.internalStorage[userId] = data;
-      return data;
+      this.internalStorage[userId] = {
+        ...this.get(userId),
+        ...data,
+      };
+      return this.internalStorage[userId];
     });
     // missing catch is intentional, error handling depends on use case
   }