1 files changed, 160 insertions, 0 deletions
diff --git a/app/assets/javascripts/gitlab_version_check/components/security_patch_upgrade_alert_modal.vue b/app/assets/javascripts/gitlab_version_check/components/security_patch_upgrade_alert_modal.vue
new file mode 100644
index 00000000000..4638ba8a268
--- /dev/null
+++ b/app/assets/javascripts/gitlab_version_check/components/security_patch_upgrade_alert_modal.vue
@@ -0,0 +1,160 @@
+<script>
+import { GlModal, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import { glEmojiTag } from '~/emoji';
+import { s__, sprintf } from '~/locale';
+import Tracking from '~/tracking';
+import { getHideAlertModalCookie, setHideAlertModalCookie } from '../utils';
+import {
+  UPGRADE_DOCS_URL,
+  ABOUT_RELEASES_PAGE,
+  ALERT_MODAL_ID,
+  TRACKING_ACTIONS,
+  TRACKING_LABELS,
+} from '../constants';
+
+export default {
+  name: 'SecurityPatchUpgradeAlertModal',
+  i18n: {
+    modalTitle: s__('VersionCheck|Important notice - Critical security release'),
+    modalBodyNoStableVersions: s__(
+      'VersionCheck|You are currently on version %{currentVersion}! We strongly recommend upgrading your GitLab installation immediately.',
+    ),
+    modalBodyStableVersions: s__(
+      'VersionCheck|You are currently on version %{currentVersion}! We strongly recommend upgrading your GitLab installation to one of the following versions immediately: %{latestStableVersions}.',
+    ),
+    modalDetails: s__('VersionCheck|%{details}'),
+    learnMore: s__('VersionCheck|Learn more about this critical security release.'),
+    primaryButtonText: s__('VersionCheck|Upgrade now'),
+    secondaryButtonText: s__('VersionCheck|Remind me again in 3 days'),
+  },
+  components: {
+    GlModal,
+    GlSprintf,
+    GlLink,
+    GlButton,
+  },
+  directives: {
+    SafeHtml,
+  },
+  mixins: [Tracking.mixin()],
+  props: {
+    currentVersion: {
+      type: String,
+      required: true,
+    },
+    details: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    latestStableVersions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      visible: true,
+    };
+  },
+  computed: {
+    alertEmoji() {
+      return glEmojiTag('rotating_light');
+    },
+    modalBody() {
+      if (this.latestStableVersions?.length > 0) {
+        return this.$options.i18n.modalBodyStableVersions;
+      }
+
+      return this.$options.i18n.modalBodyNoStableVersions;
+    },
+    modalDetails() {
+      return sprintf(this.$options.i18n.modalDetails, { details: this.details });
+    },
+    latestStableVersionsStrings() {
+      return this.latestStableVersions?.length > 0 ? this.latestStableVersions.join(', ') : '';
+    },
+  },
+  created() {
+    if (getHideAlertModalCookie(this.currentVersion)) {
+      this.visible = false;
+      return;
+    }
+
+    this.dispatchTrackingEvent(TRACKING_ACTIONS.RENDER, TRACKING_LABELS.MODAL);
+  },
+  methods: {
+    dispatchTrackingEvent(action, label) {
+      this.track(action, {
+        label,
+        property: this.currentVersion,
+      });
+    },
+    trackLearnMoreClick() {
+      this.dispatchTrackingEvent(TRACKING_ACTIONS.CLICK_LINK, TRACKING_LABELS.LEARN_MORE_LINK);
+    },
+    trackRemindMeLaterClick() {
+      this.dispatchTrackingEvent(TRACKING_ACTIONS.CLICK_BUTTON, TRACKING_LABELS.REMIND_ME_BTN);
+      setHideAlertModalCookie(this.currentVersion);
+      this.$refs.alertModal.hide();
+    },
+    trackUpgradeNowClick() {
+      this.dispatchTrackingEvent(TRACKING_ACTIONS.CLICK_LINK, TRACKING_LABELS.UPGRADE_BTN_LINK);
+      setHideAlertModalCookie(this.currentVersion);
+    },
+    trackModalDismissed() {
+      this.dispatchTrackingEvent(TRACKING_ACTIONS.CLICK_BUTTON, TRACKING_LABELS.DISMISS);
+    },
+  },
+  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
+  UPGRADE_DOCS_URL,
+  ABOUT_RELEASES_PAGE,
+  ALERT_MODAL_ID,
+};
+</script>
+
+<template>
+  <gl-modal
+    ref="alertModal"
+    :modal-id="$options.ALERT_MODAL_ID"
+    :visible="visible"
+    @close="trackModalDismissed"
+  >
+    <template #modal-title>
+      <span v-safe-html:[$options.safeHtmlConfig]="alertEmoji"></span>
+      <span data-testid="alert-modal-title">{{ $options.i18n.modalTitle }}</span>
+    </template>
+    <template #default>
+      <div data-testid="alert-modal-body" class="gl-mb-6">
+        <gl-sprintf :message="modalBody">
+          <template #currentVersion>
+            <span class="gl-font-weight-bold">{{ currentVersion }}</span>
+          </template>
+          <template #latestStableVersions>
+            <span class="gl-font-weight-bold">{{ latestStableVersionsStrings }}</span>
+          </template>
+        </gl-sprintf>
+      </div>
+      <div v-if="details" data-testid="alert-modal-details" class="gl-mb-6">
+        {{ modalDetails }}
+      </div>
+      <gl-link :href="$options.ABOUT_RELEASES_PAGE" @click="trackLearnMoreClick">{{
+        $options.i18n.learnMore
+      }}</gl-link>
+    </template>
+    <template #modal-footer>
+      <gl-button data-testid="alert-modal-remind-button" @click="trackRemindMeLaterClick">{{
+        $options.i18n.secondaryButtonText
+      }}</gl-button>
+      <gl-button
+        data-testid="alert-modal-upgrade-button"
+        :href="$options.UPGRADE_DOCS_URL"
+        variant="confirm"
+        @click="trackUpgradeNowClick"
+        >{{ $options.i18n.primaryButtonText }}</gl-button
+      >
+    </template>
+  </gl-modal>
+</template>