diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-12-17 14:59:07 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-12-17 14:59:07 +0300 |
commit | 8b573c94895dc0ac0e1d9d59cf3e8745e8b539ca (patch) | |
tree | 544930fb309b30317ae9797a9683768705d664c4 /app/assets/javascripts/whats_new | |
parent | 4b1de649d0168371549608993deac953eb692019 (diff) |
Add latest changes from gitlab-org/gitlab@13-7-stable-eev13.7.0-rc42
Diffstat (limited to 'app/assets/javascripts/whats_new')
-rw-r--r-- | app/assets/javascripts/whats_new/components/app.vue | 130 | ||||
-rw-r--r-- | app/assets/javascripts/whats_new/components/feature.vue | 67 | ||||
-rw-r--r-- | app/assets/javascripts/whats_new/index.js | 20 | ||||
-rw-r--r-- | app/assets/javascripts/whats_new/store/actions.js | 3 | ||||
-rw-r--r-- | app/assets/javascripts/whats_new/utils/notification.js | 17 |
5 files changed, 165 insertions, 72 deletions
diff --git a/app/assets/javascripts/whats_new/components/app.vue b/app/assets/javascripts/whats_new/components/app.vue index 3c1de57252a..560cabd3bba 100644 --- a/app/assets/javascripts/whats_new/components/app.vue +++ b/app/assets/javascripts/whats_new/components/app.vue @@ -2,13 +2,15 @@ import { mapState, mapActions } from 'vuex'; import { GlDrawer, - GlBadge, - GlIcon, - GlLink, GlInfiniteScroll, GlResizeObserverDirective, + GlTabs, + GlTab, + GlBadge, + GlLoadingIcon, } from '@gitlab/ui'; import SkeletonLoader from './skeleton_loader.vue'; +import Feature from './feature.vue'; import Tracking from '~/tracking'; import { getDrawerBodyHeight } from '../utils/get_drawer_body_height'; @@ -17,11 +19,13 @@ const trackingMixin = Tracking.mixin(); export default { components: { GlDrawer, - GlBadge, - GlIcon, - GlLink, GlInfiniteScroll, + GlTabs, + GlTab, SkeletonLoader, + Feature, + GlBadge, + GlLoadingIcon, }, directives: { GlResizeObserver: GlResizeObserverDirective, @@ -31,11 +35,19 @@ export default { storageKey: { type: String, required: true, - default: null, + }, + versions: { + type: Array, + required: true, + }, + gitlabDotCom: { + type: Boolean, + required: false, + default: false, }, }, computed: { - ...mapState(['open', 'features', 'pageInfo', 'drawerBodyHeight']), + ...mapState(['open', 'features', 'pageInfo', 'drawerBodyHeight', 'fetching']), }, mounted() { this.openDrawer(this.storageKey); @@ -49,14 +61,25 @@ export default { methods: { ...mapActions(['openDrawer', 'closeDrawer', 'fetchItems', 'setDrawerBodyHeight']), bottomReached() { - if (this.pageInfo.nextPage) { - this.fetchItems(this.pageInfo.nextPage); + const page = this.pageInfo.nextPage; + if (page) { + this.fetchItems({ page }); } }, handleResize() { const height = getDrawerBodyHeight(this.$refs.drawer.$el); this.setDrawerBodyHeight(height); }, + featuresForVersion(version) { + return this.features.filter(feature => { + return feature.release === parseFloat(version); + }); + }, + fetchVersion(version) { + if (this.featuresForVersion(version).length === 0) { + this.fetchItems({ version }); + } + }, }, }; </script> @@ -73,64 +96,39 @@ export default { <template #header> <h4 class="page-title gl-my-2">{{ __("What's new at GitLab") }}</h4> </template> - <gl-infinite-scroll - v-if="features.length" - :fetched-items="features.length" - :max-list-height="drawerBodyHeight" - class="gl-p-0" - @bottomReached="bottomReached" - > - <template #items> - <div - v-for="feature in features" - :key="feature.title" - class="gl-pb-7 gl-pt-5 gl-px-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100" + <template v-if="features.length"> + <gl-infinite-scroll + v-if="gitlabDotCom" + :fetched-items="features.length" + :max-list-height="drawerBodyHeight" + class="gl-p-0" + @bottomReached="bottomReached" + > + <template #items> + <feature v-for="feature in features" :key="feature.title" :feature="feature" /> + </template> + </gl-infinite-scroll> + <gl-tabs v-else :style="{ height: `${drawerBodyHeight}px` }" class="gl-p-0"> + <gl-tab + v-for="(version, index) in versions" + :key="version" + @click="fetchVersion(version)" > - <gl-link - :href="feature.url" - target="_blank" - class="whats-new-item-title-link" - data-track-event="click_whats_new_item" - :data-track-label="feature.title" - :data-track-property="feature.url" - > - <h5 class="gl-font-lg">{{ feature.title }}</h5> - </gl-link> - <div v-if="feature.packages" class="gl-mb-3"> - <gl-badge - v-for="package_name in feature.packages" - :key="package_name" - size="sm" - class="whats-new-item-badge gl-mr-2" - > - <gl-icon name="license" />{{ package_name }} - </gl-badge> - </div> - <gl-link - :href="feature.url" - target="_blank" - data-track-event="click_whats_new_item" - :data-track-label="feature.title" - :data-track-property="feature.url" - > - <img - :alt="feature.title" - :src="feature.image_url" - class="img-thumbnail gl-px-8 gl-py-3 whats-new-item-image" + <template #title> + <span>{{ version }}</span> + <gl-badge v-if="index === 0">{{ __('Your Version') }}</gl-badge> + </template> + <gl-loading-icon v-if="fetching" size="lg" class="text-center" /> + <template v-else> + <feature + v-for="feature in featuresForVersion(version)" + :key="feature.title" + :feature="feature" /> - </gl-link> - <p class="gl-pt-3">{{ feature.body }}</p> - <gl-link - :href="feature.url" - target="_blank" - data-track-event="click_whats_new_item" - :data-track-label="feature.title" - :data-track-property="feature.url" - >{{ __('Learn more') }}</gl-link - > - </div> - </template> - </gl-infinite-scroll> + </template> + </gl-tab> + </gl-tabs> + </template> <div v-else class="gl-mt-5"> <skeleton-loader /> <skeleton-loader /> diff --git a/app/assets/javascripts/whats_new/components/feature.vue b/app/assets/javascripts/whats_new/components/feature.vue new file mode 100644 index 00000000000..f6f7618b0d8 --- /dev/null +++ b/app/assets/javascripts/whats_new/components/feature.vue @@ -0,0 +1,67 @@ +<script> +import { GlBadge, GlIcon, GlLink, GlSafeHtmlDirective } from '@gitlab/ui'; + +export default { + components: { + GlBadge, + GlIcon, + GlLink, + }, + directives: { + SafeHtml: GlSafeHtmlDirective, + }, + props: { + feature: { + type: Object, + required: true, + }, + }, +}; +</script> + +<template> + <div class="gl-pb-7 gl-pt-5 gl-px-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"> + <gl-link + :href="feature.url" + target="_blank" + class="whats-new-item-title-link" + data-track-event="click_whats_new_item" + :data-track-label="feature.title" + :data-track-property="feature.url" + > + <h5 class="gl-font-lg" data-test-id="feature-title">{{ feature.title }}</h5> + </gl-link> + <div v-if="feature.packages" class="gl-mb-3"> + <gl-badge + v-for="packageName in feature.packages" + :key="packageName" + size="sm" + class="whats-new-item-badge gl-mr-2" + > + <gl-icon name="license" />{{ packageName }} + </gl-badge> + </div> + <gl-link + :href="feature.url" + target="_blank" + data-track-event="click_whats_new_item" + :data-track-label="feature.title" + :data-track-property="feature.url" + > + <img + :alt="feature.title" + :src="feature.image_url" + class="img-thumbnail gl-px-8 gl-py-3 whats-new-item-image" + /> + </gl-link> + <div v-safe-html="feature.body" class="gl-pt-3"></div> + <gl-link + :href="feature.url" + target="_blank" + data-track-event="click_whats_new_item" + :data-track-label="feature.title" + :data-track-property="feature.url" + >{{ __('Learn more') }}</gl-link + > + </div> +</template> diff --git a/app/assets/javascripts/whats_new/index.js b/app/assets/javascripts/whats_new/index.js index a57c9718156..ed0258c3992 100644 --- a/app/assets/javascripts/whats_new/index.js +++ b/app/assets/javascripts/whats_new/index.js @@ -1,25 +1,35 @@ import Vue from 'vue'; +import { mapState } from 'vuex'; import App from './components/app.vue'; import store from './store'; +import { getStorageKey, setNotification } from './utils/notification'; let whatsNewApp; -export default () => { +export default el => { if (whatsNewApp) { store.dispatch('openDrawer'); } else { - const whatsNewElm = document.getElementById('whats-new-app'); - whatsNewApp = new Vue({ - el: whatsNewElm, + el, store, components: { App, }, + computed: { + ...mapState(['open']), + }, + watch: { + open() { + setNotification(el); + }, + }, render(createElement) { return createElement('app', { props: { - storageKey: whatsNewElm.getAttribute('data-storage-key'), + storageKey: getStorageKey(el), + versions: JSON.parse(el.getAttribute('data-versions')), + gitlabDotCom: el.getAttribute('data-gitlab-dot-com'), }, }); }, diff --git a/app/assets/javascripts/whats_new/store/actions.js b/app/assets/javascripts/whats_new/store/actions.js index 532febd61cb..0e5eeda742a 100644 --- a/app/assets/javascripts/whats_new/store/actions.js +++ b/app/assets/javascripts/whats_new/store/actions.js @@ -13,7 +13,7 @@ export default { localStorage.setItem(storageKey, JSON.stringify(false)); } }, - fetchItems({ commit, state }, page) { + fetchItems({ commit, state }, { page, version } = { page: null, version: null }) { if (state.fetching) { return false; } @@ -24,6 +24,7 @@ export default { .get('/-/whats_new', { params: { page, + version, }, }) .then(({ data, headers }) => { diff --git a/app/assets/javascripts/whats_new/utils/notification.js b/app/assets/javascripts/whats_new/utils/notification.js new file mode 100644 index 00000000000..f261a089554 --- /dev/null +++ b/app/assets/javascripts/whats_new/utils/notification.js @@ -0,0 +1,17 @@ +export const getStorageKey = appEl => appEl.getAttribute('data-storage-key'); + +export const setNotification = appEl => { + const storageKey = getStorageKey(appEl); + const notificationEl = document.querySelector('.header-help'); + let notificationCountEl = notificationEl.querySelector('.js-whats-new-notification-count'); + + if (JSON.parse(localStorage.getItem(storageKey)) === false) { + notificationEl.classList.remove('with-notifications'); + if (notificationCountEl) { + notificationCountEl.parentElement.removeChild(notificationCountEl); + notificationCountEl = null; + } + } else { + notificationEl.classList.add('with-notifications'); + } +}; |