fix(explore): Certificate icon not displaying for certified metrics (#13133)

* Fix certificate icon not displaying for certified metrics

* Remove redundant function

* Fix grammar mistake

superset-frontend/spec/javascripts/explore/components/OptionControls_spec.tsx

@@ -0,0 +1,69 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { ThemeProvider, supersetTheme } from '@superset-ui/core';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { render, screen } from 'spec/helpers/testing-library';
+import { OptionControlLabel } from 'src/explore/components/OptionControls';
+import { noOp } from 'src/utils/common';
+
+const setup = (overrides?: Record<string, any>) => {
+  const props = {
+    label: <span>Test label</span>,
+    onRemove: noOp,
+    onMoveLabel: noOp,
+    onDropLabel: noOp,
+    type: 'test',
+    index: 0,
+    ...overrides,
+  };
+  return render(
+    <ThemeProvider theme={supersetTheme}>
+      <DndProvider backend={HTML5Backend}>
+        <OptionControlLabel {...props} />
+      </DndProvider>
+    </ThemeProvider>,
+  );
+};
+
+describe('OptionControls', () => {
+  it('should render', () => {
+    const { container } = setup();
+    expect(container).toBeVisible();
+  });
+
+  it('should display a label', () => {
+    setup();
+    expect(screen.getByText('Test label')).toBeTruthy();
+  });
+
+  it('should display a certification icon if saved metric is certified', () => {
+    const { container } = setup({
+      savedMetric: {
+        metric_name: 'test_metric',
+        is_certified: true,
+      },
+    });
+    screen.getByText('test_metric');
+    expect(screen.queryByText('Test label')).toBeFalsy();
+
+    expect(container.querySelector('.metric-option > svg')).toBeInTheDocument();
+  });
+});

superset-frontend/src/explore/components/OptionControls.tsx

@@ -20,7 +20,7 @@ import React, { useRef } from 'react';
 import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
 import { styled, t, useTheme } from '@superset-ui/core';
 import {
-  ColumnOption,
+  MetricOption,
   InfoTooltipWithTrigger,
 } from '@superset-ui/chart-controls';
 import { Tooltip } from 'src/common/components/Tooltip';
@@ -48,7 +48,7 @@ const OptionControlContainer = styled.div<{
 `;
 
 const Label = styled.div`
-  display: inline-block;
+  display: flex;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -218,12 +218,7 @@ export const OptionControlLabel = ({
 
   const getLabelContent = () => {
     if (savedMetric?.metric_name) {
-      // add column_name to fix typescript error
-      const column = { ...savedMetric, column_name: '' };
-      if (!column.verbose_name) {
-        column.verbose_name = column.metric_name;
-      }
-      return <ColumnOption column={column} />;
+      return <MetricOption metric={savedMetric} />;
     }
     return <Tooltip title={label}>{label}</Tooltip>;
   };

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover.jsx

@@ -24,7 +24,7 @@ import Tabs from 'src/common/components/Tabs';
 import Button from 'src/components/Button';
 import { Select } from 'src/common/components/Select';
 import { styled, t } from '@superset-ui/core';
-import { ColumnOption } from '@superset-ui/chart-controls';
+import { ColumnOption, MetricOption } from '@superset-ui/chart-controls';
 
 import FormLabel from 'src/components/FormLabel';
 import { SQLEditor } from 'src/components/AsyncAceEditor';
@@ -370,7 +370,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
                       }
                       key={savedMetric.id}
                     >
-                      {this.renderColumnOption(savedMetric)}
+                      <MetricOption metric={savedMetric} showType />
                     </Select.Option>
                   ))}
               </Select>