refactor(icons): replace fa icons [EE-4459] (#7907)

refactor(icons): remove fontawesome EE-4459

refactor(icon) replace feather with lucide EE-4472

app/react/nomad/DashboardView/DashboardView.tsx

@@ -1,9 +1,12 @@
+import { List, Settings, Boxes, Gauge } from 'lucide-react';
+
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 
 import { DashboardItem } from '@@/DashboardItem';
 import { Widget, WidgetTitle, WidgetBody } from '@@/Widget';
 import { PageHeader } from '@@/PageHeader';
 import { DashboardGrid } from '@@/DashboardItem/DashboardGrid';
+import { Icon } from '@@/Icon';
 
 import { useDashboard } from './useDashboard';
 import { RunningStatus } from './RunningStatus';
@@ -25,7 +28,7 @@ export function DashboardView() {
       {dashboardQuery.isLoading ? (
         <div className="text-center" style={{ marginTop: '30%' }}>
           Connecting to the Edge environment...
-          <i className="fa fa-cog fa-spin space-left" />
+          <Icon icon={Settings} className="animate-spin-slow !ml-1" />
         </div>
       ) : (
         <>
@@ -33,10 +36,7 @@ export function DashboardView() {
             <div className="col-sm-12">
               {/* cluster info */}
               <Widget>
-                <WidgetTitle
-                  icon="fa-tachometer-alt"
-                  title="Cluster information"
-                />
+                <WidgetTitle icon={Gauge} title="Cluster information" />
                 <WidgetBody className="no-padding">
                   <table className="table">
                     <tbody>
@@ -56,19 +56,19 @@ export function DashboardView() {
               {/* jobs */}
               <DashboardItem
                 value={dashboardQuery.data?.JobCount}
-                icon="fa fa-th-list"
+                icon={List}
                 type="Nomad Job"
               />
               {/* groups */}
               <DashboardItem
                 value={dashboardQuery.data?.GroupCount}
-                icon="fa fa-list-alt"
+                icon={List}
                 type="Group"
               />
               {/* tasks */}
               <DashboardItem
                 value={dashboardQuery.data?.TaskCount}
-                icon="fa fa-cubes"
+                icon={Boxes}
                 type="Task"
               >
                 {/* running status of tasks */}

app/react/nomad/DashboardView/RunningStatus.tsx

@@ -1,3 +1,7 @@
+import { Power } from 'lucide-react';
+
+import { Icon } from '@@/Icon';
+
 interface Props {
   running: number;
   stopped: number;
@@ -7,17 +11,11 @@ export function RunningStatus({ running, stopped }: Props) {
   return (
     <div>
       <div>
-        <i
-          className="fa fa-power-off green-icon space-right"
-          aria-hidden="true"
-        />
+        <Icon icon={Power} mode="success" />
         {`${running || '-'} running`}
       </div>
       <div>
-        <i
-          className="fa fa-power-off red-icon space-right"
-          aria-hidden="true"
-        />
+        <Icon icon={Power} mode="danger" />
         {`${stopped || '-'} stopped`}
       </div>
     </div>

app/react/nomad/jobs/EventsView/EventsDatatable/EventsDatatable.tsx

@@ -1,3 +1,4 @@
+import { History } from 'lucide-react';
 import { useStore } from 'zustand';
 
 import { NomadEvent } from '@/react/nomad/types';
@@ -33,7 +34,7 @@ export function EventsDatatable({ data, isLoading }: EventsDatatableProps) {
       onSortByChange={settings.setSortBy}
       searchValue={search}
       onSearchChange={setSearch}
-      titleIcon="fa-history"
+      titleIcon={History}
       title="Events"
       totalCount={data.length}
       getRowId={(row) => `${row.Date}-${row.Message}-${row.Type}`}

app/react/nomad/jobs/JobsView/JobsDatatable/JobsDatatable.tsx

@@ -1,5 +1,5 @@
 import { useStore } from 'zustand';
-import { Clock } from 'react-feather';
+import { Clock } from 'lucide-react';
 
 import { Job } from '@/react/nomad/types';
 

app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/actions.tsx

@@ -1,4 +1,5 @@
 import { CellProps, Column } from 'react-table';
+import { Clock, FileText } from 'lucide-react';
 
 import { Task } from '@/react/nomad/types';
 
@@ -34,12 +35,12 @@ export function ActionsCell({ row }: CellProps<Task>) {
         title="Events"
         className="space-right"
       >
-        <Icon icon="clock" feather className="space-right icon" />
+        <Icon icon={Clock} className="space-right" />
       </Link>
 
       {/* logs */}
       <Link to="nomad.logs" params={params} title="Logs">
-        <Icon icon="file-text" feather className="space-right icon" />
+        <Icon icon={FileText} className="space-right" />
       </Link>
     </div>
   );

app/react/nomad/jobs/JobsView/JobsDatatable/actions/JobActions.tsx

@@ -1,4 +1,5 @@
 import { useMutation } from 'react-query';
+import { Trash2 } from 'lucide-react';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { Job } from '@/react/nomad/types';
@@ -25,8 +26,8 @@ export function JobActions({ selectedItems, refreshData }: Props) {
       disabled={selectedItems.length < 1 || mutation.isLoading}
       color="danger"
       onClick={handleDeleteClicked}
+      icon={Trash2}
     >
-      <i className="fa fa-trash-alt space-right" aria-hidden="true" />
       Remove
     </LoadingButton>
   );

app/react/nomad/jobs/JobsView/JobsDatatable/columns/actions.tsx

@@ -1,5 +1,5 @@
 import { CellProps, Column } from 'react-table';
-import { Clock } from 'react-feather';
+import { Clock } from 'lucide-react';
 
 import { Job } from '@/react/nomad/types';
 
@@ -19,7 +19,7 @@ export function ActionsCell({ row }: CellProps<Job>) {
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <div className="text-center" {...row.getToggleRowExpandedProps()}>
-      <Clock className="feather" />
+      <Clock className="lucide" />
     </div>
   );
 }