diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-29 09:09:49 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-29 09:09:49 +0300 |
commit | 3fa28959b9c657503c98caa0e535d39f51ad2c31 (patch) | |
tree | 589ce3733ffdd2b688974421a775451e4c92d7a8 /app/assets/javascripts/vue_shared/components/dismissible_feedback_alert.vue | |
parent | 4f578dc107b18ea7effec75ac7fdb144ff8cacf8 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/dismissible_feedback_alert.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/dismissible_feedback_alert.vue | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/dismissible_feedback_alert.vue b/app/assets/javascripts/vue_shared/components/dismissible_feedback_alert.vue new file mode 100644 index 00000000000..c7d7c3a1d24 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/dismissible_feedback_alert.vue @@ -0,0 +1,66 @@ +<script> +import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui'; +import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; +import { slugifyWithUnderscore } from '~/lib/utils/text_utility'; + +export default { + components: { + GlAlert, + GlSprintf, + GlLink, + LocalStorageSync, + }, + props: { + featureName: { + type: String, + required: true, + }, + feedbackLink: { + type: String, + required: true, + }, + }, + data() { + return { + isDismissed: 'false', + }; + }, + computed: { + storageKey() { + return `${slugifyWithUnderscore(this.featureName)}_feedback_dismissed`; + }, + showAlert() { + return this.isDismissed === 'false'; + }, + }, + methods: { + dismissFeedbackAlert() { + this.isDismissed = 'true'; + }, + }, +}; +</script> + +<template> + <div v-show="showAlert"> + <local-storage-sync + :value="isDismissed" + :storage-key="storageKey" + @input="dismissFeedbackAlert" + /> + <gl-alert v-if="showAlert" class="gl-mt-5" @dismiss="dismissFeedbackAlert"> + <gl-sprintf + :message=" + __( + 'We’ve been making changes to %{featureName} and we’d love your feedback %{linkStart}in this issue%{linkEnd} to help us improve the experience.', + ) + " + > + <template #featureName>{{ featureName }}</template> + <template #link="{ content }"> + <gl-link :href="feedbackLink" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </gl-alert> + </div> +</template> |