summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/whats_new/components/app.vue
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2020-10-21 07:08:36 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2020-10-21 07:08:36 +0000
commit48aff82709769b098321c738f3444b9bdaa694c6 (patch)
treee00c7c43e2d9b603a5a6af576b1685e400410dee /app/assets/javascripts/whats_new/components/app.vue
parent879f5329ee916a948223f8f43d77fba4da6cd028 (diff)
downloadgitlab-ce-48aff82709769b098321c738f3444b9bdaa694c6.tar.gz
Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42
Diffstat (limited to 'app/assets/javascripts/whats_new/components/app.vue')
-rw-r--r--app/assets/javascripts/whats_new/components/app.vue100
1 files changed, 64 insertions, 36 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>