refactor: New Icon system with Enhanced Antd Custom Icon

[geido]

SUMMARY

This PR introduces an entirely new Icon system that uses a combination of the Antd Custom Icon and Emotion while consolidating the usage of icons.

• Use existing Antd icons with the ability to enhance them
• Use custom icons trough the Antd Custom Icon component and the ability to enhance them
• Adds the ability to override any Antd existing icon with a custom one

As an example implementation, the following sections have been changed to use some of the icons under the new icon system:

• Charts lists
• Dashboards lists
• Saved Queries lists
• Datasets lists
• Databases lists
• Explore - Edit Datasource columns

BEFORE

AFTER

TEST PLAN

1. Go to any list
2. Hover your mouse on a list item
3. Make sure the trash icon appears and works as intended

ADDITIONAL INFORMATION

• Has associated issue:
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[geido]

@rusackas @junlincc

[codecov-io]

Codecov Report

Merging #12229 (d2d9159) into master (9b5e66b) will decrease coverage by 14.12%.
The diff coverage is 18.70%.

@@             Coverage Diff             @@
##           master   #12229       +/-   ##
===========================================
- Coverage   72.29%   58.17%   -14.13%     
===========================================
  Files         864      481      -383     
  Lines       44883    16120    -28763     
  Branches     5403     4124     -1279     
===========================================
- Hits        32450     9378    -23072     
+ Misses      12224     6742     -5482     
+ Partials      209        0      -209     

Flag	Coverage Δ
cypress	58.17% <18.70%> (?)
javascript	?
python	?

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...set-frontend/src/components/ListViewCard/index.tsx	100.00% <ø> (+5.45%)	⬆️
superset-frontend/src/components/Icons/index.ts	4.76% <4.76%> (ø)
...perset-frontend/src/views/CRUD/chart/ChartCard.tsx	70.83% <25.00%> (-1.39%)	⬇️
...rontend/src/views/CRUD/dashboard/DashboardCard.tsx	76.00% <50.00%> (+0.32%)	⬆️
...set-frontend/src/components/Icons/AntdEnhanced.tsx	75.00% <75.00%> (ø)
superset-frontend/src/components/Icons/Icon.tsx	100.00% <100.00%> (ø)
...perset-frontend/src/views/CRUD/chart/ChartList.tsx	80.18% <100.00%> (+8.52%)	⬆️
...rontend/src/views/CRUD/dashboard/DashboardList.tsx	72.63% <100.00%> (-1.25%)	⬇️
...tend/src/views/CRUD/data/database/DatabaseList.tsx	69.66% <100.00%> (-9.55%)	⬇️
...uperset-frontend/src/dashboard/util/dnd-reorder.js	0.00% <0.00%> (-100.00%)	⬇️
... and 780 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9b5e66b...d2d9159. Read the comment docs.

[adam-stasiak]

Tested manually across browsers and looks fine 🟢

[rusackas]

For transparency, Diego and I spoke online, and we agreed to put this in Draft mode while exploring a couple options:

• Re-exporting vanilla AntD icons from the Superset Icon component, so we can get ALL icons from one import.
• Attempting to consolidate the interface for components, either with AntD's <WhateverIcon /> interface, or our own <Icon name="WhateverIcon" /> interface.
• Once the interface is conformed, trying to find a way to essentially override an AntD icon, which would allow a component developer to use AnyVanillaIcon from AntD, and then when we want to replace it with our own, we would simply override it in our Icon component, and not have to go around finding/replacing the scattered implementations.

[rusackas]

LGTM! This is a huge step forward! Will pull the branch and do a little more functional testing again before merging

[rusackas]

This looks like it's ready to go, pending a teensy lint-fix

[rusackas]

@junlincc @eschutho @nytai @ktmud @etr2460

With concerns of stability in mind, does anyone see any reason to further hesitate on merging this one in (after a rebase)? It looks like a very positive code quality change to me, so I'm getting an itchy trigger finger.

[villebro]

One minor nit - other than that LGTM and worked perfectly in my testing.

[eschutho]

cc @Steejay @mihir174
Looks great. Only question I have is whether we can we still use custom icons when designers want something new or different?

[rusackas]

cc @Steejay @mihir174
Looks great. Only question I have is whether we can we still use custom icons when designers want something new or different?

Indeed! This is built specifically for that, so we can effectively extend/override the AntD icon set, rather than having custom icons that are a bit of an interface mismatch from the AntD icons we'd use elsewhere.

In fact, plans are underway to revamp our custom icons in the design system to better match the layout/sizing of the AntD icons. We'll get them all to play nicely together.