Merge branch '246531-optimize-layout_nav-for-main-js-loading' into 'master'

Optimize layout_nav for main.js loading

Closes #246531

See merge request gitlab-org/gitlab!41705

app/assets/javascripts/layout_nav.js

 import $ from 'jquery';
 import ContextualSidebar from './contextual_sidebar';
 import initFlyOutNav from './fly_out_nav';
-import initWhatsNew from '~/whats_new';
 
 function hideEndFade($scrollingTabs) {
   $scrollingTabs.each(function scrollTabsLoop() {
@@ -14,6 +13,17 @@ function hideEndFade($scrollingTabs) {
 
 function initDeferred() {
   $(document).trigger('init.scrolling-tabs');
+
+  const whatsNewTriggerEl = document.querySelector('.js-whats-new-trigger');
+  if (whatsNewTriggerEl) {
+    whatsNewTriggerEl.addEventListener('click', () => {
+      import(/* webpackChunkName: 'whatsNewApp' */ '~/whats_new')
+        .then(({ default: initWhatsNew }) => {
+          initWhatsNew();
+        })
+        .catch(() => {});
+    });
+  }
 }
 
 export default function initLayoutNav() {
@@ -21,7 +31,6 @@ export default function initLayoutNav() {
   contextualSidebar.bindEvents();
 
   initFlyOutNav();
-  initWhatsNew();
 
   // We need to init it on DomContentLoaded as others could also call it
   $(document).on('init.scrolling-tabs', () => {

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

@@ -30,8 +30,11 @@ export default {
       return features;
     },
   },
+  mounted() {
+    this.openDrawer();
+  },
   methods: {
-    ...mapActions(['closeDrawer']),
+    ...mapActions(['openDrawer', 'closeDrawer']),
   },
 };
 </script>

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

-<script>
-import { mapActions } from 'vuex';
-import { GlButton } from '@gitlab/ui';
-
-export default {
-  components: {
-    GlButton,
-  },
-  methods: {
-    ...mapActions(['openDrawer']),
-  },
-};
-</script>
-
-<template>
-  <li>
-    <gl-button variant="link" @click="openDrawer">{{ __("See what's new at GitLab") }}</gl-button>
-  </li>
-</template>

app/assets/javascripts/whats_new/index.js

 import Vue from 'vue';
 import App from './components/app.vue';
-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: whatsNewElm,
-    store,
-    components: {
-      App,
-    },
-    render(createElement) {
-      return createElement('app', {
-        props: {
-          features: whatsNewElm.getAttribute('data-features'),
-        },
-      });
-    },
-  });
+let whatsNewApp;
 
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: document.getElementById('whats-new-trigger'),
-    store,
-    components: {
-      Trigger,
-    },
+export default () => {
+  if (whatsNewApp) {
+    store.dispatch('openDrawer');
+  } else {
+    const whatsNewElm = document.getElementById('whats-new-app');
 
-    render(createElement) {
-      return createElement('trigger');
-    },
-  });
+    whatsNewApp = new Vue({
+      el: whatsNewElm,
+      store,
+      components: {
+        App,
+      },
+      render(createElement) {
+        return createElement('app', {
+          props: {
+            features: whatsNewElm.getAttribute('data-features'),
+          },
+        });
+      },
+    });
+  }
 };

ee/app/views/layouts/header/_whats_new_dropdown_item.html.haml

 - if ::Feature.enabled?(:whats_new_dropdown)
   - if ::Feature.enabled?(:whats_new_drawer)
-    #whats-new-trigger
+    %li
+      %button.js-whats-new-trigger{ type: 'button' }
+        = _("See what's new at GitLab")
   - else
     %li
       = link_to _("See what's new at GitLab"), "#{promo_url}/releases/gitlab-com/", target: '_blank', rel: 'noopener noreferrer', data: { track_event: 'click_whats_new', track_property: 'question_menu' }

spec/frontend/whats_new/components/app_spec.js

@@ -15,6 +15,7 @@ describe('App', () => {
 
   const buildWrapper = () => {
     actions = {
+      openDrawer: jest.fn(),
       closeDrawer: jest.fn(),
     };
 
@@ -48,6 +49,10 @@ describe('App', () => {
     expect(getDrawer().exists()).toBe(true);
   });
 
+  it('dispatches openDrawer when mounted', () => {
+    expect(actions.openDrawer).toHaveBeenCalled();
+  });
+
   it('dispatches closeDrawer when clicking close', () => {
     getDrawer().vm.$emit('close');
     expect(actions.closeDrawer).toHaveBeenCalled();

spec/frontend/whats_new/components/trigger_spec.js

-import { createLocalVue, mount } from '@vue/test-utils';
-import Vuex from 'vuex';
-import { GlButton } from '@gitlab/ui';
-import Trigger from '~/whats_new/components/trigger.vue';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('Trigger', () => {
-  let wrapper;
-  let store;
-  let actions;
-  let state;
-
-  beforeEach(() => {
-    actions = {
-      openDrawer: jest.fn(),
-    };
-
-    state = {
-      open: true,
-    };
-
-    store = new Vuex.Store({
-      actions,
-      state,
-    });
-
-    wrapper = mount(Trigger, {
-      localVue,
-      store,
-    });
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('dispatches openDrawer when clicking close', () => {
-    wrapper.find(GlButton).vm.$emit('click');
-    expect(actions.openDrawer).toHaveBeenCalled();
-  });
-});