Commit 1dd797d7 authored by Mark Florian's avatar Mark Florian

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
parents 113f54fb 81b3f18d
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', () => {
......
......@@ -30,8 +30,11 @@ export default {
return features;
},
},
mounted() {
this.openDrawer();
},
methods: {
...mapActions(['closeDrawer']),
...mapActions(['openDrawer', 'closeDrawer']),
},
};
</script>
......
<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>
import Vue from 'vue';
import App from './components/app.vue';
import Trigger from './components/trigger.vue';
import store from './store';
let whatsNewApp;
export default () => {
if (whatsNewApp) {
store.dispatch('openDrawer');
} else {
const whatsNewElm = document.getElementById('whats-new-app');
// eslint-disable-next-line no-new
new Vue({
whatsNewApp = new Vue({
el: whatsNewElm,
store,
components: {
......@@ -21,17 +24,5 @@ export default () => {
});
},
});
// eslint-disable-next-line no-new
new Vue({
el: document.getElementById('whats-new-trigger'),
store,
components: {
Trigger,
},
render(createElement) {
return createElement('trigger');
},
});
}
};
- 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' }
......@@ -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();
......
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();
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment