diff options
Diffstat (limited to 'app/assets/javascripts/pages/dashboard/projects')
-rw-r--r-- | app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue | 66 | ||||
-rw-r--r-- | app/assets/javascripts/pages/dashboard/projects/index/index.js (renamed from app/assets/javascripts/pages/dashboard/projects/index.js) | 3 | ||||
-rw-r--r-- | app/assets/javascripts/pages/dashboard/projects/index/init_customize_homepage_banner.js | 16 |
3 files changed, 85 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue b/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue new file mode 100644 index 00000000000..6b907f31a37 --- /dev/null +++ b/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue @@ -0,0 +1,66 @@ +<script> +import { GlBanner } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import axios from '~/lib/utils/axios_utils'; + +export default { + components: { + GlBanner, + }, + inject: { + svgPath: { + default: '', + }, + preferencesBehaviorPath: { + default: '', + }, + calloutsPath: { + default: '', + }, + calloutsFeatureId: { + default: '', + }, + }, + i18n: { + title: s__('CustomizeHomepageBanner|Do you want to customize this page?'), + body: s__( + 'CustomizeHomepageBanner|This page shows a list of your projects by default but it can be changed to show projects\' activity, groups, your to-do list, assigned issues, assigned merge requests, and more. You can change this under "Homepage content" in your preferences', + ), + button_text: s__('CustomizeHomepageBanner|Go to preferences'), + }, + data() { + return { + visible: true, + }; + }, + methods: { + handleClose() { + axios + .post(this.calloutsPath, { + feature_name: this.calloutsFeatureId, + }) + .catch(e => { + // eslint-disable-next-line @gitlab/require-i18n-strings, no-console + console.error('Failed to dismiss banner.', e); + }); + + this.visible = false; + }, + }, +}; +</script> + +<template> + <gl-banner + v-if="visible" + :title="$options.i18n.title" + :button-text="$options.i18n.button_text" + :button-link="preferencesBehaviorPath" + :svg-path="svgPath" + @close="handleClose" + > + <p> + {{ $options.i18n.body }} + </p> + </gl-banner> +</template> diff --git a/app/assets/javascripts/pages/dashboard/projects/index.js b/app/assets/javascripts/pages/dashboard/projects/index/index.js index 01001d4f3ff..b3c95f4ac1f 100644 --- a/app/assets/javascripts/pages/dashboard/projects/index.js +++ b/app/assets/javascripts/pages/dashboard/projects/index/index.js @@ -1,5 +1,8 @@ import ProjectsList from '~/projects_list'; +import initCustomizeHomepageBanner from './init_customize_homepage_banner'; document.addEventListener('DOMContentLoaded', () => { new ProjectsList(); // eslint-disable-line no-new + + initCustomizeHomepageBanner(); }); diff --git a/app/assets/javascripts/pages/dashboard/projects/index/init_customize_homepage_banner.js b/app/assets/javascripts/pages/dashboard/projects/index/init_customize_homepage_banner.js new file mode 100644 index 00000000000..c0735dde1da --- /dev/null +++ b/app/assets/javascripts/pages/dashboard/projects/index/init_customize_homepage_banner.js @@ -0,0 +1,16 @@ +import Vue from 'vue'; +import CustomizeHomepageBanner from './components/customize_homepage_banner.vue'; + +export default () => { + const el = document.querySelector('.js-customize-homepage-banner'); + + if (!el) { + return false; + } + + return new Vue({ + el, + provide: { ...el.dataset }, + render: createElement => createElement(CustomizeHomepageBanner), + }); +}; |