From 9e7f00644b6497260e236c0eff05ecbae96390ff Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Tue, 22 Aug 2023 20:57:02 +0530
Subject: [PATCH 1/2] Upgrade react-icons

Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
---
 packages/jaeger-ui/package.json               |  3 +--
 .../Graph/DdgNodeContent/index.tsx            |  6 ++---
 .../Header/ChevronDown.test.js                |  2 +-
 .../DeepDependencies/Header/ChevronDown.tsx   |  2 +-
 .../Header/HopsSelector/Selector.tsx          |  8 +++---
 .../DeepDependencies/Header/index.test.js     |  3 +--
 .../DeepDependencies/Header/index.tsx         |  3 +--
 .../DeepDependencies/SidePanel/index.tsx      |  3 +--
 .../components/SearchTracePage/SearchForm.jsx |  2 +-
 .../SearchResults/ResultItem.tsx              |  2 +-
 .../TraceDiff/TraceDiffHeader/TraceHeader.tsx |  2 +-
 .../TracePageHeader/TracePageHeader.tsx       | 10 +++----
 .../TracePageHeader/TracePageSearchBar.tsx    |  5 ++--
 .../TraceTimelineViewer/SpanBarRow.tsx        | 14 +++++-----
 .../SpanDetail/AccordianKeyValues.tsx         |  5 ++--
 .../SpanDetail/AccordianLogs.tsx              |  5 ++--
 .../SpanDetail/AccordianReferences.tsx        |  5 ++--
 .../SpanDetail/AccordianText.tsx              |  5 ++--
 .../SpanTreeOffset.test.js                    | 12 ++++-----
 .../TraceTimelineViewer/SpanTreeOffset.tsx    |  6 ++---
 .../common/DetailsCard/DetailTable.test.js    |  2 +-
 .../common/DetailsCard/DetailTable.tsx        |  2 +-
 .../DetailsCard/DetailTableDropdown.tsx       |  5 ++--
 .../components/common/DetailsCard/index.tsx   |  2 +-
 .../components/common/FilteredList/index.tsx  |  2 +-
 .../src/components/common/NameSelector.tsx    |  2 +-
 .../src/components/common/NewWindowIcon.tsx   |  4 +--
 yarn.lock                                     | 26 +++----------------
 28 files changed, 60 insertions(+), 88 deletions(-)

diff --git a/packages/jaeger-ui/package.json b/packages/jaeger-ui/package.json
index 1b36bf85fd..59d3139aee 100644
--- a/packages/jaeger-ui/package.json
+++ b/packages/jaeger-ui/package.json
@@ -49,7 +49,6 @@
     "@types/lodash": "^4.14.123",
     "@types/object-hash": "^3.0.2",
     "@types/react-helmet": "^6.1.5",
-    "@types/react-icons": "2.2.7",
     "@types/react-redux": "^5.0.6",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-virtualized-select": "^3.0.7",
@@ -83,7 +82,7 @@
     "react-dom": "^18.2.0",
     "react-ga": "^3.3.1",
     "react-helmet": "^6.1.0",
-    "react-icons": "2.2.7",
+    "react-icons": "^4.10.1",
     "react-is": "^18.2.0",
     "react-redux": "^5.0.6",
     "react-router-dom": "4.3.1",
diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/index.tsx b/packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/index.tsx
index 369e26eeba..19f4c51bc0 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/index.tsx
+++ b/packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/index.tsx
@@ -16,8 +16,8 @@ import * as React from 'react';
 import { Checkbox, Popover } from 'antd';
 import cx from 'classnames';
 import { TLayoutVertex } from '@jaegertracing/plexus/lib/types';
