Add badges to indicate the state of users

Replace colored string by badges to indicate the state of the user in
the **Admin area > Users > [particular user]**

Changelog: changed

EE: true

Co-authored-by: Dmitry Silin <true.litry@gmail.com>

app/views/admin/users/_head.html.haml

 .gl-display-flex.gl-flex-wrap.gl-justify-content-space-between.gl-align-items-center.gl-pt-3
-  .gl-my-3
+  .gl-my-3.gl-display-flex.gl-align-items-center.gl-gap-3
     %h1.page-title.gl-font-size-h-display.gl-m-0
       = @user.name
-      - if @user.blocked_pending_approval?
-        %span.gl-text-red-500
-          = s_('AdminUsers|(Pending approval)')
-      - elsif @user.banned?
-        %span.gl-text-red-500
-          = s_('AdminUsers|(Banned)')
-      - elsif @user.blocked?
-        %span.gl-text-red-500
-          = s_('AdminUsers|(Blocked)')
-      - if @user.internal?
-        %span.gl-text-red-500
-          = s_('AdminUsers|(Internal)')
-      - if @user.admin
-        %span.gl-text-red-500
-          = s_('AdminUsers|(Admin)')
-      - if @user.deactivated?
-        %span.gl-text-red-500
-          = s_('AdminUsers|(Deactivated)')
-      - if @user.access_locked?
-        %span.gl-text-red-500
-          = s_('AdminUsers|(Locked)')
-      = render_if_exists 'admin/users/auditor_user_badge'
-      = render_if_exists 'admin/users/gma_user_badge'
+    - if @user.blocked_pending_approval?
+      = render Pajamas::BadgeComponent.new(s_('AdminUsers|Pending approval'), variant: :warning)
+    - elsif @user.banned?
+      = render Pajamas::BadgeComponent.new(s_('AdminUsers|Banned'), variant: :danger)
+    - elsif @user.blocked?
+      = render Pajamas::BadgeComponent.new(s_('AdminUsers|Blocked'), variant: :danger)
+    - if @user.internal?
+      = render Pajamas::BadgeComponent.new(s_('AdminUsers|Internal'), variant: :neutral)
+    - if @user.admin
+      = render Pajamas::BadgeComponent.new(s_('AdminUsers|Admin'), variant: :success)
+    - if @user.deactivated?
+      = render Pajamas::BadgeComponent.new(s_('AdminUsers|Deactivated'), variant: :neutral)
+    - if @user.access_locked?
+      = render Pajamas::BadgeComponent.new(s_('AdminUsers|Locked'), variant: :warning)
+    = render_if_exists 'admin/users/auditor_user_badge'
+    = render_if_exists 'admin/users/gma_user_badge'
 
   .gl-my-3.gl-display-flex.gl-flex-wrap.gl-my-n2.gl-mx-n2
     - if @user != current_user

ee/app/views/admin/users/_auditor_user_badge.html.haml

 - if @user.auditor
-  %span.cred (Auditor)
+  = render Pajamas::BadgeComponent.new(s_('AdminUsers|Auditor'), variant: :neutral)

ee/app/views/admin/users/_gma_user_badge.html.haml

 - if @user.group_managed_account?
-  %span.cred
-    = s_('(Group Managed Account)')
+  = render Pajamas::BadgeComponent.new(s_('AdminUsers|Group Managed Account'), variant: :neutral)

locale/gitlab.pot

@@ -1498,9 +1498,6 @@ msgstr ""
 msgid "(+%{count} rules)"
 msgstr ""
-msgid "(Group Managed Account)"
-msgstr ""
-
 msgid "(Limited to %{quota} pipeline minutes per month)"
 msgstr ""
@@ -4039,27 +4036,6 @@ msgstr ""
 msgid "AdminStatistics|Snippets"
 msgstr ""
-msgid "AdminUsers|(Admin)"
-msgstr ""
-
-msgid "AdminUsers|(Banned)"
-msgstr ""
-
-msgid "AdminUsers|(Blocked)"
-msgstr ""
-
-msgid "AdminUsers|(Deactivated)"
-msgstr ""
-
-msgid "AdminUsers|(Internal)"
-msgstr ""
-
-msgid "AdminUsers|(Locked)"
-msgstr ""
-
-msgid "AdminUsers|(Pending approval)"
-msgstr ""
-
 msgid "AdminUsers|2FA Disabled"
 msgstr ""
@@ -4216,6 +4192,9 @@ msgstr ""
 msgid "AdminUsers|For more information, please refer to the %{link_start}user account deletion documentation.%{link_end}"
 msgstr ""
+msgid "AdminUsers|Group Managed Account"
+msgstr ""
+
 msgid "AdminUsers|Here are some helpful links to help you manage your instance:"
 msgstr ""
@@ -4225,6 +4204,9 @@ msgstr ""
 msgid "AdminUsers|Important information about usage on your GitLab instance"
 msgstr ""
+msgid "AdminUsers|Internal"
+msgstr ""
+
 msgid "AdminUsers|Is using seat"
 msgstr ""

spec/features/admin/admin_mode/workers_spec.rb

@@ -56,7 +56,7 @@
 
         visit admin_user_path(user_to_delete)
 
-        expect(find('h1.page-title')).to have_content('(Blocked)')
+        expect(page).to have_content("#{user_to_delete.name} Blocked")
       end
     end
   end

spec/features/admin/users/admin_sees_user_spec.rb

@@ -131,8 +131,8 @@
         visit admin_user_path(locked_user)
       end
 
-      it "displays `(Locked)` next to user's name" do
-        expect(page).to have_content("#{locked_user.name} (Locked)")
+      it "displays `Locked` next to user's name" do
+        expect(page).to have_content("#{locked_user.name} Locked")
       end
 
       it 'allows a user to be unlocked from the `User administration dropdown', :js do
@@ -140,7 +140,7 @@
           click_action_in_user_dropdown(locked_user.id, 'Unlock')
         end
 
-        expect(page).not_to have_content("#{locked_user.name} (Locked)")
+        expect(page).not_to have_content("#{locked_user.name} Locked")
       end
     end
 

spec/features/admin/users/users_spec.rb

@@ -308,7 +308,7 @@
           click_action_in_user_dropdown(locked_user.id, 'Unlock')
         end
 
-        expect(page).not_to have_content("#{locked_user.name} (Locked)")
+        expect(page).not_to have_content("#{locked_user.name} Locked")
       end
     end