feat: add feature flag

- To enable the feature, set sm-alerts-per-check=true

src/components/CheckForm/CheckForm.tsx

@@ -7,7 +7,7 @@ import { css } from '@emotion/css';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { DataTestIds } from 'test/dataTestIds';
 
-import { Check, CheckFormValues, CheckType } from 'types';
+import { Check, CheckFormValues, CheckType, FeatureName } from 'types';
 import { createNavModel } from 'utils';
 import { ROUTES } from 'routing/types';
 import { generateRoutePath } from 'routing/utils';
@@ -37,6 +37,7 @@ import { CheckTestResultsModal } from 'components/CheckTestResultsModal';
 import { CheckUsage } from 'components/CheckUsage';
 import { ConfirmLeavingPage } from 'components/ConfirmLeavingPage';
 import { fallbackCheckMap } from 'components/constants';
+import { FeatureFlag } from 'components/FeatureFlag';
 import { LabelField } from 'components/LabelField';
 import { OverLimitAlert } from 'components/OverLimitAlert';
 
@@ -220,7 +221,9 @@ export const CheckForm = ({ check, disabled }: CheckFormProps) => {
                 <CheckLabels />
               </FormLayout.Section>
               <FormLayout.Section label="Alerting" fields={[`alerts`, `alertSensitivity`]} status={status}>
-                <AlertsPerCheck />
+                <FeatureFlag name={FeatureName.AlertsPerCheck}>
+                  {({ isEnabled }) => (isEnabled ? <AlertsPerCheck /> : null)}
+                </FeatureFlag>
                 <CheckFormAlert />
               </FormLayout.Section>
               <FormLayout.Section label="Execution" fields={[`probes`, `frequency`, ...probesFields]} status={status}>

src/page/NewCheck/__tests__/ApiEndPointChecks/CommonFields.payload.test.tsx

@@ -1,8 +1,9 @@
+import { config } from '@grafana/runtime';
 import { screen } from '@testing-library/react';
 import { PRIVATE_PROBE } from 'test/fixtures/probes';
 import { selectOption } from 'test/utils';
 
-import { AlertSensitivity, Check, CheckType } from 'types';
+import { AlertSensitivity, Check, CheckType, FeatureName } from 'types';
 import {
   FALLBACK_CHECK_DNS,
   FALLBACK_CHECK_GRPC,
@@ -93,7 +94,14 @@ describe('Api endpoint checks - common fields payload', () => {
         });
 
         it(`can submit the form with alerts per check`, async () => {
+          jest.replaceProperty(config, 'featureToggles', {
+            // @ts-expect-error
+            [FeatureName.AlertsPerCheck]: true,
+          });
+
+
           const { user, read } = await renderNewForm(checkType);
+
           await fillMandatoryFields({ user, checkType });
 
           await goToSection(user, 4);

src/page/NewCheck/__tests__/ApiEndPointChecks/HTTPCheck/4-alerting.payload.test.tsx

@@ -1,6 +1,7 @@
+import { config } from '@grafana/runtime';
 import { screen } from '@testing-library/react';
 
-import { CheckType } from 'types';
+import { CheckType, FeatureName } from 'types';
 import { goToSection, renderNewForm, submitForm } from 'page/__testHelpers__/checkForm';
 
 import { fillMandatoryFields } from '../../../../__testHelpers__/apiEndPoint';
@@ -19,6 +20,11 @@ describe(`HttpCheck - Section 4 (Alerting) payload`, () => {
   });
 
   it.only(`can add specific http alerts`, async () => {
+    jest.replaceProperty(config, 'featureToggles', {
+      // @ts-expect-error
+      [FeatureName.AlertsPerCheck]: true,
+    });
+
     const { user, read } = await renderNewForm(checkType);
     await fillMandatoryFields({ user, checkType });
     await goToSection(user, 4);

src/page/NewCheck/__tests__/ApiEndPointChecks/PingCheck/4-alerting.payload.test.tsx

@@ -1,6 +1,7 @@
+import { config } from '@grafana/runtime';
 import { screen } from '@testing-library/react';
 
-import { CheckType } from 'types';
+import { CheckType, FeatureName } from 'types';
 import { goToSection, renderNewForm, submitForm } from 'page/__testHelpers__/checkForm';
 
 import { fillMandatoryFields } from '../../../../__testHelpers__/apiEndPoint';
@@ -19,6 +20,11 @@ describe(`PingCheck - Section 4 (Alerting) payload`, () => {
   });
 
   it.only(`can add specific ping alerts`, async () => {
+    jest.replaceProperty(config, 'featureToggles', {
+      // @ts-expect-error
+      [FeatureName.AlertsPerCheck]: true,
+    });
+
     const { user, read } = await renderNewForm(checkType);
     await fillMandatoryFields({ user, checkType });
     await goToSection(user, 4);

src/types.ts

@@ -701,6 +701,7 @@ export enum FeatureName {
   UnifiedAlerting = 'ngalert',
   UptimeQueryV2 = 'uptime-query-v2',
   RBAC = 'synthetic-monitoring-rbac',
+  AlertsPerCheck = 'sm-alerts-per-check',
   __TURNOFF = 'test-only-do-not-use',
 }