Add cron syntax message

Add message for cron syntax
input that informs user about
daily pipeline schedules.

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

 <script>
-import { GlFormRadio, GlFormRadioGroup, GlLink, GlSprintf } from '@gitlab/ui';
+import {
+  GlFormRadio,
+  GlFormRadioGroup,
+  GlIcon,
+  GlLink,
+  GlSprintf,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import { getWeekdayNames } from '~/lib/utils/datetime_utility';
-import { s__, sprintf } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 
 const KEY_EVERY_DAY = 'everyDay';
 const KEY_EVERY_WEEK = 'everyWeek';
@@ -9,12 +16,21 @@ 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,
+    GlIcon,
     GlLink,
     GlSprintf,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     initialCronInterval: {
       type: String,
@@ -74,6 +90,7 @@ export default {
           value: KEY_CUSTOM,
           text: s__('PipelineScheduleIntervalPattern|Custom (%{linkStart}Cron syntax%{linkEnd})'),
           link: this.cronSyntaxUrl,
+          helpText: this.$options.i18n.cronInfo,
         },
       ];
     },
@@ -131,7 +148,15 @@ export default {
             </gl-link>
           </template>
         </gl-sprintf>
+
         <template v-else>{{ option.text }}</template>
+
+        <gl-icon
+          v-if="option.helpText"
+          v-gl-tooltip.hover
+          name="question"
+          :title="option.helpText"
+        />
       </gl-form-radio>
     </gl-form-radio-group>
     <input

locale/gitlab.pot

@@ -28420,6 +28420,9 @@ msgstr ""
 msgid "Scheduled a rebase of branch %{branch}."
 msgstr ""
 
+msgid "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."
+msgstr ""
+
 msgid "Scheduled to merge this merge request (%{strategy})."
 msgstr ""
 

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

+import { GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { trimText } from 'helpers/text_helper';
 import IntervalPatternInput from '~/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue';
@@ -27,6 +28,8 @@ describe('Interval Pattern Input Component', () => {
   const findAllLabels = () => wrapper.findAll('label');
   const findSelectedRadio = () =>
     wrapper.findAll('input[type="radio"]').wrappers.find((x) => x.element.checked);
+  const findIcon = () => wrapper.findComponent(GlIcon);
+  const findAllIcons = () => wrapper.findAllComponents(GlIcon);
   const findSelectedRadioKey = () => findSelectedRadio()?.attributes('data-testid');
   const selectEveryDayRadio = () => findEveryDayRadio().trigger('click');
   const selectEveryWeekRadio = () => findEveryWeekRadio().trigger('click');
@@ -202,4 +205,13 @@ describe('Interval Pattern Input Component', () => {
       expect(findSelectedRadioKey()).toBe(customKey);
     });
   });
+
+  describe('Custom cron syntax quota info', () => {
+    it('the help text icon is only shown for the custom radio option', () => {
+      createWrapper();
+
+      expect(findIcon().exists()).toBe(true);
+      expect(findAllIcons().length).toBe(1);
+    });
+  });
 });