feat(ui): renovate the FDO devices list EE-3669 (#7231)

app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatable.tsx

@@ -12,7 +12,6 @@ import { useTableSettings } from '@@/datatables/useTableSettings';
 import { useRowSelect } from '@@/datatables/useRowSelect';
 import {
   Table,
-  TableActions,
   TableContainer,
   TableHeaderRow,
   TableRow,
@@ -78,14 +77,12 @@ export function FDOProfilesDatatable({
 
   return (
     <TableContainer>
-      <TableTitle icon="" label="Device Profiles" />
-
-      <TableActions>
+      <TableTitle icon="list" featherIcon label="Device Profiles">
         <FDOProfilesDatatableActions
           isFDOEnabled={isFDOEnabled}
           selectedItems={selectedFlatRows.map((row) => row.original)}
         />
-      </TableActions>
+      </TableTitle>
 
       <Table
         className={tableProps.className}

app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatableActions.tsx

@@ -27,8 +27,7 @@ export function FDOProfilesDatatableActions({
   return (
     <div className="actionBar">
       <Link to="portainer.endpoints.profile" className="space-left">
-        <Button disabled={!isFDOEnabled}>
-          <i className="fa fa-plus-circle space-right" aria-hidden="true" />
+        <Button disabled={!isFDOEnabled} icon="plus-circle" featherIcon>
           Add Profile
         </Button>
       </Link>
@@ -36,8 +35,9 @@ export function FDOProfilesDatatableActions({
       <Button
         disabled={!isFDOEnabled || selectedItems.length !== 1}
         onClick={() => onDuplicateProfileClick()}
+        icon="plus-circle"
+        featherIcon
       >
-        <i className="fa fa-plus-circle space-right" aria-hidden="true" />
         Duplicate
       </Button>
 
@@ -45,8 +45,9 @@ export function FDOProfilesDatatableActions({
         disabled={!isFDOEnabled || selectedItems.length < 1}
         color="danger"
         onClick={() => onDeleteProfileClick()}
+        icon="trash-2"
+        featherIcon
       >
-        <i className="fa fa-trash-alt space-right" aria-hidden="true" />
         Remove
       </Button>
     </div>

app/react/components/Tip/TextTip/TextTip.tsx

@@ -1,6 +1,8 @@
 import { PropsWithChildren } from 'react';
 import clsx from 'clsx';
 
+import { Icon } from '@@/Icon';
+
 type Color = 'orange' | 'blue';
 
 export interface Props {
@@ -11,15 +13,25 @@ export function TextTip({
   color = 'orange',
   children,
 }: PropsWithChildren<Props>) {
+  let iconClass: string;
+
+  switch (color) {
+    case 'blue':
+      iconClass = 'icon-primary';
+      break;
+    case 'orange':
+      iconClass = 'icon-warning';
+      break;
+    default:
+      iconClass = 'icon-warning';
+  }
+
   return (
-    <p className="text-muted small">
-      <i
-        aria-hidden="true"
-        className={clsx(
-          'fa fa-exclamation-circle',
-          `${color}-icon`,
-          'space-right'
-        )}
+    <p className="text-muted small vertical-center">
+      <Icon
+        icon="alert-circle"
+        feather
+        className={clsx(`${iconClass}`, 'space-right')}
       />
       {children}
     </p>