Add banner to the new Group Runners list

This change adds a banner to take users to the new Group Runners list
when the feature flag `runner_list_group_view_vue_ui` for the group
is enabled.

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

+- 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

locale/gitlab.pot

@@ -31623,6 +31623,9 @@ msgstr ""
 msgid "Runners|Never contacted"
 msgstr ""
 
+msgid "Runners|New group runners view"
+msgstr ""
+
 msgid "Runners|New registration token generated!"
 msgstr ""
 
@@ -31689,6 +31692,9 @@ msgstr ""
 msgid "Runners|Revision"
 msgstr ""
 
+msgid "Runners|Rocket launch illustration"
+msgstr ""
+
 msgid "Runners|Runner"
 msgstr ""
 
@@ -31755,6 +31761,12 @@ msgstr ""
 msgid "Runners|Tags"
 msgstr ""
 
+msgid "Runners|Take me there!"
+msgstr ""
+
+msgid "Runners|The new view gives you more space and better visibility into your fleet of runners."
+msgstr ""
+
 msgid "Runners|The runner will be permanently deleted and no longer available for projects or groups in the instance. Are you sure you want to continue?"
 msgstr ""
 

spec/features/groups/settings/ci_cd_spec.rb

@@ -13,6 +13,24 @@ RSpec.describe 'Group CI/CD settings' do
     sign_in(user)
   end
 
+  describe 'new group runners view banner' do
+    it 'displays banner' do
+      visit group_settings_ci_cd_path(group)
+
+      expect(page).to have_content(s_('Runners|New group runners view'))
+      expect(page).to have_link(href: group_runners_path(group))
+    end
+
+    it 'does not display banner' do
+      stub_feature_flags(runner_list_group_view_vue_ui: false)
+
+      visit group_settings_ci_cd_path(group)
+
+      expect(page).not_to have_content(s_('Runners|New group runners view'))
+      expect(page).not_to have_link(href: group_runners_path(group))
+    end
+  end
+
   describe 'runners registration token' do
     let!(:token) { group.runners_token }