From 0c470feaefe354f9bed19eab43625f77a62022ae Mon Sep 17 00:00:00 2001
From: Elizabeth Thompson <eschutho@gmail.com>
Date: Wed, 9 Jun 2021 14:54:25 -0700
Subject: [PATCH] move metric parsing to state instantiation (#15069)

---
 .../datasource/DatasourceEditor_spec.jsx      | 17 +++++++++++
 .../src/datasource/DatasourceEditor.jsx       | 29 ++++++++++---------
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
index 39bcfad865..96d23eb63d 100644
--- a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
+++ b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
@@ -233,4 +233,21 @@ describe('DatasourceEditor RTL', () => {
     );
     expect(warningMarkdown.value).toEqual('someone');
   });
+  it('properly updates the metric information', async () => {
+    render(<DatasourceEditor {...props} />, {
+      useRedux: true,
+    });
+    const metricButton = screen.getByTestId('collection-tab-Metrics');
+    userEvent.click(metricButton);
+    const expandToggle = await screen.findAllByLabelText(/toggle expand/i);
+    userEvent.click(expandToggle[1]);
+    const certifiedBy = await screen.findByPlaceholderText(/certified by/i);
+    userEvent.type(certifiedBy, 'I am typing a new name');
+    const certificationDetails = await screen.findByPlaceholderText(
+      /certification details/i,
+    );
+    expect(certifiedBy.value).toEqual('I am typing a new name');
+    userEvent.type(certificationDetails, 'I am typing something new');
+    expect(certificationDetails.value).toEqual('I am typing something new');
+  });
 });
diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx
index 3fb0236439..d4767c4214 100644
--- a/superset-frontend/src/datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/datasource/DatasourceEditor.jsx
@@ -307,7 +307,21 @@ class DatasourceEditor extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      datasource: props.datasource,
+      datasource: {
+        ...props.datasource,
+        metrics: props.datasource.metrics?.map(metric => {
+          const {
+            certification: { details, certified_by: certifiedBy } = {},
+            warning_markdown: warningMarkdown,
+          } = JSON.parse(metric.extra || '{}') || {};
+          return {
+            ...metric,
+            certification_details: details || '',
+            warning_markdown: warningMarkdown || '',
+            certified_by: certifiedBy,
+          };
+        }),
+      },
       errors: [],
       isDruid:
         props.datasource.type === 'druid' ||
@@ -936,18 +950,7 @@ class DatasourceEditor extends React.PureComponent {
             </Fieldset>
           </FormContainer>
         }
-        collection={this.state.datasource.metrics?.map(metric => {
-          const {
-            certification: { details, certified_by: certifiedBy } = {},
-            warning_markdown: warningMarkdown,
-          } = JSON.parse(metric.extra || '{}') || {};
-          return {
-            ...metric,
-            certification_details: details || '',
-            warning_markdown: warningMarkdown || '',
-            certified_by: certifiedBy,
-          };
-        })}
+        collection={this.state.datasource.metrics}
         allowAddItem
         onChange={this.onDatasourcePropChange.bind(this, 'metrics')}
         itemGenerator={() => ({