Update badges and banners for runner pages

In view pages:

- Update badge appearance with the type of runner (group, specific)

In edit pages:

- Add a new badge with the type of runner (instance, group, specific)
- Update appearance of the alert and it's copy, that explain the type
in more detail

app/views/admin/runners/show.html.haml

@@ -8,22 +8,10 @@
   #js-runner-detail{ data: {runner_id: @runner.id} }
 - else
   %h2.page-title
-    = sprintf(s_('Runners|Runner #%{runner_id}'), {runner_id: @runner.id})
+    = s_('Runners|Runner #%{runner_id}' % { runner_id: @runner.id })
+    = render 'shared/runners/runner_type_badge', runner: @runner
 
-- if @runner.instance_type?
-  .bs-callout.bs-callout-success
-    %h4= _('This runner processes jobs for all unassigned projects.')
-    %p
-      = _('If you want a runner to build only specific projects, restrict the project in the table below. After you restrict a runner to a project, you cannot change it back to a shared runner.')
-- elsif @runner.group_type?
-  .bs-callout.bs-callout-success
-    %h4= _('This runner processes jobs for all projects in its group and subgroups.')
-- else
-  .bs-callout.bs-callout-info
-    %h4= _('This runner processes jobs for assigned projects only.')
-    %p
-      = _('You cannot make this a shared runner.')
-%hr
+= render 'shared/runners/runner_type_alert', runner: @runner
 
 .gl-mb-6
   = render 'shared/runners/form', runner: @runner, runner_form_url: admin_runner_path(@runner), in_gitlab_com_admin_context: Gitlab.com?

app/views/groups/runners/edit.html.haml

 - page_title _('Edit'), "#{@runner.description} ##{@runner.id}", _('Runners')
 
-%h4 Runner ##{@runner.id}
+%h2.page-title
+  = s_('Runners|Runner #%{runner_id}' % { runner_id: @runner.id })
+  = render 'shared/runners/runner_type_badge', runner: @runner
 
-%hr
-  = render 'shared/runners/form', runner: @runner, runner_form_url: group_runner_path(@group, @runner)
+= render 'shared/runners/runner_type_alert', runner: @runner
+
+= render 'shared/runners/form', runner: @runner, runner_form_url: group_runner_path(@group, @runner)

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

-- page_title _('Edit'), "#{@runner.description} ##{@runner.id}", _('runners')
+- page_title _('Edit'), "#{@runner.description} ##{@runner.id}", _('Runners')
 
-%h4 Runner ##{@runner.id}
+%h2.page-title
+  = s_('Runners|Runner #%{runner_id}' % { runner_id: @runner.id })
+  = render 'shared/runners/runner_type_badge', runner: @runner
 
-%hr
-  = render 'shared/runners/form', runner: @runner, runner_form_url: project_runner_path(@project, @runner)
+= render 'shared/runners/runner_type_alert', runner: @runner
+
+= render 'shared/runners/form', runner: @runner, runner_form_url: project_runner_path(@project, @runner)

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

+.gl-alert.gl-alert-info.gl-my-5
+  = sprite_icon('information-o', css_class: 'gl-alert-icon')
+  - if runner.instance_type?
+    %h4.gl-alert-title
+      = s_('Runners|This runner is available to all groups and projects in your GitLab instance.')
+    .gl-alert-body
+      = s_('Runners|Shared runners are available to every project in a GitLab instance. If you want a runner to build only specific projects, restrict the project in the table below. After you restrict a runner to a project, you cannot change it back to a shared runner.')
+      = link_to _('Learn more.'), help_page_path('ci/runners/README', anchor: 'shared-runners'), target: '_blank', rel: 'noopener noreferrer'
+  - elsif runner.group_type?
+    %h4.gl-alert-title
+      = s_('Runners|This runner is available to all projects and subgroups in a group.')
+    .gl-alert-body
+      = s_('Runners|Use Group runners when you want all projects in a group to have access to a set of runners.')
+      = link_to _('Learn more.'), help_page_path('ci/runners/README', anchor: 'group-runners'), target: '_blank', rel: 'noopener noreferrer'
+  - else
+    %h4.gl-alert-title
+      = s_('Runners|This runner is associated with specific projects.')
+    .gl-alert-body
+      = s_('Runners|You can set up a specific runner to be used by multiple projects but you cannot make this a shared runner.')
+      = link_to _('Learn more.'), help_page_path('ci/runners/README', anchor: 'specific-runners'), target: '_blank', rel: 'noopener noreferrer'

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

+
+- if runner.instance_type?
+  %span.badge.badge-pill.gl-badge.badge-success
+    = s_('Runners|shared')
+- elsif runner.group_type?
+  %span.badge.badge-pill.gl-badge.badge-success
+    = s_('Runners|group')
+- else
+  %span.badge.badge-pill.gl-badge.badge-info
+    = s_('Runners|specific')

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

 - page_title "#{@runner.description} ##{@runner.id}", _("Runners")
 
