2 files changed, 89 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>
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>