Upgrade react-icons from 2.2.7 to 4.10.1

[anshgoyalevil]

Which problem is this PR solving?

• This PR upgrades the react-icons from 2.2.7 to 4.10.1
• It also removes the types/react-icons as it is now supplied with the package itself
• The visual changes are tracked using https://gist.github.com/anshgoyalevil/aa6d32dce103c7c9bea7865d0346b2e9

Checklist

• I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
• I have signed all commits
• I have added unit tests for the new functionality
• I have run lint and test steps successfully
  • for jaeger: make lint test
  • for jaeger-ui: yarn lint and yarn test

[anshgoyalevil]

@yurishkuro I have included the icon changes.

The previous icons were not available to look up somewhere (yes, 2nd option was to navigate pages manually in jaeger-ui), so I dug up their raw SVG path from node_modules and then took a snip of their rendered version using SVG Viewer

Feel free to suggest any alternate icon, in case you feel some icon is not looking good. You may use this to surf all of react icons.

[codecov]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (843d88e) 96.01% compared to head (378a4ae) 96.01%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1721   +/-   ##
=======================================
  Coverage   96.01%   96.01%           
=======================================
  Files         241      241           
  Lines        7562     7562           
  Branches     1987     1987           
=======================================
  Hits         7261     7261           
  Misses        301      301           

Files Changed	Coverage Δ
...ts/DeepDependencies/Graph/DdgNodeContent/index.tsx	100.00% <ø> (ø)
...components/DeepDependencies/Header/ChevronDown.tsx	100.00% <ø> (ø)
...i/src/components/DeepDependencies/Header/index.tsx	100.00% <ø> (ø)
...rc/components/DeepDependencies/SidePanel/index.tsx	100.00% <ø> (ø)
...r-ui/src/components/SearchTracePage/SearchForm.jsx	91.61% <ø> (ø)
...nents/SearchTracePage/SearchResults/ResultItem.tsx	100.00% <ø> (ø)
...mponents/TraceDiff/TraceDiffHeader/TraceHeader.tsx	100.00% <ø> (ø)
...ents/TracePage/TracePageHeader/TracePageHeader.tsx	97.56% <ø> (ø)
...s/TracePage/TracePageHeader/TracePageSearchBar.tsx	100.00% <ø> (ø)
...nents/TracePage/TraceTimelineViewer/SpanBarRow.tsx	100.00% <ø> (ø)
... and 12 more

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[yurishkuro]

not exactly the scope of this PR, but I dislike that we use both antd/icons and react-icons, is there a strong reason to do that and not converge onto one?

[anshgoyalevil]

As per my analysis so far, we can use react-icons in place of antd icons, but not vice versa.
Since react-icons offers the best of both worlds, and we too are using some icons which, I haven't looked exactly but I think are not available in antd icons, or atleast react-icons/ai

[yurishkuro]

As per my analysis so far, we can use react-icons in place of antd icons, but not vice versa.

it's possible, although I am skeptical if we can't find close equivalents.

What I don't like about react-icons is that it's all over the place with all kinds of namespaces, like md, io, fa. As I understand, those are competing icon sets, presumably created with some design consistency principles, but we keep mixing them randomly.

[anshgoyalevil]

I agree.
Maybe in future, would have to put up some extra work in finding the alternatives.
Like we can stick to react-icons/ fa (font awesome) icons. As far as I know, they offer a wide range of icons.

[yurishkuro]

I suggest we book a ticket and include a simple grep/awk output that lists all distinct icons we're using. I doubt it's more than a couple dozen.

[yurishkuro]

#1723

[anshgoyalevil]

Thanks for creating the ticket.
I would try finding the icons and prepare a gist.
In the meantime, someone from community can pick it up