Merge branch 'jswain_whats_new_backdrop' into 'master'

clicking backdrop closes modal for What's New

See merge request gitlab-org/gitlab!61420

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

@@ -88,6 +88,6 @@ export default {
         <skeleton-loader />
       </div>
     </gl-drawer>
-    <div v-if="open" class="whats-new-modal-backdrop modal-backdrop"></div>
+    <div v-if="open" class="whats-new-modal-backdrop modal-backdrop" @click="closeDrawer"></div>
   </div>
 </template>

changelogs/unreleased/jswain_whats_new_backdrop.yml

+---
+title: clicking backdrop closes modal for What's New
+merge_request: 61420
+author:
+type: changed

spec/frontend/whats_new/components/app_spec.js

@@ -82,6 +82,7 @@ describe('App', () => {
     });
 
     const getDrawer = () => wrapper.find(GlDrawer);
+    const getBackdrop = () => wrapper.find('.whats-new-modal-backdrop');
 
     it('contains a drawer', () => {
       expect(getDrawer().exists()).toBe(true);
@@ -100,6 +101,11 @@ describe('App', () => {
       expect(actions.closeDrawer).toHaveBeenCalled();
     });
 
+    it('dispatches closeDrawer when clicking the backdrop', () => {
+      getBackdrop().trigger('click');
+      expect(actions.closeDrawer).toHaveBeenCalled();
+    });
+
     it.each([true, false])('passes open property', async (openState) => {
       wrapper.vm.$store.state.open = openState;