1 files changed, 31 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index cb7198e9789..46e59cd6572 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -6,6 +6,33 @@ import GpgBadges from '~/gpg_badges';
 import '~/sourcegraph/load';
 import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue';
 
+const createGitlabCiYmlVisualization = (containerId = '#js-blob-toggle-graph-preview') => {
+  const el = document.querySelector(containerId);
+  const { filename, blobData } = el?.dataset;
+
+  const nameRegexp = /\.gitlab-ci.yml/;
+
+  if (!el || !nameRegexp.test(filename)) {
+    return;
+  }
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    components: {
+      GitlabCiYamlVisualization: () =>
+        import('~/pipelines/components/pipeline_graph/gitlab_ci_yaml_visualization.vue'),
+    },
+    render(createElement) {
+      return createElement('gitlabCiYamlVisualization', {
+        props: {
+          blobData,
+        },
+      });
+    },
+  });
+};
+
 document.addEventListener('DOMContentLoaded', () => {
   new BlobViewer(); // eslint-disable-line no-new
   initBlob();
@@ -63,4 +90,8 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     }
   }
+
+  if (gon?.features?.gitlabCiYmlPreview) {
+    createGitlabCiYmlVisualization();
+  }
 });