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 9c45e41bf51..fdd00f80fec 100644 --- a/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx @@ -1,3 +1,4 @@ +import { last } from 'lodash'; import React, { FC, useEffect, useMemo } from 'react'; import { useFormContext } from 'react-hook-form'; @@ -28,15 +29,29 @@ export const ConditionField: FC = () => { [queries] ); + const expressions = useMemo(() => { + return queries.filter((query) => query.datasourceUid === ExpressionDatasourceUID); + }, [queries]); + + // automatically use the last expression when new expressions have been added + useEffect(() => { + const lastExpression = last(expressions); + if (lastExpression) { + setValue('condition', lastExpression.refId, { shouldValidate: true }); + } + }, [expressions, setValue]); + // reset condition if option no longer exists or if it is unset, but there are options available useEffect(() => { - const expressions = queries.filter((query) => query.datasourceUid === ExpressionDatasourceUID); - if (condition && !options.find(({ value }) => value === condition)) { - setValue('condition', expressions.length ? expressions[expressions.length - 1].refId : null); - } else if (!condition && expressions.length) { - setValue('condition', expressions[expressions.length - 1].refId); + const lastExpression = last(expressions); + const conditionExists = options.find(({ value }) => value === condition); + + if (condition && !conditionExists) { + setValue('condition', lastExpression?.refId ?? null); + } else if (!condition && lastExpression) { + setValue('condition', lastExpression.refId, { shouldValidate: true }); } - }, [condition, options, queries, setValue]); + }, [condition, expressions, options, setValue]); return (