diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 11:27:35 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 11:27:35 +0300 |
commit | 7e9c479f7de77702622631cff2628a9c8dcbc627 (patch) | |
tree | c8f718a08e110ad7e1894510980d2155a6549197 /app/assets/javascripts/whats_new | |
parent | e852b0ae16db4052c1c567d9efa4facc81146e88 (diff) |
Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42
Diffstat (limited to 'app/assets/javascripts/whats_new')
6 files changed, 116 insertions, 28 deletions
diff --git a/app/assets/javascripts/whats_new/components/app.vue b/app/assets/javascripts/whats_new/components/app.vue index 9400dacedc2..3c1de57252a 100644 --- a/app/assets/javascripts/whats_new/components/app.vue +++ b/app/assets/javascripts/whats_new/components/app.vue @@ -1,8 +1,16 @@ <script> import { mapState, mapActions } from 'vuex'; -import { GlDrawer, GlBadge, GlIcon, GlLink } from '@gitlab/ui'; +import { + GlDrawer, + GlBadge, + GlIcon, + GlLink, + GlInfiniteScroll, + GlResizeObserverDirective, +} from '@gitlab/ui'; import SkeletonLoader from './skeleton_loader.vue'; import Tracking from '~/tracking'; +import { getDrawerBodyHeight } from '../utils/get_drawer_body_height'; const trackingMixin = Tracking.mixin(); @@ -12,8 +20,12 @@ export default { GlBadge, GlIcon, GlLink, + GlInfiniteScroll, SkeletonLoader, }, + directives: { + GlResizeObserver: GlResizeObserverDirective, + }, mixins: [trackingMixin], props: { storageKey: { @@ -23,7 +35,7 @@ export default { }, }, computed: { - ...mapState(['open', 'features']), + ...mapState(['open', 'features', 'pageInfo', 'drawerBodyHeight']), }, mounted() { this.openDrawer(this.storageKey); @@ -35,36 +47,64 @@ export default { this.track('click_whats_new_drawer', { label: 'namespace_id', value: namespaceId }); }, methods: { - ...mapActions(['openDrawer', 'closeDrawer', 'fetchItems']), + ...mapActions(['openDrawer', 'closeDrawer', 'fetchItems', 'setDrawerBodyHeight']), + bottomReached() { + if (this.pageInfo.nextPage) { + this.fetchItems(this.pageInfo.nextPage); + } + }, + handleResize() { + const height = getDrawerBodyHeight(this.$refs.drawer.$el); + this.setDrawerBodyHeight(height); + }, }, }; </script> <template> <div> - <gl-drawer class="whats-new-drawer" :open="open" @close="closeDrawer"> + <gl-drawer + ref="drawer" + v-gl-resize-observer="handleResize" + class="whats-new-drawer" + :open="open" + @close="closeDrawer" + > <template #header> - <h4 class="page-title my-2">{{ __("What's new at GitLab") }}</h4> + <h4 class="page-title gl-my-2">{{ __("What's new at GitLab") }}</h4> </template> - <div class="pb-6"> - <template v-if="features"> - <div v-for="feature in features" :key="feature.title" class="mb-6"> + <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" + > <gl-link :href="feature.url" target="_blank" - data-testid="whats-new-title-link" + 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-base">{{ feature.title }}</h5> + <h5 class="gl-font-lg">{{ feature.title }}</h5> </gl-link> <div v-if="feature.packages" class="gl-mb-3"> - <template v-for="package_name in feature.packages"> - <gl-badge :key="package_name" size="sm" class="whats-new-item-badge gl-mr-2"> - <gl-icon name="license" />{{ package_name }} - </gl-badge> - </template> + <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" @@ -76,7 +116,7 @@ export default { <img :alt="feature.title" :src="feature.image_url" - class="img-thumbnail px-6 gl-py-3 whats-new-item-image" + class="img-thumbnail gl-px-8 gl-py-3 whats-new-item-image" /> </gl-link> <p class="gl-pt-3">{{ feature.body }}</p> @@ -90,10 +130,10 @@ export default { > </div> </template> - <div v-else class="gl-mt-5"> - <skeleton-loader /> - <skeleton-loader /> - </div> + </gl-infinite-scroll> + <div v-else class="gl-mt-5"> + <skeleton-loader /> + <skeleton-loader /> </div> </gl-drawer> <div v-if="open" class="whats-new-modal-backdrop modal-backdrop"></div> diff --git a/app/assets/javascripts/whats_new/store/actions.js b/app/assets/javascripts/whats_new/store/actions.js index a84dfb399d8..532febd61cb 100644 --- a/app/assets/javascripts/whats_new/store/actions.js +++ b/app/assets/javascripts/whats_new/store/actions.js @@ -1,5 +1,6 @@ import * as types from './mutation_types'; import axios from '~/lib/utils/axios_utils'; +import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils'; export default { closeDrawer({ commit }) { @@ -12,9 +13,33 @@ export default { localStorage.setItem(storageKey, JSON.stringify(false)); } }, - fetchItems({ commit }) { - return axios.get('/-/whats_new').then(({ data }) => { - commit(types.SET_FEATURES, data); - }); + fetchItems({ commit, state }, page) { + if (state.fetching) { + return false; + } + + commit(types.SET_FETCHING, true); + + return axios + .get('/-/whats_new', { + params: { + page, + }, + }) + .then(({ data, headers }) => { + commit(types.ADD_FEATURES, data); + + const normalizedHeaders = normalizeHeaders(headers); + const { nextPage } = parseIntPagination(normalizedHeaders); + commit(types.SET_PAGE_INFO, { + nextPage, + }); + }) + .finally(() => { + commit(types.SET_FETCHING, false); + }); + }, + setDrawerBodyHeight({ commit }, height) { + commit(types.SET_DRAWER_BODY_HEIGHT, height); }, }; diff --git a/app/assets/javascripts/whats_new/store/mutation_types.js b/app/assets/javascripts/whats_new/store/mutation_types.js index 124d33a88b1..5715c442f66 100644 --- a/app/assets/javascripts/whats_new/store/mutation_types.js +++ b/app/assets/javascripts/whats_new/store/mutation_types.js @@ -1,3 +1,6 @@ export const CLOSE_DRAWER = 'CLOSE_DRAWER'; export const OPEN_DRAWER = 'OPEN_DRAWER'; -export const SET_FEATURES = 'SET_FEATURES'; +export const ADD_FEATURES = 'ADD_FEATURES'; +export const SET_PAGE_INFO = 'SET_PAGE_INFO'; +export const SET_FETCHING = 'SET_FETCHING'; +export const SET_DRAWER_BODY_HEIGHT = 'SET_DRAWER_BODY_HEIGHT'; diff --git a/app/assets/javascripts/whats_new/store/mutations.js b/app/assets/javascripts/whats_new/store/mutations.js index 4fb7b17244e..725521780dc 100644 --- a/app/assets/javascripts/whats_new/store/mutations.js +++ b/app/assets/javascripts/whats_new/store/mutations.js @@ -7,7 +7,16 @@ export default { [types.OPEN_DRAWER](state) { state.open = true; }, - [types.SET_FEATURES](state, data) { - state.features = data; + [types.ADD_FEATURES](state, data) { + state.features = state.features.concat(data); + }, + [types.SET_PAGE_INFO](state, pageInfo) { + state.pageInfo = pageInfo; + }, + [types.SET_FETCHING](state, fetching) { + state.fetching = fetching; + }, + [types.SET_DRAWER_BODY_HEIGHT](state, height) { + state.drawerBodyHeight = height; }, }; diff --git a/app/assets/javascripts/whats_new/store/state.js b/app/assets/javascripts/whats_new/store/state.js index 4c76284b865..793c6aa2b98 100644 --- a/app/assets/javascripts/whats_new/store/state.js +++ b/app/assets/javascripts/whats_new/store/state.js @@ -1,4 +1,9 @@ export default { open: false, - features: null, + features: [], + fetching: false, + drawerBodyHeight: null, + pageInfo: { + nextPage: null, + }, }; diff --git a/app/assets/javascripts/whats_new/utils/get_drawer_body_height.js b/app/assets/javascripts/whats_new/utils/get_drawer_body_height.js new file mode 100644 index 00000000000..21fc90c34a4 --- /dev/null +++ b/app/assets/javascripts/whats_new/utils/get_drawer_body_height.js @@ -0,0 +1,6 @@ +export const getDrawerBodyHeight = drawer => { + const drawerViewableHeight = drawer.clientHeight - drawer.getBoundingClientRect().top; + const drawerHeaderHeight = drawer.querySelector('.gl-drawer-header').clientHeight; + + return drawerViewableHeight - drawerHeaderHeight; +}; |