Merge branch '456327-dcf-display-mermaid-plots-in-project-ci-cd-setting-pages' into 'master'

Fix display Mermaid plots in project CI/CD setting pages

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/149611



Merged-by: Paul Slaughter <pslaughter@gitlab.com>
Approved-by: Sunjung Park <spark@gitlab.com>
Approved-by: Paul Slaughter <pslaughter@gitlab.com>
Reviewed-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Co-authored-by: Dannyel Cardoso da Fonseca <dannyelcf@gmail.com>

app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js

@@ -12,6 +12,7 @@ import { initCiSecureFiles } from '~/ci_secure_files';
 import initDeployTokens from '~/deploy_tokens';
 import { initProjectRunnersRegistrationDropdown } from '~/ci/runner/project_runners/register';
 import { initGeneralPipelinesOptions } from '~/ci_settings_general_pipeline';
+import { renderGFM } from '~/behaviors/markdown/render_gfm';
 
 // Initialize expandable settings panels
 initSettingsPanels();
@@ -42,3 +43,5 @@ initRefSwitcherBadges();
 initTokenAccess();
 initCiSecureFiles();
 initGeneralPipelinesOptions();
+
+renderGFM(document.getElementById('js-shared-runners-markdown'));

app/views/shared/runners/_shared_runners_description.html.haml

@@ -9,4 +9,4 @@
   - c.with_body do
     %p= s_('Runners|%{link_start}These runners%{link_end} are available to all groups and projects.').html_safe % { link_start: shared_link_start, link_end: '</a>'.html_safe }
     - if Gitlab::CurrentSettings.shared_runners_text.present?
-      = markdown(Gitlab::CurrentSettings.current_application_settings.shared_runners_text)
+      #js-shared-runners-markdown= markdown(Gitlab::CurrentSettings.current_application_settings.shared_runners_text)

spec/frontend/pages/projects/settings/ci_cd/show/index_spec.js

+import { renderGFM } from '~/behaviors/markdown/render_gfm';
+
+jest.mock('~/behaviors/markdown/render_gfm');
+
+describe('CI/CD Settings', () => {
+  it('calls `renderGFM` to ensure that all gitlab-flavoured markdown is rendered on the CI/CD Settings page', async () => {
+    jest.spyOn(document, 'getElementById').getMockImplementation();
+    await import('~/pages/projects/settings/ci_cd/show');
+    expect(document.getElementById).toHaveBeenCalledWith('js-shared-runners-markdown');
+    expect(renderGFM).toHaveBeenCalledTimes(1);
+  });
+});