From 3c17c609c98a9702dcb5e69bee7cc925140e98f8 Mon Sep 17 00:00:00 2001
From: smileydev <47900232+prosdev0107@users.noreply.github.com>
Date: Sun, 20 Feb 2022 19:27:46 -0500
Subject: [PATCH] fix(altered-modal): displayed the metric value in altered
 modal correctly (#18813)

Co-authored-by: Evan Rusackas <evan@preset.io>
---
 .../AlteredSliceTag/AlteredSliceTag.test.jsx         | 12 ++++++++++++
 .../AlteredSliceTag/AlteredSliceTagMocks.js          |  8 ++++++++
 .../src/components/AlteredSliceTag/index.jsx         |  4 ++++
 3 files changed, 24 insertions(+)

diff --git a/superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.test.jsx b/superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.test.jsx
index d4b19be02..6f5890018 100644
--- a/superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.test.jsx
+++ b/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"}';
diff --git a/superset-frontend/src/components/AlteredSliceTag/AlteredSliceTagMocks.js b/superset-frontend/src/components/AlteredSliceTag/AlteredSliceTagMocks.js
index a356a3db8..90b243f99 100644
--- a/superset-frontend/src/components/AlteredSliceTag/AlteredSliceTagMocks.js
+++ b/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,
+            },
+          },
         ],
       ],
     },
diff --git a/superset-frontend/src/components/AlteredSliceTag/index.jsx b/superset-frontend/src/components/AlteredSliceTag/index.jsx
index 4601992a2..051412fcd 100644
--- a/superset-frontend/src/components/AlteredSliceTag/index.jsx
+++ b/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';
     }