4 files changed, 29 insertions, 6 deletions
diff --git a/app/views/groups/runners/_runner.html.haml b/app/views/groups/runners/_runner.html.haml
index 78ce5b3e110..b2d8b9668e7 100644
--- a/app/views/groups/runners/_runner.html.haml
+++ b/app/views/groups/runners/_runner.html.haml
@@ -9,7 +9,7 @@
       - if runner.locked?
         = gl_badge_tag s_('Runners|locked'), variant: :warning, size: :sm
       - unless runner.active?
-        = gl_badge_tag s_('Runners|paused'), variant: :danger, size: :sm
+        = gl_badge_tag s_('Runners|paused'), { variant: :danger, size: :sm }, { title: s_('Runners|Not accepting jobs'), data: { toggle: 'tooltip', container: 'body' } }
 
   .table-section.section-30
     .table-mobile-header{ role: 'rowheader' }= s_('Runners|Runner')
@@ -33,7 +33,7 @@
     .table-mobile-header{ role: 'rowheader' }= _('Projects')
     .table-mobile-content
       - if runner.group_type?
-        = _('n/a')
+        \-
       - else
         = runner.runner_projects.count(:all)
 
@@ -64,10 +64,10 @@
           = sprite_icon('pencil', css_class: 'gl-icon')
       .btn-group
         - if runner.active?
-          = link_to pause_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Pause'), ref: 'tooltip', aria: { label: _('Pause') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
+          = link_to pause_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon', title: s_('Runners|Pause from accepting jobs'), ref: 'tooltip', aria: { label: _('Pause') }, data: { toggle: 'tooltip', container: 'body', confirm: _('Are you sure?') } do
             = sprite_icon('pause', css_class: 'gl-icon')
         - else
-          = link_to resume_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Resume'), ref: 'tooltip', aria: { label: _('Resume') }, data: { placement: 'top', container: 'body'} do
+          = link_to resume_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon', title: s_('Runners|Resume accepting jobs'), ref: 'tooltip', aria: { label: _('Resume') }, data: { toggle: 'tooltip', container: 'body'} do
             = sprite_icon('play', css_class: 'gl-icon')
       - if runner.belongs_to_more_than_one_project?
         - delete_runner_tooltip = _('Multi-project Runners cannot be removed')
diff --git a/app/views/groups/runners/_settings.html.haml b/app/views/groups/runners/_settings.html.haml
index 55960703f9a..bbcadc08a8b 100644
--- a/app/views/groups/runners/_settings.html.haml
+++ b/app/views/groups/runners/_settings.html.haml
@@ -1,3 +1,17 @@
+- if Feature.enabled?(:runner_list_group_view_vue_ui, @group, default_enabled: :yaml)
+  .gl-card.gl-px-8.gl-py-6.gl-line-height-20
+    .gl-card-body.gl-display-flex{ :class => "gl-p-0!" }
+      .gl-banner-illustration
+        = image_tag('illustrations/rocket-launch-md.svg', alt: s_('Runners|Rocket launch illustration'))
+      .gl-banner-content
+        %h1.gl-banner-title
+          = s_('Runners|New group runners view')
+        %p
+          = s_('Runners|The new view gives you more space and better visibility into your fleet of runners.')
+        %a.btn.btn-confirm.btn-md.gl-button{ :href => group_runners_path(@group) }
+          %span.gl-button-text
+          = s_('Runners|Take me there!')
+
 = render 'shared/runners/runner_description'
 
 %hr
diff --git a/app/views/groups/runners/edit.html.haml b/app/views/groups/runners/edit.html.haml
index a0d7b8acb47..4a5bab94246 100644
--- a/app/views/groups/runners/edit.html.haml
+++ b/app/views/groups/runners/edit.html.haml
@@ -1,8 +1,14 @@
 - breadcrumb_title _('Edit')
 - page_title _('Edit'), "##{@runner.id} (#{@runner.short_sha})"
-- add_to_breadcrumbs _('CI/CD Settings'), group_settings_ci_cd_path(@group)
+
+- if Feature.enabled?(:runner_list_group_view_vue_ui, @group, default_enabled: :yaml)
+  - add_to_breadcrumbs _('Runners'), group_runners_path(@group)
+- else
+  - add_to_breadcrumbs _('CI/CD Settings'), group_settings_ci_cd_path(@group)
+
 - add_to_breadcrumbs "#{@runner.short_sha}", group_runner_path(@group, @runner)
 
+
 %h2.page-title
   = s_('Runners|Runner #%{runner_id}' % { runner_id: @runner.id })
   = render 'shared/runners/runner_type_badge', runner: @runner
diff --git a/app/views/groups/runners/show.html.haml b/app/views/groups/runners/show.html.haml
index 5cf83e8ccfd..72701491c67 100644
--- a/app/views/groups/runners/show.html.haml
+++ b/app/views/groups/runners/show.html.haml
@@ -1,3 +1,6 @@
-- add_to_breadcrumbs _('CI/CD Settings'), group_settings_ci_cd_path(@group)
+- if Feature.enabled?(:runner_list_group_view_vue_ui, @group, default_enabled: :yaml)
+  - add_to_breadcrumbs _('Runners'), group_runners_path(@group)
+- else
+  - add_to_breadcrumbs _('CI/CD Settings'), group_settings_ci_cd_path(@group)
 
 = render 'shared/runners/runner_details', runner: @runner