diff --git a/ee/app/assets/javascripts/iterations/components/iteration_breadcrumb.vue b/ee/app/assets/javascripts/iterations/components/iteration_breadcrumb.vue index d780af6a07529a02d9dc1d08269d34e75b346305..4233ac6373ea0f3b618ba1dc7864f674ab0aeff3 100644 --- a/ee/app/assets/javascripts/iterations/components/iteration_breadcrumb.vue +++ b/ee/app/assets/javascripts/iterations/components/iteration_breadcrumb.vue @@ -38,6 +38,13 @@ export default { }, }, }, + props: { + staticBreadcrumbs: { + type: Object, + default: () => ({ items: [] }), + required: false, + }, + }, data() { return { cadenceTitle: '', @@ -69,7 +76,9 @@ export default { } }); - return breadcrumbs; + const staticBreadcrumbs = this.staticBreadcrumbs.items; + + return [...staticBreadcrumbs, ...breadcrumbs]; }, }, methods: { diff --git a/ee/app/assets/javascripts/iterations/index.js b/ee/app/assets/javascripts/iterations/index.js index c6f15797b576564e9480863ce9fa695a8b4461ef..c4e71b3da4cd8de073afea39f0bb5937439d463c 100644 --- a/ee/app/assets/javascripts/iterations/index.js +++ b/ee/app/assets/javascripts/iterations/index.js @@ -51,7 +51,16 @@ export function initCadenceApp({ namespaceType }) { }, }); - injectVueAppBreadcrumbs(router, IterationBreadcrumb, apolloProvider); + injectVueAppBreadcrumbs( + router, + IterationBreadcrumb, + apolloProvider, + {}, + { + // Cf. https://gitlab.com/gitlab-org/gitlab/-/merge_requests/186906 + singleNavOptIn: true, + }, + ); return new Vue({ el, diff --git a/ee/spec/frontend/iterations/components/iteration_breadcrumb_spec.js b/ee/spec/frontend/iterations/components/iteration_breadcrumb_spec.js index 35a608daa01719527307b334b1143238b5178c8e..201fa8a08bc140e7fc107407099a1c9458e2c353 100644 --- a/ee/spec/frontend/iterations/components/iteration_breadcrumb_spec.js +++ b/ee/spec/frontend/iterations/components/iteration_breadcrumb_spec.js @@ -63,7 +63,7 @@ describe('Iteration Breadcrumb', () => { router = createRouter({ base, permissions }); }; - const mountComponent = ({ requestHandlers = [], readCadenceSpy } = {}) => { + const mountComponent = ({ requestHandlers = [], readCadenceSpy, props = {} } = {}) => { mockApollo = createMockApollo([[readCadenceQuery, readCadenceSpy], ...requestHandlers]); wrapper = extendedWrapper( @@ -71,7 +71,7 @@ describe('Iteration Breadcrumb', () => { router, provide: { groupPath: '' }, apolloProvider: mockApollo, - propsData: {}, + propsData: props, }), ); }; @@ -126,6 +126,32 @@ describe('Iteration Breadcrumb', () => { { path: 'edit', text: 'Edit', to: `/${cadenceId}/iterations/${iterationId}/edit` }, ]); }); + + it('passes the static breadcrumbs to GlBreadcrumb if provided', async () => { + await router.push({ name: 'editIteration', params: { cadenceId, iterationId } }); + mountComponent({ + readCadenceSpy: jest.fn().mockResolvedValue(cadenceResponse), + props: { + staticBreadcrumbs: { + items: [{ text: 'Static breadcrumb', href: '/static' }], + }, + }, + }); + await waitForApollo(); + + expect(findBreadcrumb().props('items')).toEqual([ + { text: 'Static breadcrumb', href: '/static' }, + { path: '', text: 'Iteration cadences', to: '/' }, + { path: '1234', text: 'cadenceTitle', to: '/1234' }, + { path: 'iterations', text: 'Iterations', to: `/${cadenceId}/iterations` }, + { + path: `${iterationId}`, + text: `${iterationId}`, + to: `/${cadenceId}/iterations/${iterationId}`, + }, + { path: 'edit', text: 'Edit', to: `/${cadenceId}/iterations/${iterationId}/edit` }, + ]); + }); }); describe('when cadenceId isnt present', () => {