Alerting: do not overwrite existing alert rule condition (#49920) (#49991)

(cherry picked from commit 82e9f4e7e7)

public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx

@@ -155,7 +155,11 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
               {showStep2 && (
                 <>
                   <QueryStep />
-                  {type === RuleFormType.grafana ? <GrafanaConditionsStep /> : <CloudConditionsStep />}
+                  {type === RuleFormType.grafana ? (
+                    <GrafanaConditionsStep existing={!!existing} />
+                  ) : (
+                    <CloudConditionsStep />
+                  )}
                   <DetailsStep />
                 </>
               )}

public/app/features/alerting/unified/components/rule-editor/ConditionField.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import React, { FC } from 'react';
+import { FormProvider, useForm, UseFormProps } from 'react-hook-form';
+
+import { ExpressionDatasourceUID } from 'app/features/expressions/ExpressionDatasource';
+
+import { RuleFormValues } from '../../types/rule-form';
+
+import { ConditionField } from './ConditionField';
+
+const FormProviderWrapper: FC<UseFormProps> = ({ children, ...props }) => {
+  const methods = useForm({ ...props });
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+describe('ConditionField', () => {
+  it('should render the correct condition when editing existing rule', () => {
+    const existingRule = {
+      name: 'ConditionsTest',
+      condition: 'B',
+      queries: [
+        { refId: 'A' },
+        { refId: 'B', datasourceUid: ExpressionDatasourceUID },
+        { refId: 'C', datasourceUid: ExpressionDatasourceUID },
+      ],
+    } as RuleFormValues;
+
+    const form = (
+      <FormProviderWrapper defaultValues={existingRule}>
+        <ConditionField existing={true} />
+      </FormProviderWrapper>
+    );
+
+    render(form);
+    expect(screen.getByText('B')).toBeInTheDocument();
+  });
+});

public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx

@@ -8,7 +8,11 @@ import { ExpressionDatasourceUID } from 'app/features/expressions/ExpressionData
 
 import { RuleFormValues } from '../../types/rule-form';
 
-export const ConditionField: FC = () => {
+interface Props {
+  existing?: boolean;
+}
+
+export const ConditionField: FC<Props> = ({ existing = false }) => {
   const {
     watch,
     setValue,
@@ -36,10 +40,10 @@ export const ConditionField: FC = () => {
   // automatically use the last expression when new expressions have been added
   useEffect(() => {
     const lastExpression = last(expressions);
-    if (lastExpression) {
+    if (lastExpression && !existing) {
       setValue('condition', lastExpression.refId, { shouldValidate: true });
     }
-  }, [expressions, setValue]);
+  }, [expressions, setValue, existing]);
 
   // reset condition if option no longer exists or if it is unset, but there are options available
   useEffect(() => {

public/app/features/alerting/unified/components/rule-editor/GrafanaConditionsStep.tsx

@@ -46,7 +46,11 @@ const evaluateEveryValidationOptions: RegisterOptions = {
   },
 };
 
-export const GrafanaConditionsStep: FC = () => {
+interface Props {
+  existing?: boolean;
+}
+
+export const GrafanaConditionsStep: FC<Props> = ({ existing = false }) => {
   const styles = useStyles2(getStyles);
   const [showErrorHandling, setShowErrorHandling] = useState(false);
   const {
@@ -59,7 +63,7 @@ export const GrafanaConditionsStep: FC = () => {
 
   return (
     <RuleEditorSection stepNo={3} title="Define alert conditions">
-      <ConditionField />
+      <ConditionField existing={existing} />
       <Field
         label="Evaluate"
         description="Evaluation interval applies to every rule within a group. It can overwrite the interval of an existing alert rule."