refactor(tables): use add and delete buttons [EE-6297] (#10668)

Co-authored-by: Chaim Lev-Ari <chaim.levi-ari@portaienr.io>

app/react/edge/edge-devices/WaitingRoomView/Datatable/TableActions.tsx

@@ -1,4 +1,4 @@
-import { Check, CheckCircle, Trash2 } from 'lucide-react';
+import { Check, CheckCircle } from 'lucide-react';
 
 import { notifySuccess } from '@/portainer/services/notifications';
 import { useDeleteEnvironmentsMutation } from '@/react/portainer/environments/queries/useDeleteEnvironmentsMutation';
@@ -7,10 +7,9 @@ import { withReactQuery } from '@/react-tools/withReactQuery';
 import { useIsPureAdmin } from '@/react/hooks/useUser';
 
 import { Button } from '@@/buttons';
-import { ModalType, openModal } from '@@/modals';
-import { confirm } from '@@/modals/confirm';
-import { buildConfirmButton } from '@@/modals/utils';
+import { openModal } from '@@/modals';
 import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
+import { DeleteButton } from '@@/buttons/DeleteButton';
 
 import { useAssociateDeviceMutation, useLicenseOverused } from '../queries';
 import { WaitingRoomEnvironment } from '../types';
@@ -36,14 +35,13 @@ export function TableActions({
 
   return (
     <>
-      <Button
-        onClick={() => handleRemoveDevice(selectedRows)}
+      <DeleteButton
+        onConfirmed={() => handleRemoveDevice(selectedRows)}
         disabled={selectedRows.length === 0}
-        color="dangerlight"
-        icon={Trash2}
+        confirmMessage="You're about to remove edge device(s) from waiting room, which will not be shown until next agent startup."
       >
         Remove Device
-      </Button>
+      </DeleteButton>
 
       <TooltipWithChildren
         message={
@@ -122,18 +120,6 @@ export function TableActions({
   }
 
   async function handleRemoveDevice(devices: Environment[]) {
-    const confirmed = await confirm({
-      title: 'Are you sure?',
-      message:
-        "You're about to remove edge device(s) from waiting room, which will not be shown until next agent startup.",
-      confirmButton: buildConfirmButton('Remove', 'danger'),
-      modalType: ModalType.Destructive,
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
     removeMutation.mutate(
       devices.map((d) => d.Id),
       {

app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/TableActions.tsx

@@ -1,11 +1,7 @@
-import { Trash2, Plus } from 'lucide-react';
-
 import { notifySuccess } from '@/portainer/services/notifications';
 
-import { Button } from '@@/buttons';
-import { confirmDestructive } from '@@/modals/confirm';
-import { buildConfirmButton } from '@@/modals/utils';
-import { Link } from '@@/Link';
+import { AddButton } from '@@/buttons';
+import { DeleteButton } from '@@/buttons/DeleteButton';
 
 import { useDeleteEdgeStacksMutation } from './useDeleteEdgeStacksMutation';
 import { DecoratedEdgeStack } from './types';
@@ -19,39 +15,17 @@ export function TableActions({
 
   return (
     <div className="flex items-center gap-2">
-      <Button
-        color="dangerlight"
+      <DeleteButton
         disabled={selectedItems.length === 0}
-        onClick={() => handleRemove(selectedItems)}
-        icon={Trash2}
-        className="!m-0"
-      >
-        Remove
-      </Button>
+        onConfirmed={() => handleRemove(selectedItems)}
+        confirmMessage="Are you sure you want to remove the selected Edge stack(s)?"
+      />
 
-      <Button
-        as={Link}
-        props={{ to: 'edge.stacks.new' }}
-        icon={Plus}
-        className="!m-0"
-        data-cy="edgeStack-addStackButton"
-      >
-        Add stack
-      </Button>
+      <AddButton data-cy="edgeStack-addStackButton">Add stack</AddButton>
     </div>
   );
 
   async function handleRemove(selectedItems: Array<DecoratedEdgeStack>) {
-    const confirmed = await confirmDestructive({
-      title: 'Are you sure?',
-      message: 'Are you sure you want to remove the selected Edge stack(s)?',
-      confirmButton: buildConfirmButton('Remove', 'danger'),
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
     const ids = selectedItems.map((item) => item.Id);
     removeMutation.mutate(ids, {
       onSuccess: () => {