Make message dynamic

Make message dynamic based
on plan limit. Also put code
behind the feature flag.

app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue

@@ -9,6 +9,7 @@ import {
 } from '@gitlab/ui';
 import { getWeekdayNames } from '~/lib/utils/datetime_utility';
 import { __, s__, sprintf } from '~/locale';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 const KEY_EVERY_DAY = 'everyDay';
 const KEY_EVERY_WEEK = 'everyWeek';
@@ -16,11 +17,6 @@ const KEY_EVERY_MONTH = 'everyMonth';
 const KEY_CUSTOM = 'custom';
 
 export default {
-  i18n: {
-    cronInfo: __(
-      'Scheduled pipelines cannot run more frequently than once per hour. A pipeline configured to run more frequently only starts after one hour has elapsed since the last time it ran.',
-    ),
-  },
   components: {
     GlFormRadio,
     GlFormRadioGroup,
@@ -31,12 +27,18 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     initialCronInterval: {
       type: String,
       required: false,
       default: '',
     },
+    dailyLimit: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -90,13 +92,23 @@ export default {
           value: KEY_CUSTOM,
           text: s__('PipelineScheduleIntervalPattern|Custom (%{linkStart}Cron syntax%{linkEnd})'),
           link: this.cronSyntaxUrl,
-          helpText: this.$options.i18n.cronInfo,
         },
       ];
     },
     weekday() {
       return getWeekdayNames()[this.randomWeekDayIndex];
     },
+    parsedDailyLimit() {
+      return this.dailyLimit === '144' ? '5' : '60';
+    },
+    scheduleDailyLimitMsg() {
+      return sprintf(
+        __(
+          'Scheduled pipelines cannot run more frequently than once per %{limit} minutes. A pipeline configured to run more frequently only starts after %{limit} minutes have elapsed since the last time it ran.',
+        ),
+        { limit: this.parsedDailyLimit },
+      );
+    },
   },
   watch: {
     cronInterval() {
@@ -128,6 +140,11 @@ export default {
     generateRandomDay() {
       return Math.floor(Math.random() * 28);
     },
+    showDailyLimitMessage({ value }) {
+      return (
+        value === KEY_CUSTOM && this.glFeatures.ciDailyLimitForPipelineSchedules && this.dailyLimit
+      );
+    },
   },
 };
 </script>
@@ -152,10 +169,10 @@ export default {
         <template v-else>{{ option.text }}</template>
 
         <gl-icon
-          v-if="option.helpText"
+          v-if="showDailyLimitMessage(option)"
           v-gl-tooltip.hover
           name="question"
-          :title="option.helpText"
+          :title="scheduleDailyLimitMsg"
         />
       </gl-form-radio>
     </gl-form-radio-group>

app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js

@@ -12,6 +12,7 @@ Vue.use(Translate);
 function initIntervalPatternInput() {
   const intervalPatternMount = document.getElementById('interval-pattern-input');
   const initialCronInterval = intervalPatternMount?.dataset?.initialInterval;
+  const dailyLimit = intervalPatternMount.dataset?.dailyLimit;
 
   return new Vue({
     el: intervalPatternMount,
@@ -22,6 +23,7 @@ function initIntervalPatternInput() {
       return createElement('interval-pattern-input', {
         props: {
           initialCronInterval,
+          dailyLimit,
         },
       });
     },

app/controllers/projects/pipeline_schedules_controller.rb

@@ -10,6 +10,10 @@ class Projects::PipelineSchedulesController < Projects::ApplicationController
   before_action :authorize_update_pipeline_schedule!, except: [:index, :new, :create, :play]
   before_action :authorize_admin_pipeline_schedule!, only: [:destroy]
 
+  before_action do
+    push_frontend_feature_flag(:ci_daily_limit_for_pipeline_schedules, @project, default_enabled: :yaml)
+  end
+
   feature_category :continuous_integration
 
   # rubocop: disable CodeReuse/ActiveRecord

spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js

@@ -43,6 +43,11 @@ describe('Interval Pattern Input Component', () => {
 
     wrapper = mount(IntervalPatternInput, {
       propsData: { ...props },
+      provide: {
+        glFeatures: {
+          ciDailyLimitForPipelineSchedules: true,
+        },
+      },
       data() {
         return {
           randomHour: data?.hour || mockHour,
@@ -208,7 +213,7 @@ describe('Interval Pattern Input Component', () => {
 
   describe('Custom cron syntax quota info', () => {
     it('the help text icon is only shown for the custom radio option', () => {
-      createWrapper();
+      createWrapper({ dailyLimit: '144' });
 
       expect(findIcon().exists()).toBe(true);
       expect(findAllIcons().length).toBe(1);