1 files changed, 82 insertions, 34 deletions

diff --git a/app/assets/javascripts/gitlab_version_check/index.js b/app/assets/javascripts/gitlab_version_check/index.js
index 203ce10ef57..edb7e9abe49 100644
--- a/app/assets/javascripts/gitlab_version_check/index.js
+++ b/app/assets/javascripts/gitlab_version_check/index.js
@@ -1,50 +1,98 @@
 import Vue from 'vue';
-import * as Sentry from '@sentry/browser';
-import { parseBoolean } from '~/lib/utils/common_utils';
-import axios from '~/lib/utils/axios_utils';
-import { joinPaths } from '~/lib/utils/url_utility';
+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, status }) => {
-  const { size } = el.dataset;
+const mountGitlabVersionCheckBadge = (el) => {
+  const { size, version } = el.dataset;
   const actionable = parseBoolean(el.dataset.actionable);
 
-  return new Vue({
-    el,
-    render(createElement) {
-      return createElement(GitlabVersionCheckBadge, {
-        props: {
-          size,
-          actionable,
-          status,
-        },
-      });
-    },
-  });
+  try {
+    const { severity } = JSON.parse(version);
+
+    // If no severity (status) data don't worry about rendering
+    if (!severity) {
+      return null;
+    }
+
+    return new Vue({
+      el,
+      render(createElement) {
+        return createElement(GitlabVersionCheckBadge, {
+          props: {
+            size,
+            actionable,
+            status: severity,
+          },
+        });
+      },
+    });
+  } catch {
+    return null;
+  }
 };
 
-export default async () => {
-  const versionCheckBadges = [...document.querySelectorAll('.js-gitlab-version-check-badge')];
+const mountSecurityPatchUpgradeAlert = (el) => {
+  const { currentVersion } = el.dataset;
 
-  // If there are no version check elements, exit out
-  if (versionCheckBadges?.length <= 0) {
+  try {
+    return new Vue({
+      el,
+      render(createElement) {
+        return createElement(SecurityPatchUpgradeAlert, {
+          props: {
+            currentVersion,
+          },
+        });
+      },
+    });
+  } catch {
     return null;
   }
+};
 
-  const status = await axios
-    .get(joinPaths('/', gon.relative_url_root, '/admin/version_check.json'))
-    .then((res) => {
-      return res.data?.severity;
-    })
-    .catch((e) => {
-      Sentry.captureException(e);
-      return null;
+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 = [];
 
-  // If we don't have a status there is nothing to render
-  if (status) {
-    return versionCheckBadges.map((el) => mountGitlabVersionCheckBadge({ el, status }));
+  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));
   }
 
-  return null;
+  if (securityPatchUpgradeAlertModal) {
+    renderedApps.push(mountSecurityPatchUpgradeAlertModal(securityPatchUpgradeAlertModal));
+  }
+
+  renderedApps.push(...versionCheckBadges.map((el) => mountGitlabVersionCheckBadge(el)));
+
+  return renderedApps;
 };