ValueMappings: Fix so that value mappings work in stat/gauge/bargauge/piechart (#40612) (#40623)

(cherry picked from commit 26dda75db5)

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

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: {

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++;