Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42

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;
+};