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

refactor(icons): remove fontawesome EE-4459

refactor(icon) replace feather with lucide EE-4472

app/react/components/datatables/ActionsMenu.tsx

@@ -1,6 +1,9 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
 import { Menu, MenuList, MenuButton } from '@reach/menu-button';
+import { MoreVertical } from 'lucide-react';
+
+import { Icon } from '@@/Icon';
 
 import styles from './ActionsMenu.module.css';
 
@@ -19,7 +22,7 @@ export function ActionsMenu({ children }: Props) {
               isExpanded && styles.actionsActive
             )}
           >
-            <i className="fa fa-ellipsis-v" aria-hidden="true" />
+            <Icon icon={MoreVertical} />
           </MenuButton>
           <MenuList>
             <div className={styles.tableActionsMenuList}>{children}</div>

app/react/components/datatables/ColumnVisibilityMenu.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { Menu, MenuButton, MenuList } from '@reach/menu-button';
 import { ColumnInstance } from 'react-table';
-import { Columns } from 'react-feather';
+import { Columns } from 'lucide-react';
 
 import { Checkbox } from '@@/form-components/Checkbox';
 

app/react/components/datatables/ExpandingCell.tsx

@@ -1,5 +1,8 @@
 import { PropsWithChildren } from 'react';
 import { Row } from 'react-table';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+
+import { Icon } from '@@/Icon';
 
 import styles from './ExpandingCell.module.css';
 
@@ -15,22 +18,15 @@ export function ExpandingCell<
     <>
       {showExpandArrow && (
         <button type="button" className={styles.expandButton}>
-          <i
+          <Icon
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...row.getToggleRowExpandedProps()}
-            className={`fas ${arrowClass(row.isExpanded)} space-right`}
-            aria-hidden="true"
+            icon={row.isExpanded ? ChevronDown : ChevronRight}
+            className="mr-1"
           />
         </button>
       )}
       {children}
     </>
   );
-
-  function arrowClass(isExpanded: boolean) {
-    if (isExpanded) {
-      return 'fa-angle-down';
-    }
-    return 'fa-angle-right';
-  }
 }

app/react/components/datatables/Filter.tsx

@@ -2,6 +2,9 @@ import clsx from 'clsx';
 import { useMemo } from 'react';
 import { Menu, MenuButton, MenuPopover } from '@reach/menu-button';
 import { ColumnInstance } from 'react-table';
+import { Check, Filter } from 'lucide-react';
+
+import { Icon } from '@@/Icon';
 
 export const DefaultFilter = filterHOC('Filter by state');
 
@@ -25,17 +28,12 @@ export function MultipleSelectionFilter({
     <div>
       <Menu>
         <MenuButton
-          className={clsx('table-filter', { 'filter-active': enabled })}
+          className={clsx('table-filter flex items-center', {
+            'filter-active': enabled,
+          })}
         >
           Filter
-          <i
-            className={clsx(
-              'fa',
-              'space-left',
-              enabled ? 'fa-check' : 'fa-filter'
-            )}
-            aria-hidden="true"
-          />
+          <Icon icon={enabled ? Check : Filter} className="!ml-1" />
         </MenuButton>
         <MenuPopover className="dropdown-menu">
           <div className="tableMenu">

app/react/components/datatables/FilterSearchBar.tsx

@@ -1,4 +1,4 @@
-import { Search } from 'react-feather';
+import { Search } from 'lucide-react';
 
 import { useLocalStorage } from '@/react/hooks/useLocalStorage';
 
@@ -15,7 +15,7 @@ export function FilterSearchBar({
 }: Props) {
   return (
     <div className="searchBar items-center flex h-[34px]">
-      <Search className="searchIcon feather" />
+      <Search className="searchIcon lucide" />
       <input
         type="text"
         className="searchInput"

app/react/components/datatables/SearchBar.tsx

@@ -1,4 +1,4 @@
-import { Search } from 'react-feather';
+import { Search } from 'lucide-react';
 
 import { useLocalStorage } from '@/react/hooks/useLocalStorage';
 import { AutomationTestingProps } from '@/types';
@@ -20,7 +20,7 @@ export function SearchBar({
 
   return (
     <div className="searchBar items-center flex min-w-[90px]">
-      <Search className="searchIcon feather shrink-0" />
+      <Search className="searchIcon lucide shrink-0" />
       <input
         type="text"
         className="searchInput"

app/react/components/datatables/TableHeaderCell.tsx

@@ -76,6 +76,7 @@ function SortWrapper({
         <TableHeaderSortIcons
           sorted={isSorted}
           descending={isSorted && !!isSortedDesc}
+          className="ml-1"
         />
       </div>
     </button>

app/react/components/datatables/TableHeaderSortIcons.tsx

@@ -7,14 +7,15 @@ import styles from './TableHeaderSortIcons.module.css';
 interface Props {
   sorted: boolean;
   descending: boolean;
+  className?: string;
 }
 
-export function TableHeaderSortIcons({ sorted, descending }: Props) {
+export function TableHeaderSortIcons({ sorted, descending, className }: Props) {
   return (
-    <div className="flex flex-row no-wrap w-min-max">
+    <div className="flex flex-row no-wrap w-min-max align-middle">
       <SortDownIcon
         className={clsx(
-          'space-left',
+          className,
           sorted && !descending && styles.activeSortIcon,
           styles.sortIcon
         )}

app/react/components/datatables/TableSettingsMenu.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { Menu, MenuButton, MenuList } from '@reach/menu-button';
 import { PropsWithChildren, ReactNode } from 'react';
-import { MoreVertical } from 'react-feather';
+import { MoreVertical } from 'lucide-react';
 
 interface Props {
   quickActions?: ReactNode;

app/react/components/datatables/TableSettingsMenuAutoRefresh.tsx

@@ -1,7 +1,9 @@
 import clsx from 'clsx';
 import { useState } from 'react';
+import { Check } from 'lucide-react';
 
 import { Checkbox } from '@@/form-components/Checkbox';
+import { Icon } from '@@/Icon';
 
 import styles from './TableSettingsMenuAutoRefresh.module.css';
 
@@ -46,12 +48,7 @@ export function TableSettingsMenuAutoRefresh({ onChange, value }: Props) {
             )}
             onTransitionEnd={() => setIsCheckVisible(false)}
           >
-            <i
-              id="refreshRateChange"
-              className="fa fa-check green-icon"
-              aria-hidden="true"
-              style={{ marginTop: '7px' }}
-            />
+            <Icon icon={Check} className="!ml-1" mode="success" />
           </span>
         </div>
       )}

app/react/components/datatables/TableTitle.tsx

@@ -4,14 +4,12 @@ import { Icon } from '@@/Icon';
 
 interface Props {
   icon?: ReactNode | ComponentType<unknown>;
-  featherIcon?: boolean;
   label: string;
   description?: ReactNode;
 }
 
 export function TableTitle({
   icon,
-  featherIcon,
   label,
   children,
   description,
@@ -22,11 +20,7 @@ export function TableTitle({
         <div className="toolBarTitle">
           {icon && (
             <div className="widget-icon">
-              <Icon
-                icon={icon}
-                feather={featherIcon}
-                className="space-right feather"
-              />
+              <Icon icon={icon} className="space-right" />
             </div>
           )}
 

app/react/components/datatables/expand-column.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, ChevronUp } from 'react-feather';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 import { CellProps, Column, HeaderProps } from 'react-table';
 
 import { Button } from '@@/buttons';