Add latest changes from gitlab-org/gitlab@master

3 files changed, 108 insertions, 1 deletions

diff --git a/app/assets/javascripts/gitlab_version_check/components/security_patch_upgrade_alert.vue b/app/assets/javascripts/gitlab_version_check/components/security_patch_upgrade_alert.vue
new file mode 100644
index 00000000000..89dc68ec73e
--- /dev/null
+++ b/app/assets/javascripts/gitlab_version_check/components/security_patch_upgrade_alert.vue
@@ -0,0 +1,76 @@
+<script>
+import { GlAlert, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import Tracking from '~/tracking';
+import { UPGRADE_DOCS_URL, ABOUT_RELEASES_PAGE } from '../constants';
+
+export default {
+  name: 'SecurityPatchUpgradeAlert',
+  i18n: {
+    alertTitle: s__('VersionCheck|Critical security upgrade available'),
+    alertBody: s__(
+      'VersionCheck|You are currently on version %{currentVersion}. We strongly recommend upgrading your GitLab installation. %{link}',
+    ),
+    learnMore: s__('VersionCheck|Learn more about this critical security release.'),
+    primaryButtonText: s__('VersionCheck|Upgrade now'),
+  },
+  components: {
+    GlAlert,
+    GlSprintf,
+    GlLink,
+    GlButton,
+  },
+  mixins: [Tracking.mixin()],
+  props: {
+    currentVersion: {
+      type: String,
+      required: true,
+    },
+  },
+  mounted() {
+    this.track('render', {
+      label: 'security_patch_upgrade_alert',
+      property: this.currentVersion,
+    });
+  },
+  methods: {
+    trackLearnMoreClick() {
+      this.track('click_link', {
+        label: 'security_patch_upgrade_alert_learn_more',
+        property: this.currentVersion,
+      });
+    },
+    trackUpgradeNowClick() {
+      this.track('click_link', {
+        label: 'security_patch_upgrade_alert_upgrade_now',
+        property: this.currentVersion,
+      });
+    },
+  },
+  UPGRADE_DOCS_URL,
+  ABOUT_RELEASES_PAGE,
+};
+</script>
+
+<template>
+  <gl-alert :title="$options.i18n.alertTitle" variant="danger" :dismissible="false">
+    <gl-sprintf :message="$options.i18n.alertBody">
+      <template #currentVersion>
+        <span class="gl-font-weight-bold">{{ currentVersion }}</span>
+      </template>
+      <template #link>
+        <gl-link :href="$options.ABOUT_RELEASES_PAGE" @click="trackLearnMoreClick">{{
+          $options.i18n.learnMore
+        }}</gl-link>
+      </template>
+    </gl-sprintf>
+    <template #actions>
+      <gl-button
+        :href="$options.UPGRADE_DOCS_URL"
+        variant="confirm"
+        @click="trackUpgradeNowClick"
+        >{{ $options.i18n.primaryButtonText }}</gl-button
+      >
+    </template>
+  </gl-alert>
+</template>
diff --git a/app/assets/javascripts/gitlab_version_check/constants.js b/app/assets/javascripts/gitlab_version_check/constants.js
index 259723a4e22..43759c79b5b 100644
--- a/app/assets/javascripts/gitlab_version_check/constants.js
+++ b/app/assets/javascripts/gitlab_version_check/constants.js
@@ -7,3 +7,5 @@ export const STATUS_TYPES = {
 };
 
 export const UPGRADE_DOCS_URL = helpPagePath('update/index');
+
+export const ABOUT_RELEASES_PAGE = 'https://about.gitlab.com/releases/categories/releases/';
diff --git a/app/assets/javascripts/gitlab_version_check/index.js b/app/assets/javascripts/gitlab_version_check/index.js
index 8d778ecc792..b3180c2d1ba 100644
--- a/app/assets/javascripts/gitlab_version_check/index.js
+++ b/app/assets/javascripts/gitlab_version_check/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import GitlabVersionCheckBadge from './components/gitlab_version_check_badge.vue';
+import SecurityPatchUpgradeAlert from './components/security_patch_upgrade_alert.vue';
 
 const mountGitlabVersionCheckBadge = (el) => {
   const { size, version } = el.dataset;
@@ -31,8 +32,36 @@ const mountGitlabVersionCheckBadge = (el) => {
   }
 };
 
+const mountSecurityPatchUpgradeAlert = (el) => {
+  const { currentVersion } = el.dataset;
+
+  try {
+    return new Vue({
+      el,
+      render(createElement) {
+        return createElement(SecurityPatchUpgradeAlert, {
+          props: {
+            currentVersion,
+          },
+        });
+      },
+    });
+  } catch {
+    return null;
+  }
+};
+
 export default () => {
+  const renderedApps = [];
+
+  const securityPatchUpgradeAlert = document.getElementById('js-security-patch-upgrade-alert');
   const versionCheckBadges = [...document.querySelectorAll('.js-gitlab-version-check-badge')];
 
-  return versionCheckBadges.map((el) => mountGitlabVersionCheckBadge(el));
+  if (securityPatchUpgradeAlert) {
+    renderedApps.push(mountSecurityPatchUpgradeAlert(securityPatchUpgradeAlert));
+  }
+
+  renderedApps.push(...versionCheckBadges.map((el) => mountGitlabVersionCheckBadge(el)));
+
+  return renderedApps;
 };