diff --git a/superset-frontend/src/components/CertifiedIcon/CertifiedIcon.stories.tsx b/superset-frontend/src/components/CertifiedIcon/CertifiedIcon.stories.tsx
new file mode 100644
index 0000000000000..0bafe583a67df
--- /dev/null
+++ b/superset-frontend/src/components/CertifiedIcon/CertifiedIcon.stories.tsx
@@ -0,0 +1,42 @@
+/**
+ * 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 CertifiedIcon, { CertifiedIconProps } from '.';
+
+export default {
+ title: 'CertifiedIconWithTooltip',
+};
+
+export const InteractiveIcon = (args: CertifiedIconProps) => (
+
+);
+
+InteractiveIcon.args = {
+ certifiedBy: 'Trusted Authority',
+ details: 'All requirements have been met.',
+ size: 30,
+};
+
+InteractiveIcon.story = {
+ parameters: {
+ knobs: {
+ disable: true,
+ },
+ },
+};
diff --git a/superset-frontend/src/components/CertifiedIcon/CertifiedIcon.test.tsx b/superset-frontend/src/components/CertifiedIcon/CertifiedIcon.test.tsx
new file mode 100644
index 0000000000000..3bdb36d80c1bc
--- /dev/null
+++ b/superset-frontend/src/components/CertifiedIcon/CertifiedIcon.test.tsx
@@ -0,0 +1,47 @@
+/**
+ * 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 { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import CertifiedIcon from 'src/components/CertifiedIcon';
+
+test('renders with default props', () => {
+ render();
+ expect(screen.getByRole('img')).toBeInTheDocument();
+});
+
+test('renders a tooltip when hovered', async () => {
+ render();
+ userEvent.hover(screen.getByRole('img'));
+ expect(await screen.findByRole('tooltip')).toBeInTheDocument();
+});
+
+test('renders with certified by', async () => {
+ const certifiedBy = 'Trusted Authority';
+ render();
+ 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();
+ userEvent.hover(screen.getByRole('img'));
+ expect(await screen.findByRole('tooltip')).toHaveTextContent(details);
+});
diff --git a/superset-frontend/src/components/CertifiedIconWithTooltip.tsx b/superset-frontend/src/components/CertifiedIcon/index.tsx
similarity index 90%
rename from superset-frontend/src/components/CertifiedIconWithTooltip.tsx
rename to superset-frontend/src/components/CertifiedIcon/index.tsx
index 2a542511653da..5f35a889d6176 100644
--- a/superset-frontend/src/components/CertifiedIconWithTooltip.tsx
+++ b/superset-frontend/src/components/CertifiedIcon/index.tsx
@@ -21,17 +21,17 @@ import { t, supersetTheme } from '@superset-ui/core';
import Icon from 'src/components/Icon';
import { Tooltip } from 'src/common/components/Tooltip';
-interface CertifiedIconWithTooltipProps {
+export interface CertifiedIconProps {
certifiedBy?: string;
details?: string;
size?: number;
}
-function CertifiedIconWithTooltip({
+function CertifiedIcon({
certifiedBy,
details,
size = 24,
-}: CertifiedIconWithTooltipProps) {
+}: CertifiedIconProps) {
return (
+
);
};
diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
index c89ee693160f7..09f5a3a48dd41 100644
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@@ -29,7 +29,7 @@ import FormLabel from 'src/components/FormLabel';
import DatabaseSelector from 'src/components/DatabaseSelector';
import RefreshLabel from 'src/components/RefreshLabel';
-import CertifiedIconWithTooltip from 'src/components/CertifiedIconWithTooltip';
+import CertifiedIcon from 'src/components/CertifiedIcon';
import WarningIconWithTooltip from 'src/components/WarningIconWithTooltip';
const FieldTitle = styled.p`
@@ -261,7 +261,7 @@ const TableSelector: FunctionComponent = ({
{option.extra?.certification && (
- (
{record.is_certified && (
-
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx
index 4b22927af2dff..454816741b90c 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx
@@ -44,7 +44,7 @@ import withToasts from 'src/messageToasts/enhancers/withToasts';
import { Tooltip } from 'src/common/components/Tooltip';
import Icons from 'src/components/Icons';
import FacePile from 'src/components/FacePile';
-import CertifiedIconWithTooltip from 'src/components/CertifiedIconWithTooltip';
+import CertifiedIcon from 'src/components/CertifiedIcon';
import ImportModelsModal from 'src/components/ImportModal/index';
import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
import WarningIconWithTooltip from 'src/components/WarningIconWithTooltip';
@@ -239,7 +239,7 @@ const DatasetList: FunctionComponent = ({
return (
{parsedExtra?.certification && (
-