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

6 files changed, 98 insertions, 24 deletions

diff --git a/app/assets/javascripts/behaviors/components/sandboxed_mermaid.vue b/app/assets/javascripts/behaviors/components/sandboxed_mermaid.vue
new file mode 100644
index 00000000000..6b4110cff02
--- /dev/null
+++ b/app/assets/javascripts/behaviors/components/sandboxed_mermaid.vue
@@ -0,0 +1,77 @@
+<script>
+import {
+  getSandboxFrameSrc,
+  BUFFER_IFRAME_HEIGHT,
+  SANDBOX_ATTRIBUTES,
+} from '../markdown/render_sandboxed_mermaid';
+
+export default {
+  name: 'SandboxedMermaid',
+
+  props: {
+    source: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      iframeHeight: BUFFER_IFRAME_HEIGHT,
+      sandboxFrameSrc: getSandboxFrameSrc(),
+    };
+  },
+
+  watch: {
+    source() {
+      this.updateDiagram();
+    },
+  },
+
+  mounted() {
+    window.addEventListener('message', this.onPostMessage, false);
+  },
+
+  destroyed() {
+    window.removeEventListener('message', this.onPostMessage);
+  },
+
+  methods: {
+    getSandboxFrameSrc,
+
+    onPostMessage(event) {
+      const container = this.$refs.diagramContainer;
+
+      if (event.source === container?.contentWindow) {
+        this.iframeHeight = Number(event.data.h) + BUFFER_IFRAME_HEIGHT;
+      }
+    },
+
+    updateDiagram() {
+      const container = this.$refs.diagramContainer;
+
+      // Potential risk associated with '*' discussed in below thread
+      // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/74414#note_735183398
+      container.contentWindow?.postMessage(this.source, '*');
+      container.addEventListener('load', () => {
+        container.contentWindow?.postMessage(this.source, '*');
+      });
+    },
+  },
+
+  sandboxFrameSrc: getSandboxFrameSrc(),
+  sandboxAttributes: SANDBOX_ATTRIBUTES,
+};
+</script>
+<template>
+  <iframe
+    ref="diagramContainer"
+    :src="$options.sandboxFrameSrc"
+    :sandbox="$options.sandboxAttributes"
+    frameborder="0"
+    scrolling="no"
+    width="100%"
+    :height="iframeHeight"
+  >
+  </iframe>
+</template>
diff --git a/app/assets/javascripts/behaviors/markdown/render_gfm.js b/app/assets/javascripts/behaviors/markdown/render_gfm.js
index 063393c9cd1..c9ae3706383 100644
--- a/app/assets/javascripts/behaviors/markdown/render_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/render_gfm.js
@@ -1,10 +1,8 @@
 import $ from 'jquery';
 import syntaxHighlight from '~/syntax_highlight';
-import initUserPopovers from '../../user_popovers';
 import highlightCurrentUser from './highlight_current_user';
 import { renderKroki } from './render_kroki';
 import renderMath from './render_math';
-import renderMermaid from './render_mermaid';
 import renderSandboxedMermaid from './render_sandboxed_mermaid';
 import renderMetrics from './render_metrics';
 
