Refactor Font Awesome icons in traceviewer-react-components

This allows them to be used in vscode-trace-extension Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>
EstFoisy · Apr 18, 2023 · 1acc299 · 1acc299
1 parent 7811eab
commit 1acc299
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 12 deletions.
diff --git a/...components/src/components/__tests__/__snapshots__/table-renderer-components.test.tsx.snap b/...components/src/components/__tests__/__snapshots__/table-renderer-components.test.tsx.snap
@@ -142,11 +142,23 @@ exports[`<TableOutputComponent /> Renders AG-Grid table with provided props & st
         >
           ...
         </span>
-        <i
-          class="fa fa-refresh fa-spin"
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-spinner fa-w-16 fa-spin "
+          data-icon="spinner"
+          data-prefix="fas"
+          focusable="false"
           id="00handleSpinner"
+          role="img"
           style="margin-top: 5px; visibility: hidden;"
-        />
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"
+            fill="currentColor"
+          />
+        </svg>
       </div>
     </div>
     <div

diff --git a/packages/react-components/src/components/abstract-output-component.tsx b/packages/react-components/src/components/abstract-output-component.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { OutputDescriptor } from 'tsp-typescript-client/lib/models/output-descriptor';
 import { TspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faBars, faSpinner, faThumbtack, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { TimeGraphUnitController } from 'timeline-chart/lib/time-graph-unit-controller';
 import { TimeRange } from 'traceviewer-base/lib/utils/time-range';
 import { OutputComponentStyle } from './utils/output-component-style';
@@ -125,9 +125,13 @@ export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S e
             <div ref={this.titleBarLabelRef} className='title-bar-label' title={outputTooltip} onClick={() => this.setFocus()}>
                 <span ref={this.titleRef}>{outputName}</span>
                 <span className={titleOverflown}>...</span>
-                <i id={this.getOutputComponentDomId() + 'handleSpinner'} className='fa fa-refresh fa-spin'
-                    style={{ marginTop: '5px', visibility: 'hidden'}} />
-                {this.props.pinned === true && <i title='Pinned View' className='fa fa-thumb-tack pin-view-icon' />}
+                <FontAwesomeIcon
+                    id={this.getOutputComponentDomId() + 'handleSpinner'}
+                    icon={faSpinner}
+                    spin
+                    style={{ marginTop: '5px', visibility: 'hidden'}}
+                />
+                {this.props.pinned === true && <FontAwesomeIcon icon={faThumbtack} title='Pinned View' className='pin-view-icon'/>}
             </div>
         </React.Fragment>;
     }

diff --git a/packages/react-components/src/components/datatree-output-component.tsx b/packages/react-components/src/components/datatree-output-component.tsx
@@ -13,6 +13,8 @@ import ColumnHeader from './utils/filter-tree/column-header';
 import debounce from 'lodash.debounce';
 import { signalManager } from 'traceviewer-base/lib/signals/signal-manager';
 import '../../style/react-contextify.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 type DataTreeOutputProps = AbstractOutputProps & {
 };
@@ -124,7 +126,11 @@ export class DataTreeOutputComponent extends AbstractOutputComponent<AbstractOut
                 </div>
                 :
                 <div tabIndex={0} id={this.props.traceId + this.props.outputDescriptor.id + 'focusContainer'} className='analysis-running-main-area'>
-                    <i className='fa fa-refresh fa-spin' style={{ marginRight: '5px' }} />
+                    <FontAwesomeIcon
+                        icon={faSpinner}
+                        spin
+                        style={{ marginRight: '5px' }}
+                    />
                     <span>Analysis running</span>
                 </div>
             }

diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx
@@ -30,6 +30,8 @@ import { TimeGraphAnnotationComponent } from 'timeline-chart/lib/components/time
 import { Entry } from 'tsp-typescript-client';
 import { isEqual } from 'lodash';
 import { convertColorStringToHexNumber } from 'traceviewer-base/lib/utils/convert-color-string-to-hex';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 type TimegraphOutputProps = AbstractOutputProps & {
     addWidgetResizeHandler: (handler: () => void) => void;
@@ -436,8 +438,9 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
                 </div> :
                 <div className='analysis-running'>
                     {(
-                        <i
-                            className='fa fa-refresh fa-spin'
+                        <FontAwesomeIcon
+                            icon={faSpinner}
+                            spin
                             style={{ marginRight: '5px' }}
                         />
                     )}

diff --git a/packages/react-components/src/components/xy-output-component.tsx b/packages/react-components/src/components/xy-output-component.tsx
@@ -8,6 +8,8 @@ import { scaleLinear } from 'd3-scale';
 import { AbstractXYOutputComponent, AbstractXYOutputState, FLAG_PAN_LEFT, FLAG_PAN_RIGHT, FLAG_ZOOM_IN, FLAG_ZOOM_OUT, MouseButton } from './abstract-xy-output-component';
 import { TimeRange } from 'traceviewer-base/src/utils/time-range';
 import { validateNumArray } from './utils/filter-tree/utils';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 export class XYOutputComponent extends AbstractXYOutputComponent<AbstractOutputProps, AbstractXYOutputState> {
     private mousePanningStart = BigInt(0);
@@ -64,7 +66,11 @@ export class XYOutputComponent extends AbstractXYOutputComponent<AbstractOutputP
                     style={{ width: this.getChartWidth() }}
                 >
                     <div>
-                        <i className='fa fa-refresh fa-spin' style={{ marginRight: '5px' }} />
+                        <FontAwesomeIcon
+                            icon={faSpinner}
+                            spin
+                            style={{ marginRight: '5px' }}
+                        />
                         <span>Analysis running</span>
                     </div>
                 </div>

diff --git a/packages/react-components/src/components/xy-output-overview-component.tsx b/packages/react-components/src/components/xy-output-overview-component.tsx
@@ -7,6 +7,8 @@ import { AbstractXYOutputState, MouseButton } from './abstract-xy-output-compone
 import { AbstractXYOutputComponent, FLAG_PAN_LEFT, FLAG_PAN_RIGHT, FLAG_ZOOM_IN, FLAG_ZOOM_OUT, XY_OUTPUT_KEY_ACTIONS } from './abstract-xy-output-component';
 import { Experiment } from 'tsp-typescript-client';
 import { TraceOverviewSelectionDialogComponent } from './trace-overview-selection-dialog-component';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 const COLOR = {
     SELECTION_RANGE: '#259fd8',
@@ -88,7 +90,11 @@ export class XYOutputOverviewComponent extends AbstractXYOutputComponent<XYOutpu
                     style={{ width: this.getChartWidth() }}
                 >
                     <div>
-                        <i className='fa fa-refresh fa-spin' style={{ marginRight: '5px' }} />
+                        <FontAwesomeIcon
+                            icon={faSpinner}
+                            spin
+                            style={{ marginRight: '5px' }}
+                        />
                         <span> Analysis running </span>
                     </div>
                 </div>