Show category icons in user popover

Show bio, organization and location icons within user popover.

3 files changed, 39 insertions, 4 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 f9773622001..4dbfd1ba6f4 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,11 +1,13 @@
 <script>
 import { GlPopover, GlSkeletonLoading } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
 import UserAvatarImage from '../user_avatar/user_avatar_image.vue';
 import { glEmojiTag } from '../../../emoji';
 
 export default {
   name: 'UserPopover',
   components: {
+    Icon,
     GlPopover,
     GlSkeletonLoading,
     UserAvatarImage,
@@ -68,16 +70,27 @@ export default {
           <gl-skeleton-loading v-else :lines="1" class="animation-container-small mb-1" />
         </div>
         <div class="text-secondary">
-          <div v-if="user.bio" class="js-bio">{{ user.bio }}</div>
-          <div v-if="user.organization" class="js-organization">{{ user.organization }}</div>
+          <div v-if="user.bio" class="js-bio d-flex mb-1">
+            <icon name="profile" css-classes="category-icon" />
+            <span class="ml-1">{{ user.bio }}</span>
+          </div>
+          <div v-if="user.organization" class="js-organization d-flex mb-1">
+            <icon v-show="!jobInfoIsLoading" name="work" css-classes="category-icon" />
+            <span class="ml-1">{{ user.organization }}</span>
+          </div>
           <gl-skeleton-loading
             v-if="jobInfoIsLoading"
             :lines="1"
             class="animation-container-small mb-1"
           />
         </div>
-        <div class="text-secondary">
-          {{ user.location }}
+        <div class="js-location text-secondary d-flex">
+          <icon
+            v-show="!locationIsLoading && user.location"
+            name="location"
+            css-classes="category-icon"
+          />
+          <span class="ml-1">{{ user.location }}</span>
           <gl-skeleton-loading
             v-if="locationIsLoading"
             :lines="1"
diff --git a/app/assets/stylesheets/components/popover.scss b/app/assets/stylesheets/components/popover.scss
index 7d46b262a69..838bf5d343b 100644
--- a/app/assets/stylesheets/components/popover.scss
+++ b/app/assets/stylesheets/components/popover.scss
@@ -5,6 +5,10 @@
     padding: $gl-padding-8;
     font-size: $gl-font-size-small;
     line-height: $gl-line-height;
+
+    .category-icon {
+      color: $gray-600;
+    }
   }
 }
 
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 852558a83bc..c7e0d806d80 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
@@ -61,6 +61,12 @@ describe('User Popover Component', () => {
       expect(vm.$el.textContent).toContain(DEFAULT_PROPS.user.username);
       expect(vm.$el.textContent).toContain(DEFAULT_PROPS.user.location);
     });
+
+    it('shows icon for location', () => {
+      const iconEl = vm.$el.querySelector('.js-location svg');
+
+      expect(iconEl.querySelector('use').getAttribute('xlink:href')).toContain('location');
+    });
   });
 
   describe('job data', () => {
@@ -117,6 +123,18 @@ describe('User Popover Component', () => {
         'Me & my <funky> Company',
       );
     });
+
+    it('shows icon for bio', () => {
+      const iconEl = vm.$el.querySelector('.js-bio svg');
+
+      expect(iconEl.querySelector('use').getAttribute('xlink:href')).toContain('profile');
+    });
+
+    it('shows icon for organization', () => {
+      const iconEl = vm.$el.querySelector('.js-organization svg');
+
+      expect(iconEl.querySelector('use').getAttribute('xlink:href')).toContain('work');
+    });
   });
 
   describe('status data', () => {