Allow dismissal of pipeline minutes quota warning

app/assets/javascripts/vue_alerts.js

 import Vue from 'vue';
+import Cookies from 'js-cookie';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import DismissibleAlert from '~/vue_shared/components/dismissible_alert.vue';
 
+const getCookieExpirationPeriod = (expirationPeriod) => {
+  const defaultExpirationPeriod = 30;
+  const alertExpirationPeriod = Number(expirationPeriod);
+
+  return !expirationPeriod || Number.isNaN(alertExpirationPeriod)
+    ? defaultExpirationPeriod
+    : alertExpirationPeriod;
+};
+
 const mountVueAlert = (el) => {
   const props = {
     html: el.innerHTML,
@@ -10,11 +20,25 @@ const mountVueAlert = (el) => {
     ...el.dataset,
     dismissible: parseBoolean(el.dataset.dismissible),
   };
+  const { dismissCookieName, dismissCookieExpire } = el.dataset;
 
   return new Vue({
     el,
-    render(h) {
-      return h(DismissibleAlert, { props, attrs });
+    render(createElement) {
+      return createElement(DismissibleAlert, {
+        props,
+        attrs,
+        on: {
+          alertDismissed() {
+            if (!dismissCookieName) {
+              return;
+            }
+            Cookies.set(dismissCookieName, true, {
+              expires: getCookieExpirationPeriod(dismissCookieExpire),
+            });
+          },
+        },
+      });
     },
   });
 };

app/assets/javascripts/vue_shared/components/dismissible_alert.vue

@@ -24,6 +24,7 @@ export default {
   methods: {
     dismiss() {
       this.isDismissed = true;
+      this.$emit('alertDismissed');
     },
   },
 };

ee/app/models/ci/minutes/notification.rb

@@ -15,9 +15,10 @@ module Ci
         @stage = calculate_notification_stage if eligible_for_notifications?
       end
 
-      def show?(current_user)
+      def show?(current_user, cookies = false)
         return false unless @stage
         return false unless @context.level
+        return false if alert_has_been_dismissed?(cookies)
 
         Ability.allowed?(current_user, :read_ci_minutes_quota, @context.level)
       end
@@ -46,10 +47,20 @@ module Ci
         context.shared_runners_minutes_limit_enabled?
       end
 
+      def dismiss_cookie_id
+        "ci_minutes_notification_#{stage_percentage}_stage_percentage"
+      end
+
       private
 
       attr_reader :context, :stage
 
+      def alert_has_been_dismissed?(cookies)
+        return unless cookies
+
+        Gitlab::Utils.to_boolean(cookies[dismiss_cookie_id], default: false)
+      end
+
       def calculate_notification_stage
         percentage = context.percent_total_minutes_remaining.to_i
 

ee/app/views/shared/_shared_runners_minutes_limit.html.haml

 - notification = ::Ci::Minutes::Notification.new(local_assigns.dig(:project), local_assigns.dig(:namespace))
-- return unless notification.show?(current_user)
+- return unless notification.show?(current_user, cookies)
 
 %div{ class: [(classes if defined? classes)] }
   .shared-runner-quota-message.gl-pt-5.gl-pb-3
     .js-vue-alert{ 'v-cloak': true, data: { variant: notification.style,
       primary_button_text: _('Buy more Pipeline minutes'),
       primary_button_link: ::EE::SUBSCRIPTIONS_MORE_MINUTES_URL,
-      dismissible: 'false' } }
+      dismissible: 'true',
+      dismiss_cookie_name: notification.dismiss_cookie_id,
+      dismiss_cookie_expire: 30 } }
       = notification.text

ee/spec/models/ci/minutes/notification_spec.rb

@@ -34,6 +34,12 @@ RSpec.describe Ci::Minutes::Notification do
   end
 
   shared_examples 'has notifications' do
+    shared_examples 'aware of dismission cookie' do
+      it 'does not show when cookie is set' do
+        expect(subject.show?(user, { subject.dismiss_cookie_id => 'true' })).to be_falsey
+      end
+    end
+
     context 'when usage has reached a notification level' do
       before do
         group.shared_runners_minutes_limit = 20
@@ -48,6 +54,7 @@ RSpec.describe Ci::Minutes::Notification do
             expect(subject.text).to match(/.*\shas 30% or less Shared Runner Pipeline minutes remaining/)
             expect(subject.style).to eq :warning
           end
+          it_behaves_like 'aware of dismission cookie'
         end
 
         describe '#running_out?' do
@@ -78,6 +85,7 @@ RSpec.describe Ci::Minutes::Notification do
             expect(subject.text).to match(/.*\shas 5% or less Shared Runner Pipeline minutes remaining/)
             expect(subject.style).to eq :danger
           end
+          it_behaves_like 'aware of dismission cookie'
         end
 
         describe '#running_out?' do
@@ -108,6 +116,7 @@ RSpec.describe Ci::Minutes::Notification do
             expect(subject.text).to match(/.*\shas 30% or less Shared Runner Pipeline minutes remaining/)
             expect(subject.style).to eq :warning
           end
+          it_behaves_like 'aware of dismission cookie'
         end
 
         describe '#running_out?' do
@@ -138,6 +147,7 @@ RSpec.describe Ci::Minutes::Notification do
             expect(subject.text).to match(/.*\shas exceeded its pipeline minutes quota/)
             expect(subject.style).to eq :danger
           end
+          it_behaves_like 'aware of dismission cookie'
         end
 
         describe '#running_out?' do

spec/frontend/vue_shared/components/dismissible_alert_spec.js

@@ -43,6 +43,10 @@ describe('vue_shared/components/dismissible_alert', () => {
       it('hides the alert', () => {
         expect(findAlert().exists()).toBe(false);
       });
+
+      it('emmits alertDismissed', () => {
+        expect(wrapper.emitted('alertDismissed')).toBeTruthy();
+      });
     });
   });