From 26dda75db55c10c554e92af9db07d86136e70037 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Tue, 19 Oct 2021 14:11:31 +0200
Subject: [PATCH] ValueMappings: Fix so that value mappings work in
 stat/gauge/bargauge/piechart (#40612)

---
 .../src/field/fieldDisplay.test.ts            | 43 +++++++++++++++++++
 .../grafana-data/src/field/fieldDisplay.ts    |  5 ++-
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-data/src/field/fieldDisplay.test.ts b/packages/grafana-data/src/field/fieldDisplay.test.ts
index 7d39cd382d8..b36c909dfd2 100644
--- a/packages/grafana-data/src/field/fieldDisplay.test.ts
+++ b/packages/grafana-data/src/field/fieldDisplay.test.ts
@@ -5,6 +5,7 @@ import { ReducerID } from '../transformations/fieldReducer';
 import { MappingType, SpecialValueMatch, ValueMapping } from '../types';
 import { standardFieldConfigEditorRegistry } from './standardFieldConfigEditorRegistry';
 import { createTheme } from '../themes';
+import { getDisplayProcessor } from './displayProcessor';
 
 describe('FieldDisplay', () => {
   beforeAll(() => {
@@ -259,6 +260,48 @@ describe('FieldDisplay', () => {
       expect(result[1].display.text).toEqual('20');
     });
 
+    it('Single other string field with value mappings', () => {
+      const options = createDisplayOptions({
+        reduceOptions: {
+          values: true,
+          calcs: [],
+        },
+        data: [
+          toDataFrame({
+            fields: [
+              {
+                name: 'Name',
+                values: ['A', 'B'],
+                config: {
+                  mappings: [
+                    {
+                      type: MappingType.ValueToText,
+                      options: {
+                        A: { text: 'Yay' },
+                        B: { text: 'Cool' },
+                      },
+                    },
+                  ],
+                },
+              },
+              { name: 'Value', values: [10, 20] },
+            ],
+          }),
+        ],
+      });
+
+      options.data![0].fields[0].display = getDisplayProcessor({
+        field: options.data![0].fields[0],
+        theme: createTheme(),
+      });
+
+      const result = getFieldDisplayValues(options);
+      expect(result[0].display.title).toEqual('Yay');
+      expect(result[0].display.text).toEqual('10');
+      expect(result[1].display.title).toEqual('Cool');
+      expect(result[1].display.text).toEqual('20');
+    });
+
     it('With cached display processor', () => {
       const options = createDisplayOptions({
         reduceOptions: {
diff --git a/packages/grafana-data/src/field/fieldDisplay.ts b/packages/grafana-data/src/field/fieldDisplay.ts
index 3641ede023b..c9bf243688a 100644
--- a/packages/grafana-data/src/field/fieldDisplay.ts
+++ b/packages/grafana-data/src/field/fieldDisplay.ts
@@ -265,8 +265,9 @@ function getSmartDisplayNameForRow(
 
     if (otherField.type === FieldType.string) {
       const value = otherField.values.get(rowIndex) ?? '';
-      if (value.length > 0) {
-        parts.push(value);
+      const mappedValue = otherField.display ? otherField.display(value).text : value;
+      if (mappedValue.length > 0) {
+        parts.push(mappedValue);
       }
     } else if (otherField.type === FieldType.number) {
       otherNumericFields++;