Merge branch 'rails-badge-component' into 'master'

Add and use gl_badge_tag helper in runner settings

See merge request gitlab-org/gitlab!73858

app/helpers/badges_helper.rb

+# frozen_string_literal: true
+
+module BadgesHelper
+  VARIANT_CLASSES = {
+    muted: "badge-muted",
+    neutral: "badge-neutral",
+    info: "badge-info",
+    success: "badge-success",
+    warning: "badge-warning",
+    danger: "badge-danger"
+  }.tap { |hash| hash.default = hash.fetch(:muted) } .freeze
+
+  SIZE_CLASSES = {
+    sm: "sm",
+    md: "md",
+    lg: "lg"
+  }.tap { |hash| hash.default = hash.fetch(:md) } .freeze
+
+  GL_BADGE_CLASSES = %w[gl-badge badge badge-pill].freeze
+
+  GL_ICON_CLASSES = %w[gl-icon gl-badge-icon].freeze
+
+  # Creates a GitLab UI badge.
+  #
+  # Examples:
+  #   # Plain text badge
+  #   gl_badge_tag("foo")
+  #
+  #   # Danger variant
+  #   gl_badge_tag("foo", variant: :danger)
+  #
+  #   # Small size
+  #   gl_badge_tag("foo", size: :sm)
+  #
+  #   # With icon
+  #   gl_badge_tag("foo", icon: "question-o")
+  #
+  #   # Icon-only
+  #   gl_badge_tag("foo", icon: "question-o", icon_only: true)
+  #
+  #   # Badge link
+  #   gl_badge_tag("foo", nil, href: some_path)
+  #
+  #   # Custom classes
+  #   gl_badge_tag("foo", nil, class: "foo-bar")
+  #
+  #   # Block content
+  #   gl_badge_tag({ variant: :danger }, { class: "foo-bar" }) do
+  #     "foo"
+  #   end
+  #
+  # For accessibility, ensure that the given text or block is non-empty.
+  #
+  # See also https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-badge--default.
+  def gl_badge_tag(*args, &block)
+    if block_given?
+      build_gl_badge_tag(capture(&block), *args)
+    else
+      build_gl_badge_tag(*args)
+    end
+  end
+
+  private
+
+  def build_gl_badge_tag(content, options = nil, html_options = nil)
+    options ||= {}
+    html_options ||= {}
+
+    icon_only = options[:icon_only]
+    variant_class = VARIANT_CLASSES[options.fetch(:variant, :muted)]
+    size_class = SIZE_CLASSES[options.fetch(:size, :md)]
+
+    html_options = html_options.merge(
+      class: [
+        *GL_BADGE_CLASSES,
+        variant_class,
+        size_class,
+        *html_options[:class]
+      ]
+    )
+
+    if icon_only
+      html_options['aria-label'] = content
+      html_options['role'] = 'img'
+    end
+
+    if options[:icon]
+      icon_classes = GL_ICON_CLASSES.dup
+      icon_classes << "gl-mr-2" unless icon_only
+      icon = sprite_icon(options[:icon], css_class: icon_classes.join(' '))
+
+      content = icon_only ? icon : icon + content
+    end
+
+    tag = html_options[:href].nil? ? :span : :a
+
+    content_tag(tag, content, html_options)
+  end
+end

app/views/shared/runners/_runner_description.html.haml

@@ -5,8 +5,8 @@
   %div
     %ul
       %li
-        %span.badge.badge-pill.gl-badge.sm.badge-success active
+        = gl_badge_tag s_("Runners|active"), variant: :success, size: :sm
         = _('- Available to run jobs.')
       %li
-        %span.badge.badge-pill.gl-badge.sm.badge-danger paused
+        = gl_badge_tag s_("Runners|paused"), variant: :danger, size: :sm
         = _('- Not available to run jobs.')

locale/gitlab.pot

@@ -30101,6 +30101,9 @@ msgstr ""
 msgid "Runners|You have used %{quotaUsed} out of %{quotaLimit} of your shared Runners pipeline minutes."
 msgstr ""
 
