ValueMappings: Value mapping and specifying only color should not affect value formatting (decimals, unit, etc) (#39315) (#39398)

(cherry picked from commit a899e9be10)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

packages/grafana-data/src/field/displayProcessor.test.ts

@@ -157,6 +157,18 @@ describe('Format value', () => {
     expect(result.text).toEqual('elva');
   });
 
+  it('should return mapped color but use value format if no value mapping text specified', () => {
+    const valueMappings: ValueMapping[] = [
+      { type: MappingType.RangeToText, options: { from: 1, to: 9, result: { color: '#FFF' } } },
+    ];
+
+    const instance = getDisplayProcessorFromConfig({ decimals: 2, mappings: valueMappings });
+    const result = instance(5);
+
+    expect(result.color).toEqual('#FFF');
+    expect(result.text).toEqual('5.00');
+  });
+
   it('should replace a matching regex', () => {
     const valueMappings: ValueMapping[] = [
       { type: MappingType.RegexToText, options: { pattern: '([^.]*).example.com', result: { text: '$1' } } },

packages/grafana-data/src/field/displayProcessor.ts

@@ -79,14 +79,12 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
       value = dateTime(value).valueOf();
     }
 
-    let text = toString(value);
     let numeric = isStringUnit ? NaN : anyToNumber(value);
-    let prefix: string | undefined = undefined;
-    let suffix: string | undefined = undefined;
-    let color: string | undefined = undefined;
-    let percent: number | undefined = undefined;
-
-    let shouldFormat = true;
+    let text: string | undefined;
+    let prefix: string | undefined;
+    let suffix: string | undefined;
+    let color: string | undefined;
+    let percent: number | undefined;
 
     if (mappings && mappings.length > 0) {
       const mappingResult = getValueMappingResult(mappings, value);
@@ -99,13 +97,11 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
         if (mappingResult.color != null) {
           color = options.theme.visualization.getColorByName(mappingResult.color);
         }
-
-        shouldFormat = false;
       }
     }
 
     if (!isNaN(numeric)) {
-      if (shouldFormat && !isBoolean(value)) {
+      if (text == null && !isBoolean(value)) {
         const v = formatFunc(numeric, config.decimals, null, options.timeZone, showMs);
         text = v.text;
         suffix = v.suffix;
@@ -113,18 +109,21 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
       }
 
       // Return the value along with scale info
-      if (color === undefined) {
+      if (color == null) {
         const scaleResult = scaleFunc(numeric);
         color = scaleResult.color;
         percent = scaleResult.percent;
       }
     }
 
-    if (!text) {
-      if (config.noValue) {
-        text = config.noValue;
-      } else {
-        text = ''; // No data?
+    if (text == null) {
+      text = toString(value);
+      if (!text) {
+        if (config.noValue) {
+          text = config.noValue;
+        } else {
+          text = ''; // No data?
+        }
       }
     }