summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/blob
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2020-03-04 09:08:20 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2020-03-04 09:08:20 +0000
commitd80f3cd75e700b6e62910865bfd36734644ffa89 (patch)
treeaa2fa2f2b4385854c13591bef8e74924ef661657 /app/assets/javascripts/blob
parentbe81c1578d65f25edfde8aa550f190b8d3e6d976 (diff)
downloadgitlab-ce-d80f3cd75e700b6e62910865bfd36734644ffa89.tar.gz
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/blob')
-rw-r--r--app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue85
-rw-r--r--app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js16
2 files changed, 101 insertions, 0 deletions
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
new file mode 100644
index 00000000000..fa3c19921df
--- /dev/null
+++ b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue
@@ -0,0 +1,85 @@
+<script>
+import { GlPopover, GlSprintf, GlButton, GlIcon } from '@gitlab/ui';
+import Cookies from 'js-cookie';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import { s__ } from '~/locale';
+import { glEmojiTag } from '~/emoji';
+
+export default {
+ components: {
+ GlPopover,
+ GlSprintf,
+ GlIcon,
+ GlButton,
+ },
+ props: {
+ target: {
+ type: String,
+ required: true,
+ },
+ cssClass: {
+ type: String,
+ required: true,
+ },
+ dismissKey: {
+ type: String,
+ required: true,
+ },
+ },
+ data() {
+ return {
+ popoverDismissed: parseBoolean(Cookies.get(this.dismissKey)),
+ };
+ },
+ computed: {
+ suggestTitle() {
+ return s__(`suggestPipeline|1/2: Choose a template`);
+ },
+ 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}`,
+ );
+ },
+ emoji() {
+ return glEmojiTag('wave');
+ },
+ },
+ methods: {
+ onDismiss() {
+ this.popoverDismissed = true;
+ Cookies.set(this.dismissKey, this.popoverDismissed, { expires: 365 });
+ },
+ },
+};
+</script>
+
+<template>
+ <gl-popover
+ v-if="!popoverDismissed"
+ show
+ :target="target"
+ placement="rightbottom"
+ trigger="manual"
+ container="viewport"
+ :css-classes="[cssClass]"
+ >
+ <template #title>
+ <gl-button :aria-label="__('Close')" class="btn-blank float-right" @click="onDismiss">
+ <gl-icon name="close" aria-hidden="true" />
+ </gl-button>
+ {{ suggestTitle }}
+ </template>
+
+ <gl-sprintf :message="suggestContent">
+ <template #bold="{content}">
+ <strong> {{ content }} </strong>
+ </template>
+ <template #footer="{content}">
+ <div class="mt-3">
+ {{ content }}
+ <span v-html="emoji"></span>
+ </div>
+ </template>
+ </gl-sprintf>
+ </gl-popover>
+</template>
diff --git a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js
new file mode 100644
index 00000000000..f770000eb68
--- /dev/null
+++ b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js
@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import Popover from './components/popover.vue';
+
+export default el =>
+ new Vue({
+ el,
+ render(createElement) {
+ return createElement(Popover, {
+ props: {
+ target: el.dataset.target,
+ cssClass: el.dataset.cssClass,
+ dismissKey: el.dataset.dismissKey,
+ },
+ });
+ },
+ });