Alerting: automatically select last expression (#48787) (#48818)

(cherry picked from commit 2d6ab03e4f)

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 (
     <Field