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

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

app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationDetailsWidget.tsx

@@ -1,4 +1,4 @@
-import { Pencil, Plus } from 'lucide-react';
+import { Pencil } from 'lucide-react';
 import { useCurrentStateAndParams } from '@uirouter/react';
 import { Pod } from 'kubernetes-types/core/v1';
 
@@ -7,7 +7,7 @@ import { useStackFile } from '@/react/common/stacks/stack.service';
 import { useNamespaceQuery } from '@/react/kubernetes/namespaces/queries/useNamespaceQuery';
 
 import { Widget, WidgetBody } from '@@/Widget';
-import { Button } from '@@/buttons';
+import { AddButton, Button } from '@@/buttons';
 import { Link } from '@@/Link';
 import { Icon } from '@@/Icon';
 
@@ -102,23 +102,15 @@ export function ApplicationDetailsWidget() {
                   />
                 )}
                 {appStackFileQuery.data && (
-                  <Link
+                  <AddButton
                     to="kubernetes.templates.custom.new"
+                    data-cy="k8sAppDetail-createCustomTemplateButton"
                     params={{
                       fileContent: appStackFileQuery.data.StackFileContent,
                     }}
                   >
-                    <Button
-                      type="button"
-                      color="primary"
-                      size="small"
-                      className="hover:decoration-none !ml-0"
-                      data-cy="k8sAppDetail-createCustomTemplateButton"
-                    >
-                      <Icon icon={Plus} className="mr-1" />
-                      Create template from application
-                    </Button>
-                  </Link>
+                    Create template from application
+                  </AddButton>
                 )}
               </div>
             )}

app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/TableActions.tsx

@@ -1,8 +1,6 @@
-import { Trash2 } from 'lucide-react';
-
 import { Authorized } from '@/react/hooks/useUser';
 
-import { Button } from '@@/buttons';
+import { DeleteButton } from '@@/buttons/DeleteButton';
 
 import { KubernetesStack } from '../../types';
 
@@ -15,15 +13,12 @@ export function TableActions({
 }) {
   return (
     <Authorized authorizations="K8sApplicationsW">
-      <Button
+      <DeleteButton
+        confirmMessage="Are you sure that you want to remove the selected stack(s) ? This will remove all the applications associated to the stack(s)."
         disabled={selectedItems.length === 0}
-        color="dangerlight"
-        onClick={() => onRemove(selectedItems)}
-        icon={Trash2}
+        onConfirmed={() => onRemove(selectedItems)}
         data-cy="k8sApp-removeStackButton"
-      >
-        Remove
-      </Button>
+      />
     </Authorized>
   );
 }