Improve runner status icon usability and a11y

This change improves the colors and icons used for the runner status to
make icons more explicit and use a tooltip.

app/assets/stylesheets/pages/runners.scss

@@ -11,17 +11,3 @@
     background: $blue-400;
   }
 }
-
-.runner-status {
-  &.runner-status-online {
-    background-color: $green-600;
-  }
-
-  &.runner-status-offline {
-    background-color: $gray-darkest;
-  }
-
-  &.runner-status-paused {
-    background-color: $red-500;
-  }
-}

app/helpers/ci/runners_helper.rb

@@ -4,18 +4,33 @@ module Ci
   module RunnersHelper
     include IconsHelper
 
-    def runner_status_icon(runner)
+    def runner_status_icon(runner, size: 16, icon_class: '')
       status = runner.status
+
+      title = ''
+      icon = 'warning-solid'
+      span_class = ''
+
       case status
       when :not_connected
-        content_tag(:span, title: _("New runner. Has not connected yet")) do
-          sprite_icon("warning-solid", size: 24, css_class: "gl-vertical-align-bottom!")
-        end
+        title = s_("Runners|New runner, has not connected yet")
+        icon = 'warning-solid'
+      when :online
+        title = s_("Runners|Runner is online, last contact was %{runner_contact} ago") % { runner_contact: time_ago_in_words(runner.contacted_at) }
+        icon = 'status-active'
+        span_class = 'gl-text-green-500'
+      when :offline
+        title = s_("Runners|Runner is offline, last contact was %{runner_contact} ago") % { runner_contact: time_ago_in_words(runner.contacted_at) }
+        icon = 'status-failed'
+        span_class = 'gl-text-red-500'
+      when :paused
+        title = s_("Runners|Runner is paused, last contact was %{runner_contact} ago") % { runner_contact: time_ago_in_words(runner.contacted_at) }
+        icon = 'status-paused'
+        span_class = 'gl-text-gray-600'
+      end
 
-      when :online, :offline, :paused
-        content_tag :span, nil,
-                    class: "gl-display-inline-block gl-avatar gl-avatar-s16 gl-avatar-circle runner-status runner-status-#{status}",
-                    title: _("Runner is %{status}, last contact was %{runner_contact} ago") % { status: status, runner_contact: time_ago_in_words(runner.contacted_at) }
+      content_tag(:span, class: span_class, title: title, data: { toggle: 'tooltip', container: 'body', testid: 'runner_status_icon', qa_selector: "runner_status_#{status}_content" }) do
+        sprite_icon(icon, size: size, css_class: icon_class)
       end
     end
 

app/views/projects/runners/_runner.html.haml

 %li.runner{ id: dom_id(runner) }
   %h4.gl-font-weight-normal
-    = runner_status_icon(runner)
+    = runner_status_icon(runner, size: 16, icon_class: "gl-vertical-align-middle!")
 
     - if @project_runners.include?(runner)
       = link_to _("%{token}...") % { token: runner.short_sha }, project_runner_path(@project, runner), class: 'commit-sha has-tooltip', title: _("Partial token for reference only")

changelogs/unreleased/294246-replace-runner-status-icons-with-svgs.yml

+---
+title: Improve runners status icon usability and accessibility in the project settings
+  view
+merge_request: 58781
+author:
+type: changed

locale/gitlab.pot

@@ -21098,9 +21098,6 @@ msgstr ""
 msgid "New response for issue #%{issue_iid}:"
 msgstr ""
 
-msgid "New runner. Has not connected yet"
-msgstr ""
-
 msgid "New runners registration token has been generated!"
 msgstr ""
 
@@ -26993,9 +26990,6 @@ msgstr ""
 msgid "Runner API"
 msgstr ""
 
-msgid "Runner is %{status}, last contact was %{runner_contact} ago"
-msgstr ""
-
 msgid "Runner token"
 msgstr ""
 
@@ -27074,6 +27068,9 @@ msgstr ""
 msgid "Runners|Name"
 msgstr ""
 
+msgid "Runners|New runner, has not connected yet"
+msgstr ""
+
 msgid "Runners|Platform"
 msgstr ""
 
@@ -27089,6 +27086,15 @@ msgstr ""
 msgid "Runners|Runner #%{runner_id}"
 msgstr ""
 
+msgid "Runners|Runner is offline, last contact was %{runner_contact} ago"
+msgstr ""
+
+msgid "Runners|Runner is online, last contact was %{runner_contact} ago"
+msgstr ""
+
+msgid "Runners|Runner is paused, last contact was %{runner_contact} ago"
+msgstr ""
+
 msgid "Runners|Shared"
 msgstr ""
 

qa/qa/page/project/settings/runners.rb

@@ -10,12 +10,9 @@ module QA
             element :coordinator_address, '%code#coordinator_address' # rubocop:disable QA/ElementWithPattern
           end
 
-          ##
-          # TODO, phase-out CSS classes added in Ruby helpers.
-          #
           view 'app/helpers/ci/runners_helper.rb' do
             # rubocop:disable Lint/InterpolationCheck
-            element :runner_status, 'runner-status-#{status}' # rubocop:disable QA/ElementWithPattern
+            element :runner_status_icon, 'qa_selector: "runner_status_#{status}_content"' # rubocop:disable QA/ElementWithPattern
             # rubocop:enable Lint/InterpolationCheck
           end
 
@@ -28,7 +25,7 @@ module QA
           end
 
           def has_online_runner?
-            page.has_css?('.runner-status-online')
+            has_element?(:runner_status_online_content)
           end
         end
       end

spec/helpers/ci/runners_helper_spec.rb

@@ -3,19 +3,26 @@
 require 'spec_helper'
 
 RSpec.describe Ci::RunnersHelper do
-  it "returns - not contacted yet" do
-    runner = FactoryBot.build :ci_runner
-    expect(runner_status_icon(runner)).to include("not connected yet")
-  end
+  describe '#runner_status_icon', :clean_gitlab_redis_cache do
+    it "returns - not contacted yet" do
+      runner = create(:ci_runner)
+      expect(runner_status_icon(runner)).to include("not connected yet")
+    end
 
-  it "returns offline text" do
-    runner = FactoryBot.build(:ci_runner, contacted_at: 1.day.ago, active: true)
-    expect(runner_status_icon(runner)).to include("Runner is offline")
-  end
+    it "returns offline text" do
+      runner = create(:ci_runner, contacted_at: 1.day.ago, active: true)
+      expect(runner_status_icon(runner)).to include("Runner is offline")
+    end
 
-  it "returns online text" do
-    runner = FactoryBot.build(:ci_runner, contacted_at: 1.second.ago, active: true)
-    expect(runner_status_icon(runner)).to include("Runner is online")
+    it "returns online text" do
+      runner = create(:ci_runner, contacted_at: 1.second.ago, active: true)
+      expect(runner_status_icon(runner)).to include("Runner is online")
+    end
+
+    it "returns paused text" do
+      runner = create(:ci_runner, contacted_at: 1.second.ago, active: false)
+      expect(runner_status_icon(runner)).to include("Runner is paused")
+    end
   end
 
   describe '#runner_contacted_at' do