-%h3.page-title
-  = s_('Runners|Runner #%{id}' % { id: @runner.id })
-  .float-right
-    - if @runner.instance_type?
-      %span.runner-state.runner-state-shared
-        = s_('Runners|Shared')
-    - elsif @runner.group_type?
-      %span.runner-state.runner-state-shared
-        = s_('Runners|Group')
-    - else
-      %span.runner-state.runner-state-specific
-        = s_('Runners|Specific')
+%h2.page-title
+  = s_('Runners|Runner #%{runner_id}' % { runner_id: @runner.id })
+  = render 'shared/runners/runner_type_badge', runner: @runner
 
 .table-holder
   %table.table

changelogs/unreleased/327199-consistently-indicate-runner-type-using-the-alert-component.yml

+---
+title: Update runner type indicators in view/edit pages
+merge_request: 59005
+author:
+type: changed

locale/gitlab.pot

@@ -16118,9 +16118,6 @@ msgstr ""
 msgid "If you remove this license, GitLab will fall back on the previous license, if any."
 msgstr ""
 
-msgid "If you want a runner to build only specific projects, restrict the project in the table below. After you restrict a runner to a project, you cannot change it back to a shared runner."
-msgstr ""
-
 msgid "If you want to re-enable two-factor authentication, visit %{two_factor_link}"
 msgstr ""
 
@@ -27199,9 +27196,6 @@ msgstr ""
 msgid "Runners|Download latest binary"
 msgstr ""
 
-msgid "Runners|Group"
-msgstr ""
-
 msgid "Runners|IP Address"
 msgstr ""
 
@@ -27247,16 +27241,22 @@ msgstr ""
 msgid "Runners|Runner is paused, last contact was %{runner_contact} ago"
 msgstr ""
 
-msgid "Runners|Shared"
+msgid "Runners|Shared runners are available to every project in a GitLab instance. If you want a runner to build only specific projects, restrict the project in the table below. After you restrict a runner to a project, you cannot change it back to a shared runner."
 msgstr ""
 
 msgid "Runners|Show Runner installation instructions"
 msgstr ""
 
-msgid "Runners|Specific"
+msgid "Runners|Tags"
 msgstr ""
 
-msgid "Runners|Tags"
+msgid "Runners|This runner is associated with specific projects."
+msgstr ""
+
+msgid "Runners|This runner is available to all groups and projects in your GitLab instance."
+msgstr ""
+
+msgid "Runners|This runner is available to all projects and subgroups in a group."
 msgstr ""
 
 msgid "Runners|To install Runner in Kubernetes follow the instructions described in the GitLab documentation."
@@ -27265,6 +27265,9 @@ msgstr ""
 msgid "Runners|To install Runner in a container follow the instructions described in the GitLab documentation"
 msgstr ""
 
+msgid "Runners|Use Group runners when you want all projects in a group to have access to a set of runners."
+msgstr ""
+
 msgid "Runners|Value"
 msgstr ""
 
@@ -27274,9 +27277,21 @@ msgstr ""
 msgid "Runners|View installation instructions"
 msgstr ""
 
+msgid "Runners|You can set up a specific runner to be used by multiple projects but you cannot make this a shared runner."
+msgstr ""
+
 msgid "Runners|You have used %{quotaUsed} out of %{quotaLimit} of your shared Runners pipeline minutes."
 msgstr ""
 
+msgid "Runners|group"
+msgstr ""
+
+msgid "Runners|shared"
+msgstr ""
+
+msgid "Runners|specific"
+msgstr ""
+
 msgid "Running"
 msgstr ""
 
@@ -32163,15 +32178,6 @@ msgstr ""
 msgid "This repository was last checked %{last_check_timestamp}. The check passed."
 msgstr ""
 
-msgid "This runner processes jobs for all projects in its group and subgroups."
-msgstr ""
-
-msgid "This runner processes jobs for all unassigned projects."
-msgstr ""
-
-msgid "This runner processes jobs for assigned projects only."
-msgstr ""
-
 msgid "This runner will only run on pipelines triggered on protected branches"
 msgstr ""
 
@@ -35763,9 +35769,6 @@ msgstr ""
 msgid "You cannot impersonate an internal user"
 msgstr ""
 
-msgid "You cannot make this a shared runner."
-msgstr ""
-
 msgid "You cannot play this scheduled pipeline at the moment. Please wait a minute."
 msgstr ""
 
@@ -37711,9 +37714,6 @@ msgstr ""
 msgid "revised"
 msgstr ""
 
-msgid "runners"
-msgstr ""
-
 msgid "satisfied"
 msgstr ""
 

spec/views/shared/runners/show.html.haml_spec.rb

@@ -34,19 +34,19 @@ RSpec.describe 'shared/runners/show.html.haml' do
 
   describe 'Runner id and type' do
     context 'when runner is of type instance' do
-      it { is_expected.to have_content("Runner ##{runner.id} Shared") }
+      it { is_expected.to have_content("Runner ##{runner.id} shared") }
     end
 
     context 'when runner is of type group' do
       let(:runner) { create(:ci_runner, :group) }
 
-      it { is_expected.to have_content("Runner ##{runner.id} Group") }
+      it { is_expected.to have_content("Runner ##{runner.id} group") }
     end
 
     context 'when runner is of type project' do
       let(:runner) { create(:ci_runner, :project) }
 
-      it { is_expected.to have_content("Runner ##{runner.id} Specific") }
+      it { is_expected.to have_content("Runner ##{runner.id} specific") }
     end
   end