Split bio into individual line in extended user tooltips

- Remove leading 'at' in organzation info
- Update karma tests

4 files changed, 16 insertions, 27 deletions

diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
index fad1a2f3f56..d24fe1b547e 100644
--- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
+++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
@@ -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"
diff --git a/changelogs/unreleased/55293-split-bio-into-individual-line-in-extended-user-tooltips.yml b/changelogs/unreleased/55293-split-bio-into-individual-line-in-extended-user-tooltips.yml
new file mode 100644
index 00000000000..c6ff52b0fa1
--- /dev/null
+++ b/changelogs/unreleased/55293-split-bio-into-individual-line-in-extended-user-tooltips.yml
@@ -0,0 +1,5 @@
+---
+title: Split bio into individual line in extended user tooltips
+merge_request: 23940
+author:
+type: other
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 61fb56d2fa2..d3ee03a76da 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -97,9 +97,6 @@ msgstr[1] ""
 msgid "%{actionText} & %{openOrClose} %{noteable}"
 msgstr ""
 
-msgid "%{bio} at %{organization}"
-msgstr ""
-
 msgid "%{commit_author_link} authored %{commit_timeago}"
 msgstr ""
 
diff --git a/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js b/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js
index e16ab156679..25b6e3b6bc8 100644
--- a/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js
+++ b/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js
@@ -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',
+      );
     });
   });