Render unstyled content in Whats New Drawer

In an iterative step towards the "Whats New" feature
(https://gitlab.com/groups/gitlab-org/-/epics/3556) this commit parses
YAML and passes it as props to the component for display.

part of:
https://gitlab.com/gitlab-org/growth/engineering/-/issues/5387

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

@@ -6,8 +6,26 @@ export default {
   components: {
     GlDrawer,
   },
+  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;
+    },
   },
   methods: {
     ...mapActions(['closeDrawer']),
@@ -22,7 +40,12 @@ export default {
         <h4>{{ __("What's new at GitLab") }}</h4>
       </template>
       <template>
-        <div></div>
+        <ul>
+          <li v-for="feature in parsedFeatures" :key="feature.title">
+            <h5>{{ feature.title }}</h5>
+            <p>{{ feature.body }}</p>
+          </li>
+        </ul>
       </template>
     </gl-drawer>
   </div>

app/assets/javascripts/whats_new/index.js

@@ -4,16 +4,21 @@ import Trigger from './components/trigger.vue';
 import store from './store';
 
 export default () => {
+  const whatsNewElm = document.getElementById('whats-new-app');
+
   // eslint-disable-next-line no-new
   new Vue({
-    el: document.getElementById('whats-new-app'),
+    el: whatsNewElm,
     store,
     components: {
       App,
     },
-
     render(createElement) {
-      return createElement('app');
+      return createElement('app', {
+        props: {
+          features: whatsNewElm.getAttribute('data-features'),
+        },
+      });
     },
   });
 

app/helpers/whats_new_helper.rb

+# frozen_string_literal: true
+
+module WhatsNewHelper
+  EMPTY_JSON = ''.to_json
+
+  def whats_new_most_recent_release_items
+    YAML.load_file(most_recent_release_file_path).to_json
+
+  rescue => e
+    Gitlab::ErrorTracking.track_exception(e, yaml_file_path: most_recent_release_file_path)
+
+    EMPTY_JSON
+  end
+
+  private
+
+  def most_recent_release_file_path
+    Dir.glob(files_path).max
+  end
+
+  def files_path
+    Rails.root.join('data', 'whats_new', '*.yml')
+  end
+end

app/views/layouts/header/_default.html.haml

@@ -100,7 +100,7 @@
         = sprite_icon('close', size: 12, css_class: 'close-icon js-navbar-toggle-left')
 
 - if ::Feature.enabled?(:whats_new_drawer)
-  #whats-new-app
+  #whats-new-app{ data: { features: whats_new_most_recent_release_items } }
 
 - if can?(current_user, :update_user_status, current_user)
   .js-set-status-modal-wrapper{ data: { current_emoji: current_user.status.present? ? current_user.status.emoji : '', current_message: current_user.status.present? ? current_user.status.message : '' } }

spec/fixtures/whats_new/01.yml

+---
+- title: It's gonna be a bright

spec/fixtures/whats_new/02.yml

+---
+- title: bright

spec/fixtures/whats_new/05.yml

+---
+- title: bright and sunshinin' day

spec/frontend/whats_new/components/app_spec.js

@@ -11,8 +11,9 @@ describe('App', () => {
   let store;
   let actions;
   let state;
+  let propsData = { features: '[ {"title":"Whats New Drawer"} ]' };
 
-  beforeEach(() => {
+  const buildWrapper = () => {
     actions = {
       closeDrawer: jest.fn(),
     };
@@ -29,7 +30,12 @@ describe('App', () => {
     wrapper = mount(App, {
       localVue,
       store,
+      propsData,
     });
+  };
+
+  beforeEach(() => {
+    buildWrapper();
   });
 
   afterEach(() => {
@@ -54,4 +60,15 @@ describe('App', () => {
 
     expect(getDrawer().props('open')).toBe(openState);
   });
+
+  it('renders features when provided as props', () => {
+    expect(wrapper.find('h5').text()).toBe('Whats New Drawer');
+  });
+
+  it('handles bad json argument gracefully', () => {
+    propsData = { features: 'this is not json' };
+    buildWrapper();
+
+    expect(getDrawer().exists()).toBe(true);
+  });
 });

spec/helpers/whats_new_helper_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe WhatsNewHelper do
+  describe '#whats_new_most_recent_release_items' do
+    let(:fixture_dir_glob) { Dir.glob(File.join('spec', 'fixtures', 'whats_new', '*.yml')) }
+
+    it 'returns json from the most recent file' do
+      allow(Dir).to receive(:glob).with(Rails.root.join('data', 'whats_new', '*.yml')).and_return(fixture_dir_glob)
+
+      expect(helper.whats_new_most_recent_release_items).to include({ title: "bright and sunshinin' day" }.to_json)
+    end
+
+    it 'fails gracefully and logs an error' do
+      allow(YAML).to receive(:load_file).and_raise
+
+      expect(Gitlab::ErrorTracking).to receive(:track_exception)
+      expect(helper.whats_new_most_recent_release_items).to eq(''.to_json)
+    end
+  end
+end