Add out of minutes warning to groups overview

- as per spec

app/views/groups/_flash_messages.html.haml

+= content_for :flash_message do
+  = render_if_exists 'shared/shared_runners_minutes_limit', namespace: @group, classes: [container_class, ("limit-container-width" unless fluid_layout)]

app/views/groups/show.html.haml

@@ -4,6 +4,8 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, group_url(@group, rss_url_options), title: "#{@group.name} activity")
 
+= render partial: 'flash_messages'
+
 %div{ class: [("limit-container-width" unless fluid_layout)] }
   = render_if_exists 'trials/banner', namespace: @group
 

ee/app/assets/javascripts/pages/groups/show/index.js

@@ -2,6 +2,7 @@ import initGroupSecurityDashboard from 'ee/security_dashboard/group_init';
 import leaveByUrl from '~/namespaces/leave_by_url';
 import initGroupDetails from '~/pages/groups/shared/group_details';
 import initGroupAnalytics from 'ee/analytics/group_analytics/group_analytics_bundle';
+import initVueAlerts from '~/vue_alerts';
 
 document.addEventListener('DOMContentLoaded', () => {
   leaveByUrl('group');
@@ -13,4 +14,5 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   initGroupAnalytics();
+  initVueAlerts();
 });

ee/changelogs/unreleased/212392-show-the-you-re-running-out-of-ci-minutes-warnings-on-relevant-.yml

+---
+title: Show the You're running out of CI minutes warnings on relevant pages in GitLab
+merge_request: 31012
+author:
+type: added

ee/spec/features/ci_shared_runner_warnings_spec.rb

@@ -3,7 +3,9 @@
 require 'spec_helper'
 
 describe 'CI shared runner limits' do
-  let(:user) { create(:user) }
+  using RSpec::Parameterized::TableSyntax
+
+  let_it_be(:user) { create(:user) }
   let!(:project) { create(:project, :repository, namespace: group, shared_runners_enabled: true) }
   let(:group) { create(:group) }
 
@@ -11,66 +13,38 @@ describe 'CI shared runner limits' do
     sign_in(user)
   end
 
-  shared_examples 'threshold breached' do
-    before do
-      group.update(shared_runners_minutes_limit: 20)
-    end
-
-    it 'displays a warning message on pipelines page' do
-      visit project_pipelines_path(project)
-
-      expect_quota_exceeded_alert(message)
-    end
-
-    it 'displays a warning message on project homepage' do
-      visit project_path(project)
-
-      expect_quota_exceeded_alert(message)
-    end
-  end
-
-  context 'when project member' do
+  context 'when on a project related page' do
     before do
       group.add_developer(user)
     end
 
-    context 'without limit' do
-      it 'does not display a warning message on project homepage' do
-        visit project_path(project)
-
-        expect_no_quota_exceeded_alert
-      end
-
-      it 'does not display a warning message on pipelines page' do
-        visit project_pipelines_path(project)
-
-        expect_no_quota_exceeded_alert
-      end
+    where(:case_name, :percent, :remaining_minutes) do
+      'warning level' | 30 | 4
+      'danger level' | 5 | 1
     end
 
-    context 'when limit is defined' do
-      context 'when usage has reached a warning level', :js do
-        it_behaves_like 'threshold breached' do
+    with_them do
+      context "when there is a notification and minutes still exist", :js do
         let(:message) do
-            "Group #{group.name} has 30% or less Shared Runner Pipeline minutes remaining. " \
+          "Group #{group.name} has #{percent}% or less Shared Runner Pipeline minutes remaining. " \
             "Once it runs out, no new jobs or pipelines in its projects will run."
         end
 
         before do
-            allow_any_instance_of(EE::Namespace).to receive(:shared_runners_remaining_minutes).and_return(4)
-          end
-        end
+          group.update(shared_runners_minutes_limit: 20)
+          allow_any_instance_of(EE::Namespace).to receive(:shared_runners_remaining_minutes).and_return(remaining_minutes)
         end
 
-      context 'when usage has reached a danger level', :js do
-        it_behaves_like 'threshold breached' do
-          let(:message) do
-            "Group #{group.name} has 5% or less Shared Runner Pipeline minutes remaining. " \
-            "Once it runs out, no new jobs or pipelines in its projects will run."
+        it 'displays a warning message on pipelines page' do
+          visit project_pipelines_path(project)
+
+          expect_quota_exceeded_alert(message)
         end
 
-          before do
-            allow_any_instance_of(EE::Namespace).to receive(:shared_runners_remaining_minutes).and_return(1)
+        it 'displays a warning message on project homepage' do
+          visit project_path(project)
+
+          expect_quota_exceeded_alert(message)
         end
       end
     end
@@ -110,53 +84,69 @@ describe 'CI shared runner limits' do
         expect_no_quota_exceeded_alert
       end
     end
+  end
 
-      context 'when minutes are not yet set' do
-        let(:group) { create(:group, :with_build_minutes_limit) }
+  context 'when on a group related page' do
+    let!(:user_pipeline) { create(:ci_pipeline, user: user, project: project) }
 
-        it 'does not display a warning message on project homepage' do
-          visit project_path(project)
-
-          expect_no_quota_exceeded_alert
+    where(:case_name, :percent, :remaining_minutes) do
+      'warning level' | 30 | 4
+      'danger level' | 5 | 1
     end
 
-        it 'does not display a warning message on pipelines page' do
-          visit project_pipelines_path(project)
+    with_them do
+      context "when there is a notification and minutes still exist", :js do
+        let(:message) do
+          "Group #{group.name} has #{percent}% or less Shared Runner Pipeline minutes remaining. " \
+            "Once it runs out, no new jobs or pipelines in its projects will run."
+        end
 
-          expect_no_quota_exceeded_alert
+        before do
+          group.update(shared_runners_minutes_limit: 20)
+          allow_any_instance_of(EE::Namespace).to receive(:shared_runners_remaining_minutes).and_return(remaining_minutes)
         end
+
+        it 'displays a warning message on group overview page' do
+          visit group_path(group)
+
+          expect_quota_exceeded_alert(message)
         end
       end
     end
 
-  context 'when not a project member' do
+    context 'when limit is exceeded', :js do
       let(:group) { create(:group, :with_used_build_minutes_limit) }
+      let(:message) do
+        "Group #{group.name} has exceeded its pipeline minutes quota. " \
+          "Unless you buy additional pipeline minutes, no new jobs or pipelines in its projects will run."
+      end
 
-    context 'when limit is defined and limit is exceeded' do
-      it 'does not display a warning message on project homepage' do
-        visit project_path(project)
+      it 'displays a warning message on group overview page' do
+        visit group_path(group)
 
-        expect_no_quota_exceeded_alert
+        expect_quota_exceeded_alert(message)
+      end
     end
 
-      it 'does not display a warning message on pipelines page' do
-        visit project_pipelines_path(project)
+    context 'when limit not yet exceeded' do
+      let(:group) { create(:group, :with_not_used_build_minutes_limit) }
+
+      it 'does not display a warning message on group overview page' do
+        visit group_path(group)
 
         expect_no_quota_exceeded_alert
       end
     end
   end
 
-  def expect_quota_exceeded_alert(message = nil)
+  def expect_quota_exceeded_alert(message)
     expect(page).to have_selector('.shared-runner-quota-message', count: 1)
 
-    if message
     page.within('.shared-runner-quota-message') do
       expect(page).to have_content(message)
       expect(page).to have_link 'Buy more Pipeline minutes'
     end
   end
-  end
 
   def expect_no_quota_exceeded_alert
     expect(page).not_to have_selector('.shared-runner-quota-message')