You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by en...@apache.org on 2025/03/18 21:22:47 UTC
(superset) branch master updated: refactor(Icons): Replaces custom icons with Ant Design 5 icons (#32112)
This is an automated email from the ASF dual-hosted git repository.
enzomartellucci pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new ce6d5f5551 refactor(Icons): Replaces custom icons with Ant Design 5 icons (#32112)
ce6d5f5551 is described below
commit ce6d5f55511df0fc8e4955342aa2881f4c66f268
Author: Enzo Martellucci <52...@users.noreply.github.com>
AuthorDate: Tue Mar 18 22:22:41 2025 +0100
refactor(Icons): Replaces custom icons with Ant Design 5 icons (#32112)
Replace custom icons with Ant Design 5 icons to standardize the icon
---
.../cypress/applitools/chartlist.test.ts | 4 +-
.../cypress/applitools/dashboardlist.test.ts | 4 +-
.../cypress/e2e/chart_list/list.test.ts | 6 +-
.../cypress/e2e/dashboard/_skip.controls.test.ts | 4 +-
.../cypress/e2e/dashboard/actions.test.js | 35 +++++-
.../cypress/e2e/dashboard/drilltodetail.test.ts | 2 +-
.../cypress/e2e/dashboard_list/list.test.ts | 13 +-
.../cypress-base/cypress/support/directories.ts | 28 ++---
.../cypress-base/cypress/utils/index.ts | 8 +-
.../components/ColumnTypeLabel/ColumnTypeLabel.tsx | 22 ++--
.../src/components/ControlSubSectionHeader.tsx | 10 +-
superset-frontend/spec/helpers/shim.tsx | 11 +-
.../SqlLab/components/QueryLimitSelect/index.tsx | 5 +-
.../src/SqlLab/components/QueryTable/index.tsx | 17 +--
.../src/SqlLab/components/ResultSet/index.tsx | 27 ++++-
.../components/RunQueryActionButton/index.tsx | 13 +-
.../SaveDatasetActionButton.test.tsx | 6 +-
.../components/SaveDatasetActionButton/index.tsx | 6 +-
.../SqlLab/components/SaveQuery/SaveQuery.test.tsx | 10 +-
.../src/SqlLab/components/SaveQuery/index.tsx | 2 +-
.../SqlLab/components/ShareSqlLabQuery/index.tsx | 27 +++--
.../src/SqlLab/components/ShowSQL/index.tsx | 8 +-
.../src/SqlLab/components/SouthPane/index.tsx | 11 +-
.../src/SqlLab/components/SqlEditor/index.tsx | 2 +-
.../SqlLab/components/SqlEditorTabHeader/index.tsx | 106 ++++++++++++----
.../TabStatusIcon/TabStatusIcon.test.tsx | 36 ------
.../src/SqlLab/components/TabStatusIcon/index.tsx | 78 ------------
.../SqlLab/components/TabbedSqlEditors/index.tsx | 29 +++--
.../src/SqlLab/components/TableElement/index.tsx | 34 ++++--
.../src/SqlLab/components/TablePreview/index.tsx | 10 +-
.../src/assets/images/icons/alert.svg | Bin 1928 -> 0 bytes
.../src/assets/images/icons/alert_solid.svg | Bin 1572 -> 0 bytes
.../src/assets/images/icons/alert_solid_small.svg | Bin 2867 -> 0 bytes
.../src/assets/images/icons/area-chart-tile.svg | Bin 1614 -> 0 bytes
.../src/assets/images/icons/bar-chart-tile.svg | Bin 2141 -> 0 bytes
superset-frontend/src/assets/images/icons/bolt.svg | Bin 1565 -> 0 bytes
.../src/assets/images/icons/bolt_small.svg | Bin 1555 -> 0 bytes
.../src/assets/images/icons/bolt_small_run.svg | Bin 1442 -> 0 bytes
.../src/assets/images/icons/calendar.svg | Bin 2119 -> 0 bytes
.../src/assets/images/icons/cancel-x.svg | Bin 2078 -> 0 bytes
.../src/assets/images/icons/cancel.svg | Bin 2261 -> 0 bytes
.../src/assets/images/icons/cancel_solid.svg | Bin 2056 -> 0 bytes
.../src/assets/images/icons/card_view.svg | Bin 1822 -> 0 bytes
.../src/assets/images/icons/cards.svg | Bin 1756 -> 0 bytes
.../src/assets/images/icons/cards_locked.svg | Bin 2163 -> 0 bytes
.../src/assets/images/icons/caret_down.svg | Bin 1369 -> 0 bytes
.../src/assets/images/icons/caret_left.svg | Bin 1364 -> 0 bytes
.../src/assets/images/icons/caret_right.svg | Bin 1393 -> 0 bytes
.../src/assets/images/icons/caret_up.svg | Bin 1371 -> 0 bytes
.../src/assets/images/icons/check.svg | Bin 1404 -> 0 bytes
.../src/assets/images/icons/circle.svg | Bin 1145 -> 0 bytes
.../src/assets/images/icons/circle_check.svg | Bin 1698 -> 0 bytes
.../src/assets/images/icons/circle_check_solid.svg | Bin 1629 -> 0 bytes
.../icons/{database.svg => circle_solid.svg} | Bin 1212 -> 1127 bytes
.../src/assets/images/icons/clock.svg | Bin 1639 -> 0 bytes
.../src/assets/images/icons/close.svg | Bin 1630 -> 0 bytes
superset-frontend/src/assets/images/icons/code.svg | Bin 1933 -> 0 bytes
superset-frontend/src/assets/images/icons/cog.svg | Bin 3125 -> 0 bytes
.../src/assets/images/icons/collapse.svg | Bin 1611 -> 0 bytes
.../src/assets/images/icons/color_palette.svg | Bin 1559 -> 0 bytes
.../src/assets/images/icons/components.svg | Bin 1898 -> 0 bytes
superset-frontend/src/assets/images/icons/copy.svg | Bin 1652 -> 0 bytes
.../src/assets/images/icons/cross-filter-badge.svg | Bin 1979 -> 0 bytes
.../assets/images/icons/current-rendered-tile.svg | Bin 2188 -> 0 bytes
.../src/assets/images/icons/cursor_target.svg | Bin 1889 -> 0 bytes
.../src/assets/images/icons/dataset_physical.svg | Bin 1317 -> 0 bytes
.../src/assets/images/icons/dataset_virtual.svg | Bin 1372 -> 0 bytes
.../images/icons/dataset_virtual_greyscale.svg | Bin 1271 -> 0 bytes
.../src/assets/images/icons/default_db_image.svg | Bin 3428 -> 0 bytes
.../src/assets/images/icons/download.svg | Bin 1742 -> 0 bytes
superset-frontend/src/assets/images/icons/edit.svg | Bin 1575 -> 0 bytes
.../src/assets/images/icons/edit_alt.svg | Bin 1637 -> 0 bytes
.../src/assets/images/icons/email.svg | Bin 1266 -> 0 bytes
.../src/assets/images/icons/error_solid.svg | Bin 1721 -> 0 bytes
.../src/assets/images/icons/error_solid_small.svg | Bin 1702 -> 0 bytes
.../src/assets/images/icons/exclamation.svg | Bin 1218 -> 0 bytes
.../src/assets/images/icons/expand.svg | Bin 1611 -> 0 bytes
superset-frontend/src/assets/images/icons/eye.svg | Bin 1707 -> 0 bytes
.../src/assets/images/icons/eye_slash.svg | Bin 2528 -> 0 bytes
.../src/assets/images/icons/favorite-selected.svg | Bin 1630 -> 0 bytes
.../assets/images/icons/favorite-unselected.svg | Bin 1865 -> 0 bytes
.../images/icons/favorite_small_selected.svg | Bin 1608 -> 0 bytes
.../src/assets/images/icons/field_abc.svg | Bin 2425 -> 0 bytes
.../src/assets/images/icons/field_boolean.svg | Bin 1466 -> 0 bytes
.../src/assets/images/icons/field_date.svg | Bin 1521 -> 0 bytes
.../src/assets/images/icons/field_derived.svg | Bin 2950 -> 0 bytes
.../src/assets/images/icons/field_num.svg | Bin 1045 -> 0 bytes
.../src/assets/images/icons/field_struct.svg | Bin 1924 -> 0 bytes
superset-frontend/src/assets/images/icons/file.svg | Bin 1365 -> 0 bytes
.../src/assets/images/icons/filter.svg | Bin 1520 -> 0 bytes
.../src/assets/images/icons/filter_small.svg | Bin 1360 -> 0 bytes
.../src/assets/images/icons/folder.svg | Bin 1439 -> 0 bytes
.../src/assets/images/icons/function_x.svg | Bin 2945 -> 0 bytes
superset-frontend/src/assets/images/icons/gear.svg | Bin 3052 -> 0 bytes
superset-frontend/src/assets/images/icons/grid.svg | Bin 1132 -> 0 bytes
.../src/assets/images/icons/image.svg | Bin 1477 -> 0 bytes
.../src/assets/images/icons/import.svg | Bin 1920 -> 0 bytes
.../src/assets/images/icons/info-solid.svg | Bin 1731 -> 0 bytes
superset-frontend/src/assets/images/icons/info.svg | Bin 1759 -> 0 bytes
.../src/assets/images/icons/info_solid_small.svg | Bin 1353 -> 0 bytes
superset-frontend/src/assets/images/icons/join.svg | Bin 1961 -> 0 bytes
.../src/assets/images/icons/keyboard.svg | Bin 2577 -> 0 bytes
.../src/assets/images/icons/lightbulb.svg | Bin 1783 -> 0 bytes
.../src/assets/images/icons/line-chart-tile.svg | Bin 1768 -> 0 bytes
superset-frontend/src/assets/images/icons/link.svg | Bin 2094 -> 0 bytes
superset-frontend/src/assets/images/icons/list.svg | Bin 2908 -> 0 bytes
.../src/assets/images/icons/list_view.svg | Bin 2936 -> 0 bytes
.../src/assets/images/icons/location.svg | Bin 1485 -> 0 bytes
.../src/assets/images/icons/lock_locked.svg | Bin 1549 -> 0 bytes
.../src/assets/images/icons/lock_unlocked.svg | Bin 1834 -> 0 bytes
superset-frontend/src/assets/images/icons/map.svg | Bin 1516 -> 0 bytes
.../src/assets/images/icons/message.svg | Bin 1918 -> 0 bytes
.../src/assets/images/icons/minus.svg | Bin 1380 -> 0 bytes
.../src/assets/images/icons/minus_solid.svg | Bin 1285 -> 0 bytes
.../src/assets/images/icons/more_horiz.svg | Bin 1316 -> 0 bytes
.../src/assets/images/icons/more_vert.svg | Bin 1316 -> 0 bytes
superset-frontend/src/assets/images/icons/move.svg | Bin 1093 -> 0 bytes
.../src/assets/images/icons/nav_charts.svg | Bin 1405 -> 0 bytes
.../src/assets/images/icons/nav_dashboard.svg | Bin 2094 -> 0 bytes
.../src/assets/images/icons/nav_data.svg | Bin 1687 -> 0 bytes
.../src/assets/images/icons/nav_explore.svg | Bin 2169 -> 0 bytes
.../src/assets/images/icons/nav_home.svg | Bin 1827 -> 0 bytes
.../src/assets/images/icons/nav_lab.svg | Bin 2064 -> 0 bytes
superset-frontend/src/assets/images/icons/note.svg | Bin 1717 -> 0 bytes
.../src/assets/images/icons/paperclip.svg | Bin 1935 -> 0 bytes
.../src/assets/images/icons/pie-chart-tile.svg | Bin 2636 -> 0 bytes
.../src/assets/images/icons/placeholder.svg | Bin 930 -> 0 bytes
superset-frontend/src/assets/images/icons/plus.svg | Bin 1505 -> 0 bytes
.../src/assets/images/icons/plus_large.svg | Bin 1185 -> 0 bytes
.../src/assets/images/icons/plus_small.svg | Bin 1185 -> 0 bytes
.../src/assets/images/icons/plus_solid.svg | Bin 1410 -> 0 bytes
.../src/assets/images/icons/refresh.svg | Bin 1902 -> 0 bytes
superset-frontend/src/assets/images/icons/save.svg | Bin 1412 -> 0 bytes
.../src/assets/images/icons/search.svg | Bin 2292 -> 0 bytes
.../src/assets/images/icons/server.svg | Bin 2026 -> 0 bytes
.../src/assets/images/icons/share.svg | Bin 1853 -> 0 bytes
superset-frontend/src/assets/images/icons/sql.svg | Bin 2697 -> 0 bytes
.../images/icons/{offline.svg => square.svg} | Bin 919 -> 915 bytes
.../src/assets/images/icons/table-chart-tile.svg | Bin 1752 -> 0 bytes
.../src/assets/images/icons/table.svg | Bin 1211 -> 0 bytes
superset-frontend/src/assets/images/icons/tag.svg | Bin 1662 -> 0 bytes
superset-frontend/src/assets/images/icons/tags.svg | Bin 1021 -> 0 bytes
.../src/assets/images/icons/trash.svg | Bin 1703 -> 0 bytes
.../src/assets/images/icons/triangle_change.svg | Bin 1126 -> 0 bytes
.../src/assets/images/icons/triangle_up.svg | Bin 1121 -> 0 bytes
.../src/assets/images/icons/up-level.svg | Bin 1603 -> 0 bytes
superset-frontend/src/assets/images/icons/user.svg | Bin 1973 -> 0 bytes
.../src/assets/images/icons/warning.svg | Bin 1816 -> 0 bytes
.../src/assets/images/icons/warning_solid.svg | Bin 1817 -> 0 bytes
.../src/assets/images/icons/x-large.svg | Bin 1601 -> 0 bytes
.../src/assets/images/icons/x-small.svg | Bin 1690 -> 0 bytes
.../src/components/AlteredSliceTag/index.tsx | 2 +-
.../Chart/DrillBy/DrillByMenuItems.test.tsx | 14 ++-
.../components/Chart/DrillBy/DrillByMenuItems.tsx | 2 +-
.../DrillDetail/DrillDetailMenuItems.test.tsx | 39 +++---
.../CopyToClipboard/CopyToClipboard.stories.tsx | 4 +-
.../DatabaseSelector/DatabaseSelector.test.tsx | 2 +-
.../src/components/Datasource/CollectionTable.tsx | 14 ++-
.../src/components/Datasource/DatasourceEditor.jsx | 23 +++-
.../Datasource/DatasourceEditor.test.jsx | 4 +-
.../src/components/Datasource/DatasourceModal.tsx | 11 ++
.../src/components/Dropdown/index.tsx | 2 +-
.../src/components/DropdownButton/index.tsx | 38 +++++-
.../DropdownContainer/DropdownContainer.test.tsx | 5 +-
.../ErrorMessage/BasicErrorAlert.test.tsx | 6 +-
.../components/ErrorMessage/BasicErrorAlert.tsx | 6 +-
.../src/components/ErrorMessage/ErrorAlert.tsx | 9 +-
.../src/components/ErrorMessage/IssueCode.tsx | 8 +-
.../src/components/FaveStar/FaveStar.test.tsx | 12 +-
.../src/components/FaveStar/index.tsx | 17 ++-
.../components/IconTooltip/IconTooltip.stories.tsx | 11 +-
.../src/components/Icons/AntdEnhanced.tsx | 89 ++++++++++++--
.../src/components/Icons/BaseIcon.tsx | 97 +++++++++++++++
superset-frontend/src/components/Icons/Icon.tsx | 46 +------
.../src/components/Icons/Icons.stories.tsx | 4 +-
superset-frontend/src/components/Icons/index.tsx | 134 ++-------------------
.../src/components/Icons/{IconType.ts => types.ts} | 19 ++-
.../src/components/InfoTooltip/index.tsx | 22 +++-
.../components/Label/reusable/DatasetTypeLabel.tsx | 8 +-
.../components/Label/reusable/PublishedLabel.tsx | 10 +-
.../components/LastUpdated/LastUpdated.test.tsx | 14 ++-
.../src/components/LastUpdated/index.tsx | 23 ++--
.../src/components/ListView/ActionsBar.tsx | 2 +-
.../src/components/ListView/Filters/Search.tsx | 33 +++--
.../src/components/ListView/ListView.tsx | 4 +-
.../ListViewCard/ListViewCard.stories.tsx | 6 +-
superset-frontend/src/components/Menu/index.tsx | 88 +++++++-------
.../src/components/MessageToasts/Toast.tsx | 39 +++---
.../src/components/MetadataBar/ContentConfig.tsx | 2 +-
superset-frontend/src/components/Modal/Modal.tsx | 3 +-
.../src/components/PageHeaderWithActions/index.tsx | 4 +-
.../src/components/Popover/Popover.test.tsx | 2 +-
.../src/components/PopoverDropdown/index.tsx | 9 +-
.../src/components/PopoverSection/index.tsx | 36 +++---
.../src/components/Radio/Radio.stories.tsx | 32 +++--
.../src/components/RefreshLabel/index.tsx | 2 +-
.../src/components/Select/AsyncSelect.tsx | 3 +-
.../header-renderers/HeaderWithRadioGroup.tsx | 2 +-
.../src/components/TableSelector/index.tsx | 4 +-
superset-frontend/src/components/Tabs/Tabs.tsx | 4 +-
superset-frontend/src/components/Tags/Tag.tsx | 7 +-
superset-frontend/src/components/Timer/index.tsx | 29 ++++-
.../src/components/Tooltip/Tooltip.test.tsx | 2 +-
.../components/WarningIconWithTooltip/index.tsx | 2 +-
.../src/dashboard/components/DashboardGrid.jsx | 21 ++--
.../dashboard/components/DeleteComponentButton.tsx | 4 +-
.../DetailsPanel/DetailsPanel.test.tsx | 24 ++--
.../FilterIndicator/FilterIndicator.test.tsx | 8 +-
.../dashboard/components/FiltersBadge/index.tsx | 2 +-
.../dashboard/components/Header/Header.test.tsx | 22 ++--
.../src/dashboard/components/Header/index.jsx | 9 ++
.../PropertiesModal/PropertiesModal.test.tsx | 5 +-
.../dashboard/components/PropertiesModal/index.tsx | 5 +
.../src/dashboard/components/SliceAdder.test.tsx | 8 +-
.../src/dashboard/components/SliceAdder.tsx | 52 ++++----
.../src/dashboard/components/SliceHeader/index.tsx | 4 -
.../components/URLShortLinkButton/index.tsx | 22 ++--
.../dashboard/components/gridComponents/Column.jsx | 2 +-
.../components/gridComponents/Divider.test.jsx | 2 +-
.../components/gridComponents/Header.test.jsx | 4 +-
.../dashboard/components/gridComponents/Row.jsx | 2 +-
.../dashboard/components/gridComponents/Tabs.jsx | 47 ++++----
.../ScopingModal/ChartsScopingListPanel.test.tsx | 2 +-
.../ScopingModal/ChartsScopingListPanel.tsx | 14 +--
.../ScopingModal/ScopingModal.test.tsx | 2 +-
.../CrossFilters/ScopingModal/ScopingTreePanel.tsx | 1 -
.../nativeFilters/FilterBar/FilterBar.test.tsx | 12 +-
.../FilterBarSettings/FilterBarSettings.test.tsx | 47 +++++---
.../FilterBar/FilterBarSettings/index.tsx | 34 ++++--
.../FilterBar/FilterControls/FilterControl.tsx | 4 +-
.../FilterBar/FilterControls/FilterControls.tsx | 2 +-
.../FilterControls/FilterDivider.stories.tsx | 2 +-
.../FilterBar/FilterControls/FilterDivider.tsx | 1 -
.../FiltersOutOfScopeCollapsible/index.tsx | 3 +-
.../nativeFilters/FilterBar/Header/Header.test.tsx | 8 +-
.../nativeFilters/FilterBar/Header/index.tsx | 43 +++----
.../nativeFilters/FilterBar/Vertical.tsx | 26 ++--
.../nativeFilters/FilterCard/DependenciesRow.tsx | 2 +-
.../nativeFilters/FilterCard/FilterCard.test.tsx | 2 +-
.../nativeFilters/FilterCard/NameRow.tsx | 5 +-
.../FiltersConfigModal/DraggableFilter.tsx | 1 -
.../FiltersConfigModal/FilterTitleContainer.tsx | 13 +-
.../FiltersConfigModal/FilterTitlePane.tsx | 14 ++-
.../FiltersConfigForm/DependencyList.tsx | 4 +-
.../FiltersConfigForm/FilterScope/ScopingTree.tsx | 2 +-
.../FiltersConfigForm/FiltersConfigForm.tsx | 17 ++-
.../FiltersConfigModal/FiltersConfigModal.test.tsx | 12 +-
.../src/explore/components/ControlHeader.tsx | 10 +-
.../explore/components/DataTableControl/index.tsx | 46 ++++---
.../components/DataTablesPane/DataTablesPane.tsx | 9 +-
.../DatasourcePanel/DatasourcePanel.test.tsx | 2 +-
.../ExploreChartHeader/ExploreChartHeader.test.tsx | 4 +-
.../components/ExploreChartHeader/index.jsx | 8 +-
.../components/ExploreViewContainer/index.jsx | 14 ++-
.../components/ExportToCSVDropdown/index.tsx | 4 +-
.../PropertiesModal/PropertiesModal.test.tsx | 6 +-
.../explore/components/PropertiesModal/index.tsx | 16 ++-
.../explore/components/RunQueryButton/index.tsx | 15 +--
.../controls/AnnotationLayerControl/index.tsx | 26 ++--
.../CollectionControl/CollectionControl.test.tsx | 4 +-
.../controls/CollectionControl/index.jsx | 2 +-
.../ColorSchemeControl/ColorSchemeControl.test.tsx | 6 +-
.../controls/ColorSchemeControl/index.tsx | 15 +--
.../ConditionalFormattingControl.tsx | 22 +++-
.../DatasourceControl/DatasourceControl.test.jsx | 6 +-
.../controls/DatasourceControl/index.jsx | 16 ++-
.../controls/DateFilterControl/DateFilterLabel.tsx | 6 +-
.../DateFilterControl/components/DateLabel.tsx | 32 ++---
.../DndColumnSelectPopoverTitle.jsx | 14 ++-
.../DndColumnSelectControl/DndSelectLabel.tsx | 8 +-
.../DndColumnSelectControl/Option.test.tsx | 10 +-
.../controls/DndColumnSelectControl/Option.tsx | 21 +++-
.../DndColumnSelectControl/OptionWrapper.test.tsx | 4 +-
.../FilterControl/AdhocFilterControl/index.jsx | 13 +-
.../AdhocFilterEditPopoverSqlTabContent/index.tsx | 8 +-
.../AdhocFilterOption/AdhocFilterOption.test.tsx | 8 +-
.../controls/FixedOrMetricControl/index.jsx | 3 +-
.../controls/LayerConfigsControl/FlatLayerTree.tsx | 5 +-
.../controls/LayerConfigsControl/LayerTreeItem.tsx | 7 +-
.../AdhocMetricEditPopoverTitle.test.tsx | 3 +-
.../MetricControl/AdhocMetricEditPopoverTitle.tsx | 14 ++-
.../controls/MetricControl/MetricsControl.jsx | 9 +-
.../components/controls/OptionControls/index.tsx | 23 +++-
.../components/controls/VizTypeControl/VizTile.tsx | 9 +-
.../VizTypeControl/VizTypeControl.test.tsx | 8 +-
.../controls/VizTypeControl/VizTypeGallery.tsx | 15 ++-
.../controls/VizTypeControl/constants.tsx | 10 +-
.../DashboardsSubMenu.tsx | 3 +-
.../src/features/alerts/AlertReportModal.tsx | 11 +-
.../features/alerts/components/AlertStatusIcon.tsx | 15 +--
.../alerts/components/NotificationMethod.test.tsx | 4 +-
.../alerts/components/NotificationMethod.tsx | 7 +-
.../alerts/components/RecipientIcon.test.tsx | 7 +-
.../features/alerts/components/RecipientIcon.tsx | 14 ++-
.../alerts/components/ValidatedPanelHeader.tsx | 14 ++-
.../annotationLayers/AnnotationLayerModal.tsx | 19 ++-
.../src/features/annotations/AnnotationModal.tsx | 18 ++-
.../src/features/charts/ChartCard.tsx | 72 ++++++-----
.../src/features/cssTemplates/CssTemplateModal.tsx | 68 ++++++-----
.../src/features/dashboards/DashboardCard.tsx | 12 +-
.../DatabaseConnectionForm/EncryptedField.tsx | 4 +-
.../DatabaseModal/SSHTunnelSwitch.test.tsx | 4 +-
.../databases/DatabaseModal/index.test.tsx | 10 +-
.../src/features/databases/DatabaseModal/index.tsx | 35 +++++-
.../src/features/databases/DatabaseModal/styles.ts | 2 +
.../features/databases/UploadDataModel/index.tsx | 7 +-
.../AddDataset/DatasetPanel/DatasetPanel.tsx | 12 +-
.../features/datasets/AddDataset/Header/index.tsx | 2 +-
.../AddDataset/LeftPanel/LeftPanel.test.tsx | 2 +-
.../src/features/home/ActivityTable.tsx | 6 +-
superset-frontend/src/features/home/ChartTable.tsx | 12 +-
.../src/features/home/DashboardTable.test.tsx | 4 +-
.../src/features/home/DashboardTable.tsx | 11 +-
.../src/features/home/LanguagePicker.tsx | 13 +-
superset-frontend/src/features/home/Menu.tsx | 26 +++-
superset-frontend/src/features/home/RightMenu.tsx | 31 +++--
.../src/features/home/SavedQueries.tsx | 34 ++++--
superset-frontend/src/features/home/SubMenu.tsx | 12 +-
.../src/features/queries/SyntaxHighlighterCopy.tsx | 2 +-
.../ReportModal/HeaderReportDropdown/index.tsx | 4 +-
.../src/features/reports/ReportModal/index.tsx | 2 +-
.../src/features/rls/RowLevelSecurityModal.tsx | 100 +++++++--------
superset-frontend/src/features/tags/TagCard.tsx | 7 +-
.../src/pages/AlertReportList/index.tsx | 35 ++++--
.../src/pages/AnnotationLayerList/index.tsx | 27 +++--
.../src/pages/AnnotationList/index.tsx | 31 +++--
.../src/pages/ChartCreation/ChartCreation.test.tsx | 17 ++-
.../src/pages/ChartCreation/index.tsx | 16 +--
.../src/pages/ChartList/ChartList.test.jsx | 28 +++--
superset-frontend/src/pages/ChartList/index.tsx | 26 ++--
.../src/pages/CssTemplateList/index.tsx | 20 ++-
.../src/pages/DashboardList/DashboardList.test.jsx | 12 +-
.../src/pages/DashboardList/index.tsx | 27 +++--
superset-frontend/src/pages/DatabaseList/index.tsx | 43 ++++---
superset-frontend/src/pages/DatasetList/index.tsx | 61 ++++++----
.../src/pages/QueryHistoryList/index.tsx | 20 +--
.../src/pages/RowLevelSecurityList/index.tsx | 36 ++++--
.../pages/SavedQueryList/SavedQueryList.test.jsx | 2 +-
.../src/pages/SavedQueryList/index.tsx | 35 ++++--
superset-frontend/src/pages/Tags/index.tsx | 41 +++++--
superset-frontend/src/views/CRUD/utils.tsx | 7 --
341 files changed, 2212 insertions(+), 1439 deletions(-)
diff --git a/superset-frontend/cypress-base/cypress/applitools/chartlist.test.ts b/superset-frontend/cypress-base/cypress/applitools/chartlist.test.ts
index 92ad94bb7d..5333e98c5f 100644
--- a/superset-frontend/cypress-base/cypress/applitools/chartlist.test.ts
+++ b/superset-frontend/cypress-base/cypress/applitools/chartlist.test.ts
@@ -28,7 +28,7 @@ describe('charts list view', () => {
});
it('should load the Charts list', () => {
- cy.get('[aria-label="list-view"]').click();
+ cy.get('[aria-label="unordered-list"]').click();
cy.eyesOpen({
testName: 'Charts list-view',
});
@@ -36,7 +36,7 @@ describe('charts list view', () => {
});
it('should load the Charts card list', () => {
- cy.get('[aria-label="card-view"]').click();
+ cy.get('[aria-label="appstore"]').click();
cy.eyesOpen({
testName: 'Charts card-view',
});
diff --git a/superset-frontend/cypress-base/cypress/applitools/dashboardlist.test.ts b/superset-frontend/cypress-base/cypress/applitools/dashboardlist.test.ts
index 4e9c84d6ea..ff4a317443 100644
--- a/superset-frontend/cypress-base/cypress/applitools/dashboardlist.test.ts
+++ b/superset-frontend/cypress-base/cypress/applitools/dashboardlist.test.ts
@@ -28,7 +28,7 @@ describe('dashboard list view', () => {
});
it('should load the Dashboards list', () => {
- cy.get('[aria-label="list-view"]').click();
+ cy.get('[aria-label="unordered-list"]').click();
cy.eyesOpen({
testName: 'Dashboards list-view',
});
@@ -36,7 +36,7 @@ describe('dashboard list view', () => {
});
it('should load the Dashboards card list', () => {
- cy.get('[aria-label="card-view"]').click();
+ cy.get('[aria-label="appstore"]').click();
cy.eyesOpen({
testName: 'Dashboards card-view',
});
diff --git a/superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts b/superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts
index a20e049951..9f689c014b 100644
--- a/superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts
@@ -35,12 +35,12 @@ function orderAlphabetical() {
}
function openProperties() {
- cy.get('[aria-label="more-vert"]').eq(1).click();
+ cy.get('[aria-label="more"]').eq(1).click();
cy.getBySel('chart-list-edit-option').click();
}
function openMenu() {
- cy.get('[aria-label="more-vert"]').eq(1).click();
+ cy.get('[aria-label="more"]').eq(1).click();
}
function confirmDelete() {
@@ -263,7 +263,7 @@ describe('Charts list', () => {
// deletes in list-view
setGridMode('list');
cy.getBySel('table-row').eq(1).contains('2 - Sample chart');
- cy.getBySel('trash').eq(1).click();
+ cy.getBySel('delete').eq(1).click();
confirmDelete();
cy.wait('@delete');
cy.getBySel('table-row').eq(1).should('not.contain', '2 - Sample chart');
diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/_skip.controls.test.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/_skip.controls.test.ts
index 0e5c733131..e527fcda75 100644
--- a/superset-frontend/cypress-base/cypress/e2e/dashboard/_skip.controls.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/_skip.controls.test.ts
@@ -62,7 +62,7 @@ describe.skip('Dashboard top-level controls', () => {
// should allow force refresh
WORLD_HEALTH_CHARTS.forEach(waitForChartLoad);
getChartAliasesBySpec(WORLD_HEALTH_CHARTS).then(aliases => {
- cy.get('[aria-label="more-horiz"]').click();
+ cy.get('[aria-label="ellipsis"]').click();
cy.get('[data-test="refresh-dashboard-menu-item"]').should(
'not.have.class',
'antd5-dropdown-menu-item-disabled',
@@ -91,7 +91,7 @@ describe.skip('Dashboard top-level controls', () => {
});
});
});
- cy.get('[aria-label="more-horiz"]').click();
+ cy.get('[aria-label="ellipsis"]').click();
cy.get('[data-test="refresh-dashboard-menu-item"]').and(
'not.have.class',
'antd5-dropdown-menu-item-disabled',
diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/actions.test.js b/superset-frontend/cypress-base/cypress/e2e/dashboard/actions.test.js
index 8d520d9729..7da3cc84ee 100644
--- a/superset-frontend/cypress-base/cypress/e2e/dashboard/actions.test.js
+++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/actions.test.js
@@ -24,21 +24,44 @@ describe('Dashboard actions', () => {
cy.createSampleDashboards([0]);
cy.visit(SAMPLE_DASHBOARD_1);
});
-
it('should allow to favorite/unfavorite dashboard', () => {
interceptFav();
interceptUnfav();
+ // Find and click StarOutlined (adds to favorites)
cy.getBySel('dashboard-header-container')
- .find("[aria-label='favorite-unselected']")
+ .find("[aria-label='unstarred']")
+ .as('starIconOutlined')
+ .should('exist')
.click();
+
cy.wait('@select');
+
+ // After clicking, StarFilled should appear
cy.getBySel('dashboard-header-container')
- .find("[aria-label='favorite-selected']")
- .click();
+ .find("[aria-label='starred']")
+ .as('starIconFilled')
+ .should('exist');
+
+ // Verify the color of the filled star (gold)
+ cy.get('@starIconFilled')
+ .should('have.css', 'color')
+ .and('eq', 'rgb(252, 199, 0)');
+
+ // Click on StarFilled (removes from favorites)
+ cy.get('@starIconFilled').click();
+
cy.wait('@unselect');
+
+ // After clicking, StarOutlined should reappear
cy.getBySel('dashboard-header-container')
- .find("[aria-label='favorite-selected']")
- .should('not.exist');
+ .find("[aria-label='unstarred']")
+ .as('starIconOutlinedAfter')
+ .should('exist');
+
+ // Verify the color of the outlined star (gray)
+ cy.get('@starIconOutlinedAfter')
+ .should('have.css', 'color')
+ .and('eq', 'rgb(178, 178, 178)');
});
});
diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/drilltodetail.test.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/drilltodetail.test.ts
index d2eb482a9f..1063689edc 100644
--- a/superset-frontend/cypress-base/cypress/e2e/dashboard/drilltodetail.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/drilltodetail.test.ts
@@ -151,7 +151,7 @@ describe('Drill to detail modal', () => {
cy.on('uncaught:exception', () => false);
cy.wait('@samples');
// reload
- cy.get("[aria-label='reload']").click();
+ cy.get("[aria-label='Reload']").click();
cy.wait('@samples');
// make sure it started back from first page
cy.get('.ant-pagination-item-active').should('contain', '1');
diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard_list/list.test.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard_list/list.test.ts
index c887ae0e6c..322306a4c6 100644
--- a/superset-frontend/cypress-base/cypress/e2e/dashboard_list/list.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/dashboard_list/list.test.ts
@@ -32,12 +32,12 @@ function orderAlphabetical() {
}
function openProperties() {
- cy.get('[aria-label="more-vert"]').first().click();
+ cy.get('[aria-label="more"]').first().click();
cy.getBySel('dashboard-card-option-edit-button').click();
}
function openMenu() {
- cy.get('[aria-label="more-vert"]').first().click();
+ cy.get('[aria-label="more"]').first().click();
}
function confirmDelete(bulk = false) {
@@ -158,17 +158,14 @@ describe('Dashboards list', () => {
cy.getBySel('styled-card').first().contains('1 - Sample dashboard');
cy.getBySel('styled-card')
.first()
- .find("[aria-label='favorite-unselected']")
+ .find("[aria-label='unstarred']")
.click();
cy.wait('@select');
- cy.getBySel('styled-card')
- .first()
- .find("[aria-label='favorite-selected']")
- .click();
+ cy.getBySel('styled-card').first().find("[aria-label='starred']").click();
cy.wait('@unselect');
cy.getBySel('styled-card')
.first()
- .find("[aria-label='favorite-selected']")
+ .find("[aria-label='starred']")
.should('not.exist');
});
diff --git a/superset-frontend/cypress-base/cypress/support/directories.ts b/superset-frontend/cypress-base/cypress/support/directories.ts
index 286f865444..3c8e8eb367 100644
--- a/superset-frontend/cypress-base/cypress/support/directories.ts
+++ b/superset-frontend/cypress-base/cypress/support/directories.ts
@@ -171,7 +171,7 @@ export const sqlLabView = {
header: '[role=columnheader]',
table: '.QueryTable',
row: dataTestLocator('table-row'),
- failureMarkIcon: '[aria-label=x-small]',
+ failureMarkIcon: '[aria-label=close]',
successMarkIcon: '[aria-label=check]',
},
};
@@ -252,7 +252,7 @@ export const datasetsList = {
aceTextInput: '.ace_text-input',
sourceSQLInput: '.ace_content',
sourceVirtualSQLRadio: ':nth-child(2) > .ant-radio > .ant-radio-inner',
- sourcePadlock: '[aria-label=lock-locked]',
+ sourcePadlock: '[aria-label=lock]',
legacy: {
panel: '.panel-body',
sqlInput: '#sql',
@@ -275,8 +275,8 @@ export const chartListView = {
bulkSelect: dataTestLocator('bulk-select'),
},
header: {
- cardView: '[aria-label="card-view"]',
- listView: '[aria-label="list-view"]',
+ cardView: '[aria-label="appstore"]',
+ listView: '[aria-label="unordered-list"]',
sort: '[class="ant-select-selection-search-input"][aria-label="Sort"]',
sortRecentlyModifiedMenuOption: '[label="Recently modified"]',
sortAlphabeticalMenuOption: '[label="Alphabetical"]',
@@ -286,8 +286,6 @@ export const chartListView = {
card: dataTestLocator('styled-card'),
cardCover: '[class="antd5-card-cover"]',
cardImage: '[class="gradient-container"]',
- selectedStarIcon: "[aria-label='favorite-selected']",
- unselectedStarIcon: "[aria-label='favorite-unselected']",
starIcon: dataTestLocator('fave-unfave-icon'),
},
deleteModal: {
@@ -330,7 +328,7 @@ export const nativeFilters = {
filterItemsContainer: dataTestLocator('filter-title-container'),
tabsContainer: '[class="ant-tabs-nav-list"]',
tab: '.ant-tabs-tab',
- removeTab: '[aria-label="trash"]',
+ removeTab: '[aria-label="delete"]',
},
addFilter: dataTestLocator('add-filter-button'),
defaultValueCheck: '.ant-checkbox-checked',
@@ -375,7 +373,7 @@ export const nativeFilters = {
listItemNotActive: '[class="ant-tabs-tab ant-tabs-tab-with-remove"]',
listItemActive:
'[class="ant-tabs-tab ant-tabs-tab-with-remove ant-tabs-tab-active"]',
- removeIcon: '[aria-label="trash"]',
+ removeIcon: '[aria-label="delete"]',
},
filterItem: dataTestLocator('form-item-value'),
filterItemDropdown: '.ant-select-selection-search',
@@ -402,8 +400,8 @@ export const dashboardListView = {
card: dataTestLocator('styled-card'),
cardCover: '[class="antd5-card-cover"]',
cardImage: '[class="gradient-container"]',
- selectedStarIcon: "[aria-label='favorite-selected']",
- unselectedStarIcon: "[aria-label='favorite-unselected']",
+ selectedStarIcon: "[aria-label='star']",
+ unselectedStarIcon: "[aria-label='star']",
starIcon: dataTestLocator('fave-unfave-icon'),
},
deleteModal: {
@@ -412,8 +410,8 @@ export const dashboardListView = {
},
table: {
starIcon: dataTestLocator('fave-unfave-icon'),
- selectedStarIcon: "[aria-label='favorite-selected']",
- unselectedStarIcon: "[aria-label='favorite-unselected']",
+ selectedStarIcon: "[aria-label='star']",
+ unselectedStarIcon: "[aria-label='star']",
bulkSelect: {
checkboxOff: '[aria-label="checkbox-off"]',
checkboxOn: '[aria-label="checkbox-on"]',
@@ -438,8 +436,8 @@ export const dashboardListView = {
importButton: dataTestLocator('modal-confirm-button'),
},
header: {
- cardView: '[aria-label="card-view"]',
- listView: '[aria-label="list-view"]',
+ cardView: '[aria-label="appstore"]',
+ listView: '[aria-label="unordered-list"]',
sort: dataTestLocator('sort-header'),
sortDropdown: '.Select__menu',
statusFilterInput: `${dataTestLocator(
@@ -503,7 +501,7 @@ export const exploreView = {
optionField: dataTestLocator('option-label'),
fieldInput: '.Select__control input',
removeFieldValue: dataTestLocator('remove-control-button'),
- addFieldValue: '[aria-label="plus-small"]',
+ addFieldValue: '[aria-label="plus"]',
vizType: dataTestLocator('visualization-type'),
runButton: dataTestLocator('run-query-button'),
saveQuery: dataTestLocator('query-save-button'),
diff --git a/superset-frontend/cypress-base/cypress/utils/index.ts b/superset-frontend/cypress-base/cypress/utils/index.ts
index 6b6f444b84..2c8255ee6e 100644
--- a/superset-frontend/cypress-base/cypress/utils/index.ts
+++ b/superset-frontend/cypress-base/cypress/utils/index.ts
@@ -25,8 +25,14 @@ export interface ChartSpec {
viz: string;
}
+const viewTypeIcons = {
+ card: 'appstore',
+ list: 'unordered-list',
+};
+
export function setGridMode(type: 'card' | 'list') {
- cy.get(`[aria-label="${type}-view"]`).click();
+ const icon = viewTypeIcons[type];
+ cy.get(`[aria-label="${icon}"]`).click();
}
export function toggleBulkSelect() {
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx
index 6c655d330a..129449912a 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx
@@ -19,12 +19,14 @@
*/
import { ReactNode } from 'react';
import { css, GenericDataType, styled, t } from '@superset-ui/core';
-import { ClockCircleOutlined, QuestionOutlined } from '@ant-design/icons';
-// TODO: move all icons to superset-ui/core
-import FunctionSvg from './type-icons/field_derived.svg';
-import BooleanSvg from './type-icons/field_boolean.svg';
-import StringSvg from './type-icons/field_abc.svg';
-import NumSvg from './type-icons/field_num.svg';
+import {
+ ClockCircleOutlined,
+ QuestionOutlined,
+ FunctionOutlined,
+ FieldBinaryOutlined,
+ FieldStringOutlined,
+ NumberOutlined,
+} from '@ant-design/icons';
export type ColumnLabelExtendedType = 'expression' | '';
@@ -56,13 +58,13 @@ export function ColumnTypeLabel({ type }: ColumnTypeLabelProps) {
);
if (type === '' || type === 'expression') {
- typeIcon = <FunctionSvg aria-label={t('function type icon')} />;
+ typeIcon = <FunctionOutlined aria-label={t('function type icon')} />;
} else if (type === GenericDataType.String) {
- typeIcon = <StringSvg aria-label={t('string type icon')} />;
+ typeIcon = <FieldStringOutlined aria-label={t('string type icon')} />;
} else if (type === GenericDataType.Numeric) {
- typeIcon = <NumSvg aria-label={t('numeric type icon')} />;
+ typeIcon = <NumberOutlined aria-label={t('numeric type icon')} />;
} else if (type === GenericDataType.Boolean) {
- typeIcon = <BooleanSvg aria-label={t('boolean type icon')} />;
+ typeIcon = <FieldBinaryOutlined aria-label={t('boolean type icon')} />;
} else if (type === GenericDataType.Temporal) {
typeIcon = <ClockCircleOutlined aria-label={t('temporal type icon')} />;
}
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
index 731b34b6af..676028b453 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
@@ -16,11 +16,13 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { styled } from '@superset-ui/core';
+import { styled, css } from '@superset-ui/core';
export const ControlSubSectionHeader = styled.div`
- font-weight: ${({ theme }) => theme.typography.weights.bold};
- font-size: ${({ theme }) => theme.typography.sizes.s};
- margin-bottom: ${({ theme }) => theme.gridUnit}px;
+ ${({ theme }) => css`
+ font-weight: ${theme.typography.weights.bold};
+ font-size: ${theme.typography.sizes.s};
+ margin-bottom: ${theme.gridUnit}px;
+ `}
`;
export default ControlSubSectionHeader;
diff --git a/superset-frontend/spec/helpers/shim.tsx b/superset-frontend/spec/helpers/shim.tsx
index a25e094a29..151351c2ae 100644
--- a/superset-frontend/spec/helpers/shim.tsx
+++ b/superset-frontend/spec/helpers/shim.tsx
@@ -111,13 +111,22 @@ jest.mock('src/components/Icons/Icon', () => ({
/>
),
StyledIcon: ({
+ component: Component,
role,
'aria-label': ariaLabel,
...rest
}: {
+ component: React.ComponentType<any>;
role: string;
'aria-label': AriaAttributes['aria-label'];
- }) => <span role={role ?? 'img'} aria-label={ariaLabel} {...rest} />,
+ }) => (
+ <Component
+ role={role ?? 'img'}
+ alt={ariaLabel}
+ aria-label={ariaLabel}
+ {...rest}
+ />
+ ),
}));
process.env.WEBPACK_MODE = 'test';
diff --git a/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx b/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx
index ce9cb2b06d..696310fce9 100644
--- a/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx
+++ b/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { useDispatch } from 'react-redux';
-import { useTheme, t } from '@superset-ui/core';
+import { t } from '@superset-ui/core';
import { Dropdown } from 'src/components/Dropdown';
import { Menu } from 'src/components/Menu';
import Icons from 'src/components/Icons';
@@ -64,7 +64,6 @@ const QueryLimitSelect = ({
maxRow,
defaultQueryLimit,
}: QueryLimitSelectProps) => {
- const theme = useTheme();
const dispatch = useDispatch();
const queryEditor = useQueryEditor(queryEditorId, ['id', 'queryLimit']);
@@ -82,7 +81,7 @@ const QueryLimitSelect = ({
<span className="limitDropdown">
{convertToNumWithSpaces(queryLimit)}
</span>
- <Icons.TriangleDown iconColor={theme.colors.grayscale.base} />
+ <Icons.CaretDownOutlined iconSize="m" />
</Button>
</Dropdown>
);
diff --git a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx b/superset-frontend/src/SqlLab/components/QueryTable/index.tsx
index 4fa44ff497..c120d51446 100644
--- a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx
+++ b/superset-frontend/src/SqlLab/components/QueryTable/index.tsx
@@ -40,7 +40,7 @@ import ModalTrigger from 'src/components/ModalTrigger';
import { UserWithPermissionsAndRoles as User } from 'src/types/bootstrapTypes';
import ResultSet from '../ResultSet';
import HighlightedSql from '../HighlightedSql';
-import { StaticPosition, verticalAlign, StyledTooltip } from './styles';
+import { StaticPosition, StyledTooltip } from './styles';
interface QueryTableQuery
extends Omit<
@@ -188,7 +188,10 @@ const QueryTable = ({
timed_out: {
config: {
icon: (
- <Icons.Clock iconColor={theme.colors.error.base} iconSize="m" />
+ <Icons.ClockCircleOutlined
+ iconColor={theme.colors.error.base}
+ iconSize="m"
+ />
),
label: t('Offline'),
},
@@ -277,9 +280,7 @@ const QueryTable = ({
buttonStyle="link"
onClick={() => openQuery(q.queryId)}
>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-external-link m-r-3" />
+ <Icons.Full iconSize="m" iconColor={theme.colors.primary.dark1} />
{t('Edit')}
</Button>
);
@@ -344,7 +345,7 @@ const QueryTable = ({
placement="top"
className="pointer"
>
- <Icons.Edit iconSize="xl" />
+ <Icons.EditOutlined iconSize="l" />
</StyledTooltip>
<StyledTooltip
onClick={() => openQueryInNewTab(query)}
@@ -352,7 +353,7 @@ const QueryTable = ({
placement="top"
className="pointer"
>
- <Icons.PlusCircleOutlined iconSize="xl" css={verticalAlign} />
+ <Icons.PlusCircleOutlined iconSize="l" />
</StyledTooltip>
{q.id !== latestQueryId && (
<StyledTooltip
@@ -360,7 +361,7 @@ const QueryTable = ({
onClick={() => dispatch(removeQuery(query))}
className="pointer"
>
- <Icons.Trash iconSize="xl" />
+ <Icons.DeleteOutlined iconSize="l" />
</StyledTooltip>
)}
</div>
diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
index fb375260e4..4d6d4ee6c1 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -150,6 +150,15 @@ const ResultSetButtons = styled.div`
padding-right: ${({ theme }) => 2 * theme.gridUnit}px;
`;
+const copyButtonStyles = css`
+ &:hover {
+ text-decoration: unset;
+ }
+ span > :first-of-type {
+ margin: 0px;
+ }
+`;
+
const ROWS_CHIP_WIDTH = 100;
const GAP = 8;
@@ -342,6 +351,7 @@ const ResultSet = ({
)}
{csv && canExportData && (
<Button
+ css={copyButtonStyles}
buttonSize="small"
href={getExportCsvUrl(query.id)}
data-test="export-csv-button"
@@ -361,9 +371,11 @@ const ResultSet = ({
}
}}
>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-file-text-o" /> {t('Download to CSV')}
+ <Icons.DownloadOutlined
+ iconSize="m"
+ iconColor={theme.colors.primary.dark2}
+ />{' '}
+ {t('Download to CSV')}
</Button>
)}
@@ -373,12 +385,15 @@ const ResultSet = ({
wrapped={false}
copyNode={
<Button
+ css={copyButtonStyles}
buttonSize="small"
data-test="copy-to-clipboard-button"
>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-clipboard" /> {t('Copy to Clipboard')}
+ <Icons.CopyOutlined
+ iconSize="s"
+ iconColor={theme.colors.primary.dark2}
+ />{' '}
+ {t('Copy to Clipboard')}
</Button>
}
hideTooltip
diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
index 97d024407b..815a405663 100644
--- a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
@@ -18,7 +18,7 @@
*/
import { useMemo, FC, ReactElement } from 'react';
-import { t, styled, useTheme } from '@superset-ui/core';
+import { t, styled, useTheme, SupersetTheme } from '@superset-ui/core';
import Button from 'src/components/Button';
import Icons from 'src/components/Icons';
@@ -44,13 +44,13 @@ export interface RunQueryActionButtonProps {
const buildText = (
shouldShowStopButton: boolean,
selectedText: string | undefined,
+ theme: SupersetTheme,
): string | JSX.Element => {
if (shouldShowStopButton) {
return (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-stop" /> {t('Stop')}
+ <Icons.Square iconSize="xs" iconColor={theme.colors.primary.light5} />
+ {t('Stop')}
</>
);
}
@@ -150,13 +150,12 @@ const RunQueryActionButton = ({
? {
overlay: overlayCreateAsMenu,
icon: (
- <Icons.CaretDown
+ <Icons.DownOutlined
iconColor={
isDisabled
? theme.colors.grayscale.base
: theme.colors.grayscale.light5
}
- name="caret-down"
/>
),
trigger: 'click',
@@ -165,7 +164,7 @@ const RunQueryActionButton = ({
buttonStyle: shouldShowStopBtn ? 'warning' : 'primary',
})}
>
- {buildText(shouldShowStopBtn, selectedText)}
+ {buildText(shouldShowStopBtn, selectedText, theme)}
</ButtonComponent>
</StyledButton>
);
diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/SaveDatasetActionButton.test.tsx b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/SaveDatasetActionButton.test.tsx
index 2258d7a45d..f5283dfd1e 100644
--- a/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/SaveDatasetActionButton.test.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/SaveDatasetActionButton.test.tsx
@@ -36,7 +36,7 @@ describe('SaveDatasetActionButton', () => {
);
const saveBtn = screen.getByRole('button', { name: /save/i });
- const caretBtn = screen.getByRole('button', { name: /caret-down/i });
+ const caretBtn = screen.getByRole('button', { name: /down/i });
expect(
await screen.findByRole('button', { name: /save/i }),
@@ -53,9 +53,9 @@ describe('SaveDatasetActionButton', () => {
/>,
);
- const caretBtn = screen.getByRole('button', { name: /caret-down/i });
+ const caretBtn = screen.getByRole('button', { name: /down/i });
expect(
- await screen.findByRole('button', { name: /caret-down/i }),
+ await screen.findByRole('button', { name: /down/i }),
).toBeInTheDocument();
userEvent.click(caretBtn);
diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx
index 6cb17bc2b4..4b0eab7be4 100644
--- a/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx
@@ -41,9 +41,9 @@ const SaveDatasetActionButton = ({
onClick={() => setShowSave(true)}
dropdownRender={() => overlayMenu}
icon={
- <Icons.CaretDown
- iconColor={theme.colors.grayscale.light5}
- name="caret-down"
+ <Icons.DownOutlined
+ iconSize="xs"
+ iconColor={theme.colors.primary.dark2}
/>
}
trigger={['click']}
diff --git a/superset-frontend/src/SqlLab/components/SaveQuery/SaveQuery.test.tsx b/superset-frontend/src/SqlLab/components/SaveQuery/SaveQuery.test.tsx
index a499ed2e01..6c5e834659 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery/SaveQuery.test.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery/SaveQuery.test.tsx
@@ -179,7 +179,7 @@ describe('SavedQuery', () => {
await waitFor(() => {
const saveBtn = screen.getByRole('button', { name: /save/i });
- const caretBtn = screen.getByRole('button', { name: /caret-down/i });
+ const caretBtn = screen.getByRole('button', { name: /down/i });
expect(saveBtn).toBeVisible();
expect(caretBtn).toBeVisible();
@@ -192,7 +192,9 @@ describe('SavedQuery', () => {
store: mockStore(mockState),
});
- const caretBtn = await screen.findByRole('button', { name: /caret-down/i });
+ const caretBtn = await screen.findByRole('button', {
+ name: /down/i,
+ });
userEvent.click(caretBtn);
const saveDatasetMenuItem = await screen.findByText(/save dataset/i);
@@ -209,7 +211,9 @@ describe('SavedQuery', () => {
store: mockStore(mockState),
});
- const caretBtn = await screen.findByRole('button', { name: /caret-down/i });
+ const caretBtn = await screen.findByRole('button', {
+ name: /down/i,
+ });
userEvent.click(caretBtn);
const saveDatasetMenuItem = await screen.findByText(/save dataset/i);
diff --git a/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx b/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
index dbebf6d9b4..91ad7ed453 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
@@ -57,7 +57,7 @@ export type QueryPayload = {
} & Pick<QueryEditor, 'dbId' | 'catalog' | 'schema' | 'sql'>;
const Styles = styled.span`
- span[role='img'] {
+ span[role='img']:not([aria-label='down']) {
display: flex;
margin: 0;
color: ${({ theme }) => theme.colors.grayscale.base};
diff --git a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx
index 988b96b51b..0216078e0d 100644
--- a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx
@@ -17,11 +17,11 @@
* under the License.
*/
import {
- styled,
t,
useTheme,
getClientErrorObject,
SupersetClient,
+ css,
} from '@superset-ui/core';
import Button from 'src/components/Button';
import Icons from 'src/components/Icons';
@@ -36,16 +36,6 @@ interface ShareSqlLabQueryProps {
addDangerToast: (msg: string) => void;
}
-const StyledIcon = styled(Icons.Link)`
- &:first-of-type {
- margin: 0;
- display: flex;
- svg {
- margin: 0;
- }
- }
-`;
-
const ShareSqlLabQuery = ({
queryEditorId,
addDangerToast,
@@ -85,8 +75,19 @@ const ShareSqlLabQuery = ({
const buildButton = () => {
const tooltip = t('Copy query link to your clipboard');
return (
- <Button buttonSize="small" tooltip={tooltip}>
- <StyledIcon iconColor={theme.colors.primary.base} iconSize="xl" />
+ <Button
+ buttonSize="small"
+ tooltip={tooltip}
+ css={css`
+ span > :first-of-type {
+ margin-right: 0;
+ }
+ `}
+ >
+ <Icons.LinkOutlined
+ iconColor={theme.colors.primary.base}
+ iconSize="m"
+ />
{t('Copy link')}
</Button>
);
diff --git a/superset-frontend/src/SqlLab/components/ShowSQL/index.tsx b/superset-frontend/src/SqlLab/components/ShowSQL/index.tsx
index 4ae6f3b0ed..525baa7b0b 100644
--- a/superset-frontend/src/SqlLab/components/ShowSQL/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ShowSQL/index.tsx
@@ -21,6 +21,7 @@ import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
import { IconTooltip } from 'src/components/IconTooltip';
import ModalTrigger from 'src/components/ModalTrigger';
+import Icons from 'src/components/Icons';
SyntaxHighlighter.registerLanguage('sql', sql);
@@ -42,10 +43,9 @@ export default function ShowSQL({
modalTitle={title}
triggerNode={
triggerNode || (
- <IconTooltip
- className="fa fa-eye pull-left m-l-2"
- tooltip={tooltipText}
- />
+ <IconTooltip className="pull-left m-l-2" tooltip={tooltipText}>
+ <Icons.EyeOutlined iconSize="s" />
+ </IconTooltip>
)
}
modalBody={
diff --git a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
index fe929cb080..7ddf8f2b07 100644
--- a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
@@ -20,7 +20,7 @@ import { createRef, useCallback, useMemo } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { nanoid } from 'nanoid';
import Tabs from 'src/components/Tabs';
-import { css, styled, t } from '@superset-ui/core';
+import { css, styled, t, useTheme } from '@superset-ui/core';
import { removeTables, setActiveSouthPaneTab } from 'src/SqlLab/actions/sqlLab';
@@ -91,6 +91,7 @@ const SouthPane = ({
displayLimit,
defaultQueryLimit,
}: SouthPaneProps) => {
+ const theme = useTheme();
const dispatch = useDispatch();
const { offline, tables } = useSelector(
({ sqlLab: { offline, tables } }: SqlLabRootState) => ({
@@ -180,11 +181,11 @@ const SouthPane = ({
<Tabs.TabPane
tab={
<>
- <Icons.Table
- iconSize="s"
+ <Icons.InsertRowAboveOutlined
+ iconSize="l"
css={css`
- margin-bottom: 2px;
- margin-right: 4px;
+ margin-bottom: ${theme.gridUnit * 0.5}px;
+ margin-right: ${theme.gridUnit}px;
`}
/>
{`${schema}.${decodeURIComponent(name)}`}
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
index 9bca4d0aaf..88646a6772 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
@@ -874,7 +874,7 @@ const SqlEditor: FC<Props> = ({
trigger={['click']}
>
<Button buttonSize="xsmall" type="link" showMarginRight={false}>
- <Icons.MoreHoriz iconColor={theme.colors.grayscale.base} />
+ <Icons.EllipsisOutlined />
</Button>
</Dropdown>
</div>
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx
index adc09ea63a..77a9338ab4 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx
@@ -22,7 +22,14 @@ import { bindActionCreators } from 'redux';
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
import { MenuDotsDropdown } from 'src/components/Dropdown';
import { Menu } from 'src/components/Menu';
-import { styled, t, QueryState } from '@superset-ui/core';
+import {
+ styled,
+ css,
+ t,
+ QueryState,
+ SupersetTheme,
+ useTheme,
+} from '@superset-ui/core';
import {
removeQueryEditor,
removeAllOtherQueryEditors,
@@ -31,11 +38,16 @@ import {
toggleLeftBar,
} from 'src/SqlLab/actions/sqlLab';
import { QueryEditor, SqlLabRootState } from 'src/SqlLab/types';
-import TabStatusIcon from '../TabStatusIcon';
+import Icons, { IconType } from 'src/components/Icons';
const TabTitleWrapper = styled.div`
display: flex;
align-items: center;
+
+ [aria-label='check-circle'],
+ .status-icon {
+ margin: 0px;
+ }
`;
const TabTitle = styled.span`
margin-right: ${({ theme }) => theme.gridUnit * 2}px;
@@ -43,16 +55,29 @@ const TabTitle = styled.span`
`;
const IconContainer = styled.div`
- display: inline-block;
- width: ${({ theme }) => theme.gridUnit * 8}px;
- text-align: center;
+ ${({ theme }) => css`
+ display: inline-block;
+ margin: 0 ${theme.gridUnit * 2}px 0 0px;
+ `}
`;
-
interface Props {
queryEditor: QueryEditor;
}
+const STATE_ICONS: Record<string, FC<IconType>> = {
+ started: Icons.CircleSolid,
+ stopped: Icons.StopOutlined,
+ pending: Icons.CircleSolid,
+ scheduled: Icons.CalendarOutlined,
+ fetching: Icons.CircleSolid,
+ timedOut: Icons.FieldTimeOutlined,
+ running: Icons.CircleSolid,
+ success: Icons.CheckCircleOutlined,
+ failed: Icons.CloseCircleOutlined,
+};
+
const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
+ const theme = useTheme();
const qe = useSelector<SqlLabRootState, QueryEditor>(
({ sqlLab: { unsavedQueryEditor } }) => ({
...queryEditor,
@@ -63,6 +88,8 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
const queryState = useSelector<SqlLabRootState, QueryState>(
({ sqlLab }) => sqlLab.queries[qe.latestQueryId || '']?.state || '',
);
+ const StatusIcon = queryState ? STATE_ICONS[queryState] : STATE_ICONS.running;
+
const dispatch = useDispatch();
const actions = useMemo(
() =>
@@ -85,7 +112,21 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
actions.queryEditorSetTitle(qe, newTitle, qe.id);
}
}
+ const getStatusColor = (state: QueryState, theme: SupersetTheme): string => {
+ const statusColors: Record<QueryState, string> = {
+ [QueryState.Running]: theme.colors.info.base,
+ [QueryState.Success]: theme.colors.success.base,
+ [QueryState.Failed]: theme.colors.error.base,
+ [QueryState.Started]: theme.colors.primary.base,
+ [QueryState.Stopped]: theme.colors.warning.base,
+ [QueryState.Pending]: theme.colors.grayscale.light1,
+ [QueryState.Scheduled]: theme.colors.grayscale.light2,
+ [QueryState.Fetching]: theme.colors.secondary.base,
+ [QueryState.TimedOut]: theme.colors.error.dark1,
+ };
+ return statusColors[state] || theme.colors.grayscale.light2;
+ };
return (
<TabTitleWrapper>
<MenuDotsDropdown
@@ -99,9 +140,12 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
data-test="close-tab-menu-option"
>
<IconContainer>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-close" />
+ <Icons.CloseOutlined
+ iconSize="l"
+ css={css`
+ verticalalign: middle;
+ `}
+ />
</IconContainer>
{t('Close tab')}
</Menu.Item>
@@ -111,9 +155,12 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
data-test="rename-tab-menu-option"
>
<IconContainer>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-i-cursor" />
+ <Icons.EditOutlined
+ css={css`
+ verticalalign: middle;
+ `}
+ iconSize="l"
+ />
</IconContainer>
{t('Rename tab')}
</Menu.Item>
@@ -123,9 +170,12 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
data-test="toggle-menu-option"
>
<IconContainer>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-cogs" />
+ <Icons.VerticalAlignBottomOutlined
+ iconSize="l"
+ css={css`
+ rotate: ${qe.hideLeftBar ? '-90deg;' : '90deg;'};
+ `}
+ />
</IconContainer>
{qe.hideLeftBar ? t('Expand tool bar') : t('Hide tool bar')}
</Menu.Item>
@@ -135,9 +185,12 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
data-test="close-all-other-menu-option"
>
<IconContainer>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-times-circle-o" />
+ <Icons.CloseOutlined
+ iconSize="l"
+ css={css`
+ vertical-align: middle;
+ `}
+ />
</IconContainer>
{t('Close all other tabs')}
</Menu.Item>
@@ -147,17 +200,24 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
data-test="clone-tab-menu-option"
>
<IconContainer>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-files-o" />
+ <Icons.CopyOutlined
+ iconSize="l"
+ css={css`
+ vertical-align: middle;
+ `}
+ />
</IconContainer>
{t('Duplicate tab')}
</Menu.Item>
</Menu>
}
/>
- <TabTitle>{qe.name}</TabTitle>{' '}
- <TabStatusIcon tabState={queryState} />{' '}
+ <TabTitle>{qe.name}</TabTitle>
+ <StatusIcon
+ className="status-icon"
+ iconSize="xs"
+ iconColor={getStatusColor(queryState, theme)}
+ />
</TabTitleWrapper>
);
};
diff --git a/superset-frontend/src/SqlLab/components/TabStatusIcon/TabStatusIcon.test.tsx b/superset-frontend/src/SqlLab/components/TabStatusIcon/TabStatusIcon.test.tsx
deleted file mode 100644
index ce53f9f3c3..0000000000
--- a/superset-frontend/src/SqlLab/components/TabStatusIcon/TabStatusIcon.test.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * 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 { QueryState } from '@superset-ui/core';
-
-import { render } from 'spec/helpers/testing-library';
-import TabStatusIcon from 'src/SqlLab/components/TabStatusIcon';
-
-function setup() {
- return render(<TabStatusIcon tabState={'running' as QueryState} />);
-}
-
-describe('TabStatusIcon', () => {
- it('renders a circle without an x when hovered', () => {
- const { container } = setup();
- expect(container.getElementsByClassName('circle')[0]).toBeInTheDocument();
- expect(
- container.getElementsByClassName('circle')[0]?.textContent ?? 'undefined',
- ).toBe('');
- });
-});
diff --git a/superset-frontend/src/SqlLab/components/TabStatusIcon/index.tsx b/superset-frontend/src/SqlLab/components/TabStatusIcon/index.tsx
deleted file mode 100644
index da069d6cff..0000000000
--- a/superset-frontend/src/SqlLab/components/TabStatusIcon/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * 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 { FC } from 'react';
-import { css, QueryState, styled } from '@superset-ui/core';
-import Icons, { IconType } from 'src/components/Icons';
-
-const IconContainer = styled.span`
- position: absolute;
- top: -6px;
- left: 1px;
-`;
-
-const Circle = styled.div`
- ${({ theme }) => css`
- border-radius: 50%;
- width: ${theme.gridUnit * 3}px;
- height: ${theme.gridUnit * 3}px;
-
- display: inline-block;
- background-color: ${theme.colors.grayscale.light2};
- text-align: center;
- vertical-align: middle;
- font-size: ${theme.typography.sizes.m}px;
- font-weight: ${theme.typography.weights.bold};
- color: ${theme.colors.grayscale.light5};
- position: relative;
-
- &.running {
- background-color: ${theme.colors.info.base};
- }
-
- &.success {
- background-color: ${theme.colors.success.base};
- }
-
- &.failed {
- background-color: ${theme.colors.error.base};
- }
- `}
-`;
-
-interface TabStatusIconProps {
- tabState: QueryState;
-}
-
-const STATE_ICONS: Record<string, FC<IconType>> = {
- success: Icons.Check,
- failed: Icons.CancelX,
-};
-
-export default function TabStatusIcon({ tabState }: TabStatusIconProps) {
- const StatusIcon = STATE_ICONS[tabState];
- return (
- <Circle className={`circle ${tabState}`}>
- {StatusIcon && (
- <IconContainer>
- <StatusIcon iconSize="xs" />
- </IconContainer>
- )}
- </Circle>
- );
-}
diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.tsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.tsx
index 21a9c8a97d..272ca6b567 100644
--- a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.tsx
+++ b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.tsx
@@ -22,7 +22,13 @@ import { EditableTabs } from 'src/components/Tabs';
import { connect } from 'react-redux';
import URI from 'urijs';
import type { QueryEditor, SqlLabRootState } from 'src/SqlLab/types';
-import { FeatureFlag, styled, t, isFeatureEnabled } from '@superset-ui/core';
+import {
+ FeatureFlag,
+ styled,
+ t,
+ isFeatureEnabled,
+ css,
+} from '@superset-ui/core';
import { Logger } from 'src/logger/LogUtils';
import { Tooltip } from 'src/components/Tooltip';
import { detectOS } from 'src/utils/common';
@@ -30,6 +36,7 @@ import * as Actions from 'src/SqlLab/actions/sqlLab';
import { EmptyState } from 'src/components/EmptyState';
import getBootstrapData from 'src/utils/getBootstrapData';
import { locationContext } from 'src/pages/SqlLab/LocationContext';
+import Icons from 'src/components/Icons';
import SqlEditor from '../SqlEditor';
import SqlEditorTabHeader from '../SqlEditorTabHeader';
@@ -247,9 +254,13 @@ class TabbedSqlEditors extends PureComponent<TabbedSqlEditorsProps> {
: t('New tab (Ctrl + t)')
}
>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i data-test="add-tab-icon" className="fa fa-plus-circle" />
+ <Icons.PlusCircleOutlined
+ iconSize="s"
+ css={css`
+ vertical-align: middle;
+ `}
+ data-test="add-tab-icon"
+ />
</Tooltip>
</StyledTab>
);
@@ -291,9 +302,13 @@ class TabbedSqlEditors extends PureComponent<TabbedSqlEditorsProps> {
: t('New tab (Ctrl + t)')
}
>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i data-test="add-tab-icon" className="fa fa-plus-circle" />
+ <Icons.PlusCircleOutlined
+ iconSize="l"
+ css={css`
+ vertical-align: middle;
+ `}
+ data-test="add-tab-icon"
+ />
</Tooltip>
}
>
diff --git a/superset-frontend/src/SqlLab/components/TableElement/index.tsx b/superset-frontend/src/SqlLab/components/TableElement/index.tsx
index f65229fd6f..8185448ba0 100644
--- a/superset-frontend/src/SqlLab/components/TableElement/index.tsx
+++ b/superset-frontend/src/SqlLab/components/TableElement/index.tsx
@@ -45,6 +45,7 @@ import ModalTrigger from 'src/components/ModalTrigger';
import Loading from 'src/components/Loading';
import useEffectEvent from 'src/hooks/useEffectEvent';
import { ActionType } from 'src/types/Action';
+import Icons from 'src/components/Icons';
import ColumnElement, { ColumnKeyTypeType } from '../ColumnElement';
import ShowSQL from '../ShowSQL';
@@ -202,7 +203,7 @@ const TableElement = ({ table, ...props }: TableElementProps) => {
text={partitionQuery}
shouldShowText={false}
tooltipText={tt}
- copyNode={<i className="fa fa-clipboard" />}
+ copyNode={<Icons.CopyOutlined iconSize="s" />}
/>
);
}
@@ -259,9 +260,11 @@ const TableElement = ({ table, ...props }: TableElementProps) => {
))}
triggerNode={
<IconTooltip
- className="fa fa-key pull-left m-l-2"
+ className="pull-left m-l-2"
tooltip={t('View keys & indexes (%s)', tableData.indexes.length)}
- />
+ >
+ <Icons.KeyOutlined iconSize="s" />
+ </IconTooltip>
}
/>
);
@@ -279,10 +282,15 @@ const TableElement = ({ table, ...props }: TableElementProps) => {
`}
>
<IconTooltip
- className="fa fa-refresh pull-left m-l-2 pointer"
+ className="pull-left m-l-2 pointer"
onClick={refreshTableMetadata}
tooltip={t('Refresh table schema')}
- />
+ >
+ <Icons.SyncOutlined
+ iconSize="m"
+ iconColor={theme.colors.primary.dark2}
+ />
+ </IconTooltip>
{keyLink}
<IconTooltip
className={
@@ -303,7 +311,11 @@ const TableElement = ({ table, ...props }: TableElementProps) => {
aria-label="Copy"
tooltip={t('Copy SELECT statement to the clipboard')}
>
- <i aria-hidden className="fa fa-clipboard pull-left m-l-2" />
+ <Icons.CopyOutlined
+ iconSize="m"
+ iconColor={theme.colors.primary.dark2}
+ aria-hidden
+ />
</IconTooltip>
}
text={tableData.selectStar}
@@ -318,10 +330,16 @@ const TableElement = ({ table, ...props }: TableElementProps) => {
/>
)}
<IconTooltip
- className="fa fa-times table-remove pull-left m-l-2 pointer"
+ className=" table-remove pull-left m-l-2 pointer"
onClick={removeTable}
tooltip={t('Remove table preview')}
- />
+ >
+ <Icons.CloseOutlined
+ iconSize="m"
+ iconColor={theme.colors.primary.dark2}
+ aria-hidden
+ />
+ </IconTooltip>
</ButtonGroup>
);
};
diff --git a/superset-frontend/src/SqlLab/components/TablePreview/index.tsx b/superset-frontend/src/SqlLab/components/TablePreview/index.tsx
index 5ed54874e5..20fb6b7bc0 100644
--- a/superset-frontend/src/SqlLab/components/TablePreview/index.tsx
+++ b/superset-frontend/src/SqlLab/components/TablePreview/index.tsx
@@ -65,17 +65,17 @@ const MENUS = [
{
key: 'refresh-table',
label: t('Refresh table schema'),
- icon: <i aria-hidden className="fa fa-refresh" />,
+ icon: <Icons.SyncOutlined iconSize="s" aria-hidden />,
},
{
key: 'copy-select-statement',
label: t('Copy SELECT statement'),
- icon: <i aria-hidden className="fa fa-clipboard m-l-2" />,
+ icon: <Icons.CopyOutlined iconSize="s" aria-hidden />,
},
{
key: 'show-create-view-statement',
label: t('Show CREATE VIEW statement'),
- icon: <i aria-hidden className="fa fa-eye" />,
+ icon: <Icons.EyeOutlined iconSize="s" aria-hidden />,
},
];
const TAB_HEADER_HEIGHT = 80;
@@ -104,7 +104,7 @@ const renderWell = (partitions: TableMetaData['partitions']) => {
text={partitionQuery}
shouldShowText={false}
tooltipText={tt}
- copyNode={<i className="fa fa-clipboard" />}
+ copyNode={<Icons.CopyOutlined iconSize="s" />}
/>
);
}
@@ -306,7 +306,7 @@ const TablePreview: FC<Props> = ({ dbId, catalog, schema, tableName }) => {
)}
</div>
<Title>
- <Icons.Table iconSize="l" />
+ <Icons.InsertRowAboveOutlined iconSize="l" />
{tableName}
<Dropdown
dropdownRender={() => (
diff --git a/superset-frontend/src/assets/images/icons/alert.svg b/superset-frontend/src/assets/images/icons/alert.svg
deleted file mode 100644
index 71638ce70f..0000000000
Binary files a/superset-frontend/src/assets/images/icons/alert.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/alert_solid.svg b/superset-frontend/src/assets/images/icons/alert_solid.svg
deleted file mode 100644
index a7f1551c3f..0000000000
Binary files a/superset-frontend/src/assets/images/icons/alert_solid.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/alert_solid_small.svg b/superset-frontend/src/assets/images/icons/alert_solid_small.svg
deleted file mode 100644
index b590be2a0e..0000000000
Binary files a/superset-frontend/src/assets/images/icons/alert_solid_small.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/area-chart-tile.svg b/superset-frontend/src/assets/images/icons/area-chart-tile.svg
deleted file mode 100644
index dbd747d5e5..0000000000
Binary files a/superset-frontend/src/assets/images/icons/area-chart-tile.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/bar-chart-tile.svg b/superset-frontend/src/assets/images/icons/bar-chart-tile.svg
deleted file mode 100644
index a3aaa6fdd9..0000000000
Binary files a/superset-frontend/src/assets/images/icons/bar-chart-tile.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/bolt.svg b/superset-frontend/src/assets/images/icons/bolt.svg
deleted file mode 100644
index be1d7133ab..0000000000
Binary files a/superset-frontend/src/assets/images/icons/bolt.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/bolt_small.svg b/superset-frontend/src/assets/images/icons/bolt_small.svg
deleted file mode 100644
index 0f56c10267..0000000000
Binary files a/superset-frontend/src/assets/images/icons/bolt_small.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/bolt_small_run.svg b/superset-frontend/src/assets/images/icons/bolt_small_run.svg
deleted file mode 100644
index 3690ab1c72..0000000000
Binary files a/superset-frontend/src/assets/images/icons/bolt_small_run.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/calendar.svg b/superset-frontend/src/assets/images/icons/calendar.svg
deleted file mode 100644
index 3b39c1da80..0000000000
Binary files a/superset-frontend/src/assets/images/icons/calendar.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/cancel-x.svg b/superset-frontend/src/assets/images/icons/cancel-x.svg
deleted file mode 100644
index c3fc592d05..0000000000
Binary files a/superset-frontend/src/assets/images/icons/cancel-x.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/cancel.svg b/superset-frontend/src/assets/images/icons/cancel.svg
deleted file mode 100644
index 561503bcbf..0000000000
Binary files a/superset-frontend/src/assets/images/icons/cancel.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/cancel_solid.svg b/superset-frontend/src/assets/images/icons/cancel_solid.svg
deleted file mode 100644
index c0f03e6f18..0000000000
Binary files a/superset-frontend/src/assets/images/icons/cancel_solid.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/card_view.svg b/superset-frontend/src/assets/images/icons/card_view.svg
deleted file mode 100644
index 009409b594..0000000000
Binary files a/superset-frontend/src/assets/images/icons/card_view.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/cards.svg b/superset-frontend/src/assets/images/icons/cards.svg
deleted file mode 100644
index be59ec53a4..0000000000
Binary files a/superset-frontend/src/assets/images/icons/cards.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/cards_locked.svg b/superset-frontend/src/assets/images/icons/cards_locked.svg
deleted file mode 100644
index 522ddf9868..0000000000
Binary files a/superset-frontend/src/assets/images/icons/cards_locked.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/caret_down.svg b/superset-frontend/src/assets/images/icons/caret_down.svg
deleted file mode 100644
index 0ffc7e5cf1..0000000000
Binary files a/superset-frontend/src/assets/images/icons/caret_down.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/caret_left.svg b/superset-frontend/src/assets/images/icons/caret_left.svg
deleted file mode 100644
index d43471dcc5..0000000000
Binary files a/superset-frontend/src/assets/images/icons/caret_left.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/caret_right.svg b/superset-frontend/src/assets/images/icons/caret_right.svg
deleted file mode 100644
index 4ab4545c6d..0000000000
Binary files a/superset-frontend/src/assets/images/icons/caret_right.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/caret_up.svg b/superset-frontend/src/assets/images/icons/caret_up.svg
deleted file mode 100644
index c854683c07..0000000000
Binary files a/superset-frontend/src/assets/images/icons/caret_up.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/check.svg b/superset-frontend/src/assets/images/icons/check.svg
deleted file mode 100644
index 6cb0af15e8..0000000000
Binary files a/superset-frontend/src/assets/images/icons/check.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/circle.svg b/superset-frontend/src/assets/images/icons/circle.svg
deleted file mode 100644
index bc2bcd4097..0000000000
Binary files a/superset-frontend/src/assets/images/icons/circle.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/circle_check.svg b/superset-frontend/src/assets/images/icons/circle_check.svg
deleted file mode 100644
index 46f3ce5e7c..0000000000
Binary files a/superset-frontend/src/assets/images/icons/circle_check.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/circle_check_solid.svg b/superset-frontend/src/assets/images/icons/circle_check_solid.svg
deleted file mode 100644
index 0f1daba0d5..0000000000
Binary files a/superset-frontend/src/assets/images/icons/circle_check_solid.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/database.svg b/superset-frontend/src/assets/images/icons/circle_solid.svg
similarity index 73%
rename from superset-frontend/src/assets/images/icons/database.svg
rename to superset-frontend/src/assets/images/icons/circle_solid.svg
index bb8c9a9993..6c75cf03bd 100644
Binary files a/superset-frontend/src/assets/images/icons/database.svg and b/superset-frontend/src/assets/images/icons/circle_solid.svg differ
diff --git a/superset-frontend/src/assets/images/icons/clock.svg b/superset-frontend/src/assets/images/icons/clock.svg
deleted file mode 100644
index f659797209..0000000000
Binary files a/superset-frontend/src/assets/images/icons/clock.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/close.svg b/superset-frontend/src/assets/images/icons/close.svg
deleted file mode 100644
index 33448814ef..0000000000
Binary files a/superset-frontend/src/assets/images/icons/close.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/code.svg b/superset-frontend/src/assets/images/icons/code.svg
deleted file mode 100644
index ae413cc881..0000000000
Binary files a/superset-frontend/src/assets/images/icons/code.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/cog.svg b/superset-frontend/src/assets/images/icons/cog.svg
deleted file mode 100644
index 0b5f64bde9..0000000000
Binary files a/superset-frontend/src/assets/images/icons/cog.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/collapse.svg b/superset-frontend/src/assets/images/icons/collapse.svg
deleted file mode 100644
index 7282252a25..0000000000
Binary files a/superset-frontend/src/assets/images/icons/collapse.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/color_palette.svg b/superset-frontend/src/assets/images/icons/color_palette.svg
deleted file mode 100644
index 3fc0413268..0000000000
Binary files a/superset-frontend/src/assets/images/icons/color_palette.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/components.svg b/superset-frontend/src/assets/images/icons/components.svg
deleted file mode 100644
index 46f67e4514..0000000000
Binary files a/superset-frontend/src/assets/images/icons/components.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/copy.svg b/superset-frontend/src/assets/images/icons/copy.svg
deleted file mode 100644
index b6c569d0b4..0000000000
Binary files a/superset-frontend/src/assets/images/icons/copy.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/cross-filter-badge.svg b/superset-frontend/src/assets/images/icons/cross-filter-badge.svg
deleted file mode 100644
index 89d123c1c3..0000000000
Binary files a/superset-frontend/src/assets/images/icons/cross-filter-badge.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/current-rendered-tile.svg b/superset-frontend/src/assets/images/icons/current-rendered-tile.svg
deleted file mode 100644
index 78f63014e5..0000000000
Binary files a/superset-frontend/src/assets/images/icons/current-rendered-tile.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/cursor_target.svg b/superset-frontend/src/assets/images/icons/cursor_target.svg
deleted file mode 100644
index 99a81817de..0000000000
Binary files a/superset-frontend/src/assets/images/icons/cursor_target.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/dataset_physical.svg b/superset-frontend/src/assets/images/icons/dataset_physical.svg
deleted file mode 100644
index 28f46bb4ca..0000000000
Binary files a/superset-frontend/src/assets/images/icons/dataset_physical.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/dataset_virtual.svg b/superset-frontend/src/assets/images/icons/dataset_virtual.svg
deleted file mode 100644
index ca15dcb63d..0000000000
Binary files a/superset-frontend/src/assets/images/icons/dataset_virtual.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/dataset_virtual_greyscale.svg b/superset-frontend/src/assets/images/icons/dataset_virtual_greyscale.svg
deleted file mode 100644
index 927ee8462d..0000000000
Binary files a/superset-frontend/src/assets/images/icons/dataset_virtual_greyscale.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/default_db_image.svg b/superset-frontend/src/assets/images/icons/default_db_image.svg
deleted file mode 100644
index f8892bb312..0000000000
Binary files a/superset-frontend/src/assets/images/icons/default_db_image.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/download.svg b/superset-frontend/src/assets/images/icons/download.svg
deleted file mode 100644
index 732fe39bb7..0000000000
Binary files a/superset-frontend/src/assets/images/icons/download.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/edit.svg b/superset-frontend/src/assets/images/icons/edit.svg
deleted file mode 100644
index a732b45373..0000000000
Binary files a/superset-frontend/src/assets/images/icons/edit.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/edit_alt.svg b/superset-frontend/src/assets/images/icons/edit_alt.svg
deleted file mode 100644
index 0cf5c9280a..0000000000
Binary files a/superset-frontend/src/assets/images/icons/edit_alt.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/email.svg b/superset-frontend/src/assets/images/icons/email.svg
deleted file mode 100644
index 5eb707833d..0000000000
Binary files a/superset-frontend/src/assets/images/icons/email.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/error_solid.svg b/superset-frontend/src/assets/images/icons/error_solid.svg
deleted file mode 100644
index b619c4876c..0000000000
Binary files a/superset-frontend/src/assets/images/icons/error_solid.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/error_solid_small.svg b/superset-frontend/src/assets/images/icons/error_solid_small.svg
deleted file mode 100644
index c28efde2eb..0000000000
Binary files a/superset-frontend/src/assets/images/icons/error_solid_small.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/exclamation.svg b/superset-frontend/src/assets/images/icons/exclamation.svg
deleted file mode 100644
index 40901f6b57..0000000000
Binary files a/superset-frontend/src/assets/images/icons/exclamation.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/expand.svg b/superset-frontend/src/assets/images/icons/expand.svg
deleted file mode 100644
index 02a26916c5..0000000000
Binary files a/superset-frontend/src/assets/images/icons/expand.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/eye.svg b/superset-frontend/src/assets/images/icons/eye.svg
deleted file mode 100644
index 262d9bb6d9..0000000000
Binary files a/superset-frontend/src/assets/images/icons/eye.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/eye_slash.svg b/superset-frontend/src/assets/images/icons/eye_slash.svg
deleted file mode 100644
index fad4969a45..0000000000
Binary files a/superset-frontend/src/assets/images/icons/eye_slash.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/favorite-selected.svg b/superset-frontend/src/assets/images/icons/favorite-selected.svg
deleted file mode 100644
index 83985610ca..0000000000
Binary files a/superset-frontend/src/assets/images/icons/favorite-selected.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/favorite-unselected.svg b/superset-frontend/src/assets/images/icons/favorite-unselected.svg
deleted file mode 100644
index 0a4054756d..0000000000
Binary files a/superset-frontend/src/assets/images/icons/favorite-unselected.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/favorite_small_selected.svg b/superset-frontend/src/assets/images/icons/favorite_small_selected.svg
deleted file mode 100644
index 9ce5802aec..0000000000
Binary files a/superset-frontend/src/assets/images/icons/favorite_small_selected.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/field_abc.svg b/superset-frontend/src/assets/images/icons/field_abc.svg
deleted file mode 100644
index ce519516c8..0000000000
Binary files a/superset-frontend/src/assets/images/icons/field_abc.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/field_boolean.svg b/superset-frontend/src/assets/images/icons/field_boolean.svg
deleted file mode 100644
index a804e7d9fa..0000000000
Binary files a/superset-frontend/src/assets/images/icons/field_boolean.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/field_date.svg b/superset-frontend/src/assets/images/icons/field_date.svg
deleted file mode 100644
index cf796fab70..0000000000
Binary files a/superset-frontend/src/assets/images/icons/field_date.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/field_derived.svg b/superset-frontend/src/assets/images/icons/field_derived.svg
deleted file mode 100644
index 00e2115bf4..0000000000
Binary files a/superset-frontend/src/assets/images/icons/field_derived.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/field_num.svg b/superset-frontend/src/assets/images/icons/field_num.svg
deleted file mode 100644
index 69b6aa2e33..0000000000
Binary files a/superset-frontend/src/assets/images/icons/field_num.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/field_struct.svg b/superset-frontend/src/assets/images/icons/field_struct.svg
deleted file mode 100644
index 8877592f56..0000000000
Binary files a/superset-frontend/src/assets/images/icons/field_struct.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/file.svg b/superset-frontend/src/assets/images/icons/file.svg
deleted file mode 100644
index 5484d710ba..0000000000
Binary files a/superset-frontend/src/assets/images/icons/file.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/filter.svg b/superset-frontend/src/assets/images/icons/filter.svg
deleted file mode 100644
index 6ce4a8f1e6..0000000000
Binary files a/superset-frontend/src/assets/images/icons/filter.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/filter_small.svg b/superset-frontend/src/assets/images/icons/filter_small.svg
deleted file mode 100644
index f762e26de0..0000000000
Binary files a/superset-frontend/src/assets/images/icons/filter_small.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/folder.svg b/superset-frontend/src/assets/images/icons/folder.svg
deleted file mode 100644
index 969153876e..0000000000
Binary files a/superset-frontend/src/assets/images/icons/folder.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/function_x.svg b/superset-frontend/src/assets/images/icons/function_x.svg
deleted file mode 100644
index 0f1f746a9d..0000000000
Binary files a/superset-frontend/src/assets/images/icons/function_x.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/gear.svg b/superset-frontend/src/assets/images/icons/gear.svg
deleted file mode 100644
index f76f97f473..0000000000
Binary files a/superset-frontend/src/assets/images/icons/gear.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/grid.svg b/superset-frontend/src/assets/images/icons/grid.svg
deleted file mode 100644
index b128c3fe50..0000000000
Binary files a/superset-frontend/src/assets/images/icons/grid.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/image.svg b/superset-frontend/src/assets/images/icons/image.svg
deleted file mode 100644
index dd06cb303c..0000000000
Binary files a/superset-frontend/src/assets/images/icons/image.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/import.svg b/superset-frontend/src/assets/images/icons/import.svg
deleted file mode 100644
index 582900382b..0000000000
Binary files a/superset-frontend/src/assets/images/icons/import.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/info-solid.svg b/superset-frontend/src/assets/images/icons/info-solid.svg
deleted file mode 100644
index 2ac0b76682..0000000000
Binary files a/superset-frontend/src/assets/images/icons/info-solid.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/info.svg b/superset-frontend/src/assets/images/icons/info.svg
deleted file mode 100644
index 6d1820568f..0000000000
Binary files a/superset-frontend/src/assets/images/icons/info.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/info_solid_small.svg b/superset-frontend/src/assets/images/icons/info_solid_small.svg
deleted file mode 100644
index ea18a0b381..0000000000
Binary files a/superset-frontend/src/assets/images/icons/info_solid_small.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/join.svg b/superset-frontend/src/assets/images/icons/join.svg
deleted file mode 100644
index c1b2d9cf4b..0000000000
Binary files a/superset-frontend/src/assets/images/icons/join.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/keyboard.svg b/superset-frontend/src/assets/images/icons/keyboard.svg
deleted file mode 100644
index 7b7801242e..0000000000
Binary files a/superset-frontend/src/assets/images/icons/keyboard.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/lightbulb.svg b/superset-frontend/src/assets/images/icons/lightbulb.svg
deleted file mode 100644
index 8df86d4871..0000000000
Binary files a/superset-frontend/src/assets/images/icons/lightbulb.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/line-chart-tile.svg b/superset-frontend/src/assets/images/icons/line-chart-tile.svg
deleted file mode 100644
index c6b6b4e403..0000000000
Binary files a/superset-frontend/src/assets/images/icons/line-chart-tile.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/link.svg b/superset-frontend/src/assets/images/icons/link.svg
deleted file mode 100644
index 515ac2beeb..0000000000
Binary files a/superset-frontend/src/assets/images/icons/link.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/list.svg b/superset-frontend/src/assets/images/icons/list.svg
deleted file mode 100644
index c31be33c67..0000000000
Binary files a/superset-frontend/src/assets/images/icons/list.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/list_view.svg b/superset-frontend/src/assets/images/icons/list_view.svg
deleted file mode 100644
index 9d33b74157..0000000000
Binary files a/superset-frontend/src/assets/images/icons/list_view.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/location.svg b/superset-frontend/src/assets/images/icons/location.svg
deleted file mode 100644
index 830ad90053..0000000000
Binary files a/superset-frontend/src/assets/images/icons/location.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/lock_locked.svg b/superset-frontend/src/assets/images/icons/lock_locked.svg
deleted file mode 100644
index 192974687b..0000000000
Binary files a/superset-frontend/src/assets/images/icons/lock_locked.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/lock_unlocked.svg b/superset-frontend/src/assets/images/icons/lock_unlocked.svg
deleted file mode 100644
index f7768d89c8..0000000000
Binary files a/superset-frontend/src/assets/images/icons/lock_unlocked.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/map.svg b/superset-frontend/src/assets/images/icons/map.svg
deleted file mode 100644
index c8bcf692f5..0000000000
Binary files a/superset-frontend/src/assets/images/icons/map.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/message.svg b/superset-frontend/src/assets/images/icons/message.svg
deleted file mode 100644
index 57ac4a6b74..0000000000
Binary files a/superset-frontend/src/assets/images/icons/message.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/minus.svg b/superset-frontend/src/assets/images/icons/minus.svg
deleted file mode 100644
index 22e0744034..0000000000
Binary files a/superset-frontend/src/assets/images/icons/minus.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/minus_solid.svg b/superset-frontend/src/assets/images/icons/minus_solid.svg
deleted file mode 100644
index f34bb7127d..0000000000
Binary files a/superset-frontend/src/assets/images/icons/minus_solid.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/more_horiz.svg b/superset-frontend/src/assets/images/icons/more_horiz.svg
deleted file mode 100644
index 5a66fe35c7..0000000000
Binary files a/superset-frontend/src/assets/images/icons/more_horiz.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/more_vert.svg b/superset-frontend/src/assets/images/icons/more_vert.svg
deleted file mode 100644
index 2fbe6287d8..0000000000
Binary files a/superset-frontend/src/assets/images/icons/more_vert.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/move.svg b/superset-frontend/src/assets/images/icons/move.svg
deleted file mode 100644
index bec9182e64..0000000000
Binary files a/superset-frontend/src/assets/images/icons/move.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/nav_charts.svg b/superset-frontend/src/assets/images/icons/nav_charts.svg
deleted file mode 100644
index e4faf06745..0000000000
Binary files a/superset-frontend/src/assets/images/icons/nav_charts.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/nav_dashboard.svg b/superset-frontend/src/assets/images/icons/nav_dashboard.svg
deleted file mode 100644
index b14b337114..0000000000
Binary files a/superset-frontend/src/assets/images/icons/nav_dashboard.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/nav_data.svg b/superset-frontend/src/assets/images/icons/nav_data.svg
deleted file mode 100644
index 96fe26eeb3..0000000000
Binary files a/superset-frontend/src/assets/images/icons/nav_data.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/nav_explore.svg b/superset-frontend/src/assets/images/icons/nav_explore.svg
deleted file mode 100644
index 7775d9b73b..0000000000
Binary files a/superset-frontend/src/assets/images/icons/nav_explore.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/nav_home.svg b/superset-frontend/src/assets/images/icons/nav_home.svg
deleted file mode 100644
index 2c02850d1f..0000000000
Binary files a/superset-frontend/src/assets/images/icons/nav_home.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/nav_lab.svg b/superset-frontend/src/assets/images/icons/nav_lab.svg
deleted file mode 100644
index 340d4d9e52..0000000000
Binary files a/superset-frontend/src/assets/images/icons/nav_lab.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/note.svg b/superset-frontend/src/assets/images/icons/note.svg
deleted file mode 100644
index 01819bbbb9..0000000000
Binary files a/superset-frontend/src/assets/images/icons/note.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/paperclip.svg b/superset-frontend/src/assets/images/icons/paperclip.svg
deleted file mode 100644
index c3df450333..0000000000
Binary files a/superset-frontend/src/assets/images/icons/paperclip.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/pie-chart-tile.svg b/superset-frontend/src/assets/images/icons/pie-chart-tile.svg
deleted file mode 100644
index 3bd3bf74df..0000000000
Binary files a/superset-frontend/src/assets/images/icons/pie-chart-tile.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/placeholder.svg b/superset-frontend/src/assets/images/icons/placeholder.svg
deleted file mode 100644
index bf1ed56064..0000000000
Binary files a/superset-frontend/src/assets/images/icons/placeholder.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/plus.svg b/superset-frontend/src/assets/images/icons/plus.svg
deleted file mode 100644
index 539379e884..0000000000
Binary files a/superset-frontend/src/assets/images/icons/plus.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/plus_large.svg b/superset-frontend/src/assets/images/icons/plus_large.svg
deleted file mode 100644
index 4ffdb6912b..0000000000
Binary files a/superset-frontend/src/assets/images/icons/plus_large.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/plus_small.svg b/superset-frontend/src/assets/images/icons/plus_small.svg
deleted file mode 100644
index efe61a5082..0000000000
Binary files a/superset-frontend/src/assets/images/icons/plus_small.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/plus_solid.svg b/superset-frontend/src/assets/images/icons/plus_solid.svg
deleted file mode 100644
index 3601cdf8b7..0000000000
Binary files a/superset-frontend/src/assets/images/icons/plus_solid.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/refresh.svg b/superset-frontend/src/assets/images/icons/refresh.svg
deleted file mode 100644
index 6e5fc9eab6..0000000000
Binary files a/superset-frontend/src/assets/images/icons/refresh.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/save.svg b/superset-frontend/src/assets/images/icons/save.svg
deleted file mode 100644
index 1000d61e45..0000000000
Binary files a/superset-frontend/src/assets/images/icons/save.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/search.svg b/superset-frontend/src/assets/images/icons/search.svg
deleted file mode 100644
index e3796880a4..0000000000
Binary files a/superset-frontend/src/assets/images/icons/search.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/server.svg b/superset-frontend/src/assets/images/icons/server.svg
deleted file mode 100644
index f7842a8298..0000000000
Binary files a/superset-frontend/src/assets/images/icons/server.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/share.svg b/superset-frontend/src/assets/images/icons/share.svg
deleted file mode 100644
index fc8a48266c..0000000000
Binary files a/superset-frontend/src/assets/images/icons/share.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/sql.svg b/superset-frontend/src/assets/images/icons/sql.svg
deleted file mode 100644
index a15a5cb254..0000000000
Binary files a/superset-frontend/src/assets/images/icons/sql.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/offline.svg b/superset-frontend/src/assets/images/icons/square.svg
similarity index 83%
rename from superset-frontend/src/assets/images/icons/offline.svg
rename to superset-frontend/src/assets/images/icons/square.svg
index b11359678f..5241c95f61 100644
Binary files a/superset-frontend/src/assets/images/icons/offline.svg and b/superset-frontend/src/assets/images/icons/square.svg differ
diff --git a/superset-frontend/src/assets/images/icons/table-chart-tile.svg b/superset-frontend/src/assets/images/icons/table-chart-tile.svg
deleted file mode 100644
index 9a99419d55..0000000000
Binary files a/superset-frontend/src/assets/images/icons/table-chart-tile.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/table.svg b/superset-frontend/src/assets/images/icons/table.svg
deleted file mode 100644
index fca912377e..0000000000
Binary files a/superset-frontend/src/assets/images/icons/table.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/tag.svg b/superset-frontend/src/assets/images/icons/tag.svg
deleted file mode 100644
index 2abb55d326..0000000000
Binary files a/superset-frontend/src/assets/images/icons/tag.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/tags.svg b/superset-frontend/src/assets/images/icons/tags.svg
deleted file mode 100644
index 413b57aaea..0000000000
Binary files a/superset-frontend/src/assets/images/icons/tags.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/trash.svg b/superset-frontend/src/assets/images/icons/trash.svg
deleted file mode 100644
index 870af73b93..0000000000
Binary files a/superset-frontend/src/assets/images/icons/trash.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/triangle_change.svg b/superset-frontend/src/assets/images/icons/triangle_change.svg
deleted file mode 100644
index f06c145618..0000000000
Binary files a/superset-frontend/src/assets/images/icons/triangle_change.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/triangle_up.svg b/superset-frontend/src/assets/images/icons/triangle_up.svg
deleted file mode 100644
index e8cfa2476f..0000000000
Binary files a/superset-frontend/src/assets/images/icons/triangle_up.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/up-level.svg b/superset-frontend/src/assets/images/icons/up-level.svg
deleted file mode 100644
index 29e2eaafb6..0000000000
Binary files a/superset-frontend/src/assets/images/icons/up-level.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/user.svg b/superset-frontend/src/assets/images/icons/user.svg
deleted file mode 100644
index 774c9be767..0000000000
Binary files a/superset-frontend/src/assets/images/icons/user.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/warning.svg b/superset-frontend/src/assets/images/icons/warning.svg
deleted file mode 100644
index cfe3b089a9..0000000000
Binary files a/superset-frontend/src/assets/images/icons/warning.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/warning_solid.svg b/superset-frontend/src/assets/images/icons/warning_solid.svg
deleted file mode 100644
index 118955914f..0000000000
Binary files a/superset-frontend/src/assets/images/icons/warning_solid.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/x-large.svg b/superset-frontend/src/assets/images/icons/x-large.svg
deleted file mode 100644
index d96e5e02de..0000000000
Binary files a/superset-frontend/src/assets/images/icons/x-large.svg and /dev/null differ
diff --git a/superset-frontend/src/assets/images/icons/x-small.svg b/superset-frontend/src/assets/images/icons/x-small.svg
deleted file mode 100644
index 6d2fb53b7e..0000000000
Binary files a/superset-frontend/src/assets/images/icons/x-small.svg and /dev/null differ
diff --git a/superset-frontend/src/components/AlteredSliceTag/index.tsx b/superset-frontend/src/components/AlteredSliceTag/index.tsx
index 9af6ae46bd..a12d035e96 100644
--- a/superset-frontend/src/components/AlteredSliceTag/index.tsx
+++ b/superset-frontend/src/components/AlteredSliceTag/index.tsx
@@ -219,7 +219,7 @@ const AlteredSliceTag: FC<AlteredSliceTagProps> = props => {
() => (
<Tooltip id="difference-tooltip" title={t('Click to see difference')}>
<Label
- icon={<Icons.Warning iconSize="m" />}
+ icon={<Icons.ExclamationCircleOutlined iconSize="m" />}
className="label"
type="warning"
onClick={() => {}}
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx
index e8f51764ad..ad3da909b2 100644
--- a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx
@@ -87,16 +87,20 @@ const renderMenu = ({
);
const expectDrillByDisabled = async (tooltipContent: string) => {
- const drillByMenuItem = screen.getByRole('menuitem', {
- name: 'Drill by',
- });
+ const drillByMenuItem = screen
+ .getAllByRole('menuitem')
+ .find(menuItem => within(menuItem).queryByText('Drill by'));
+ expect(drillByMenuItem).toBeDefined();
expect(drillByMenuItem).toBeVisible();
expect(drillByMenuItem).toHaveAttribute('aria-disabled', 'true');
- const tooltipTrigger = within(drillByMenuItem).getByTestId('tooltip-trigger');
+
+ const tooltipTrigger = within(drillByMenuItem!).getByTestId(
+ 'tooltip-trigger',
+ );
userEvent.hover(tooltipTrigger as HTMLElement);
- const tooltip = await screen.findByRole('tooltip', { name: tooltipContent });
+ const tooltip = await screen.findByRole('tooltip', { name: tooltipContent });
expect(tooltip).toBeInTheDocument();
};
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
index b054ff02d6..4752d9b6c1 100644
--- a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
@@ -292,7 +292,7 @@ export const DrillByMenuItems = ({
<Input
ref={ref}
prefix={
- <Icons.Search
+ <Icons.SearchOutlined
iconSize="l"
iconColor={theme.colors.grayscale.light1}
/>
diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.test.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.test.tsx
index da2d295c77..4f661a1e46 100644
--- a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.test.tsx
+++ b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.test.tsx
@@ -195,11 +195,11 @@ const expectMenuItemDisabled = async (
* "Drill to detail" item should be enabled and open the correct modal
*/
const expectDrillToDetailEnabled = async () => {
- const drillToDetailMenuItem = screen.getByRole('menuitem', {
- name: 'Drill to detail',
- });
-
- await expectMenuItemEnabled(drillToDetailMenuItem);
+ const drillToDetailMenuItem = screen
+ .getAllByRole('menuitem')
+ .find(menuItem => within(menuItem).queryByText('Drill to detail'));
+ expect(drillToDetailMenuItem).toBeDefined();
+ await expectMenuItemEnabled(drillToDetailMenuItem!);
await expectDrillToDetailModal('Drill to detail');
};
@@ -207,11 +207,12 @@ const expectDrillToDetailEnabled = async () => {
* "Drill to detail" item should be present and disabled
*/
const expectDrillToDetailDisabled = async (tooltipContent?: string) => {
- const drillToDetailMenuItem = screen.getByRole('menuitem', {
- name: 'Drill to detail',
- });
+ const drillToDetailMenuItem = screen
+ .getAllByRole('menuitem')
+ .find(menuItem => within(menuItem).queryByText('Drill to detail'));
- await expectMenuItemDisabled(drillToDetailMenuItem, tooltipContent);
+ expect(drillToDetailMenuItem).toBeDefined();
+ await expectMenuItemDisabled(drillToDetailMenuItem!, tooltipContent);
};
/**
@@ -229,12 +230,11 @@ const expectNoDrillToDetailBy = async () => {
* "Drill to detail by" submenu should be present and enabled
*/
const expectDrillToDetailByEnabled = async () => {
- const drillToDetailBy = screen.getByRole('menuitem', {
- name: 'Drill to detail by',
- });
-
- await expectMenuItemEnabled(drillToDetailBy);
- userEvent.hover(drillToDetailBy);
+ const drillToDetailBy = screen
+ .getAllByRole('menuitem')
+ .find(menuItem => within(menuItem).queryByText('Drill to detail by'));
+ await expectMenuItemEnabled(drillToDetailBy!);
+ userEvent.hover(drillToDetailBy!);
const submenus = await screen.findAllByTestId('drill-to-detail-by-submenu');
@@ -245,11 +245,10 @@ const expectDrillToDetailByEnabled = async () => {
* "Drill to detail by" submenu should be present and disabled
*/
const expectDrillToDetailByDisabled = async (tooltipContent?: string) => {
- const drillToDetailBySubmenuItem = screen.getByRole('menuitem', {
- name: 'Drill to detail by',
- });
-
- await expectMenuItemDisabled(drillToDetailBySubmenuItem, tooltipContent);
+ const drillToDetailBySubmenuItem = screen
+ .getAllByRole('menuitem')
+ .find(menuItem => within(menuItem).queryByText('Drill to detail by'));
+ await expectMenuItemDisabled(drillToDetailBySubmenuItem!, tooltipContent);
};
/**
diff --git a/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx b/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx
index 861e25f5ce..73880a7ac9 100644
--- a/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx
+++ b/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx
@@ -16,7 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { useTheme } from '@superset-ui/core';
import Button from 'src/components/Button';
import Icons from 'src/components/Icons';
import ToastContainer from 'src/components/MessageToasts/ToastContainer';
@@ -28,10 +27,9 @@ export default {
};
export const InteractiveCopyToClipboard = ({ copyNode, ...rest }: any) => {
- const theme = useTheme();
let node = <Button>Copy</Button>;
if (copyNode === 'Icon') {
- node = <Icons.Copy iconColor={theme.colors.grayscale.base} />;
+ node = <Icons.CopyOutlined />;
} else if (copyNode === 'Text') {
node = <span role="button">Copy</span>;
}
diff --git a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
index 00d2924b5b..62e0092b00 100644
--- a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
@@ -225,7 +225,7 @@ test('Refresh should work', async () => {
});
// click schema reload
- userEvent.click(screen.getByRole('button', { name: 'refresh' }));
+ userEvent.click(screen.getByRole('button', { name: 'sync' }));
await waitFor(() => {
expect(fetchMock.calls(databaseApiRoute).length).toBe(1);
diff --git a/superset-frontend/src/components/Datasource/CollectionTable.tsx b/superset-frontend/src/components/Datasource/CollectionTable.tsx
index 23f725b0a4..22e9df44f3 100644
--- a/superset-frontend/src/components/Datasource/CollectionTable.tsx
+++ b/superset-frontend/src/components/Datasource/CollectionTable.tsx
@@ -152,6 +152,9 @@ const StyledButtonWrapper = styled.span`
${({ theme }) => `
margin-top: ${theme.gridUnit * 3}px;
margin-left: ${theme.gridUnit * 3}px;
+ button>span>:first-of-type {
+ margin-right: 0;
+ }
`}
`;
@@ -427,13 +430,14 @@ export default class CRUDCollection extends PureComponent<
data-test="crud-delete-option"
className="text-primary"
>
- <Icons.Trash
+ <Icons.DeleteOutlined
aria-label="Delete item"
className="pointer"
data-test="crud-delete-icon"
role="button"
tabIndex={0}
onClick={this.deleteItem.bind(this, record.id)}
+ iconSize="l"
/>
</td>,
);
@@ -486,12 +490,10 @@ export default class CRUDCollection extends PureComponent<
onClick={this.onAddItem}
data-test="add-item-button"
>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i
+ <Icons.PlusOutlined
+ iconSize="m"
data-test="crud-add-table-item"
- className="fa fa-plus"
- />{' '}
+ />
{t('Add item')}
</Button>
</StyledButtonWrapper>
diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
index 40205b854c..9462056390 100644
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
@@ -137,6 +137,9 @@ const StyledButtonWrapper = styled.span`
${({ theme }) => `
margin-top: ${theme.gridUnit * 3}px;
margin-left: ${theme.gridUnit * 3}px;
+ button>span>:first-of-type {
+ margin-right: 0;
+ }
`}
`;
@@ -964,16 +967,26 @@ class DatasourceEditor extends PureComponent {
);
}
- renderSourceFieldset(theme) {
+ renderSourceFieldset() {
const { datasource } = this.state;
return (
<div>
<EditLockContainer>
<span role="button" tabIndex={0} onClick={this.onChangeEditMode}>
{this.state.isEditMode ? (
- <Icons.LockUnlocked iconColor={theme.colors.grayscale.base} />
+ <Icons.UnlockOutlined
+ iconSize="xl"
+ css={theme => css`
+ margin: auto ${theme.gridUnit}px auto 0;
+ `}
+ />
) : (
- <Icons.LockLocked iconColor={theme.colors.grayscale.base} />
+ <Icons.LockOutlined
+ iconSize="xl"
+ css={theme => ({
+ margin: `auto ${theme.gridUnit}px auto 0`,
+ })}
+ />
)}
</span>
{!this.state.isEditMode && (
@@ -1380,9 +1393,7 @@ class DatasourceEditor extends PureComponent {
className="sync-from-source"
disabled={this.state.isEditMode}
>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-database" />{' '}
+ <Icons.DatabaseOutlined iconSize="m" />
{t('Sync columns from source')}
</Button>
</StyledButtonWrapper>
diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
index 4739f46e61..c748fd86cd 100644
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
@@ -169,7 +169,7 @@ describe('DatasourceEditor', () => {
});
it('Source Tab: edit mode', () => {
- const getLockBtn = screen.getByRole('img', { name: /lock-locked/i });
+ const getLockBtn = screen.getByRole('img', { name: /lock/i });
userEvent.click(getLockBtn);
const physicalRadioBtn = screen.getByRole('radio', {
name: /physical \(table or view\)/i,
@@ -182,7 +182,7 @@ describe('DatasourceEditor', () => {
});
it('Source Tab: readOnly mode', () => {
- const getLockBtn = screen.getByRole('img', { name: /lock-locked/i });
+ const getLockBtn = screen.getByRole('img', { name: /lock/i });
expect(getLockBtn).toBeInTheDocument();
const physicalRadioBtn = screen.getByRole('radio', {
name: /physical \(table or view\)/i,
diff --git a/superset-frontend/src/components/Datasource/DatasourceModal.tsx b/superset-frontend/src/components/Datasource/DatasourceModal.tsx
index 33cd820677..e25f4d349a 100644
--- a/superset-frontend/src/components/Datasource/DatasourceModal.tsx
+++ b/superset-frontend/src/components/Datasource/DatasourceModal.tsx
@@ -27,8 +27,11 @@ import {
getClientErrorObject,
t,
SupersetError,
+ useTheme,
+ css,
} from '@superset-ui/core';
+import Icons from 'src/components/Icons';
import Modal from 'src/components/Modal';
import AsyncEsmComponent from 'src/components/AsyncEsmComponent';
import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace';
@@ -101,6 +104,7 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
onHide,
show,
}) => {
+ const theme = useTheme();
const dispatch = useDispatch();
const [currentDatasource, setCurrentDatasource] = useState(datasource);
const currencies = useSelector<
@@ -298,6 +302,13 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
onHide={onHide}
title={
<span>
+ <Icons.EditOutlined
+ iconSize="l"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ `}
+ data-test="edit-alt"
+ />
{t('Edit Dataset ')}
<strong>{currentDatasource.table_name}</strong>
</span>
diff --git a/superset-frontend/src/components/Dropdown/index.tsx b/superset-frontend/src/components/Dropdown/index.tsx
index 1fdca2e75d..faf12c0973 100644
--- a/superset-frontend/src/components/Dropdown/index.tsx
+++ b/superset-frontend/src/components/Dropdown/index.tsx
@@ -91,7 +91,7 @@ const RenderIcon = (
) => {
const component =
iconOrientation === IconOrientation.Horizontal ? (
- <Icons.MoreHoriz iconSize="xl" />
+ <Icons.EllipsisOutlined iconSize="xl" />
) : (
<MenuDots />
);
diff --git a/superset-frontend/src/components/DropdownButton/index.tsx b/superset-frontend/src/components/DropdownButton/index.tsx
index 84ffd5fe28..7f9f184dbd 100644
--- a/superset-frontend/src/components/DropdownButton/index.tsx
+++ b/superset-frontend/src/components/DropdownButton/index.tsx
@@ -21,6 +21,7 @@ import { type ComponentProps } from 'react';
import { Dropdown } from 'antd-v5';
import { Tooltip, TooltipPlacement } from 'src/components/Tooltip';
import { kebabCase } from 'lodash';
+import { css, useTheme } from '@superset-ui/core';
export type DropdownButtonProps = ComponentProps<typeof Dropdown.Button> & {
tooltip?: string;
@@ -34,8 +35,43 @@ export const DropdownButton = ({
children,
...rest
}: DropdownButtonProps) => {
+ const theme = useTheme();
+ const { type: buttonType } = rest;
+ // divider implementation for default (non-primary) buttons
+ const defaultBtnCss = css`
+ ${(!buttonType || buttonType === 'default') &&
+ `.antd5-dropdown-trigger {
+ position: relative;
+ &:before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 1px;
+ height: 100%;
+ background-color: ${theme.colors.grayscale.light2};
+ }
+ .anticon {
+ vertical-align: middle;
+ }
+ }`}
+ `;
const button = (
- <Dropdown.Button dropdownRender={dropdownRender} {...rest}>
+ <Dropdown.Button
+ dropdownRender={dropdownRender}
+ {...rest}
+ css={[
+ defaultBtnCss,
+ css`
+ .antd5-btn {
+ height: 30px;
+ box-shadow: none;
+ font-size: ${theme.typography.sizes.s}px;
+ font-weight: ${theme.typography.weights.bold};
+ }
+ `,
+ ]}
+ >
{children}
</Dropdown.Button>
);
diff --git a/superset-frontend/src/components/DropdownContainer/DropdownContainer.test.tsx b/superset-frontend/src/components/DropdownContainer/DropdownContainer.test.tsx
index 95b8f6274c..d5475c01d5 100644
--- a/superset-frontend/src/components/DropdownContainer/DropdownContainer.test.tsx
+++ b/superset-frontend/src/components/DropdownContainer/DropdownContainer.test.tsx
@@ -61,7 +61,10 @@ test('renders a dropdown trigger when overflowing', async () => {
test('renders a dropdown trigger with custom icon', async () => {
await mockOverflowingIndex(3, async () => {
render(
- <DropdownContainer items={ITEMS} dropdownTriggerIcon={<Icons.Link />} />,
+ <DropdownContainer
+ items={ITEMS}
+ dropdownTriggerIcon={<Icons.LinkOutlined />}
+ />,
);
expect(
await screen.findByRole('img', { name: 'link' }),
diff --git a/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.test.tsx b/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.test.tsx
index 9a2b0f103c..21b82cf20c 100644
--- a/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.test.tsx
+++ b/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.test.tsx
@@ -43,7 +43,7 @@ test('should render', () => {
test('should render warning icon', () => {
render(<BasicErrorAlert {...mockedProps} />);
expect(
- screen.getByRole('img', { name: 'warning-solid' }),
+ screen.getByRole('img', { name: 'exclamation-circle' }),
).toBeInTheDocument();
});
@@ -53,7 +53,9 @@ test('should render error icon', () => {
level: 'error' as ErrorLevel,
};
render(<BasicErrorAlert {...errorProps} />);
- expect(screen.getByRole('img', { name: 'error-solid' })).toBeInTheDocument();
+ expect(
+ screen.getByRole('img', { name: 'exclamation-circle' }),
+ ).toBeInTheDocument();
});
test('should render the error title', () => {
diff --git a/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx b/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx
index 39ae748970..acebb720f4 100644
--- a/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx
+++ b/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx
@@ -58,11 +58,7 @@ export default function BasicErrorAlert({
return (
<StyledContainer level={level} role="alert">
- {level === 'error' ? (
- <Icons.ErrorSolid iconColor={iconColor} />
- ) : (
- <Icons.WarningSolid iconColor={iconColor} />
- )}
+ <Icons.ExclamationCircleFilled iconColor={iconColor} />
<StyledContent>
<StyledTitle>{title}</StyledTitle>
<p>{body}</p>
diff --git a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
index ac52d0cd3f..8e0d3ea513 100644
--- a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
+++ b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
@@ -19,8 +19,7 @@
import { useState } from 'react';
import { Tooltip } from 'src/components/Tooltip';
import Modal from 'src/components/Modal';
-// eslint-disable-next-line no-restricted-imports
-import { ExclamationCircleOutlined, WarningOutlined } from '@ant-design/icons'; // TODO: Use src/components/Icons
+import Icons from 'src/components/Icons';
import Alert from 'src/components/Alert';
import { t, useTheme } from '@superset-ui/core';
@@ -65,7 +64,11 @@ const ErrorAlert: React.FC<ErrorAlertProps> = ({
const theme = useTheme();
const renderTrigger = () => {
const icon =
- type === 'warning' ? <WarningOutlined /> : <ExclamationCircleOutlined />;
+ type === 'warning' ? (
+ <Icons.WarningOutlined />
+ ) : (
+ <Icons.ExclamationCircleOutlined />
+ );
const color =
type === 'warning' ? theme.colors.warning.base : theme.colors.error.base;
return (
diff --git a/superset-frontend/src/components/ErrorMessage/IssueCode.tsx b/superset-frontend/src/components/ErrorMessage/IssueCode.tsx
index f862f3589e..35cf3ec8d9 100644
--- a/superset-frontend/src/components/ErrorMessage/IssueCode.tsx
+++ b/superset-frontend/src/components/ErrorMessage/IssueCode.tsx
@@ -16,12 +16,16 @@
* specific language governing permissions and limitations
* under the License.
*/
+import Icons from 'src/components/Icons';
+import { useTheme } from '@superset-ui/core';
+
interface IssueCodeProps {
code: number;
message: string;
}
export default function IssueCode({ code, message }: IssueCodeProps) {
+ const theme = useTheme();
return (
<>
{message}{' '}
@@ -31,9 +35,7 @@ export default function IssueCode({ code, message }: IssueCodeProps) {
target="_blank"
aria-label="Superset docs link"
>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-external-link" />
+ <Icons.Full iconSize="m" iconColor={theme.colors.primary.dark1} />
</a>
</>
);
diff --git a/superset-frontend/src/components/FaveStar/FaveStar.test.tsx b/superset-frontend/src/components/FaveStar/FaveStar.test.tsx
index 5c2cb1fc0a..f8c63500f6 100644
--- a/superset-frontend/src/components/FaveStar/FaveStar.test.tsx
+++ b/superset-frontend/src/components/FaveStar/FaveStar.test.tsx
@@ -32,9 +32,7 @@ test('render right content', async () => {
const { rerender, findByRole } = render(<FaveStar {...props} isStarred />);
expect(screen.getByRole('button')).toBeInTheDocument();
- expect(
- screen.getByRole('img', { name: 'favorite-selected' }),
- ).toBeInTheDocument();
+ expect(screen.getByRole('img', { name: 'starred' })).toBeInTheDocument();
expect(props.saveFaveStar).toHaveBeenCalledTimes(0);
userEvent.click(screen.getByRole('button'));
@@ -42,9 +40,7 @@ test('render right content', async () => {
expect(props.saveFaveStar).toHaveBeenCalledWith(props.itemId, true);
rerender(<FaveStar {...props} />);
- expect(
- await findByRole('img', { name: 'favorite-unselected' }),
- ).toBeInTheDocument();
+ expect(await findByRole('img', { name: 'unstarred' })).toBeInTheDocument();
expect(props.saveFaveStar).toHaveBeenCalledTimes(1);
userEvent.click(screen.getByRole('button'));
@@ -83,9 +79,7 @@ test('Call fetchFaveStar on first render and on itemId change', async () => {
};
const { rerender, findByRole } = render(<FaveStar {...props} />);
- expect(
- await findByRole('img', { name: 'favorite-unselected' }),
- ).toBeInTheDocument();
+ expect(await findByRole('img', { name: 'unstarred' })).toBeInTheDocument();
expect(props.fetchFaveStar).toHaveBeenCalledTimes(1);
expect(props.fetchFaveStar).toHaveBeenCalledWith(props.itemId);
diff --git a/superset-frontend/src/components/FaveStar/index.tsx b/superset-frontend/src/components/FaveStar/index.tsx
index 49c7a71cd0..262be12df3 100644
--- a/superset-frontend/src/components/FaveStar/index.tsx
+++ b/superset-frontend/src/components/FaveStar/index.tsx
@@ -19,7 +19,7 @@
import { useCallback, useEffect, MouseEvent } from 'react';
-import { css, t, styled } from '@superset-ui/core';
+import { css, t, styled, useTheme } from '@superset-ui/core';
import { Tooltip } from 'src/components/Tooltip';
import Icons from 'src/components/Icons';
@@ -46,6 +46,7 @@ const FaveStar = ({
saveFaveStar,
fetchFaveStar,
}: FaveStarProps) => {
+ const theme = useTheme();
useEffect(() => {
fetchFaveStar?.(itemId);
}, [fetchFaveStar, itemId]);
@@ -66,7 +67,19 @@ const FaveStar = ({
data-test="fave-unfave-icon"
role="button"
>
- {isStarred ? <Icons.FavoriteSelected /> : <Icons.FavoriteUnselected />}
+ {isStarred ? (
+ <Icons.StarFilled
+ aria-label="starred"
+ iconSize="l"
+ iconColor={theme.colors.warning.base}
+ />
+ ) : (
+ <Icons.StarOutlined
+ aria-label="unstarred"
+ iconSize="l"
+ iconColor={theme.colors.grayscale.light1}
+ />
+ )}
</StyledLink>
);
diff --git a/superset-frontend/src/components/IconTooltip/IconTooltip.stories.tsx b/superset-frontend/src/components/IconTooltip/IconTooltip.stories.tsx
index 875d6375e8..2e5f3a280a 100644
--- a/superset-frontend/src/components/IconTooltip/IconTooltip.stories.tsx
+++ b/superset-frontend/src/components/IconTooltip/IconTooltip.stories.tsx
@@ -17,6 +17,7 @@
* under the License.
*/
import Icons from 'src/components/Icons';
+import { css, useTheme } from '@superset-ui/core';
import { IconTooltip, Props } from '.';
export default {
@@ -38,10 +39,16 @@ const PLACEMENTS = [
'topRight',
];
+const theme = useTheme();
+
export const InteractiveIconTooltip = (args: Props) => (
- <div css={{ margin: '40px 70px' }}>
+ <div
+ css={css`
+ margin: ${theme.gridUnit * 10}px ${theme.gridUnit * 17.5}px;
+ `}
+ >
<IconTooltip {...args}>
- <Icons.Info />
+ <Icons.InfoCircleOutlined />
</IconTooltip>
</div>
);
diff --git a/superset-frontend/src/components/Icons/AntdEnhanced.tsx b/superset-frontend/src/components/Icons/AntdEnhanced.tsx
index 90d7da612b..42c9ad7463 100644
--- a/superset-frontend/src/components/Icons/AntdEnhanced.tsx
+++ b/superset-frontend/src/components/Icons/AntdEnhanced.tsx
@@ -24,16 +24,24 @@ import {
AlignLeftOutlined,
AlignRightOutlined,
ApartmentOutlined,
+ AppstoreOutlined,
+ AreaChartOutlined,
ArrowRightOutlined,
BarChartOutlined,
BellOutlined,
BookOutlined,
+ CaretUpOutlined,
CaretDownOutlined,
+ CaretLeftOutlined,
+ CaretRightOutlined,
CalendarOutlined,
- CaretUpOutlined,
CheckOutlined,
+ CheckCircleOutlined,
+ CheckCircleFilled,
CheckSquareOutlined,
CloseOutlined,
+ CloseCircleOutlined,
+ ClockCircleOutlined,
ColumnWidthOutlined,
CommentOutlined,
ConsoleSqlOutlined,
@@ -42,24 +50,37 @@ import {
DatabaseOutlined,
DeleteFilled,
DownSquareOutlined,
+ DeleteOutlined,
DownOutlined,
DownloadOutlined,
EditOutlined,
+ EllipsisOutlined,
ExclamationCircleOutlined,
+ ExclamationCircleFilled,
EyeOutlined,
EyeInvisibleOutlined,
FallOutlined,
+ FieldTimeOutlined,
FileImageOutlined,
FileOutlined,
+ FileTextOutlined,
FireOutlined,
FullscreenExitOutlined,
FullscreenOutlined,
FundProjectionScreenOutlined,
+ FunctionOutlined,
InfoCircleOutlined,
+ InfoCircleFilled,
+ InsertRowAboveOutlined,
InsertRowBelowOutlined,
LineChartOutlined,
+ LinkOutlined,
+ MailOutlined,
+ MinusCircleOutlined,
LoadingOutlined,
MonitorOutlined,
+ MoreOutlined,
+ PieChartOutlined,
PicCenterOutlined,
PlusCircleOutlined,
PlusOutlined,
@@ -68,33 +89,54 @@ import {
SaveOutlined,
SearchOutlined,
SettingOutlined,
+ StarOutlined,
+ StarFilled,
StopOutlined,
SyncOutlined,
+ TagOutlined,
TagsOutlined,
+ TableOutlined,
+ LockOutlined,
UnlockOutlined,
+ UploadOutlined,
UpOutlined,
UserOutlined,
+ VerticalAlignBottomOutlined,
+ VerticalAlignTopOutlined,
VerticalLeftOutlined,
VerticalRightOutlined,
+ NumberOutlined,
+ ThunderboltOutlined,
+ FilterOutlined,
+ UnorderedListOutlined,
+ WarningOutlined,
} from '@ant-design/icons';
-import { StyledIcon } from './Icon';
-import IconType from './IconType';
+import { IconType } from './types';
+import { BaseIconComponent } from './BaseIcon';
const AntdIcons = {
AlignCenterOutlined,
AlignLeftOutlined,
AlignRightOutlined,
ApartmentOutlined,
+ AppstoreOutlined,
+ AreaChartOutlined,
ArrowRightOutlined,
BarChartOutlined,
BellOutlined,
BookOutlined,
+ CaretUpOutlined,
CaretDownOutlined,
+ CaretLeftOutlined,
+ CaretRightOutlined,
CalendarOutlined,
- CaretUpOutlined,
CheckOutlined,
+ CheckCircleOutlined,
+ CheckCircleFilled,
CheckSquareOutlined,
CloseOutlined,
+ CloseCircleOutlined,
+ ClockCircleOutlined,
ColumnWidthOutlined,
CommentOutlined,
ConsoleSqlOutlined,
@@ -103,24 +145,37 @@ const AntdIcons = {
DatabaseOutlined,
DeleteFilled,
DownSquareOutlined,
+ DeleteOutlined,
DownOutlined,
DownloadOutlined,
EditOutlined,
+ EllipsisOutlined,
ExclamationCircleOutlined,
+ ExclamationCircleFilled,
EyeOutlined,
EyeInvisibleOutlined,
FallOutlined,
+ FieldTimeOutlined,
FileImageOutlined,
FileOutlined,
+ FileTextOutlined,
FireOutlined,
FullscreenExitOutlined,
FullscreenOutlined,
FundProjectionScreenOutlined,
+ FunctionOutlined,
InfoCircleOutlined,
+ InfoCircleFilled,
+ InsertRowAboveOutlined,
InsertRowBelowOutlined,
LineChartOutlined,
+ LinkOutlined,
LoadingOutlined,
+ MailOutlined,
+ MinusCircleOutlined,
MonitorOutlined,
+ MoreOutlined,
+ PieChartOutlined,
PicCenterOutlined,
PlusCircleOutlined,
PlusOutlined,
@@ -129,25 +184,39 @@ const AntdIcons = {
SaveOutlined,
SearchOutlined,
SettingOutlined,
+ StarOutlined,
+ StarFilled,
StopOutlined,
SyncOutlined,
+ TagOutlined,
TagsOutlined,
+ TableOutlined,
+ LockOutlined,
+ UploadOutlined,
UnlockOutlined,
UpOutlined,
UserOutlined,
+ VerticalAlignBottomOutlined,
+ VerticalAlignTopOutlined,
VerticalLeftOutlined,
VerticalRightOutlined,
+ NumberOutlined,
+ ThunderboltOutlined,
+ FilterOutlined,
+ UnorderedListOutlined,
+ WarningOutlined,
};
const AntdEnhancedIcons = Object.keys(AntdIcons)
.filter(k => !k.includes('TwoTone'))
.map(k => ({
- [k]: (props: IconType) => {
- const whatRole = props?.onClick ? 'button' : 'img';
- // @ts-ignore TODO(hainenber): fix the type compatiblity between
- // StyledIcon component prop and AntdIcon values
- return <StyledIcon component={AntdIcons[k]} role={whatRole} {...props} />;
- },
+ [k]: (props: IconType) => (
+ <BaseIconComponent
+ component={AntdIcons[k as keyof typeof AntdIcons]}
+ fileName={k}
+ {...props}
+ />
+ ),
}))
.reduce((l, r) => ({ ...l, ...r }));
diff --git a/superset-frontend/src/components/Icons/BaseIcon.tsx b/superset-frontend/src/components/Icons/BaseIcon.tsx
new file mode 100644
index 0000000000..68167d3cd0
--- /dev/null
+++ b/superset-frontend/src/components/Icons/BaseIcon.tsx
@@ -0,0 +1,97 @@
+/**
+ * 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 { css, useTheme } from '@superset-ui/core';
+import { AntdIconType, BaseIconProps, CustomIconType, IconType } from './types';
+
+const genAriaLabel = (fileName: string) => {
+ const name = fileName.replace(/_/g, '-'); // Replace underscores with dashes
+ const words = name.split(/(?=[A-Z])/); // Split at uppercase letters
+
+ if (words.length === 2) {
+ return words[0].toLowerCase();
+ }
+
+ if (words.length >= 3) {
+ return `${words[0].toLowerCase()}-${words[1].toLowerCase()}`;
+ }
+
+ return name.toLowerCase();
+};
+
+export const BaseIconComponent: React.FC<
+ BaseIconProps & Omit<IconType, 'component'>
+> = ({
+ component: Component,
+ iconColor,
+ iconSize,
+ viewBox,
+ customIcons,
+ ...rest
+}) => {
+ const theme = useTheme();
+ const iconCss = css`
+ color: ${iconColor || theme.colors.grayscale.base};
+ font-size: ${iconSize
+ ? `${theme.typography.sizes[iconSize] || theme.typography.sizes.m}px`
+ : '24px'};
+ `;
+ const whatRole = rest?.onClick ? 'button' : 'img';
+ const ariaLabel = genAriaLabel(rest.fileName || '');
+
+ return customIcons ? (
+ <span
+ role={whatRole}
+ aria-label={ariaLabel}
+ data-test={ariaLabel}
+ css={[
+ css`
+ display: inline-flex;
+ align-items: center;
+ line-height: 0;
+ vertical-align: middle;
+ `,
+ iconCss,
+ ]}
+ >
+ <Component
+ viewBox={viewBox || '0 0 24 24'}
+ width={
+ iconSize
+ ? `${theme.typography.sizes[iconSize] || theme.typography.sizes.m}px`
+ : '24px'
+ }
+ height={
+ iconSize
+ ? `${theme.typography.sizes[iconSize] || theme.typography.sizes.m}px`
+ : '24px'
+ }
+ {...(rest as CustomIconType)}
+ />
+ </span>
+ ) : (
+ <Component
+ css={iconCss}
+ role={whatRole}
+ aria-label={ariaLabel}
+ data-test={ariaLabel}
+ {...(rest as AntdIconType)}
+ />
+ );
+};
diff --git a/superset-frontend/src/components/Icons/Icon.tsx b/superset-frontend/src/components/Icons/Icon.tsx
index 7e299cc520..3c27ca6470 100644
--- a/superset-frontend/src/components/Icons/Icon.tsx
+++ b/superset-frontend/src/components/Icons/Icon.tsx
@@ -18,44 +18,14 @@
*/
import { FC, SVGProps, useEffect, useRef, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import AntdIcon from '@ant-design/icons';
-import { styled } from '@superset-ui/core';
import TransparentIcon from 'src/assets/images/icons/transparent.svg';
-import IconType from './IconType';
+import { IconType } from './types';
+import { BaseIconComponent } from './BaseIcon';
-const AntdIconComponent = ({
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- iconColor,
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- iconSize,
- viewBox,
- ...rest
-}: Omit<IconType, 'ref' | 'css'>) => (
- <AntdIcon viewBox={viewBox || '0 0 24 24'} {...rest} />
-);
-
-export const StyledIcon = styled(AntdIconComponent)<IconType>`
- ${({ iconColor }) => iconColor && `color: ${iconColor};`};
- span {
- // Fixing alignement on some of the icons
- line-height: 0px;
- }
- font-size: ${({ iconSize, theme }) =>
- iconSize
- ? `${theme.typography.sizes[iconSize] || theme.typography.sizes.m}px`
- : '24px'};
-`;
-
-export interface IconProps extends IconType {
- fileName: string;
-}
-
-export const Icon = (props: IconProps) => {
- const { fileName, ...iconProps } = props;
+export const Icon = (props: IconType) => {
const [, setLoaded] = useState(false);
const ImportedSVG = useRef<FC<SVGProps<SVGSVGElement>>>();
- const name = fileName.replace('_', '-');
+ const { fileName } = props;
useEffect(() => {
let cancelled = false;
@@ -73,14 +43,10 @@ export const Icon = (props: IconProps) => {
};
}, [fileName, ImportedSVG]);
- const whatRole = props?.onClick ? 'button' : 'img';
-
return (
- <StyledIcon
+ <BaseIconComponent
component={ImportedSVG.current || TransparentIcon}
- aria-label={name}
- role={whatRole}
- {...iconProps}
+ {...props}
/>
);
};
diff --git a/superset-frontend/src/components/Icons/Icons.stories.tsx b/superset-frontend/src/components/Icons/Icons.stories.tsx
index 280b2e768a..017be29521 100644
--- a/superset-frontend/src/components/Icons/Icons.stories.tsx
+++ b/superset-frontend/src/components/Icons/Icons.stories.tsx
@@ -20,7 +20,7 @@ import { useState } from 'react';
import { styled, supersetTheme } from '@superset-ui/core';
import { Input } from 'antd-v5';
import Icons from '.';
-import IconType from './IconType';
+import IconType from './types';
import Icon from './Icon';
export default {
@@ -106,7 +106,7 @@ InteractiveIcons.argTypes = {
iconSize: {
defaultValue: 'xl',
control: { type: 'inline-radio' },
- options: ['s', 'l', 'm', 'xl', 'xxl'],
+ options: ['s', 'm', 'l', 'xl', 'xxl'],
},
iconColor: {
defaultValue: null,
diff --git a/superset-frontend/src/components/Icons/index.tsx b/superset-frontend/src/components/Icons/index.tsx
index ee09aceb10..eb3fa51605 100644
--- a/superset-frontend/src/components/Icons/index.tsx
+++ b/superset-frontend/src/components/Icons/index.tsx
@@ -21,156 +21,42 @@ import { FC } from 'react';
import { startCase } from 'lodash';
import AntdEnhancedIcons from './AntdEnhanced';
import Icon from './Icon';
-import IconType from './IconType';
+import IconType from './types';
const IconFileNames = [
- 'alert',
- 'alert_solid',
- 'alert_solid_small',
- 'area-chart-tile',
- 'bar-chart-tile',
+ // to keep custom
+ 'ballot',
'big-number-chart-tile',
'binoculars',
- 'bolt',
- 'bolt_small',
- 'bolt_small_run',
- 'calendar',
- 'cancel',
- 'cancel_solid',
- 'cancel-x',
- 'card_view',
- 'cards',
- 'cards_locked',
- 'caret_down',
- 'caret_left',
- 'caret_right',
- 'caret_up',
+ 'category',
'certified',
- 'check',
'checkbox-half',
'checkbox-off',
'checkbox-on',
- 'circle_check',
- 'circle_check_solid',
- 'circle',
- 'clock',
- 'close',
- 'code',
- 'cog',
- 'collapse',
- 'color_palette',
- 'current-rendered-tile',
- 'components',
- 'copy',
- 'cursor_target',
- 'database',
- 'dataset_physical',
- 'dataset_virtual_greyscale',
- 'dataset_virtual',
- 'download',
+ 'circle_solid',
'drag',
- 'edit_alt',
- 'edit',
- 'email',
+ 'error_solid_small_red',
'error',
- 'error_solid',
- 'error_solid_small',
- 'exclamation',
- 'expand',
- 'eye',
- 'eye_slash',
- 'favorite-selected',
- 'favorite_small_selected',
- 'favorite-unselected',
- 'field_abc',
- 'field_boolean',
- 'field_date',
- 'field_derived',
- 'field_num',
- 'field_struct',
- 'file',
- 'filter',
- 'filter_small',
- 'folder',
'full',
- 'function_x',
- 'gear',
- 'grid',
- 'image',
- 'import',
- 'info',
- 'info-solid',
- 'info_solid_small',
- 'join',
- 'keyboard',
'layers',
- 'lightbulb',
- 'line-chart-tile',
- 'link',
- 'list',
- 'list_view',
- 'location',
- 'lock_locked',
- 'lock_unlocked',
- 'map',
- 'message',
- 'minus',
- 'minus_solid',
- 'more_horiz',
- 'more_vert',
- 'move',
- 'nav_charts',
- 'nav_dashboard',
- 'nav_data',
- 'nav_explore',
- 'nav_home',
- 'nav_lab',
- 'note',
- 'offline',
- 'paperclip',
- 'pie-chart-tile',
- 'placeholder',
- 'plus',
- 'plus_large',
- 'plus_small',
- 'plus_solid',
'queued',
- 'refresh',
+ 'redo',
'running',
- 'save',
- 'sql',
- 'search',
- 'server',
- 'share',
'slack',
+ 'square',
'sort_asc',
'sort_desc',
'sort',
- 'table',
- 'table-chart-tile',
- 'tag',
- 'trash',
- 'triangle_change',
+ 'transparent',
'triangle_down',
- 'triangle_up',
- 'up-level',
- 'user',
- 'warning',
- 'warning_solid',
- 'x-large',
- 'x-small',
- 'tags',
- 'ballot',
- 'category',
'undo',
- 'redo',
];
const iconOverrides: Record<string, FC<IconType>> = {};
IconFileNames.forEach(fileName => {
const keyName = startCase(fileName).replace(/ /g, '');
iconOverrides[keyName] = (props: IconType) => (
- <Icon fileName={fileName} {...props} />
+ <Icon customIcons fileName={fileName} {...props} />
);
});
diff --git a/superset-frontend/src/components/Icons/IconType.ts b/superset-frontend/src/components/Icons/types.ts
similarity index 66%
rename from superset-frontend/src/components/Icons/IconType.ts
rename to superset-frontend/src/components/Icons/types.ts
index b055cb06bc..4d6a425572 100644
--- a/superset-frontend/src/components/Icons/IconType.ts
+++ b/superset-frontend/src/components/Icons/types.ts
@@ -16,13 +16,24 @@
* specific language governing permissions and limitations
* under the License.
*/
-// eslint-disable-next-line no-restricted-imports
-import { IconComponentProps } from '@ant-design/icons/lib/components/Icon';
+import Icon, {
+ IconComponentProps,
+} from '@ant-design/icons/lib/components/Icon';
+import { ComponentType, SVGProps } from 'react';
-type AntdIconType = IconComponentProps;
-type IconType = AntdIconType & {
+export type AntdIconProps = IconComponentProps;
+export type IconType = AntdIconProps & {
iconColor?: string;
iconSize?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+ fileName?: string;
+ customIcons?: boolean;
};
+export type CustomIconType = ComponentType<SVGProps<SVGSVGElement>>;
+export type AntdIconType = typeof Icon;
+
+export interface BaseIconProps {
+ component: CustomIconType | AntdIconType;
+}
+
export default IconType;
diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx b/superset-frontend/src/components/InfoTooltip/index.tsx
index 8437251de3..3ade7f0efa 100644
--- a/superset-frontend/src/components/InfoTooltip/index.tsx
+++ b/superset-frontend/src/components/InfoTooltip/index.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
-import { styled, useTheme } from '@superset-ui/core';
+import { styled, useTheme, css } from '@superset-ui/core';
import { Tooltip } from 'src/components/Tooltip';
import Icons from 'src/components/Icons';
import { ActionType } from 'src/types/Action';
@@ -61,7 +61,15 @@ const defaultOverlayStyle = {
fontSize: '12px',
lineHeight: '16px',
};
-
+const InfoIconContainer = styled.div`
+ ${({ theme }) => css`
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ margin-left: ${theme.gridUnit}px;
+ `}
+`;
const defaultColor = 'rgba(0,0,0,0.9)';
export default function InfoTooltip({
@@ -86,7 +94,15 @@ export default function InfoTooltip({
overlayStyle={overlayStyle}
color={bgColor}
>
- <Icons.InfoSolidSmall style={alteredIconStyle} viewBox={viewBox} />
+ <InfoIconContainer>
+ <Icons.InfoCircleFilled
+ aria-label="info-tooltip"
+ data-test="info-tooltip-icon"
+ iconSize="m"
+ style={alteredIconStyle}
+ viewBox={viewBox}
+ />
+ </InfoIconContainer>
</StyledTooltip>
);
}
diff --git a/superset-frontend/src/components/Label/reusable/DatasetTypeLabel.tsx b/superset-frontend/src/components/Label/reusable/DatasetTypeLabel.tsx
index 7379665583..e1f7fe75c7 100644
--- a/superset-frontend/src/components/Label/reusable/DatasetTypeLabel.tsx
+++ b/superset-frontend/src/components/Label/reusable/DatasetTypeLabel.tsx
@@ -18,7 +18,7 @@
*/
import Icons from 'src/components/Icons';
import Label from 'src/components/Label';
-import { t } from '@superset-ui/core';
+import { t, useTheme } from '@superset-ui/core';
// Define the prop types for DatasetTypeLabel
interface DatasetTypeLabelProps {
@@ -28,11 +28,15 @@ interface DatasetTypeLabelProps {
const SIZE = 's'; // Define the size as a constant
const DatasetTypeLabel: React.FC<DatasetTypeLabelProps> = ({ datasetType }) => {
+ const theme = useTheme();
const label: string =
datasetType === 'physical' ? t('Physical') : t('Virtual');
const icon =
datasetType === 'physical' ? (
- <Icons.Table iconSize={SIZE} />
+ <Icons.InsertRowAboveOutlined
+ iconSize={SIZE}
+ iconColor={theme.colors.primary.dark1}
+ />
) : (
<Icons.ConsoleSqlOutlined iconSize={SIZE} />
);
diff --git a/superset-frontend/src/components/Label/reusable/PublishedLabel.tsx b/superset-frontend/src/components/Label/reusable/PublishedLabel.tsx
index a73be8609e..ddff92e010 100644
--- a/superset-frontend/src/components/Label/reusable/PublishedLabel.tsx
+++ b/superset-frontend/src/components/Label/reusable/PublishedLabel.tsx
@@ -18,7 +18,7 @@
*/
import Icons from 'src/components/Icons';
import Label from 'src/components/Label';
-import { t } from '@superset-ui/core';
+import { t, useTheme } from '@superset-ui/core';
// Define props for the PublishedLabel component
interface PublishedLabelProps {
@@ -30,11 +30,15 @@ const PublishedLabel: React.FC<PublishedLabelProps> = ({
isPublished,
onClick,
}) => {
+ const theme = useTheme();
const label = isPublished ? t('Published') : t('Draft');
const icon = isPublished ? (
- <Icons.CircleCheck iconSize="s" />
+ <Icons.CheckCircleOutlined
+ iconSize="s"
+ iconColor={theme.colors.primary.dark2}
+ />
) : (
- <Icons.Minus iconSize="s" />
+ <Icons.MinusCircleOutlined iconSize="s" />
);
const labelType = isPublished ? 'primary' : 'secondary';
diff --git a/superset-frontend/src/components/LastUpdated/LastUpdated.test.tsx b/superset-frontend/src/components/LastUpdated/LastUpdated.test.tsx
index f020a47448..3e54656f12 100644
--- a/superset-frontend/src/components/LastUpdated/LastUpdated.test.tsx
+++ b/superset-frontend/src/components/LastUpdated/LastUpdated.test.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { fireEvent, render } from 'spec/helpers/testing-library';
+import { fireEvent, render, screen } from 'spec/helpers/testing-library';
import LastUpdated from '.';
@@ -27,11 +27,13 @@ test('renders the base component (no refresh)', () => {
expect(getByText(/^Last Updated .+$/)).toBeInTheDocument();
});
-test('renders a refresh action', async () => {
+test('renders a refresh action', () => {
const mockAction = jest.fn();
- const { getByLabelText } = render(
- <LastUpdated updatedAt={updatedAt} update={mockAction} />,
- );
- fireEvent.click(getByLabelText('refresh'));
+ render(<LastUpdated updatedAt={updatedAt} update={mockAction} />);
+
+ const button = screen.getByRole('button');
+ expect(button).toBeInTheDocument();
+
+ fireEvent.click(button);
expect(mockAction).toHaveBeenCalled();
});
diff --git a/superset-frontend/src/components/LastUpdated/index.tsx b/superset-frontend/src/components/LastUpdated/index.tsx
index db7618dcf8..f108d33680 100644
--- a/superset-frontend/src/components/LastUpdated/index.tsx
+++ b/superset-frontend/src/components/LastUpdated/index.tsx
@@ -24,7 +24,7 @@ import {
} from 'react';
import { extendedDayjs } from 'src/utils/dates';
-import { t, styled } from '@superset-ui/core';
+import { t, styled, css } from '@superset-ui/core';
import Icons from 'src/components/Icons';
import dayjs from 'dayjs';
@@ -49,14 +49,15 @@ const TextStyles = styled.span`
color: ${({ theme }) => theme.colors.grayscale.base};
`;
-const Refresh = styled(Icons.Refresh)`
- color: ${({ theme }) => theme.colors.primary.base};
+const RefreshIcon = styled(Icons.SyncOutlined)`
+ ${({ theme }) => `
width: auto;
- height: ${({ theme }) => theme.gridUnit * 5}px;
+ height: ${theme.gridUnit * 5}px;
position: relative;
- top: ${({ theme }) => theme.gridUnit}px;
- left: ${({ theme }) => theme.gridUnit}px;
+ top: ${theme.gridUnit}px;
+ left: ${theme.gridUnit}px;
cursor: pointer;
+`};
`;
export const LastUpdated: FunctionComponent<LastUpdatedProps> = ({
@@ -81,7 +82,15 @@ export const LastUpdated: FunctionComponent<LastUpdatedProps> = ({
return (
<TextStyles>
{t('Last Updated %s', timeSince.isValid() ? timeSince.calendar() : '--')}
- {update && <Refresh onClick={update} />}
+ {update && (
+ <RefreshIcon
+ iconSize="l"
+ css={css`
+ vertical-align: text-bottom;
+ `}
+ onClick={update}
+ />
+ )}
</TextStyles>
);
};
diff --git a/superset-frontend/src/components/ListView/ActionsBar.tsx b/superset-frontend/src/components/ListView/ActionsBar.tsx
index 2fd04d5cb5..d9d6170133 100644
--- a/superset-frontend/src/components/ListView/ActionsBar.tsx
+++ b/superset-frontend/src/components/ListView/ActionsBar.tsx
@@ -72,7 +72,7 @@ export default function ActionsBar({ actions }: ActionsBarProps) {
data-test={action.label}
onClick={action.onClick}
>
- <ActionIcon />
+ <ActionIcon iconSize="l" />
</ActionWrapper>
</Tooltip>
);
diff --git a/superset-frontend/src/components/ListView/Filters/Search.tsx b/superset-frontend/src/components/ListView/Filters/Search.tsx
index 85f099f16d..da0243310a 100644
--- a/superset-frontend/src/components/ListView/Filters/Search.tsx
+++ b/superset-frontend/src/components/ListView/Filters/Search.tsx
@@ -24,9 +24,9 @@ import {
ChangeEvent,
} from 'react';
-import { t, styled } from '@superset-ui/core';
+import { t, styled, useTheme, css } from '@superset-ui/core';
import Icons from 'src/components/Icons';
-import { Input } from 'src/components/Input';
+import { Input as AntdInput } from 'src/components/Input';
import { SELECT_WIDTH } from 'src/components/ListView/utils';
import { FormLabel } from 'src/components/Form';
import InfoTooltip from 'src/components/InfoTooltip';
@@ -43,8 +43,8 @@ const Container = styled.div`
width: ${SELECT_WIDTH}px;
`;
-const SearchIcon = styled(Icons.Search)`
- color: ${({ theme }) => theme.colors.grayscale.light1};
+const StyledInput = styled(AntdInput)`
+ border-radius: ${({ theme }) => theme.gridUnit}px;
`;
function SearchFilter(
@@ -57,6 +57,7 @@ function SearchFilter(
}: SearchHeaderProps,
ref: RefObject<FilterHandler>,
) {
+ const theme = useTheme();
const [value, setValue] = useState(initialValue || '');
const handleSubmit = () => {
if (value) {
@@ -79,11 +80,18 @@ function SearchFilter(
return (
<Container>
- <FormLabel>{Header}</FormLabel>
- {toolTipDescription && (
- <InfoTooltip tooltip={toolTipDescription} viewBox="0 -7 28 28" />
- )}
- <Input
+ <div
+ css={css`
+ display: flex;
+ align-items: start;
+ `}
+ >
+ <FormLabel>{Header}</FormLabel>
+ {toolTipDescription && (
+ <InfoTooltip tooltip={toolTipDescription} viewBox="0 -7 28 28" />
+ )}
+ </div>
+ <StyledInput
allowClear
data-test="filters-search"
placeholder={t('Type a value')}
@@ -92,7 +100,12 @@ function SearchFilter(
onChange={handleChange}
onPressEnter={handleSubmit}
onBlur={handleSubmit}
- prefix={<SearchIcon iconSize="l" />}
+ prefix={
+ <Icons.SearchOutlined
+ iconColor={theme.colors.grayscale.light1}
+ iconSize="l"
+ />
+ }
/>
</Container>
);
diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx
index 948029eafe..3249d0b0a7 100644
--- a/superset-frontend/src/components/ListView/ListView.tsx
+++ b/superset-frontend/src/components/ListView/ListView.tsx
@@ -187,7 +187,7 @@ const ViewModeToggle = ({
}}
className={cx('toggle-button', { active: mode === 'card' })}
>
- <Icons.CardView />
+ <Icons.AppstoreOutlined iconSize="xl" />
</div>
<div
role="button"
@@ -198,7 +198,7 @@ const ViewModeToggle = ({
}}
className={cx('toggle-button', { active: mode === 'table' })}
>
- <Icons.ListView />
+ <Icons.UnorderedListOutlined iconSize="xl" />
</div>
</ViewModeContainer>
);
diff --git a/superset-frontend/src/components/ListViewCard/ListViewCard.stories.tsx b/superset-frontend/src/components/ListViewCard/ListViewCard.stories.tsx
index 61d2c70a31..61ff54d60b 100644
--- a/superset-frontend/src/components/ListViewCard/ListViewCard.stories.tsx
+++ b/superset-frontend/src/components/ListViewCard/ListViewCard.stories.tsx
@@ -74,15 +74,15 @@ export const SupersetListViewCard = ({
dropdownRender={() => (
<Menu>
<Menu.Item role="button" tabIndex={0} onClick={action('Delete')}>
- <Icons.Trash /> Delete
+ <Icons.DeleteOutlined /> Delete
</Menu.Item>
<Menu.Item role="button" tabIndex={0} onClick={action('Edit')}>
- <Icons.EditAlt /> Edit
+ <Icons.EditOutlined /> Edit
</Menu.Item>
</Menu>
)}
>
- <Icons.MoreHoriz />
+ <Icons.EllipsisOutlined />
</Dropdown>
</ListViewCard.Actions>
}
diff --git a/superset-frontend/src/components/Menu/index.tsx b/superset-frontend/src/components/Menu/index.tsx
index 81374c8297..aea3909f66 100644
--- a/superset-frontend/src/components/Menu/index.tsx
+++ b/superset-frontend/src/components/Menu/index.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { styled } from '@superset-ui/core';
+import { styled, css } from '@superset-ui/core';
import { ReactElement } from 'react';
import { Menu as AntdMenu } from 'antd-v5';
import { MenuProps as AntdMenuProps } from 'antd-v5/es/menu';
@@ -81,61 +81,61 @@ const StyledMenu = styled(AntdMenu)`
`;
const StyledNav = styled(AntdMenu)`
- display: flex;
- align-items: center;
- height: 100%;
- gap: 0;
- &.antd5-menu-horizontal > .antd5-menu-item {
- height: 100%;
+ ${({ theme }) => css`
display: flex;
align-items: center;
- margin: 0;
- border-bottom: 2px solid transparent;
- padding: ${({ theme }) => theme.gridUnit * 2}px
- ${({ theme }) => theme.gridUnit * 4}px;
- &:hover {
- background-color: ${({ theme }) => theme.colors.primary.light5};
+ height: 100%;
+ gap: 0;
+ &.antd5-menu-horizontal > .antd5-menu-item {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ margin: 0;
border-bottom: 2px solid transparent;
- & a:after {
- opacity: 1;
- width: 100%;
+ padding: ${theme.gridUnit * 2}px ${theme.gridUnit * 4}px;
+ &:hover {
+ background-color: ${theme.colors.primary.light5};
+ border-bottom: 2px solid transparent;
+ & a:after {
+ opacity: 1;
+ width: 100%;
+ }
}
}
- }
- &.antd5-menu-horizontal > .antd5-menu-item-selected {
- box-sizing: border-box;
- border-bottom: 2px solid ${({ theme }) => theme.colors.primary.base};
- }
+ &.antd5-menu-horizontal > .antd5-menu-item-selected {
+ box-sizing: border-box;
+ border-bottom: 2px solid ${theme.colors.primary.base};
+ }
+ `}
`;
const StyledSubMenu = styled(AntdMenu.SubMenu)`
- .antd5-menu-submenu-open,
- .antd5-menu-submenu-active {
+ ${({ theme }) => css`
+ .antd5-menu-submenu-open,
+ .antd5-menu-submenu-active {
+ .antd5-menu-submenu-title {
+ &:after {
+ opacity: 1;
+ width: calc(100% - 1);
+ }
+ }
+ }
.antd5-menu-submenu-title {
+ display: flex;
+ flex-direction: row-reverse;
&:after {
- opacity: 1;
- width: calc(100% - 1);
+ content: '';
+ position: absolute;
+ bottom: -3px;
+ left: 50%;
+ width: 0;
+ height: 3px;
+ opacity: 0;
+ transform: translateX(-50%);
+ transition: all ${theme.transitionTiming}s;
}
}
- }
- .antd5-dropdown-menu-submenu-title {
- align-items: center;
- }
- .antd5-menu-submenu-title {
- display: flex;
- flex-direction: row-reverse;
- &:after {
- content: '';
- position: absolute;
- bottom: -3px;
- left: 50%;
- width: 0;
- height: 3px;
- opacity: 0;
- transform: translateX(-50%);
- transition: all ${({ theme }) => theme.transitionTiming}s;
- }
- }
+ `}
`;
export type MenuMode = AntdMenuProps['mode'];
diff --git a/superset-frontend/src/components/MessageToasts/Toast.tsx b/superset-frontend/src/components/MessageToasts/Toast.tsx
index a9bc4f8a7b..96d9063429 100644
--- a/superset-frontend/src/components/MessageToasts/Toast.tsx
+++ b/superset-frontend/src/components/MessageToasts/Toast.tsx
@@ -24,18 +24,26 @@ import Icons from 'src/components/Icons';
import { ToastType, ToastMeta } from './types';
const ToastContainer = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
+ ${({ theme }) => css`
+ display: flex;
+ justify-content: center;
+ align-items: center;
- span {
- padding: 0 11px;
- }
+ span {
+ padding: 0 ${theme.gridUnit * 2}px;
+ }
+
+ .toast__close,
+ .toast__close span {
+ padding: 0;
+ }
+ `}
`;
-const StyledIcon = (theme: SupersetTheme) => css`
+const notificationStyledIcon = (theme: SupersetTheme) => css`
min-width: ${theme.gridUnit * 5}px;
color: ${theme.colors.grayscale.base};
+ margin-right: 0;
`;
interface ToastPresenterProps {
@@ -77,16 +85,18 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
}, [handleClosePress, toast.duration]);
let className = 'toast--success';
- let icon = <Icons.CircleCheckSolid css={theme => StyledIcon(theme)} />;
+ let icon = (
+ <Icons.CheckCircleFilled css={theme => notificationStyledIcon(theme)} />
+ );
if (toast.toastType === ToastType.Warning) {
- icon = <Icons.WarningSolid css={StyledIcon} />;
+ icon = <Icons.ExclamationCircleFilled css={notificationStyledIcon} />;
className = 'toast--warning';
} else if (toast.toastType === ToastType.Danger) {
- icon = <Icons.ErrorSolid css={StyledIcon} />;
+ icon = <Icons.ExclamationCircleFilled css={notificationStyledIcon} />;
className = 'toast--danger';
} else if (toast.toastType === ToastType.Info) {
- icon = <Icons.InfoSolid css={StyledIcon} />;
+ icon = <Icons.InfoCircleFilled css={notificationStyledIcon} />;
className = 'toast--info';
}
@@ -98,10 +108,9 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
>
{icon}
<Interweave content={toast.text} noHtml={!toast.allowHtml} />
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i
- className="fa fa-close pull-right pointer"
+ <Icons.CloseOutlined
+ iconSize="m"
+ className="toast__close pointer"
role="button"
tabIndex={0}
onClick={handleClosePress}
diff --git a/superset-frontend/src/components/MetadataBar/ContentConfig.tsx b/superset-frontend/src/components/MetadataBar/ContentConfig.tsx
index de23e654a7..8a349637db 100644
--- a/superset-frontend/src/components/MetadataBar/ContentConfig.tsx
+++ b/superset-frontend/src/components/MetadataBar/ContentConfig.tsx
@@ -113,7 +113,7 @@ const config = (contentType: ContentType) => {
case MetadataType.Table:
return {
- icon: Icons.Table,
+ icon: Icons.InsertRowAboveOutlined,
title: contentType.title,
tooltip: contentType.title,
};
diff --git a/superset-frontend/src/components/Modal/Modal.tsx b/superset-frontend/src/components/Modal/Modal.tsx
index 4678e29ce4..a521586086 100644
--- a/superset-frontend/src/components/Modal/Modal.tsx
+++ b/superset-frontend/src/components/Modal/Modal.tsx
@@ -26,8 +26,7 @@ import {
useState,
} from 'react';
import { isNil } from 'lodash';
-import { styled, t } from '@superset-ui/core';
-import { css } from '@emotion/react';
+import { css, styled, t } from '@superset-ui/core';
import {
Modal as AntdModal,
ModalProps as AntdModalProps,
diff --git a/superset-frontend/src/components/PageHeaderWithActions/index.tsx b/superset-frontend/src/components/PageHeaderWithActions/index.tsx
index 68c33d78c7..8880ab0071 100644
--- a/superset-frontend/src/components/PageHeaderWithActions/index.tsx
+++ b/superset-frontend/src/components/PageHeaderWithActions/index.tsx
@@ -93,7 +93,7 @@ const buttonsStyles = (theme: SupersetTheme) => css`
align-items: center;
padding-left: ${theme.gridUnit * 2}px;
- & .fave-unfave-icon {
+ & .anticon-star {
padding: 0 ${theme.gridUnit}px;
&:first-of-type {
@@ -168,7 +168,7 @@ export const PageHeaderWithActions = ({
placement={tooltipProps?.placement}
data-test="actions-trigger"
>
- <Icons.MoreHoriz
+ <Icons.EllipsisOutlined
iconColor={theme.colors.primary.dark2}
iconSize="l"
/>
diff --git a/superset-frontend/src/components/Popover/Popover.test.tsx b/superset-frontend/src/components/Popover/Popover.test.tsx
index d31cd98600..6dcfe2c544 100644
--- a/superset-frontend/src/components/Popover/Popover.test.tsx
+++ b/superset-frontend/src/components/Popover/Popover.test.tsx
@@ -58,7 +58,7 @@ test('it should render content when not visible but forceRender=true', () => {
test('renders with icon child', async () => {
render(
<Popover content="Content sample" title="Popover title">
- <Icons.Alert>Click me</Icons.Alert>
+ <Icons.WarningOutlined>Click me</Icons.WarningOutlined>
</Popover>,
);
expect(await screen.findByRole('img')).toBeInTheDocument();
diff --git a/superset-frontend/src/components/PopoverDropdown/index.tsx b/superset-frontend/src/components/PopoverDropdown/index.tsx
index 41812ea13f..b781ff6ce4 100644
--- a/superset-frontend/src/components/PopoverDropdown/index.tsx
+++ b/superset-frontend/src/components/PopoverDropdown/index.tsx
@@ -110,9 +110,12 @@ const PopoverDropdown = (props: PopoverDropdownProps) => {
>
<div role="button" css={{ display: 'flex', alignItems: 'center' }}>
{selected && renderButton(selected)}
- <Icons.CaretDown
- iconColor={theme.colors.grayscale.base}
- css={{ marginTop: theme.gridUnit * 0.5 }}
+ <Icons.DownOutlined
+ iconSize="s"
+ css={{
+ marginTop: theme.gridUnit * 0.5,
+ marginLeft: theme.gridUnit * 0.5,
+ }}
/>
</div>
</Dropdown>
diff --git a/superset-frontend/src/components/PopoverSection/index.tsx b/superset-frontend/src/components/PopoverSection/index.tsx
index a36f8c6471..9a687357d8 100644
--- a/superset-frontend/src/components/PopoverSection/index.tsx
+++ b/superset-frontend/src/components/PopoverSection/index.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { MouseEventHandler, ReactNode } from 'react';
-import { useTheme } from '@superset-ui/core';
+import { css, useTheme } from '@superset-ui/core';
import { Tooltip } from 'src/components/Tooltip';
import Icons from 'src/components/Icons';
@@ -48,24 +48,30 @@ export default function PopoverSection({
role="button"
tabIndex={0}
onClick={onSelect}
- css={{
- display: 'flex',
- alignItems: 'center',
- cursor: onSelect ? 'pointer' : 'default',
- }}
+ css={css`
+ display: flex;
+ align-items: center;
+ cursor: ${onSelect ? 'pointer' : 'default'};
+ `}
>
<strong data-test="popover-title">{title}</strong>
{info && (
- <Tooltip title={info} css={{ marginLeft: theme.gridUnit }}>
- <Icons.InfoSolidSmall
+ <Tooltip
+ title={info}
+ css={css`
+ margin-left: ${theme.gridUnit}px;
+ margin-right: ${theme.gridUnit}px;
+ `}
+ >
+ <Icons.InfoCircleFilled
role="img"
- width={14}
- height={14}
+ iconSize="s"
iconColor={theme.colors.grayscale.light1}
/>
</Tooltip>
)}
- <Icons.Check
+ <Icons.CheckOutlined
+ iconSize="s"
role="img"
iconColor={
isSelected ? theme.colors.primary.base : theme.colors.grayscale.base
@@ -73,10 +79,10 @@ export default function PopoverSection({
/>
</div>
<div
- css={{
- marginLeft: theme.gridUnit,
- marginTop: theme.gridUnit,
- }}
+ css={css`
+ margin-left: ${theme.gridUnit}px;
+ margin-top: ${theme.gridUnit}px;
+ `}
>
{children}
</div>
diff --git a/superset-frontend/src/components/Radio/Radio.stories.tsx b/superset-frontend/src/components/Radio/Radio.stories.tsx
index 4329322b40..5155c7d23c 100644
--- a/superset-frontend/src/components/Radio/Radio.stories.tsx
+++ b/superset-frontend/src/components/Radio/Radio.stories.tsx
@@ -17,12 +17,8 @@
* under the License.
*/
import { Space } from 'src/components/Space';
-import {
- BarChartOutlined,
- DotChartOutlined,
- LineChartOutlined,
- PieChartOutlined,
-} from '@ant-design/icons';
+import Icons from 'src/components/Icons';
+import { css } from '@superset-ui/core';
import { Radio, RadioProps, RadioGroupWrapperProps } from './index';
export default {
@@ -116,7 +112,11 @@ RadioGroupWithOptionsStory.args = {
value: 1,
label: (
<Space align="center" direction="vertical">
- <LineChartOutlined style={{ fontSize: 18 }} />
+ <Icons.LineChartOutlined
+ css={css`
+ font-size: 18;
+ `}
+ />
LineChart
</Space>
),
@@ -125,7 +125,11 @@ RadioGroupWithOptionsStory.args = {
value: 2,
label: (
<Space align="center" direction="vertical">
- <DotChartOutlined style={{ fontSize: 18 }} />
+ <Icons.DotChartOutlined
+ css={css`
+ font-size: 18;
+ `}
+ />
DotChart
</Space>
),
@@ -134,7 +138,11 @@ RadioGroupWithOptionsStory.args = {
value: 3,
label: (
<Space align="center" direction="vertical">
- <BarChartOutlined style={{ fontSize: 18 }} />
+ <Icons.BarChartOutlined
+ css={css`
+ font-size: 18;
+ `}
+ />
BarChart
</Space>
),
@@ -143,7 +151,11 @@ RadioGroupWithOptionsStory.args = {
value: 4,
label: (
<Space align="center" direction="vertical">
- <PieChartOutlined style={{ fontSize: 18 }} />
+ <Icons.PieChartOutlined
+ css={css`
+ font-size: 18;
+ `}
+ />
PieChart
</Space>
),
diff --git a/superset-frontend/src/components/RefreshLabel/index.tsx b/superset-frontend/src/components/RefreshLabel/index.tsx
index 887805d6eb..1fb7771f4f 100644
--- a/superset-frontend/src/components/RefreshLabel/index.tsx
+++ b/superset-frontend/src/components/RefreshLabel/index.tsx
@@ -34,7 +34,7 @@ const RefreshLabel = ({
}: RefreshLabelProps) => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const IconWithoutRef = forwardRef((props: IconType, ref: any) => (
- <Icons.Refresh {...props} />
+ <Icons.SyncOutlined iconSize="l" {...props} />
));
return (
diff --git a/superset-frontend/src/components/Select/AsyncSelect.tsx b/superset-frontend/src/components/Select/AsyncSelect.tsx
index 5004a49a8b..29c6fd1283 100644
--- a/superset-frontend/src/components/Select/AsyncSelect.tsx
+++ b/superset-frontend/src/components/Select/AsyncSelect.tsx
@@ -88,7 +88,8 @@ import { customTagRender } from './CustomTag';
const Error = ({ error }: { error: string }) => (
<StyledError>
- <Icons.ErrorSolid /> <StyledErrorMessage>{error}</StyledErrorMessage>
+ <Icons.ExclamationCircleOutlined />{' '}
+ <StyledErrorMessage>{error}</StyledErrorMessage>
</StyledError>
);
diff --git a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx
index ba91d167dd..fe43fd8954 100644
--- a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx
+++ b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx
@@ -78,7 +78,7 @@ function HeaderWithRadioGroup(props: HeaderWithRadioGroupProps) {
iconSize="m"
iconColor={theme.colors.grayscale.light1}
css={css`
- margin-top: 3px; // we need exactly 3px to align the icon
+ margin-top: ${theme.gridUnit * 0.75}px;
margin-right: ${theme.gridUnit}px;
`}
onClick={() => setPopoverVisible(true)}
diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
index cfb7d5f818..a46be82822 100644
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@@ -126,9 +126,9 @@ export const TableOption = ({ table }: { table: Table }) => {
return (
<TableLabel title={value}>
{type === 'view' ? (
- <Icons.Eye iconSize="m" />
+ <Icons.EyeOutlined iconSize="m" />
) : (
- <Icons.Table iconSize="m" />
+ <Icons.InsertRowAboveOutlined iconSize="m" />
)}
{extra?.certification && (
<CertifiedBadge
diff --git a/superset-frontend/src/components/Tabs/Tabs.tsx b/superset-frontend/src/components/Tabs/Tabs.tsx
index 9ba165dc35..c12712976b 100644
--- a/superset-frontend/src/components/Tabs/Tabs.tsx
+++ b/superset-frontend/src/components/Tabs/Tabs.tsx
@@ -122,7 +122,7 @@ const StyledEditableTabs = styled(StyledTabs)`
`}
`;
-const StyledCancelXIcon = styled(Icons.CancelX)`
+const StyledCloseOutlined = styled(Icons.CloseOutlined)`
color: ${({ theme }) => theme.colors.grayscale.base};
`;
export const EditableTabs = Object.assign(StyledEditableTabs, {
@@ -136,7 +136,7 @@ EditableTabs.defaultProps = {
};
EditableTabs.TabPane.defaultProps = {
- closeIcon: <StyledCancelXIcon role="button" tabIndex={0} />,
+ closeIcon: <StyledCloseOutlined iconSize="s" role="button" tabIndex={0} />,
};
export const StyledLineEditableTabs = styled(EditableTabs)`
diff --git a/superset-frontend/src/components/Tags/Tag.tsx b/superset-frontend/src/components/Tags/Tag.tsx
index e8bba93742..063000b0fb 100644
--- a/superset-frontend/src/components/Tags/Tag.tsx
+++ b/superset-frontend/src/components/Tags/Tag.tsx
@@ -22,8 +22,7 @@ import TagType from 'src/types/TagType';
import { Tag as AntdTag } from 'antd-v5';
import { useMemo } from 'react';
import { Tooltip } from 'src/components/Tooltip';
-// eslint-disable-next-line no-restricted-imports
-import { CloseOutlined } from '@ant-design/icons'; // TODO: Use src/components/Icons
+import Icons from 'src/components/Icons';
const StyledTag = styled(AntdTag)`
${({ theme }) => `
@@ -32,7 +31,9 @@ const StyledTag = styled(AntdTag)`
`};
`;
-export const CustomCloseIcon = <CloseOutlined role="button" />;
+export const CustomCloseIcon = (
+ <Icons.CloseOutlined iconSize="xs" role="button" />
+);
const MAX_DISPLAY_CHAR = 20;
diff --git a/superset-frontend/src/components/Timer/index.tsx b/superset-frontend/src/components/Timer/index.tsx
index f0ae3cf059..00d7c1a751 100644
--- a/superset-frontend/src/components/Timer/index.tsx
+++ b/superset-frontend/src/components/Timer/index.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { useEffect, useRef, useState } from 'react';
-import { styled } from '@superset-ui/core';
+import { styled, useTheme } from '@superset-ui/core';
import Label, { Type } from 'src/components/Label';
import Icons from 'src/components/Icons';
@@ -41,9 +41,25 @@ export default function Timer({
startTime,
status = 'success',
}: TimerProps) {
+ const theme = useTheme();
const [clockStr, setClockStr] = useState('00:00:00.00');
const timer = useRef<ReturnType<typeof setInterval>>();
+ const getIconColor = (status: Type) => {
+ const { colors } = theme;
+
+ const colorMap: Record<Type, string> = {
+ success: colors.success.dark2,
+ warning: colors.warning.dark2,
+ danger: colors.error.dark2,
+ info: colors.info.dark2,
+ default: colors.grayscale.dark1,
+ primary: colors.primary.dark2,
+ secondary: colors.secondary.dark2,
+ };
+
+ return colorMap[status] || colors.grayscale.dark1;
+ };
useEffect(() => {
const stopTimer = () => {
if (timer.current) {
@@ -69,7 +85,16 @@ export default function Timer({
}, [endTime, isRunning, startTime]);
return (
- <TimerLabel icon={<Icons.Clock iconSize="m" />} type={status} role="timer">
+ <TimerLabel
+ icon={
+ <Icons.ClockCircleOutlined
+ iconColor={getIconColor(status)}
+ iconSize="m"
+ />
+ }
+ type={status}
+ role="timer"
+ >
{clockStr}
</TimerLabel>
);
diff --git a/superset-frontend/src/components/Tooltip/Tooltip.test.tsx b/superset-frontend/src/components/Tooltip/Tooltip.test.tsx
index f8c7dea3ad..95f66e6e74 100644
--- a/superset-frontend/src/components/Tooltip/Tooltip.test.tsx
+++ b/superset-frontend/src/components/Tooltip/Tooltip.test.tsx
@@ -56,7 +56,7 @@ test('renders with theme', () => {
test('renders with icon child', async () => {
render(
<Tooltip title="Simple tooltip">
- <Icons.Alert>Hover me</Icons.Alert>
+ <Icons.WarningOutlined>Hover me</Icons.WarningOutlined>
</Tooltip>,
);
userEvent.hover(screen.getByRole('img'));
diff --git a/superset-frontend/src/components/WarningIconWithTooltip/index.tsx b/superset-frontend/src/components/WarningIconWithTooltip/index.tsx
index 546047728c..94638d4923 100644
--- a/superset-frontend/src/components/WarningIconWithTooltip/index.tsx
+++ b/superset-frontend/src/components/WarningIconWithTooltip/index.tsx
@@ -37,7 +37,7 @@ function WarningIconWithTooltip({
id="warning-tooltip"
title={<SafeMarkdown source={warningMarkdown} />}
>
- <Icons.AlertSolid
+ <Icons.WarningOutlined
iconColor={theme.colors.warning.base}
iconSize={size}
css={{ marginRight: marginRight ?? theme.gridUnit * 2 }}
diff --git a/superset-frontend/src/dashboard/components/DashboardGrid.jsx b/superset-frontend/src/dashboard/components/DashboardGrid.jsx
index 51dc6b2198..46167ae2c8 100644
--- a/superset-frontend/src/dashboard/components/DashboardGrid.jsx
+++ b/superset-frontend/src/dashboard/components/DashboardGrid.jsx
@@ -17,10 +17,12 @@
* under the License.
*/
import { PureComponent, Fragment } from 'react';
+import { withTheme } from '@emotion/react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { addAlpha, css, styled, t } from '@superset-ui/core';
import { EmptyState } from 'src/components/EmptyState';
+import Icons from 'src/components/Icons';
import { componentShape } from '../util/propShapes';
import DashboardComponent from '../containers/DashboardComponent';
import { Droppable } from './dnd/DragDroppable';
@@ -123,7 +125,7 @@ class DashboardGrid extends PureComponent {
this.state = {
isResizing: false,
};
-
+ this.theme = this;
this.handleResizeStart = this.handleResizeStart.bind(this);
this.handleResizeStop = this.handleResizeStop.bind(this);
this.handleTopDropTargetDrop = this.handleTopDropTargetDrop.bind(this);
@@ -193,6 +195,7 @@ class DashboardGrid extends PureComponent {
canEdit,
setEditMode,
dashboardId,
+ theme,
} = this.props;
const columnPlusGutterWidth =
(width + GRID_GUTTER_SIZE) / GRID_COLUMN_COUNT;
@@ -213,9 +216,10 @@ class DashboardGrid extends PureComponent {
size="large"
buttonText={
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" />
+ <Icons.PlusOutlined
+ iconSize="m"
+ iconColor={theme.colors.primary.light5}
+ />
{t('Create a new chart')}
</>
}
@@ -239,9 +243,10 @@ class DashboardGrid extends PureComponent {
)}
buttonText={
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" />
+ <Icons.PlusOutlined
+ iconSize="m"
+ iconColor={theme.colors.primary.light5}
+ />
{t('Create a new chart')}
</>
}
@@ -362,4 +367,4 @@ class DashboardGrid extends PureComponent {
DashboardGrid.propTypes = propTypes;
DashboardGrid.defaultProps = defaultProps;
-export default DashboardGrid;
+export default withTheme(DashboardGrid);
diff --git a/superset-frontend/src/dashboard/components/DeleteComponentButton.tsx b/superset-frontend/src/dashboard/components/DeleteComponentButton.tsx
index 87e38c0e34..9c1231c127 100644
--- a/superset-frontend/src/dashboard/components/DeleteComponentButton.tsx
+++ b/superset-frontend/src/dashboard/components/DeleteComponentButton.tsx
@@ -27,6 +27,8 @@ type DeleteComponentButtonProps = {
const DeleteComponentButton: FC<DeleteComponentButtonProps> = ({
onDelete,
-}) => <IconButton onClick={onDelete} icon={<Icons.Trash iconSize="xl" />} />;
+}) => (
+ <IconButton onClick={onDelete} icon={<Icons.DeleteOutlined iconSize="l" />} />
+);
export default DeleteComponentButton;
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 512751bf54..d1090b0ed9 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx
@@ -60,7 +60,7 @@ const createProps = () => ({
] as Indicator[],
appliedIndicators: [
{
- column: 'country_name',
+ column: 'Country_name',
name: 'Country',
value: [],
status: 'UNSET',
@@ -124,11 +124,13 @@ test('Should render "appliedCrossFilterIndicators"', async () => {
await screen.findByText('Applied cross-filters (1)'),
).toBeInTheDocument();
expect(
- screen.getByRole('button', { name: 'Clinical Stage' }),
+ screen.getByRole('button', { name: 'search Clinical Stage' }),
).toBeInTheDocument();
expect(props.onHighlightFilterSource).toHaveBeenCalledTimes(0);
- userEvent.click(screen.getByRole('button', { name: 'Clinical Stage' }));
+ userEvent.click(
+ screen.getByRole('button', { name: 'search Clinical Stage' }),
+ );
expect(props.onHighlightFilterSource).toHaveBeenCalledTimes(1);
expect(props.onHighlightFilterSource).toHaveBeenCalledWith([
'ROOT_ID',
@@ -155,10 +157,12 @@ test('Should render "appliedIndicators"', async () => {
userEvent.hover(screen.getByTestId('details-panel-content'));
expect(await screen.findByText('Applied filters (1)')).toBeInTheDocument();
- expect(screen.getByRole('button', { name: 'Country' })).toBeInTheDocument();
+ expect(
+ screen.getByRole('button', { name: 'search Country' }),
+ ).toBeInTheDocument();
expect(props.onHighlightFilterSource).toHaveBeenCalledTimes(0);
- userEvent.click(screen.getByRole('button', { name: 'Country' }));
+ userEvent.click(screen.getByRole('button', { name: 'search Country' }));
expect(props.onHighlightFilterSource).toHaveBeenCalledTimes(1);
expect(props.onHighlightFilterSource).toHaveBeenCalledWith([
'ROOT_ID',
@@ -166,7 +170,7 @@ test('Should render "appliedIndicators"', async () => {
'TAB-BCIJF4NvgQ',
'ROW-xSeNAspgw',
'CHART-eirDduqb1A',
- 'LABEL-country_name',
+ 'LABEL-Country_name',
]);
});
@@ -239,8 +243,12 @@ test('Arrow key navigation switches focus between indicators', () => {
);
// Query the indicators
- const firstIndicator = screen.getByRole('button', { name: 'Clinical Stage' });
- const secondIndicator = screen.getByRole('button', { name: 'Age Group' });
+ const firstIndicator = screen.getByRole('button', {
+ name: 'search Clinical Stage',
+ });
+ const secondIndicator = screen.getByRole('button', {
+ name: 'search Age Group',
+ });
// Focus the first indicator
firstIndicator.focus();
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 0f08005060..edf9c17373 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/FilterIndicator.test.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/FilterIndicator.test.tsx
@@ -41,7 +41,7 @@ test('Should render', () => {
render(<FilterIndicator {...props} />);
expect(
- screen.getByRole('button', { name: 'Vaccine Approach' }),
+ screen.getByRole('button', { name: 'search Vaccine Approach' }),
).toBeInTheDocument();
expect(screen.getByRole('img')).toBeInTheDocument();
});
@@ -51,7 +51,9 @@ test('Should call "onClick"', () => {
render(<FilterIndicator {...props} />);
expect(props.onClick).toHaveBeenCalledTimes(0);
- userEvent.click(screen.getByRole('button', { name: 'Vaccine Approach' }));
+ userEvent.click(
+ screen.getByRole('button', { name: 'search Vaccine Approach' }),
+ );
expect(props.onClick).toHaveBeenCalledTimes(1);
});
@@ -62,7 +64,7 @@ test('Should render "value"', () => {
expect(
screen.getByRole('button', {
- name: 'Vaccine Approach: any, string',
+ name: 'search Vaccine Approach: any, string',
}),
).toBeInTheDocument();
});
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
index 57413ffd23..5f544d6996 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
@@ -309,7 +309,7 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
tabIndex={0}
onKeyDown={handleKeyDown}
>
- <Icons.Filter iconSize="m" />
+ <Icons.FilterOutlined iconSize="m" />
<StyledBadge
data-test="applied-filter-count"
className="applied-count"
diff --git a/superset-frontend/src/dashboard/components/Header/Header.test.tsx b/superset-frontend/src/dashboard/components/Header/Header.test.tsx
index e6d526f408..987f729129 100644
--- a/superset-frontend/src/dashboard/components/Header/Header.test.tsx
+++ b/superset-frontend/src/dashboard/components/Header/Header.test.tsx
@@ -138,7 +138,7 @@ function setup(overrideState: JsonObject = {}) {
}
async function openActionsDropdown() {
- const btn = screen.getByRole('img', { name: 'more-horiz' });
+ const btn = screen.getByRole('img', { name: 'ellipsis' });
userEvent.click(btn);
expect(await screen.findByTestId('header-actions-menu')).toBeInTheDocument();
}
@@ -337,9 +337,7 @@ test('should NOT render the "Draft" status', () => {
test('should render the unselected fave icon', () => {
setup();
expect(fetchFaveStar).toHaveBeenCalled();
- expect(
- screen.getByRole('img', { name: 'favorite-unselected' }),
- ).toBeInTheDocument();
+ expect(screen.getByRole('img', { name: 'unstarred' })).toBeInTheDocument();
});
test('should render the selected fave icon', () => {
@@ -350,9 +348,7 @@ test('should render the selected fave icon', () => {
},
};
setup(favedState);
- expect(
- screen.getByRole('img', { name: 'favorite-selected' }),
- ).toBeInTheDocument();
+ expect(screen.getByRole('img', { name: 'starred' })).toBeInTheDocument();
});
test('should NOT render the fave icon on anonymous user', () => {
@@ -360,17 +356,17 @@ test('should NOT render the fave icon on anonymous user', () => {
user: undefined,
};
setup(anonymousUserState);
- expect(() =>
- screen.getByRole('img', { name: 'favorite-unselected' }),
- ).toThrow('Unable to find');
- expect(() => screen.getByRole('img', { name: 'favorite-selected' })).toThrow(
+ expect(() => screen.getByRole('img', { name: 'unstarred' })).toThrow(
+ 'Unable to find',
+ );
+ expect(() => screen.getByRole('img', { name: 'starred' })).toThrow(
'Unable to find',
);
});
test('should fave', async () => {
setup();
- const fave = screen.getByRole('img', { name: 'favorite-unselected' });
+ const fave = screen.getByRole('img', { name: 'unstarred' });
expect(saveFaveStar).not.toHaveBeenCalled();
userEvent.click(fave);
expect(saveFaveStar).toHaveBeenCalledTimes(1);
@@ -392,7 +388,7 @@ test('should toggle the edit mode', () => {
test('should render the dropdown icon', () => {
setup();
- expect(screen.getByRole('img', { name: 'more-horiz' })).toBeInTheDocument();
+ expect(screen.getByRole('img', { name: 'ellipsis' })).toBeInTheDocument();
});
test('should refresh the charts', async () => {
diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx
index 1324d785cd..4c1cb49ab8 100644
--- a/superset-frontend/src/dashboard/components/Header/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/index.jsx
@@ -26,6 +26,7 @@ import {
FeatureFlag,
t,
getExtensionsRegistry,
+ useTheme,
} from '@superset-ui/core';
import { Global } from '@emotion/react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
@@ -142,6 +143,9 @@ const undoRedoDisabled = theme => css`
const saveBtnStyle = theme => css`
min-width: ${theme.gridUnit * 17}px;
height: ${theme.gridUnit * 8}px;
+ span > :first-of-type {
+ margin-right: 0;
+ }
`;
const discardBtnStyle = theme => css`
@@ -157,6 +161,7 @@ const discardChanges = () => {
};
const Header = () => {
+ const theme = useTheme();
const dispatch = useDispatch();
const [didNotifyMaxUndoHistoryToast, setDidNotifyMaxUndoHistoryToast] =
useState(false);
@@ -647,6 +652,10 @@ const Header = () => {
data-test="header-save-button"
aria-label={t('Save')}
>
+ <Icons.SaveOutlined
+ iconColor={hasUnsavedChanges && theme.colors.primary.light5}
+ iconSize="m"
+ />
{t('Save')}
</Button>
</div>
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx
index 05670e011a..bed0db0607 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx
@@ -220,9 +220,8 @@ describe('PropertiesModal', () => {
await screen.findByTestId('dashboard-edit-properties-form'),
).toBeInTheDocument();
- expect(
- screen.getByRole('dialog', { name: 'Dashboard properties' }),
- ).toBeInTheDocument();
+ expect(screen.getByRole('dialog')).toBeInTheDocument();
+ expect(screen.getByText('Dashboard properties')).toBeInTheDocument();
expect(
screen.getByRole('heading', { name: 'Basic information' }),
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
index 4831ece8a5..acf3013ceb 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
@@ -33,6 +33,7 @@ import {
SupersetClient,
t,
getClientErrorObject,
+ css,
} from '@superset-ui/core';
import Modal from 'src/components/Modal';
@@ -721,7 +722,11 @@ const PropertiesModal = ({
<Button
buttonStyle="link"
onClick={() => setIsAdvancedOpen(!isAdvancedOpen)}
+ css={css`
+ padding: 0;
+ `}
>
+ {/* TODO: Remove fa-icon */}
<i
className={`fa fa-angle-${isAdvancedOpen ? 'down' : 'right'}`}
style={{ minWidth: '1em' }}
diff --git a/superset-frontend/src/dashboard/components/SliceAdder.test.tsx b/superset-frontend/src/dashboard/components/SliceAdder.test.tsx
index fba73024d6..bb97b8f24f 100644
--- a/superset-frontend/src/dashboard/components/SliceAdder.test.tsx
+++ b/superset-frontend/src/dashboard/components/SliceAdder.test.tsx
@@ -25,7 +25,7 @@ import {
import { DatasourceType } from '@superset-ui/core';
import { sliceEntitiesForDashboard as mockSliceEntities } from 'spec/fixtures/mockSliceEntities';
import { configureStore } from '@reduxjs/toolkit';
-import SliceAdder, { SliceAdderProps } from './SliceAdder';
+import SliceAdder, { SliceAdderProps, sortByComparator } from './SliceAdder';
// Mock the Select component to avoid debounce issues
jest.mock('@superset-ui/core', () => ({
@@ -61,7 +61,7 @@ const mockStore = configureStore({
reducer: (state = { common: { locale: 'en' } }) => state,
});
-const defaultProps: SliceAdderProps = {
+const defaultProps: Omit<SliceAdderProps, 'theme'> = {
slices: mockSliceEntities.slices,
fetchSlices: jest.fn(),
updateSlices: jest.fn(),
@@ -193,7 +193,7 @@ describe('SliceAdder', () => {
uuid: '9012',
},
];
- const sorted = input.sort(SliceAdder.sortByComparator('changed_on'));
+ const sorted = input.sort(sortByComparator('changed_on'));
expect(sorted[0].changed_on).toBe(1578009600000);
expect(sorted[2].changed_on).toBe(1577836800000);
});
@@ -222,7 +222,7 @@ describe('SliceAdder', () => {
uuid: '9012',
},
];
- const sorted = input.sort(SliceAdder.sortByComparator('slice_name'));
+ const sorted = input.sort(sortByComparator('slice_name'));
expect(sorted[0].slice_name).toBe('a');
expect(sorted[2].slice_name).toBe('c');
});
diff --git a/superset-frontend/src/dashboard/components/SliceAdder.tsx b/superset-frontend/src/dashboard/components/SliceAdder.tsx
index 3f3aaa31c7..5c965d9cc5 100644
--- a/superset-frontend/src/dashboard/components/SliceAdder.tsx
+++ b/superset-frontend/src/dashboard/components/SliceAdder.tsx
@@ -46,11 +46,13 @@ import Checkbox from 'src/components/Checkbox';
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
import { Dispatch } from 'redux';
import { Slice } from 'src/dashboard/types';
+import { withTheme, Theme } from '@emotion/react';
import AddSliceCard from './AddSliceCard';
import AddSliceDragPreview from './dnd/AddSliceDragPreview';
import { DragDroppable } from './dnd/DragDroppable';
export type SliceAdderProps = {
+ theme: Theme;
fetchSlices: (
userId?: number,
filter_value?: string,
@@ -117,11 +119,10 @@ const NewChartButtonContainer = styled.div`
const NewChartButton = styled(Button)`
${({ theme }) => css`
height: auto;
- & > .anticon + span {
- margin-left: 0;
+ & > .anticon > span {
+ margin: auto -${theme.gridUnit}px auto 0;
}
& > [role='img']:first-of-type {
- margin-right: ${theme.gridUnit}px;
padding-bottom: 1px;
line-height: 0;
}
@@ -133,25 +134,25 @@ export const ChartList = styled.div`
min-height: 0;
`;
-class SliceAdder extends Component<SliceAdderProps, SliceAdderState> {
- private slicesRequest?: AbortController | Promise<void>;
+export function sortByComparator(attr: keyof Slice) {
+ const desc = attr === 'changed_on' ? -1 : 1;
- static sortByComparator(attr: keyof Slice) {
- const desc = attr === 'changed_on' ? -1 : 1;
+ return (a: Slice, b: Slice) => {
+ const aValue = a[attr] ?? Number.MIN_SAFE_INTEGER;
+ const bValue = b[attr] ?? Number.MIN_SAFE_INTEGER;
- return (a: Slice, b: Slice) => {
- const aValue = a[attr] ?? Number.MIN_SAFE_INTEGER;
- const bValue = b[attr] ?? Number.MIN_SAFE_INTEGER;
+ if (aValue < bValue) {
+ return -1 * desc;
+ }
+ if (aValue > bValue) {
+ return 1 * desc;
+ }
+ return 0;
+ };
+}
- if (aValue < bValue) {
- return -1 * desc;
- }
- if (aValue > bValue) {
- return 1 * desc;
- }
- return 0;
- };
- }
+class SliceAdder extends Component<SliceAdderProps, SliceAdderState> {
+ private slicesRequest?: AbortController | Promise<void>;
static defaultProps = {
selectedSliceIds: [],
@@ -236,7 +237,7 @@ class SliceAdder extends Component<SliceAdderProps, SliceAdderState> {
: true,
)
.filter(createFilter(searchTerm, KEYS_TO_FILTERS))
- .sort(SliceAdder.sortByComparator(sortBy));
+ .sort(sortByComparator(sortBy));
}
handleChange = debounce(value => {
@@ -346,12 +347,16 @@ class SliceAdder extends Component<SliceAdderProps, SliceAdderState> {
}
render() {
+ const { theme } = this.props;
return (
<div
css={css`
height: 100%;
display: flex;
flex-direction: column;
+ button > span > :first-of-type {
+ margin-right: 0;
+ }
`}
>
<NewChartButtonContainer>
@@ -366,7 +371,10 @@ class SliceAdder extends Component<SliceAdderProps, SliceAdderState> {
)
}
>
- <Icons.PlusSmall />
+ <Icons.PlusOutlined
+ iconSize="m"
+ iconColor={theme.colors.primary.dark1}
+ />
{t('Create new chart')}
</NewChartButton>
</NewChartButtonContainer>
@@ -450,4 +458,4 @@ class SliceAdder extends Component<SliceAdderProps, SliceAdderState> {
}
}
-export default SliceAdder;
+export default withTheme(SliceAdder);
diff --git a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
index 8f3de862fb..ab93f04520 100644
--- a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
@@ -90,10 +90,6 @@ const ChartHeaderStyles = styled.div`
display: flex;
align-items: center;
height: 24px;
-
- & > * {
- margin-left: ${theme.gridUnit * 2}px;
- }
}
.dropdown.btn-group {
diff --git a/superset-frontend/src/dashboard/components/URLShortLinkButton/index.tsx b/superset-frontend/src/dashboard/components/URLShortLinkButton/index.tsx
index 38a73c98a7..317fa98113 100644
--- a/superset-frontend/src/dashboard/components/URLShortLinkButton/index.tsx
+++ b/superset-frontend/src/dashboard/components/URLShortLinkButton/index.tsx
@@ -17,13 +17,14 @@
* under the License.
*/
import { useState } from 'react';
-import { getClientErrorObject, t } from '@superset-ui/core';
+import { getClientErrorObject, t, useTheme } from '@superset-ui/core';
import Popover, { PopoverProps } from 'src/components/Popover';
import CopyToClipboard from 'src/components/CopyToClipboard';
import { getDashboardPermalink } from 'src/utils/urlUtils';
import { useToasts } from 'src/components/MessageToasts/withToasts';
import { shallowEqual, useSelector } from 'react-redux';
import { RootState } from 'src/dashboard/types';
+import Icons from 'src/components/Icons';
export type URLShortLinkButtonProps = {
dashboardId: number;
@@ -40,6 +41,7 @@ export default function URLShortLinkButton({
emailContent = '',
emailSubject = '',
}: URLShortLinkButtonProps) {
+ const theme = useTheme();
const [shortUrl, setShortUrl] = useState('');
const { addDangerToast } = useToasts();
const { dataMask, activeTabs } = useSelector(
@@ -88,16 +90,18 @@ export default function URLShortLinkButton({
<CopyToClipboard
text={shortUrl}
copyNode={
- // TODO: Remove fa-icon
- // eslint-disable-next-line icons/no-fa-icons-usage
- <i className="fa fa-clipboard" title={t('Copy to clipboard')} />
+ <Icons.CopyOutlined
+ iconSize="m"
+ iconColor={theme.colors.primary.dark1}
+ />
}
/>
<a href={emailLink} aria-label="Email link">
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-envelope" />
+ <Icons.MailOutlined
+ iconSize="m"
+ iconColor={theme.colors.primary.dark1}
+ />
</a>
</div>
}
@@ -112,9 +116,7 @@ export default function URLShortLinkButton({
}}
aria-label={t('Copy URL')}
>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="short-link-trigger fa fa-link" />
+ <Icons.LinkOutlined iconSize="m" className="short-link-trigger" />
</span>
</Popover>
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Column.jsx b/superset-frontend/src/dashboard/components/gridComponents/Column.jsx
index 71c1892f3b..ed16a7d4d0 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Column.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Column.jsx
@@ -215,7 +215,7 @@ const Column = props => {
<DeleteComponentButton onDelete={handleDeleteComponent} />
<IconButton
onClick={handleChangeFocus}
- icon={<Icons.Cog iconSize="xl" />}
+ icon={<Icons.SettingOutlined iconSize="xl" />}
/>
</HoverMenu>
)}
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Divider.test.jsx b/superset-frontend/src/dashboard/components/gridComponents/Divider.test.jsx
index ebccb80fe5..85a30d115d 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Divider.test.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Divider.test.jsx
@@ -68,7 +68,7 @@ describe('Divider', () => {
expect(screen.getByTestId('hover-menu')).toBeInTheDocument();
expect(screen.getByRole('button').firstChild).toHaveAttribute(
'aria-label',
- 'trash',
+ 'delete',
);
});
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Header.test.jsx b/superset-frontend/src/dashboard/components/gridComponents/Header.test.jsx
index e015f161b3..ef3bb1dc6d 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Header.test.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Header.test.jsx
@@ -105,7 +105,7 @@ describe('Header', () => {
it('should render a DeleteComponentButton when focused in editMode', () => {
setup({ editMode: true });
- const trashButton = screen.getByRole('img', { name: 'trash' });
+ const trashButton = screen.getByRole('img', { name: 'delete' });
expect(trashButton).toBeInTheDocument();
});
@@ -113,7 +113,7 @@ describe('Header', () => {
const deleteComponent = sinon.spy();
setup({ editMode: true, deleteComponent });
- const trashButton = screen.getByRole('img', { name: 'trash' });
+ const trashButton = screen.getByRole('img', { name: 'delete' });
fireEvent.click(trashButton.parentElement);
expect(deleteComponent.callCount).toBe(1);
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Row.jsx b/superset-frontend/src/dashboard/components/gridComponents/Row.jsx
index bd59306ca9..7dca12167b 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Row.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Row.jsx
@@ -288,7 +288,7 @@ const Row = props => {
<DeleteComponentButton onDelete={handleDeleteComponent} />
<IconButton
onClick={handleChangeFocus}
- icon={<Icons.Cog iconSize="xl" />}
+ icon={<Icons.SettingOutlined iconSize="xl" />}
/>
</HoverMenu>
)}
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
index 9fbf49345b..a5ec5e5017 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
@@ -18,7 +18,7 @@
*/
import { useCallback, useEffect, useMemo, useState, memo } from 'react';
import PropTypes from 'prop-types';
-import { styled, t, usePrevious } from '@superset-ui/core';
+import { styled, t, usePrevious, css } from '@superset-ui/core';
import { useSelector } from 'react-redux';
import { LineEditableTabs } from 'src/components/Tabs';
import Icons from 'src/components/Icons';
@@ -77,36 +77,33 @@ const defaultProps = {
};
const StyledTabsContainer = styled.div`
- width: 100%;
- background-color: ${({ theme }) => theme.colors.grayscale.light5};
+ ${({ theme }) => css`
+ width: 100%;
+ background-color: ${theme.colors.grayscale.light5};
+
+ .dashboard-component-tabs-content {
+ min-height: ${theme.gridUnit * 12}px;
+ margin-top: ${theme.gridUnit / 4}px;
+ position: relative;
+ }
- .dashboard-component-tabs-content {
- min-height: ${({ theme }) => theme.gridUnit * 12}px;
- margin-top: ${({ theme }) => theme.gridUnit / 4}px;
- position: relative;
- }
+ .ant-tabs {
+ overflow: visible;
- .ant-tabs {
- overflow: visible;
+ .ant-tabs-nav-wrap {
+ min-height: ${theme.gridUnit * 12.5}px;
+ }
- .ant-tabs-nav-wrap {
- min-height: ${({ theme }) => theme.gridUnit * 12.5}px;
+ .ant-tabs-content-holder {
+ overflow: visible;
+ }
}
- .ant-tabs-content-holder {
- overflow: visible;
+ div .ant-tabs-tab-btn {
+ text-transform: none;
}
- }
-
- div .ant-tabs-tab-btn {
- text-transform: none;
- }
+ `}
`;
-
-const StyledCancelXIcon = styled(Icons.CancelX)`
- color: ${({ theme }) => theme.colors.grayscale.base};
-`;
-
const DropIndicator = styled.div`
border: 2px solid ${({ theme }) => theme.colors.primary.base};
width: 5px;
@@ -119,7 +116,7 @@ const DropIndicator = styled.div`
const CloseIconWithDropIndicator = props => (
<>
- <StyledCancelXIcon />
+ <Icons.CloseOutlined iconSize="s" />
{props.showDropIndicators.right && (
<DropIndicator className="drop-indicator-right" pos="right" />
)}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.test.tsx
index 91f71d5b1c..78da010203 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.test.tsx
@@ -172,7 +172,7 @@ it('Uses callbacks on click', () => {
const chart4Container = screen.getByText('chart 4').closest('div');
if (chart4Container) {
- userEvent.click(within(chart4Container).getByLabelText('trash'));
+ userEvent.click(within(chart4Container).getByLabelText('delete'));
}
expect(DEFAULT_PROPS.removeCustomScope).toHaveBeenCalledWith(4);
});
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx
index ad99071f20..6ccd23a32f 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx
@@ -35,16 +35,15 @@ import { NEW_CHART_SCOPING_ID } from './constants';
const AddButtonContainer = styled.div`
${({ theme }) => css`
margin-top: ${theme.gridUnit * 2}px;
-
& button > [role='img']:first-of-type {
- margin-right: ${theme.gridUnit}px;
line-height: 0;
}
-
span[role='img'] {
padding-bottom: 1px;
}
-
+ button > span > :first-of-type {
+ margin-right: 0;
+ }
.antd5-btn > .anticon + span {
margin-left: 0;
}
@@ -71,14 +70,15 @@ const ScopingTitle = ({
onClick={() => onClick(id)}
>
{label}
- <Icons.Trash
+ <Icons.DeleteOutlined
iconColor={theme.colors.grayscale.light3}
+ iconSize="xl"
onClick={event => {
event.stopPropagation();
onRemove(id);
}}
css={css`
- margin-left: auto;
+ margin: auto auto auto ${theme.gridUnit}px;
`}
/>
</FilterTitle>
@@ -136,7 +136,7 @@ export const ChartsScopingListPanel = ({
buttonSize="xsmall"
onClick={addNewCustomScope}
>
- <Icons.PlusSmall /> {t('Add custom scoping')}
+ <Icons.PlusOutlined iconSize="s" /> {t('Add custom scoping')}
</Button>
</AddButtonContainer>
<FilterTitle
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModal.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModal.test.tsx
index 7de3941de9..ce2411ce04 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModal.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModal.test.tsx
@@ -257,7 +257,7 @@ it('edit scope and save', async () => {
within(screen.getByTestId('scoping-list-panel'))
.getByText('chart 4')
.closest('div')!,
- ).getByLabelText('trash'),
+ ).getByLabelText('delete'),
);
expect(
within(screen.getByTestId('scoping-list-panel')).queryByText('chart 4'),
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx
index abd8b43985..997340cc6e 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx
@@ -118,7 +118,6 @@ const ChartSelect = ({
<Tooltip title={t('Tooltip')} placement="top">
<Icons.InfoCircleOutlined
iconSize="xs"
- iconColor={theme.colors.grayscale.base}
css={css`
& > span {
line-height: 0;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
index 2aa5406704..5cca08fd91 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
@@ -76,9 +76,9 @@ const getModalTestId = testWithId<string>(FILTERS_CONFIG_MODAL_TEST_ID, true);
const FILTER_NAME = 'Time filter 1';
const addFilterFlow = async () => {
- // open filter config modal
+ // open filter config modals
userEvent.click(screen.getByTestId(getTestId('collapsable')));
- userEvent.click(screen.getByLabelText('gear'));
+ userEvent.click(screen.getByLabelText('setting'));
userEvent.click(screen.getByText('Add or edit filters'));
// select filter
userEvent.click(screen.getByText('Value'));
@@ -200,7 +200,9 @@ describe('FilterBar', () => {
it('should render the collapse icon', () => {
renderWrapper();
- expect(screen.getByRole('img', { name: 'collapse' })).toBeInTheDocument();
+ expect(
+ screen.getByRole('img', { name: 'vertical-align' }),
+ ).toBeInTheDocument();
});
it('should render the filter icon', () => {
@@ -210,7 +212,9 @@ describe('FilterBar', () => {
it('should toggle', () => {
renderWrapper();
- const collapse = screen.getByRole('img', { name: 'collapse' });
+ const collapse = screen.getByRole('img', {
+ name: 'vertical-align',
+ });
expect(toggleFiltersBar).not.toHaveBeenCalled();
userEvent.click(collapse);
expect(toggleFiltersBar).toHaveBeenCalled();
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/FilterBarSettings.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/FilterBarSettings.test.tsx
index 66fdb812b2..9c566410e9 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/FilterBarSettings.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/FilterBarSettings.test.tsx
@@ -77,14 +77,14 @@ beforeEach(() => {
test('Dropdown trigger renders', async () => {
await setup();
- expect(screen.getByLabelText('gear')).toBeVisible();
+ expect(screen.getByLabelText('setting')).toBeVisible();
});
test('Dropdown trigger renders with dashboard edit permissions', async () => {
await setup({
dash_edit_perm: true,
});
- expect(screen.getByRole('img', { name: 'gear' })).toBeInTheDocument();
+ expect(screen.getByRole('img', { name: 'setting' })).toBeInTheDocument();
});
test('Dropdown trigger does not render without dashboard edit permissions', async () => {
@@ -92,12 +92,17 @@ test('Dropdown trigger does not render without dashboard edit permissions', asyn
dash_edit_perm: false,
});
- expect(screen.queryByRole('img', { name: 'gear' })).not.toBeInTheDocument();
+ expect(
+ screen.queryByRole('img', { name: 'setting' }),
+ ).not.toBeInTheDocument();
});
test('Popover shows cross-filtering option on by default', async () => {
await setup();
- userEvent.click(screen.getByLabelText('gear'));
+ const settingsButton = screen.getByRole('button', {
+ name: 'setting',
+ });
+ userEvent.click(settingsButton);
expect(screen.getByText('Enable cross-filtering')).toBeInTheDocument();
expect(screen.getByRole('checkbox')).toBeChecked();
});
@@ -107,19 +112,25 @@ test('Can enable/disable cross-filtering', async () => {
result: {},
});
await setup();
- userEvent.click(screen.getByLabelText('gear'));
+ const settingsButton = screen.getByRole('button', {
+ name: 'setting',
+ });
+ userEvent.click(settingsButton);
const initialCheckbox = screen.getByRole('checkbox');
expect(initialCheckbox).toBeChecked();
userEvent.click(initialCheckbox);
- userEvent.click(screen.getByLabelText('gear'));
+ userEvent.click(screen.getByLabelText('setting'));
expect(screen.getByRole('checkbox')).not.toBeChecked();
});
test('Popover opens with "Vertical" selected', async () => {
await setup();
- userEvent.click(screen.getByLabelText('gear'));
+ const settingsButton = screen.getByRole('button', {
+ name: 'setting',
+ });
+ userEvent.click(settingsButton);
userEvent.hover(screen.getByText('Orientation of filter bar'));
expect(await screen.findByText('Vertical (Left)')).toBeInTheDocument();
expect(screen.getByText('Horizontal (Top)')).toBeInTheDocument();
@@ -130,7 +141,10 @@ test('Popover opens with "Vertical" selected', async () => {
test('Popover opens with "Horizontal" selected', async () => {
await setup({ filterBarOrientation: FilterBarOrientation.Horizontal });
- userEvent.click(screen.getByLabelText('gear'));
+ const settingsButton = screen.getByRole('button', {
+ name: 'setting',
+ });
+ userEvent.click(settingsButton);
userEvent.hover(screen.getByText('Orientation of filter bar'));
expect(await screen.findByText('Vertical (Left)')).toBeInTheDocument();
expect(screen.getByText('Horizontal (Top)')).toBeInTheDocument();
@@ -150,7 +164,11 @@ test('On selection change, send request and update checked value', async () => {
});
await setup();
- userEvent.click(screen.getByLabelText('gear'));
+
+ const settingsButton = screen.getByRole('button', {
+ name: 'setting',
+ });
+ userEvent.click(settingsButton);
userEvent.hover(screen.getByText('Orientation of filter bar'));
const verticalItem = await screen.findByText('Vertical (Left)');
@@ -160,7 +178,7 @@ test('On selection change, send request and update checked value', async () => {
userEvent.click(screen.getByText('Horizontal (Top)'));
- userEvent.click(screen.getByLabelText('gear'));
+ userEvent.click(settingsButton);
userEvent.hover(screen.getByText('Orientation of filter bar'));
const horizontalItem = await screen.findByText('Horizontal (Top)');
@@ -180,7 +198,7 @@ test('On selection change, send request and update checked value', async () => {
);
await waitFor(() => {
- userEvent.click(screen.getByLabelText('gear'));
+ userEvent.click(screen.getByRole('button', { name: 'setting' }));
userEvent.hover(screen.getByText('Orientation of filter bar'));
const updatedHorizontalItem = screen.getByText('Horizontal (Top)');
expect(
@@ -198,8 +216,9 @@ test('On failed request, restore previous selection', async () => {
const dangerToastSpy = jest.spyOn(mockedMessageActions, 'addDangerToast');
await setup();
- const gearIcon = await screen.findByLabelText('gear');
- userEvent.click(gearIcon);
+ const SettingsIcon = screen.getByRole('img', { name: /setting/i });
+
+ userEvent.click(SettingsIcon);
const orientationMenu = await screen.findByText('Orientation of filter bar');
userEvent.hover(orientationMenu);
@@ -227,7 +246,7 @@ test('On failed request, restore previous selection', async () => {
});
// Reopen menu and verify selection rolled back
- userEvent.click(gearIcon);
+ userEvent.click(SettingsIcon);
userEvent.hover(orientationMenu);
// Wait for menu items and verify state
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx
index c5ff4d59cd..277a2bcfcb 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx
@@ -19,7 +19,7 @@
import { useCallback, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
-import { styled, t, useTheme } from '@superset-ui/core';
+import { styled, t, useTheme, css } from '@superset-ui/core';
import { MenuProps } from 'src/components/Menu';
import { FilterBarOrientation, RootState } from 'src/dashboard/types';
import {
@@ -68,8 +68,8 @@ const isOrientation = (o: SelectedKey): o is FilterBarOrientation =>
o === FilterBarOrientation.Vertical || o === FilterBarOrientation.Horizontal;
const FilterBarSettings = () => {
- const dispatch = useDispatch();
const theme = useTheme();
+ const dispatch = useDispatch();
const isCrossFiltersEnabled = useSelector<RootState, boolean>(
({ dashboardInfo }) => dashboardInfo.crossFiltersEnabled,
);
@@ -211,7 +211,15 @@ const FilterBarSettings = () => {
<Space>
{t('Vertical (Left)')}
{selectedFilterBarOrientation ===
- FilterBarOrientation.Vertical && <Icons.Check />}
+ FilterBarOrientation.Vertical && (
+ <Icons.CheckOutlined
+ iconColor={theme.colors.primary.base}
+ css={css`
+ vertical-align: -${theme.gridUnit * 0.03125}em;
+ `}
+ iconSize="m"
+ />
+ )}
</Space>
),
},
@@ -221,7 +229,14 @@ const FilterBarSettings = () => {
<Space>
{t('Horizontal (Top)')}
{selectedFilterBarOrientation ===
- FilterBarOrientation.Horizontal && <Icons.Check />}
+ FilterBarOrientation.Horizontal && (
+ <Icons.CheckOutlined
+ iconSize="m"
+ css={css`
+ vertical-align: middle;
+ `}
+ />
+ )}
</Space>
),
},
@@ -252,10 +267,15 @@ const FilterBarSettings = () => {
}}
trigger={['click']}
>
- <Button type="link">
- <Icons.Gear
+ <Button
+ type="link"
+ css={css`
+ padding: 0;
+ `}
+ >
+ <Icons.SettingOutlined
+ iconSize="xl"
name="gear"
- iconColor={theme.colors.grayscale.base}
data-test="filterbar-orientation-icon"
/>
</Button>
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
index 9d6274a566..08bc03fb8b 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
@@ -34,7 +34,7 @@ import { FilterControlProps } from './types';
import { FilterCardPlacement } from '../../FilterCard/types';
import { useIsFilterInScope } from '../../state';
-const StyledIcon = styled.div`
+const FilterStyledIcon = styled.div`
position: absolute;
right: 0;
`;
@@ -264,7 +264,7 @@ const FilterControl = ({
{filter.description?.trim() && (
<DescriptionToolTip description={filter.description} />
)}
- <StyledIcon data-test="filter-icon">{icon}</StyledIcon>
+ <FilterStyledIcon data-test="filter-icon">{icon}</FilterStyledIcon>
</FilterControlTitleBox>
),
[
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
index a1741dbc9c..a1c69fcfd7 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -234,7 +234,7 @@ const FilterControls: FC<FilterControlsProps> = ({
<DropdownContainer
items={items}
dropdownTriggerIcon={
- <Icons.FilterSmall
+ <Icons.FilterOutlined
css={css`
&& {
margin-right: -4px;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.stories.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.stories.tsx
index 2e65f6f267..69f0de40b5 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.stories.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.stories.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
-import { css } from '@emotion/react';
+import { css } from '@superset-ui/core';
import { FilterBarOrientation } from 'src/dashboard/types';
import FilterDivider from './FilterDivider';
import { FilterDividerProps } from './types';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
index b902ced112..d8b86e6084 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
@@ -75,7 +75,6 @@ const HorizontalDivider = ({ title, description }: FilterDividerProps) => {
<Icons.BookOutlined
data-test="divider-description-icon"
iconSize="l"
- iconColor={theme.colors.grayscale.base}
css={css`
margin: 0 ${theme.gridUnit * 1.5}px;
vertical-align: unset;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx
index 695838ce81..605d5f5e69 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx
@@ -17,8 +17,7 @@
* under the License.
*/
import { ReactNode } from 'react';
-import { css } from '@emotion/react';
-import { Divider, Filter, SupersetTheme, t } from '@superset-ui/core';
+import { css, Divider, Filter, SupersetTheme, t } from '@superset-ui/core';
import { AntdCollapse } from 'src/components';
export interface FiltersOutOfScopeCollapsibleProps {
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/Header.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/Header.test.tsx
index c12f1a1975..14332d8c44 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/Header.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/Header.test.tsx
@@ -38,13 +38,17 @@ test('should render the "Filters" heading', () => {
test('should render the expand button', () => {
const mockedProps = createProps();
render(<Header {...mockedProps} />, { useRedux: true });
- expect(screen.getByRole('button', { name: 'expand' })).toBeInTheDocument();
+ expect(
+ screen.getByRole('button', { name: 'vertical-align' }),
+ ).toBeInTheDocument();
});
test('should toggle', () => {
const mockedProps = createProps();
render(<Header {...mockedProps} />, { useRedux: true });
- const expandBtn = screen.getByRole('button', { name: 'expand' });
+ const expandBtn = screen.getByRole('button', {
+ name: 'vertical-align',
+ });
expect(mockedProps.toggleFiltersBar).not.toHaveBeenCalled();
userEvent.click(expandBtn);
expect(mockedProps.toggleFiltersBar).toHaveBeenCalled();
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
index 0d6887f0c5..8183d77205 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
/* eslint-disable no-param-reassign */
-import { css, styled, t, useTheme } from '@superset-ui/core';
+import { css, styled, t } from '@superset-ui/core';
import { memo, FC } from 'react';
import Icons from 'src/components/Icons';
import Button from 'src/components/Button';
@@ -65,25 +65,26 @@ type HeaderProps = {
toggleFiltersBar: (arg0: boolean) => void;
};
-const Header: FC<HeaderProps> = ({ toggleFiltersBar }) => {
- const theme = useTheme();
-
- return (
- <Wrapper>
- <TitleArea>
- <span>{t('Filters')}</span>
- <FilterBarSettings />
- <HeaderButton
- {...getFilterBarTestId('collapse-button')}
- buttonStyle="link"
- buttonSize="xsmall"
- onClick={() => toggleFiltersBar(false)}
- >
- <Icons.Expand iconColor={theme.colors.grayscale.base} />
- </HeaderButton>
- </TitleArea>
- </Wrapper>
- );
-};
+const Header: FC<HeaderProps> = ({ toggleFiltersBar }) => (
+ <Wrapper>
+ <TitleArea>
+ <span>{t('Filters')}</span>
+ <FilterBarSettings />
+ <HeaderButton
+ {...getFilterBarTestId('collapse-button')}
+ buttonStyle="link"
+ buttonSize="xsmall"
+ onClick={() => toggleFiltersBar(false)}
+ >
+ <Icons.VerticalAlignTopOutlined
+ iconSize="xl"
+ css={css`
+ transform: rotate(-90deg);
+ `}
+ />
+ </HeaderButton>
+ </TitleArea>
+ </Wrapper>
+);
export default memo(Header);
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
index 686320c81c..4d1f955c04 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
@@ -30,7 +30,7 @@ import {
FC,
} from 'react';
import cx from 'classnames';
-import { styled, t } from '@superset-ui/core';
+import { styled, t, useTheme } from '@superset-ui/core';
import Icons from 'src/components/Icons';
import Loading from 'src/components/Loading';
import { EmptyState } from 'src/components/EmptyState';
@@ -97,17 +97,6 @@ const CollapsedBar = styled.div<{ offset: number }>`
`}
`;
-const StyledCollapseIcon = styled(Icons.Collapse)`
- ${({ theme }) => `
- color: ${theme.colors.primary.base};
- margin-bottom: ${theme.gridUnit * 3}px;
- `}
-`;
-
-const StyledFilterIcon = styled(Icons.Filter)`
- color: ${({ theme }) => theme.colors.grayscale.base};
-`;
-
const FilterBarEmptyStateContainer = styled.div`
margin-top: ${({ theme }) => theme.gridUnit * 8}px;
`;
@@ -132,6 +121,7 @@ const VerticalFilterBar: FC<VerticalBarProps> = ({
toggleFiltersBar,
width,
}) => {
+ const theme = useTheme();
const [isScrolling, setIsScrolling] = useState(false);
const timeout = useRef<any>();
@@ -205,11 +195,17 @@ const VerticalFilterBar: FC<VerticalBarProps> = ({
role="button"
offset={offset}
>
- <StyledCollapseIcon
- {...getFilterBarTestId('expand-button')}
+ <Icons.VerticalAlignTopOutlined
iconSize="l"
+ css={{
+ transform: 'rotate(90deg)',
+ marginBottom: `${theme.gridUnit * 3}px`,
+ }}
+ className="collapse-icon"
+ iconColor={theme.colors.primary.base}
+ {...getFilterBarTestId('expand-button')}
/>
- <StyledFilterIcon
+ <Icons.FilterOutlined
{...getFilterBarTestId('filter-icon')}
iconSize="l"
/>
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
index 73f14018c4..60fa99f3c5 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
@@ -88,7 +88,7 @@ export const DependenciesRow = memo(({ filter }: FilterCardRowProps) => {
'Filter only displays values relevant to selections made in other filters.',
)}
>
- <Icons.Info
+ <Icons.InfoCircleOutlined
iconSize="m"
iconColor={theme.colors.grayscale.light1}
css={css`
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx
index ac235b0b8e..779d9f053d 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx
@@ -230,7 +230,7 @@ const renderContent = (filter = baseFilter, initialState = baseInitialState) =>
test('filter card title, type, scope, dependencies', () => {
renderContent();
expect(screen.getByText('Native filter 1')).toBeVisible();
- expect(screen.getByLabelText('filter-small')).toBeVisible();
+ expect(screen.getByLabelText('filter')).toBeVisible();
expect(screen.getByText('Filter type')).toBeVisible();
expect(screen.getByText('Select filter')).toBeVisible();
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
index 9346a72ab5..1463f918f3 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
@@ -54,7 +54,8 @@ export const NameRow = ({
`}
>
<InternalRow>
- <Icons.FilterSmall
+ <Icons.FilterOutlined
+ iconSize="s"
css={(theme: SupersetTheme) => css`
margin-right: ${theme.gridUnit}px;
`}
@@ -70,7 +71,7 @@ export const NameRow = ({
hidePopover();
}}
>
- <Icons.Edit
+ <Icons.EditOutlined
iconSize="l"
iconColor={theme.colors.grayscale.light1}
css={() => css`
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
index 47713e69ca..f16ceba6bc 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
@@ -48,7 +48,6 @@ const DragIcon = styled(Icons.Drag, {
})<IconType & { isDragging: boolean }>`
${({ isDragging, theme }) => `
font-size: ${theme.typography.sizes.m}px;
- margin-top: 15px;
cursor: ${isDragging ? 'grabbing' : 'grab'};
padding-left: ${theme.gridUnit}px;
`}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
index 495009f0d0..8accde195f 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
@@ -18,7 +18,7 @@
*/
import { forwardRef, ReactNode } from 'react';
-import { styled, t } from '@superset-ui/core';
+import { styled, t, useTheme } from '@superset-ui/core';
import Icons from 'src/components/Icons';
import { FilterRemoval } from './types';
import DraggableFilter from './DraggableFilter';
@@ -51,11 +51,7 @@ export const FilterTitle = styled.div`
`}
`;
-const StyledTrashIcon = styled(Icons.Trash)`
- color: ${({ theme }) => theme.colors.grayscale.light3};
-`;
-
-const StyledWarning = styled(Icons.Warning)`
+const StyledWarning = styled(Icons.ExclamationCircleOutlined)`
color: ${({ theme }) => theme.colors.error.base};
&.anticon {
margin-left: auto;
@@ -94,6 +90,7 @@ const FilterTitleContainer = forwardRef<HTMLDivElement, Props>(
},
ref,
) => {
+ const theme = useTheme();
const renderComponent = (id: string) => {
const isRemoved = !!removedFilters[id];
const isErrored = erroredFilters.includes(id);
@@ -142,7 +139,9 @@ const FilterTitleContainer = forwardRef<HTMLDivElement, Props>(
</div>
<div css={{ alignSelf: 'flex-start', marginLeft: 'auto' }}>
{isRemoved ? null : (
- <StyledTrashIcon
+ <Icons.DeleteOutlined
+ iconColor={theme.colors.grayscale.light3}
+ iconSize="m"
onClick={event => {
event.stopPropagation();
onRemove(id);
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
index 0a76a5264f..501ee8a952 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
@@ -109,7 +109,12 @@ const FilterTitlePane: FC<Props> = ({
<Button
buttonSize="default"
buttonStyle="secondary"
- icon={<Icons.Filter iconSize="m" />}
+ icon={
+ <Icons.FilterOutlined
+ iconColor={theme.colors.primary.dark1}
+ iconSize="m"
+ />
+ }
data-test="add-new-filter-button"
onClick={() => handleOnAdd(NativeFilterType.NativeFilter)}
>
@@ -118,7 +123,12 @@ const FilterTitlePane: FC<Props> = ({
<Button
buttonSize="default"
buttonStyle="secondary"
- icon={<Icons.PicCenterOutlined iconSize="m" />}
+ icon={
+ <Icons.PicCenterOutlined
+ iconColor={theme.colors.primary.dark1}
+ iconSize="m"
+ />
+ }
data-test="add-new-divider-button"
onClick={() => handleOnAdd(NativeFilterType.Divider)}
>
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx
index 3fd8291ea1..c258396252 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx
@@ -53,7 +53,7 @@ const AddFilter = styled.div`
`}
`;
-const DeleteFilter = styled(Icons.Trash)`
+const DeleteFilter = styled(Icons.DeleteOutlined)`
${({ theme }) => `
cursor: pointer;
margin-left: ${theme.gridUnit * 2}px;
@@ -171,7 +171,7 @@ const List = ({
))}
{availableFilters.length > rows.length && (
<AddFilter role="button" onClick={onAdd}>
- <Icons.PlusSmall />
+ <Icons.PlusOutlined iconSize="xs" />
{t('Add filter')}
</AddFilter>
)}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/ScopingTree.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/ScopingTree.tsx
index c6f34af48c..9921e6e8e9 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/ScopingTree.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/ScopingTree.tsx
@@ -47,7 +47,7 @@ const buildTreeLeafTitle = (
<>
{title}
<Tooltip title={tooltipTitle}>
- <Icons.Info iconSize="m" />
+ <Icons.InfoCircleOutlined iconSize="m" />
</Tooltip>
</>
);
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
index ff247daa29..8a0851f95e 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -40,6 +40,8 @@ import {
ClientErrorObject,
getClientErrorObject,
SLOW_DEBOUNCE,
+ useTheme,
+ css,
} from '@superset-ui/core';
import { debounce, isEqual } from 'lodash';
import {
@@ -209,11 +211,6 @@ const DefaultValueContainer = styled.div`
align-items: center;
`;
-const RefreshIcon = styled(Icons.Refresh)`
- margin-left: ${({ theme }) => theme.gridUnit * 2}px;
- color: ${({ theme }) => theme.colors.primary.base};
-`;
-
const StyledCollapse = styled(Collapse)`
border-left: 0;
border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
@@ -355,6 +352,7 @@ const FiltersConfigForm = (
}: FiltersConfigFormProps,
ref: RefObject<any>,
) => {
+ const theme = useTheme();
const isRemoved = !!removedFilters[filterId];
const [error, setError] = useState<ClientErrorObject>();
const [metrics, setMetrics] = useState<Metric[]>([]);
@@ -1323,7 +1321,14 @@ const FiltersConfigForm = (
)}
{hasDataset && datasetId && (
<Tooltip title={t('Refresh the default values')}>
- <RefreshIcon onClick={() => refreshHandler(true)} />
+ <Icons.SyncOutlined
+ iconSize="xl"
+ iconColor={theme.colors.primary.base}
+ css={css`
+ margin-left: ${theme.gridUnit * 2}px;
+ `}
+ onClick={() => refreshHandler(true)}
+ />
</Tooltip>
)}
</DefaultValueContainer>
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx
index b8e82db0df..9c7585c9ef 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx
@@ -388,7 +388,9 @@ test('deletes a filter', async () => {
createNewOnOpen: false,
onSave,
});
- const removeButtons = screen.getAllByRole('img', { name: 'trash' });
+ const removeButtons = screen.getAllByRole('button', {
+ name: 'delete',
+ });
userEvent.click(removeButtons[2]);
userEvent.click(screen.getByRole('button', { name: SAVE_REGEX }));
@@ -423,7 +425,9 @@ test('deletes a filter including dependencies', async () => {
createNewOnOpen: false,
onSave,
});
- const removeButtons = screen.getAllByRole('img', { name: 'trash' });
+ const removeButtons = screen.getAllByRole('button', {
+ name: 'delete',
+ });
userEvent.click(removeButtons[1]);
userEvent.click(screen.getByRole('button', { name: SAVE_REGEX }));
await waitFor(() =>
@@ -513,7 +517,9 @@ test('rearranges three filters and deletes one of them', async () => {
});
const draggableFilters = screen.getAllByRole('tab');
- const deleteButtons = screen.getAllByRole('img', { name: 'trash' });
+ const deleteButtons = screen.getAllByRole('button', {
+ name: 'delete',
+ });
userEvent.click(deleteButtons[1]);
fireEvent.dragStart(draggableFilters[0]);
diff --git a/superset-frontend/src/explore/components/ControlHeader.tsx b/superset-frontend/src/explore/components/ControlHeader.tsx
index 4778f80ac3..cf94c24355 100644
--- a/superset-frontend/src/explore/components/ControlHeader.tsx
+++ b/superset-frontend/src/explore/components/ControlHeader.tsx
@@ -151,8 +151,11 @@ const ControlHeader: FC<ControlHeaderProps> = ({
{warning && (
<span>
<Tooltip id="error-tooltip" placement="top" title={warning}>
- <Icons.AlertSolid
+ <Icons.WarningOutlined
iconColor={colors.warning.base}
+ css={css`
+ vertical-align: baseline;
+ `}
iconSize="s"
/>
</Tooltip>{' '}
@@ -161,7 +164,10 @@ const ControlHeader: FC<ControlHeaderProps> = ({
{danger && (
<span>
<Tooltip id="error-tooltip" placement="top" title={danger}>
- <Icons.ErrorSolid iconColor={colors.error.base} iconSize="s" />
+ <Icons.ExclamationCircleOutlined
+ iconColor={colors.error.base}
+ iconSize="s"
+ />
</Tooltip>{' '}
</span>
)}
diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx
index e84d06a32a..a54dcb5093 100644
--- a/superset-frontend/src/explore/components/DataTableControl/index.tsx
+++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx
@@ -67,30 +67,26 @@ export const CopyToClipboardButton = ({
}: {
data?: Record<string, any>;
columns?: string[];
-}) => {
- const theme = useTheme();
- return (
- <CopyToClipboard
- text={
- data && columns ? prepareCopyToClipboardTabularData(data, columns) : ''
- }
- wrapped={false}
- copyNode={
- <Icons.CopyOutlined
- iconColor={theme.colors.grayscale.base}
- iconSize="l"
- aria-label={t('Copy')}
- role="button"
- css={css`
- &.anticon > * {
- line-height: 0;
- }
- `}
- />
- }
- />
- );
-};
+}) => (
+ <CopyToClipboard
+ text={
+ data && columns ? prepareCopyToClipboardTabularData(data, columns) : ''
+ }
+ wrapped={false}
+ copyNode={
+ <Icons.CopyOutlined
+ iconSize="l"
+ aria-label={t('Copy')}
+ role="button"
+ css={css`
+ &.anticon > * {
+ line-height: 0;
+ }
+ `}
+ />
+ }
+ />
+);
export const FilterInput = ({
onChangeHandler,
@@ -112,7 +108,7 @@ export const FilterInput = ({
const debouncedChangeHandler = debounce(onChangeHandler, SLOW_DEBOUNCE);
return (
<Input
- prefix={<Icons.Search iconColor={theme.colors.grayscale.base} />}
+ prefix={<Icons.SearchOutlined iconSize="l" />}
placeholder={t('Search')}
onChange={(event: any) => {
const filterText = event.target.value;
diff --git a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
index 640834ba94..65b3d60e23 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
@@ -158,15 +158,12 @@ export const DataTablesPane = ({
const CollapseButton = useMemo(() => {
const caretIcon = panelOpen ? (
- <Icons.CaretUp
- iconColor={theme.colors.grayscale.base}
+ <Icons.CaretUpOutlined
+ iconSize="l"
aria-label={t('Collapse data panel')}
/>
) : (
- <Icons.CaretDown
- iconColor={theme.colors.grayscale.base}
- aria-label={t('Expand data panel')}
- />
+ <Icons.DownOutlined iconSize="l" aria-label={t('Expand data panel')} />
);
return (
<TableControlsWrapper>
diff --git a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx
index abb2cc83a6..84b40969b5 100644
--- a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx
+++ b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx
@@ -228,7 +228,7 @@ test('should render a warning', async () => {
};
render(<DatasourcePanel {...newProps} />, { useRedux: true, useDnd: true });
expect(
- await screen.findByRole('img', { name: 'alert-solid' }),
+ await screen.findByRole('img', { name: 'warning' }),
).toBeInTheDocument();
});
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx b/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx
index a1c4244506..9888493cf9 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx
@@ -309,13 +309,11 @@ describe('Additional actions tests', () => {
});
expect(props.actions.redirectSQLLab).toHaveBeenCalledTimes(0);
userEvent.click(screen.getByLabelText('Menu actions trigger'));
-
- expect(screen.queryByText('Edit Chart Properties')).not.toBeInTheDocument();
userEvent.click(
screen.getByRole('menuitem', { name: 'Edit chart properties' }),
);
expect(
- await screen.findByText('Edit Chart Properties'),
+ await screen.findByText('Edit chart properties'),
).toBeInTheDocument();
});
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
index 69718f55fb..b7e76b2170 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
@@ -21,7 +21,7 @@ import { useHistory } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import PropTypes from 'prop-types';
import { Tooltip } from 'src/components/Tooltip';
-import { css, logging, SupersetClient, t } from '@superset-ui/core';
+import { css, logging, SupersetClient, t, useTheme } from '@superset-ui/core';
import { chartPropShape } from 'src/dashboard/util/propShapes';
import AlteredSliceTag from 'src/components/AlteredSliceTag';
import Button from 'src/components/Button';
@@ -86,6 +86,7 @@ export const ExploreChartHeader = ({
saveDisabled,
metadata,
}) => {
+ const theme = useTheme();
const dispatch = useDispatch();
const { latestQueryFormData, sliceFormData } = chart;
const [isPropertiesModalOpen, setIsPropertiesModalOpen] = useState(false);
@@ -241,7 +242,10 @@ export const ExploreChartHeader = ({
data-test="query-save-button"
css={saveButtonStyles}
>
- <Icons.SaveOutlined iconSize="l" />
+ <Icons.SaveOutlined
+ iconSize="l"
+ iconColor={theme.colors.primary.dark2}
+ />
{t('Save')}
</Button>
</div>
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
index 4f06231bc6..fa9279d0e2 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
@@ -635,10 +635,13 @@ function ExploreViewContainer(props) {
className="action-button"
onClick={toggleCollapse}
>
- <Icons.Expand
+ <Icons.VerticalAlignTopOutlined
+ iconSize="xl"
+ css={css`
+ transform: rotate(-90deg);
+ `}
className="collapse-icon"
iconColor={theme.colors.primary.base}
- iconSize="l"
/>
</span>
</div>
@@ -661,10 +664,13 @@ function ExploreViewContainer(props) {
>
<span role="button" tabIndex={0} className="action-button">
<Tooltip title={t('Open Datasource tab')}>
- <Icons.Collapse
+ <Icons.VerticalAlignTopOutlined
+ iconSize="xl"
+ css={css`
+ transform: rotate(90deg);
+ `}
className="collapse-icon"
iconColor={theme.colors.primary.base}
- iconSize="l"
/>
</Tooltip>
</span>
diff --git a/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx b/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
index cc7fd23d30..4307a6bca2 100644
--- a/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
+++ b/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
@@ -74,13 +74,13 @@ export const ExportToCSVDropdown = ({
<Menu.Item key={MenuKeys.ExportOriginal}>
<MenuItemContent>
{t('Original')}
- <Icons.Download />
+ <Icons.DownloadOutlined />
</MenuItemContent>
</Menu.Item>
<Menu.Item key={MenuKeys.ExportPivoted}>
<MenuItemContent>
{t('Pivoted')}
- <Icons.Download />
+ <Icons.DownloadOutlined />
</MenuItemContent>
</Menu.Item>
</Menu>
diff --git a/superset-frontend/src/explore/components/PropertiesModal/PropertiesModal.test.tsx b/superset-frontend/src/explore/components/PropertiesModal/PropertiesModal.test.tsx
index 4d1dc67c1d..cbe8f92540 100644
--- a/superset-frontend/src/explore/components/PropertiesModal/PropertiesModal.test.tsx
+++ b/superset-frontend/src/explore/components/PropertiesModal/PropertiesModal.test.tsx
@@ -159,13 +159,11 @@ test('Should render when show:true', async () => {
const props = createProps();
renderModal(props);
- // Wait for modal to be fully rendered and animated
await waitFor(
() => {
- const modal = screen.getByRole('dialog', {
- name: 'Edit Chart Properties',
- });
+ const modal = screen.getByRole('dialog');
expect(modal).toBeInTheDocument();
+ expect(modal).toHaveTextContent('Edit Chart Properties');
expect(modal).not.toHaveClass('ant-zoom-appear');
},
{ timeout: 3000 },
diff --git a/superset-frontend/src/explore/components/PropertiesModal/index.tsx b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
index fccf71e813..dba9031e81 100644
--- a/superset-frontend/src/explore/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
@@ -33,7 +33,10 @@ import {
FeatureFlag,
getClientErrorObject,
ensureIsArray,
+ useTheme,
+ css,
} from '@superset-ui/core';
+import Icons from 'src/components/Icons';
import Chart, { Slice } from 'src/types/Chart';
import withToasts from 'src/components/MessageToasts/withToasts';
import { loadTags } from 'src/components/Tags/utils';
@@ -67,6 +70,7 @@ function PropertiesModal({
show,
addSuccessToast,
}: PropertiesModalProps) {
+ const theme = useTheme();
const [submitting, setSubmitting] = useState(false);
const [form] = AntdForm.useForm();
// values of form inputs
@@ -245,7 +249,17 @@ function PropertiesModal({
<Modal
show={show}
onHide={onHide}
- title={t('Edit Chart Properties')}
+ title={
+ <span>
+ <Icons.EditOutlined
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ `}
+ data-test="edit-alt"
+ />
+ {t('Edit Chart Properties')}
+ </span>
+ }
footer={
<>
<Button
diff --git a/superset-frontend/src/explore/components/RunQueryButton/index.tsx b/superset-frontend/src/explore/components/RunQueryButton/index.tsx
index 08733132a8..80e14fc3b0 100644
--- a/superset-frontend/src/explore/components/RunQueryButton/index.tsx
+++ b/superset-frontend/src/explore/components/RunQueryButton/index.tsx
@@ -18,8 +18,9 @@
*/
import { ReactNode } from 'react';
-import { t } from '@superset-ui/core';
+import { t, useTheme } from '@superset-ui/core';
import Button from 'src/components/Button';
+import Icons from 'src/components/Icons';
export type RunQueryButtonProps = {
loading: boolean;
@@ -30,7 +31,6 @@ export type RunQueryButtonProps = {
canStopQuery: boolean;
chartIsStale: boolean;
};
-
export const RunQueryButton = ({
loading,
onQuery,
@@ -39,12 +39,12 @@ export const RunQueryButton = ({
isNewChart,
canStopQuery,
chartIsStale,
-}: RunQueryButtonProps) =>
- loading ? (
+}: RunQueryButtonProps) => {
+ const theme = useTheme();
+ return loading ? (
<Button onClick={onStop} buttonStyle="warning" disabled={!canStopQuery}>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-stop" /> {t('Stop')}
+ <Icons.Square iconSize="xs" iconColor={theme.colors.primary.light5} />
+ {t('Stop')}
</Button>
) : (
<Button
@@ -56,3 +56,4 @@ export const RunQueryButton = ({
{isNewChart ? t('Create chart') : t('Update chart')}
</Button>
);
+};
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx
index 84071c8670..6a5be7ce1f 100644
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx
@@ -27,6 +27,7 @@ import {
SupersetTheme,
t,
withTheme,
+ css,
} from '@superset-ui/core';
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
import AsyncEsmComponent from 'src/components/AsyncEsmComponent';
@@ -36,6 +37,7 @@ import CustomListItem from 'src/explore/components/controls/CustomListItem';
import { ChartState, ExplorePageState } from 'src/explore/types';
import { AnyAction } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
+import Icons from 'src/components/Icons';
import ControlPopover, {
getSectionContainerElement,
} from '../ControlPopover/ControlPopover';
@@ -187,12 +189,9 @@ class AnnotationLayerControl extends PureComponent<Props, PopoverState> {
const { annotationError, annotationQuery, theme } = this.props;
if (annotationQuery[anno.name]) {
return (
- // TODO: Remove fa-icon
- // eslint-disable-next-line icons/no-fa-icons-usage
- <i
- className="fa fa-refresh"
- style={{ color: theme.colors.primary.base }}
- aria-hidden
+ <Icons.SyncOutlined
+ iconColor={theme.colors.primary.base}
+ iconSize="m"
/>
);
}
@@ -213,6 +212,7 @@ class AnnotationLayerControl extends PureComponent<Props, PopoverState> {
render() {
const { addedAnnotationIndex } = this.state;
+ const { theme } = this.props;
const addedAnnotation =
addedAnnotationIndex !== null
? this.props.value[addedAnnotationIndex]
@@ -263,13 +263,15 @@ class AnnotationLayerControl extends PureComponent<Props, PopoverState> {
}
>
<CustomListItem selectable>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i
+ <Icons.PlusOutlined
+ iconSize="m"
+ css={css`
+ margin: auto ${theme.gridUnit}px auto 0;
+ vertical-align: tex-top;
+ `}
data-test="add-annotation-layer-button"
- className="fa fa-plus"
- />{' '}
- {t('Add annotation layer')}
+ />
+ {t('Add annotation layer')}
</CustomListItem>
</ControlPopover>
</List>
diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx b/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx
index 6c5e56b45a..9600431883 100644
--- a/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx
+++ b/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx
@@ -105,10 +105,10 @@ test('Should have add button', async () => {
render(<CollectionControl {...props} />);
expect(
- await screen.findByRole('button', { name: 'plus-large' }),
+ await screen.findByRole('button', { name: 'plus' }),
).toBeInTheDocument();
expect(props.onChange).toHaveBeenCalledTimes(0);
- userEvent.click(screen.getByRole('button', { name: 'plus-large' }));
+ userEvent.click(screen.getByRole('button', { name: 'plus' }));
expect(props.onChange).toHaveBeenCalledWith([
{ key: 'hrYAZ5iBH' },
undefined,
diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx b/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx
index 5453250302..7b25047c0a 100644
--- a/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx
@@ -163,7 +163,7 @@ class CollectionControl extends Component {
<HeaderContainer>
<ControlHeader {...this.props} />
<AddIconButton onClick={this.onAdd}>
- <Icons.PlusLarge
+ <Icons.PlusOutlined
iconSize="s"
iconColor={theme.colors.grayscale.light5}
/>
diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx
index 0ebcb97464..a4542c8ff5 100644
--- a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx
+++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx
@@ -66,7 +66,7 @@ test('should not display an alert icon if hasCustomLabelsColor=false', async ()
setup();
await waitFor(() => {
expect(
- screen.queryByRole('img', { name: 'alert-solid' }),
+ screen.queryByRole('img', { name: 'warning' }),
).not.toBeInTheDocument();
});
});
@@ -78,9 +78,7 @@ test('should display an alert icon if hasCustomLabelsColor=true', async () => {
};
setup(hasCustomLabelsColorProps);
await waitFor(() => {
- expect(
- screen.getByRole('img', { name: 'alert-solid' }),
- ).toBeInTheDocument();
+ expect(screen.getByRole('img', { name: 'warning' })).toBeInTheDocument();
});
});
diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
index a187e52b8e..40e0c463bf 100644
--- a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
@@ -23,7 +23,6 @@ import {
ColorScheme,
ColorSchemeGroup,
SequentialScheme,
- styled,
t,
useTheme,
getLabelsColorMap,
@@ -71,10 +70,6 @@ export interface ColorSchemeControlProps {
hovered?: boolean;
}
-const StyledAlert = styled(Icons.AlertSolid)`
- color: ${({ theme }) => theme.colors.warning.base};
-`;
-
const CUSTOM_LABEL_ALERT = t(
`The colors of this chart might be overridden by custom label colors of the related dashboard.
Check the JSON metadata in the Advanced settings.`,
@@ -109,6 +104,7 @@ const Label = ({
| 'hasSharedLabelsColor'
| 'hasDashboardColorScheme'
>) => {
+ const theme = useTheme();
if (hasSharedLabelsColor || hasCustomLabelsColor || hasDashboardColorScheme) {
const alertTitle =
hasCustomLabelsColor && !hasSharedLabelsColor
@@ -116,12 +112,17 @@ const Label = ({
: dashboardId && hasDashboardColorScheme
? DASHBOARD_ALERT
: DASHBOARD_CONTEXT_ALERT;
-
return (
<>
{label}{' '}
<Tooltip title={alertTitle}>
- <StyledAlert iconSize="s" />
+ <Icons.WarningOutlined
+ iconColor={theme.colors.warning.base}
+ css={css`
+ vertical-align: baseline;
+ `}
+ iconSize="s"
+ />
</Tooltip>
</>
);
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
index baa0fcf6c1..aabfade6b2 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
@@ -146,7 +146,10 @@ const ConditionalFormattingControl = ({
{conditionalFormattingConfigs.map((config, index) => (
<FormatterContainer key={index}>
<CloseButton onClick={() => onDelete(index)}>
- <Icons.XSmall iconColor={theme.colors.grayscale.light1} />
+ <Icons.CloseOutlined
+ iconSize="m"
+ iconColor={theme.colors.grayscale.light1}
+ />
</CloseButton>
<FormattingPopover
title={t('Edit formatter')}
@@ -161,7 +164,13 @@ const ConditionalFormattingControl = ({
<OptionControlContainer withCaret>
<Label>{createLabel(config)}</Label>
<CaretContainer>
- <Icons.CaretRight iconColor={theme.colors.grayscale.light1} />
+ <Icons.RightOutlined
+ iconSize="m"
+ css={css`
+ margin-top: ${theme.gridUnit}px;
+ `}
+ iconColor={theme.colors.grayscale.light1}
+ />
</CaretContainer>
</OptionControlContainer>
</FormattingPopover>
@@ -175,7 +184,14 @@ const ConditionalFormattingControl = ({
extraColorChoices={extraColorChoices}
>
<AddControlLabel>
- <Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
+ <Icons.PlusOutlined
+ iconSize="m"
+ iconColor={theme.colors.grayscale.light1}
+ css={theme => ({
+ margin: `auto ${theme.gridUnit}px auto 0`,
+ verticalAlign: 'baseline',
+ })}
+ />
{t('Add new color formatter')}
</AddControlLabel>
</FormattingPopover>
diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.jsx
index 3fd1067a47..d6204a0ed4 100644
--- a/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.jsx
+++ b/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.jsx
@@ -102,7 +102,7 @@ describe('DatasourceControl', () => {
expect(
container.querySelector('[data-test="datasource-menu-trigger"]'),
).toBeInTheDocument();
- userEvent.click(screen.getByLabelText('more-vert'));
+ userEvent.click(screen.getByLabelText('more'));
await waitFor(() => {
expect(screen.queryAllByRole('menuitem')).toHaveLength(3);
});
@@ -121,7 +121,7 @@ describe('DatasourceControl', () => {
expect(
container.querySelector('[data-test="datasource-menu-trigger"]'),
).toBeInTheDocument();
- userEvent.click(screen.getByLabelText('more-vert'));
+ userEvent.click(screen.getByLabelText('more'));
await waitFor(() => {
expect(screen.queryAllByRole('menuitem')).toHaveLength(2);
});
@@ -129,7 +129,7 @@ describe('DatasourceControl', () => {
it('should render health check message', async () => {
setup();
- const modalTrigger = screen.getByLabelText('alert-solid');
+ const modalTrigger = screen.getByLabelText('warning');
expect(modalTrigger).toBeInTheDocument();
// Hover the modal so healthcheck message can show up
diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
index 3070cdc7d1..8f866af430 100644
--- a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
@@ -21,6 +21,7 @@
import { PureComponent } from 'react';
import PropTypes from 'prop-types';
import {
+ css,
DatasourceType,
SupersetClient,
styled,
@@ -116,7 +117,7 @@ const Styles = styled.div`
span[aria-label='dataset-physical'] {
color: ${({ theme }) => theme.colors.grayscale.base};
}
- span[aria-label='more-vert'] {
+ span[aria-label='more'] {
color: ${({ theme }) => theme.colors.primary.base};
}
`;
@@ -136,7 +137,7 @@ export const datasourceIconLookup = {
[DatasourceType.Query]: (
<Icons.ConsoleSqlOutlined className="datasource-svg" />
),
- [DatasourceType.Table]: <Icons.DatasetPhysical className="datasource-svg" />,
+ [DatasourceType.Table]: <Icons.TableOutlined className="datasource-svg" />,
};
// Render title for datasource with tooltip only if text is longer than VISIBLE_TITLE_LENGTH
@@ -400,7 +401,12 @@ class DatasourceControl extends PureComponent {
{renderDatasourceTitle(titleText, tooltip)}
{healthCheckMessage && (
<Tooltip title={healthCheckMessage}>
- <Icons.AlertSolid iconColor={theme.colors.warning.base} />
+ <Icons.WarningOutlined
+ css={css`
+ margin-left: ${theme.gridUnit * 2}px;
+ `}
+ iconColor={theme.colors.warning.base}
+ />
</Tooltip>
)}
{extra?.warning_markdown && (
@@ -415,7 +421,9 @@ class DatasourceControl extends PureComponent {
trigger={['click']}
data-test="datasource-menu"
>
- <Icons.MoreVert
+ <Icons.MoreOutlined
+ IconSize="xl"
+ iconColor={theme.colors.primary.base}
className="datasource-modal-trigger"
data-test="datasource-menu-trigger"
/>
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
index 5626a09380..5f200ea589 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@@ -319,7 +319,9 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
)}
{!validTimeRange && (
<IconWrapper className="warning">
- <Icons.ErrorSolidSmall iconColor={theme.colors.error.base} />
+ <Icons.ExclamationCircleOutlined
+ iconColor={theme.colors.error.base}
+ />
<span className="text error">{evalResponse}</span>
</IconWrapper>
)}
@@ -351,7 +353,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
const title = (
<IconWrapper>
- <Icons.EditAlt iconColor={theme.colors.grayscale.base} />
+ <Icons.EditOutlined />
<span className="text">{t('Edit time range')}</span>
</IconWrapper>
);
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx
index f017490ece..e44c0322a0 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx
@@ -19,7 +19,7 @@
import { forwardRef, MouseEvent, ReactNode, RefObject } from 'react';
-import { css, styled, useTheme, t } from '@superset-ui/core';
+import { css, styled, t } from '@superset-ui/core';
import Icons from 'src/components/Icons';
export type DateLabelProps = {
@@ -85,22 +85,16 @@ const LabelContainer = styled.div<{
`;
export const DateLabel = forwardRef(
- (props: DateLabelProps, ref: RefObject<HTMLSpanElement>) => {
- const theme = useTheme();
- return (
- <LabelContainer {...props} tabIndex={0} role="button">
- <span
- id={`date-label-${props.name}`}
- className="date-label-content"
- ref={ref}
- >
- {typeof props.label === 'string' ? t(props.label) : props.label}
- </span>
- <Icons.CalendarOutlined
- iconSize="s"
- iconColor={theme.colors.grayscale.base}
- />
- </LabelContainer>
- );
- },
+ (props: DateLabelProps, ref: RefObject<HTMLSpanElement>) => (
+ <LabelContainer {...props} tabIndex={0} role="button">
+ <span
+ id={`date-label-${props.name}`}
+ className="date-label-content"
+ ref={ref}
+ >
+ {typeof props.label === 'string' ? t(props.label) : props.label}
+ </span>
+ <Icons.CalendarOutlined iconSize="s" />
+ </LabelContainer>
+ ),
);
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx
index 9c1f6636c5..a4dec16e3f 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx
@@ -17,9 +17,10 @@
* under the License.
*/
import { useCallback, useState } from 'react';
-import { t, styled } from '@superset-ui/core';
+import { t, styled, useTheme } from '@superset-ui/core';
import { Input } from 'src/components/Input';
import { Tooltip } from 'src/components/Tooltip';
+import Icons from 'src/components/Icons';
const StyledInput = styled(Input)`
border-radius: ${({ theme }) => theme.borderRadius};
@@ -33,6 +34,7 @@ export const DndColumnSelectPopoverTitle = ({
isEditDisabled,
hasCustomLabel,
}) => {
+ const theme = useTheme();
const [isHovered, setIsHovered] = useState(false);
const [isEditMode, setIsEditMode] = useState(false);
@@ -91,11 +93,11 @@ export const DndColumnSelectPopoverTitle = ({
>
{title || defaultLabel}
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i
- className="fa fa-pencil"
- style={{ color: isHovered ? 'black' : 'grey' }}
+ <Icons.EditOutlined
+ iconColor={
+ isHovered ? theme.colors.primary.base : theme.colors.grayscale.base
+ }
+ iconSize="m"
/>
</span>
</Tooltip>
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx
index 904fd4b45d..e2dd15674f 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx
@@ -100,7 +100,13 @@ export default function DndSelectLabel({
cancelHover={!props.onClickGhostButton}
onClick={props.onClickGhostButton}
>
- <Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
+ <Icons.PlusOutlined
+ iconSize="m"
+ iconColor={theme.colors.grayscale.light1}
+ css={theme => ({
+ margin: `auto ${theme.gridUnit}px auto 0`,
+ })}
+ />
{t(props.ghostButtonText)}
</AddControlLabel>
);
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.test.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.test.tsx
index 36e51b26cc..d68e8988f4 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.test.tsx
@@ -42,10 +42,10 @@ describe('Option', () => {
);
expect(container).toBeInTheDocument();
expect(
- await screen.findByRole('img', { name: 'x-small' }),
+ await screen.findByRole('img', { name: 'close' }),
).toBeInTheDocument();
expect(
- screen.queryByRole('img', { name: 'caret-right' }),
+ screen.queryByRole('img', { name: 'right' }),
).not.toBeInTheDocument();
unmount();
});
@@ -57,10 +57,10 @@ describe('Option', () => {
</Option>,
);
expect(
- await screen.findByRole('img', { name: 'x-small' }),
+ await screen.findByRole('img', { name: 'close' }),
).toBeInTheDocument();
expect(
- await screen.findByRole('img', { name: 'caret-right' }),
+ await screen.findByRole('img', { name: 'right' }),
).toBeInTheDocument();
unmount();
});
@@ -84,7 +84,7 @@ describe('Option', () => {
Option
</Option>,
);
- userEvent.click(await screen.findByRole('img', { name: 'x-small' }));
+ userEvent.click(await screen.findByRole('img', { name: 'close' }));
expect(clickClose).toHaveBeenCalled();
unmount();
});
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx
index c6aabbea38..2234bef94d 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { useCallback } from 'react';
-import { styled, t, useTheme } from '@superset-ui/core';
+import { css, styled, t, useTheme } from '@superset-ui/core';
import Icons from 'src/components/Icons';
import {
CaretContainer,
@@ -53,11 +53,20 @@ export default function Option({
<OptionControlContainer data-test="option-label" withCaret={withCaret}>
{canDelete && (
<CloseContainer
+ css={css`
+ text-align: center;
+ `}
role="button"
data-test="remove-control-button"
onClick={onClickClose}
>
- <Icons.XSmall iconColor={theme.colors.grayscale.light1} />
+ <Icons.CloseOutlined
+ iconSize="m"
+ iconColor={theme.colors.grayscale.light1}
+ css={css`
+ vertical-align: sub;
+ `}
+ />
</CloseContainer>
)}
<Label data-test="control-label">{children}</Label>
@@ -77,7 +86,13 @@ export default function Option({
)}
{withCaret && (
<CaretContainer>
- <Icons.CaretRight iconColor={theme.colors.grayscale.light1} />
+ <Icons.RightOutlined
+ iconSize="m"
+ css={css`
+ margin-top: ${theme.gridUnit}px;
+ `}
+ iconColor={theme.colors.grayscale.light1}
+ />
</CaretContainer>
)}
</OptionControlContainer>
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.test.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.test.tsx
index 56c3249524..3d1a5a9d78 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.test.tsx
@@ -32,9 +32,7 @@ test('renders with default props', async () => {
{ useDnd: true },
);
expect(container).toBeInTheDocument();
- expect(
- await screen.findByRole('img', { name: 'x-small' }),
- ).toBeInTheDocument();
+ expect(await screen.findByRole('img', { name: 'close' })).toBeInTheDocument();
});
test('triggers onShiftOptions on drop', async () => {
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx
index 58d294d58b..85186773f6 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx
@@ -19,6 +19,7 @@
import { Component } from 'react';
import PropTypes from 'prop-types';
import {
+ css,
t,
logging,
SupersetClient,
@@ -362,8 +363,8 @@ class AdhocFilterControl extends Component {
<ControlHeader {...this.props} />
{this.addNewFilterPopoverTrigger(
<AddIconButton data-test="add-filter-button">
- <Icons.PlusLarge
- iconSize="s"
+ <Icons.PlusOutlined
+ iconSize="m"
iconColor={theme.colors.grayscale.light5}
/>
</AddIconButton>,
@@ -376,7 +377,13 @@ class AdhocFilterControl extends Component {
)
: this.addNewFilterPopoverTrigger(
<AddControlLabel>
- <Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
+ <Icons.PlusOutlined
+ css={css`
+ margin: auto ${theme.gridUnit}px auto 0;
+ `}
+ iconSize="m"
+ iconColor={theme.colors.grayscale.light1}
+ />
{t('Add filter')}
</AddControlLabel>,
)}
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx
index b2a94a900e..0e87eeab09 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx
@@ -18,7 +18,7 @@
*/
import { useEffect, useRef, useMemo } from 'react';
import { Select } from 'src/components';
-import { styled, t, useTheme } from '@superset-ui/core';
+import { css, styled, t, useTheme } from '@superset-ui/core';
import { SQLEditor } from 'src/components/AsyncAceEditor';
import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
import { getColumnKeywords } from 'src/explore/controlUtils/getColumnKeywords';
@@ -115,7 +115,11 @@ export default function AdhocFilterEditPopoverSqlTabContent({
<strong>HAVING</strong> {t('Filters by metrics')}
</span>
</div>
- <div css={{ marginTop: theme.gridUnit * 4 }}>
+ <div
+ css={css`
+ margin-top: ${theme.gridUnit * 4}px;
+ `}
+ >
<SQLEditor
ref={aceEditorRef}
keywords={keywords}
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx
index 96e3cdee81..583e5fdbf9 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx
@@ -79,14 +79,14 @@ test('should render the remove button', async () => {
test('should render the right caret', async () => {
render(setup(mockedProps), { useDnd: true, useRedux: true });
- expect(
- await screen.findByRole('img', { name: 'caret-right' }),
- ).toBeInTheDocument();
+ expect(await screen.findByRole('img', { name: 'right' })).toBeInTheDocument();
});
test('should render the Popover on clicking the right caret', async () => {
render(setup(mockedProps), { useDnd: true, useRedux: true });
- const rightCaret = await screen.findByRole('img', { name: 'caret-right' });
+ const rightCaret = await screen.findByRole('img', {
+ name: 'right',
+ });
userEvent.click(rightCaret);
expect(screen.getByRole('tooltip')).toBeInTheDocument();
});
diff --git a/superset-frontend/src/explore/components/controls/FixedOrMetricControl/index.jsx b/superset-frontend/src/explore/components/controls/FixedOrMetricControl/index.jsx
index b41def944e..50dcd1a930 100644
--- a/superset-frontend/src/explore/components/controls/FixedOrMetricControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/FixedOrMetricControl/index.jsx
@@ -18,8 +18,7 @@
*/
import { Component } from 'react';
import PropTypes from 'prop-types';
-import { css } from '@emotion/react';
-import { t } from '@superset-ui/core';
+import { css, t } from '@superset-ui/core';
import Label from 'src/components/Label';
import Collapse from 'src/components/Collapse';
import TextControl from 'src/explore/components/controls/TextControl';
diff --git a/superset-frontend/src/explore/components/controls/LayerConfigsControl/FlatLayerTree.tsx b/superset-frontend/src/explore/components/controls/LayerConfigsControl/FlatLayerTree.tsx
index 0c2d574fd1..4e48988ded 100644
--- a/superset-frontend/src/explore/components/controls/LayerConfigsControl/FlatLayerTree.tsx
+++ b/superset-frontend/src/explore/components/controls/LayerConfigsControl/FlatLayerTree.tsx
@@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-// eslint-disable-next-line no-restricted-imports
-import { PlusOutlined } from '@ant-design/icons'; // TODO: Use src/components/Icons
+import Icons from 'src/components/Icons';
import { css, styled, t } from '@superset-ui/core';
// eslint-disable-next-line no-restricted-imports
import { Button, Tree } from 'antd'; // TODO: Remove antd
@@ -136,7 +135,7 @@ export const FlatLayerTree = forwardRef<HTMLDivElement, FlatLayerTreeProps>(
onClick={onAddLayer}
size="small"
type="dashed"
- icon={<PlusOutlined />}
+ icon={<Icons.PlusOutlined iconSize="m" />}
>
{addLayerLabel}
</Button>
diff --git a/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerTreeItem.tsx b/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerTreeItem.tsx
index 283c2b3fb0..a92cc98fe3 100644
--- a/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerTreeItem.tsx
+++ b/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerTreeItem.tsx
@@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-// eslint-disable-next-line no-restricted-imports
-import { CloseOutlined, RightOutlined } from '@ant-design/icons'; // TODO: Use src/components/Icons
+import Icons from 'src/components/Icons';
// eslint-disable-next-line no-restricted-imports
import { Button, Tag } from 'antd'; // TODO: Remove antd
import { FC } from 'react';
@@ -41,7 +40,7 @@ export const LayerTreeItem: FC<LayerTreeItemProps> = ({
<Tag className={className}>
<Button
className="layer-tree-item-close"
- icon={<CloseOutlined />}
+ icon={<Icons.CloseOutlined iconSize="m" />}
onClick={onCloseTag}
size="small"
/>
@@ -63,7 +62,7 @@ export const LayerTreeItem: FC<LayerTreeItemProps> = ({
</span>
<Button
className="layer-tree-item-edit"
- icon={<RightOutlined />}
+ icon={<Icons.RightOutlined />}
onClick={onEditTag}
size="small"
/>
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.test.tsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.test.tsx
index 1dd238a0f2..22c162ffad 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.test.tsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.test.tsx
@@ -98,8 +98,7 @@ test('render default label if no title is provided', async () => {
test('start and end the title edit mode', async () => {
const { container, onChange } = setup();
expect(container).toBeInTheDocument();
-
- expect(container.getElementsByTagName('i')[0]).toBeVisible();
+ expect(screen.getByRole('img', { name: 'edit' })).toBeInTheDocument();
expect(screen.getByText(titleProps.label)).toBeVisible();
expect(
screen.queryByTestId('AdhocMetricEditTitle#input'),
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.tsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.tsx
index 861a2c88a7..41d6649c94 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.tsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.tsx
@@ -25,9 +25,10 @@ import {
FC,
} from 'react';
-import { t, styled } from '@superset-ui/core';
+import { t, styled, useTheme } from '@superset-ui/core';
import { Input } from 'src/components/Input';
import { Tooltip } from 'src/components/Tooltip';
+import Icons from 'src/components/Icons';
const TitleLabel = styled.span`
display: inline-block;
@@ -54,6 +55,7 @@ const AdhocMetricEditPopoverTitle: FC<AdhocMetricEditPopoverTitleProps> = ({
isEditDisabled,
onChange,
}) => {
+ const theme = useTheme();
const [isHovered, setIsHovered] = useState(false);
const [isEditMode, setIsEditMode] = useState(false);
@@ -120,11 +122,11 @@ const AdhocMetricEditPopoverTitle: FC<AdhocMetricEditPopoverTitleProps> = ({
>
<TitleLabel>{title?.label || defaultLabel}</TitleLabel>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i
- className="fa fa-pencil"
- style={{ color: isHovered ? 'black' : 'grey' }}
+ <Icons.EditOutlined
+ iconColor={
+ isHovered ? theme.colors.primary.base : theme.colors.grayscale.base
+ }
+ iconSize="m"
/>
</span>
</Tooltip>
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx b/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx
index e30016a67f..0376be5e6d 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx
@@ -317,8 +317,8 @@ const MetricsControl = ({
disabled={isAddNewMetricDisabled()}
data-test="add-metric-button"
>
- <Icons.PlusLarge
- iconSize="s"
+ <Icons.PlusOutlined
+ iconSize="m"
iconColor={theme.colors.grayscale.light5}
/>
</AddIconButton>,
@@ -329,7 +329,10 @@ const MetricsControl = ({
? value.map((value, index) => valueRenderer(value, index))
: addNewMetricPopoverTrigger(
<AddControlLabel>
- <Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
+ <Icons.PlusOutlined
+ iconSize="m"
+ iconColor={theme.colors.grayscale.light1}
+ />
{t('Add metric')}
</AddControlLabel>,
)}
diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index 194a9944b6..38cc934379 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -82,7 +82,7 @@ export const CaretContainer = styled.div`
`;
export const CloseContainer = styled.div`
- height: 100%;
+ height: auto;
width: ${({ theme }) => theme.gridUnit * 6}px;
border-right: solid 1px ${({ theme }) => theme.colors.grayscale.dark2}0C;
cursor: pointer;
@@ -373,16 +373,25 @@ export const OptionControlLabel = ({
withCaret={withCaret}
data-test="option-label"
{...props}
+ css={css`
+ text-align: center;
+ `}
>
<CloseContainer
role="button"
data-test="remove-control-button"
onClick={onRemove}
>
- <Icons.XSmall iconColor={theme.colors.grayscale.light1} />
+ <Icons.CloseOutlined
+ iconSize="m"
+ iconColor={theme.colors.grayscale.light1}
+ css={css`
+ vertical-align: sub;
+ `}
+ />
</CloseContainer>
<Label data-test="control-label">
- {isFunction && <Icons.FieldDerived />}
+ {isFunction && <Icons.FunctionOutlined iconSize="m" />}
{getLabelContent()}
</Label>
{(!!datasourceWarningMessage || isExtra) && (
@@ -401,7 +410,13 @@ export const OptionControlLabel = ({
)}
{withCaret && (
<CaretContainer>
- <Icons.CaretRight iconColor={theme.colors.grayscale.light1} />
+ <Icons.RightOutlined
+ iconSize="m"
+ css={css`
+ margin-top: ${theme.gridUnit}px;
+ `}
+ iconColor={theme.colors.grayscale.light1}
+ />
</CaretContainer>
)}
</OptionControlContainer>
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx
index 83bb8744ec..fca2e657ca 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx
@@ -96,7 +96,6 @@ export const VizTile = ({
white-space: nowrap;
overflow: hidden;
max-width: fit-content;
-
${!isActive &&
css`
flex-shrink: 0;
@@ -123,7 +122,13 @@ export const VizTile = ({
`}
`}
>
- {vizMeta.icon}{' '}
+ <span
+ css={css`
+ padding: 0px ${theme.gridUnit}px;
+ `}
+ >
+ {vizMeta.icon}
+ </span>
<span
css={css`
overflow: hidden;
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
index 92a2c9a80b..f427bc9f03 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
@@ -120,11 +120,11 @@ describe('VizTypeControl', () => {
isModalOpenInit: false,
};
await waitForRenderWrapper(props);
- expect(screen.getByLabelText('table-chart-tile')).toBeVisible();
+ expect(screen.getByLabelText('table')).toBeVisible();
expect(screen.getByLabelText('big-number-chart-tile')).toBeVisible();
- expect(screen.getByLabelText('pie-chart-tile')).toBeVisible();
- expect(screen.getByLabelText('bar-chart-tile')).toBeVisible();
- expect(screen.getByLabelText('area-chart-tile')).toBeVisible();
+ expect(screen.getByLabelText('pie-chart')).toBeVisible();
+ expect(screen.getByLabelText('bar-chart')).toBeVisible();
+ expect(screen.getByLabelText('area-chart')).toBeVisible();
expect(screen.queryByLabelText('monitor')).not.toBeInTheDocument();
expect(screen.queryByLabelText('check-square')).not.toBeInTheDocument();
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
index 0dde8da562..85236ca3a4 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@@ -618,7 +618,7 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
},
[Sections.Tags]: {
title: t('Tags'),
- icon: <Icons.Tags iconSize="m" />,
+ icon: <Icons.NumberOutlined iconSize="m" />,
selectors: tags,
},
}),
@@ -737,13 +737,13 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
data-test={`${VIZ_TYPE_CONTROL_TEST_ID}__search-input`}
prefix={
<InputIconAlignment>
- <Icons.Search iconSize="m" />
+ <Icons.SearchOutlined iconSize="m" />
</InputIconAlignment>
}
suffix={
<InputIconAlignment>
{searchInputValue && (
- <Icons.XLarge iconSize="m" onClick={stopSearching} />
+ <Icons.CloseOutlined iconSize="m" onClick={stopSearching} />
)}
</InputIconAlignment>
}
@@ -793,7 +793,14 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
</SectionTitle>
<TagsWrapper>
{selectedVizMetadata?.tags.map(tag => (
- <Label key={tag}>{tag}</Label>
+ <Label
+ key={tag}
+ css={({ gridUnit }) => css`
+ margin-bottom: ${gridUnit * 2}px;
+ `}
+ >
+ {tag}
+ </Label>
))}
</TagsWrapper>
<Description>
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/constants.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/constants.tsx
index de8e5c7339..1d7b0206b8 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/constants.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/constants.tsx
@@ -23,17 +23,17 @@ import { VizMeta } from './types';
export const FEATURED_CHARTS: VizMeta[] = [
{
name: VizType.Line,
- icon: <Icons.LineChartTile />,
+ icon: <Icons.LineChartOutlined iconSize="l" />,
},
{
name: VizType.Bar,
- icon: <Icons.BarChartTile />,
+ icon: <Icons.BarChartOutlined iconSize="l" />,
},
- { name: VizType.Area, icon: <Icons.AreaChartTile /> },
- { name: VizType.Table, icon: <Icons.TableChartTile /> },
+ { name: VizType.Area, icon: <Icons.AreaChartOutlined iconSize="l" /> },
+ { name: VizType.Table, icon: <Icons.TableOutlined iconSize="l" /> },
{
name: VizType.BigNumberTotal,
icon: <Icons.BigNumberChartTile />,
},
- { name: VizType.Pie, icon: <Icons.PieChartTile /> },
+ { name: VizType.Pie, icon: <Icons.PieChartOutlined iconSize="l" /> },
];
diff --git a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx
index 8721570d51..44db4de824 100644
--- a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx
+++ b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx
@@ -57,7 +57,7 @@ const DashboardsSubMenu = ({
<Input
allowClear
placeholder={t('Search')}
- prefix={<Icons.Search iconSize="l" />}
+ prefix={<Icons.StarOutlined iconSize="l" />}
css={css`
width: ${WIDTH}px;
margin: ${theme.gridUnit * 2}px ${theme.gridUnit * 3}px;
@@ -105,7 +105,6 @@ const DashboardsSubMenu = ({
</div>
<Icons.Full
iconSize="l"
- iconColor={theme.colors.grayscale.base}
css={css`
margin-left: ${theme.gridUnit * 2}px;
visibility: ${hoveredItem === dashboard.id
diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index 9b3f82dff1..0f619e8fa5 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -71,6 +71,7 @@ import {
} from 'src/features/alerts/types';
import { useSelector } from 'react-redux';
import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
+import Icons from 'src/components/Icons';
import NumberInput from './components/NumberInput';
import { AlertReportCronScheduler } from './components/AlertReportCronScheduler';
import { NotificationMethod } from './components/NotificationMethod';
@@ -407,9 +408,13 @@ const NotificationMethodAdd: FunctionComponent<NotificationMethodAddProps> = ({
return (
<StyledNotificationAddButton className={status} onClick={checkStatus}>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" />{' '}
+ <Icons.PlusOutlined
+ iconSize="m"
+ css={theme => ({
+ margin: `auto ${theme.gridUnit * 2}px auto 0`,
+ verticalAlign: 'middle',
+ })}
+ />
{status === 'active'
? t('Add another notification method')
: t('Add delivery method')}
diff --git a/superset-frontend/src/features/alerts/components/AlertStatusIcon.tsx b/superset-frontend/src/features/alerts/components/AlertStatusIcon.tsx
index d558e5a437..9dbe345300 100644
--- a/superset-frontend/src/features/alerts/components/AlertStatusIcon.tsx
+++ b/superset-frontend/src/features/alerts/components/AlertStatusIcon.tsx
@@ -53,15 +53,15 @@ export default function AlertStatusIcon({
}) {
const theme = useTheme();
const lastStateConfig = {
- icon: Icons.Check,
+ icon: Icons.CheckOutlined,
label: '',
status: '',
};
switch (state) {
case AlertState.Success:
lastStateConfig.icon = isReportEnabled
- ? Icons.Check
- : Icons.AlertSolidSmall;
+ ? Icons.CheckOutlined
+ : Icons.WarningOutlined;
lastStateConfig.label = isReportEnabled
? t('Report sent')
: t('Alert triggered, notification sent');
@@ -75,24 +75,24 @@ export default function AlertStatusIcon({
lastStateConfig.status = AlertState.Working;
break;
case AlertState.Error:
- lastStateConfig.icon = Icons.XSmall;
+ lastStateConfig.icon = Icons.CloseOutlined;
lastStateConfig.label = isReportEnabled
? t('Report failed')
: t('Alert failed');
lastStateConfig.status = AlertState.Error;
break;
case AlertState.Noop:
- lastStateConfig.icon = Icons.Check;
+ lastStateConfig.icon = Icons.CheckOutlined;
lastStateConfig.label = t('Nothing triggered');
lastStateConfig.status = AlertState.Noop;
break;
case AlertState.Grace:
- lastStateConfig.icon = Icons.AlertSolidSmall;
+ lastStateConfig.icon = Icons.WarningOutlined;
lastStateConfig.label = t('Alert Triggered, In Grace Period');
lastStateConfig.status = AlertState.Grace;
break;
default:
- lastStateConfig.icon = Icons.Check;
+ lastStateConfig.icon = Icons.CheckOutlined;
lastStateConfig.label = t('Nothing triggered');
lastStateConfig.status = AlertState.Noop;
}
@@ -100,6 +100,7 @@ export default function AlertStatusIcon({
return (
<Tooltip title={lastStateConfig.label} placement="bottomLeft">
<Icon
+ iconSize="m"
iconColor={getStatusColor(
lastStateConfig.status,
isReportEnabled,
diff --git a/superset-frontend/src/features/alerts/components/NotificationMethod.test.tsx b/superset-frontend/src/features/alerts/components/NotificationMethod.test.tsx
index eec2a434f6..b9b46e6069 100644
--- a/superset-frontend/src/features/alerts/components/NotificationMethod.test.tsx
+++ b/superset-frontend/src/features/alerts/components/NotificationMethod.test.tsx
@@ -546,9 +546,7 @@ describe('NotificationMethod', () => {
);
// Wait for RefreshLabel to be rendered (it may have a tooltip with the provided content)
- const refreshLabel = await waitFor(() =>
- screen.getByLabelText('refresh'),
- );
+ const refreshLabel = await waitFor(() => screen.getByLabelText('sync'));
// Simulate a click on the RefreshLabel
userEvent.click(refreshLabel);
// Verify that the SupersetClient.get was called indicating that updateSlackOptions executed
diff --git a/superset-frontend/src/features/alerts/components/NotificationMethod.tsx b/superset-frontend/src/features/alerts/components/NotificationMethod.tsx
index e930f53749..46613607da 100644
--- a/superset-frontend/src/features/alerts/components/NotificationMethod.tsx
+++ b/superset-frontend/src/features/alerts/components/NotificationMethod.tsx
@@ -88,7 +88,6 @@ const StyledNotificationMethod = styled.div`
align-items: center;
font-size: ${theme.typography.sizes.s}px;
cursor: pointer;
- margin-top: ${theme.gridUnit}px;
.icon {
width: ${theme.gridUnit * 3}px;
@@ -470,7 +469,7 @@ export const NotificationMethod: FunctionComponent<NotificationMethodProps> = ({
className="delete-button"
onClick={() => onRemove(index)}
>
- <Icons.Trash iconColor={theme.colors.grayscale.base} />
+ <Icons.DeleteOutlined iconSize="l" />
</span>
) : null}
</div>
@@ -618,7 +617,7 @@ export const NotificationMethod: FunctionComponent<NotificationMethodProps> = ({
onClick={() => setCcVisible(true)}
style={{ display: ccVisible ? 'none' : 'inline-flex' }}
>
- <Icons.Email className="icon" />
+ <Icons.MailOutlined iconSize="xs" className="icon" />
{t('Add CC Recipients')}
</span>
<span
@@ -628,7 +627,7 @@ export const NotificationMethod: FunctionComponent<NotificationMethodProps> = ({
onClick={() => setBccVisible(true)}
style={{ display: bccVisible ? 'none' : 'inline-flex' }}
>
- <Icons.Email className="icon" />
+ <Icons.MailOutlined iconSize="xs" className="icon" />
{t('Add BCC Recipients')}
</span>
</div>
diff --git a/superset-frontend/src/features/alerts/components/RecipientIcon.test.tsx b/superset-frontend/src/features/alerts/components/RecipientIcon.test.tsx
index 2ea597bdc7..55f34f94bc 100644
--- a/superset-frontend/src/features/alerts/components/RecipientIcon.test.tsx
+++ b/superset-frontend/src/features/alerts/components/RecipientIcon.test.tsx
@@ -22,9 +22,10 @@ import { NotificationMethodOption } from '../types';
describe('RecipientIcon', () => {
it('should render the email icon when type is Email', () => {
- render(<RecipientIcon type={NotificationMethodOption.Email} />);
- const regexPattern = new RegExp(NotificationMethodOption.Email, 'i');
- const emailIcon = screen.getByLabelText(regexPattern);
+ const { container } = render(
+ <RecipientIcon type={NotificationMethodOption.Email} />,
+ );
+ const emailIcon = container.querySelector('[data-icon="mail"]');
expect(emailIcon).toBeInTheDocument();
});
diff --git a/superset-frontend/src/features/alerts/components/RecipientIcon.tsx b/superset-frontend/src/features/alerts/components/RecipientIcon.tsx
index b7c714fca7..13dc2b92c7 100644
--- a/superset-frontend/src/features/alerts/components/RecipientIcon.tsx
+++ b/superset-frontend/src/features/alerts/components/RecipientIcon.tsx
@@ -22,7 +22,7 @@ import { Tooltip } from 'src/components/Tooltip';
import Icons from 'src/components/Icons';
import { NotificationMethodOption } from '../types';
-const StyledIcon = (theme: SupersetTheme) => css`
+const notificationStyledIcon = (theme: SupersetTheme) => css`
color: ${theme.colors.grayscale.light1};
margin-right: ${theme.gridUnit * 2}px;
`;
@@ -34,15 +34,21 @@ export default function RecipientIcon({ type }: { type: string }) {
};
switch (type) {
case NotificationMethodOption.Email:
- recipientIconConfig.icon = <Icons.Email css={StyledIcon} />;
+ recipientIconConfig.icon = (
+ <Icons.MailOutlined css={notificationStyledIcon} iconSize="l" />
+ );
recipientIconConfig.label = NotificationMethodOption.Email;
break;
case NotificationMethodOption.Slack:
- recipientIconConfig.icon = <Icons.Slack css={StyledIcon} />;
+ recipientIconConfig.icon = (
+ <Icons.Slack css={notificationStyledIcon} iconSize="l" />
+ );
recipientIconConfig.label = NotificationMethodOption.Slack;
break;
case NotificationMethodOption.SlackV2:
- recipientIconConfig.icon = <Icons.Slack css={StyledIcon} />;
+ recipientIconConfig.icon = (
+ <Icons.Slack css={notificationStyledIcon} iconSize="l" />
+ );
recipientIconConfig.label = NotificationMethodOption.Slack;
break;
default:
diff --git a/superset-frontend/src/features/alerts/components/ValidatedPanelHeader.tsx b/superset-frontend/src/features/alerts/components/ValidatedPanelHeader.tsx
index 04e4d99aaf..611161bc54 100644
--- a/superset-frontend/src/features/alerts/components/ValidatedPanelHeader.tsx
+++ b/superset-frontend/src/features/alerts/components/ValidatedPanelHeader.tsx
@@ -16,9 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t } from '@superset-ui/core';
-// eslint-disable-next-line no-restricted-imports
-import { CheckCircleOutlined } from '@ant-design/icons'; // TODO: Use src/components/Icons
+import { t, useTheme } from '@superset-ui/core';
+import Icons from 'src/components/Icons';
const ValidatedPanelHeader = ({
title,
@@ -31,8 +30,13 @@ const ValidatedPanelHeader = ({
validateCheckStatus: boolean;
testId?: string;
}): JSX.Element => {
- const checkmark = <CheckCircleOutlined />;
-
+ const theme = useTheme();
+ const checkmark = (
+ <Icons.CheckCircleOutlined
+ iconSize="m"
+ iconColor={theme.colors.success.base}
+ />
+ );
return (
<div className="collapse-panel-header">
<div className="collapse-panel-title" data-test={testId}>
diff --git a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
index beeadb4373..2af51d0510 100644
--- a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
+++ b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
@@ -18,11 +18,10 @@
*/
import { FunctionComponent, useState, useEffect, ChangeEvent } from 'react';
-import { styled, t } from '@superset-ui/core';
+import { css, styled, t, useTheme } from '@superset-ui/core';
import { useSingleViewResource } from 'src/views/CRUD/hooks';
import Icons from 'src/components/Icons';
-import { StyledIcon } from 'src/views/CRUD/utils';
import Modal from 'src/components/Modal';
import withToasts from 'src/components/MessageToasts/withToasts';
@@ -94,6 +93,7 @@ const AnnotationLayerModal: FunctionComponent<AnnotationLayerModalProps> = ({
show,
layer = null,
}) => {
+ const theme = useTheme();
const [disableSave, setDisableSave] = useState<boolean>(true);
const [currentLayer, setCurrentLayer] =
useState<AnnotationLayerObject | null>();
@@ -237,9 +237,20 @@ const AnnotationLayerModal: FunctionComponent<AnnotationLayerModalProps> = ({
title={
<h4 data-test="annotation-layer-modal-title">
{isEditMode ? (
- <Icons.EditAlt css={StyledIcon} />
+ <Icons.EditOutlined
+ iconSize="l"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ `}
+ />
) : (
- <Icons.PlusLarge css={StyledIcon} />
+ <Icons.PlusOutlined
+ iconSize="m"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ vertical-align: text-top;
+ `}
+ />
)}
{isEditMode
? t('Edit annotation layer properties')
diff --git a/superset-frontend/src/features/annotations/AnnotationModal.tsx b/superset-frontend/src/features/annotations/AnnotationModal.tsx
index b4cbbc5c53..1889177909 100644
--- a/superset-frontend/src/features/annotations/AnnotationModal.tsx
+++ b/superset-frontend/src/features/annotations/AnnotationModal.tsx
@@ -18,13 +18,12 @@
*/
import { FunctionComponent, useState, useEffect, ChangeEvent } from 'react';
-import { styled, t } from '@superset-ui/core';
+import { css, styled, t, useTheme } from '@superset-ui/core';
import { useSingleViewResource } from 'src/views/CRUD/hooks';
import { RangePicker } from 'src/components/DatePicker';
import { extendedDayjs } from 'src/utils/dates';
import Icons from 'src/components/Icons';
import Modal from 'src/components/Modal';
-import { StyledIcon } from 'src/views/CRUD/utils';
import withToasts from 'src/components/MessageToasts/withToasts';
import { JsonEditor } from 'src/components/AsyncAceEditor';
@@ -92,6 +91,7 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
onHide,
show,
}) => {
+ const theme = useTheme();
const [disableSave, setDisableSave] = useState<boolean>(true);
const [currentAnnotation, setCurrentAnnotation] =
useState<AnnotationObject | null>(null);
@@ -279,9 +279,19 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
title={
<h4 data-test="annotation-modal-title">
{isEditMode ? (
- <Icons.EditAlt css={StyledIcon} />
+ <Icons.EditOutlined
+ iconSize="l"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ `}
+ />
) : (
- <Icons.PlusLarge css={StyledIcon} />
+ <Icons.PlusOutlined
+ iconSize="l"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ `}
+ />
)}
{isEditMode ? t('Edit annotation') : t('Add annotation')}
</h4>
diff --git a/superset-frontend/src/features/charts/ChartCard.tsx b/superset-frontend/src/features/charts/ChartCard.tsx
index 894ddf2239..c841201752 100644
--- a/superset-frontend/src/features/charts/ChartCard.tsx
+++ b/superset-frontend/src/features/charts/ChartCard.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { isFeatureEnabled, FeatureFlag, t, useTheme } from '@superset-ui/core';
+import { isFeatureEnabled, FeatureFlag, t, css } from '@superset-ui/core';
import { Link, useHistory } from 'react-router-dom';
import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
import Icons from 'src/components/Icons';
@@ -68,10 +68,43 @@ export default function ChartCard({
const canEdit = hasPerm('can_write');
const canDelete = hasPerm('can_write');
const canExport = hasPerm('can_export');
- const theme = useTheme();
-
const menu = (
<Menu>
+ {canEdit && (
+ <Menu.Item>
+ <div
+ data-test="chart-list-edit-option"
+ role="button"
+ tabIndex={0}
+ onClick={() => openChartEditModal(chart)}
+ >
+ <Icons.EditOutlined
+ iconSize="l"
+ css={css`
+ vertical-align: text-top;
+ `}
+ />{' '}
+ {t('Edit')}
+ </div>
+ </Menu.Item>
+ )}
+ {canExport && (
+ <Menu.Item>
+ <div
+ role="button"
+ tabIndex={0}
+ onClick={() => handleBulkChartExport([chart])}
+ >
+ <Icons.UploadOutlined
+ iconSize="l"
+ css={css`
+ vertical-align: text-top;
+ `}
+ />{' '}
+ {t('Export')}
+ </div>
+ </Menu.Item>
+ )}
{canDelete && (
<Menu.Item>
<ConfirmStatusChange
@@ -101,35 +134,18 @@ export default function ChartCard({
className="action-button"
onClick={confirmDelete}
>
- <Icons.Trash iconSize="l" /> {t('Delete')}
+ <Icons.DeleteOutlined
+ iconSize="l"
+ css={css`
+ vertical-align: text-top;
+ `}
+ />{' '}
+ {t('Delete')}
</div>
)}
</ConfirmStatusChange>
</Menu.Item>
)}
- {canExport && (
- <Menu.Item>
- <div
- role="button"
- tabIndex={0}
- onClick={() => handleBulkChartExport([chart])}
- >
- <Icons.Share iconSize="l" /> {t('Export')}
- </div>
- </Menu.Item>
- )}
- {canEdit && (
- <Menu.Item>
- <div
- data-test="chart-list-edit-option"
- role="button"
- tabIndex={0}
- onClick={() => openChartEditModal(chart)}
- >
- <Icons.EditAlt iconSize="l" /> {t('Edit')}
- </div>
- </Menu.Item>
- )}
</Menu>
);
return (
@@ -175,7 +191,7 @@ export default function ChartCard({
)}
<Dropdown dropdownRender={() => menu} trigger={['click', 'hover']}>
<Button buttonSize="xsmall" type="link">
- <Icons.MoreVert iconColor={theme.colors.grayscale.base} />
+ <Icons.MoreOutlined iconSize="xl" />
</Button>
</Dropdown>
</ListViewCard.Actions>
diff --git a/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx b/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx
index 43163c8e25..e325b08fd3 100644
--- a/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx
+++ b/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx
@@ -18,11 +18,10 @@
*/
import { FunctionComponent, useState, useEffect, ChangeEvent } from 'react';
-import { styled, t } from '@superset-ui/core';
+import { css, styled, t, useTheme } from '@superset-ui/core';
import { useSingleViewResource } from 'src/views/CRUD/hooks';
import Icons from 'src/components/Icons';
-import { StyledIcon } from 'src/views/CRUD/utils';
import Modal from 'src/components/Modal';
import withToasts from 'src/components/MessageToasts/withToasts';
import { CssEditor } from 'src/components/AsyncAceEditor';
@@ -43,36 +42,40 @@ type CssTemplateStringKeys = keyof Pick<
OnlyKeyWithType<TemplateObject, String>
>;
-const StyledCssTemplateTitle = styled.div`
- margin: ${({ theme }) => theme.gridUnit * 2}px auto
- ${({ theme }) => theme.gridUnit * 4}px auto;
-`;
+const StyledCssTemplateTitle = styled.div(
+ ({ theme }) => css`
+ margin: ${theme.gridUnit * 2}px auto ${theme.gridUnit * 4}px auto;
+ `,
+);
const StyledCssEditor = styled(CssEditor)`
- border-radius: ${({ theme }) => theme.borderRadius}px;
- border: 1px solid ${({ theme }) => theme.colors.secondary.light2};
+ ${({ theme }) => css`
+ border-radius: ${theme.borderRadius}px;
+ border: 1px solid ${theme.colors.secondary.light2};
+ `}
`;
-const TemplateContainer = styled.div`
- margin-bottom: ${({ theme }) => theme.gridUnit * 10}px;
+const TemplateContainer = styled.div(
+ ({ theme }) => css`
+ margin-bottom: ${theme.gridUnit * 10}px;
- .control-label {
- margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
- }
+ .control-label {
+ margin-bottom: ${theme.gridUnit * 2}px;
+ }
- .required {
- margin-left: ${({ theme }) => theme.gridUnit / 2}px;
- color: ${({ theme }) => theme.colors.error.base};
- }
+ .required {
+ margin-left: ${theme.gridUnit / 2}px;
+ color: ${theme.colors.error.base};
+ }
- input[type='text'] {
- padding: ${({ theme }) => theme.gridUnit * 1.5}px
- ${({ theme }) => theme.gridUnit * 2}px;
- border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- border-radius: ${({ theme }) => theme.gridUnit}px;
- width: 50%;
- }
-`;
+ input[type='text'] {
+ padding: ${theme.gridUnit * 1.5}px ${theme.gridUnit * 2}px;
+ border: 1px solid ${theme.colors.grayscale.light2};
+ border-radius: ${theme.gridUnit}px;
+ width: 50%;
+ }
+ `,
+);
const CssTemplateModal: FunctionComponent<CssTemplateModalProps> = ({
addDangerToast,
@@ -81,6 +84,7 @@ const CssTemplateModal: FunctionComponent<CssTemplateModalProps> = ({
show,
cssTemplate = null,
}) => {
+ const theme = useTheme();
const [disableSave, setDisableSave] = useState<boolean>(true);
const [currentCssTemplate, setCurrentCssTemplate] =
useState<TemplateObject | null>(null);
@@ -230,9 +234,19 @@ const CssTemplateModal: FunctionComponent<CssTemplateModalProps> = ({
title={
<h4 data-test="css-template-modal-title">
{isEditMode ? (
- <Icons.EditAlt css={StyledIcon} />
+ <Icons.EditOutlined
+ iconSize="l"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ `}
+ />
) : (
- <Icons.PlusLarge css={StyledIcon} />
+ <Icons.PlusOutlined
+ iconSize="l"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ `}
+ />
)}
{isEditMode
? t('Edit CSS template properties')
diff --git a/superset-frontend/src/features/dashboards/DashboardCard.tsx b/superset-frontend/src/features/dashboards/DashboardCard.tsx
index 5a4c991ec2..edfd28f6d0 100644
--- a/superset-frontend/src/features/dashboards/DashboardCard.tsx
+++ b/superset-frontend/src/features/dashboards/DashboardCard.tsx
@@ -22,7 +22,6 @@ import {
isFeatureEnabled,
FeatureFlag,
t,
- useTheme,
SupersetClient,
} from '@superset-ui/core';
import { CardStyles } from 'src/views/CRUD/utils';
@@ -67,9 +66,6 @@ function DashboardCard({
const canEdit = hasPerm('can_write');
const canDelete = hasPerm('can_write');
const canExport = hasPerm('can_export');
-
- const theme = useTheme();
-
const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
const [fetchingThumbnail, setFetchingThumbnail] = useState<boolean>(false);
@@ -109,7 +105,7 @@ function DashboardCard({
onClick={() => openDashboardEditModal?.(dashboard)}
data-test="dashboard-card-option-edit-button"
>
- <Icons.EditAlt iconSize="l" data-test="edit-alt" /> {t('Edit')}
+ <Icons.EditOutlined iconSize="l" data-test="edit-alt" /> {t('Edit')}
</div>
</Menu.Item>
)}
@@ -122,7 +118,7 @@ function DashboardCard({
className="action-button"
data-test="dashboard-card-option-export-button"
>
- <Icons.Share iconSize="l" /> {t('Export')}
+ <Icons.UploadOutlined iconSize="l" /> {t('Export')}
</div>
</Menu.Item>
)}
@@ -135,7 +131,7 @@ function DashboardCard({
onClick={() => onDelete(dashboard)}
data-test="dashboard-card-option-delete-button"
>
- <Icons.Trash iconSize="l" /> {t('Delete')}
+ <Icons.DeleteOutlined iconSize="l" /> {t('Delete')}
</div>
</Menu.Item>
)}
@@ -182,7 +178,7 @@ function DashboardCard({
)}
<Dropdown dropdownRender={() => menu} trigger={['hover', 'click']}>
<Button buttonSize="xsmall" type="link">
- <Icons.MoreVert iconColor={theme.colors.grayscale.base} />
+ <Icons.MoreOutlined iconSize="xl" />
</Button>
</Dropdown>
</ListViewCard.Actions>
diff --git a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
index 6bddee3c92..93b9ce7cb3 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
@@ -109,14 +109,14 @@ export const EncryptedField = ({
>
{!fileToUpload && (
<Button onClick={() => selectedFileInputRef.current?.click()}>
- <Icons.Link iconSize="m" />
+ <Icons.LinkOutlined iconSize="m" />
{t('Upload credentials')}
</Button>
)}
{fileToUpload && (
<div className="credentials-uploaded">
<Button block disabled>
- <Icons.Link iconSize="m" />
+ <Icons.LinkOutlined iconSize="m" />
{t('Credentials uploaded')}
</Button>
<Icons.DeleteFilled
diff --git a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.test.tsx b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.test.tsx
index 886d6bb803..e11b077e94 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.test.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.test.tsx
@@ -148,9 +148,7 @@ test('Displays tooltip text on hover over the InfoTooltip', async () => {
/>,
);
- const infoTooltipTrigger = screen.getByRole('img', {
- name: 'info-solid_small',
- });
+ const infoTooltipTrigger = screen.getByTestId('info-tooltip-icon');
expect(infoTooltipTrigger).toBeInTheDocument();
userEvent.hover(infoTooltipTrigger);
diff --git a/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx b/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
index a7da99d191..4a0dd068d6 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
@@ -668,7 +668,10 @@ describe('DatabaseModal', () => {
});
// <Tabs> - Basic/Advanced tabs
const basicTab = screen.getByRole('tab', { name: /basic/i });
- const advancedTab = screen.getByRole('tab', { name: /advanced/i });
+ const advancedTab = await screen.findByRole('tab', { name: /advanced/i });
+ const advancedTabPanel = await screen.findByRole('tabpanel', {
+ name: /advanced/i,
+ });
// <ExtraOptions> - Advanced tabs
const sqlLabTab = screen.getByRole('tab', {
name: /right sql lab adjust how this database will interact with sql lab\./i,
@@ -677,9 +680,10 @@ describe('DatabaseModal', () => {
const checkboxOffSVGs = screen.getAllByRole('img', {
name: /checkbox-off/i,
});
- const tooltipIcons = screen.getAllByRole('img', {
- name: /info-solid_small/i,
+ const tooltipIcons = within(advancedTabPanel).getAllByRole('img', {
+ name: /info-tooltip/i,
});
+
const exposeInSQLLabCheckbox = screen.getByRole('checkbox', {
name: /expose database in sql lab/i,
});
diff --git a/superset-frontend/src/features/databases/DatabaseModal/index.tsx b/superset-frontend/src/features/databases/DatabaseModal/index.tsx
index 1244b52655..055c97ebd9 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/index.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/index.tsx
@@ -21,6 +21,8 @@ import {
styled,
SupersetTheme,
getExtensionsRegistry,
+ css,
+ useTheme,
} from '@superset-ui/core';
import {
@@ -49,6 +51,7 @@ import withToasts from 'src/components/MessageToasts/withToasts';
import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace';
import ErrorAlert from 'src/components/ImportModal/ErrorAlert';
+import Icons from 'src/components/Icons';
import {
testDatabaseConnection,
useSingleViewResource,
@@ -561,6 +564,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
databaseId,
dbEngine,
}) => {
+ const theme = useTheme();
const [db, setDB] = useReducer<
Reducer<Partial<DatabaseObject> | null, DBReducerActionType>
>(dbReducer, null);
@@ -1831,7 +1835,24 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
centered
show={show}
title={
- <h4>{isEditMode ? t('Edit database') : t('Connect a database')}</h4>
+ <h4>
+ {isEditMode ? (
+ <Icons.EditOutlined
+ iconSize="l"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ `}
+ />
+ ) : (
+ <Icons.InsertRowAboveOutlined
+ iconSize="l"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ `}
+ />
+ )}
+ {isEditMode ? t('Edit database') : t('Connect a database')}
+ </h4>
}
footer={modalFooter}
maskClosable={false}
@@ -1992,7 +2013,17 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
width="500px"
centered
show={show}
- title={<h4>{t('Connect a database')}</h4>}
+ title={
+ <h4>
+ <Icons.InsertRowAboveOutlined
+ iconSize="l"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ `}
+ />
+ {t('Connect a database')}
+ </h4>
+ }
footer={renderModalFooter()}
maskClosable={false}
>
diff --git a/superset-frontend/src/features/databases/DatabaseModal/styles.ts b/superset-frontend/src/features/databases/DatabaseModal/styles.ts
index 83d00e1d49..7c2718f8d8 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/styles.ts
+++ b/superset-frontend/src/features/databases/DatabaseModal/styles.ts
@@ -131,10 +131,12 @@ export const infoTooltip = (theme: SupersetTheme) => css`
svg {
margin-bottom: ${theme.gridUnit * 0.25}px;
}
+ display: flex;
`;
export const toggleStyle = (theme: SupersetTheme) => css`
padding-left: ${theme.gridUnit * 2}px;
+ padding-right: ${theme.gridUnit * 2}px;
`;
export const formScrollableStyles = (theme: SupersetTheme) => css`
diff --git a/superset-frontend/src/features/databases/UploadDataModel/index.tsx b/superset-frontend/src/features/databases/UploadDataModel/index.tsx
index 46e9b33f39..8235049283 100644
--- a/superset-frontend/src/features/databases/UploadDataModel/index.tsx
+++ b/superset-frontend/src/features/databases/UploadDataModel/index.tsx
@@ -43,9 +43,8 @@ import {
Select,
Upload,
} from 'src/components';
-// eslint-disable-next-line no-restricted-imports
-import { UploadOutlined } from '@ant-design/icons';
-import { Input, InputNumber } from 'src/components/Input'; // TODO: Use src/components/Icons
+import Icons from 'src/components/Icons';
+import { Input, InputNumber } from 'src/components/Input';
import rison from 'rison';
// eslint-disable-next-line no-restricted-imports
import { UploadChangeParam, UploadFile } from 'antd/lib/upload/interface'; // TODO: Remove antd
@@ -635,7 +634,7 @@ const UploadDataModal: FunctionComponent<UploadDataModalProps> = ({
>
<Button
aria-label={t('Select')}
- icon={<UploadOutlined />}
+ icon={<Icons.UploadOutlined />}
loading={fileLoading}
>
{t('Select')}
diff --git a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
index 2cf8c9af95..103467b629 100644
--- a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t, styled, useTheme } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
import Icons from 'src/components/Icons';
import Alert from 'src/components/Alert';
import Table, { ColumnsType, TableSize } from 'src/components/Table';
@@ -68,11 +68,10 @@ const StyledHeader = styled.div<StyledHeaderProps>`
text-overflow: ellipsis;
.anticon:first-of-type {
- margin-right: ${theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px;
+ margin-right: ${theme.gridUnit * 2}px;
+ vertical-align: text-top;
}
- .anticon:nth-of-type(2) {
- margin-left: ${theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px;
`}
`;
@@ -257,7 +256,6 @@ const DatasetPanel = ({
hasError,
datasets,
}: IDatasetPanelProps) => {
- const theme = useTheme();
const hasColumns = Boolean(columnList?.length > 0);
const datasetNames = datasets?.map(dataset => dataset.table_name);
const tableWithDataset = datasets?.find(
@@ -333,9 +331,7 @@ const DatasetPanel = ({
}
title={tableName || ''}
>
- {tableName && (
- <Icons.Table iconColor={theme.colors.grayscale.base} />
- )}
+ <Icons.InsertRowAboveOutlined />
{tableName}
</StyledHeader>
</>
diff --git a/superset-frontend/src/features/datasets/AddDataset/Header/index.tsx b/superset-frontend/src/features/datasets/AddDataset/Header/index.tsx
index 11bcb42234..b2f8f475aa 100644
--- a/superset-frontend/src/features/datasets/AddDataset/Header/index.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/Header/index.tsx
@@ -48,7 +48,7 @@ const renderDisabledSaveButton = () => (
disabled
css={disabledSaveBtnStyles}
>
- <Icons.Save iconSize="m" />
+ <Icons.SaveOutlined iconSize="m" />
{t('Save')}
</Button>
);
diff --git a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/LeftPanel.test.tsx b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/LeftPanel.test.tsx
index fe60f5d2d5..a9f36e74ac 100644
--- a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/LeftPanel.test.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/LeftPanel.test.tsx
@@ -324,5 +324,5 @@ test('renders a warning icon when a table name has a preexisting dataset', async
userEvent.type(tableSelect, 'Sheet2');
// Sheet2 should now show the warning icon
- expect(screen.getByRole('img', { name: 'alert-solid' })).toBeInTheDocument();
+ expect(screen.getByRole('img', { name: 'warning' })).toBeInTheDocument();
});
diff --git a/superset-frontend/src/features/home/ActivityTable.tsx b/superset-frontend/src/features/home/ActivityTable.tsx
index 3eb35598ac..c6a6d2359a 100644
--- a/superset-frontend/src/features/home/ActivityTable.tsx
+++ b/superset-frontend/src/features/home/ActivityTable.tsx
@@ -81,13 +81,13 @@ const getEntityTitle = (entity: ActivityObject) => {
};
const getEntityIcon = (entity: ActivityObject) => {
- if ('sql' in entity) return <Icons.Sql />;
+ if ('sql' in entity) return <Icons.ConsoleSqlOutlined />;
const url = 'item_url' in entity ? entity.item_url : entity.url;
if (url?.includes('dashboard')) {
- return <Icons.NavDashboard />;
+ return <Icons.DashboardOutlined />;
}
if (url?.includes('explore')) {
- return <Icons.NavCharts />;
+ return <Icons.BarChartOutlined />;
}
return null;
};
diff --git a/superset-frontend/src/features/home/ChartTable.tsx b/superset-frontend/src/features/home/ChartTable.tsx
index 1836362ce7..38ec864259 100644
--- a/superset-frontend/src/features/home/ChartTable.tsx
+++ b/superset-frontend/src/features/home/ChartTable.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { useEffect, useMemo, useState } from 'react';
-import { t } from '@superset-ui/core';
+import { t, useTheme } from '@superset-ui/core';
import {
useChartEditModal,
useFavoriteStatus,
@@ -44,6 +44,7 @@ import Chart from 'src/types/Chart';
import handleResourceExport from 'src/utils/export';
import Loading from 'src/components/Loading';
import ErrorBoundary from 'src/components/ErrorBoundary';
+import Icons from 'src/components/Icons';
import EmptyState from './EmptyState';
import { WelcomeTable } from './types';
import SubMenu from './SubMenu';
@@ -69,6 +70,7 @@ function ChartTable({
otherTabFilters,
otherTabTitle,
}: ChartTableProps) {
+ const theme = useTheme();
const history = useHistory();
const initialTab = getItem(
LocalStorageKeys.HomepageChartFilter,
@@ -186,9 +188,11 @@ function ChartTable({
{
name: (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" />
+ <Icons.PlusOutlined
+ iconColor={theme.colors.primary.dark1}
+ iconSize="m"
+ data-test="add-annotation-layer-button"
+ />
{t('Chart')}
</>
),
diff --git a/superset-frontend/src/features/home/DashboardTable.test.tsx b/superset-frontend/src/features/home/DashboardTable.test.tsx
index b574187bed..d7400254ff 100644
--- a/superset-frontend/src/features/home/DashboardTable.test.tsx
+++ b/superset-frontend/src/features/home/DashboardTable.test.tsx
@@ -267,7 +267,7 @@ describe('DashboardTable', () => {
);
const moreOptionsButton = screen.getAllByRole('img', {
- name: 'more-vert',
+ name: 'more',
})[0];
await userEvent.click(moreOptionsButton);
@@ -311,7 +311,7 @@ describe('DashboardTable', () => {
{ store },
);
- const moreOptionsButton = screen.getAllByLabelText('more-vert')[0];
+ const moreOptionsButton = screen.getAllByLabelText('more')[0];
await userEvent.click(moreOptionsButton);
await waitFor(() => {
diff --git a/superset-frontend/src/features/home/DashboardTable.tsx b/superset-frontend/src/features/home/DashboardTable.tsx
index dda1febcfe..56a65a5cb4 100644
--- a/superset-frontend/src/features/home/DashboardTable.tsx
+++ b/superset-frontend/src/features/home/DashboardTable.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { useEffect, useMemo, useState } from 'react';
-import { SupersetClient, t } from '@superset-ui/core';
+import { SupersetClient, t, useTheme } from '@superset-ui/core';
import { useFavoriteStatus, useListViewResource } from 'src/views/CRUD/hooks';
import { Dashboard, DashboardTableProps, TableTab } from 'src/views/CRUD/types';
import handleResourceExport from 'src/utils/export';
@@ -40,6 +40,7 @@ import Loading from 'src/components/Loading';
import DeleteModal from 'src/components/DeleteModal';
import PropertiesModal from 'src/dashboard/components/PropertiesModal';
import DashboardCard from 'src/features/dashboards/DashboardCard';
+import Icons from 'src/components/Icons';
import EmptyState from './EmptyState';
import SubMenu from './SubMenu';
import { WelcomeTable } from './types';
@@ -54,6 +55,7 @@ function DashboardTable({
otherTabFilters,
otherTabTitle,
}: DashboardTableProps) {
+ const theme = useTheme();
const history = useHistory();
const defaultTab = getItem(
LocalStorageKeys.HomepageDashboardFilter,
@@ -186,9 +188,10 @@ function DashboardTable({
{
name: (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" />
+ <Icons.PlusOutlined
+ iconColor={theme.colors.primary.dark1}
+ iconSize="m"
+ />
{t('Dashboard')}
</>
),
diff --git a/superset-frontend/src/features/home/LanguagePicker.tsx b/superset-frontend/src/features/home/LanguagePicker.tsx
index 61c6a2a107..da181d3821 100644
--- a/superset-frontend/src/features/home/LanguagePicker.tsx
+++ b/superset-frontend/src/features/home/LanguagePicker.tsx
@@ -17,11 +17,10 @@
* under the License.
*/
import { MainNav as Menu } from 'src/components/Menu';
-import { styled } from '@superset-ui/core';
+import { styled, css, useTheme } from '@superset-ui/core';
import Icons from 'src/components/Icons';
const { SubMenu } = Menu;
-
export interface Languages {
[key: string]: {
flag: string;
@@ -57,15 +56,23 @@ const StyledFlag = styled.i`
export default function LanguagePicker(props: LanguagePickerProps) {
const { locale, languages, ...rest } = props;
+ const theme = useTheme();
return (
<SubMenu
+ css={css`
+ [data-icon='caret-down'] {
+ color: ${theme.colors.grayscale.base};
+ font-size: ${theme.typography.sizes.xxs}px;
+ margin-left: ${theme.gridUnit}px;
+ }
+ `}
aria-label="Languages"
title={
<div className="f16">
<StyledFlag className={`flag ${languages[locale].flag}`} />
</div>
}
- icon={<Icons.TriangleDown />}
+ icon={<Icons.CaretDownOutlined iconSize="xs" />}
{...rest}
>
{Object.keys(languages).map(langKey => (
diff --git a/superset-frontend/src/features/home/Menu.tsx b/superset-frontend/src/features/home/Menu.tsx
index ebcff4a023..4d24fcb432 100644
--- a/superset-frontend/src/features/home/Menu.tsx
+++ b/superset-frontend/src/features/home/Menu.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { useState, useEffect } from 'react';
-import { styled } from '@superset-ui/core';
+import { styled, css } from '@superset-ui/core';
import { debounce } from 'lodash';
import { getUrlParam } from 'src/utils/urlUtils';
import { Row, Col, Grid } from 'src/components';
@@ -120,13 +120,23 @@ const StyledHeader = styled.header`
const { SubMenu } = MainNav;
const StyledSubMenu = styled(SubMenu)`
- &.antd5-menu-submenu-active {
+ ${({ theme }) => css`
+ [data-icon="caret-down"] {
+ color: ${theme.colors.grayscale.base};
+ font-size: ${theme.typography.sizes.xs}px;
+ margin-left: ${theme.gridUnit}px;
+ }
+ &.antd5-menu-submenu {
+ padding: ${theme.gridUnit * 2}px ${theme.gridUnit * 4}px;
+ display: flex;
+ align-items: center;
+ height: 100%; &.antd5-menu-submenu-active {
.antd5-menu-title-content {
- color: ${({ theme }) => theme.colors.primary.base};
+ color: ${theme.colors.primary.base};
}
}
+ `}
`;
-
const { useBreakpoint } = Grid;
export function Menu({
@@ -212,7 +222,13 @@ export function Menu({
<StyledSubMenu
key={index}
title={label}
- icon={showMenu === 'inline' ? <></> : <Icons.TriangleDown />}
+ icon={
+ showMenu === 'inline' ? (
+ <></>
+ ) : (
+ <Icons.CaretDownOutlined iconSize="xs" />
+ )
+ }
>
{childs?.map((child: MenuObjectChildProps | string, index1: number) => {
if (typeof child === 'string' && child === '-' && label !== 'Data') {
diff --git a/superset-frontend/src/features/home/RightMenu.tsx b/superset-frontend/src/features/home/RightMenu.tsx
index 453942574a..d798d037e7 100644
--- a/superset-frontend/src/features/home/RightMenu.tsx
+++ b/superset-frontend/src/features/home/RightMenu.tsx
@@ -67,9 +67,6 @@ const versionInfoStyles = (theme: SupersetTheme) => css`
font-size: ${theme.typography.sizes.xs}px;
white-space: nowrap;
`;
-const StyledI = styled.div`
- color: ${({ theme }) => theme.colors.primary.dark1};
-`;
const styledDisabled = (theme: SupersetTheme) => css`
color: ${theme.colors.grayscale.light1};
@@ -110,11 +107,18 @@ const styledChildMenu = (theme: SupersetTheme) => css`
const { SubMenu } = Menu;
const StyledSubMenu = styled(SubMenu)`
- &.antd5-menu-submenu-active {
- .antd5-menu-title-content {
- color: ${({ theme }) => theme.colors.primary.base};
+ ${({ theme }) => css`
+ [data-icon='caret-down'] {
+ color: ${theme.colors.grayscale.base};
+ font-size: ${theme.typography.sizes.xxs}px;
+ margin-left: ${theme.gridUnit}px;
}
- }
+ &.antd5-menu-submenu-active {
+ .antd5-menu-title-content {
+ color: ${theme.colors.primary.base};
+ }
+ }
+ `}
`;
const RightMenu = ({
@@ -402,6 +406,10 @@ const RightMenu = ({
</Label>
)}
<Menu
+ css={css`
+ display: flex;
+ flex-direction: row;
+ `}
selectable={false}
mode="horizontal"
onClick={handleMenuSelection}
@@ -414,9 +422,12 @@ const RightMenu = ({
key="sub1"
data-test="new-dropdown"
title={
- <StyledI data-test="new-dropdown-icon" className="fa fa-plus" />
+ <Icons.PlusOutlined
+ iconColor={theme.colors.primary.dark1}
+ data-test="new-dropdown-icon"
+ />
}
- icon={<Icons.TriangleDown />}
+ icon={<Icons.CaretDownOutlined iconSize="xs" />}
>
{dropdownItems?.map?.(menu => {
const canShowChild = menu.childs?.some(
@@ -479,7 +490,7 @@ const RightMenu = ({
<StyledSubMenu
key="sub3_settings"
title={t('Settings')}
- icon={<Icons.TriangleDown iconSize="xl" />}
+ icon={<Icons.CaretDownOutlined iconSize="xs" />}
>
{settings?.map?.((section, index) => [
<Menu.ItemGroup key={`${section.label}`} title={section.label}>
diff --git a/superset-frontend/src/features/home/SavedQueries.tsx b/superset-frontend/src/features/home/SavedQueries.tsx
index be5a36dbda..7258e6d401 100644
--- a/superset-frontend/src/features/home/SavedQueries.tsx
+++ b/superset-frontend/src/features/home/SavedQueries.tsx
@@ -18,7 +18,7 @@
*/
import { useCallback, useState } from 'react';
import { Link } from 'react-router-dom';
-import { styled, SupersetClient, t, useTheme } from '@superset-ui/core';
+import { styled, SupersetClient, t, useTheme, css } from '@superset-ui/core';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light';
import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
@@ -207,6 +207,13 @@ const SavedQueries = ({
}
}}
>
+ <Icons.UploadOutlined
+ iconSize="l"
+ css={css`
+ margin-right: ${theme.gridUnit}px;
+ vertical-align: baseline;
+ `}
+ />
{t('Share')}
</Menu.Item>
{canDelete && (
@@ -257,10 +264,23 @@ const SavedQueries = ({
buttons={[
{
name: (
- <Link to="/sqllab?new=true">
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" />
+ <Link
+ to="/sqllab?new=true"
+ css={css`
+ &:hover {
+ color: currentColor;
+ text-decoration: none;
+ }
+ `}
+ >
+ <Icons.PlusOutlined
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ vertical-align: text-top;
+ `}
+ iconSize="m"
+ iconColor={theme.colors.primary.dark1}
+ />
{t('SQL Query')}
</Link>
),
@@ -326,9 +346,7 @@ const SavedQueries = ({
trigger={['click', 'hover']}
>
<Button buttonSize="xsmall" type="link">
- <Icons.MoreVert
- iconColor={theme.colors.grayscale.base}
- />
+ <Icons.MoreOutlined iconSize="xl" />
</Button>
</Dropdown>
</ListViewCard.Actions>
diff --git a/superset-frontend/src/features/home/SubMenu.tsx b/superset-frontend/src/features/home/SubMenu.tsx
index af1df5a59a..7f917a14a8 100644
--- a/superset-frontend/src/features/home/SubMenu.tsx
+++ b/superset-frontend/src/features/home/SubMenu.tsx
@@ -19,7 +19,7 @@
import { ReactNode, useState, useEffect, FunctionComponent } from 'react';
import { Link, useHistory } from 'react-router-dom';
-import { styled, SupersetTheme, css, t } from '@superset-ui/core';
+import { styled, SupersetTheme, css, t, useTheme } from '@superset-ui/core';
import cx from 'classnames';
import { Tooltip } from 'src/components/Tooltip';
import { debounce } from 'lodash';
@@ -154,6 +154,7 @@ const { SubMenu } = MainNav;
const SubMenuComponent: FunctionComponent<SubMenuProps> = props => {
const [showMenu, setMenu] = useState<MenuMode>('horizontal');
const [navRightStyle, setNavRightStyle] = useState('nav-right');
+ const theme = useTheme();
let hasHistory = true;
// If no parent <Router> component exists, useHistory throws an error
@@ -232,9 +233,16 @@ const SubMenuComponent: FunctionComponent<SubMenuProps> = props => {
<Menu mode="horizontal" triggerSubMenuAction="click" disabledOverflow>
{props.dropDownLinks?.map((link, i) => (
<SubMenu
+ css={css`
+ [data-icon='caret-down'] {
+ color: ${theme.colors.grayscale.base};
+ font-size: ${theme.typography.sizes.xxs}px;
+ margin-left: ${theme.gridUnit}px;
+ }
+ `}
key={i}
title={link.label}
- icon={<Icons.TriangleDown />}
+ icon={<Icons.CaretDownOutlined />}
popupOffset={[10, 20]}
className="dropdown-menu-links"
>
diff --git a/superset-frontend/src/features/queries/SyntaxHighlighterCopy.tsx b/superset-frontend/src/features/queries/SyntaxHighlighterCopy.tsx
index ac5943b6c7..b144d71c41 100644
--- a/superset-frontend/src/features/queries/SyntaxHighlighterCopy.tsx
+++ b/superset-frontend/src/features/queries/SyntaxHighlighterCopy.tsx
@@ -78,7 +78,7 @@ export default function SyntaxHighlighterCopy({
}
return (
<SyntaxHighlighterWrapper>
- <Icons.Copy
+ <Icons.CopyOutlined
tabIndex={0}
role="button"
onClick={e => {
diff --git a/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx b/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx
index 9f05232809..ad2b2fa862 100644
--- a/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx
+++ b/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx
@@ -273,10 +273,10 @@ export default function HeaderReportDropDown({
className="action-button action-schedule-report"
onClick={() => showReportModal()}
>
- <Icons.Calendar />
+ <Icons.CalendarOutlined />
</span>
) : (
- menu(<Icons.Calendar />)
+ menu(<Icons.CalendarOutlined />)
);
return <>{canAddReports() && (useTextMenu ? textMenu() : iconMenu())}</>;
}
diff --git a/superset-frontend/src/features/reports/ReportModal/index.tsx b/superset-frontend/src/features/reports/ReportModal/index.tsx
index 59f9263a32..aa84619eba 100644
--- a/superset-frontend/src/features/reports/ReportModal/index.tsx
+++ b/superset-frontend/src/features/reports/ReportModal/index.tsx
@@ -225,7 +225,7 @@ function ReportModal({
const wrappedTitle = (
<StyledIconWrapper>
- <Icons.Calendar />
+ <Icons.CalendarOutlined />
<span className="text">
{isEditMode ? t('Edit email report') : t('Schedule a new email report')}
</span>
diff --git a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
index a64d99dd51..6f155afe84 100644
--- a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
+++ b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
@@ -17,13 +17,7 @@
* under the License.
*/
-import {
- css,
- styled,
- SupersetClient,
- SupersetTheme,
- t,
-} from '@superset-ui/core';
+import { css, styled, SupersetClient, useTheme, t } from '@superset-ui/core';
import Modal from 'src/components/Modal';
import { useCallback, useEffect, useMemo, useState } from 'react';
import Icons from 'src/components/Icons';
@@ -54,55 +48,53 @@ const StyledModal = styled(Modal)`
}
`;
-const StyledIcon = (theme: SupersetTheme) => css`
- margin: auto ${theme.gridUnit * 2}px auto 0;
- color: ${theme.colors.grayscale.base};
-`;
-
const StyledSectionContainer = styled.div`
- display: flex;
- flex-direction: column;
- padding: ${({ theme }) =>
- `${theme.gridUnit * 3}px ${theme.gridUnit * 4}px ${theme.gridUnit * 2}px`};
-
- label,
- .control-label {
- display: inline-block;
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
- color: ${({ theme }) => theme.colors.grayscale.base};
- vertical-align: middle;
- }
+ ${({ theme }) => css`
+ display: flex;
+ flex-direction: column;
+ padding: ${theme.gridUnit * 3}px ${theme.gridUnit * 4}px
+ ${theme.gridUnit * 2}px;
+
+ label,
+ .control-label {
+ display: flex;
+ font-size: ${theme.typography.sizes.s}px;
+ color: ${theme.colors.grayscale.base};
+ align-items: center;
+ }
- .info-solid-small {
- vertical-align: middle;
- padding-bottom: ${({ theme }) => theme.gridUnit / 2}px;
- }
+ .info-solid-small {
+ vertical-align: middle;
+ padding-bottom: ${theme.gridUnit / 2}px;
+ }
+ `}
`;
-
const StyledInputContainer = styled.div`
- display: flex;
- flex-direction: column;
- margin: ${({ theme }) => theme.gridUnit}px;
- margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
-
- .input-container {
+ ${({ theme }) => css`
display: flex;
- align-items: center;
+ flex-direction: column;
+ margin: ${theme.gridUnit}px;
+ margin-bottom: ${theme.gridUnit * 4}px;
- > div {
- width: 100%;
+ .input-container {
+ display: flex;
+ align-items: center;
+
+ > div {
+ width: 100%;
+ }
}
- }
- input,
- textarea {
- flex: 1 1 auto;
- }
+ input,
+ textarea {
+ flex: 1 1 auto;
+ }
- .required {
- margin-left: ${({ theme }) => theme.gridUnit / 2}px;
- color: ${({ theme }) => theme.colors.error.base};
- }
+ .required {
+ margin-left: ${theme.gridUnit / 2}px;
+ color: ${theme.colors.error.base};
+ }
+ `}
`;
const StyledTextArea = styled(TextArea)`
@@ -130,6 +122,7 @@ const DEFAULT_RULE = {
};
function RowLevelSecurityModal(props: RowLevelSecurityModalProps) {
+ const theme = useTheme();
const { rule, addDangerToast, addSuccessToast, onHide, show } = props;
const [currentRule, setCurrentRule] = useState<RLSObject>({
@@ -342,9 +335,18 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) {
title={
<h4 data-test="rls-modal-title">
{isEditMode ? (
- <Icons.EditAlt css={StyledIcon} />
+ <Icons.EditOutlined
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ `}
+ />
) : (
- <Icons.PlusLarge css={StyledIcon} />
+ <Icons.PlusOutlined
+ iconSize="l"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ `}
+ />
)}
{isEditMode ? t('Edit Rule') : t('Add Rule')}
</h4>
diff --git a/superset-frontend/src/features/tags/TagCard.tsx b/superset-frontend/src/features/tags/TagCard.tsx
index ca6260df94..0bf1008f46 100644
--- a/superset-frontend/src/features/tags/TagCard.tsx
+++ b/superset-frontend/src/features/tags/TagCard.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { Link } from 'react-router-dom';
-import { isFeatureEnabled, FeatureFlag, t, useTheme } from '@superset-ui/core';
+import { isFeatureEnabled, FeatureFlag, t } from '@superset-ui/core';
import { CardStyles } from 'src/views/CRUD/utils';
import { Dropdown } from 'src/components/Dropdown';
import { Menu } from 'src/components/Menu';
@@ -59,7 +59,6 @@ function TagCard({
refreshData();
};
- const theme = useTheme();
const menu = (
<Menu>
{canDelete && (
@@ -81,7 +80,7 @@ function TagCard({
onClick={confirmDelete}
data-test="dashboard-card-option-delete-button"
>
- <Icons.Trash iconSize="l" /> {t('Delete')}
+ <Icons.DeleteOutlined iconSize="l" /> {t('Delete')}
</div>
)}
</ConfirmStatusChange>
@@ -111,7 +110,7 @@ function TagCard({
>
<Dropdown dropdownRender={() => menu} trigger={['click', 'hover']}>
<Button buttonSize="xsmall" type="link">
- <Icons.MoreVert iconColor={theme.colors.grayscale.base} />
+ <Icons.MoreOutlined iconSize="xl" />
</Button>
</Dropdown>
</ListViewCard.Actions>
diff --git a/superset-frontend/src/pages/AlertReportList/index.tsx b/superset-frontend/src/pages/AlertReportList/index.tsx
index 33355f0c4a..c33743fb0c 100644
--- a/superset-frontend/src/pages/AlertReportList/index.tsx
+++ b/superset-frontend/src/pages/AlertReportList/index.tsx
@@ -21,6 +21,8 @@ import { useState, useMemo, useEffect, useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import {
t,
+ css,
+ useTheme,
SupersetClient,
makeApi,
styled,
@@ -55,6 +57,7 @@ import AlertReportModal from 'src/features/alerts/AlertReportModal';
import { AlertObject, AlertState } from 'src/features/alerts/types';
import { ModifiedInfo } from 'src/components/AuditInfo';
import { QueryObjectColumns } from 'src/views/CRUD/types';
+import Icons from 'src/components/Icons';
const extensionsRegistry = getExtensionsRegistry();
@@ -109,6 +112,7 @@ function AlertList({
user,
addSuccessToast,
}: AlertListProps) {
+ const theme = useTheme();
const title = isReportEnabled ? t('Report') : t('Alert');
const titlePlural = isReportEnabled ? t('reports') : t('alerts');
const pathName = isReportEnabled ? 'Reports' : 'Alerts';
@@ -371,7 +375,7 @@ function AlertList({
label: 'execution-log-action',
tooltip: t('Execution log'),
placement: 'bottom',
- icon: 'Note',
+ icon: 'FileTextOutlined',
onClick: handleGotoExecutionLog,
}
: null,
@@ -380,7 +384,7 @@ function AlertList({
label: allowEdit ? 'edit-action' : 'preview-action',
tooltip: allowEdit ? t('Edit') : t('View'),
placement: 'bottom',
- icon: allowEdit ? 'Edit' : 'Binoculars',
+ icon: allowEdit ? 'EditOutlined' : 'Binoculars',
onClick: handleEdit,
}
: null,
@@ -389,7 +393,7 @@ function AlertList({
label: 'delete-action',
tooltip: t('Delete'),
placement: 'bottom',
- icon: 'Trash',
+ icon: 'DeleteOutlined',
onClick: handleDelete,
}
: null,
@@ -417,9 +421,15 @@ function AlertList({
subMenuButtons.push({
name: (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" /> {title}
+ <Icons.PlusOutlined
+ iconColor={theme.colors.primary.light5}
+ iconSize="m"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ vertical-align: text-top;
+ `}
+ />
+ {title}
</>
),
buttonStyle: 'primary',
@@ -443,9 +453,16 @@ function AlertList({
buttonAction: () => handleAlertEdit(null),
buttonText: canCreate ? (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" /> {title}{' '}
+ <Icons.PlusOutlined
+ iconColor={theme.colors.primary.light5}
+ iconSize="m"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ vertical-align: text-top;
+ `}
+ data-test="add-annotation-layer-button"
+ />
+ {title}{' '}
</>
) : null,
};
diff --git a/superset-frontend/src/pages/AnnotationLayerList/index.tsx b/superset-frontend/src/pages/AnnotationLayerList/index.tsx
index 5871c1f111..652dff1763 100644
--- a/superset-frontend/src/pages/AnnotationLayerList/index.tsx
+++ b/superset-frontend/src/pages/AnnotationLayerList/index.tsx
@@ -19,7 +19,7 @@
import { useMemo, useState } from 'react';
import rison from 'rison';
-import { t, SupersetClient } from '@superset-ui/core';
+import { t, SupersetClient, useTheme, css } from '@superset-ui/core';
import { Link, useHistory } from 'react-router-dom';
import { useListViewResource } from 'src/views/CRUD/hooks';
import { createFetchRelated, createErrorHandler } from 'src/views/CRUD/utils';
@@ -37,6 +37,7 @@ import AnnotationLayerModal from 'src/features/annotationLayers/AnnotationLayerM
import { AnnotationLayerObject } from 'src/features/annotationLayers/types';
import { ModifiedInfo } from 'src/components/AuditInfo';
import { QueryObjectColumns } from 'src/views/CRUD/types';
+import Icons from 'src/components/Icons';
const PAGE_SIZE = 25;
@@ -55,6 +56,7 @@ function AnnotationLayersList({
addSuccessToast,
user,
}: AnnotationLayersListProps) {
+ const theme = useTheme();
const {
state: {
loading,
@@ -177,7 +179,7 @@ function AnnotationLayersList({
label: 'edit-action',
tooltip: t('Edit template'),
placement: 'bottom',
- icon: 'Edit',
+ icon: 'EditOutlined',
onClick: handleEdit,
}
: null,
@@ -186,7 +188,7 @@ function AnnotationLayersList({
label: 'delete-action',
tooltip: t('Delete template'),
placement: 'bottom',
- icon: 'Trash',
+ icon: 'DeleteOutlined',
onClick: handleDelete,
}
: null,
@@ -214,9 +216,14 @@ function AnnotationLayersList({
subMenuButtons.push({
name: (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" /> {t('Annotation layer')}
+ <Icons.PlusOutlined
+ iconColor={theme.colors.primary.light5}
+ iconSize="m"
+ css={css`
+ vertical-align: text-top;
+ `}
+ />
+ {t('Annotation layer')}
</>
),
buttonStyle: 'primary',
@@ -273,9 +280,11 @@ function AnnotationLayersList({
buttonAction: () => handleAnnotationLayerEdit(null),
buttonText: (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" /> {t('Annotation layer')}
+ <Icons.PlusOutlined
+ iconSize="m"
+ iconColor={theme.colors.primary.light5}
+ />
+ {t('Annotation layer')}
</>
),
};
diff --git a/superset-frontend/src/pages/AnnotationList/index.tsx b/superset-frontend/src/pages/AnnotationList/index.tsx
index 8947a40ff5..171204e9cd 100644
--- a/superset-frontend/src/pages/AnnotationList/index.tsx
+++ b/superset-frontend/src/pages/AnnotationList/index.tsx
@@ -22,6 +22,7 @@ import { useParams, Link, useHistory } from 'react-router-dom';
import {
css,
t,
+ useTheme,
styled,
SupersetClient,
getClientErrorObject,
@@ -40,6 +41,7 @@ import { createErrorHandler } from 'src/views/CRUD/utils';
import { AnnotationObject } from 'src/features/annotations/types';
import AnnotationModal from 'src/features/annotations/AnnotationModal';
+import Icons from 'src/components/Icons';
const PAGE_SIZE = 25;
@@ -67,6 +69,7 @@ function AnnotationList({
addDangerToast,
addSuccessToast,
}: AnnotationListProps) {
+ const theme = useTheme();
const { annotationLayerId }: any = useParams();
const {
state: {
@@ -200,14 +203,14 @@ function AnnotationList({
label: 'edit-action',
tooltip: t('Edit annotation'),
placement: 'bottom',
- icon: 'Edit',
+ icon: 'EditOutlined',
onClick: handleEdit,
},
{
label: 'delete-action',
tooltip: t('Delete annotation'),
placement: 'bottom',
- icon: 'Trash',
+ icon: 'DeleteOutlined',
onClick: handleDelete,
},
];
@@ -226,9 +229,15 @@ function AnnotationList({
subMenuButtons.push({
name: (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" /> {t('Annotation')}
+ <Icons.PlusOutlined
+ iconColor={theme.colors.primary.light5}
+ iconSize="m"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ vertical-align: text-top;
+ `}
+ />
+ {t('Annotation')}
</>
),
buttonStyle: 'primary',
@@ -261,9 +270,15 @@ function AnnotationList({
},
buttonText: (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" /> {t('Annotation')}
+ <Icons.PlusOutlined
+ iconColor={theme.colors.primary.light5}
+ iconSize="m"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ vertical-align: text-top;
+ `}
+ />
+ {t('Annotation')}
</>
),
};
diff --git a/superset-frontend/src/pages/ChartCreation/ChartCreation.test.tsx b/superset-frontend/src/pages/ChartCreation/ChartCreation.test.tsx
index 2e318ea4ae..1a37d2e12e 100644
--- a/superset-frontend/src/pages/ChartCreation/ChartCreation.test.tsx
+++ b/superset-frontend/src/pages/ChartCreation/ChartCreation.test.tsx
@@ -23,10 +23,18 @@ import {
userEvent,
waitFor,
} from 'spec/helpers/testing-library';
+import { ReactElement } from 'react';
import fetchMock from 'fetch-mock';
import { createMemoryHistory } from 'history';
import { ChartCreation } from 'src/pages/ChartCreation';
import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
+import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+
+const renderWithTheme = (component: ReactElement, renderOptions = {}) =>
+ render(
+ <ThemeProvider theme={supersetTheme}>{component}</ThemeProvider>,
+ renderOptions,
+ );
jest.mock('src/components/DynamicPlugins', () => ({
usePluginContext: () => ({
@@ -92,8 +100,13 @@ const renderOptions = {
};
async function renderComponent(user = mockUser) {
- render(
- <ChartCreation user={user} addSuccessToast={() => null} {...routeProps} />,
+ renderWithTheme(
+ <ChartCreation
+ user={user}
+ addSuccessToast={() => null}
+ theme={supersetTheme}
+ {...routeProps}
+ />,
renderOptions,
);
await waitFor(() => new Promise(resolve => setTimeout(resolve, 0)));
diff --git a/superset-frontend/src/pages/ChartCreation/index.tsx b/superset-frontend/src/pages/ChartCreation/index.tsx
index d3d9ee5e5d..17fa9908e1 100644
--- a/superset-frontend/src/pages/ChartCreation/index.tsx
+++ b/superset-frontend/src/pages/ChartCreation/index.tsx
@@ -26,6 +26,7 @@ import {
SupersetClient,
t,
} from '@superset-ui/core';
+import { withTheme, Theme } from '@emotion/react';
import { getUrlParam } from 'src/utils/urlUtils';
import { FilterPlugins, URL_PARAMS } from 'src/constants';
import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
@@ -44,10 +45,12 @@ import {
Dataset,
DatasetSelectLabel,
} from 'src/features/datasets/DatasetSelectLabel';
+import Icons from 'src/components/Icons';
export interface ChartCreationProps extends RouteComponentProps {
user: UserWithPermissionsAndRoles;
addSuccessToast: (arg: string) => void;
+ theme: Theme;
}
export type ChartCreationState = {
@@ -291,12 +294,13 @@ export class ChartCreation extends PureComponent<
}
render() {
+ const { theme } = this.props;
const isButtonDisabled = this.isBtnDisabled();
const VIEW_INSTRUCTIONS_TEXT = t('view instructions');
const datasetHelpText = this.state.canCreateDataset ? (
<span data-test="dataset-write">
<Link to="/dataset/add/" data-test="add-chart-new-dataset">
- {t('Add a dataset')}{' '}
+ {t('Add a dataset')}
</Link>
{t('or')}{' '}
<a
@@ -306,9 +310,7 @@ export class ChartCreation extends PureComponent<
data-test="add-chart-new-dataset-instructions"
>
{`${VIEW_INSTRUCTIONS_TEXT} `}
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-external-link" />
+ <Icons.Full iconSize="m" iconColor={theme.colors.primary.dark1} />
</a>
.
</span>
@@ -320,9 +322,7 @@ export class ChartCreation extends PureComponent<
target="_blank"
>
{`${VIEW_INSTRUCTIONS_TEXT} `}
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-external-link" />
+ <Icons.Full iconSize="m" iconColor={theme.colors.primary.dark1} />
</a>
.
</span>
@@ -387,4 +387,4 @@ export class ChartCreation extends PureComponent<
}
}
-export default withRouter(withToasts(ChartCreation));
+export default withRouter(withToasts(withTheme(ChartCreation)));
diff --git a/superset-frontend/src/pages/ChartList/ChartList.test.jsx b/superset-frontend/src/pages/ChartList/ChartList.test.jsx
index 3da03f035b..6641c5a92d 100644
--- a/superset-frontend/src/pages/ChartList/ChartList.test.jsx
+++ b/superset-frontend/src/pages/ChartList/ChartList.test.jsx
@@ -178,25 +178,31 @@ describe('ChartList', () => {
// Find and click list view toggle
const listViewToggle = await screen.findByRole('img', {
- name: 'list-view',
+ name: 'unordered-list',
});
const listViewButton = listViewToggle.closest('[role="button"]');
fireEvent.click(listViewButton);
// Wait for list view to be active
await waitFor(() => {
- const listViewToggle = screen.getByRole('img', { name: 'list-view' });
+ const listViewToggle = screen.getByRole('img', {
+ name: 'unordered-list',
+ });
expect(listViewToggle.closest('[role="button"]')).toHaveClass('active');
});
// Find and click card view toggle
- const cardViewToggle = screen.getByRole('img', { name: 'card-view' });
+ const cardViewToggle = screen.getByRole('img', {
+ name: 'appstore',
+ });
const cardViewButton = cardViewToggle.closest('[role="button"]');
fireEvent.click(cardViewButton);
// Wait for card view to be active
await waitFor(() => {
- const cardViewToggle = screen.getByRole('img', { name: 'card-view' });
+ const cardViewToggle = screen.getByRole('img', {
+ name: 'appstore',
+ });
expect(cardViewToggle.closest('[role="button"]')).toHaveClass('active');
});
});
@@ -209,7 +215,7 @@ describe('ChartList', () => {
// Switch to list view
const listViewToggle = await screen.findByRole('img', {
- name: 'list-view',
+ name: 'unordered-list',
});
const listViewButton = listViewToggle.closest('[role="button"]');
fireEvent.click(listViewButton);
@@ -235,7 +241,7 @@ describe('ChartList', () => {
// Switch to list view
const listViewToggle = await screen.findByRole('img', {
- name: 'list-view',
+ name: 'unordered-list',
});
const listViewButton = listViewToggle.closest('[role="button"]');
fireEvent.click(listViewButton);
@@ -246,7 +252,9 @@ describe('ChartList', () => {
});
// Click delete button
- const deleteButtons = await screen.findAllByTestId('trash');
+ const deleteButtons = await screen.findAllByRole('button', {
+ name: 'delete',
+ });
fireEvent.click(deleteButtons[0]);
// Verify modal appears
@@ -261,7 +269,7 @@ describe('ChartList', () => {
// Switch to list view
const listViewToggle = await screen.findByRole('img', {
- name: 'list-view',
+ name: 'unordered-list',
});
const listViewButton = listViewToggle.closest('[role="button"]');
fireEvent.click(listViewButton);
@@ -274,7 +282,7 @@ describe('ChartList', () => {
// Wait for favorite stars to appear
await waitFor(() => {
const favoriteStars = screen.getAllByRole('img', {
- name: 'favorite-selected',
+ name: 'starred',
});
expect(favoriteStars.length).toBeGreaterThan(0);
});
@@ -314,7 +322,7 @@ describe('ChartList - anonymous view', () => {
// Switch to list view
const listViewToggle = await screen.findByRole('img', {
- name: 'list-view',
+ name: 'unordered-list',
});
const listViewButton = listViewToggle.closest('[role="button"]');
fireEvent.click(listViewButton);
diff --git a/superset-frontend/src/pages/ChartList/index.tsx b/superset-frontend/src/pages/ChartList/index.tsx
index 3e962aaf99..b2158b09a2 100644
--- a/superset-frontend/src/pages/ChartList/index.tsx
+++ b/superset-frontend/src/pages/ChartList/index.tsx
@@ -24,6 +24,8 @@ import {
styled,
SupersetClient,
t,
+ useTheme,
+ css,
} from '@superset-ui/core';
import { useState, useMemo, useCallback } from 'react';
import rison from 'rison';
@@ -157,6 +159,7 @@ const StyledActions = styled.div`
`;
function ChartList(props: ChartListProps) {
+ const theme = useTheme();
const {
addDangerToast,
addSuccessToast,
@@ -479,13 +482,12 @@ function ChartList(props: ChartListProps) {
placement="bottom"
>
<span
- data-test="trash"
role="button"
tabIndex={0}
className="action-button"
onClick={confirmDelete}
>
- <Icons.Trash />
+ <Icons.DeleteOutlined iconSize="l" />
</span>
</Tooltip>
)}
@@ -503,7 +505,7 @@ function ChartList(props: ChartListProps) {
className="action-button"
onClick={handleExport}
>
- <Icons.Share />
+ <Icons.UploadOutlined iconSize="l" />
</span>
</Tooltip>
)}
@@ -519,7 +521,7 @@ function ChartList(props: ChartListProps) {
className="action-button"
onClick={openEditModal}
>
- <Icons.EditAlt data-test="edit-alt" />
+ <Icons.EditOutlined data-test="edit-alt" iconSize="l" />
</span>
</Tooltip>
)}
@@ -760,9 +762,14 @@ function ChartList(props: ChartListProps) {
subMenuButtons.push({
name: (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" /> {t('Chart')}
+ <Icons.PlusOutlined
+ iconColor={theme.colors.primary.light5}
+ iconSize="m"
+ css={css`
+ vertical-align: text-top;
+ `}
+ />
+ <span>{t('Chart')}</span>
</>
),
buttonStyle: 'primary',
@@ -778,7 +785,10 @@ function ChartList(props: ChartListProps) {
title={t('Import charts')}
placement="bottomRight"
>
- <Icons.Import data-test="import-button" />
+ <Icons.DownloadOutlined
+ data-test="import-button"
+ iconColor={theme.colors.primary.dark1}
+ />
</Tooltip>
),
buttonStyle: 'link',
diff --git a/superset-frontend/src/pages/CssTemplateList/index.tsx b/superset-frontend/src/pages/CssTemplateList/index.tsx
index fd75f3ef23..e1853ad89e 100644
--- a/superset-frontend/src/pages/CssTemplateList/index.tsx
+++ b/superset-frontend/src/pages/CssTemplateList/index.tsx
@@ -18,7 +18,7 @@
*/
import { useMemo, useState } from 'react';
-import { t, SupersetClient } from '@superset-ui/core';
+import { t, SupersetClient, useTheme, css } from '@superset-ui/core';
import rison from 'rison';
import { useListViewResource } from 'src/views/CRUD/hooks';
@@ -37,6 +37,7 @@ import CssTemplateModal from 'src/features/cssTemplates/CssTemplateModal';
import { TemplateObject } from 'src/features/cssTemplates/types';
import { ModifiedInfo } from 'src/components/AuditInfo';
import { QueryObjectColumns } from 'src/views/CRUD/types';
+import Icons from 'src/components/Icons';
const PAGE_SIZE = 25;
@@ -55,6 +56,7 @@ function CssTemplatesList({
addSuccessToast,
user,
}: CssTemplatesListProps) {
+ const theme = useTheme();
const {
state: {
loading,
@@ -155,7 +157,7 @@ function CssTemplatesList({
label: 'edit-action',
tooltip: t('Edit template'),
placement: 'bottom',
- icon: 'Edit',
+ icon: 'EditOutlined',
onClick: handleEdit,
}
: null,
@@ -164,7 +166,7 @@ function CssTemplatesList({
label: 'delete-action',
tooltip: t('Delete template'),
placement: 'bottom',
- icon: 'Trash',
+ icon: 'DeleteOutlined',
onClick: handleDelete,
}
: null,
@@ -196,9 +198,15 @@ function CssTemplatesList({
subMenuButtons.push({
name: (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" /> {t('CSS template')}
+ <Icons.PlusOutlined
+ iconColor={theme.colors.primary.light5}
+ iconSize="m"
+ css={css`
+ margin: 'auto ${theme.gridUnit * 2}px auto 0';
+ vertical-align: text-top;
+ `}
+ />
+ {t('CSS template')}
</>
),
buttonStyle: 'primary',
diff --git a/superset-frontend/src/pages/DashboardList/DashboardList.test.jsx b/superset-frontend/src/pages/DashboardList/DashboardList.test.jsx
index 3ea08cbe10..29409fe1c5 100644
--- a/superset-frontend/src/pages/DashboardList/DashboardList.test.jsx
+++ b/superset-frontend/src/pages/DashboardList/DashboardList.test.jsx
@@ -146,11 +146,11 @@ describe('DashboardList', () => {
await screen.findByTestId('dashboard-list-view');
// Initially in card view
- const cardViewIcon = screen.getByRole('img', { name: 'card-view' });
+ const cardViewIcon = screen.getByRole('img', { name: 'appstore' });
expect(cardViewIcon).toBeInTheDocument();
// Switch to table view
- const listViewIcon = screen.getByRole('img', { name: 'list-view' });
+ const listViewIcon = screen.getByRole('img', { name: 'appstore' });
const listViewButton = listViewIcon.closest('[role="button"]');
fireEvent.click(listViewButton);
@@ -166,7 +166,9 @@ describe('DashboardList', () => {
await screen.findByText('title 0');
// Find and click the first more options button
- const moreIcons = await screen.findAllByRole('img', { name: 'more-vert' });
+ const moreIcons = await screen.findAllByRole('img', {
+ name: 'more',
+ });
fireEvent.click(moreIcons[0]);
// Click edit from the dropdown
@@ -186,7 +188,9 @@ describe('DashboardList', () => {
await screen.findByText('title 0');
// Find and click the first more options button
- const moreIcons = await screen.findAllByRole('img', { name: 'more-vert' });
+ const moreIcons = await screen.findAllByRole('img', {
+ name: 'more',
+ });
fireEvent.click(moreIcons[0]);
// Click delete from the dropdown
diff --git a/superset-frontend/src/pages/DashboardList/index.tsx b/superset-frontend/src/pages/DashboardList/index.tsx
index 6d5753e016..3543cde0f0 100644
--- a/superset-frontend/src/pages/DashboardList/index.tsx
+++ b/superset-frontend/src/pages/DashboardList/index.tsx
@@ -22,6 +22,8 @@ import {
styled,
SupersetClient,
t,
+ css,
+ useTheme,
} from '@superset-ui/core';
import { useSelector } from 'react-redux';
import { useState, useMemo, useCallback } from 'react';
@@ -138,7 +140,7 @@ const DASHBOARD_COLUMNS_TO_FETCH = [
function DashboardList(props: DashboardListProps) {
const { addDangerToast, addSuccessToast, user } = props;
-
+ const theme = useTheme();
const { roles } = useSelector<any, UserWithPermissionsAndRoles>(
state => state.user,
);
@@ -440,7 +442,10 @@ function DashboardList(props: DashboardListProps) {
className="action-button"
onClick={confirmDelete}
>
- <Icons.Trash data-test="dashboard-list-trash-icon" />
+ <Icons.DeleteOutlined
+ iconSize="l"
+ data-test="dashboard-list-trash-icon"
+ />
</span>
</Tooltip>
)}
@@ -458,7 +463,7 @@ function DashboardList(props: DashboardListProps) {
className="action-button"
onClick={handleExport}
>
- <Icons.Share />
+ <Icons.UploadOutlined iconSize="l" />
</span>
</Tooltip>
)}
@@ -474,7 +479,7 @@ function DashboardList(props: DashboardListProps) {
className="action-button"
onClick={handleEdit}
>
- <Icons.EditAlt data-test="edit-alt" />
+ <Icons.EditOutlined data-test="edit-alt" iconSize="l" />
</span>
</Tooltip>
)}
@@ -680,9 +685,15 @@ function DashboardList(props: DashboardListProps) {
subMenuButtons.push({
name: (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" /> {t('Dashboard')}
+ <Icons.PlusOutlined
+ iconColor={theme.colors.primary.light5}
+ iconSize="m"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ vertical-align: text-top;
+ `}
+ />
+ {t('Dashboard')}
</>
),
buttonStyle: 'primary',
@@ -698,7 +709,7 @@ function DashboardList(props: DashboardListProps) {
title={t('Import dashboards')}
placement="bottomRight"
>
- <Icons.Import data-test="import-button" />
+ <Icons.DownloadOutlined data-test="import-button" />
</Tooltip>
),
buttonStyle: 'link',
diff --git a/superset-frontend/src/pages/DatabaseList/index.tsx b/superset-frontend/src/pages/DatabaseList/index.tsx
index 5e9f7a2374..3d15141d71 100644
--- a/superset-frontend/src/pages/DatabaseList/index.tsx
+++ b/superset-frontend/src/pages/DatabaseList/index.tsx
@@ -21,6 +21,8 @@ import {
styled,
SupersetClient,
t,
+ useTheme,
+ css,
} from '@superset-ui/core';
import { useState, useMemo, useEffect } from 'react';
import rison from 'rison';
@@ -79,14 +81,6 @@ interface DatabaseListProps {
};
}
-const IconCheck = styled(Icons.Check)`
- color: ${({ theme }) => theme.colors.grayscale.dark1};
-`;
-
-const IconCancelX = styled(Icons.CancelX)`
- color: ${({ theme }) => theme.colors.grayscale.light1};
-`;
-
const Actions = styled.div`
color: ${({ theme }) => theme.colors.grayscale.base};
@@ -97,7 +91,18 @@ const Actions = styled.div`
`;
function BooleanDisplay({ value }: { value: Boolean }) {
- return value ? <IconCheck /> : <IconCancelX />;
+ const theme = useTheme();
+ return value ? (
+ <Icons.CheckOutlined
+ iconSize="s"
+ iconColor={theme.colors.grayscale.dark1}
+ />
+ ) : (
+ <Icons.CloseOutlined
+ iconSize="s"
+ iconColor={theme.colors.grayscale.light1}
+ />
+ );
}
function DatabaseList({
@@ -106,6 +111,7 @@ function DatabaseList({
addSuccessToast,
user,
}: DatabaseListProps) {
+ const theme = useTheme();
const {
state: {
loading,
@@ -317,9 +323,14 @@ function DatabaseList({
'data-test': 'btn-create-database',
name: (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" /> {t('Database')}{' '}
+ <Icons.PlusOutlined
+ css={css`
+ vertical-align: text-top;
+ `}
+ iconColor={theme.colors.primary.light5}
+ iconSize="m"
+ />
+ {t('Database')}
</>
),
buttonStyle: 'primary',
@@ -490,7 +501,7 @@ function DatabaseList({
title={t('Delete database')}
placement="bottom"
>
- <Icons.Trash />
+ <Icons.DeleteOutlined iconSize="l" />
</Tooltip>
</span>
)}
@@ -506,7 +517,7 @@ function DatabaseList({
className="action-button"
onClick={handleExport}
>
- <Icons.Share />
+ <Icons.UploadOutlined iconSize="l" />
</span>
</Tooltip>
)}
@@ -523,7 +534,7 @@ function DatabaseList({
className="action-button"
onClick={handleEdit}
>
- <Icons.EditAlt data-test="edit-alt" />
+ <Icons.EditOutlined data-test="edit-alt" iconSize="l" />
</span>
</Tooltip>
)}
@@ -540,7 +551,7 @@ function DatabaseList({
className="action-button"
onClick={handleSync}
>
- <Icons.Refresh />
+ <Icons.SyncOutlined iconSize="l" />
</span>
</Tooltip>
)}
diff --git a/superset-frontend/src/pages/DatasetList/index.tsx b/superset-frontend/src/pages/DatasetList/index.tsx
index a2cac3b036..5ae4bdb5ee 100644
--- a/superset-frontend/src/pages/DatasetList/index.tsx
+++ b/superset-frontend/src/pages/DatasetList/index.tsx
@@ -20,6 +20,8 @@ import {
getExtensionsRegistry,
styled,
SupersetClient,
+ useTheme,
+ css,
t,
} from '@superset-ui/core';
import { FunctionComponent, useState, useMemo, useCallback, Key } from 'react';
@@ -82,25 +84,27 @@ const FlexRowContainer = styled.div`
`;
const Actions = styled.div`
- color: ${({ theme }) => theme.colors.grayscale.base};
-
- .disabled {
- svg,
- i {
- &:hover {
- path {
- fill: ${({ theme }) => theme.colors.grayscale.light1};
+ ${({ theme }) => css`
+ color: ${theme.colors.grayscale.base};
+
+ .disabled {
+ svg,
+ i {
+ &:hover {
+ path {
+ fill: ${theme.colors.grayscale.light1};
+ }
}
}
+ color: ${theme.colors.grayscale.light1};
+ .antd5-menu-item:hover {
+ cursor: default;
+ }
+ &::after {
+ color: ${theme.colors.grayscale.light1};
+ }
}
- color: ${({ theme }) => theme.colors.grayscale.light1};
- .antd5-menu-item:hover {
- cursor: default;
- }
- &::after {
- color: ${({ theme }) => theme.colors.grayscale.light1};
- }
- }
+ `}
`;
type Dataset = {
@@ -140,6 +144,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
user,
}) => {
const history = useHistory();
+ const theme = useTheme();
const {
state: {
loading,
@@ -421,7 +426,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
className="action-button"
onClick={handleDelete}
>
- <Icons.Trash />
+ <Icons.DeleteOutlined iconSize="l" />
</span>
</Tooltip>
)}
@@ -437,7 +442,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
className="action-button"
onClick={handleExport}
>
- <Icons.Share />
+ <Icons.UploadOutlined iconSize="l" />
</span>
</Tooltip>
)}
@@ -459,7 +464,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
className={allowEdit ? 'action-button' : 'disabled'}
onClick={allowEdit ? handleEdit : undefined}
>
- <Icons.EditAlt />
+ <Icons.EditOutlined iconSize="l" />
</span>
</Tooltip>
)}
@@ -475,7 +480,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
className="action-button"
onClick={handleDuplicate}
>
- <Icons.Copy />
+ <Icons.CopyOutlined />
</span>
</Tooltip>
)}
@@ -624,9 +629,14 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
buttonArr.push({
name: (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" /> {t('Dataset')}{' '}
+ <Icons.PlusOutlined
+ iconColor={theme.colors.primary.light5}
+ iconSize="m"
+ css={css`
+ vertical-align: text-top;
+ `}
+ />
+ {t('Dataset')}
</>
),
onClick: () => {
@@ -642,7 +652,10 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
title={t('Import datasets')}
placement="bottomRight"
>
- <Icons.Import data-test="import-button" />
+ <Icons.DownloadOutlined
+ iconColor={theme.colors.primary.dark1}
+ data-test="import-button"
+ />
</Tooltip>
),
buttonStyle: 'link',
diff --git a/superset-frontend/src/pages/QueryHistoryList/index.tsx b/superset-frontend/src/pages/QueryHistoryList/index.tsx
index a5967118bb..20d610e27d 100644
--- a/superset-frontend/src/pages/QueryHistoryList/index.tsx
+++ b/superset-frontend/src/pages/QueryHistoryList/index.tsx
@@ -19,6 +19,7 @@
import { useMemo, useState, useCallback, ReactElement } from 'react';
import { Link, useHistory } from 'react-router-dom';
import {
+ css,
QueryState,
styled,
SupersetClient,
@@ -159,7 +160,13 @@ function QueryList({ addDangerToast }: QueryListProps) {
};
if (status === QueryState.Success) {
statusConfig.name = (
- <Icons.Check iconColor={theme.colors.success.base} />
+ <Icons.CheckOutlined
+ iconSize="m"
+ iconColor={theme.colors.success.base}
+ css={css`
+ vertical-align: -webkit-baseline-middle;
+ `}
+ />
);
statusConfig.label = t('Success');
} else if (
@@ -167,7 +174,8 @@ function QueryList({ addDangerToast }: QueryListProps) {
status === QueryState.Stopped
) {
statusConfig.name = (
- <Icons.XSmall
+ <Icons.CloseOutlined
+ iconSize="xs"
iconColor={
status === QueryState.Failed
? theme.colors.error.base
@@ -183,16 +191,14 @@ function QueryList({ addDangerToast }: QueryListProps) {
statusConfig.label = t('Running');
} else if (status === QueryState.TimedOut) {
statusConfig.name = (
- <Icons.Offline iconColor={theme.colors.grayscale.light1} />
+ <Icons.CircleSolid iconColor={theme.colors.grayscale.light1} />
);
statusConfig.label = t('Offline');
} else if (
status === QueryState.Scheduled ||
status === QueryState.Pending
) {
- statusConfig.name = (
- <Icons.Queued iconColor={theme.colors.grayscale.base} />
- );
+ statusConfig.name = <Icons.Queued />;
statusConfig.label = t('Scheduled');
}
return (
@@ -352,7 +358,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
}: any) => (
<Tooltip title={t('Open query in SQL Lab')} placement="bottom">
<Link to={`/sqllab?queryId=${id}`}>
- <Icons.Full iconColor={theme.colors.grayscale.base} />
+ <Icons.Full iconSize="l" />
</Link>
</Tooltip>
),
diff --git a/superset-frontend/src/pages/RowLevelSecurityList/index.tsx b/superset-frontend/src/pages/RowLevelSecurityList/index.tsx
index f3b211f95d..8a2383772c 100644
--- a/superset-frontend/src/pages/RowLevelSecurityList/index.tsx
+++ b/superset-frontend/src/pages/RowLevelSecurityList/index.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t, styled, SupersetClient } from '@superset-ui/core';
+import { t, styled, SupersetClient, useTheme, css } from '@superset-ui/core';
import { useMemo, useState } from 'react';
import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
import Icons from 'src/components/Icons';
@@ -55,6 +55,7 @@ function RowLevelSecurityList(props: RLSProps) {
const { addDangerToast, addSuccessToast, user } = props;
const [ruleModalOpen, setRuleModalOpen] = useState<boolean>(false);
const [currentRule, setCurrentRule] = useState(null);
+ const theme = useTheme();
const {
state: {
@@ -193,7 +194,10 @@ function RowLevelSecurityList(props: RLSProps) {
className="action-button"
onClick={confirmDelete}
>
- <Icons.Trash data-test="rls-list-trash-icon" />
+ <Icons.DeleteOutlined
+ data-test="rls-list-trash-icon"
+ iconSize="l"
+ />
</span>
</Tooltip>
)}
@@ -211,7 +215,7 @@ function RowLevelSecurityList(props: RLSProps) {
className="action-button"
onClick={handleEdit}
>
- <Icons.EditAlt data-test="edit-alt" />
+ <Icons.EditOutlined data-test="edit-alt" iconSize="l" />
</span>
</Tooltip>
)}
@@ -246,9 +250,16 @@ function RowLevelSecurityList(props: RLSProps) {
buttonAction: () => handleRuleEdit(null),
buttonText: canEdit ? (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" data-test="add-rule-empty" /> {'Rule'}{' '}
+ <Icons.PlusOutlined
+ iconColor={theme.colors.primary.light5}
+ iconSize="m"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ vertical-align: text-top;
+ `}
+ data-test="add-rule-empty"
+ />
+ {t('Rule')}
</>
) : null,
};
@@ -314,9 +325,16 @@ function RowLevelSecurityList(props: RLSProps) {
subMenuButtons.push({
name: (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" data-test="add-rule" /> {t('Rule')}
+ <Icons.PlusOutlined
+ iconColor={theme.colors.primary.light5}
+ iconSize="m"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ vertical-align: text-top;
+ `}
+ data-test="add-rule"
+ />
+ {t('Rule')}
</>
),
buttonStyle: 'primary',
diff --git a/superset-frontend/src/pages/SavedQueryList/SavedQueryList.test.jsx b/superset-frontend/src/pages/SavedQueryList/SavedQueryList.test.jsx
index cf01d043a3..0edb6d67c2 100644
--- a/superset-frontend/src/pages/SavedQueryList/SavedQueryList.test.jsx
+++ b/superset-frontend/src/pages/SavedQueryList/SavedQueryList.test.jsx
@@ -142,7 +142,7 @@ describe('SavedQueryList', () => {
const deleteInput = screen.getByTestId('delete-modal-input');
fireEvent.change(deleteInput, { target: { value: 'DELETE' } });
- const confirmButton = screen.getByRole('button', { name: /delete/i });
+ const confirmButton = screen.getByTestId('modal-confirm-button');
fireEvent.click(confirmButton);
// Verify API call
diff --git a/superset-frontend/src/pages/SavedQueryList/index.tsx b/superset-frontend/src/pages/SavedQueryList/index.tsx
index c68654a519..bfae504721 100644
--- a/superset-frontend/src/pages/SavedQueryList/index.tsx
+++ b/superset-frontend/src/pages/SavedQueryList/index.tsx
@@ -23,6 +23,8 @@ import {
styled,
SupersetClient,
t,
+ css,
+ useTheme,
} from '@superset-ui/core';
import { useCallback, useMemo, useState, MouseEvent } from 'react';
import { Link, useHistory } from 'react-router-dom';
@@ -102,6 +104,7 @@ function SavedQueryList({
addSuccessToast,
user,
}: SavedQueryListProps) {
+ const theme = useTheme();
const {
state: {
loading,
@@ -195,10 +198,24 @@ function SavedQueryList({
subMenuButtons.push({
name: (
- <Link to="/sqllab?new=true">
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" /> {t('Query')}
+ <Link
+ to="/sqllab?new=true"
+ css={css`
+ display: flex;
+ &:hover {
+ color: currentColor;
+ text-decoration: none;
+ }
+ `}
+ >
+ <Icons.PlusOutlined
+ iconColor={theme.colors.primary.light5}
+ iconSize="m"
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ `}
+ />
+ {t('Query')}
</Link>
),
buttonStyle: 'primary',
@@ -213,7 +230,7 @@ function SavedQueryList({
placement="bottomRight"
data-test="import-tooltip-test"
>
- <Icons.Import data-test="import-icon" />
+ <Icons.DownloadOutlined data-test="import-icon" />
</Tooltip>
),
buttonStyle: 'link',
@@ -425,28 +442,28 @@ function SavedQueryList({
label: 'edit-action',
tooltip: t('Edit query'),
placement: 'bottom',
- icon: 'Edit',
+ icon: 'EditOutlined',
onClick: handleEdit,
},
{
label: 'copy-action',
tooltip: t('Copy query URL'),
placement: 'bottom',
- icon: 'Copy',
+ icon: 'CopyOutlined',
onClick: handleCopy,
},
canExport && {
label: 'export-action',
tooltip: t('Export query'),
placement: 'bottom',
- icon: 'Share',
+ icon: 'UploadOutlined',
onClick: handleExport,
},
canDelete && {
label: 'delete-action',
tooltip: t('Delete query'),
placement: 'bottom',
- icon: 'Trash',
+ icon: 'DeleteOutlined',
onClick: handleDelete,
},
].filter(item => !!item);
diff --git a/superset-frontend/src/pages/Tags/index.tsx b/superset-frontend/src/pages/Tags/index.tsx
index 138b1e8a44..95e782bd74 100644
--- a/superset-frontend/src/pages/Tags/index.tsx
+++ b/superset-frontend/src/pages/Tags/index.tsx
@@ -17,7 +17,13 @@
* under the License.
*/
import { useMemo, useState } from 'react';
-import { isFeatureEnabled, FeatureFlag, t } from '@superset-ui/core';
+import {
+ isFeatureEnabled,
+ FeatureFlag,
+ t,
+ useTheme,
+ css,
+} from '@superset-ui/core';
import {
Actions,
createErrorHandler,
@@ -59,6 +65,7 @@ interface TagListProps {
function TagList(props: TagListProps) {
const { addDangerToast, addSuccessToast, user } = props;
const { userId } = user;
+ const theme = useTheme();
const initialFilters = useMemo(
() => [
@@ -135,10 +142,16 @@ function TagList(props: TagListProps) {
buttonAction: () => setShowTagModal(true),
buttonText: (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" data-test="add-rule-empty" />{' '}
- {'Create a new Tag'}{' '}
+ <Icons.PlusOutlined
+ iconSize="m"
+ iconColor={theme.colors.primary.light5}
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ vertical-align: text-top;
+ `}
+ data-test="add-rule-empty"
+ />
+ Create a new Tag
</>
),
};
@@ -218,7 +231,10 @@ function TagList(props: TagListProps) {
className="action-button"
onClick={confirmDelete}
>
- <Icons.Trash data-test="dashboard-list-trash-icon" />
+ <Icons.DeleteOutlined
+ data-test="dashboard-list-trash-icon"
+ iconSize="l"
+ />
</span>
</Tooltip>
)}
@@ -236,7 +252,7 @@ function TagList(props: TagListProps) {
className="action-button"
onClick={handleEdit}
>
- <Icons.EditAlt data-test="edit-alt" />
+ <Icons.EditOutlined data-test="edit-alt" iconSize="l" />
</span>
</Tooltip>
)}
@@ -324,9 +340,14 @@ function TagList(props: TagListProps) {
subMenuButtons.push({
name: (
<>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
- <i className="fa fa-plus" /> {t('Tag')}
... 40 lines suppressed ...