Alerting: Fix removing reducer when inital value is instant (#97054)

* Fix removing reducer when inital value is instant

* use ID to allow clicking label to toggle the switch

---------

Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>

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

@@ -37,6 +37,7 @@ export const RuleEditorSection = ({
             {switchMode && (
               <Text variant="bodySmall">
                 <InlineSwitch
+                  id="query-and-expressions-advanced-switch"
                   data-testid={
                     switchMode.isAdvancedMode
                       ? 'query-and-expressions-advanced-options'

public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx

@@ -140,6 +140,7 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
   };
 
   const [{ queries }, dispatch] = useReducer(queriesAndExpressionsReducer, initialState);
+  const isOptimizeReducerEnabled = config.featureToggles.alertingUIOptimizeReducer ?? false;
 
   // data queries only
   const dataQueries = useMemo(() => {
@@ -151,6 +152,15 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
     return queries.filter((query) => isExpressionQueryInAlert(query));
   }, [queries]);
 
+  useEffect(() => {
+    // we only remove or add the reducer(optimize reducer) expression when creating a new alert.
+    // When editing an alert, we assume the user wants to manually adjust expressions and queries for more control and customization.
+
+    if (!editingExistingRule && isOptimizeReducerEnabled) {
+      dispatch(optimizeReduceExpression({ updatedQueries: dataQueries, expressionQueries }));
+    }
+  }, [dataQueries, expressionQueries, editingExistingRule, isOptimizeReducerEnabled]);
+
   const [type, condition, dataSourceName, editorSettings] = watch([
     'type',
     'condition',
@@ -265,7 +275,6 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
   );
 
   const updateExpressionAndDatasource = useSetExpressionAndDataSource();
-  const isOptimizeReducerEnabled = config.featureToggles.alertingUIOptimizeReducer ?? false;
 
   const onChangeQueries = useCallback(
     (updatedQueries: AlertQuery[]) => {
@@ -279,12 +288,6 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
       setValue('queries', [...updatedQueries, ...expressionQueries], { shouldValidate: false });
       updateExpressionAndDatasource(updatedQueries);
 
-      // we only remove or add the reducer(optimize reducer) expression when creating a new alert.
-      // When editing an alert, we assume the user wants to manually adjust expressions and queries for more control and customization.
-      if (!editingExistingRule && isOptimizeReducerEnabled) {
-        dispatch(optimizeReduceExpression({ updatedQueries, expressionQueries }));
-      }
-
       dispatch(setDataQueries(updatedQueries));
       dispatch(updateExpressionTimeRange());
 
@@ -294,7 +297,7 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
         dispatch(rewireExpressions({ oldRefId, newRefId }));
       }
     },
-    [queries, updateExpressionAndDatasource, getValues, setValue, editingExistingRule, isOptimizeReducerEnabled]
+    [queries, updateExpressionAndDatasource, getValues, setValue]
   );
 
   const onChangeRecordingRulesQueries = useCallback(