Add `alert_runbooks` feature flag

app/assets/javascripts/monitoring/components/alert_widget_form.vue

@@ -294,6 +294,14 @@ export default {
           data-qa-selector="alert_threshold_field"
         />
       </gl-form-group>
+      <gl-form-group
+        v-if="glFeatures.alertRunbooks"
+        :label="s__('PrometheusAlerts|Runbook')"
+        label-for="alert-runbook"
+        data-testid="alertRunbookField"
+      >
+        <gl-form-input id="alert-runbook" :disabled="formDisabled" type="text" />
+      </gl-form-group>
     </div>
     <template #modal-ok>
       <gl-link

app/controllers/projects/metrics_dashboard_controller.rb

@@ -10,6 +10,7 @@ module Projects
     before_action do
       push_frontend_feature_flag(:prometheus_computed_alerts)
       push_frontend_feature_flag(:disable_metric_dashboard_refresh_rate)
+      push_frontend_feature_flag(:alert_runbooks)
     end
 
     def show

locale/gitlab.pot

@@ -18991,6 +18991,9 @@ msgstr ""
 msgid "PrometheusAlerts|Operator"
 msgstr ""
 
+msgid "PrometheusAlerts|Runbook"
+msgstr ""
+
 msgid "PrometheusAlerts|Select query"
 msgstr ""
 

spec/frontend/monitoring/components/alert_widget_form_spec.js

@@ -29,7 +29,7 @@ describe('AlertWidgetForm', () => {
     configuredAlert: metricId,
   };
 
-  function createComponent(props = {}) {
+  function createComponent(props = {}, featureFlags = {}) {
     const propsData = {
       ...defaultProps,
       ...props,
@@ -37,6 +37,9 @@ describe('AlertWidgetForm', () => {
 
     wrapper = shallowMount(AlertWidgetForm, {
       propsData,
+      provide: {
+        glFeatures: featureFlags,
+      },
       stubs: {
         GlModal: ModalStub,
       },
@@ -46,6 +49,7 @@ describe('AlertWidgetForm', () => {
   const modal = () => wrapper.find(ModalStub);
   const modalTitle = () => modal().attributes('title');
   const submitButton = () => modal().find(GlLink);
+  const alertRunbookField = () => wrapper.find('[data-testid="alertRunbookField"]');
   const submitButtonTrackingOpts = () =>
     JSON.parse(submitButton().attributes('data-tracking-options'));
   const e = {
@@ -217,4 +221,18 @@ describe('AlertWidgetForm', () => {
       });
     });
   });
+
+  describe('alert runbooks feature flag', () => {
+    it('hides the runbook field when the flag is disabled', () => {
+      createComponent(undefined, { alertRunbooks: false });
+
+      expect(alertRunbookField().exists()).toBe(false);
+    });
+
+    it('shows the runbook field when the flag is enabled', () => {
+      createComponent(undefined, { alertRunbooks: true });
+
+      expect(alertRunbookField().exists()).toBe(true);
+    });
+  });
 });