Split bio into individual line in extended user tooltips
- Remove leading 'at' in organzation info - Update karma tests
This commit is contained in:
parent
347d163362
commit
63307ade1c
|
@ -1,6 +1,5 @@
|
|||
<script>
|
||||
import { GlPopover, GlSkeletonLoading } from '@gitlab/ui';
|
||||
import { __, sprintf } from '~/locale';
|
||||
import UserAvatarImage from '../user_avatar/user_avatar_image.vue';
|
||||
import { glEmojiTag } from '../../../emoji';
|
||||
|
||||
|
@ -28,23 +27,6 @@ export default {
|
|||
},
|
||||
},
|
||||
computed: {
|
||||
jobLine() {
|
||||
if (this.user.bio && this.user.organization) {
|
||||
return sprintf(
|
||||
__('%{bio} at %{organization}'),
|
||||
{
|
||||
bio: this.user.bio,
|
||||
organization: this.user.organization,
|
||||
},
|
||||
false,
|
||||
);
|
||||
} else if (this.user.bio) {
|
||||
return this.user.bio;
|
||||
} else if (this.user.organization) {
|
||||
return this.user.organization;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
statusHtml() {
|
||||
if (this.user.status.emoji && this.user.status.message) {
|
||||
return `${glEmojiTag(this.user.status.emoji)} ${this.user.status.message}`;
|
||||
|
@ -86,7 +68,8 @@ export default {
|
|||
<gl-skeleton-loading v-else :lines="1" class="animation-container-small mb-1" />
|
||||
</div>
|
||||
<div class="text-secondary">
|
||||
{{ jobLine }}
|
||||
<div v-if="user.bio" class="js-bio">{{ user.bio }}</div>
|
||||
<div v-if="user.organization" class="js-organization">{{ user.organization }}</div>
|
||||
<gl-skeleton-loading
|
||||
v-if="jobInfoIsLoading"
|
||||
:lines="1"
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Split bio into individual line in extended user tooltips
|
||||
merge_request: 23940
|
||||
author:
|
||||
type: other
|
|
@ -97,9 +97,6 @@ msgstr[1] ""
|
|||
msgid "%{actionText} & %{openOrClose} %{noteable}"
|
||||
msgstr ""
|
||||
|
||||
msgid "%{bio} at %{organization}"
|
||||
msgstr ""
|
||||
|
||||
msgid "%{commit_author_link} authored %{commit_timeago}"
|
||||
msgstr ""
|
||||
|
||||
|
|
|
@ -89,7 +89,7 @@ describe('User Popover Component', () => {
|
|||
expect(vm.$el.textContent).toContain('GitLab');
|
||||
});
|
||||
|
||||
it('should have full job line when we have bio and organization', () => {
|
||||
it('should display bio and organization in separate lines', () => {
|
||||
const testProps = Object.assign({}, DEFAULT_PROPS);
|
||||
testProps.user.bio = 'Engineer';
|
||||
testProps.user.organization = 'GitLab';
|
||||
|
@ -99,20 +99,24 @@ describe('User Popover Component', () => {
|
|||
target: document.querySelector('.js-user-link'),
|
||||
});
|
||||
|
||||
expect(vm.$el.textContent).toContain('Engineer at GitLab');
|
||||
expect(vm.$el.querySelector('.js-bio').textContent).toContain('Engineer');
|
||||
expect(vm.$el.querySelector('.js-organization').textContent).toContain('GitLab');
|
||||
});
|
||||
|
||||
it('should not encode special characters when we have bio and organization', () => {
|
||||
it('should not encode special characters in bio and organization', () => {
|
||||
const testProps = Object.assign({}, DEFAULT_PROPS);
|
||||
testProps.user.bio = 'Manager & Team Lead';
|
||||
testProps.user.organization = 'GitLab';
|
||||
testProps.user.organization = 'Me & my <funky> Company';
|
||||
|
||||
vm = mountComponent(UserPopover, {
|
||||
...DEFAULT_PROPS,
|
||||
target: document.querySelector('.js-user-link'),
|
||||
});
|
||||
|
||||
expect(vm.$el.textContent).toContain('Manager & Team Lead at GitLab');
|
||||
expect(vm.$el.querySelector('.js-bio').textContent).toContain('Manager & Team Lead');
|
||||
expect(vm.$el.querySelector('.js-organization').textContent).toContain(
|
||||
'Me & my <funky> Company',
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue