diff --git a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx index cd536a9f80b..6d92b942269 100644 --- a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx @@ -155,7 +155,11 @@ export const AlertRuleForm: FC = ({ existing }) => { {showStep2 && ( <> - {type === RuleFormType.grafana ? : } + {type === RuleFormType.grafana ? ( + + ) : ( + + )} )} 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..7b7871e5760 --- /dev/null +++ b/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 = ({ 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.getByText('B')).toBeInTheDocument(); + }); +}); 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 fdd00f80fec..6f9dd35196f 100644 --- a/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx +++ b/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 = ({ 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(() => { diff --git a/public/app/features/alerting/unified/components/rule-editor/GrafanaConditionsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/GrafanaConditionsStep.tsx index f5cd8533662..da01fbaa778 100644 --- a/public/app/features/alerting/unified/components/rule-editor/GrafanaConditionsStep.tsx +++ b/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 = ({ existing = false }) => { const styles = useStyles2(getStyles); const [showErrorHandling, setShowErrorHandling] = useState(false); const { @@ -59,7 +63,7 @@ export const GrafanaConditionsStep: FC = () => { return ( - +