Merge branch '24072-user-profile-add-job-title' into 'master'

Add job title to user profile

See merge request gitlab-org/gitlab!25155

app/assets/javascripts/user_popovers.js

@@ -39,6 +39,7 @@ const populateUserInfo = user => {
           location: userData.location,
           bio: userData.bio,
           organization: userData.organization,
+          jobTitle: userData.job_title,
           loaded: true,
         });
       }

app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue

 <script>
-import { GlPopover, GlSkeletonLoading } from '@gitlab/ui';
+import { GlPopover, GlSkeletonLoading, GlSprintf } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import UserAvatarImage from '../user_avatar/user_avatar_image.vue';
 import { glEmojiTag } from '../../../emoji';
+import { s__ } from '~/locale';
+import { isString } from 'lodash';
 
 export default {
   name: 'UserPopover',
@@ -10,6 +12,7 @@ export default {
     Icon,
     GlPopover,
     GlSkeletonLoading,
+    GlSprintf,
     UserAvatarImage,
   },
   props: {
@@ -45,8 +48,27 @@ export default {
     nameIsLoading() {
       return !this.user.name;
     },
-    jobInfoIsLoading() {
-      return !this.user.loaded && this.user.organization === null;
+    workInformationIsLoading() {
+      return !this.user.loaded && this.workInformation === null;
+    },
+    workInformation() {
+      const { jobTitle, organization } = this.user;
+
+      if (organization && jobTitle) {
+        return {
+          message: s__('Profile|%{job_title} at %{organization}'),
+          placeholders: { job_title: jobTitle, organization },
+        };
+      } else if (organization) {
+        return organization;
+      } else if (jobTitle) {
+        return jobTitle;
+      }
+
+      return null;
+    },
+    workInformationShouldUseSprintf() {
+      return !isString(this.workInformation);
     },
     locationIsLoading() {
       return !this.user.loaded && this.user.location === null;
@@ -72,16 +94,30 @@ 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 d-flex mb-1">
+          <div v-if="user.bio" class="d-flex mb-1">
             <icon name="profile" class="category-icon flex-shrink-0" />
-            <span class="ml-1">{{ user.bio }}</span>
+            <span ref="bio" 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" class="category-icon flex-shrink-0" />
-            <span class="ml-1">{{ user.organization }}</span>
+          <div v-if="workInformation" class="d-flex mb-1">
+            <icon
+              v-show="!workInformationIsLoading"
+              name="work"
+              class="category-icon flex-shrink-0"
+            />
+            <span ref="workInformation" class="ml-1">
+              <gl-sprintf v-if="workInformationShouldUseSprintf" :message="workInformation.message">
+                <template
+                  v-for="(placeholder, slotName) in workInformation.placeholders"
+                  v-slot:[slotName]
+                >
+                  <span :key="slotName">{{ placeholder }}</span>
+                </template>
+              </gl-sprintf>
+              <span v-else>{{ workInformation }}</span>
+            </span>
           </div>
           <gl-skeleton-loading
-            v-if="jobInfoIsLoading"
+            v-if="workInformationIsLoading"
             :lines="1"
             class="animation-container-small mb-1"
           />

app/assets/stylesheets/framework/blocks.scss

@@ -161,15 +161,19 @@
   }
 
   .cover-controls {
+    @include media-breakpoint-up(sm) {
       position: absolute;
-    top: 10px;
-    right: 10px;
+      top: 1rem;
+      right: 1.25rem;
+    }
 
     &.left {
-      left: 10px;
+      @include media-breakpoint-up(sm) {
+        left: 1.25rem;
         right: auto;
       }
     }
+  }
 
   &.groups-cover-block {
     background: $white-light;

app/assets/stylesheets/framework/mixins.scss

@@ -401,3 +401,21 @@
   line-height: 16px;
   text-align: center;
 }
+
+@mixin middle-dot-divider {
+  &::after {
+    // Duplicate `content` property used as a fallback
+    // scss-lint:disable DuplicateProperty
+    content: '\00B7'; // middle dot fallback if browser does not support alternative content
+    content: '\00B7' / ''; // tell screen readers to ignore the content https://www.w3.org/TR/css-content-3/#accessibility
+    padding: 0 0.375rem;
+    font-weight: $gl-font-weight-bold;
+  }
+
+  &:last-child {
+    &::after {
+      content: '';
+      padding: 0;
+    }
+  }
+}

app/assets/stylesheets/pages/profile.scss

@@ -74,17 +74,12 @@
 
 // Middle dot divider between each element in a list of items.
 .middle-dot-divider {
-  &::after {
-    content: '\00B7'; // Middle Dot
-    padding: 0 6px;
-    font-weight: $gl-font-weight-bold;
-  }
+  @include middle-dot-divider;
+}
 
-  &:last-child {
-    &::after {
-      content: '';
-      padding: 0;
-    }
+.middle-dot-divider-sm {
+  @include media-breakpoint-up(sm) {
+    @include middle-dot-divider;
   }
 }
 
@@ -202,10 +197,6 @@
 }
 
 .user-profile {
-  .cover-controls a {
-    margin-left: 5px;
-  }
-
   .profile-header {
     margin: 0 $gl-padding;
 

app/helpers/users_helper.rb

@@ -91,6 +91,21 @@ module UsersHelper
     end
   end
 
+  def work_information(user)
+    return unless user
+
+    organization = user.organization
+    job_title = user.job_title
+
+    if organization.present? && job_title.present?
+      s_('Profile|%{job_title} at %{organization}') % { job_title: job_title, organization: organization }
+    elsif job_title.present?
+      job_title
+    elsif organization.present?
+      organization
+    end
+  end
+
   private
 
   def get_profile_tabs

app/views/help/ui.html.haml

 - page_title "UI Development Kit", "Help"
 - lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum nisi sapien, non consequat lectus aliquam ultrices. Suspendisse sodales est euismod nunc condimentum, a consectetur diam ornare."
+- link_classes = "flex-grow-1 mx-1 "
 
 .gitlab-ui-dev-kit
   %h1 GitLab UI development kit
@@ -64,7 +65,12 @@
     Cover block for profile page with avatar, name and description
     %code .cover-block
   .example
-    .cover-block
+    .cover-block.user-cover-block
+      = render layout: 'users/cover_controls' do
+        = link_to '#', class: link_classes + 'btn btn-default' do
+          = icon('pencil')
+        = link_to '#', class: link_classes + 'btn btn-default' do
+          = icon('rss')
       .avatar-holder
         = image_tag avatar_icon_for_email('admin@example.com', 90), class: "avatar s90", alt: ''
       .cover-title
@@ -73,13 +79,6 @@
       .cover-desc.cgray
         = lorem
 
-      .cover-controls
-        = link_to '#', class: 'btn btn-default' do
-          = icon('pencil')
-         
-        = link_to '#', class: 'btn btn-default' do
-          = icon('rss')
-
   %h2#lists Lists
 
   .lead

app/views/profiles/show.html.haml

@@ -90,7 +90,6 @@
       .row
         = render 'profiles/name', form: f, user: @user
         = f.text_field :id, readonly: true, label: s_('Profiles|User ID'), wrapper: { class: 'col-md-3' }
-      = f.select :role, ::User.roles.keys.map { |role| [role.titleize, role] }, { prompt: _('Select your role') }, required: true, class: 'input-md'
 
       = render_if_exists 'profiles/email_settings', form: f
       = f.text_field :skype, class: 'input-md', placeholder: s_("Profiles|username")
@@ -101,6 +100,7 @@
         = f.text_field :location, readonly: true, help: s_("Profiles|Your location was automatically set based on your %{provider_label} account") % { provider_label: attribute_provider_label(:location) }
       - else
         = f.text_field :location, label: s_('Profiles|Location'), class: 'input-lg', placeholder: s_("Profiles|City, country")
+      = f.text_field :job_title, class: 'input-md'
       = f.text_field :organization, label: s_('Profiles|Organization'), class: 'input-md', help: s_("Profiles|Who you represent or work for")
       = f.text_area :bio, label: s_('Profiles|Bio'), rows: 4, maxlength: 250, help: s_("Profiles|Tell us about yourself in fewer than 250 characters")
       %hr

app/views/users/_cover_controls.html.haml

+.cover-controls.d-flex.px-2.pb-4.d-sm-block.p-sm-0
+  = yield

app/views/users/_profile_basic_info.html.haml

-%p
+%p.mb-1.mb-sm-2.mt-2.mt-sm-3
   %span.middle-dot-divider
     @#{@user.username}
   - if can?(current_user, :read_user_profile, @user)

app/views/users/show.html.haml

@@ -4,30 +4,31 @@
 - page_title       @user.blocked? ? s_('UserProfile|Blocked user') : @user.name
 - page_description @user.bio
 - header_title     @user.name, user_path(@user)
+- link_classes = "flex-grow-1 mx-1 "
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, user_url(@user, format: :atom), title: "#{@user.name} activity")
 
 .user-profile
   .cover-block.user-cover-block{ class: [('border-bottom' if profile_tabs.empty?)] }
-    .cover-controls
+    = render layout: 'users/cover_controls' do
       - if @user == current_user
-        = link_to profile_path, class: 'btn btn-default has-tooltip', title: s_('UserProfile|Edit profile'), 'aria-label': 'Edit profile' do
+        = link_to profile_path, class: link_classes + 'btn btn-default has-tooltip', title: s_('UserProfile|Edit profile'), 'aria-label': 'Edit profile' do
           = icon('pencil')
       - elsif current_user
         - if @user.abuse_report
-          %button.btn.btn-danger{ title: s_('UserProfile|Already reported for abuse'),
+          %button{ class: link_classes + 'btn btn-danger mr-1', title: s_('UserProfile|Already reported for abuse'),
             data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } }
             = icon('exclamation-circle')
         - else
-          = link_to new_abuse_report_path(user_id: @user.id, ref_url: request.referrer), class: 'btn',
+          = link_to new_abuse_report_path(user_id: @user.id, ref_url: request.referrer), class: link_classes + 'btn',
             title: s_('UserProfile|Report abuse'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
             = icon('exclamation-circle')
       - if can?(current_user, :read_user_profile, @user)
-        = link_to user_path(@user, rss_url_options), class: 'btn btn-default has-tooltip', title: s_('UserProfile|Subscribe'), 'aria-label': 'Subscribe' do
+        = link_to user_path(@user, rss_url_options), class: link_classes + 'btn btn-default has-tooltip', title: s_('UserProfile|Subscribe'), 'aria-label': 'Subscribe' do
           = icon('rss')
       - if current_user && current_user.admin?
-        = link_to [:admin, @user], class: 'btn btn-default', title: s_('UserProfile|View user in admin area'),
+        = link_to [:admin, @user], class: link_classes + 'btn btn-default', title: s_('UserProfile|View user in admin area'),
           data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
           = icon('users')
 
@@ -51,10 +52,18 @@
               = emoji_icon(@user.status.emoji)
               = markdown_field(@user.status, :message)
           = render "users/profile_basic_info"
-          .cover-desc.cgray
-            - unless @user.public_email.blank?
-              .profile-link-holder.middle-dot-divider
-                = link_to @user.public_email, "mailto:#{@user.public_email}", class: 'text-link'
+          .cover-desc.cgray.mb-1.mb-sm-2
+            - unless @user.location.blank?
+              .profile-link-holder.middle-dot-divider-sm.d-block.d-sm-inline.mb-1.mb-sm-0
+                = sprite_icon('location', size: 16, css_class: 'vertical-align-sub fgray')
+                %span.vertical-align-middle
+                  = @user.location
+            - unless work_information(@user).blank?
+              .profile-link-holder.middle-dot-divider-sm.d-block.d-sm-inline
+                = sprite_icon('work', size: 16, css_class: 'vertical-align-middle fgray')
+                %span.vertical-align-middle
+                  = work_information(@user)
+          .cover-desc.cgray.mb-1.mb-sm-2
             - unless @user.skype.blank?
               .profile-link-holder.middle-dot-divider
                 = link_to "skype:#{@user.skype}", title: "Skype" do
@@ -64,24 +73,18 @@
                 = link_to linkedin_url(@user), title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow' do
                   = icon('linkedin-square')
             - unless @user.twitter.blank?
-              .profile-link-holder.middle-dot-divider
+              .profile-link-holder.middle-dot-divider-sm
                 = link_to twitter_url(@user), title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow' do
                   = icon('twitter-square')
             - unless @user.website_url.blank?
-              .profile-link-holder.middle-dot-divider
+              .profile-link-holder.middle-dot-divider-sm.d-block.d-sm-inline.mt-1.mt-sm-0
                 = link_to @user.short_website_url, @user.full_website_url, class: 'text-link', target: '_blank', rel: 'me noopener noreferrer nofollow'
-            - unless @user.location.blank?
-              .profile-link-holder.middle-dot-divider
-                = sprite_icon('location', size: 16, css_class: 'vertical-align-sub')
-                = @user.location
-            - unless @user.organization.blank?
-              .profile-link-holder.middle-dot-divider
-                = sprite_icon('work', size: 16, css_class: 'vertical-align-sub')
-                = @user.organization
-
+            - unless @user.public_email.blank?
+              .profile-link-holder.middle-dot-divider-sm.d-block.d-sm-inline.mt-1.mt-sm-0
+                = link_to @user.public_email, "mailto:#{@user.public_email}", class: 'text-link'
         - if @user.bio.present?
           .cover-desc.cgray
-            %p.profile-user-bio
+            %p.profile-user-bio.font-italic
               = @user.bio
 
     - unless profile_tabs.empty?

changelogs/unreleased/24072-user-profile-add-job-title.yml

+---
+title: Add "Job Title" field in user settings and display on profile
+merge_request: 25155
+author:
+type: added

locale/gitlab.pot

@@ -15151,6 +15151,9 @@ msgstr ""
 msgid "Profiles|your account"
 msgstr ""
 
+msgid "Profile|%{job_title} at %{organization}"
+msgstr ""
+
 msgid "Profiling - Performance bar"
 msgstr ""
 
@@ -17682,9 +17685,6 @@ msgstr ""
 msgid "Select user"
 msgstr ""
 
-msgid "Select your role"
-msgstr ""
-
 msgid "Selected levels cannot be used by non-admin users for groups, projects or snippets. If the public level is restricted, user profiles are only visible to logged in users."
 msgstr ""
 

spec/features/profiles/user_edit_profile_spec.rb

@@ -15,6 +15,11 @@ describe 'User edit profile' do
     wait_for_requests if respond_to?(:wait_for_requests)
   end
 
+  def visit_user
+    visit user_path(user)
+    wait_for_requests
+  end
+
   it 'changes user profile' do
     fill_in 'user_skype', with: 'testskype'
     fill_in 'user_linkedin', with: 'testlinkedin'
@@ -22,8 +27,8 @@ describe 'User edit profile' do
     fill_in 'user_website_url', with: 'testurl'
     fill_in 'user_location', with: 'Ukraine'
     fill_in 'user_bio', with: 'I <3 GitLab'
+    fill_in 'user_job_title', with: 'Frontend Engineer'
     fill_in 'user_organization', with: 'GitLab'
-    select 'Data Analyst', from: 'user_role'
     submit_settings
 
     expect(user.reload).to have_attributes(
@@ -32,8 +37,8 @@ describe 'User edit profile' do
       twitter: 'testtwitter',
       website_url: 'testurl',
       bio: 'I <3 GitLab',
-      organization: 'GitLab',
-      role: 'data_analyst'
+      job_title: 'Frontend Engineer',
+      organization: 'GitLab'
     )
 
     expect(find('#user_location').value).to eq 'Ukraine'
@@ -94,11 +99,6 @@ describe 'User edit profile' do
   end
 
   context 'user status', :js do
-    def visit_user
-      visit user_path(user)
-      wait_for_requests
-    end
-
     def select_emoji(emoji_name, is_modal = false)
       emoji_menu_class = is_modal ? '.js-modal-status-emoji-menu' : '.js-status-emoji-menu'
       toggle_button = find('.js-toggle-emoji-menu')
@@ -381,4 +381,40 @@ describe 'User edit profile' do
       end
     end
   end
+
+  context 'work information', :js do
+    context 'when job title and organziation are entered' do
+      it "shows job title and organzation on user's profile" do
+        fill_in 'user_job_title', with: 'Frontend Engineer'
+        fill_in 'user_organization', with: 'GitLab - work info test'
+        submit_settings
+
+        visit_user
+
+        expect(page).to have_content('Frontend Engineer at GitLab - work info test')
+      end
+    end
+
+    context 'when only job title is entered' do
+      it "shows only job title on user's profile" do
+        fill_in 'user_job_title', with: 'Frontend Engineer - work info test'
+        submit_settings
+
+        visit_user
+
+        expect(page).to have_content('Frontend Engineer - work info test')
+      end
+    end
+
+    context 'when only organization is entered' do
+      it "shows only organization on user's profile" do
+        fill_in 'user_organization', with: 'GitLab - work info test'
+        submit_settings
+
+        visit_user
+
+        expect(page).to have_content('GitLab - work info test')
+      end
+    end
+  end
 end

spec/features/users/show_spec.rb

@@ -26,6 +26,34 @@ describe 'User page' do
 
       expect(page).not_to have_content("This user has a private profile")
     end
+
+    context 'work information' do
+      subject { visit(user_path(user)) }
+
+      it 'shows job title and organization details' do
+        user.update(organization: 'GitLab - work info test', job_title: 'Frontend Engineer')
+
+        subject
+
+        expect(page).to have_content('Frontend Engineer at GitLab - work info test')
+      end
+
+      it 'shows job title' do
+        user.update(organization: nil, job_title: 'Frontend Engineer - work info test')
+
+        subject
+
+        expect(page).to have_content('Frontend Engineer - work info test')
+      end
+
+      it 'shows organization details' do
+        user.update(organization: 'GitLab - work info test', job_title: '')
+
+        subject
+
+        expect(page).to have_content('GitLab - work info test')
+      end
+    end
   end
 
   context 'with private profile' do

spec/frontend/vue_shared/components/user_popover/user_popover_spec.js

-import { GlSkeletonLoading } from '@gitlab/ui';
+import { GlSkeletonLoading, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import UserPopover from '~/vue_shared/components/user_popover/user_popover.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -11,6 +11,7 @@ const DEFAULT_PROPS = {
     location: 'Vienna',
     bio: null,
     organization: null,
+    jobTitle: null,
     status: null,
   },
 };
@@ -39,6 +40,9 @@ describe('User Popover Component', () => {
         target: findTarget(),
         ...props,
       },
+      stubs: {
+        'gl-sprintf': GlSprintf,
+      },
       ...options,
     });
   };
@@ -56,6 +60,7 @@ describe('User Popover Component', () => {
               location: null,
               bio: null,
               organization: null,
+              jobTitle: null,
               status: null,
             },
           },
@@ -85,51 +90,125 @@ describe('User Popover Component', () => {
   });
 
   describe('job data', () => {
-    it('should show only bio if no organization is available', () => {
-      const user = { ...DEFAULT_PROPS.user, bio: 'Engineer' };
+    const findWorkInformation = () => wrapper.find({ ref: 'workInformation' });
+    const findBio = () => wrapper.find({ ref: 'bio' });
+
+    it('should show only bio if organization and job title are not available', () => {
+      const user = { ...DEFAULT_PROPS.user, bio: 'My super interesting bio' };
 
       createWrapper({ user });
 
-      expect(wrapper.text()).toContain('Engineer');
+      expect(findBio().text()).toBe('My super interesting bio');
+      expect(findWorkInformation().exists()).toBe(false);
     });
 
-    it('should show only organization if no bio is available', () => {
+    it('should show only organization if job title is not available', () => {
       const user = { ...DEFAULT_PROPS.user, organization: 'GitLab' };
 
       createWrapper({ user });
 
-      expect(wrapper.text()).toContain('GitLab');
+      expect(findWorkInformation().text()).toBe('GitLab');
+    });
+
+    it('should show only job title if organization is not available', () => {
+      const user = { ...DEFAULT_PROPS.user, jobTitle: 'Frontend Engineer' };
+
+      createWrapper({ user });
+
+      expect(findWorkInformation().text()).toBe('Frontend Engineer');
+    });
+
+    it('should show organization and job title if they are both available', () => {
+      const user = {
+        ...DEFAULT_PROPS.user,
+        organization: 'GitLab',
+        jobTitle: 'Frontend Engineer',
+      };
+
+      createWrapper({ user });
+
+      expect(findWorkInformation().text()).toBe('Frontend Engineer at GitLab');
+    });
+
+    it('should display bio and job info in separate lines', () => {
+      const user = {
+        ...DEFAULT_PROPS.user,
+        bio: 'My super interesting bio',
+        organization: 'GitLab',
+      };
+
+      createWrapper({ user });
+
+      expect(findBio().text()).toBe('My super interesting bio');
+      expect(findWorkInformation().text()).toBe('GitLab');
     });
 
-    it('should display bio and organization in separate lines', () => {
-      const user = { ...DEFAULT_PROPS.user, bio: 'Engineer', organization: 'GitLab' };
+    it('should not encode special characters in bio', () => {
+      const user = {
+        ...DEFAULT_PROPS.user,
+        bio: 'I like <html> & CSS',
+      };
 
       createWrapper({ user });
 
-      expect(wrapper.find('.js-bio').text()).toContain('Engineer');
-      expect(wrapper.find('.js-organization').text()).toContain('GitLab');
+      expect(findBio().text()).toBe('I like <html> & CSS');
     });
 
-    it('should not encode special characters in bio and organization', () => {
+    it('should not encode special characters in organization', () => {
       const user = {
         ...DEFAULT_PROPS.user,
-        bio: 'Manager & Team Lead',
         organization: 'Me & my <funky> Company',
       };
 
       createWrapper({ user });
 
-      expect(wrapper.find('.js-bio').text()).toContain('Manager & Team Lead');
-      expect(wrapper.find('.js-organization').text()).toContain('Me & my <funky> Company');
+      expect(findWorkInformation().text()).toBe('Me & my <funky> Company');
+    });
+
+    it('should not encode special characters in job title', () => {
+      const user = {
+        ...DEFAULT_PROPS.user,
+        jobTitle: 'Manager & Team Lead',
+      };
+
+      createWrapper({ user });
+
+      expect(findWorkInformation().text()).toBe('Manager & Team Lead');
+    });
+
+    it('should not encode special characters when both job title and organization are set', () => {
+      const user = {
+        ...DEFAULT_PROPS.user,
+        jobTitle: 'Manager & Team Lead',
+        organization: 'Me & my <funky> Company',
+      };
+
+      createWrapper({ user });
+
+      expect(findWorkInformation().text()).toBe('Manager & Team Lead at Me & my <funky> Company');
     });
 
     it('shows icon for bio', () => {
+      const user = {
+        ...DEFAULT_PROPS.user,
+        bio: 'My super interesting bio',
+      };
+
+      createWrapper({ user });
+
       expect(wrapper.findAll(Icon).filter(icon => icon.props('name') === 'profile').length).toEqual(
         1,
       );
     });
 
     it('shows icon for organization', () => {
+      const user = {
+        ...DEFAULT_PROPS.user,
+        organization: 'GitLab',
+      };
+
+      createWrapper({ user });
+
       expect(wrapper.findAll(Icon).filter(icon => icon.props('name') === 'work').length).toEqual(1);
     });
   });

spec/helpers/users_helper_spec.rb

@@ -178,4 +178,42 @@ describe UsersHelper do
       end
     end
   end
+
+  describe '#work_information' do
+    subject { helper.work_information(user) }
+
+    context 'when both job_title and organization are present' do
+      let(:user) { build(:user, organization: 'GitLab', job_title: 'Frontend Engineer') }
+
+      it 'returns job title concatenated with organization' do
+        is_expected.to eq('Frontend Engineer at GitLab')
+      end
+    end
+
+    context 'when only organization is present' do
+      let(:user) { build(:user, organization: 'GitLab') }
+
+      it "returns organization" do
+        is_expected.to eq('GitLab')
+      end
+    end
+
+    context 'when only job_title is present' do
+      let(:user) { build(:user, job_title: 'Frontend Engineer') }
+
+      it 'returns job title' do
+        is_expected.to eq('Frontend Engineer')
+      end
+    end
+
+    context 'when neither organization nor job_title are present' do
+      it { is_expected.to be_nil }
+    end
+
+    context 'when user parameter is nil' do
+      let(:user) { nil }
+
+      it { is_expected.to be_nil }
+    end
+  end
 end