-import IoAndroidLocate from 'react-icons/lib/io/android-locate';
-import MdVisibilityOff from 'react-icons/lib/md/visibility-off';
+import { MdVisibilityOff } from 'react-icons/md';
+import { IoLocate } from 'react-icons/io5';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
@@ -326,7 +326,7 @@ export class UnconnectedDdgNodeContent extends React.PureComponent<TProps, TStat
           {!isFocalNode && (
             <a className="DdgNodeContent--actionsItem" onClick={this.focusPaths} role="button">
               <span className="DdgNodeContent--actionsItemIconWrapper">
-                <IoAndroidLocate />
+                <IoLocate />
               </span>
               <span className="DdgNodeContent--actionsItemText">Focus paths through this node</span>
             </a>
diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Header/ChevronDown.test.js b/packages/jaeger-ui/src/components/DeepDependencies/Header/ChevronDown.test.js
index 8bf7e4721a..19880f178c 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/Header/ChevronDown.test.js
+++ b/packages/jaeger-ui/src/components/DeepDependencies/Header/ChevronDown.test.js
@@ -14,7 +14,7 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import IoChevronDown from 'react-icons/lib/io/chevron-down';
+import { IoChevronDown } from 'react-icons/io5';
 
 import ChevronDown from './ChevronDown';
 
diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Header/ChevronDown.tsx b/packages/jaeger-ui/src/components/DeepDependencies/Header/ChevronDown.tsx
index 4cbe5c6021..88e75d9c98 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/Header/ChevronDown.tsx
+++ b/packages/jaeger-ui/src/components/DeepDependencies/Header/ChevronDown.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import IoChevronDown from 'react-icons/lib/io/chevron-down';
+import { IoChevronDown } from 'react-icons/io5';
 
 import './ChevronDown.css';
 
diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx b/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx
index df89226489..e88df0b70b 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx
+++ b/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx
@@ -14,8 +14,8 @@
 
 import React, { PureComponent } from 'react';
 import { Popover } from 'antd';
-import SortAmountAsc from 'react-icons/lib/fa/sort-amount-asc.js';
-import IoChevronRight from 'react-icons/lib/io/chevron-right';
+import { ImSortAmountAsc } from 'react-icons/im';
+import { FaChevronRight } from 'react-icons/fa';
 
 import ChevronDown from '../ChevronDown';
 import { trackHopChange } from '../../index.track';
@@ -48,7 +48,7 @@ export default class Selector extends PureComponent<TProps> {
     const { direction } = this.props;
     return (
       <React.Fragment key={`${distance} ${direction} ${suffix}`}>
-        {Boolean(showChevron) && <IoChevronRight className={`${CLASSNAME}--ChevronRight is-${fullness}`} />}
+        {Boolean(showChevron) && <FaChevronRight className={`${CLASSNAME}--ChevronRight is-${fullness}`} />}
         <button
           className={`${CLASSNAME}--btn is-${fullness} ${CLASSNAME}--${suffix}`}
           type="button"
@@ -109,7 +109,7 @@ export default class Selector extends PureComponent<TProps> {
         title={`Visible ${lowercaseLabel}`}
       >
         <span className={CLASSNAME}>
-          <SortAmountAsc className={`${CLASSNAME}--AscIcon is-${streamText}`} />
+          <ImSortAmountAsc className={`${CLASSNAME}--AscIcon is-${streamText}`} />
           {streamLabel}
           {furthestBtn}
           <span className={`${CLASSNAME}--delimiter`}>/</span>
diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Header/index.test.js b/packages/jaeger-ui/src/components/DeepDependencies/Header/index.test.js
index 5e936df75a..5365caa942 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/Header/index.test.js
+++ b/packages/jaeger-ui/src/components/DeepDependencies/Header/index.test.js
@@ -15,8 +15,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Tooltip } from 'antd';
-import MdVisibility from 'react-icons/lib/md/visibility';
-import MdVisibilityOff from 'react-icons/lib/md/visibility-off';
+import { MdVisibility, MdVisibilityOff } from 'react-icons/md';
 
 import Header from './index';
 import HopsSelector from './HopsSelector';
diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Header/index.tsx b/packages/jaeger-ui/src/components/DeepDependencies/Header/index.tsx
index 6684ee58a9..9b4091bf17 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/Header/index.tsx
+++ b/packages/jaeger-ui/src/components/DeepDependencies/Header/index.tsx
@@ -15,8 +15,7 @@
 import * as React from 'react';
 import { Input, Tooltip } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
-import MdVisibility from 'react-icons/lib/md/visibility';
-import MdVisibilityOff from 'react-icons/lib/md/visibility-off';
+import { MdVisibility, MdVisibilityOff } from 'react-icons/md';
 
 import HopsSelector from './HopsSelector';
 import NameSelector from '../../common/NameSelector';
diff --git a/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/index.tsx b/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/index.tsx
index 5daae1e527..5664be4bb1 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/index.tsx
+++ b/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/index.tsx
@@ -14,8 +14,7 @@
 
 import * as React from 'react';
 import { Modal, Table } from 'antd';
-import MdExitToApp from 'react-icons/lib/md/exit-to-app';
-import MdInfoOutline from 'react-icons/lib/md/info-outline';
+import { MdExitToApp, MdInfoOutline } from 'react-icons/md';
 
 import { TDdgVertex } from '../../../model/ddg/types';
 import { TPathAgnosticDecorationSchema } from '../../../model/path-agnostic-decorations/types';
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.jsx b/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.jsx
index 42e63bdc0d..b68c0d44be 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.jsx
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.jsx
@@ -21,7 +21,7 @@ import moment from 'moment';
 import memoizeOne from 'memoize-one';
 import PropTypes from 'prop-types';
 import queryString from 'query-string';
-import IoHelp from 'react-icons/lib/io/help';
+import { IoHelp } from 'react-icons/io5';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Field, reduxForm, formValueSelector } from 'redux-form';
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItem.tsx b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItem.tsx
index a44b554175..edbe6aa864 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItem.tsx
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItem.tsx
@@ -20,7 +20,7 @@ import { Link } from 'react-router-dom';
 import { sortBy } from 'lodash';
 import moment from 'moment';
 
-import IoAlert from 'react-icons/lib/io/alert';
+import { IoAlert } from 'react-icons/io5';
 
 import { trackConversions, EAltViewActions } from './index.track';
 import * as markers from './ResultItem.markers';
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx
index e50bf66110..d54c50ffd8 100644
--- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx
+++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import IoChevronDown from 'react-icons/lib/io/chevron-down';
+import { IoChevronDown } from 'react-icons/io5';
 
 import TraceTimelineLink from './TraceTimelineLink';
 import RelativeDate from '../../common/RelativeDate';
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
index dbb1d79368..237b18f687 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
@@ -17,9 +17,9 @@ import { Button, Input } from 'antd';
 import _get from 'lodash/get';
 import _maxBy from 'lodash/maxBy';
 import _values from 'lodash/values';
-import IoAndroidArrowBack from 'react-icons/lib/io/android-arrow-back';
-import IoIosFilingOutline from 'react-icons/lib/io/ios-filing-outline';
-import MdKeyboardArrowRight from 'react-icons/lib/md/keyboard-arrow-right';
+import { IoArrowBack } from 'react-icons/io5';
+import { IoIosFiling } from 'react-icons/io';
+import { MdKeyboardArrowRight } from 'react-icons/md';
 import { Link } from 'react-router-dom';
 
 import AltViewOptions from './AltViewOptions';
@@ -163,7 +163,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
       <div className="TracePageHeader--titleRow">
         {toSearch && (
           <Link className="TracePageHeader--back" to={toSearch}>
-            <IoAndroidArrowBack />
+            <IoArrowBack />
           </Link>
         )}
         {links && links.length > 0 && <ExternalLinks links={links} />}
@@ -203,7 +203,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
         )}
         {showArchiveButton && (
           <Button className="ub-mr2 ub-flex ub-items-center" htmlType="button" onClick={onArchiveClicked}>
-            <IoIosFilingOutline className="TracePageHeader--archiveIcon" />
+            <IoIosFiling className="TracePageHeader--archiveIcon" />
             Archive Trace
           </Button>
         )}
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.tsx
index 9c256792b3..309ac4eea3 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.tsx
@@ -15,9 +15,8 @@
 import * as React from 'react';
 import { Button, Input, Tooltip } from 'antd';
 import cx from 'classnames';
-import IoAndroidLocate from 'react-icons/lib/io/android-locate';
+import { IoLocate, IoHelp } from 'react-icons/io5';
 
-import IoHelp from 'react-icons/lib/io/help';
 import * as markers from './TracePageSearchBar.markers';
 import { trackFilter } from '../index.track';
 import UiFindInput from '../../common/UiFindInput';
@@ -106,7 +105,7 @@ export function TracePageSearchBarFn(props: TracePageSearchBarProps & { forwarde
               htmlType="button"
               onClick={focusUiFindMatches}
             >
-              <IoAndroidLocate />
+              <IoLocate />
             </Button>
             <Button
               className={btnClass}
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx
index 199fd0abf3..c2acb7365f 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx
@@ -13,10 +13,10 @@
 // limitations under the License.
 
 import * as React from 'react';
-import IoAlert from 'react-icons/lib/io/alert';
-import IoArrowRightA from 'react-icons/lib/io/arrow-right-a';
-import IoNetwork from 'react-icons/lib/io/network';
-import MdFileUpload from 'react-icons/lib/md/file-upload';
+import { IoAlert } from 'react-icons/io5';
+import { ImArrowRight } from 'react-icons/im';
+import { IoMdGitNetwork } from 'react-icons/io';
+import { MdFileUpload } from 'react-icons/md';
 import ReferencesButton from './ReferencesButton';
 import TimelineRow from './TimelineRow';
 import { formatDuration, ViewedBoundsFunctionType } from './utils';
@@ -153,14 +153,14 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
                 {serviceName}{' '}
                 {rpc && (
                   <span>
-                    <IoArrowRightA />{' '}
+                    <ImArrowRight />{' '}
                     <i className="SpanBarRow--rpcColorMarker" style={{ background: rpc.color }} />
                     {rpc.serviceName}
                   </span>
                 )}
                 {noInstrumentedServer && (
                   <span>
-                    <IoArrowRightA />{' '}
+                    <ImArrowRight />{' '}
                     <i
                       className="SpanBarRow--rpcColorMarker"
                       style={{ background: noInstrumentedServer.color }}
@@ -177,7 +177,7 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
                 tooltipText="Contains multiple references"
                 focusSpan={focusSpan}
               >
-                <IoNetwork />
+                <IoMdGitNetwork />
               </ReferencesButton>
             )}
             {span.subsidiarilyReferencedBy && span.subsidiarilyReferencedBy.length > 0 && (
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx
index 76256f2a06..ea04f85c13 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx
@@ -14,8 +14,7 @@
 
 import * as React from 'react';
 import cx from 'classnames';
-import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
-import IoIosArrowRight from 'react-icons/lib/io/ios-arrow-right';
+import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io';
 
 import * as markers from './AccordianKeyValues.markers';
 import KeyValuesTable from './KeyValuesTable';
@@ -67,7 +66,7 @@ export default function AccordianKeyValues(props: AccordianKeyValuesProps) {
   let arrow: React.ReactNode | null = null;
   let headerProps: Object | null = null;
   if (interactive) {
-    arrow = isOpen ? <IoIosArrowDown className={iconCls} /> : <IoIosArrowRight className={iconCls} />;
+    arrow = isOpen ? <IoIosArrowDown className={iconCls} /> : <IoIosArrowForward className={iconCls} />;
     headerProps = {
       'aria-checked': isOpen,
       onClick: isEmpty ? null : onToggle,
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx
index 58a5af9a5f..9d82d74349 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx
@@ -15,8 +15,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import _sortBy from 'lodash/sortBy';
-import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
-import IoIosArrowRight from 'react-icons/lib/io/ios-arrow-right';
+import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io';
 
 import AccordianKeyValues from './AccordianKeyValues';
 import { formatDuration } from '../utils';
@@ -45,7 +44,7 @@ export default function AccordianLogs(props: AccordianLogsProps) {
     arrow = isOpen ? (
       <IoIosArrowDown className="u-align-icon" />
     ) : (
-      <IoIosArrowRight className="u-align-icon" />
+      <IoIosArrowForward className="u-align-icon" />
     );
     HeaderComponent = 'a';
     headerProps = {
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx
index b4b2423b86..98855aeeb4 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx
@@ -14,8 +14,7 @@
 
 import * as React from 'react';
 import cx from 'classnames';
-import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
-import IoIosArrowRight from 'react-icons/lib/io/ios-arrow-right';
+import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io';
 import './AccordianReferences.css';
 import { SpanReference } from '../../../../types/trace';
 import ReferenceLink from '../../url/ReferenceLink';
@@ -86,7 +85,7 @@ export default class AccordianReferences extends React.PureComponent<AccordianRe
     let arrow: React.ReactNode | null = null;
     let headerProps: Object | null = null;
     if (interactive) {
-      arrow = isOpen ? <IoIosArrowDown className={iconCls} /> : <IoIosArrowRight className={iconCls} />;
+      arrow = isOpen ? <IoIosArrowDown className={iconCls} /> : <IoIosArrowForward className={iconCls} />;
       headerProps = {
         'aria-checked': isOpen,
         onClick: isEmpty ? null : onToggle,
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.tsx
index 77001ec901..9deb5bf9ed 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.tsx
@@ -14,8 +14,7 @@
 
 import * as React from 'react';
 import cx from 'classnames';
-import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
-import IoIosArrowRight from 'react-icons/lib/io/ios-arrow-right';
+import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io';
 import TextList from './TextList';
 import { TNil } from '../../../../types';
 
@@ -39,7 +38,7 @@ export default function AccordianText(props: AccordianTextProps) {
   let arrow: React.ReactNode | null = null;
   let headerProps: Object | null = null;
   if (interactive) {
-    arrow = isOpen ? <IoIosArrowDown className={iconCls} /> : <IoIosArrowRight className={iconCls} />;
+    arrow = isOpen ? <IoIosArrowDown className={iconCls} /> : <IoIosArrowForward className={iconCls} />;
     headerProps = {
       'aria-checked': isOpen,
       onClick: isEmpty ? null : onToggle,
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.test.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.test.js
index 572b3847cc..f761043c48 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.test.js
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.test.js
@@ -14,8 +14,8 @@
 
 import { shallow } from 'enzyme';
 import React from 'react';
-import IoChevronRight from 'react-icons/lib/io/chevron-right';
-import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
+import { FaChevronRight } from 'react-icons/fa';
+import { IoIosArrowDown } from 'react-icons/io';
 
 import { mapDispatchToProps, mapStateToProps, UnconnectedSpanTreeOffset } from './SpanTreeOffset';
 import spanAncestorIdsSpy from '../../../utils/span-ancestor-ids';
@@ -108,24 +108,24 @@ describe('SpanTreeOffset', () => {
 
     it('does not render icon if props.span.hasChildren is false', () => {
       wrapper.setProps({ span: { ...props.span, hasChildren: false } });
-      expect(wrapper.find(IoChevronRight).length).toBe(0);
+      expect(wrapper.find(FaChevronRight).length).toBe(0);
       expect(wrapper.find(IoIosArrowDown).length).toBe(0);
     });
 
     it('does not render icon if props.span.hasChildren is true and showChildrenIcon is false', () => {
       wrapper.setProps({ showChildrenIcon: false });
-      expect(wrapper.find(IoChevronRight).length).toBe(0);
+      expect(wrapper.find(FaChevronRight).length).toBe(0);
       expect(wrapper.find(IoIosArrowDown).length).toBe(0);
     });
 
     it('renders IoChevronRight if props.span.hasChildren is true and props.childrenVisible is false', () => {
-      expect(wrapper.find(IoChevronRight).length).toBe(1);
+      expect(wrapper.find(FaChevronRight).length).toBe(1);
       expect(wrapper.find(IoIosArrowDown).length).toBe(0);
     });
 
     it('renders IoIosArrowDown if props.span.hasChildren is true and props.childrenVisible is true', () => {
       wrapper.setProps({ childrenVisible: true });
-      expect(wrapper.find(IoChevronRight).length).toBe(0);
+      expect(wrapper.find(FaChevronRight).length).toBe(0);
       expect(wrapper.find(IoIosArrowDown).length).toBe(1);
     });
 
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.tsx
index da70715e7b..20dfc3f097 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.tsx
@@ -15,8 +15,8 @@
 import React from 'react';
 import cx from 'classnames';
 import _get from 'lodash/get';
-import IoChevronRight from 'react-icons/lib/io/chevron-right';
-import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
+import { FaChevronRight } from 'react-icons/fa';
+import { IoIosArrowDown } from 'react-icons/io';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
@@ -99,7 +99,7 @@ export class UnconnectedSpanTreeOffset extends React.PureComponent<TProps> {
     const { hasChildren, spanID } = span;
     const wrapperProps = hasChildren ? { onClick, role: 'switch', 'aria-checked': childrenVisible } : null;
     const icon =
-      showChildrenIcon && hasChildren && (childrenVisible ? <IoIosArrowDown /> : <IoChevronRight />);
+      showChildrenIcon && hasChildren && (childrenVisible ? <IoIosArrowDown /> : <FaChevronRight />);
     return (
       <span className={`SpanTreeOffset ${hasChildren ? 'is-parent' : ''}`} {...wrapperProps}>
         {this.ancestorIds.map(ancestorId => (
diff --git a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.test.js b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.test.js
index 3dae6d99ea..fa0f53b8e9 100644
--- a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.test.js
+++ b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.test.js
@@ -15,7 +15,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { FilterOutlined } from '@ant-design/icons';
-import FaFilter from 'react-icons/lib/fa/filter.js';
+import { FaFilter } from 'react-icons/fa';
 
 import ExamplesLink from '../ExamplesLink';
 import DetailTableDropdown from './DetailTableDropdown';
diff --git a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.tsx b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.tsx
index bde85fd80c..6404cd30f1 100644
--- a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.tsx
+++ b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.tsx
@@ -15,7 +15,7 @@
 import * as React from 'react';
 import { Table } from 'antd';
 import { FilterOutlined } from '@ant-design/icons';
-import FaFilter from 'react-icons/lib/fa/filter.js';
+import { FaFilter } from 'react-icons/fa';
 import _isEmpty from 'lodash/isEmpty';
 
 import ExamplesLink, { TExample } from '../ExamplesLink';
diff --git a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTableDropdown.tsx b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTableDropdown.tsx
index 32214bb759..0cf7b6b44b 100644
--- a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTableDropdown.tsx
+++ b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTableDropdown.tsx
@@ -14,9 +14,8 @@
 
 import * as React from 'react';
 import { Button, Tooltip } from 'antd';
-import FaCheck from 'react-icons/lib/fa/check.js';
-import FaTrash from 'react-icons/lib/fa/trash.js';
-import TiCancel from 'react-icons/lib/ti/cancel.js';
+import { FaCheck, FaTrash } from 'react-icons/fa';
+import { TiCancel } from 'react-icons/ti';
 
 import FilteredList from '../FilteredList';
 
diff --git a/packages/jaeger-ui/src/components/common/DetailsCard/index.tsx b/packages/jaeger-ui/src/components/common/DetailsCard/index.tsx
index 74da3cfc45..0507c736cb 100644
--- a/packages/jaeger-ui/src/components/common/DetailsCard/index.tsx
+++ b/packages/jaeger-ui/src/components/common/DetailsCard/index.tsx
@@ -14,7 +14,7 @@
 
 import * as React from 'react';
 import cx from 'classnames';
-import MdKeyboardArrowDown from 'react-icons/lib/md/keyboard-arrow-down';
+import { MdKeyboardArrowDown } from 'react-icons/md';
 
 import { TColumnDefs, TDetails, TRow } from './types';
 import DetailTable from './DetailTable';
diff --git a/packages/jaeger-ui/src/components/common/FilteredList/index.tsx b/packages/jaeger-ui/src/components/common/FilteredList/index.tsx
index 9518bad5f3..0d6629a5ac 100644
--- a/packages/jaeger-ui/src/components/common/FilteredList/index.tsx
+++ b/packages/jaeger-ui/src/components/common/FilteredList/index.tsx
@@ -16,7 +16,7 @@ import * as React from 'react';
 import { Checkbox, Tooltip } from 'antd';
 import _debounce from 'lodash/debounce';
 import matchSorter from 'match-sorter';
-import IoIosSearch from 'react-icons/lib/io/ios-search';
+import { IoIosSearch } from 'react-icons/io';
 import { FixedSizeList as VList, ListOnItemsRenderedProps, ListOnScrollProps } from 'react-window';
 import { Key as EKey } from 'ts-key-enum';
 
diff --git a/packages/jaeger-ui/src/components/common/NameSelector.tsx b/packages/jaeger-ui/src/components/common/NameSelector.tsx
index a247de108f..3cccf792f6 100644
--- a/packages/jaeger-ui/src/components/common/NameSelector.tsx
+++ b/packages/jaeger-ui/src/components/common/NameSelector.tsx
@@ -16,7 +16,7 @@ import * as React from 'react';
 import { Popover } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
 import cx from 'classnames';
-import IoChevronDown from 'react-icons/lib/io/chevron-down';
+import { IoChevronDown } from 'react-icons/io5';
 
 import BreakableText from './BreakableText';
 import FilteredList from './FilteredList';
diff --git a/packages/jaeger-ui/src/components/common/NewWindowIcon.tsx b/packages/jaeger-ui/src/components/common/NewWindowIcon.tsx
index e4142d13d8..8841a1650a 100644
--- a/packages/jaeger-ui/src/components/common/NewWindowIcon.tsx
+++ b/packages/jaeger-ui/src/components/common/NewWindowIcon.tsx
@@ -14,7 +14,7 @@
 
 import React from 'react';
 import cx from 'classnames';
-import IoAndroidOpen from 'react-icons/lib/io/android-open';
+import { IoOpenOutline } from 'react-icons/io5';
 
 import './NewWindowIcon.css';
 
@@ -25,7 +25,7 @@ type Props = {
 export default function NewWindowIcon(props: Props) {
   const { isLarge, ...rest } = props;
   const cls = cx('NewWindowIcon', { 'is-large': isLarge });
-  return <IoAndroidOpen className={cls} {...rest} />;
+  return <IoOpenOutline className={cls} {...rest} />;
 }
 
 NewWindowIcon.defaultProps = {
diff --git a/yarn.lock b/yarn.lock
index 3bad0f148b..725aebbea1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2552,19 +2552,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-icon-base@*":
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/@types/react-icon-base/-/react-icon-base-2.1.3.tgz#0faf840b854a9dbc3fa6fe1935c7c40eb4153114"
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-icons@2.2.7":
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/@types/react-icons/-/react-icons-2.2.7.tgz#ed0a767293ba827f26552504714eebbd80403fc1"
-  dependencies:
-    "@types/react" "*"
-    "@types/react-icon-base" "*"
-
 "@types/react-redux@^5.0.6":
   version "5.0.21"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-5.0.21.tgz#98a3a371dfc22c894889f660d7515717639d20f4"
@@ -10493,15 +10480,10 @@ react-helmet@^6.1.0:
     react-fast-compare "^3.1.1"
     react-side-effect "^2.1.0"
 
-react-icon-base@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.1.0.tgz#a196e33fdf1e7aaa1fda3aefbb68bdad9e82a79d"
-
-react-icons@2.2.7:
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-2.2.7.tgz#d7860826b258557510dac10680abea5ca23cf650"
-  dependencies:
-    react-icon-base "2.1.0"
+react-icons@^4.10.1:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.10.1.tgz#3f3b5eec1f63c1796f6a26174a1091ca6437a500"
+  integrity sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==
 
 react-input-autosize@^2.1.2:
   version "2.2.1"

From 378a4aeb38691221ba47a8b86e5af63bbb17fd6e Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Tue, 22 Aug 2023 21:17:56 +0530
Subject: [PATCH 2/2] update snapshots

Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
---
 .../__snapshots__/index.test.js.snap          | 18 ++++++++---------
 .../__snapshots__/Selector.test.js.snap       | 20 +++++++++----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/__snapshots__/index.test.js.snap
index 4de8299027..bbe003cbe2 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/__snapshots__/index.test.js.snap
+++ b/packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/__snapshots__/index.test.js.snap
@@ -173,7 +173,7 @@ exports[`<DdgNodeContent> omits the operation if it is null 1`] = `
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <IoAndroidLocate />
+        <IoLocate />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -309,7 +309,7 @@ exports[`<DdgNodeContent> omits the operation if it is null 2`] = `
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <IoAndroidLocate />
+        <IoLocate />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -460,7 +460,7 @@ exports[`<DdgNodeContent> renders correctly when decorationValue is a string 1`]
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <IoAndroidLocate />
+        <IoLocate />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -611,7 +611,7 @@ exports[`<DdgNodeContent> renders correctly when decorationValue is a string 2`]
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <IoAndroidLocate />
+        <IoLocate />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -762,7 +762,7 @@ exports[`<DdgNodeContent> renders correctly when given decorationProgressbar 1`]
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <IoAndroidLocate />
+        <IoLocate />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -916,7 +916,7 @@ exports[`<DdgNodeContent> renders correctly when given decorationProgressbar 2`]
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <IoAndroidLocate />
+        <IoLocate />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -1067,7 +1067,7 @@ exports[`<DdgNodeContent> renders correctly when isFocalNode = true and focalNod
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <IoAndroidLocate />
+        <IoLocate />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -1296,7 +1296,7 @@ exports[`<DdgNodeContent> renders the number of operations if there are multiple
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <IoAndroidLocate />
+        <IoLocate />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -1469,7 +1469,7 @@ exports[`<DdgNodeContent> renders the number of operations if there are multiple
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <IoAndroidLocate />
+        <IoLocate />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/__snapshots__/Selector.test.js.snap b/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/__snapshots__/Selector.test.js.snap
index 4bde23966a..b90444ac3f 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/__snapshots__/Selector.test.js.snap
+++ b/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/__snapshots__/Selector.test.js.snap
@@ -23,7 +23,7 @@ exports[`Selector renders buttons with expected text and classNames 1`] = `
         </button>
       </React.Fragment>,
       <React.Fragment>
-        <IoChevronRight
+        <FaChevronRight
           className="HopsSelector--Selector--ChevronRight is-partial"
         />
         <button
@@ -35,7 +35,7 @@ exports[`Selector renders buttons with expected text and classNames 1`] = `
         </button>
       </React.Fragment>,
       <React.Fragment>
-        <IoChevronRight
+        <FaChevronRight
           className="HopsSelector--Selector--ChevronRight is-full"
         />
         <button
@@ -47,7 +47,7 @@ exports[`Selector renders buttons with expected text and classNames 1`] = `
         </button>
       </React.Fragment>,
       <React.Fragment>
-        <IoChevronRight
+        <FaChevronRight
           className="HopsSelector--Selector--ChevronRight is-empty"
         />
         <button
@@ -59,7 +59,7 @@ exports[`Selector renders buttons with expected text and classNames 1`] = `
         </button>
       </React.Fragment>,
       <React.Fragment>
-        <IoChevronRight
+        <FaChevronRight
           className="HopsSelector--Selector--ChevronRight is-empty"
         />
         <button
@@ -91,7 +91,7 @@ exports[`Selector renders buttons with expected text and classNames 1`] = `
   <span
     className="HopsSelector--Selector"
   >
-    <FaSortAmountAsc
+    <ImSortAmountAsc
       className="HopsSelector--Selector--AscIcon is-Down"
     />
     Downstream hops
@@ -153,7 +153,7 @@ exports[`Selector renders upstream hops with negative distance correctly 1`] = `
         </button>
       </React.Fragment>,
       <React.Fragment>
-        <IoChevronRight
+        <FaChevronRight
           className="HopsSelector--Selector--ChevronRight is-partial"
         />
         <button
@@ -165,7 +165,7 @@ exports[`Selector renders upstream hops with negative distance correctly 1`] = `
         </button>
       </React.Fragment>,
       <React.Fragment>
-        <IoChevronRight
+        <FaChevronRight
           className="HopsSelector--Selector--ChevronRight is-full"
         />
         <button
@@ -177,7 +177,7 @@ exports[`Selector renders upstream hops with negative distance correctly 1`] = `
         </button>
       </React.Fragment>,
       <React.Fragment>
-        <IoChevronRight
+        <FaChevronRight
           className="HopsSelector--Selector--ChevronRight is-empty"
         />
         <button
@@ -189,7 +189,7 @@ exports[`Selector renders upstream hops with negative distance correctly 1`] = `
         </button>
       </React.Fragment>,
       <React.Fragment>
-        <IoChevronRight
+        <FaChevronRight
           className="HopsSelector--Selector--ChevronRight is-empty"
         />
         <button
@@ -221,7 +221,7 @@ exports[`Selector renders upstream hops with negative distance correctly 1`] = `
   <span
     className="HopsSelector--Selector"
   >
-    <FaSortAmountAsc
+    <ImSortAmountAsc
       className="HopsSelector--Selector--AscIcon is-Up"
     />
     Upstream hops