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 && ( -