diff --git a/superset-frontend/spec/fixtures/mockDatasource.js b/superset-frontend/spec/fixtures/mockDatasource.js
index 99183edd51..e434ad73b0 100644
--- a/superset-frontend/spec/fixtures/mockDatasource.js
+++ b/superset-frontend/spec/fixtures/mockDatasource.js
@@ -45,6 +45,8 @@ export default {
         verbose_name: 'sum__num',
         metric_name: 'sum__num',
         description: null,
+        extra:
+          '{"certification":{"details":"foo", "certified_by":"someone"},"warning_markdown":"bar"}',
       },
       {
         expression: 'AVG(birth_names.num)',
diff --git a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
index 2ab5ea296b..39bcfad865 100644
--- a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
+++ b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
@@ -21,6 +21,9 @@ import { shallow } from 'enzyme';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import thunk from 'redux-thunk';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from 'spec/helpers/testing-library';
+
 import { Radio } from 'src/components/Radio';
 
 import Icon from 'src/components/Icon';
@@ -56,6 +59,10 @@ describe('DatasourceEditor', () => {
     inst = wrapper.instance();
   });
 
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
   it('is valid', () => {
     expect(React.isValidElement(el)).toBe(true);
   });
@@ -209,3 +216,21 @@ describe('DatasourceEditor', () => {
     isFeatureEnabledMock.mockRestore();
   });
 });
+
+describe('DatasourceEditor RTL', () => {
+  it('properly renders 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[0]);
+    const certificationDetails = await screen.findByPlaceholderText(
+      /certification details/i,
+    );
+    expect(certificationDetails.value).toEqual('foo');
+    const warningMarkdown = await await screen.findByPlaceholderText(
+      /certified by/i,
+    );
+    expect(warningMarkdown.value).toEqual('someone');
+  });
+});
diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx
index 94d3cd9767..3fb0236439 100644
--- a/superset-frontend/src/datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/datasource/DatasourceEditor.jsx
@@ -936,7 +936,18 @@ class DatasourceEditor extends React.PureComponent {
             </Fieldset>
           </FormContainer>
         }
-        collection={this.state.datasource.metrics}
+        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,
+          };
+        })}
         allowAddItem
         onChange={this.onDatasourcePropChange.bind(this, 'metrics')}
         itemGenerator={() => ({