Expressions: Add notification for Strict Mode behavior in Reduce component (#97224)

* Add strict mode notification to Reduce component with i18n support

* Added translation keys

public/app/features/expressions/components/Reduce.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
+import { InlineField, InlineFieldRow, Input, Select, Alert } from '@grafana/ui';
+import { Trans, t } from 'app/core/internationalization';
 
 import { ExpressionQuery, ExpressionQuerySettings, ReducerMode, reducerModes, reducerTypes } from '../types';
 
@@ -30,6 +31,10 @@ export const Reduce = ({ labelWidth = 'auto', onChange, refIds, query }: Props)
   const onModeChanged = (value: SelectableValue<ReducerMode>) => {
     let newSettings: ExpressionQuerySettings;
     switch (value.value) {
+      case ReducerMode.Strict:
+        newSettings = { mode: ReducerMode.Strict };
+        break;
+
       case ReducerMode.ReplaceNonNumbers:
         let replaceWithNumber = 0;
         if (query.settings?.mode === ReducerMode.ReplaceNonNumbers) {
@@ -40,6 +45,7 @@ export const Reduce = ({ labelWidth = 'auto', onChange, refIds, query }: Props)
           replaceWithValue: replaceWithNumber,
         };
         break;
+
       default:
         newSettings = {
           mode: value.value,
@@ -66,8 +72,30 @@ export const Reduce = ({ labelWidth = 'auto', onChange, refIds, query }: Props)
     );
   };
 
+  const strictModeNotification = () => {
+    if (mode !== ReducerMode.Strict) {
+      return null;
+    }
+    return (
+      <Alert title={t('reduce.strictMode.title', 'Strict Mode Behaviour')} severity="info">
+        <Trans i18nKey="reduce.strictMode.description">
+          When <code>Reduce Strict mode</code> is used, the <code>fill(null)</code> function (InfluxQL) will result in{' '}
+          <code>NaN</code>.{' '}
+          <a
+            href="https://grafana.com/docs/grafana/latest/panels-visualizations/query-transform-data/expression-queries/#sum"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            See the documentation for more details.
+          </a>
+        </Trans>
+      </Alert>
+    );
+  };
+
   return (
     <>
+      {strictModeNotification()}
       <InlineFieldRow>
         <InlineField label="Input" labelWidth={labelWidth}>
           <Select onChange={onRefIdChange} options={refIds} value={query.expression} width={'auto'} />

public/locales/en-US/grafana.json

@@ -2781,6 +2781,12 @@
       "placeholder": "Search for dashboards"
     }
   },
+  "reduce": {
+    "strictMode": {
+      "description": "When <1>Reduce Strict mode</1> is used, the <3>fill(null)</3> function (InfluxQL) will result in <6>NaN</6>. <9>See the documentation for more details.</9>",
+      "title": "Strict Mode Behaviour"
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Auto refresh turned off. Choose refresh time interval",

public/locales/pseudo-LOCALE/grafana.json

@@ -2781,6 +2781,12 @@
       "placeholder": "Ŝęäřčĥ ƒőř đäşĥþőäřđş"
     }
   },
+  "reduce": {
+    "strictMode": {
+      "description": "Ŵĥęʼn <1>Ŗęđūčę Ŝŧřįčŧ mőđę</1> įş ūşęđ, ŧĥę <3>ƒįľľ(ʼnūľľ)</3> ƒūʼnčŧįőʼn (ĨʼnƒľūχQĿ) ŵįľľ řęşūľŧ įʼn <6>ŃäŃ</6>. <9>Ŝęę ŧĥę đőčūmęʼnŧäŧįőʼn ƒőř mőřę đęŧäįľş.</9>",
+      "title": "Ŝŧřįčŧ Mőđę ßęĥävįőūř"
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Åūŧő řęƒřęşĥ ŧūřʼnęđ őƒƒ. Cĥőőşę řęƒřęşĥ ŧįmę įʼnŧęřväľ",