diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-21 10:08:36 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-21 10:08:36 +0300 |
commit | 48aff82709769b098321c738f3444b9bdaa694c6 (patch) | |
tree | e00c7c43e2d9b603a5a6af576b1685e400410dee /app/assets/javascripts/whats_new | |
parent | 879f5329ee916a948223f8f43d77fba4da6cd028 (diff) |
Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42
Diffstat (limited to 'app/assets/javascripts/whats_new')
7 files changed, 106 insertions, 38 deletions
diff --git a/app/assets/javascripts/whats_new/components/app.vue b/app/assets/javascripts/whats_new/components/app.vue index a00661c214d..9400dacedc2 100644 --- a/app/assets/javascripts/whats_new/components/app.vue +++ b/app/assets/javascripts/whats_new/components/app.vue @@ -1,6 +1,10 @@ <script> import { mapState, mapActions } from 'vuex'; import { GlDrawer, GlBadge, GlIcon, GlLink } from '@gitlab/ui'; +import SkeletonLoader from './skeleton_loader.vue'; +import Tracking from '~/tracking'; + +const trackingMixin = Tracking.mixin(); export default { components: { @@ -8,66 +12,90 @@ export default { GlBadge, GlIcon, GlLink, + SkeletonLoader, }, + mixins: [trackingMixin], props: { - features: { + storageKey: { type: String, - required: false, + required: true, default: null, }, }, computed: { - ...mapState(['open']), - parsedFeatures() { - let features; - - try { - features = JSON.parse(this.$props.features) || []; - } catch (err) { - features = []; - } - - return features; - }, + ...mapState(['open', 'features']), }, mounted() { - this.openDrawer(); + this.openDrawer(this.storageKey); + this.fetchItems(); + + const body = document.querySelector('body'); + const namespaceId = body.getAttribute('data-namespace-id'); + + this.track('click_whats_new_drawer', { label: 'namespace_id', value: namespaceId }); }, methods: { - ...mapActions(['openDrawer', 'closeDrawer']), + ...mapActions(['openDrawer', 'closeDrawer', 'fetchItems']), }, }; </script> <template> <div> - <gl-drawer class="mt-6" :open="open" @close="closeDrawer"> + <gl-drawer class="whats-new-drawer" :open="open" @close="closeDrawer"> <template #header> <h4 class="page-title my-2">{{ __("What's new at GitLab") }}</h4> </template> <div class="pb-6"> - <div v-for="feature in parsedFeatures" :key="feature.title" class="mb-6"> - <gl-link :href="feature.url" target="_blank"> - <h5 class="gl-font-base">{{ feature.title }}</h5> - </gl-link> - <div class="mb-2"> - <template v-for="package_name in feature.packages"> - <gl-badge :key="package_name" size="sm" class="whats-new-item-badge mr-1"> - <gl-icon name="license" />{{ package_name }} - </gl-badge> - </template> + <template v-if="features"> + <div v-for="feature in features" :key="feature.title" class="mb-6"> + <gl-link + :href="feature.url" + target="_blank" + data-testid="whats-new-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> + </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> + </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 px-6 gl-py-3 whats-new-item-image" + /> + </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> - <gl-link :href="feature.url" target="_blank"> - <img - :alt="feature.title" - :src="feature.image_url" - class="img-thumbnail px-6 py-2 whats-new-item-image" - /> - </gl-link> - <p class="pt-2">{{ feature.body }}</p> - <gl-link :href="feature.url" target="_blank">{{ __('Learn more') }}</gl-link> + </template> + <div v-else class="gl-mt-5"> + <skeleton-loader /> + <skeleton-loader /> </div> </div> </gl-drawer> + <div v-if="open" class="whats-new-modal-backdrop modal-backdrop"></div> </div> </template> diff --git a/app/assets/javascripts/whats_new/components/skeleton_loader.vue b/app/assets/javascripts/whats_new/components/skeleton_loader.vue new file mode 100644 index 00000000000..41e7790f300 --- /dev/null +++ b/app/assets/javascripts/whats_new/components/skeleton_loader.vue @@ -0,0 +1,25 @@ +<script> +import { GlSkeletonLoader } from '@gitlab/ui'; + +export default { + components: { + GlSkeletonLoader, + }, +}; +</script> + +<template> + <gl-skeleton-loader :width="350" :height="420"> + <rect width="350" height="16" /> + <rect y="25" width="110" height="16" rx="8" /> + <rect x="115" y="25" width="110" height="16" rx="8" /> + <rect x="230" y="25" width="110" height="16" rx="8" /> + <rect y="50" width="350" height="165" rx="12" /> + <rect y="230" width="480" height="8" /> + <rect y="254" width="560" height="8" /> + <rect y="278" width="320" height="8" /> + <rect y="302" width="480" height="8" /> + <rect y="326" width="560" height="8" /> + <rect y="365" width="80" height="8" /> + </gl-skeleton-loader> +</template> diff --git a/app/assets/javascripts/whats_new/index.js b/app/assets/javascripts/whats_new/index.js index 19cdb590ae2..a57c9718156 100644 --- a/app/assets/javascripts/whats_new/index.js +++ b/app/assets/javascripts/whats_new/index.js @@ -19,7 +19,7 @@ export default () => { render(createElement) { return createElement('app', { props: { - features: whatsNewElm.getAttribute('data-features'), + storageKey: whatsNewElm.getAttribute('data-storage-key'), }, }); }, diff --git a/app/assets/javascripts/whats_new/store/actions.js b/app/assets/javascripts/whats_new/store/actions.js index 53488413d9e..a84dfb399d8 100644 --- a/app/assets/javascripts/whats_new/store/actions.js +++ b/app/assets/javascripts/whats_new/store/actions.js @@ -1,10 +1,20 @@ import * as types from './mutation_types'; +import axios from '~/lib/utils/axios_utils'; export default { closeDrawer({ commit }) { commit(types.CLOSE_DRAWER); }, - openDrawer({ commit }) { + openDrawer({ commit }, storageKey) { commit(types.OPEN_DRAWER); + + if (storageKey) { + localStorage.setItem(storageKey, JSON.stringify(false)); + } + }, + fetchItems({ commit }) { + return axios.get('/-/whats_new').then(({ data }) => { + commit(types.SET_FEATURES, data); + }); }, }; diff --git a/app/assets/javascripts/whats_new/store/mutation_types.js b/app/assets/javascripts/whats_new/store/mutation_types.js index daa65230101..124d33a88b1 100644 --- a/app/assets/javascripts/whats_new/store/mutation_types.js +++ b/app/assets/javascripts/whats_new/store/mutation_types.js @@ -1,2 +1,3 @@ export const CLOSE_DRAWER = 'CLOSE_DRAWER'; export const OPEN_DRAWER = 'OPEN_DRAWER'; +export const SET_FEATURES = 'SET_FEATURES'; diff --git a/app/assets/javascripts/whats_new/store/mutations.js b/app/assets/javascripts/whats_new/store/mutations.js index f7e84ee81a9..4fb7b17244e 100644 --- a/app/assets/javascripts/whats_new/store/mutations.js +++ b/app/assets/javascripts/whats_new/store/mutations.js @@ -7,4 +7,7 @@ export default { [types.OPEN_DRAWER](state) { state.open = true; }, + [types.SET_FEATURES](state, data) { + state.features = data; + }, }; diff --git a/app/assets/javascripts/whats_new/store/state.js b/app/assets/javascripts/whats_new/store/state.js index 97089a095f1..4c76284b865 100644 --- a/app/assets/javascripts/whats_new/store/state.js +++ b/app/assets/javascripts/whats_new/store/state.js @@ -1,3 +1,4 @@ export default { open: false, + features: null, }; |