2 files changed, 52 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/lib/alerts/environments.vue b/app/assets/javascripts/ide/lib/alerts/environments.vue
new file mode 100644
index 00000000000..ac9a3c3f82c
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/alerts/environments.vue
@@ -0,0 +1,32 @@
+<script>
+import { GlSprintf, GlLink } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { __ } from '~/locale';
+
+export default {
+  components: { GlSprintf, GlLink },
+  message: __(
+    "No deployments detected. Use environments to control your software's continuous deployment. %{linkStart}Learn more about deployment jobs.%{linkEnd}",
+  ),
+  computed: {
+    helpLink() {
+      return helpPagePath('ci/environments/index.md');
+    },
+  },
+};
+</script>
+<template>
+  <span>
+    <gl-sprintf :message="$options.message">
+      <template #link="{ content }">
+        <gl-link
+          :href="helpLink"
+          target="_blank"
+          data-track-action="click_link"
+          data-track-experiment="in_product_guidance_environments_webide"
+          >{{ content }}</gl-link
+        >
+      </template>
+    </gl-sprintf>
+  </span>
+</template>
diff --git a/app/assets/javascripts/ide/lib/alerts/index.js b/app/assets/javascripts/ide/lib/alerts/index.js
new file mode 100644
index 00000000000..c9db9779b1f
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/alerts/index.js
@@ -0,0 +1,20 @@
+import { leftSidebarViews } from '../../constants';
+import EnvironmentsMessage from './environments.vue';
+
+const alerts = [
+  {
+    key: Symbol('ALERT_ENVIRONMENT'),
+    show: (state, file) =>
+      state.currentActivityView === leftSidebarViews.commit.name &&
+      file.path === '.gitlab-ci.yml' &&
+      state.environmentsGuidanceAlertDetected &&
+      !state.environmentsGuidanceAlertDismissed,
+    props: { variant: 'tip' },
+    dismiss: ({ dispatch }) => dispatch('dismissEnvironmentsGuidance'),
+    message: EnvironmentsMessage,
+  },
+];
+
+export const findAlertKeyToShow = (...args) => alerts.find((x) => x.show(...args))?.key;
+
+export const getAlert = (key) => alerts.find((x) => x.key === key);