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

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

app/react/components/Link.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren, AnchorHTMLAttributes } from 'react';
-import { UISref, UISrefProps } from '@uirouter/react';
+import { UISrefProps, useSref } from '@uirouter/react';
 
 interface Props {
   title?: string;
@@ -8,18 +8,18 @@ interface Props {
 }
 
 export function Link({
-  title = '',
-  className,
   children,
+  to,
+  params,
+  options,
   ...props
 }: PropsWithChildren<Props> & UISrefProps) {
+  const { onClick, href } = useSref(to, params, options);
+
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <UISref className={className} {...props}>
-      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-      <a title={title} target={props.target} rel={props.rel}>
-        {children}
-      </a>
-    </UISref>
+    <a onClick={onClick} href={href} {...props}>
+      {children}
+    </a>
   );
 }

app/react/components/buttons/DeleteButton.tsx

@@ -1,6 +1,8 @@
 import { Trash2 } from 'lucide-react';
 import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { confirmDelete } from '@@/modals/confirm';
 
 import { Button } from './Button';
@@ -21,13 +23,15 @@ type ConfirmOrClick =
 export function DeleteButton({
   disabled,
   size,
+  'data-cy': dataCy,
   children,
   ...props
 }: PropsWithChildren<
-  ConfirmOrClick & {
-    size?: ComponentProps<typeof Button>['size'];
-    disabled?: boolean;
-  }
+  AutomationTestingProps &
+    ConfirmOrClick & {
+      size?: ComponentProps<typeof Button>['size'];
+      disabled?: boolean;
+    }
 >) {
   return (
     <Button
@@ -37,6 +41,7 @@ export function DeleteButton({
       onClick={() => handleClick()}
       icon={Trash2}
       className="!m-0"
+      data-cy={dataCy}
     >
       {children || 'Remove'}
     </Button>