1 files changed, 50 insertions, 6 deletions
diff --git a/app/assets/javascripts/whats_new/components/app.vue b/app/assets/javascripts/whats_new/components/app.vue
index d974556cb9e..a00661c214d 100644
--- a/app/assets/javascripts/whats_new/components/app.vue
+++ b/app/assets/javascripts/whats_new/components/app.vue
@@ -1,16 +1,40 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlDrawer } from '@gitlab/ui';
+import { GlDrawer, GlBadge, GlIcon, GlLink } from '@gitlab/ui';
 
 export default {
   components: {
     GlDrawer,
+    GlBadge,
+    GlIcon,
+    GlLink,
+  },
+  props: {
+    features: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     ...mapState(['open']),
+    parsedFeatures() {
+      let features;
+
+      try {
+        features = JSON.parse(this.$props.features) || [];
+      } catch (err) {
+        features = [];
+      }
+
+      return features;
+    },
+  },
+  mounted() {
+    this.openDrawer();
   },
   methods: {
-    ...mapActions(['closeDrawer']),
+    ...mapActions(['openDrawer', 'closeDrawer']),
   },
 };
 </script>
@@ -19,11 +43,31 @@ export default {
   <div>
     <gl-drawer class="mt-6" :open="open" @close="closeDrawer">
       <template #header>
-        <h4>{{ __("What's new at GitLab") }}</h4>
-      </template>
-      <template>
-        <div></div>
+        <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>
+          </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>
+        </div>
+      </div>
     </gl-drawer>
   </div>
 </template>