From a37fa758a20bc0783cc273adc797f309f1cb7271 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Fri, 9 Sep 2022 14:15:32 +0200
Subject: [PATCH] CloudWatch: Fix display name of metric and namespace (#54860)

* convert value to option

* add unit test

* fix lint issue
---
 .../MetricStatEditor/MetricStatEditor.test.tsx         | 10 ++++++++++
 .../components/MetricStatEditor/MetricStatEditor.tsx   |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.test.tsx
index 724462840e7..5ad6019fc2b 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.test.tsx
@@ -191,4 +191,14 @@ describe('MetricStatEditor', () => {
       ]);
     });
   });
+
+  describe('metric value', () => {
+    it('should be displayed when a custom value is used and its value is not in the select options', async () => {
+      const expected = 'CPUUtilzation';
+      await act(async () => {
+        render(<MetricStatEditor {...props} metricStat={{ ...props.metricStat, metricName: expected }} />);
+      });
+      expect(await screen.findByText(expected)).toBeInTheDocument();
+    });
+  });
 });
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
index 16a49cb0f14..0520f7d600c 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
@@ -61,7 +61,7 @@ export function MetricStatEditor({
           <EditorField label="Namespace" width={26}>
             <Select
               aria-label="Namespace"
-              value={metricStat.namespace}
+              value={metricStat?.namespace && toOption(metricStat.namespace)}
               allowCustomValue
               options={namespaces}
               onChange={({ value: namespace }) => {
@@ -74,7 +74,7 @@ export function MetricStatEditor({
           <EditorField label="Metric name" width={16}>
             <Select
               aria-label="Metric name"
-              value={metricStat.metricName || null}
+              value={metricStat?.metricName && toOption(metricStat.metricName)}
               allowCustomValue
               options={metrics}
               onChange={({ value: metricName }) => {