diff options
Diffstat (limited to 'app/assets/javascripts/blob')
3 files changed, 38 insertions, 13 deletions
diff --git a/app/assets/javascripts/blob/file_template_mediator.js b/app/assets/javascripts/blob/file_template_mediator.js index 0fb02ca5965..d2c0ef330e4 100644 --- a/app/assets/javascripts/blob/file_template_mediator.js +++ b/app/assets/javascripts/blob/file_template_mediator.js @@ -9,6 +9,7 @@ import GitignoreSelector from './template_selectors/gitignore_selector'; import LicenseSelector from './template_selectors/license_selector'; import toast from '~/vue_shared/plugins/global_toast'; import { __ } from '~/locale'; +import initPopover from '~/blob/suggest_gitlab_ci_yml'; export default class FileTemplateMediator { constructor({ editor, currentAction, projectId }) { @@ -128,6 +129,7 @@ export default class FileTemplateMediator { selectTemplateFile(selector, query, data) { const self = this; const { name } = selector.config; + const suggestCommitChanges = document.querySelector('.js-suggest-gitlab-ci-yml-commit-changes'); selector.renderLoading(); @@ -146,6 +148,10 @@ export default class FileTemplateMediator { }, }, }); + + if (suggestCommitChanges) { + initPopover(suggestCommitChanges); + } }) .catch(err => new Flash(`An error occurred while fetching the template: ${err}`)); } diff --git a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue index fa3c19921df..d304ae7dbf6 100644 --- a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue +++ b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue @@ -1,10 +1,25 @@ <script> import { GlPopover, GlSprintf, GlButton, GlIcon } from '@gitlab/ui'; import Cookies from 'js-cookie'; -import { parseBoolean } from '~/lib/utils/common_utils'; +import { parseBoolean, scrollToElement } from '~/lib/utils/common_utils'; import { s__ } from '~/locale'; import { glEmojiTag } from '~/emoji'; +const popoverStates = { + suggest_gitlab_ci_yml: { + title: s__(`suggestPipeline|1/2: Choose a template`), + content: s__( + `suggestPipeline|We recommend the %{boldStart}Code Quality%{boldEnd} template, which will add a report widget to your Merge Requests. This way you’ll learn about code quality degradations much sooner. %{footerStart} Goodbye technical debt! %{footerEnd}`, + ), + emoji: glEmojiTag('wave'), + }, + suggest_commit_first_project_gitlab_ci_yml: { + title: s__(`suggestPipeline|2/2: Commit your changes`), + content: s__( + `suggestPipeline|Commit the changes and your pipeline will automatically run for the first time.`, + ), + }, +}; export default { components: { GlPopover, @@ -17,7 +32,7 @@ export default { type: String, required: true, }, - cssClass: { + trackLabel: { type: String, required: true, }, @@ -33,17 +48,19 @@ export default { }, computed: { suggestTitle() { - return s__(`suggestPipeline|1/2: Choose a template`); + return popoverStates[this.trackLabel].title || ''; }, suggestContent() { - return s__( - `suggestPipeline|We recommend the %{boldStart}Code Quality%{boldEnd} template, which will add a report widget to your Merge Requests. This way you’ll learn about code quality degradations much sooner. %{footerStart} Goodbye technical debt! %{footerEnd}`, - ); + return popoverStates[this.trackLabel].content || ''; }, emoji() { - return glEmojiTag('wave'); + return popoverStates[this.trackLabel].emoji || ''; }, }, + mounted() { + if (this.trackLabel === 'suggest_commit_first_project_gitlab_ci_yml' && !this.popoverDismissed) + scrollToElement(document.querySelector(this.target)); + }, methods: { onDismiss() { this.popoverDismissed = true; @@ -61,13 +78,15 @@ export default { placement="rightbottom" trigger="manual" container="viewport" - :css-classes="[cssClass]" + :css-classes="['suggest-gitlab-ci-yml', 'ml-4']" > <template #title> - <gl-button :aria-label="__('Close')" class="btn-blank float-right" @click="onDismiss"> - <gl-icon name="close" aria-hidden="true" /> - </gl-button> - {{ suggestTitle }} + <span v-html="suggestTitle"></span> + <span class="ml-auto"> + <gl-button :aria-label="__('Close')" class="btn-blank" @click="onDismiss"> + <gl-icon name="close" aria-hidden="true" /> + </gl-button> + </span> </template> <gl-sprintf :message="suggestContent"> diff --git a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js index f770000eb68..2cc342fb381 100644 --- a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js +++ b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js @@ -8,7 +8,7 @@ export default el => return createElement(Popover, { props: { target: el.dataset.target, - cssClass: el.dataset.cssClass, + trackLabel: el.dataset.trackLabel, dismissKey: el.dataset.dismissKey, }, }); |