From 98bd554cdc230eab6570d96e7b5364f30d554976 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Tue, 19 Dec 2023 16:26:51 +0100
Subject: [PATCH] Simplified badges FF

This MR introduces the FF :simplified_badges

For testing purposes we moved the changes from GitLab UI
https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3307
directly to GitLab as this is a change which spans over the
hole product and can make a lot of impacts.

Once verified we'll move things to GitLab UI and remove those
overrides again from the product.
---
 .../components/cells/runner_status_cell.vue   |  9 ++--
 .../components/runner_job_status_badge.vue    |  6 +--
 .../components/users_table/user_avatar.vue    |  9 +++-
 app/assets/stylesheets/framework/badges.scss  | 53 +++++++++++++++++++
 app/controllers/admin/users_controller.rb     |  4 ++
 app/views/layouts/application.html.haml       |  3 +-
 .../development/simplified_badges.yml         |  8 +++
 .../components/runner_dashboard_link.vue      |  2 +-
 .../runner_job_status_badge_spec.js           |  3 +-
 9 files changed, 83 insertions(+), 14 deletions(-)
 create mode 100644 config/feature_flags/development/simplified_badges.yml

diff --git a/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue b/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue
index e287e4e17d15be..63957d9b7fc4e5 100644
--- a/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue
+++ b/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue
@@ -33,16 +33,13 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="gl-display-flex gl-flex-wrap gl-gap-2">
     <runner-status-badge
       :contacted-at="contactedAt"
       :status="status"
-      class="gl-display-inline-block gl-max-w-full gl-text-truncate"
-    />
-    <runner-paused-badge
-      v-if="paused"
-      class="gl-display-inline-block gl-max-w-full gl-text-truncate"
+      class="gl-max-w-full gl-text-truncate"
     />
+    <runner-paused-badge v-if="paused" class="gl-max-w-full gl-text-truncate" />
     <slot :runner="runner" name="runner-job-status-badge"></slot>
   </div>
 </template>
