Add latest changes from gitlab-org/gitlab@master

6 files changed, 252 insertions, 0 deletions

diff --git a/app/assets/javascripts/integrations/constants.js b/app/assets/javascripts/integrations/constants.js
index 259166c71b7..e803e11bf6d 100644
--- a/app/assets/javascripts/integrations/constants.js
+++ b/app/assets/javascripts/integrations/constants.js
@@ -57,6 +57,8 @@ export const integrationTriggerEvents = {
   PIPELINE: 'pipeline_events',
   WIKI_PAGE: 'wiki_page_events',
   DEPLOYMENT: 'deployment_events',
+  ALERT: 'alert_events',
+  INCIDENT: 'incident_events',
 };
 
 export const integrationTriggerEventTitles = {
@@ -82,6 +84,10 @@ export const integrationTriggerEventTitles = {
   [integrationTriggerEvents.DEPLOYMENT]: s__(
     'IntegrationEvents|A deployment is started or finished',
   ),
+  [integrationTriggerEvents.ALERT]: s__('IntegrationEvents|A new, unique alert is recorded'),
+  [integrationTriggerEvents.INCIDENT]: s__(
+    'IntegrationEvents|An incident is created, closed, or reopened',
+  ),
 };
 
 export const billingPlans = {
diff --git a/app/assets/javascripts/integrations/gitlab_slack_application/api.js b/app/assets/javascripts/integrations/gitlab_slack_application/api.js
new file mode 100644
index 00000000000..9a4887f70f5
--- /dev/null
+++ b/app/assets/javascripts/integrations/gitlab_slack_application/api.js
@@ -0,0 +1,7 @@
+import axios from '~/lib/utils/axios_utils';
+
+export const addProjectToSlack = (url, projectId) => {
+  return axios.get(url, {
+    params: { project_id: projectId },
+  });
+};
diff --git a/app/assets/javascripts/integrations/gitlab_slack_application/components/gitlab_slack_application.vue b/app/assets/javascripts/integrations/gitlab_slack_application/components/gitlab_slack_application.vue
new file mode 100644
index 00000000000..bcb199853bd
--- /dev/null
+++ b/app/assets/javascripts/integrations/gitlab_slack_application/components/gitlab_slack_application.vue
@@ -0,0 +1,135 @@
+<script>
+import { GlButton, GlIcon, GlLink } from '@gitlab/ui';
+import { createAlert } from '~/alert';
+import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+import { i18n } from '../constants';
+
+import { addProjectToSlack } from '../api';
+import ProjectsDropdown from './projects_dropdown.vue';
+
+export default {
+  components: {
+    GlButton,
+    GlIcon,
+    GlLink,
+    ProjectsDropdown,
+  },
+  props: {
+    projects: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    isSignedIn: {
+      type: Boolean,
+      required: true,
+    },
+    signInPath: {
+      type: String,
+      required: true,
+    },
+    slackLinkPath: {
+      type: String,
+      required: true,
+    },
+    gitlabLogoPath: {
+      type: String,
+      required: true,
+    },
+    slackLogoPath: {
+      type: String,
+      required: true,
+    },
+  },
+  i18n,
+  learnMoreLink: helpPagePath('user/project/integrations/gitlab_slack_application', {
+    anchor: 'configuration',
+  }),
+  data() {
+    return {
+      selectedProject: null,
+    };
+  },
+  computed: {
+    hasProjects() {
+      return this.projects.length > 0;
+    },
+  },
+  methods: {
+    selectProject(project) {
+      this.selectedProject = project;
+    },
+    addToSlack() {
+      addProjectToSlack(this.slackLinkPath, this.selectedProject.id)
+        .then((response) => redirectTo(response.data.add_to_slack_link)) // eslint-disable-line import/no-deprecated
+        .catch(() =>
+          createAlert({
+            message: i18n.slackErrorMessage,
+          }),
+        );
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-max-w-max-content gl-mx-auto gl-mt-11 gl-text-center">
+    <div v-once class="gl-my-5 gl-display-flex gl-justify-content-center gl-align-items-center">
+      <img :src="gitlabLogoPath" :alt="$options.i18n.gitlabLogoAlt" class="gl-h-11 gl-w-11" />
+      <gl-icon name="arrow-right" :size="32" class="gl-mx-5 gl-text-gray-200" />
+      <img
+        :src="slackLogoPath"
+        :alt="$options.i18n.slackLogoAlt"
+        class="gitlab-slack-slack-logo gl-h-11 gl-w-11"
+      />
+    </div>
+
+    <h2>{{ $options.i18n.title }}</h2>
+
+    <div data-testid="gitlab-slack-content">
+      <template v-if="isSignedIn">
+        <div v-if="hasProjects" class="gl-mt-6">
+          <p>
+            {{ $options.i18n.dropdownLabel }}
+          </p>
+
+          <projects-dropdown
+            :projects="projects"
+            :selected-project="selectedProject"
+            @project-selected="selectProject"
+          />
+
+          <div class="gl-display-flex gl-justify-content-end">
+            <gl-button
+              category="primary"
+              variant="confirm"
+              :disabled="!selectedProject"
+              @click="addToSlack"
+            >
+              {{ $options.i18n.dropdownButtonText }}
+            </gl-button>
+          </div>
+        </div>
+        <div v-else>
+          <p class="gl-mb-0">{{ $options.i18n.noProjects }}</p>
+          <p>
+            <span>{{ $options.i18n.noProjectsDescription }}</span>
+            <gl-link :href="$options.learnMoreLink" target="_blank">{{
+              $options.i18n.learnMore
+            }}</gl-link
+            >.
+          </p>
+        </div>
+      </template>
+
+      <template v-else>
+        <p>{{ $options.i18n.signInLabel }}</p>
+        <gl-button category="primary" variant="confirm" :href="signInPath">
+          {{ $options.i18n.signInButtonText }}
+        </gl-button>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/integrations/gitlab_slack_application/components/projects_dropdown.vue b/app/assets/javascripts/integrations/gitlab_slack_application/components/projects_dropdown.vue
new file mode 100644
index 00000000000..26d191cd0bf
--- /dev/null
+++ b/app/assets/javascripts/integrations/gitlab_slack_application/components/projects_dropdown.vue
@@ -0,0 +1,55 @@
+<script>
+import { GlDropdown } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue';
+
+export default {
+  components: {
+    GlDropdown,
+    ProjectListItem,
+  },
+  props: {
+    projectDropdownText: {
+      type: String,
+      required: false,
+      default: __('Select a project'),
+    },
+    projects: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    selectedProject: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    dropdownText() {
+      return this.selectedProject
+        ? this.selectedProject.name_with_namespace
+        : this.projectDropdownText;
+    },
+  },
+  methods: {
+    onClick(project) {
+      this.$emit('project-selected', project);
+      this.$refs.dropdown.hide(true);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown ref="dropdown" block :text="dropdownText" menu-class="gl-w-full!">
+    <project-list-item
+      v-for="project in projects"
+      :key="project.id"
+      :project="project"
+      :selected="false"
+      @click="onClick(project)"
+    />
+  </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/integrations/gitlab_slack_application/constants.js b/app/assets/javascripts/integrations/gitlab_slack_application/constants.js
new file mode 100644
index 00000000000..4f3c75b64fb
--- /dev/null
+++ b/app/assets/javascripts/integrations/gitlab_slack_application/constants.js
@@ -0,0 +1,15 @@
+import { __, s__ } from '~/locale';
+
+export const i18n = {
+  slackErrorMessage: __('Unable to build Slack link.'),
+  gitlabLogoAlt: __('GitLab logo'),
+  slackLogoAlt: __('Slack logo'),
+  title: s__('SlackIntegration|GitLab for Slack'),
+  dropdownLabel: s__('SlackIntegration|Select a GitLab project to link with your Slack workspace.'),
+  dropdownButtonText: __('Continue'),
+  noProjects: __('No projects available.'),
+  noProjectsDescription: __('Make sure you have the correct permissions to link your project.'),
+  learnMore: __('Learn more'),
+  signInLabel: s__('JiraService|Sign in to GitLab to get started.'),
+  signInButtonText: __('Sign in to GitLab'),
+};
diff --git a/app/assets/javascripts/integrations/gitlab_slack_application/index.js b/app/assets/javascripts/integrations/gitlab_slack_application/index.js
new file mode 100644
index 00000000000..8bbb81df997
--- /dev/null
+++ b/app/assets/javascripts/integrations/gitlab_slack_application/index.js
@@ -0,0 +1,34 @@
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import GitlabSlackApplication from './components/gitlab_slack_application.vue';
+
+export default () => {
+  const el = document.querySelector('.js-gitlab-slack-application');
+
+  if (!el) return null;
+
+  const {
+    projects,
+    isSignedIn,
+    signInPath,
+    slackLinkPath,
+    gitlabLogoPath,
+    slackLogoPath,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(GitlabSlackApplication, {
+        props: {
+          projects: JSON.parse(projects),
+          isSignedIn: parseBoolean(isSignedIn),
+          signInPath,
+          slackLinkPath,
+          gitlabLogoPath,
+          slackLogoPath,
+        },
+      });
+    },
+  });
+};