Replaced all uncontroversial icons from various icon sets to io5 (#1771)

Signed-off-by: Priyanshu Sharma [[email protected]](mailto:[email protected]) ## Which problem is this PR solving? - Resolves #1723 ## Description of the changes - In this pull request, I have replaced all uncontroversial icons from various icon sets with the io5 icon set, enhancing the visual consistency and user experience across the platform. ## 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: priyanshu-kun <[email protected]> Signed-off-by: Yuri Shkuro <[email protected]> Co-authored-by: Yuri Shkuro <[email protected]>
jaegertracing · Sep 19, 2023 · 284075b · 284075b
1 parent fadb3dc
commit 284075b
Show file tree

Hide file tree

Showing 52 changed files with 635 additions and 412 deletions.
diff --git a/packages/jaeger-ui/src/components/App/TopNav.css b/packages/jaeger-ui/src/components/App/TopNav.css
@@ -0,0 +1,32 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Licensed 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.
+*/
+
+.Dropdown--icon-container {
+  display: flex;
+  color: white;
+  margin-right: 30px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.Dropdown--icon-container:hover {
+  color: white;
+}
+
+.Dropdown--icon-container .Dropdown--icon {
+  margin-left: 5px;
+}
diff --git a/packages/jaeger-ui/src/components/App/TopNav.tsx b/packages/jaeger-ui/src/components/App/TopNav.tsx
@@ -14,7 +14,7 @@
 
 import React from 'react';
 import { Dropdown, Menu } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
+import { IoChevronDown } from 'react-icons/io5';
 import _has from 'lodash/has';
 import { connect } from 'react-redux';
 import { RouteComponentProps, Link, withRouter } from 'react-router-dom';
@@ -31,6 +31,8 @@ import { ConfigMenuItem, ConfigMenuGroup } from '../../types/config';
 import { getConfigValue } from '../../utils/config/get-config';
 import prefixUrl from '../../utils/prefix-url';
 
+import './TopNav.css';
+
 type Props = RouteComponentProps<any> & ReduxState;
 
 const NAV_LINKS = [
@@ -96,9 +98,9 @@ function getItem(item: ConfigMenuItem) {
 function CustomNavDropdown({ label, items }: ConfigMenuGroup) {
   const menuItems = <Menu>{items.map(getItem)}</Menu>;
   return (
-    <Dropdown overlay={menuItems} overlayStyle={{ paddingRight: '20px' }} placement="bottomRight">
-      <a style={{ color: 'white' }}>
-        {label} <DownOutlined style={{ paddingRight: '30px' }} />
+    <Dropdown overlay={menuItems} placement="bottomRight">
+      <a className="Dropdown--icon-container">
+        {label} <IoChevronDown className="Dropdown--icon" />
       </a>
     </Dropdown>
   );

diff --git a/packages/jaeger-ui/src/components/App/TraceIDSearchInput.tsx b/packages/jaeger-ui/src/components/App/TraceIDSearchInput.tsx
@@ -17,7 +17,7 @@ import * as React from 'react';
 import { Form } from '@ant-design/compatible';
 import '@ant-design/compatible/assets/index.css';
 import { Input } from 'antd';
-import { SearchOutlined } from '@ant-design/icons';
+import { IoSearch } from 'react-icons/io5';
 import { RouteComponentProps, Router as RouterHistory, withRouter } from 'react-router-dom';
 
 import { getUrl } from '../TracePage/url';
@@ -50,7 +50,7 @@ class TraceIDSearchInput extends React.PureComponent<Props> {
           data-testid="idInput"
           name="idInput"
           placeholder="Lookup by Trace ID..."
-          prefix={<SearchOutlined />}
+          prefix={<IoSearch />}
         />
       </Form>
     );

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
@@ -189,7 +189,7 @@ exports[`<DdgNodeContent> omits the operation if it is null 1`] = `
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <MdVisibilityOff />
+        <IoEyeOff />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -325,7 +325,7 @@ exports[`<DdgNodeContent> omits the operation if it is null 2`] = `
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <MdVisibilityOff />
+        <IoEyeOff />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -476,7 +476,7 @@ exports[`<DdgNodeContent> renders correctly when decorationValue is a string 1`]
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <MdVisibilityOff />
+        <IoEyeOff />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -627,7 +627,7 @@ exports[`<DdgNodeContent> renders correctly when decorationValue is a string 2`]
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <MdVisibilityOff />
+        <IoEyeOff />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -778,7 +778,7 @@ exports[`<DdgNodeContent> renders correctly when given decorationProgressbar 1`]
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <MdVisibilityOff />
+        <IoEyeOff />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -932,7 +932,7 @@ exports[`<DdgNodeContent> renders correctly when given decorationProgressbar 2`]
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <MdVisibilityOff />
+        <IoEyeOff />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -1083,7 +1083,7 @@ exports[`<DdgNodeContent> renders correctly when isFocalNode = true and focalNod
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <MdVisibilityOff />
+        <IoEyeOff />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -1312,7 +1312,7 @@ exports[`<DdgNodeContent> renders the number of operations if there are multiple
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <MdVisibilityOff />
+        <IoEyeOff />
       </span>
       <span
         className="DdgNodeContent--actionsItemText"
@@ -1480,7 +1480,7 @@ exports[`<DdgNodeContent> renders the number of operations if there are multiple
       <span
         className="DdgNodeContent--actionsItemIconWrapper"
       >
-        <MdVisibilityOff />
+        <IoEyeOff />
       </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,7 @@ import * as React from 'react';
 import { Checkbox, Popover } from 'antd';
 import cx from 'classnames';
 import { TLayoutVertex } from '@jaegertracing/plexus/lib/types';
-import { MdVisibilityOff } from 'react-icons/md';
-import { IoLocate } from 'react-icons/io5';
+import { IoLocate, IoEyeOff } from 'react-icons/io5';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
@@ -334,7 +333,7 @@ export class UnconnectedDdgNodeContent extends React.PureComponent<TProps, TStat
           {!isFocalNode && (
             <a className="DdgNodeContent--actionsItem" onClick={this.hideVertex} role="button">
               <span className="DdgNodeContent--actionsItemIconWrapper">
-                <MdVisibilityOff />
+                <IoEyeOff />
               </span>
               <span className="DdgNodeContent--actionsItemText">Hide node</span>
             </a>

diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx b/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx
@@ -15,7 +15,7 @@
 import React, { PureComponent } from 'react';
 import { Popover } from 'antd';
 import { ImSortAmountAsc } from 'react-icons/im';
-import { FaChevronRight } from 'react-icons/fa';
+import { IoChevronForward } from 'react-icons/io5';
 
 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) && <FaChevronRight className={`${CLASSNAME}--ChevronRight is-${fullness}`} />}
+        {Boolean(showChevron) && <IoChevronForward className={`${CLASSNAME}--ChevronRight is-${fullness}`} />}
         <button
           className={`${CLASSNAME}--btn is-${fullness} ${CLASSNAME}--${suffix}`}
           type="button"

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>
-        <FaChevronRight
+        <IoChevronForward
           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>
-        <FaChevronRight
+        <IoChevronForward
           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>
-        <FaChevronRight
+        <IoChevronForward
           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>
-        <FaChevronRight
+        <IoChevronForward
           className="HopsSelector--Selector--ChevronRight is-empty"
         />
         <button
@@ -148,7 +148,7 @@ exports[`Selector renders upstream hops with negative distance correctly 1`] = `
         </button>
       </React.Fragment>,
       <React.Fragment>
-        <FaChevronRight
+        <IoChevronForward
           className="HopsSelector--Selector--ChevronRight is-partial"
         />
         <button
@@ -160,7 +160,7 @@ exports[`Selector renders upstream hops with negative distance correctly 1`] = `
         </button>
       </React.Fragment>,
       <React.Fragment>
-        <FaChevronRight
+        <IoChevronForward
           className="HopsSelector--Selector--ChevronRight is-full"
         />
         <button
@@ -172,7 +172,7 @@ exports[`Selector renders upstream hops with negative distance correctly 1`] = `
         </button>
       </React.Fragment>,
       <React.Fragment>
-        <FaChevronRight
+        <IoChevronForward
           className="HopsSelector--Selector--ChevronRight is-empty"
         />
         <button
@@ -184,7 +184,7 @@ exports[`Selector renders upstream hops with negative distance correctly 1`] = `
         </button>
       </React.Fragment>,
       <React.Fragment>
-        <FaChevronRight
+        <IoChevronForward
           className="HopsSelector--Selector--ChevronRight is-empty"
         />
         <button

diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Header/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/DeepDependencies/Header/__snapshots__/index.test.js.snap
@@ -33,7 +33,7 @@ exports[`<Header> renders the hops selector if distanceToPathElems is provided 1
         onClick={[Function]}
         role="button"
       >
-        <ForwardRef(SearchOutlined)
+        <IoSearch
           className="DdgHeader--uiFindSearchIcon"
         />
         <withRouter(Connect(UnconnectedUiFindInput))
@@ -99,7 +99,7 @@ exports[`<Header> renders the operation selector iff a service is selected 1`] =
         onClick={[Function]}
         role="button"
       >
-        <ForwardRef(SearchOutlined)
+        <IoSearch
           className="DdgHeader--uiFindSearchIcon"
         />
         <withRouter(Connect(UnconnectedUiFindInput))
@@ -169,7 +169,7 @@ exports[`<Header> renders the operation selector iff a service is selected 2`] =
         onClick={[Function]}
         role="button"
       >
-        <ForwardRef(SearchOutlined)
+        <IoSearch
           className="DdgHeader--uiFindSearchIcon"
         />
         <withRouter(Connect(UnconnectedUiFindInput))
@@ -223,7 +223,7 @@ exports[`<Header> renders with minimal props 1`] = `
         onClick={[Function]}
         role="button"
       >
-        <ForwardRef(SearchOutlined)
+        <IoSearch
           className="DdgHeader--uiFindSearchIcon"
         />
         <withRouter(Connect(UnconnectedUiFindInput))

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,7 +15,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Tooltip } from 'antd';
-import { MdVisibility, MdVisibilityOff } from 'react-icons/md';
+import { IoEye, IoEyeOff } from 'react-icons/io5';
 
 import Header from './index';
 import HopsSelector from './HopsSelector';
@@ -119,16 +119,16 @@ describe('<Header>', () => {
       expect(getMatchesInfo().text()).not.toEqual(expectedHiddenCount);
       expect(getTooltip().prop('title')).toBe(expectedTitle);
       expect(getBtn().prop('disabled')).toBe(true);
-      expect(wrapper.find(MdVisibility)).toHaveLength(1);
-      expect(wrapper.find(MdVisibilityOff)).toHaveLength(0);
+      expect(wrapper.find(IoEye)).toHaveLength(1);
+      expect(wrapper.find(IoEyeOff)).toHaveLength(0);
 
       wrapper.setProps({ hiddenUiFindMatches: new Set() });
       expect(getMatchesInfo().text()).toEqual(expectedFindCount);
       expect(getMatchesInfo().text()).not.toEqual(expectedHiddenCount);
       expect(getTooltip().prop('title')).toBe(expectedTitle);
       expect(getBtn().prop('disabled')).toBe(true);
-      expect(wrapper.find(MdVisibility)).toHaveLength(1);
-      expect(wrapper.find(MdVisibilityOff)).toHaveLength(0);
+      expect(wrapper.find(IoEye)).toHaveLength(1);
+      expect(wrapper.find(IoEyeOff)).toHaveLength(0);
     });
 
     it('renders both visible and hidden counts if both are provided', () => {
@@ -138,8 +138,8 @@ describe('<Header>', () => {
       expect(getMatchesInfo().text()).toEqual(expectedHiddenCount);
       expect(getTooltip().prop('title')).toBe(expectedHiddenTitle);
       expect(getBtn().prop('disabled')).toBe(false);
-      expect(wrapper.find(MdVisibility)).toHaveLength(1);
-      expect(wrapper.find(MdVisibilityOff)).toHaveLength(1);
+      expect(wrapper.find(IoEye)).toHaveLength(1);
+      expect(wrapper.find(IoEyeOff)).toHaveLength(1);
     });
 
     it('renders 0 with correct tooltip if there are no visible nor hidden matches', () => {
@@ -149,8 +149,8 @@ describe('<Header>', () => {
       expect(getMatchesInfo().text()).toBe('0');
       expect(getTooltip().prop('title')).toBe(expectedTitle);
       expect(getBtn().prop('disabled')).toBe(true);
-      expect(wrapper.find(MdVisibility)).toHaveLength(0);
-      expect(wrapper.find(MdVisibilityOff)).toHaveLength(0);
+      expect(wrapper.find(IoEye)).toHaveLength(0);
+      expect(wrapper.find(IoEyeOff)).toHaveLength(0);
     });
 
     it('renders 0 with correct tooltip if there are no matches but there are hidden matches', () => {
@@ -161,8 +161,8 @@ describe('<Header>', () => {
       expect(getMatchesInfo().text()).toEqual(expectedHiddenCount);
       expect(getTooltip().prop('title')).toBe(expectedHiddenTitle);
       expect(getBtn().prop('disabled')).toBe(false);
-      expect(wrapper.find(MdVisibility)).toHaveLength(1);
-      expect(wrapper.find(MdVisibilityOff)).toHaveLength(1);
+      expect(wrapper.find(IoEye)).toHaveLength(1);
+      expect(wrapper.find(IoEyeOff)).toHaveLength(1);
     });
 
     it('renders correct plurality in tooltip', () => {