diff --git a/public/app/features/alerting/unified/components/rule-editor/ConditionField.test.tsx b/public/app/features/alerting/unified/components/rule-editor/ConditionField.test.tsx new file mode 100644 index 00000000000..440d155f385 --- /dev/null +++ b/public/app/features/alerting/unified/components/rule-editor/ConditionField.test.tsx @@ -0,0 +1,39 @@ +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 = ({ children, ...props }) => { + const methods = useForm({ ...props }); + return {children}; +}; + +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 = ( + + + + ); + + render(form); + expect(screen.getByLabelText(/^A/)).not.toBeChecked(); + expect(screen.getByLabelText(/^B/)).toBeChecked(); + expect(screen.getByLabelText(/^C/)).not.toBeChecked(); + }); +}); diff --git a/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx b/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx index 5ec13955b0e..a07c9ba8285 100644 --- a/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx @@ -9,7 +9,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 = ({ existing = false }) => { const { watch, setValue, @@ -37,10 +41,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(() => { diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndAlertConditionStep.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndAlertConditionStep.tsx index 4e61cda9024..c4031f8762d 100644 --- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndAlertConditionStep.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndAlertConditionStep.tsx @@ -22,7 +22,7 @@ export const QueryAndAlertConditionStep: FC = ({ editingExistingRule }) = {type && } - {isGrafanaManagedType && } + {isGrafanaManagedType && } ); };