Refactor Bootstrap utility classes on profile to GitLab UI

app/assets/stylesheets/framework/blocks.scss

@@ -154,12 +154,6 @@
     }
   }
 
-  .cover-desc {
-    &.username:last-child {
-      padding-bottom: $gl-padding;
-    }
-  }
-
   .cover-controls {
     @include media-breakpoint-up(sm) {
       position: absolute;

app/assets/stylesheets/pages/profile.scss

@@ -70,14 +70,6 @@
   }
 }
 
-.profile-link-holder {
-  display: inline;
-
-  a:not(.text-link) {
-    text-decoration: none;
-  }
-}
-
 // Middle dot divider between each element in a list of items.
 .middle-dot-divider {
   @include middle-dot-divider;

app/helpers/profiles_helper.rb

@@ -38,6 +38,21 @@ module ProfilesHelper
     status&.availability == availability_values[:busy]
   end
 
+  def middle_dot_divider_classes(stacking, breakpoint)
+    ['gl-mb-3'].tap do |classes|
+      if stacking
+        classes.concat(%w(middle-dot-divider-sm gl-display-block gl-sm-display-inline-block))
+      else
+        classes << 'gl-display-inline-block'
+        classes << if breakpoint.nil?
+                     'middle-dot-divider'
+                   else
+                     "middle-dot-divider-#{breakpoint}"
+                   end
+      end
+    end
+  end
+
   # Overridden in EE::ProfilesHelper#ssh_key_expiration_tooltip
   def ssh_key_expiration_tooltip(key)
     return key.errors.full_messages.join(', ') if key.errors.full_messages.any?

app/views/users/_middle_dot_divider.html.haml

+- stacking = local_assigns.delete(:stacking)
+- breakpoint = local_assigns.delete(:breakpoint)
+
+%div{ class: middle_dot_divider_classes(stacking, breakpoint), **local_assigns }
+  = yield

app/views/users/_profile_basic_info.html.haml

-%p.mb-1.mb-sm-2.mt-2.mt-sm-3
-  %span.middle-dot-divider
+.gl-text-gray-900.gl-mt-4
+  = render 'middle_dot_divider' do
     @#{@user.username}
   - if can?(current_user, :read_user_profile, @user)
-    %span.middle-dot-divider
+    = render 'middle_dot_divider' do
       = s_('Member since %{date}') % { date: @user.created_at.to_date.to_s(:long) }

app/views/users/show.html.haml

@@ -71,54 +71,54 @@
               = emoji_icon(@user.status.emoji, class: 'gl-mr-2')
               = markdown_field(@user.status, :message)
           = render "users/profile_basic_info"
-          .cover-desc.cgray.mb-1.mb-sm-2
+          .gl-text-gray-900.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{ itemprop: 'address', itemscope: true, itemtype: 'https://schema.org/PostalAddress' }
+              = render 'middle_dot_divider', stacking: true, itemprop: 'address', itemscope: true, itemtype: 'https://schema.org/PostalAddress' do
                 = sprite_icon('location', css_class: 'fgray')
                 %span{ itemprop: 'addressLocality' }
                   = @user.location
-            .profile-link-holder.middle-dot-divider-sm.d-block.d-sm-inline.mb-1.mb-sm-0
+            = render 'middle_dot_divider', stacking: true do
               = sprite_icon('clock', css_class: 'fgray')
               %span
                 = local_time(@user.timezone)
             - unless work_information(@user).blank?
-              .profile-link-holder.middle-dot-divider-sm.d-block.d-sm-inline
+              = render 'middle_dot_divider', stacking: true do
                 = sprite_icon('work', css_class: 'fgray')
                 %span
                   = work_information(@user, with_schema_markup: true)
-          .cover-desc.cgray.mb-1.mb-sm-2
+          .gl-text-gray-900
             - unless @user.skype.blank?
-              .profile-link-holder.middle-dot-divider
-                = link_to "skype:#{@user.skype}", title: "Skype" do
+              = render 'middle_dot_divider' do
+                = link_to "skype:#{@user.skype}", class: 'gl-hover-text-decoration-none', title: "Skype" do
                   = sprite_icon('skype')
             - unless @user.linkedin.blank?
-              .profile-link-holder.middle-dot-divider
-                = link_to linkedin_url(@user), title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow' do
+              = render 'middle_dot_divider' do
+                = link_to linkedin_url(@user), class: 'gl-hover-text-decoration-none', title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow' do
                   = sprite_icon('linkedin')
             - unless @user.twitter.blank?
-              .profile-link-holder.middle-dot-divider-sm
-                = link_to twitter_url(@user), title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow' do
+              = render 'middle_dot_divider', breakpoint: 'sm' do
+                = link_to twitter_url(@user), class: 'gl-hover-text-decoration-none', title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow' do
                   = sprite_icon('twitter')
             - unless @user.website_url.blank?
-              .profile-link-holder.middle-dot-divider-sm.d-block.d-sm-inline.mt-1.mt-sm-0
+              = render 'middle_dot_divider', stacking: true do
                 - if Feature.enabled?(:security_auto_fix) && @user.bot?
                   = sprite_icon('question', css_class: 'gl-text-blue-600')
-                = link_to @user.short_website_url, @user.full_website_url, class: 'text-link', target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
+                = link_to @user.short_website_url, @user.full_website_url, target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
             - 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', itemprop: 'email'
-          .cover-desc.gl-text-gray-900.gl-mb-2.mb-sm-2
+              = render 'middle_dot_divider', stacking: true do
+                = link_to @user.public_email, "mailto:#{@user.public_email}", itemprop: 'email'
+          .gl-text-gray-900
             = sprite_icon('users', css_class: 'gl-vertical-align-middle gl-text-gray-500')
-            .profile-link-holder.middle-dot-divider
-              = link_to user_followers_path, class: 'text-link' do
+            = render 'middle_dot_divider' do
+              = link_to user_followers_path do
                 - count = @user.followers.count
                 = n_('1 follower', '%{count} followers', count) % { count: count }
-            .profile-link-holder.middle-dot-divider
-              = link_to user_following_path, class: 'text-link', data: { qa_selector: 'following_link' } do
+            = render 'middle_dot_divider' do
+              = link_to user_following_path, data: { qa_selector: 'following_link' } do
                 = @user.followees.count
                 = _('following')
         - if @user.bio.present?
-          .cover-desc.cgray
+          .gl-text-gray-900
             .profile-user-bio
               = markdown(@user.bio_html)
 

spec/features/users/show_spec.rb

@@ -186,7 +186,17 @@ RSpec.describe 'User page' do
   end
 
   context 'with blocked profile' do
-    let_it_be(:user) { create(:user, state: :blocked) }
+    let_it_be(:user) do
+      create(
+        :user,
+        state: :blocked,
+        organization: 'GitLab - work info test',
+        job_title: 'Frontend Engineer',
+        pronunciation: 'pruh-nuhn-see-ay-shn'
+      )
+    end
+
+    let_it_be(:status) { create(:user_status, user: user, message: "Working hard!") }
 
     it 'shows no tab' do
       subject
@@ -211,7 +221,10 @@ RSpec.describe 'User page' do
       subject
 
       expect(page).not_to have_css(".profile-user-bio")
-      expect(page).not_to have_css(".profile-link-holder")
+      expect(page).not_to have_content('GitLab - work info test')
+      expect(page).not_to have_content('Frontend Engineer')
+      expect(page).not_to have_content('Working hard!')
+      expect(page).not_to have_content("Pronounced as: pruh-nuhn-see-ay-shn")
     end
 
     it 'shows username' do
@@ -222,7 +235,17 @@ RSpec.describe 'User page' do
   end
 
   context 'with unconfirmed user' do
-    let_it_be(:user) { create(:user, :unconfirmed) }
+    let_it_be(:user) do
+      create(
+        :user,
+        :unconfirmed,
+        organization: 'GitLab - work info test',
+        job_title: 'Frontend Engineer',
+        pronunciation: 'pruh-nuhn-see-ay-shn'
+      )
+    end
+
+    let_it_be(:status) { create(:user_status, user: user, message: "Working hard!") }
 
     shared_examples 'unconfirmed user profile' do
       before do
@@ -240,7 +263,10 @@ RSpec.describe 'User page' do
 
       it 'shows no additional fields' do
         expect(page).not_to have_css(".profile-user-bio")
-        expect(page).not_to have_css(".profile-link-holder")
+        expect(page).not_to have_content('GitLab - work info test')
+        expect(page).not_to have_content('Frontend Engineer')
+        expect(page).not_to have_content('Working hard!')
+        expect(page).not_to have_content("Pronounced as: pruh-nuhn-see-ay-shn")
       end
 
       it 'shows private profile message' do

spec/helpers/profiles_helper_spec.rb

@@ -152,6 +152,22 @@ RSpec.describe ProfilesHelper do
     end
   end
 
+  describe '#middle_dot_divider_classes' do
+    using RSpec::Parameterized::TableSyntax
+
+    where(:stacking, :breakpoint, :expected) do
+      nil  | nil | %w(gl-mb-3 gl-display-inline-block middle-dot-divider)
+      true | nil | %w(gl-mb-3 middle-dot-divider-sm gl-display-block gl-sm-display-inline-block)
+      nil  | :sm | %w(gl-mb-3 gl-display-inline-block middle-dot-divider-sm)
+    end
+
+    with_them do
+      it 'returns CSS classes needed to render the middle dot divider' do
+        expect(helper.middle_dot_divider_classes(stacking, breakpoint)).to eq expected
+      end
+    end
+  end
+
   def stub_cas_omniauth_provider
     provider = OpenStruct.new(
       'name' => 'cas3',