fix(altered-modal): displayed the metric value in altered modal correctly (#18813)

Co-authored-by: Evan Rusackas <evan@preset.io>

superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.test.jsx

@@ -218,6 +218,18 @@ describe('AlteredSliceTag', () => {
       ).toBe(expected);
     });
 
+    it('returns Metrics if the field type is metrics', () => {
+      const value = [
+        {
+          label: 'SUM(Sales)',
+        },
+      ];
+      const expected = 'SUM(Sales)';
+      expect(
+        wrapper.instance().formatValue(value, 'metrics', controlsMap),
+      ).toBe(expected);
+    });
+
     it('stringifies objects', () => {
       const value = { 1: 2, alpha: 'bravo' };
       const expected = '{"1":2,"alpha":"bravo"}';

superset-frontend/src/components/AlteredSliceTag/AlteredSliceTagMocks.js

@@ -159,6 +159,14 @@ export const fakePluginControls = {
               default: null,
             },
           },
+          {
+            name: 'metrics',
+            config: {
+              type: 'MetricsControl',
+              label: 'Fake Metrics',
+              default: null,
+            },
+          },
         ],
       ],
     },

superset-frontend/src/components/AlteredSliceTag/index.jsx

@@ -134,6 +134,10 @@ export default class AlteredSliceTag extends React.Component {
     if (controlsMap[key]?.type === 'CollectionControl') {
       return value.map(v => safeStringify(v)).join(', ');
     }
+    if (controlsMap[key]?.type === 'MetricsControl' && Array.isArray(value)) {
+      const formattedValue = value.map(v => (v.label ? v.label : v));
+      return formattedValue.length ? formattedValue.join(', ') : '[]';
+    }
     if (typeof value === 'boolean') {
       return value ? 'true' : 'false';
     }