diff --git a/app/assets/javascripts/ci/runner/components/runner_job_status_badge.vue b/app/assets/javascripts/ci/runner/components/runner_job_status_badge.vue
index bed592e3f304cf..0dc23882cdc83a 100644
--- a/app/assets/javascripts/ci/runner/components/runner_job_status_badge.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_job_status_badge.vue
@@ -26,12 +26,12 @@ export default {
       switch (this.jobStatus) {
         case JOB_STATUS_RUNNING:
           return {
-            classes: 'gl-text-blue-600! gl-border gl-border-blue-600!',
+            classes: 'gl-text-blue-600! gl-inset-border-1-gray-400 gl-border-blue-600!',
             label: I18N_JOB_STATUS_RUNNING,
           };
         case JOB_STATUS_IDLE:
           return {
-            classes: 'gl-text-gray-700! gl-border gl-border-gray-500!',
+            classes: 'gl-text-gray-700! gl-inset-border-1-gray-400 gl-border-gray-500!',
             label: I18N_JOB_STATUS_IDLE,
           };
         default:
@@ -45,7 +45,7 @@ export default {
   <gl-badge
     v-if="badge"
     v-bind="$attrs"
-    class="gl-display-inline-block gl-max-w-full gl-text-truncate gl-bg-transparent!"
+    class="gl-max-w-full gl-text-truncate gl-bg-transparent!"
     variant="muted"
     :class="badge.classes"
   >
diff --git a/app/assets/javascripts/vue_shared/components/users_table/user_avatar.vue b/app/assets/javascripts/vue_shared/components/users_table/user_avatar.vue
index 5d86f90880dd73..5f197066cb544c 100644
--- a/app/assets/javascripts/vue_shared/components/users_table/user_avatar.vue
+++ b/app/assets/javascripts/vue_shared/components/users_table/user_avatar.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlAvatarLabeled, GlBadge, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { truncate } from '~/lib/utils/text_utility';
 import { USER_AVATAR_SIZE, LENGTH_OF_USER_NOTE_TOOLTIP } from './constants';
 
@@ -12,6 +13,7 @@ export default {
     GlBadge,
     GlIcon,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     user: {
       type: Object,
@@ -65,7 +67,12 @@ export default {
         <div v-if="user.note" class="gl-text-gray-500 gl-p-1">
           <gl-icon v-gl-tooltip="userNoteShort" name="document" />
         </div>
-        <div v-for="(badge, idx) in user.badges" :key="idx" class="gl-p-1">
+        <div
+          v-for="(badge, idx) in user.badges"
+          :key="idx"
+          class="gl-p-1"
+          :class="{ 'gl-pb-0': glFeatures.simplifiedBadges }"
+        >
           <gl-badge class="gl-display-flex!" size="sm" :variant="badge.variant">{{
             badge.text
           }}</gl-badge>
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
index 3f1d742ca14c0d..7c3684f7c2e91e 100644
--- a/app/assets/stylesheets/framework/badges.scss
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -12,3 +12,56 @@
     color: $green;
   }
 }
+
+// FF :simplified_badges
+//
+// Temporarily override badge styles
+// globally
+//
+// Once verified we will update the
+// badge component in GitLab UI
+// refactor GitLab and remove this
+// custom code
+//
+// see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3307
+.ff-simplified-badges-enabled {
+  // These changes will be moved to
+  // GitLab UI's badge component
+  .gl-badge,
+  .gl-badge.sm,
+  .gl-badge.md,
+  .gl-badge.lg {
+    @include gl-font-sm;
+    padding-block: $gl-spacing-scale-1;
+    padding-inline: calc(#{$gl-spacing-scale-3} - 2px);
+
+    > .gl-icon {
+      @include gl-ml-0;
+    }
+  }
+
+  // These changes will be moved to
+  // GitLab UI's button component
+  .gl-button .gl-badge {
+    @include gl-py-0;
+  }
+
+  // These changes will be moved to
+  // app/assets/stylesheets/framework/super_sidebar.scss
+  .super-sidebar-nav-item .gl-badge {
+    vertical-align: 2px;
+  }
+
+  // These changes will be moved to
+  // GitLab UI's tab component
+  .gl-tab-nav-item .gl-badge {
+    margin-block: -2px;
+  }
+
+  // Temporarily needed because of the
+  // speciality this FF adds
+  // the utility class gets overriden
+  .gl-badge.ci-icon {
+    @include gl-p-2;
+  }
+}
diff --git a/app/controllers/admin/users_controller.rb b/app/controllers/admin/users_controller.rb
index ee78d5a8c35f46..3a0618c0d400b5 100644
--- a/app/controllers/admin/users_controller.rb
+++ b/app/controllers/admin/users_controller.rb
@@ -9,6 +9,10 @@ class Admin::UsersController < Admin::ApplicationController
   before_action :ensure_destroy_prerequisites_met, only: [:destroy]
   before_action :set_shared_view_parameters, only: [:show, :projects, :keys]
 
+  before_action only: [:index] do
+    push_frontend_feature_flag(:simplified_badges)
+  end
+
   feature_category :user_management
 
   PAGINATION_WITH_COUNT_LIMIT = 1000
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 71c5e2d24a7aa1..b9257bcedc99eb 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -2,11 +2,12 @@
 - page_classes = [user_application_theme, page_classes.flatten.compact]
 - body_classes = [user_tab_width, @body_class, client_class_list, *custom_diff_color_classes]
 - ff_simplified_labels_enabled = Feature.enabled?(:simplified_labels) ? 'ff-simplified-labels-enabled' : ''
+- ff_simplified_badges_class = Feature.enabled?(:simplified_badges) ? 'ff-simplified-badges-enabled' : ''
 
 !!! 5
 %html{ lang: I18n.locale, class: page_classes }
   = render "layouts/head"
-  %body{ class: [body_classes, ff_simplified_labels_enabled], data: body_data }
+  %body{ class: [body_classes, ff_simplified_labels_enabled, ff_simplified_badges_class], data: body_data }
     = render "layouts/init_auto_complete" if @gfm_form
     = render "layouts/init_client_detection_flags"
     = render "layouts/visual_review" if review_apps_enabled?
diff --git a/config/feature_flags/development/simplified_badges.yml b/config/feature_flags/development/simplified_badges.yml
new file mode 100644
index 00000000000000..95f9b00d30693e
--- /dev/null
+++ b/config/feature_flags/development/simplified_badges.yml
@@ -0,0 +1,8 @@
+---
+name: simplified_badges
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/140231
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/437861
+milestone: '16.8'
+type: development
+group: group::ux paper cuts
+default_enabled: false
diff --git a/ee/app/assets/javascripts/ci/runner/components/runner_dashboard_link.vue b/ee/app/assets/javascripts/ci/runner/components/runner_dashboard_link.vue
index c639f5a8f189fb..a877752b5cc39d 100644
--- a/ee/app/assets/javascripts/ci/runner/components/runner_dashboard_link.vue
+++ b/ee/app/assets/javascripts/ci/runner/components/runner_dashboard_link.vue
@@ -16,6 +16,6 @@ export default {
 <template>
   <gl-button v-if="runnerDashboardPath" variant="link" :href="runnerDashboardPath">
     {{ s__('Runners|Fleet dashboard')
-    }}<gl-badge variant="info" size="sm" class="gl-ml-1">{{ s__('Runners|New') }}</gl-badge>
+    }}<gl-badge variant="info" size="sm" class="gl-ml-2">{{ s__('Runners|New') }}</gl-badge>
   </gl-button>
 </template>
diff --git a/spec/frontend/ci/runner/components/runner_job_status_badge_spec.js b/spec/frontend/ci/runner/components/runner_job_status_badge_spec.js
index c4476d01386dd5..adb07d4086dfb4 100644
--- a/spec/frontend/ci/runner/components/runner_job_status_badge_spec.js
+++ b/spec/frontend/ci/runner/components/runner_job_status_badge_spec.js
@@ -35,8 +35,7 @@ describe('RunnerTypeBadge', () => {
       expect(findBadge().classes().sort()).toEqual(
         [
           ...classes,
-          'gl-border',
-          'gl-display-inline-block',
+          'gl-inset-border-1-gray-400',
           'gl-max-w-full',
           'gl-text-truncate',
           'gl-bg-transparent!',
-- 
GitLab