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

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

app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx

@@ -1,4 +1,3 @@
-import { Plus, Trash2 } from 'lucide-react';
 import { useRouter } from '@uirouter/react';
 import { useMemo } from 'react';
 
@@ -9,16 +8,16 @@ import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultD
 import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
 import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
 
-import { confirmDelete } from '@@/modals/confirm';
 import { Datatable, TableSettingsMenu } from '@@/datatables';
-import { Button } from '@@/buttons';
-import { Link } from '@@/Link';
+import { AddButton } from '@@/buttons';
 import { useTableState } from '@@/datatables/useTableState';
+import { DeleteButton } from '@@/buttons/DeleteButton';
 
 import { DeleteIngressesRequest, Ingress } from '../types';
 import { useDeleteIngresses, useIngresses } from '../queries';
 import { useNamespacesQuery } from '../../namespaces/queries/useNamespacesQuery';
 import { Namespaces } from '../../namespaces/types';
+import { CreateFromManifestButton } from '../../components/CreateFromManifestButton';
 
 import { columns } from './columns';
 
@@ -111,38 +110,20 @@ export function IngressDatatable() {
 
   function tableActions(selectedFlatRows: Ingress[]) {
     return (
-      <div className="ingressDatatable-actions">
-        <Authorized authorizations="AzureContainerGroupDelete">
-          <Button
-            color="dangerlight"
-            disabled={selectedFlatRows.length === 0}
-            onClick={() => handleRemoveClick(selectedFlatRows)}
-            icon={Trash2}
-          >
-            Remove
-          </Button>
-        </Authorized>
+      <Authorized authorizations="K8sIngressesW">
+        <DeleteButton
+          disabled={selectedFlatRows.length === 0}
+          onConfirmed={() => handleRemoveClick(selectedFlatRows)}
+          data-cy="k8sSecret-removeSecretButton"
+          confirmMessage="Are you sure you want to delete the selected ingresses?"
+        />
 
-        <Authorized authorizations="K8sIngressesW">
-          <Link
-            to="kubernetes.ingresses.create"
-            className="space-left no-decoration"
-          >
-            <Button icon={Plus} color="secondary">
-              Add with form
-            </Button>
-          </Link>
-        </Authorized>
-        <Authorized authorizations="K8sIngressesW">
-          <Link
-            to="kubernetes.deploy"
-            className="space-left no-decoration"
-            params={{ referrer: 'kubernetes.ingresses' }}
-          >
-            <Button icon={Plus}>Create from manifest</Button>
-          </Link>
-        </Authorized>
-      </div>
+        <AddButton to=".create" color="secondary">
+          Add with form
+        </AddButton>
+
+        <CreateFromManifestButton />
+      </Authorized>
     );
   }
 
@@ -152,13 +133,6 @@ export function IngressDatatable() {
   }
 
   async function handleRemoveClick(ingresses: SelectedIngress[]) {
-    const confirmed = await confirmDelete(
-      'Are you sure you want to delete the selected ingresses?'
-    );
-    if (!confirmed) {
-      return null;
-    }
-
     const payload: DeleteIngressesRequest = {} as DeleteIngressesRequest;
     ingresses.forEach((ingress) => {
       payload[ingress.Namespace] = payload[ingress.Namespace] || [];
@@ -173,6 +147,5 @@ export function IngressDatatable() {
         },
       }
     );
-    return ingresses;
   }
 }

app/react/kubernetes/ingresses/style.css

@@ -7,7 +7,6 @@
   background-color: var(--bg-body-color);
 }
 
-.ingressDatatable-actions button > span,
 .anntation-actions button > span,
 .rules-action button > span,
 .rule button > span {