Upgrade react-icons from 2.2.7 to 4.10.1 (#1721)

## 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 - [x] I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md - [x] I have signed all commits - [x] I have added unit tests for the new functionality - [x] I have run lint and test steps successfully - for `jaeger`: `make lint test` - for `jaeger-ui`: `yarn lint` and `yarn test` --------- Signed-off-by: Ansh Goyal <[email protected]>
jaegertracing · Aug 22, 2023 · a01f444 · a01f444
1 parent 843d88e
commit a01f444
Show file tree

Hide file tree

Showing 30 changed files with 79 additions and 107 deletions.
diff --git 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/...-ui/src/components/DeepDependencies/Graph/DdgNodeContent/__snapshots__/index.test.js.snap b/...-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/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
@@ -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
@@ -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
@@ -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/...i/src/components/DeepDependencies/Header/HopsSelector/__snapshots__/Selector.test.js.snap b/...i/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

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}