Rename CertifiedIcon to CertifiedBadge (#17715)

superset-frontend/src/components/CertifiedBadge/CertifiedBadge.stories.tsx

@@ -17,14 +17,14 @@
  * under the License.
  */
 import React from 'react';
-import CertifiedIcon, { CertifiedIconProps } from '.';
+import CertifiedBadge, { CertifiedBadgeProps } from '.';
 
 export default {
-  title: 'CertifiedIconWithTooltip',
+  title: 'CertifiedBadgeWithTooltip',
 };
 
-export const InteractiveIcon = (args: CertifiedIconProps) => (
+export const InteractiveIcon = (args: CertifiedBadgeProps) => (
-  <CertifiedIcon {...args} />
+  <CertifiedBadge {...args} />
 );
 
 InteractiveIcon.args = {

superset-frontend/src/components/CertifiedBadge/CertifiedBadge.test.tsx

@@ -19,29 +19,29 @@
 import React from 'react';
 import { render, screen } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
-import CertifiedIcon from 'src/components/CertifiedIcon';
+import CertifiedBadge from 'src/components/CertifiedBadge';
 
 test('renders with default props', () => {
-  render(<CertifiedIcon />);
+  render(<CertifiedBadge />);
   expect(screen.getByRole('img')).toBeInTheDocument();
 });
 
 test('renders a tooltip when hovered', async () => {
-  render(<CertifiedIcon />);
+  render(<CertifiedBadge />);
   userEvent.hover(screen.getByRole('img'));
   expect(await screen.findByRole('tooltip')).toBeInTheDocument();
 });
 
 test('renders with certified by', async () => {
   const certifiedBy = 'Trusted Authority';
-  render(<CertifiedIcon certifiedBy={certifiedBy} />);
+  render(<CertifiedBadge certifiedBy={certifiedBy} />);
   userEvent.hover(screen.getByRole('img'));
   expect(await screen.findByRole('tooltip')).toHaveTextContent(certifiedBy);
 });
 
 test('renders with details', async () => {
   const details = 'All requirements have been met.';
-  render(<CertifiedIcon details={details} />);
+  render(<CertifiedBadge details={details} />);
   userEvent.hover(screen.getByRole('img'));
   expect(await screen.findByRole('tooltip')).toHaveTextContent(details);
 });

superset-frontend/src/components/CertifiedBadge/index.tsx

@@ -21,17 +21,17 @@ import { t, supersetTheme } from '@superset-ui/core';
 import Icons, { IconType } from 'src/components/Icons';
 import { Tooltip } from 'src/components/Tooltip';
 
-export interface CertifiedIconProps {
+export interface CertifiedBadgeProps {
   certifiedBy?: string;
   details?: string;
   size?: IconType['iconSize'];
 }
 
-function CertifiedIcon({
+function CertifiedBadge({
   certifiedBy,
   details,
   size = 'l',
-}: CertifiedIconProps) {
+}: CertifiedBadgeProps) {
   return (
     <Tooltip
       id="certified-details-tooltip"
@@ -54,4 +54,4 @@ function CertifiedIcon({
   );
 }
 
-export default CertifiedIcon;
+export default CertifiedBadge;

superset-frontend/src/components/Datasource/DatasourceEditor.jsx

@@ -30,7 +30,7 @@ import { Select } from 'src/components';
 import { FormLabel } from 'src/components/Form';
 import Button from 'src/components/Button';
 import Tabs from 'src/components/Tabs';
-import CertifiedIcon from 'src/components/CertifiedIcon';
+import CertifiedBadge from 'src/components/CertifiedBadge';
 import WarningIconWithTooltip from 'src/components/WarningIconWithTooltip';
 import DatabaseSelector from 'src/components/DatabaseSelector';
 import Label from 'src/components/Label';
@@ -292,7 +292,7 @@ function ColumnCollectionTable({
           editableColumnName ? (
             <StyledLabelWrapper>
               {record.is_certified && (
-                <CertifiedIcon
+                <CertifiedBadge
                   certifiedBy={record.certified_by}
                   details={record.certification_details}
                 />
@@ -302,7 +302,7 @@ function ColumnCollectionTable({
           ) : (
             <StyledLabelWrapper>
               {record.is_certified && (
-                <CertifiedIcon
+                <CertifiedBadge
                   certifiedBy={record.certified_by}
                   details={record.certification_details}
                 />
@@ -1113,7 +1113,7 @@ class DatasourceEditor extends React.PureComponent {
           metric_name: (v, onChange, _, record) => (
             <FlexRowContainer>
               {record.is_certified && (
-                <CertifiedIcon
+                <CertifiedBadge
                   certifiedBy={record.certified_by}
                   details={record.certification_details}
                 />

superset-frontend/src/components/EditableTitle/index.tsx

@@ -20,7 +20,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import cx from 'classnames';
 import { styled, t } from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
-import CertifiedIcon from '../CertifiedIcon';
+import CertifiedBadge from '../CertifiedBadge';
 
 export interface EditableTitleProps {
   canEdit?: boolean;
@@ -39,7 +39,7 @@ export interface EditableTitleProps {
   certificationDetails?: string;
 }
 
-const StyledCertifiedIcon = styled(CertifiedIcon)`
+const StyledCertifiedBadge = styled(CertifiedBadge)`
   vertical-align: middle;
 `;
 
@@ -233,7 +233,7 @@ export default function EditableTitle({
     >
       {certifiedBy && (
         <>
-          <StyledCertifiedIcon
+          <StyledCertifiedBadge
             certifiedBy={certifiedBy}
             details={certificationDetails}
           />{' '}

superset-frontend/src/components/ListViewCard/index.tsx

@@ -21,7 +21,7 @@ import { styled, useTheme } from '@superset-ui/core';
 import { AntdCard, Skeleton, ThinSkeleton } from 'src/common/components';
 import { Tooltip } from 'src/components/Tooltip';
 import ImageLoader, { BackgroundPosition } from './ImageLoader';
-import CertifiedIcon from '../CertifiedIcon';
+import CertifiedBadge from '../CertifiedBadge';
 
 const ActionsWrapper = styled.div`
   width: 64px;
@@ -257,7 +257,7 @@ function ListViewCard({
                   <Link to={url!}>
                     {certifiedBy && (
                       <>
-                        <CertifiedIcon
+                        <CertifiedBadge
                           certifiedBy={certifiedBy}
                           details={certificationDetails}
                         />{' '}

superset-frontend/src/components/TableSelector/index.tsx

@@ -31,7 +31,7 @@ import DatabaseSelector, {
   DatabaseObject,
 } from 'src/components/DatabaseSelector';
 import RefreshLabel from 'src/components/RefreshLabel';
-import CertifiedIcon from 'src/components/CertifiedIcon';
+import CertifiedBadge from 'src/components/CertifiedBadge';
 import WarningIconWithTooltip from 'src/components/WarningIconWithTooltip';
 
 const TableSelectorWrapper = styled.div`
@@ -123,7 +123,7 @@ const TableOption = ({ table }: { table: Table }) => {
         <Icons.Table iconSize="m" />
       )}
       {extra?.certification && (
-        <CertifiedIcon
+        <CertifiedBadge
           certifiedBy={extra.certification.certified_by}
           details={extra.certification.details}
           size="l"

superset-frontend/src/explore/components/ExploreChartHeader/index.jsx

@@ -44,7 +44,7 @@ import Timer from 'src/components/Timer';
 import CachedLabel from 'src/components/CachedLabel';
 import PropertiesModal from 'src/explore/components/PropertiesModal';
 import { sliceUpdated } from 'src/explore/actions/exploreActions';
-import CertifiedIcon from 'src/components/CertifiedIcon';
+import CertifiedBadge from 'src/components/CertifiedBadge';
 import ExploreActionButtons from '../ExploreActionButtons';
 import RowCountLabel from '../RowCountLabel';
 
@@ -269,7 +269,7 @@ export class ExploreChartHeader extends React.PureComponent {
         <div className="title-panel">
           {slice?.certified_by && (
             <>
-              <CertifiedIcon
+              <CertifiedBadge
                 certifiedBy={slice.certified_by}
                 details={slice.certification_details}
               />{' '}

superset-frontend/src/views/CRUD/chart/ChartList.tsx

@@ -58,7 +58,7 @@ import { Tooltip } from 'src/components/Tooltip';
 import Icons from 'src/components/Icons';
 import { nativeFilterGate } from 'src/dashboard/components/nativeFilters/utils';
 import setupPlugins from 'src/setup/setupPlugins';
-import CertifiedIcon from 'src/components/CertifiedIcon';
+import CertifiedBadge from 'src/components/CertifiedBadge';
 import ChartCard from './ChartCard';
 
 const PAGE_SIZE = 25;
@@ -249,7 +249,7 @@ function ChartList(props: ChartListProps) {
           <a href={url} data-test={`${sliceName}-list-chart-title`}>
             {certifiedBy && (
               <>
-                <CertifiedIcon
+                <CertifiedBadge
                   certifiedBy={certifiedBy}
                   details={certificationDetails}
                 />{' '}

superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx

@@ -49,7 +49,7 @@ import ImportModelsModal from 'src/components/ImportModal/index';
 import OmniContainer from 'src/components/OmniContainer';
 
 import Dashboard from 'src/dashboard/containers/Dashboard';
-import CertifiedIcon from 'src/components/CertifiedIcon';
+import CertifiedBadge from 'src/components/CertifiedBadge';
 import DashboardCard from './DashboardCard';
 import { DashboardStatus } from './types';
 
@@ -266,7 +266,7 @@ function DashboardList(props: DashboardListProps) {
           <Link to={url}>
             {certifiedBy && (
               <>
-                <CertifiedIcon
+                <CertifiedBadge
                   certifiedBy={certifiedBy}
                   details={certificationDetails}
                 />{' '}

superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx

@@ -51,7 +51,7 @@ import withToasts from 'src/components/MessageToasts/withToasts';
 import { Tooltip } from 'src/components/Tooltip';
 import Icons from 'src/components/Icons';
 import FacePile from 'src/components/FacePile';
-import CertifiedIcon from 'src/components/CertifiedIcon';
+import CertifiedBadge from 'src/components/CertifiedBadge';
 import InfoTooltip from 'src/components/InfoTooltip';
 import ImportModelsModal from 'src/components/ImportModal/index';
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
@@ -254,7 +254,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
             return (
               <FlexRowContainer>
                 {parsedExtra?.certification && (
-                  <CertifiedIcon
+                  <CertifiedBadge
                     certifiedBy={parsedExtra.certification.certified_by}
                     details={parsedExtra.certification.details}
                     size="l"