+msgid "Runners|active"
+msgstr ""
+
 msgid "Runners|group"
 msgstr ""
 

spec/helpers/badges_helper_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe BadgesHelper do
+  let(:label) { "Test" }
+
+  describe '#gl_badge_tag' do
+    it 'creates a badge with given text' do
+      expect(helper.gl_badge_tag(label)).to match(%r{<span .*>Test</span>})
+    end
+
+    describe 'block content' do
+      it 'renders block content' do
+        expect(helper.gl_badge_tag { label }).to match(%r{<span .*>Test</span>})
+      end
+
+      it 'changes the function signature' do
+        options = { variant: :danger }
+        html_options = { class: 'foo-bar' }
+
+        tag = helper.gl_badge_tag(label, options, html_options)
+        tag_with_block = helper.gl_badge_tag options, html_options do
+          label
+        end
+
+        expect(tag).to eql(tag_with_block)
+      end
+    end
+
+    it 'adds style classes' do
+      expect(helper.gl_badge_tag(label)).to match(%r{class="gl-badge badge badge-pill badge-muted md"})
+    end
+
+    it 'adds custom classes' do
+      expect(helper.gl_badge_tag(label, nil, class: "test-class" )).to match(%r{class=".*test-class.*"})
+    end
+
+    describe 'variants' do
+      where(:variant) do
+        [
+          [:muted],
+          [:neutral],
+          [:info],
+          [:success],
+          [:warning],
+          [:danger]
+        ]
+      end
+
+      with_them do
+        it 'sets the variant class' do
+          expected_class = "badge-#{variant}"
+          expect(helper.gl_badge_tag(label, variant: variant)).to match(%r{class=".*#{expected_class}.*"})
+        end
+      end
+
+      it 'defaults to muted' do
+        expect(helper.gl_badge_tag(label)).to match(%r{class=".*badge-muted.*"})
+      end
+
+      it 'falls back to default given an unknown variant' do
+        expect(helper.gl_badge_tag(label, variant: :foo)).to match(%r{class=".*badge-muted.*"})
+      end
+    end
+
+    describe 'sizes' do
+      where(:size) do
+        [[:sm], [:md], [:lg]]
+      end
+
+      with_them do
+        it 'sets the size class' do
+          expect(helper.gl_badge_tag(label, size: size)).to match(%r{class=".*#{size}.*"})
+        end
+      end
+
+      it 'defaults to md' do
+        expect(helper.gl_badge_tag(label)).to match(%r{class=".*md.*"})
+      end
+
+      it 'falls back to default given an unknown size' do
+        expect(helper.gl_badge_tag(label, size: :foo)).to match(%r{class=".*md.*"})
+      end
+    end
+
+    it 'applies custom html attributes' do
+      expect(helper.gl_badge_tag(label, nil, data: { foo: "bar" })).to match(%r{<span .*data-foo="bar".*>})
+    end
+
+    describe 'icons' do
+      let(:spacing_class_regex) { %r{<svg .*class=".*gl-mr-2.*".*>.*</svg>} }
+
+      describe 'with text' do
+        subject { helper.gl_badge_tag(label, icon: "question-o") }
+
+        it 'renders an icon' do
+          expect(subject).to match(%r{<svg .*#question-o".*>.*</svg>})
+        end
+
+        it 'adds a spacing class to the icon' do
+          expect(subject).to match(spacing_class_regex)
+        end
+      end
+
+      describe 'icon only' do
+        subject { helper.gl_badge_tag(label, icon: 'question-o', icon_only: true) }
+
+        it 'adds an img role to element' do
+          expect(subject).to match(%r{<span .*role="img".*>})
+        end
+
+        it 'adds aria-label to element' do
+          expect(subject).to match(%r{<span .*aria-label="#{label}".*>})
+        end
+
+        it 'does not add a spacing class to the icon' do
+          expect(subject).not_to match(spacing_class_regex)
+        end
+      end
+    end
+
+    describe 'given an href' do
+      it 'creates a badge link' do
+        expect(helper.gl_badge_tag(label, nil, href: 'foo')).to match(%r{<a .*href="foo".*>})
+      end
+    end
+  end
+end