@@ -16,19 +14,15 @@ $.fn.renderGFM = function renderGFM() {
   syntaxHighlight(this.find('.js-syntax-highlight').get());
   renderKroki(this.find('.js-render-kroki[hidden]').get());
   renderMath(this.find('.js-render-math'));
-  if (gon.features?.sandboxedMermaid) {
-    renderSandboxedMermaid(this.find('.js-render-mermaid'));
-  } else {
-    renderMermaid(this.find('.js-render-mermaid'));
-  }
+  renderSandboxedMermaid(this.find('.js-render-mermaid'));
+
   highlightCurrentUser(this.find('.gfm-project_member').get());
-  initUserPopovers(this.find('.js-user-link').get());
 
-  const mrPopoverElements = this.find('.gfm-merge_request').get();
-  if (mrPopoverElements.length) {
-    import(/* webpackChunkName: 'MrPopoverBundle' */ '~/mr_popover')
-      .then(({ default: initMRPopovers }) => {
-        initMRPopovers(mrPopoverElements);
+  const issuablePopoverElements = this.find('.gfm-issue, .gfm-merge_request').get();
+  if (issuablePopoverElements.length) {
+    import(/* webpackChunkName: 'IssuablePopoverBundle' */ '~/issuable/popover')
+      .then(({ default: initIssuablePopovers }) => {
+        initIssuablePopovers(issuablePopoverElements);
       })
       .catch(() => {});
   }
diff --git a/app/assets/javascripts/behaviors/markdown/render_kroki.js b/app/assets/javascripts/behaviors/markdown/render_kroki.js
index abe71694d73..5fd910dd6cc 100644
--- a/app/assets/javascripts/behaviors/markdown/render_kroki.js
+++ b/app/assets/javascripts/behaviors/markdown/render_kroki.js
@@ -55,8 +55,8 @@ export function renderKroki(krokiImages) {
 
     // A single Kroki image is processed multiple times for some reason,
     // so this condition ensures we only create one alert per Kroki image
-    if (!parent.hasAttribute('data-kroki-processed')) {
-      parent.setAttribute('data-kroki-processed', 'true');
+    if (!Object.prototype.hasOwnProperty.call(parent.dataset, 'krokiProcessed')) {
+      parent.dataset.krokiProcessed = 'true';
       parent.after(createAlert(krokiImage));
     }
   });
diff --git a/app/assets/javascripts/behaviors/markdown/render_math.js b/app/assets/javascripts/behaviors/markdown/render_math.js
index 12f47255bdf..af7aac4cf36 100644
--- a/app/assets/javascripts/behaviors/markdown/render_math.js
+++ b/app/assets/javascripts/behaviors/markdown/render_math.js
@@ -1,6 +1,7 @@
 import { spriteIcon } from '~/lib/utils/common_utils';
 import { differenceInMilliseconds } from '~/lib/utils/datetime_utility';
 import { s__ } from '~/locale';
+import { unrestrictedPages } from './constants';
 
 // Renders math using KaTeX in any element with the
 // `js-render-math` class
@@ -48,6 +49,7 @@ class SafeMathRenderer {
     this.renderElement = this.renderElement.bind(this);
     this.render = this.render.bind(this);
     this.attachEvents = this.attachEvents.bind(this);
+    this.pageName = document.querySelector('body').dataset.page;
   }
 
   renderElement(chosenEl) {
@@ -56,7 +58,7 @@ class SafeMathRenderer {
     }
 
     const el = chosenEl || this.queue.shift();
-    const forceRender = Boolean(chosenEl);
+    const forceRender = Boolean(chosenEl) || unrestrictedPages.includes(this.pageName);
     const text = el.textContent;
 
     el.removeAttribute('style');
@@ -79,7 +81,7 @@ class SafeMathRenderer {
                 'math|Displaying this math block may cause performance issues on this page',
               )}</div>
               <div class="gl-alert-actions">
-                <button class="js-lazy-render-math btn gl-alert-action btn-primary btn-md gl-button">Display anyway</button>
+                <button class="js-lazy-render-math btn gl-alert-action btn-confirm btn-md gl-button">Display anyway</button>
               </div>
             </div>
             <button type="button" class="close" data-dismiss="alert" aria-label="Close">
@@ -110,7 +112,7 @@ class SafeMathRenderer {
 
       try {
         displayContainer.innerHTML = this.katex.renderToString(text, {
-          displayMode: el.getAttribute('data-math-style') === 'display',
+          displayMode: el.dataset.mathStyle === 'display',
           throwOnError: true,
           maxSize: 20,
           maxExpand: 20,
@@ -143,7 +145,7 @@ class SafeMathRenderer {
     this.elements.forEach((el) => {
       const placeholder = document.createElement('span');
       placeholder.style.display = 'none';
-      placeholder.setAttribute('data-math-style', el.getAttribute('data-math-style'));
+      placeholder.dataset.mathStyle = el.dataset.mathStyle;
       placeholder.textContent = el.textContent;
       el.parentNode.replaceChild(placeholder, el);
       this.queue.push(placeholder);
diff --git a/app/assets/javascripts/behaviors/markdown/render_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
index f9cf3af98bb..2df0f7387fb 100644
--- a/app/assets/javascripts/behaviors/markdown/render_mermaid.js
+++ b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
@@ -160,7 +160,7 @@ function renderMermaids($els) {
                   'Warning: Displaying this diagram might cause performance issues on this page.',
                 )}</div>
                 <div class="gl-alert-actions">
-                  <button class="js-lazy-render-mermaid btn gl-alert-action btn-warning btn-md gl-button">Display</button>
+                  <button class="js-lazy-render-mermaid btn gl-alert-action btn-confirm btn-md gl-button">Display</button>
                 </div>
               </div>
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
diff --git a/app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js
index 3b9f6011c6d..077e96b2fee 100644
--- a/app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js
+++ b/app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js
@@ -32,7 +32,8 @@ const MAX_CHAR_LIMIT = 2000;
 const MAX_MERMAID_BLOCK_LIMIT = 50;
 // Max # of `&` allowed in Chaining of links syntax
 const MAX_CHAINING_OF_LINKS_LIMIT = 30;
-const BUFFER_IFRAME_HEIGHT = 10;
+export const BUFFER_IFRAME_HEIGHT = 10;
+export const SANDBOX_ATTRIBUTES = 'allow-scripts allow-popups';
 // Keep a map of mermaid blocks we've already rendered.
 const elsProcessingMap = new WeakMap();
 let renderedMermaidBlocks = 0;
@@ -56,7 +57,7 @@ function fixElementSource(el) {
   return { source };
 }
 
-function getSandboxFrameSrc() {
+export function getSandboxFrameSrc() {
   const path = joinPaths(gon.relative_url_root || '', SANDBOX_FRAME_PATH);
   if (!darkModeEnabled()) {
     return path;
@@ -69,7 +70,7 @@ function renderMermaidEl(el, source) {
   const iframeEl = document.createElement('iframe');
   setAttributes(iframeEl, {
     src: getSandboxFrameSrc(),
-    sandbox: 'allow-scripts allow-popups',
+    sandbox: SANDBOX_ATTRIBUTES,
     frameBorder: 0,
     scrolling: 'no',
     width: '100%',
@@ -138,7 +139,7 @@ function renderMermaids($els) {
               <div>
                 <div class="js-warning-text"></div>
                 <div class="gl-alert-actions">
-                  <button type="button" class="js-lazy-render-mermaid btn gl-alert-action btn-warning btn-md gl-button">Display</button>
+                  <button type="button" class="js-lazy-render-mermaid btn gl-alert-action btn-confirm btn-md gl-button">Display</button>
                 </div>
               </div>
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">