From bcdc257e2e427aa803accaa402bb4105809e238c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eduardo=20Sanz=20Garc=C3=ADa?= <esanz-garcia@gitlab.com>
Date: Mon, 22 Apr 2024 10:41:01 +0000
Subject: [PATCH] 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         | 41 ++++++++-----------
 .../admin/users/_auditor_user_badge.html.haml |  2 +-
 .../admin/users/_gma_user_badge.html.haml     |  3 +-
 locale/gitlab.pot                             | 30 +++-----------
 .../features/admin/admin_mode/workers_spec.rb |  2 +-
 .../admin/users/admin_sees_user_spec.rb       |  6 +--
 spec/features/admin/users/users_spec.rb       |  2 +-
 7 files changed, 30 insertions(+), 56 deletions(-)

diff --git a/app/views/admin/users/_head.html.haml b/app/views/admin/users/_head.html.haml
index f6b7db2032f2a..5064e3e3b7782 100644
--- a/app/views/admin/users/_head.html.haml
+++ b/app/views/admin/users/_head.html.haml
@@ -1,30 +1,23 @@
 .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
diff --git a/ee/app/views/admin/users/_auditor_user_badge.html.haml b/ee/app/views/admin/users/_auditor_user_badge.html.haml
index f04dd89047ca8..c0eaccb8bf8c4 100644
--- a/ee/app/views/admin/users/_auditor_user_badge.html.haml
+++ b/ee/app/views/admin/users/_auditor_user_badge.html.haml
@@ -1,2 +1,2 @@
 - if @user.auditor
-  %span.cred (Auditor)
+  = render Pajamas::BadgeComponent.new(s_('AdminUsers|Auditor'), variant: :neutral)
diff --git a/ee/app/views/admin/users/_gma_user_badge.html.haml b/ee/app/views/admin/users/_gma_user_badge.html.haml
index 56ee04bbb4156..e3b1d0ebd8d6f 100644
--- a/ee/app/views/admin/users/_gma_user_badge.html.haml
+++ b/ee/app/views/admin/users/_gma_user_badge.html.haml
@@ -1,3 +1,2 @@
 - if @user.group_managed_account?
-  %span.cred
-    = s_('(Group Managed Account)')
+  = render Pajamas::BadgeComponent.new(s_('AdminUsers|Group Managed Account'), variant: :neutral)
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index e032315abf905..d31a9d82b353d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -1498,9 +1498,6 @@ msgstr ""
 msgid "(+%{count}&nbsp;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 ""
 
diff --git a/spec/features/admin/admin_mode/workers_spec.rb b/spec/features/admin/admin_mode/workers_spec.rb
index f0cea425bb78e..bf25a5308c193 100644
--- a/spec/features/admin/admin_mode/workers_spec.rb
+++ b/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
diff --git a/spec/features/admin/users/admin_sees_user_spec.rb b/spec/features/admin/users/admin_sees_user_spec.rb
index d8c142d402fe9..e7240785b5449 100644
--- a/spec/features/admin/users/admin_sees_user_spec.rb
+++ b/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
 
diff --git a/spec/features/admin/users/users_spec.rb b/spec/features/admin/users/users_spec.rb
index d3fe476051743..da4b334fd0447 100644
--- a/spec/features/admin/users/users_spec.rb
+++ b/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
 
-- 
GitLab