All files / app/assets/javascripts/whats_new/components app.vue

100% Statements 20/20
100% Branches 4/4
100% Functions 5/5
100% Lines 20/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94  1x 1x 1x 1x 1x 1x   1x                                             12x 12x   12x 12x   12x         2x 2x 1x       1x 1x     13x   13x           126x                                                                  
<script>
import { GlDrawer, GlInfiniteScroll, GlResizeObserverDirective } from '@gitlab/ui';
import { mapState, mapActions } from 'vuex';
import Tracking from '~/tracking';
import { getDrawerBodyHeight } from '../utils/get_drawer_body_height';
import Feature from './feature.vue';
import SkeletonLoader from './skeleton_loader.vue';
 
const trackingMixin = Tracking.mixin();
 
export default {
  components: {
    GlDrawer,
    GlInfiniteScroll,
    SkeletonLoader,
    Feature,
  },
  directives: {
    GlResizeObserver: GlResizeObserverDirective,
  },
  mixins: [trackingMixin],
  props: {
    versionDigest: {
      type: String,
      required: true,
    },
  },
  computed: {
    ...mapState(['open', 'features', 'pageInfo', 'drawerBodyHeight', 'fetching']),
  },
  mounted() {
    this.openDrawer(this.versionDigest);
    this.fetchFreshItems();
 
    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', 'fetchItems', 'setDrawerBodyHeight']),
    bottomReached() {
      const page = this.pageInfo.nextPage;
      if (page) {
        this.fetchFreshItems(page);
      }
    },
    handleResize() {
      const height = getDrawerBodyHeight(this.$refs.drawer.$el);
      this.setDrawerBodyHeight(height);
    },
    fetchFreshItems(page) {
      const { versionDigest } = this;
 
      this.fetchItems({ page, versionDigest });
    },
  },
};
</script>
 
<template>
  <div>
    <gl-drawer
      ref="drawer"
      v-gl-resize-observer="handleResize"
      class="whats-new-drawer gl-reset-line-height"
      :z-index="700"
      :open="open"
      @close="closeDrawer"
    >
      <template #title>
        <h4 class="page-title gl-my-2">{{ __("What's new") }}</h4>
      </template>
      <template v-if="features.length">
        <gl-infinite-scroll
          :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>
      </template>
      <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" @click="closeDrawer"></div>
  </div>
</template>