diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-09 21:09:32 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-09 21:09:32 +0300 |
commit | 1268cfeaf73a73c5593f13639530513716826e2b (patch) | |
tree | 2508ffb2fddaa666d99b4e5984d3340eb9194782 /app/assets/javascripts/integrations | |
parent | be769d5fcced48143e92f83c997b7d5ba14873e1 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/integrations')
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, + }, + }); + }, + }); +}; |