Add Alerts Module to the WebIDE

An alert is a message to be displayed in a GlAlert in some conditional
context of the WebIDE. The first alert added, for example, conditionally
shows a message suggesting users investigate the use of environments in
their CI configuration.

An alert has a very specific interface to publicly conform to:

   interface Alert {
     key: Symbol;
     show: (state: WebIdeState, file: File) => boolean;
     props: GlAlertProps;
     dismiss: (store: WebIdeStore) => void;
     message: VueComponent;
   }

- The key must be a unique value, so Symobl is used to ease
  uniqueness (two symbols made with the same key are still unique).

- The show function takes the state of the WebIDE Vue store and the
  currently active file to compute a boolean indicating whether or not
  this alert should be currently shown.

  In this first alert, we only wish to show it if:
  - we are currently on the commit tab
  - we are viewing the root GitLab CI file
  - displaying this alert is enabled for the current user
  - the GitLab CI file has been successfully parsed,
  - and the CI configuration contains no environment configuration

- The props must match the props used to configure a GlAlert

- The dismiss function may optionally take the WebIDE store to execute
  further actions or mutations.

- The message must be a Vue component definition. This is so that rich
  HTML content may be easily used within the message. Currently, it must
  not take any props or attributes, although it should have access to
  the WebIDE store.

As only one alert may be shown at a time, any future alerts with
overlapping conditions must keep in mind that these should be listed by
priority. This is purposely simple to not expose the user to too many
alerts at once. If this is ever converted to a notification system, it
may make sense to alter this.

app/assets/javascripts/ide/lib/alerts/environments.vue

+<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">{{ content }}</gl-link>
+      </template>
+    </gl-sprintf>
+  </span>
+</template>

app/assets/javascripts/ide/lib/alerts/index.js

+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);

locale/gitlab.pot

@@ -21975,6 +21975,9 @@ msgstr ""
 msgid "No data to display"
 msgstr ""
 
+msgid "No deployments detected. Use environments to control your software's continuous deployment. %{linkStart}Learn more about deployment jobs.%{linkEnd}"
+msgstr ""
+
 msgid "No deployments found"
 msgstr ""
 

spec/frontend/ide/lib/alerts/environment_spec.js

+import { GlLink } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import Environments from '~/ide/lib/alerts/environments.vue';
+
+describe('~/ide/lib/alerts/environment.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Environments);
+  });
+
+  it('shows a message regarding environments', () => {
+    expect(wrapper.text()).toBe(
+      "No deployments detected. Use environments to control your software's continuous deployment. Learn more about deployment jobs.",
+    );
+  });
+
+  it('links to the help page on environments', () => {
+    expect(wrapper.findComponent(GlLink).attributes('href')).toBe('/help/ci/environments/index.md');
+  });
+});