Merge branch 'djadmin-fix-mermaid-relative-path' into 'master'

Reset webpack path for Mermaid iFrames

See merge request !123006



Merged-by: Olena Horal-Koretska <ohoralkoretska@gitlab.com>
Approved-by: Tomas Bulva <tbulva@gitlab.com>
Approved-by: Olena Horal-Koretska <ohoralkoretska@gitlab.com>
Approved-by: Jay McCure <jmccure@gitlab.com>
Co-authored-by: Dheeraj Joshi <djoshi@gitlab.com>

(cherry picked from commit 1bef025d)

8604c595 Reset webpack path for Mermaid iFrames
a0066680 Fix rspec by using absolute url
755eae01 Add review suggestion

app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js

@@ -72,11 +72,14 @@ function fixElementSource(el) {
 
 export function getSandboxFrameSrc() {
   const path = joinPaths(gon.relative_url_root || '', SANDBOX_FRAME_PATH);
-  if (!darkModeEnabled()) {
-    return path;
+  let absoluteUrl = relativePathToAbsolute(path, getBaseURL());
+  if (darkModeEnabled()) {
+    absoluteUrl = setUrlParams({ darkMode: darkModeEnabled() }, absoluteUrl);
   }
-  const absoluteUrl = relativePathToAbsolute(path, getBaseURL());
-  return setUrlParams({ darkMode: darkModeEnabled() }, absoluteUrl);
+  if (window.gon?.relative_url_root) {
+    absoluteUrl = setUrlParams({ relativeRootPath: window.gon.relative_url_root }, absoluteUrl);
+  }
+  return absoluteUrl;
 }
 
 function renderMermaidEl(el, source) {

app/assets/javascripts/lib/mermaid.js

 import mermaid from 'mermaid';
 import { getParameterByName } from '~/lib/utils/url_utility';
+import { resetServiceWorkersPublicPath } from '~/lib/utils/webpack';
 
+const resetWebpackPublicPath = () => {
+  window.gon = { relative_url_root: getParameterByName('relativeRootPath') };
+  resetServiceWorkersPublicPath();
+};
+
+resetWebpackPublicPath();
 const setIframeRenderedSize = (h, w) => {
   const { origin } = window.location;
   window.parent.postMessage({ h, w }, origin);

spec/features/markdown/sandboxed_mermaid_spec.rb

@@ -16,8 +16,9 @@
     MERMAID
   end
 
-  let_it_be(:expected) do
-    %(<iframe src="/-/sandbox/mermaid" sandbox="allow-scripts allow-popups" frameborder="0" scrolling="no")
+  let(:expected) do
+    src = "http://#{Capybara.current_session.server.host}:#{Capybara.current_session.server.port}/-/sandbox/mermaid"
+    %(<iframe src="#{src}" sandbox="allow-scripts allow-popups" frameborder="0" scrolling="no")
   end
 
   context 'in an issue' do

spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js

@@ -9,7 +9,7 @@ import renderMermaid, {
 
 describe('Mermaid diagrams renderer', () => {
   // Finders
-  const findMermaidIframes = () => document.querySelectorAll('iframe[src="/-/sandbox/mermaid"]');
+  const findMermaidIframes = () => document.querySelectorAll('iframe[src*="/-/sandbox/mermaid"]');
   const findDangerousMermaidAlert = () =>
     createWrapper(document.querySelector('[data-testid="alert-warning"]'));