From a5be00bbd5775c40e2e6eef76b709c44fa628bec Mon Sep 17 00:00:00 2001
From: Virginia Cepeda <virginia.cepeda@grafana.com>
Date: Tue, 7 Jan 2025 16:34:54 -0300
Subject: [PATCH] fix: conflicts after rebase

---
 src/components/CheckForm/AlertCard.tsx      |  96 --------------
 src/components/CheckForm/AlertsPerCheck.tsx | 136 --------------------
 2 files changed, 232 deletions(-)
 delete mode 100644 src/components/CheckForm/AlertCard.tsx
 delete mode 100644 src/components/CheckForm/AlertsPerCheck.tsx

diff --git a/src/components/CheckForm/AlertCard.tsx b/src/components/CheckForm/AlertCard.tsx
deleted file mode 100644
index 8bc943d4d..000000000
--- a/src/components/CheckForm/AlertCard.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { useMemo } from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
-import { Card, Field, Icon, Input, MultiSelect } from '@grafana/ui';
-
-import { AlertPercentiles, CheckAlertFormType, CheckFormValues } from 'types';
-
-import { useCheckFormContext } from './CheckFormContext/CheckFormContext';
-
-interface AlertCardProps {
-  predefinedAlert: { type: CheckAlertFormType; description: string; percentileOptions: AlertPercentiles[] };
-  onSelect: (type: CheckAlertFormType, forceSelection?: boolean) => void;
-}
-
-export const AlertCard = ({ predefinedAlert, onSelect }: AlertCardProps) => {
-  const { control, formState, getValues } = useFormContext<CheckFormValues>();
-  const { isFormDisabled } = useCheckFormContext();
-
-  const thresholdError = formState.errors?.alerts?.[predefinedAlert.type]?.threshold?.message;
-  const percentileError = formState.errors?.alerts?.[predefinedAlert.type]?.percentiles?.message;
-
-  const percentileOptions = useMemo(
-    () => predefinedAlert.percentileOptions.map((v) => ({ label: v, value: v })),
-    [predefinedAlert.percentileOptions]
-  );
-
-  const isSelected: boolean = getValues(`alerts.${predefinedAlert.type}.isSelected`) || false;
-  const threshold: number = getValues(`alerts.${predefinedAlert.type}.threshold`) || 0;
-  const percentiles: AlertPercentiles[] = getValues(`alerts.${predefinedAlert.type}.percentiles`) || [];
-
-  return (
-    <Card
-      key={predefinedAlert.type}
-      isSelected={isSelected}
-      disabled={isFormDisabled}
-      onClick={() => {
-        onSelect(predefinedAlert.type);
-      }}
-    >
-      <Card.Figure>
-        <Icon name="bell" size="xxl" />
-      </Card.Figure>
-      <Card.Heading>{predefinedAlert.type}</Card.Heading>
-      <Card.Description>
-        <div>{predefinedAlert.description}</div>
-      </Card.Description>
-      <Card.Actions>
-        {predefinedAlert.percentileOptions.length > 0 && (
-          <Field label="Percentile" invalid={Boolean(percentileError)} error={percentileError}>
-            <Controller
-              name={`alerts.${predefinedAlert.type}.percentiles`}
-              control={control}
-              render={({ field }) => {
-                return (
-                  <MultiSelect
-                    disabled={isFormDisabled}
-                    value={field.value ? field.value : percentiles}
-                    onChange={(values) => {
-                      if (!isSelected) {
-                        onSelect(predefinedAlert.type, true);
-                      }
-                      return field.onChange(values.map((v) => v.value));
-                    }}
-                    options={percentileOptions}
-                  />
-                );
-              }}
-            />
-          </Field>
-        )}
-        <Field label="Threshold" invalid={Boolean(thresholdError)} error={thresholdError}>
-          <Controller
-            name={`alerts.${predefinedAlert.type}.threshold`}
-            control={control}
-            render={({ field }) => {
-              return (
-                <Input
-                  type="number"
-                  label="Threshold"
-                  value={field.value ? field.value : threshold}
-                  onChange={(e) => {
-                    if (!isSelected) {
-                      onSelect(predefinedAlert.type, true);
-                    }
-                    return field.onChange(+e.currentTarget.value);
-                  }}
-                  width={15}
-                  disabled={isFormDisabled}
-                />
-              );
-            }}
-          />
-        </Field>
-      </Card.Actions>
-    </Card>
-  );
-};
diff --git a/src/components/CheckForm/AlertsPerCheck.tsx b/src/components/CheckForm/AlertsPerCheck.tsx
deleted file mode 100644
index e40e006af..000000000
--- a/src/components/CheckForm/AlertsPerCheck.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import React, { useEffect } from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
-import { GrafanaTheme2 } from '@grafana/data';
-import { Alert, Field, LoadingPlaceholder, Stack, useStyles2 } from '@grafana/ui';
-import { css } from '@emotion/css';
-
-import { AlertPercentiles, CheckAlertFormType, CheckFormValues, CheckStatus } from 'types';
-import { CheckAlertsResponse } from 'datasource/responses.types';
-import { getAlertCheckFormValues } from 'components/CheckEditor/transformations/toFormValues.alerts';
-
-import { NewStatusBadge } from '../CheckEditor/FormComponents/CheckStatusInfo';
-import { AlertCard } from './AlertCard';
-
-const defaultPercentileOptions: AlertPercentiles[] = [
-  AlertPercentiles.p50,
-  AlertPercentiles.p90,
-  AlertPercentiles.p95,
-  AlertPercentiles.p99,
-];
-
-const PREDEFINED_ALERTS: Array<{
-  type: CheckAlertFormType;
-  description: string;
-  percentileOptions: AlertPercentiles[];
-}> = [
-  {
-    type: CheckAlertFormType.ProbeFailedExecutionsTooHigh,
-    description:
-      'Alert when the percentage of failed probe executions during the time that the alert rule evaluates is higher than the threshold',
-    percentileOptions: [],
-  },
-  {
-    type: CheckAlertFormType.HTTPRequestDurationTooHigh,
-    description: 'Alert when the selected percentile(s) of the HTTP request duration is higher than the threshold',
-    percentileOptions: defaultPercentileOptions,
-  },
-  {
-    type: CheckAlertFormType.HTTPTargetCertificateCloseToExpiring,
-    description: 'Alert when the target certificate is close to expiring',
-    percentileOptions: [],
-  },
-  {
-    type: CheckAlertFormType.PingICMPDurationTooHigh,
-    description: 'Alert when the selected percentile(s) of the ICMP ping duration is higher than the threshold',
-    percentileOptions: defaultPercentileOptions,
-  },
-];
-
-interface AlertsPerCheckInterface {
-  checkAlerts?: CheckAlertsResponse;
-}
-
-export const AlertsPerCheck = ({ checkAlerts }: AlertsPerCheckInterface) => {
-  const styles = useStyles2(getStyles);
-
-  const { getValues, setValue, control } = useFormContext<CheckFormValues>();
-
-  const checkId = getValues('id');
-  const checkType = getValues('checkType');
-
-  const { data: checkAlerts, isLoading, isError } = useListAlertsForCheck(checkId);
-
-  useEffect(() => {
-    if (!checkAlerts) {
-      return;
-    }
-    const formAlerts = getAlertCheckFormValues(checkAlerts);
-    setValue(`alerts`, formAlerts);
-  }, [checkAlerts, setValue]);
-
-  const handleSelectAlert = (type: CheckAlertFormType, forceSelection?: boolean) => {
-    const alerts = getValues(`alerts`);
-    if (!alerts?.[type]) {
-      return;
-    }
-    let newAlerts;
-    if (forceSelection) {
-      newAlerts = { ...alerts, [type]: { ...alerts[type], isSelected: true } };
-    } else {
-      newAlerts = { ...alerts, [type]: { ...alerts[type], isSelected: !alerts[type].isSelected } };
-    }
-
-    setValue(`alerts`, newAlerts);
-  };
-
-  return (
-    <>
-      <div className={styles.marginBottom}>
-        <Stack alignItems={'center'}>
-          <h4>Predefined alerts</h4>
-          <NewStatusBadge status={CheckStatus.EXPERIMENTAL} className={styles.badge} />
-        </Stack>
-
-        <p>
-          You can choose from the following predefined alerts to assign to this check and configure a threshold for
-          each, including setting specific percentile values are available.
-        </p>
-
-        <Field>
-          <Controller
-            control={control}
-            name="alerts"
-            render={() => {
-              return (
-                <ul className={styles.list}>
-                  <li>
-                    {PREDEFINED_ALERTS.map((alert) => {
-                      return <AlertCard key={alert.type} predefinedAlert={alert} onSelect={handleSelectAlert} />;
-                    })}
-                  </li>
-                </ul>
-              );
-            }}
-          />
-        </Field>
-      </div>
-    </>
-  );
-};
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  marginBottom: css({
-    marginBottom: theme.spacing(3),
-  }),
-  link: css({
-    textDecoration: `underline`,
-  }),
-  list: css({
-    display: 'grid',
-    listStyle: 'none',
-  }),
-  badge: css({
-    fontSize: theme.typography.body.fontSize,
-    marginBottom: theme.spacing(1),
-  }),
-});