From 7e3347da2bd17a2ab365e5183f41342568b0ee65 Mon Sep 17 00:00:00 2001
From: matias-portainer <104775949+matias-portainer@users.noreply.github.com>
Date: Wed, 27 Jul 2022 10:47:38 -0300
Subject: [PATCH] feat(ui): renovate the FDO devices list EE-3669 (#7231)

---
 .../FDOProfilesDatatable.tsx                  |  7 ++---
 .../FDOProfilesDatatableActions.tsx           |  9 +++---
 app/react/components/Tip/TextTip/TextTip.tsx  | 28 +++++++++++++------
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatable.tsx b/app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatable.tsx
index 2c409922d..09bbbb7f6 100644
--- a/app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatable.tsx
+++ b/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}
diff --git a/app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatableActions.tsx b/app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatableActions.tsx
index 6aa281ec5..4be3671be 100644
--- a/app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatableActions.tsx
+++ b/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>
diff --git a/app/react/components/Tip/TextTip/TextTip.tsx b/app/react/components/Tip/TextTip/TextTip.tsx
index a6e40db9d..2dfd7c196 100644
--- a/app/react/components/Tip/TextTip/TextTip.tsx
+++ b/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>