From bd5ad131b5af1e86186a52ad0c731b83ce0c9dcf Mon Sep 17 00:00:00 2001 From: Cody Leff Date: Fri, 9 Dec 2022 08:26:57 -0700 Subject: [PATCH 01/10] Convert superset-frontend/src/components/Select/utils.tsx --- superset-frontend/src/components/Select/utils.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/superset-frontend/src/components/Select/utils.tsx b/superset-frontend/src/components/Select/utils.tsx index e8199358222b5..67ecb4bde30c1 100644 --- a/superset-frontend/src/components/Select/utils.tsx +++ b/superset-frontend/src/components/Select/utils.tsx @@ -19,7 +19,7 @@ import { ensureIsArray, t } from '@superset-ui/core'; import AntdSelect, { LabeledValue as AntdLabeledValue } from 'antd/lib/select'; import React, { ReactElement, RefObject } from 'react'; -import { DownOutlined, SearchOutlined } from '@ant-design/icons'; +import Icons from 'src/components/Icons'; import { StyledHelperText, StyledLoadingText, StyledSpin } from './styles'; import { LabeledValue, RawValue, SelectOptionsType, V } from './types'; @@ -132,9 +132,9 @@ export const getSuffixIcon = ( return ; } if (showSearch && isDropdownVisible) { - return ; + return ; } - return ; + return ; }; export const dropDownRenderHelper = ( From f65eeabecb7ed020b274180310d90097d935b8d8 Mon Sep 17 00:00:00 2001 From: Cody Leff Date: Tue, 20 Dec 2022 14:48:29 +0000 Subject: [PATCH 02/10] Convert superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx --- .../src/components/Form/LabeledErrorBoundInput.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx index a99f5f89c8144..4d4eeb194f222 100644 --- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx +++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx @@ -18,9 +18,9 @@ */ import React from 'react'; import { Input, Tooltip } from 'antd'; -import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; import { styled, css, SupersetTheme, t } from '@superset-ui/core'; import InfoTooltip from 'src/components/InfoTooltip'; +import Icons from 'src/components/Icons'; import errorIcon from 'src/assets/images/icons/error.svg'; import FormItem from './FormItem'; import FormLabel from './FormLabel'; @@ -92,6 +92,12 @@ const StyledFormLabel = styled(FormLabel)` margin-bottom: 0; `; +const iconReset = css` + &.anticon > * { + line-height: 0; + } +`; + const LabeledErrorBoundInput = ({ label, validationMethods, @@ -128,11 +134,11 @@ const LabeledErrorBoundInput = ({ iconRender={visible => visible ? ( - + ) : ( - + ) } From 0f0028cc113fbd7366b8179a0565b0ae8f63a743 Mon Sep 17 00:00:00 2001 From: Cody Leff Date: Tue, 20 Dec 2022 15:47:47 +0000 Subject: [PATCH 03/10] Convert superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx and test. --- .../DetailsPanel/DetailsPanel.test.tsx | 22 +++++++------------ .../FiltersBadge/DetailsPanel/index.tsx | 17 +++++++------- 2 files changed, 17 insertions(+), 22 deletions(-) diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx index 12efe2c3e5d67..8d2b121ff6b0d 100644 --- a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx +++ b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx @@ -102,13 +102,11 @@ test('Should render "appliedCrossFilterIndicators"', () => { userEvent.click(screen.getByTestId('details-panel-content')); expect(screen.getByText('Applied Cross Filters (1)')).toBeInTheDocument(); expect( - screen.getByRole('button', { name: 'search Clinical Stage' }), + screen.getByRole('button', { name: 'Clinical Stage' }), ).toBeInTheDocument(); expect(props.onHighlightFilterSource).toBeCalledTimes(0); - userEvent.click( - screen.getByRole('button', { name: 'search Clinical Stage' }), - ); + userEvent.click(screen.getByRole('button', { name: 'Clinical Stage' })); expect(props.onHighlightFilterSource).toBeCalledTimes(1); expect(props.onHighlightFilterSource).toBeCalledWith([ 'ROOT_ID', @@ -135,12 +133,10 @@ test('Should render "appliedIndicators"', () => { userEvent.click(screen.getByTestId('details-panel-content')); expect(screen.getByText('Applied Filters (1)')).toBeInTheDocument(); - expect( - screen.getByRole('button', { name: 'search Country' }), - ).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Country' })).toBeInTheDocument(); expect(props.onHighlightFilterSource).toBeCalledTimes(0); - userEvent.click(screen.getByRole('button', { name: 'search Country' })); + userEvent.click(screen.getByRole('button', { name: 'Country' })); expect(props.onHighlightFilterSource).toBeCalledTimes(1); expect(props.onHighlightFilterSource).toBeCalledWith([ 'ROOT_ID', @@ -168,12 +164,12 @@ test('Should render "incompatibleIndicators"', () => { userEvent.click(screen.getByTestId('details-panel-content')); expect(screen.getByText('Incompatible Filters (1)')).toBeInTheDocument(); expect( - screen.getByRole('button', { name: 'search Vaccine Approach Copy' }), + screen.getByRole('button', { name: 'Vaccine Approach Copy' }), ).toBeInTheDocument(); expect(props.onHighlightFilterSource).toBeCalledTimes(0); userEvent.click( - screen.getByRole('button', { name: 'search Vaccine Approach Copy' }), + screen.getByRole('button', { name: 'Vaccine Approach Copy' }), ); expect(props.onHighlightFilterSource).toBeCalledTimes(1); expect(props.onHighlightFilterSource).toBeCalledWith([ @@ -202,13 +198,11 @@ test('Should render "unsetIndicators"', () => { userEvent.click(screen.getByTestId('details-panel-content')); expect(screen.getByText('Unset Filters (1)')).toBeInTheDocument(); expect( - screen.getByRole('button', { name: 'search Vaccine Approach' }), + screen.getByRole('button', { name: 'Vaccine Approach' }), ).toBeInTheDocument(); expect(props.onHighlightFilterSource).toBeCalledTimes(0); - userEvent.click( - screen.getByRole('button', { name: 'search Vaccine Approach' }), - ); + userEvent.click(screen.getByRole('button', { name: 'Vaccine Approach' })); expect(props.onHighlightFilterSource).toBeCalledTimes(1); expect(props.onHighlightFilterSource).toBeCalledWith([ 'ROOT_ID', diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx index b5dfb0150d59e..3531ab1be9b25 100644 --- a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx +++ b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx @@ -20,11 +20,6 @@ import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { Global, css } from '@emotion/react'; import { t, useTheme } from '@superset-ui/core'; -import { - MinusCircleFilled, - CheckCircleFilled, - ExclamationCircleFilled, -} from '@ant-design/icons'; import Popover from 'src/components/Popover'; import Collapse from 'src/components/Collapse'; import Icons from 'src/components/Icons'; @@ -38,6 +33,12 @@ import { Indicator } from 'src/dashboard/components/FiltersBadge/selectors'; import FilterIndicator from 'src/dashboard/components/FiltersBadge/FilterIndicator'; import { RootState } from 'src/dashboard/types'; +const iconReset = css` + span { + line-height: 0; + } +`; + export interface DetailsPanelProps { appliedCrossFilterIndicators: Indicator[]; appliedIndicators: Indicator[]; @@ -206,7 +207,7 @@ const DetailsPanelPopover = ({ key="applied" header={ - <CheckCircleFilled />{' '} + <Icons.CheckCircleFilled css={iconReset} iconSize="m" />{' '} {t('Applied Filters (%d)', appliedIndicators.length)} } @@ -227,7 +228,7 @@ const DetailsPanelPopover = ({ key="incompatible" header={ - <ExclamationCircleFilled />{' '} + <Icons.ExclamationCircleFilled css={iconReset} iconSize="m" />{' '} {t( 'Incompatible Filters (%d)', incompatibleIndicators.length, @@ -251,7 +252,7 @@ const DetailsPanelPopover = ({ key="unset" header={ <Title bold color={theme.colors.grayscale.light1}> - <MinusCircleFilled />{' '} + <Icons.MinusCircleFilled css={iconReset} iconSize="m" />{' '} {t('Unset Filters (%d)', unsetIndicators.length)} } From 69a07243096fac01cbd2338f899ba9e99bdf54f9 Mon Sep 17 00:00:00 2001 From: Cody Leff Date: Tue, 20 Dec 2022 16:08:53 +0000 Subject: [PATCH 04/10] Convert src/dashboard/components/FiltersBadge/FilterIndicator/index.tsx and test. --- .../FilterIndicator/FilterIndicator.test.tsx | 16 ++++++---------- .../FiltersBadge/FilterIndicator/index.tsx | 12 ++++++++++-- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/FilterIndicator.test.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/FilterIndicator.test.tsx index c93abaa903620..fdded804b8ba0 100644 --- a/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/FilterIndicator.test.tsx +++ b/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/FilterIndicator.test.tsx @@ -43,9 +43,9 @@ test('Should render', () => { render(); expect( - screen.getByRole('button', { name: 'search Vaccine Approach' }), + screen.getByRole('button', { name: 'Vaccine Approach' }), ).toBeInTheDocument(); - expect(screen.getByRole('img', { name: 'search' })).toBeInTheDocument(); + expect(screen.getByRole('img')).toBeInTheDocument(); }); test('Should call "onClick"', () => { @@ -53,9 +53,7 @@ test('Should call "onClick"', () => { render(); expect(props.onClick).toBeCalledTimes(0); - userEvent.click( - screen.getByRole('button', { name: 'search Vaccine Approach' }), - ); + userEvent.click(screen.getByRole('button', { name: 'Vaccine Approach' })); expect(props.onClick).toBeCalledTimes(1); }); @@ -66,7 +64,7 @@ test('Should render "value"', () => { expect( screen.getByRole('button', { - name: 'search Vaccine Approach: any, string', + name: 'Vaccine Approach: any, string', }), ).toBeInTheDocument(); }); @@ -77,9 +75,7 @@ test('Should render with default props', () => { render(); expect( - screen.getByRole('button', { name: 'search Vaccine Approach' }), + screen.getByRole('button', { name: 'Vaccine Approach' }), ).toBeInTheDocument(); - userEvent.click( - screen.getByRole('button', { name: 'search Vaccine Approach' }), - ); + userEvent.click(screen.getByRole('button', { name: 'Vaccine Approach' })); }); diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/index.tsx index e94bca37751db..e7675a3ef0e3d 100644 --- a/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/index.tsx +++ b/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/index.tsx @@ -17,8 +17,9 @@ * under the License. */ -import { SearchOutlined } from '@ant-design/icons'; import React, { FC } from 'react'; +import { css } from '@superset-ui/core'; +import Icons from 'src/components/Icons'; import { getFilterValueForDisplay } from 'src/dashboard/components/nativeFilters/FilterBar/FilterSets/utils'; import { FilterIndicatorText, @@ -46,7 +47,14 @@ const FilterIndicator: FC = ({ onClick([...path, `LABEL-${column}`])}> <ItemIcon> - <SearchOutlined /> + <Icons.SearchOutlined + iconSize="m" + css={css` + span { + vertical-align: 0; + } + `} + /> </ItemIcon> {name} {resultValue ? ': ' : ''} From e5022bac90580aabe679d5595aca32a984bf6857 Mon Sep 17 00:00:00 2001 From: Cody Leff <cody@preset.io> Date: Thu, 22 Dec 2022 17:43:54 +0000 Subject: [PATCH 05/10] Convert superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets --- .../nativeFilters/FilterBar/FilterSets/EditSection.tsx | 4 ++-- .../FilterBar/FilterSets/FilterSetUnit.test.tsx | 2 +- .../nativeFilters/FilterBar/FilterSets/FilterSetUnit.tsx | 9 ++++++--- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/EditSection.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/EditSection.tsx index c4807d751fd11..4b753a6a3e6a3 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/EditSection.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/EditSection.tsx @@ -22,7 +22,7 @@ import { Typography, AntdTooltip } from 'src/components'; import { useDispatch } from 'react-redux'; import Button from 'src/components/Button'; import { updateFilterSet } from 'src/dashboard/actions/nativeFilters'; -import { WarningOutlined } from '@ant-design/icons'; +import Icons from 'src/components/Icons'; import { ActionButtons } from './Footer'; import { useNativeFiltersDataMask, useFilters, useFilterSets } from '../state'; import { APPLY_FILTERS_HINT, findExistingFilterSet } from './utils'; @@ -160,7 +160,7 @@ const EditSection: FC<EditSectionProps> = ({ </ActionButtons> {isDuplicateFilterSet && ( <Warning mark> - <WarningOutlined /> + <Icons.WarningOutlined iconSize="m" /> {t('This filter set is identical to: "%s"', foundFilterSet?.name)} </Warning> )} diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSetUnit.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSetUnit.test.tsx index a5e34432cd7f1..50fe910c53ae1 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSetUnit.test.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSetUnit.test.tsx @@ -32,7 +32,7 @@ const createProps = () => ({ }); function openDropdown() { - const dropdownIcon = screen.getByRole('img', { name: 'ellipsis' }); + const dropdownIcon = screen.getAllByRole('img', { name: '' })[0]; userEvent.click(dropdownIcon); } diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSetUnit.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSetUnit.tsx index 14e0c88b7ed9c..74cf3aa6625e4 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSetUnit.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterSets/FilterSetUnit.tsx @@ -27,7 +27,7 @@ import { useTheme, t, } from '@superset-ui/core'; -import { CheckOutlined, EllipsisOutlined } from '@ant-design/icons'; +import Icons from 'src/components/Icons'; import Button from 'src/components/Button'; import { Tooltip } from 'src/components/Tooltip'; import FiltersHeader from './FiltersHeader'; @@ -107,7 +107,10 @@ const FilterSetUnit: FC<FilterSetUnitProps> = ({ </Typography.Text> <IconsBlock> {isApplied && ( - <CheckOutlined style={{ color: theme.colors.success.base }} /> + <Icons.CheckOutlined + iconSize="m" + iconColor={theme.colors.success.base} + /> )} {onDelete && ( <AntdDropdown @@ -124,7 +127,7 @@ const FilterSetUnit: FC<FilterSetUnitProps> = ({ buttonStyle="link" buttonSize="xsmall" > - <EllipsisOutlined /> + <Icons.EllipsisOutlined iconSize="m" /> </HeaderButton> </AntdDropdown> )} From f4fe20ecfd7a31bb3e787d0ed34c2ff0cb04e454 Mon Sep 17 00:00:00 2001 From: Cody Leff <cody@preset.io> Date: Thu, 22 Dec 2022 18:17:12 +0000 Subject: [PATCH 06/10] Convert superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx --- .../useExploreAdditionalActionsMenu/index.jsx | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx index fa794e871ce57..62fcdaaf15ac9 100644 --- a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx +++ b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx @@ -18,8 +18,8 @@ */ import React, { useCallback, useMemo, useState } from 'react'; import { useSelector } from 'react-redux'; -import { FileOutlined, FileImageOutlined } from '@ant-design/icons'; import { css, styled, t, useTheme } from '@superset-ui/core'; +import Icons from 'src/components/Icons'; import { Menu } from 'src/components/Menu'; import ModalTrigger from 'src/components/ModalTrigger'; import Button from 'src/components/Button'; @@ -92,6 +92,13 @@ export const MenuTrigger = styled(Button)` `} `; +const iconReset = css` + .ant-dropdown-menu-item > & > .anticon:first-child { + margin-right: 0; + vertical-align: 0; + } +`; + export const useExploreAdditionalActionsMenu = ( latestQueryFormData, canDownloadCSV, @@ -271,14 +278,14 @@ export const useExploreAdditionalActionsMenu = ( <> <Menu.Item key={MENU_KEYS.EXPORT_TO_CSV} - icon={<FileOutlined />} + icon={<Icons.FileOutlined css={iconReset} />} disabled={!canDownloadCSV} > {t('Export to original .CSV')} </Menu.Item> <Menu.Item key={MENU_KEYS.EXPORT_TO_CSV_PIVOTED} - icon={<FileOutlined />} + icon={<Icons.FileOutlined css={iconReset} />} disabled={!canDownloadCSV} > {t('Export to pivoted .CSV')} @@ -287,18 +294,21 @@ export const useExploreAdditionalActionsMenu = ( ) : ( <Menu.Item key={MENU_KEYS.EXPORT_TO_CSV} - icon={<FileOutlined />} + icon={<Icons.FileOutlined css={iconReset} />} disabled={!canDownloadCSV} > {t('Export to .CSV')} </Menu.Item> )} - <Menu.Item key={MENU_KEYS.EXPORT_TO_JSON} icon={<FileOutlined />}> + <Menu.Item + key={MENU_KEYS.EXPORT_TO_JSON} + icon={<Icons.FileOutlined css={iconReset} />} + > {t('Export to .JSON')} </Menu.Item> <Menu.Item key={MENU_KEYS.DOWNLOAD_AS_IMAGE} - icon={<FileImageOutlined />} + icon={<Icons.FileImageOutlined css={iconReset} />} > {t('Download as image')} </Menu.Item> From ca811e476aac1df3dbfa213327b0b0ad382ea84c Mon Sep 17 00:00:00 2001 From: Cody Leff <cody@preset.io> Date: Thu, 22 Dec 2022 18:57:33 +0000 Subject: [PATCH 07/10] Convert superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx --- .../DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx index 5870345b444fe..4959ddb882fa8 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx @@ -21,7 +21,7 @@ import { SupersetTheme, t } from '@superset-ui/core'; import { AntdButton, AntdSelect } from 'src/components'; import InfoTooltip from 'src/components/InfoTooltip'; import FormLabel from 'src/components/Form/FormLabel'; -import { DeleteFilled } from '@ant-design/icons'; +import Icons from 'src/components/Icons'; import { FieldPropTypes } from '.'; import { infoTooltip, labelMarginBotton, CredentialInfoForm } from '../styles'; @@ -152,7 +152,8 @@ export const EncryptedField = ({ {fileToUpload && ( <div className="input-upload-current"> {fileToUpload} - <DeleteFilled + <Icons.DeleteFilled + iconSize="m" onClick={() => { setFileToUpload(null); changeMethods.onParametersChange({ From 9e0902ccac705205df95089d6db534376b09392e Mon Sep 17 00:00:00 2001 From: Cody Leff <cody@preset.io> Date: Thu, 22 Dec 2022 19:11:00 +0000 Subject: [PATCH 08/10] Convert superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx --- .../DatabaseConnectionForm/TableCatalog.tsx | 17 +++++++++++++---- .../CRUD/data/database/DatabaseModal/styles.ts | 6 ------ 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx index fb70b9c3652a1..ed5cc94903f2b 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx @@ -17,10 +17,10 @@ * under the License. */ import React from 'react'; -import { t } from '@superset-ui/core'; +import { css, SupersetTheme, t } from '@superset-ui/core'; import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput'; import FormLabel from 'src/components/Form/FormLabel'; -import { CloseOutlined } from '@ant-design/icons'; +import Icons from 'src/components/Icons'; import { FieldPropTypes } from '.'; import { StyledFooterButton, StyledCatalogTable } from '../styles'; import { CatalogObject } from '../../types'; @@ -64,8 +64,17 @@ export const TableCatalog = ({ value={sheet.name} /> {tableCatalog?.length > 1 && ( - <CloseOutlined - className="catalog-delete" + <Icons.CloseOutlined + css={(theme: SupersetTheme) => css` + align-self: center; + background: ${theme.colors.grayscale.light4}; + margin: 5px 5px 8px 5px; + + &.anticon > * { + line-height: 0; + } + `} + iconSize="m" onClick={() => changeMethods.onRemoveTableCatalog(idx)} /> )} diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts index 31b3f84031baf..048f15ee03da5 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts @@ -605,12 +605,6 @@ export const StyledCatalogTable = styled.div` width: 95%; } - .catalog-delete { - align-self: center; - background: ${({ theme }) => theme.colors.grayscale.light4}; - margin: 5px 5px 8px 5px; - } - .catalog-add-btn { width: 95%; } From 2aaa3bc0e0b33c8c26bb881bcf859308ced3ec9c Mon Sep 17 00:00:00 2001 From: Cody Leff <cody@preset.io> Date: Fri, 23 Dec 2022 00:02:08 +0000 Subject: [PATCH 09/10] Fix tests; trigger CI. --- .../Datasource/DatasourceEditor.test.jsx | 18 +++++++++++------- .../src/components/ListView/ListView.test.jsx | 6 +++++- .../HeaderReportDropdown/index.test.tsx | 6 +++++- .../ReportModal/ReportModal.test.tsx | 6 +++++- .../DndMetricSelect.test.tsx | 13 +++++++------ 5 files changed, 33 insertions(+), 16 deletions(-) diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx index 8d592d2d6eff7..9298287322692 100644 --- a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx +++ b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx @@ -24,13 +24,17 @@ import DatasourceEditor from 'src/components/Datasource/DatasourceEditor'; import mockDatasource from 'spec/fixtures/mockDatasource'; import * as featureFlags from 'src/featureFlags'; -jest.mock('src/components/Icons/Icon', () => ({ fileName, role, ...rest }) => ( - <span - role={role ?? 'img'} - aria-label={fileName.replace('_', '-')} - {...rest} - /> -)); +jest.mock('src/components/Icons/Icon', () => ({ + __esModule: true, + default: ({ fileName, role, ...rest }) => ( + <span + role={role ?? 'img'} + aria-label={fileName.replace('_', '-')} + {...rest} + /> + ), + StyledIcon: () => <span />, +})); const props = { datasource: mockDatasource['7__table'], diff --git a/superset-frontend/src/components/ListView/ListView.test.jsx b/superset-frontend/src/components/ListView/ListView.test.jsx index 5faaa6d3c3440..c070fa926d861 100644 --- a/superset-frontend/src/components/ListView/ListView.test.jsx +++ b/superset-frontend/src/components/ListView/ListView.test.jsx @@ -35,7 +35,11 @@ import Pagination from 'src/components/Pagination/Wrapper'; import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint'; -jest.mock('src/components/Icons/Icon', () => () => <span />); +jest.mock('src/components/Icons/Icon', () => ({ + __esModule: true, + default: () => <span />, + StyledIcon: () => <span />, +})); function makeMockLocation(query) { const queryStr = encodeURIComponent(query); diff --git a/superset-frontend/src/components/ReportModal/HeaderReportDropdown/index.test.tsx b/superset-frontend/src/components/ReportModal/HeaderReportDropdown/index.test.tsx index af524a6b1e309..2d6d202799648 100644 --- a/superset-frontend/src/components/ReportModal/HeaderReportDropdown/index.test.tsx +++ b/superset-frontend/src/components/ReportModal/HeaderReportDropdown/index.test.tsx @@ -24,7 +24,11 @@ import HeaderReportDropdown, { HeaderReportProps } from '.'; let isFeatureEnabledMock: jest.MockInstance<boolean, [string]>; -jest.mock('src/components/Icons/Icon', () => () => <span />); +jest.mock('src/components/Icons/Icon', () => ({ + __esModule: true, + default: () => <span />, + StyledIcon: () => <span />, +})); const createProps = () => ({ dashboardId: 1, diff --git a/superset-frontend/src/components/ReportModal/ReportModal.test.tsx b/superset-frontend/src/components/ReportModal/ReportModal.test.tsx index d33d7d62e1919..ad289cefe9a82 100644 --- a/superset-frontend/src/components/ReportModal/ReportModal.test.tsx +++ b/superset-frontend/src/components/ReportModal/ReportModal.test.tsx @@ -33,7 +33,11 @@ fetchMock.get(REPORT_ENDPOINT, {}); const NOOP = () => {}; -jest.mock('src/components/Icons/Icon', () => () => <span />); +jest.mock('src/components/Icons/Icon', () => ({ + __esModule: true, + default: () => <span />, + StyledIcon: () => <span />, +})); const defaultProps = { addDangerToast: NOOP, diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx index a54d7cbac5daa..8074525f4e5b5 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx @@ -30,12 +30,13 @@ import { DndMetricSelect } from 'src/explore/components/controls/DndColumnSelect import { AGGREGATES } from 'src/explore/constants'; import { EXPRESSION_TYPES } from '../MetricControl/AdhocMetric'; -jest.mock( - 'src/components/Icons/Icon', - () => - ({ fileName }: { fileName: string }) => - <span role="img" aria-label={fileName.replace('_', '-')} />, -); +jest.mock('src/components/Icons/Icon', () => ({ + __esModule: true, + default: ({ fileName }: { fileName: string }) => ( + <span role="img" aria-label={fileName.replace('_', '-')} /> + ), + StyledIcon: () => <span />, +})); const defaultProps = { savedMetrics: [ From 750074fa6e44265ba7f5e6c50265b4ef37e19d9b Mon Sep 17 00:00:00 2001 From: Cody Leff <cody@preset.io> Date: Mon, 23 Jan 2023 11:45:45 -0700 Subject: [PATCH 10/10] Fix test. --- .../src/components/Form/LabeledErrorBoundInput.test.jsx | 4 ++-- .../src/components/Form/LabeledErrorBoundInput.tsx | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx index 1202e31a1e382..a5cb80de2ff1a 100644 --- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx +++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx @@ -81,13 +81,13 @@ describe('LabeledErrorBoundInput', () => { defaultProps.visibilityToggle = true; render(<LabeledErrorBoundInput {...defaultProps} />); - expect(await screen.findByRole('img', { name: /eye/i })).toBeVisible(); + expect(await screen.findByTestId('icon-eye')).toBeVisible(); }); it('becomes a password input if props.name === password (backwards compatibility)', async () => { defaultProps.name = 'password'; render(<LabeledErrorBoundInput {...defaultProps} />); - expect(await screen.findByRole('img', { name: /eye/i })).toBeVisible(); + expect(await screen.findByTestId('icon-eye')).toBeVisible(); }); }); diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx index 4d4eeb194f222..51cf104b271ca 100644 --- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx +++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx @@ -138,7 +138,11 @@ const LabeledErrorBoundInput = ({ </Tooltip> ) : ( <Tooltip title={t('Show password.')}> - <Icons.EyeOutlined iconSize="m" css={iconReset} /> + <Icons.EyeOutlined + iconSize="m" + css={iconReset} + data-test="icon-eye" + /> </Tooltip> ) }