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>
   );
 }

app/react/kubernetes/configs/ListView/ConfigMapsDatatable/ConfigMapsDatatable.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { FileCode, Plus, Trash2 } from 'lucide-react';
+import { FileCode } from 'lucide-react';
 import { ConfigMap } from 'kubernetes-types/core/v1';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
@@ -12,12 +12,12 @@ import { Application } from '@/react/kubernetes/applications/types';
 import { pluralize } from '@/portainer/helpers/strings';
 import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
 import { Namespaces } from '@/react/kubernetes/namespaces/types';
+import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
 
 import { Datatable, TableSettingsMenu } from '@@/datatables';
-import { confirmDelete } from '@@/modals/confirm';
-import { Button } from '@@/buttons';
-import { Link } from '@@/Link';
+import { AddButton } from '@@/buttons';
 import { useTableState } from '@@/datatables/useTableState';
+import { DeleteButton } from '@@/buttons/DeleteButton';
 
 import {
   useConfigMapsForCluster,
@@ -139,16 +139,6 @@ function TableActions({
   const deleteConfigMapMutation = useMutationDeleteConfigMaps(environmentId);
 
   async function handleRemoveClick(configMaps: ConfigMap[]) {
-    const confirmed = await confirmDelete(
-      `Are you sure you want to remove the selected ${pluralize(
-        configMaps.length,
-        'ConfigMap'
-      )}?`
-    );
-    if (!confirmed) {
-      return;
-    }
-
     const configMapsToDelete = configMaps.map((configMap) => ({
       namespace: configMap.metadata?.namespace ?? '',
       name: configMap.metadata?.name ?? '',
@@ -159,41 +149,30 @@ function TableActions({
 
   return (
     <Authorized authorizations="K8sConfigMapsW">
-      <Button
-        className="btn-wrapper"
-        color="dangerlight"
+      <DeleteButton
         disabled={selectedItems.length === 0}
-        onClick={async () => {
-          handleRemoveClick(selectedItems);
-        }}
-        icon={Trash2}
+        onConfirmed={() => handleRemoveClick(selectedItems)}
+        confirmMessage={`Are you sure you want to remove the selected ${pluralize(
+          selectedItems.length,
+          'ConfigMap'
+        )}`}
         data-cy="k8sConfig-removeConfigButton"
+      />
+
+      <AddButton
+        to="kubernetes.configmaps.new"
+        data-cy="k8sConfig-addConfigWithFormButton"
+        color="secondary"
       >
-        Remove
-      </Button>
-      <Link to="kubernetes.configmaps.new" className="ml-1">
-        <Button
-          className="btn-wrapper"
-          color="secondary"
-          icon={Plus}
-          data-cy="k8sConfig-addConfigWithFormButton"
-        >
-          Add with form
-        </Button>
-      </Link>
-      <Link
-        to="kubernetes.deploy"
+        Add with form
+      </AddButton>
+
+      <CreateFromManifestButton
         params={{
-          referrer: 'kubernetes.configurations',
           tab: 'configmaps',
         }}
-        className="ml-1"
         data-cy="k8sConfig-deployFromManifestButton"
-      >
-        <Button className="btn-wrapper" color="primary" icon={Plus}>
-          Create from manifest
-        </Button>
-      </Link>
+      />
     </Authorized>
   );
 }

app/react/kubernetes/configs/ListView/SecretsDatatable/SecretsDatatable.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Lock, Plus, Trash2 } from 'lucide-react';
+import { Lock } from 'lucide-react';
 import { Secret } from 'kubernetes-types/core/v1';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
@@ -12,12 +12,12 @@ import { Application } from '@/react/kubernetes/applications/types';
 import { pluralize } from '@/portainer/helpers/strings';
 import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
 import { Namespaces } from '@/react/kubernetes/namespaces/types';
+import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
 
 import { Datatable, TableSettingsMenu } from '@@/datatables';
-import { confirmDelete } from '@@/modals/confirm';
-import { Button } from '@@/buttons';
-import { Link } from '@@/Link';
+import { AddButton } from '@@/buttons';
 import { useTableState } from '@@/datatables/useTableState';
+import { DeleteButton } from '@@/buttons/DeleteButton';
 
 import {
   useSecretsForCluster,
@@ -135,16 +135,6 @@ function TableActions({ selectedItems }: { selectedItems: SecretRowData[] }) {
   const deleteSecretMutation = useMutationDeleteSecrets(environmentId);
 
   async function handleRemoveClick(secrets: SecretRowData[]) {
-    const confirmed = await confirmDelete(
-      `Are you sure you want to remove the selected ${pluralize(
-        secrets.length,
-        'secret'
-      )}?`
-    );
-    if (!confirmed) {
-      return;
-    }
-
     const secretsToDelete = secrets.map((secret) => ({
       namespace: secret.metadata?.namespace ?? '',
       name: secret.metadata?.name ?? '',
@@ -155,41 +145,28 @@ function TableActions({ selectedItems }: { selectedItems: SecretRowData[] }) {
 
   return (
     <Authorized authorizations="K8sSecretsW">
-      <Button
-        className="btn-wrapper"
-        color="dangerlight"
+      <DeleteButton
         disabled={selectedItems.length === 0}
-        onClick={async () => {
-          handleRemoveClick(selectedItems);
-        }}
-        icon={Trash2}
+        onConfirmed={() => handleRemoveClick(selectedItems)}
         data-cy="k8sSecret-removeSecretButton"
+        confirmMessage={`Are you sure you want to remove the selected ${pluralize(
+          selectedItems.length,
+          'secret'
+        )}?`}
+      />
+      <AddButton
+        to="kubernetes.secrets.new"
+        data-cy="k8sSecret-addSecretWithFormButton"
+        color="secondary"
       >
-        Remove
-      </Button>
-      <Link to="kubernetes.secrets.new" className="ml-1">
-        <Button
-          className="btn-wrapper"
-          color="secondary"
-          icon={Plus}
-          data-cy="k8sSecret-addSecretWithFormButton"
-        >
-          Add with form
-        </Button>
-      </Link>
-      <Link
-        to="kubernetes.deploy"
+        Add with form
+      </AddButton>
+      <CreateFromManifestButton
         params={{
-          referrer: 'kubernetes.configurations',
           tab: 'secrets',
         }}
-        className="ml-1"
         data-cy="k8sSecret-deployFromManifestButton"
-      >
-        <Button className="btn-wrapper" color="primary" icon={Plus}>
-          Create from manifest
-        </Button>
-      </Link>
+      />
     </Authorized>
   );
 }

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 {

app/react/kubernetes/services/ServicesView/ServicesDatatable/ServicesDatatable.tsx

@@ -1,8 +1,8 @@
-import { useMemo } from 'react';
-import { Shuffle, Trash2 } from 'lucide-react';
+import { Shuffle } from 'lucide-react';
 import { useRouter } from '@uirouter/react';
 import clsx from 'clsx';
 import { Row } from '@tanstack/react-table';
+import { useMemo } from 'react';
 
 import { Namespaces } from '@/react/kubernetes/namespaces/types';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
@@ -12,12 +12,11 @@ import { pluralize } from '@/portainer/helpers/strings';
 import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
 import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
 import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
+import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
 
 import { Datatable, Table, TableSettingsMenu } from '@@/datatables';
-import { confirmDelete } from '@@/modals/confirm';
-import { Button } from '@@/buttons';
-import { Link } from '@@/Link';
 import { useTableState } from '@@/datatables/useTableState';
+import { DeleteButton } from '@@/buttons/DeleteButton';
 
 import {
   useMutationDeleteServices,
@@ -94,7 +93,7 @@ export function ServicesDatatable() {
   );
 }
 
-// useServicesRowData appends the `isSyetem` property to the service data
+// useServicesRowData appends the `isSystem` property to the service data
 function useServicesRowData(
   services: Service[],
   namespaces?: Namespaces
@@ -136,26 +135,33 @@ function TableActions({ selectedItems }: TableActionsProps) {
   const deleteServicesMutation = useMutationDeleteServices(environmentId);
   const router = useRouter();
 
-  async function handleRemoveClick(services: SelectedService[]) {
-    const confirmed = await confirmDelete(
-      <>
-        <p>{`Are you sure you want to remove the selected ${pluralize(
-          services.length,
-          'service'
-        )}?`}</p>
-        <ul className="pl-6">
-          {services.map((s, index) => (
-            <li key={index}>
-              {s.Namespace}/{s.Name}
-            </li>
-          ))}
-        </ul>
-      </>
-    );
-    if (!confirmed) {
-      return null;
-    }
+  return (
+    <Authorized authorizations="K8sServicesW">
+      <DeleteButton
+        disabled={selectedItems.length === 0}
+        onConfirmed={() => handleRemoveClick(selectedItems)}
+        confirmMessage={
+          <>
+            <p>{`Are you sure you want to remove the selected ${pluralize(
+              selectedItems.length,
+              'service'
+            )}?`}</p>
+            <ul className="pl-6">
+              {selectedItems.map((s, index) => (
+                <li key={index}>
+                  {s.Namespace}/{s.Name}
+                </li>
+              ))}
+            </ul>
+          </>
+        }
+      />
 
+      <CreateFromManifestButton />
+    </Authorized>
+  );
+
+  async function handleRemoveClick(services: SelectedService[]) {
     const payload: Record<string, string[]> = {};
     services.forEach((service) => {
       payload[service.Namespace] = payload[service.Namespace] || [];
@@ -181,32 +187,5 @@ function TableActions({ selectedItems }: TableActionsProps) {
         },
       }
     );
-    return services;
   }
-
-  return (
-    <div className="servicesDatatable-actions">
-      <Authorized authorizations="K8sServicesW">
-        <Button
-          className="btn-wrapper"
-          color="dangerlight"
-          disabled={selectedItems.length === 0}
-          onClick={() => handleRemoveClick(selectedItems)}
-          icon={Trash2}
-        >
-          Remove
-        </Button>
-
-        <Link
-          to="kubernetes.deploy"
-          params={{ referrer: 'kubernetes.services' }}
-          className="space-left hover:no-decoration"
-        >
-          <Button className="btn-wrapper" color="primary" icon="plus">
-            Create from manifest
-          </Button>
-        </Link>
-      </Authorized>
-    </div>
-  );
 }