diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue index 3c4ae08d2f715c20a39cfce6d6b28d584aa79bbf..8e459cc21ac6c5ba67d9b19fed1c162e8075ff60 100644 --- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue +++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue @@ -75,6 +75,10 @@ export default { // GraphQL returns `avatarUrl` and Rest `avatar_url` return this.user?.avatarUrl || this.user?.avatar_url; }, + webUrl() { + // GraphQL returns `webUrl` and Rest `web_url` + return this.user?.webUrl || this.user?.web_url; + }, statusTooltipHTML() { // Rest `status_tooltip_html` which is a ready to work // html for the emoji and the status text inside a tooltip. @@ -132,7 +136,7 @@ export default { :data-user-id="userId" :data-username="user.username" :data-name="user.name" - :href="user.webUrl" + :href="webUrl" target="_blank" class="js-user-link gl-vertical-align-middle gl-mx-2 gl-align-items-center" > diff --git a/spec/frontend/vue_shared/components/header_ci_component_spec.js b/spec/frontend/vue_shared/components/header_ci_component_spec.js index aea76f164f0ec7b08daf0c2ac0df5d4c07071464..94e1ece8c6b6eb8109727ec16ab2d2a9fbc0faf9 100644 --- a/spec/frontend/vue_shared/components/header_ci_component_spec.js +++ b/spec/frontend/vue_shared/components/header_ci_component_spec.js @@ -84,11 +84,12 @@ describe('Header CI Component', () => { expect(findUserLink().text()).toContain(defaultProps.user.username); }); - it('has the correct data attributes', () => { + it('has the correct HTML attributes', () => { expect(findUserLink().attributes()).toMatchObject({ 'data-user-id': defaultProps.user.id.toString(), 'data-username': defaultProps.user.username, 'data-name': defaultProps.user.name, + href: defaultProps.user.web_url, }); });