1 files changed, 32 insertions, 1 deletions
diff --git a/app/assets/javascripts/gitlab_version_check/index.js b/app/assets/javascripts/gitlab_version_check/index.js
index b3180c2d1ba..edb7e9abe49 100644
--- a/app/assets/javascripts/gitlab_version_check/index.js
+++ b/app/assets/javascripts/gitlab_version_check/index.js
@@ -1,7 +1,8 @@
 import Vue from 'vue';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { parseBoolean, convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import GitlabVersionCheckBadge from './components/gitlab_version_check_badge.vue';
 import SecurityPatchUpgradeAlert from './components/security_patch_upgrade_alert.vue';
+import SecurityPatchUpgradeAlertModal from './components/security_patch_upgrade_alert_modal.vue';
 
 const mountGitlabVersionCheckBadge = (el) => {
   const { size, version } = el.dataset;
@@ -51,16 +52,46 @@ const mountSecurityPatchUpgradeAlert = (el) => {
   }
 };
 
+const mountSecurityPatchUpgradeAlertModal = (el) => {
+  const { currentVersion, version } = el.dataset;
+
+  try {
+    const { details, latestStableVersions } = convertObjectPropsToCamelCase(JSON.parse(version));
+
+    return new Vue({
+      el,
+      render(createElement) {
+        return createElement(SecurityPatchUpgradeAlertModal, {
+          props: {
+            currentVersion,
+            details,
+            latestStableVersions,
+          },
+        });
+      },
+    });
+  } catch {
+    return null;
+  }
+};
+
 export default () => {
   const renderedApps = [];
 
   const securityPatchUpgradeAlert = document.getElementById('js-security-patch-upgrade-alert');
+  const securityPatchUpgradeAlertModal = document.getElementById(
+    'js-security-patch-upgrade-alert-modal',
+  );
   const versionCheckBadges = [...document.querySelectorAll('.js-gitlab-version-check-badge')];
 
   if (securityPatchUpgradeAlert) {
     renderedApps.push(mountSecurityPatchUpgradeAlert(securityPatchUpgradeAlert));
   }
 
+  if (securityPatchUpgradeAlertModal) {
+    renderedApps.push(mountSecurityPatchUpgradeAlertModal(securityPatchUpgradeAlertModal));
+  }
+
   renderedApps.push(...versionCheckBadges.map((el) => mountGitlabVersionCheckBadge(el)));
 
   return renderedApps;