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

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

app/react/docker/networks/ItemView/ItemView.tsx

@@ -8,7 +8,6 @@ import { DockerContainer } from '@/react/docker/containers/types';
 import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
 import { useContainers } from '@/react/docker/containers/queries/containers';
 
-import { confirmDelete } from '@@/modals/confirm';
 import { PageHeader } from '@@/PageHeader';
 
 import { useNetwork, useDeleteNetwork } from '../queries';
@@ -95,19 +94,14 @@ export function ItemView() {
   );
 
   async function onRemoveNetworkClicked() {
-    const message = 'Do you want to delete the network?';
-    const confirmed = await confirmDelete(message);
-
-    if (confirmed) {
-      deleteNetworkMutation.mutate(
-        { environmentId, networkId },
-        {
-          onSuccess: () => {
-            router.stateService.go('docker.networks');
-          },
-        }
-      );
-    }
+    deleteNetworkMutation.mutate(
+      { environmentId, networkId },
+      {
+        onSuccess: () => {
+          router.stateService.go('docker.networks');
+        },
+      }
+    );
   }
 }
 

app/react/docker/networks/ItemView/NetworkDetailsTable.tsx

@@ -1,13 +1,12 @@
 import { Fragment } from 'react';
-import { Network, Trash2 } from 'lucide-react';
+import { Network } from 'lucide-react';
 
 import DockerNetworkHelper from '@/docker/helpers/networkHelper';
 import { Authorized } from '@/react/hooks/useUser';
 
 import { TableContainer, TableTitle } from '@@/datatables';
 import { DetailsTable } from '@@/DetailsTable';
-import { Button } from '@@/buttons';
-import { Icon } from '@@/Icon';
+import { DeleteButton } from '@@/buttons/DeleteButton';
 
 import { isSystemNetwork } from '../network.helper';
 import { DockerNetwork, IPConfig } from '../types';
@@ -38,21 +37,18 @@ export function NetworkDetailsTable({
         <DetailsTable.Row label="Id">
           {network.Id}
           {allowRemoveNetwork && (
-            <Authorized authorizations="DockerNetworkDelete">
-              <Button
-                data-cy="networkDetails-deleteNetwork"
-                size="xsmall"
-                color="danger"
-                onClick={() => onRemoveNetworkClicked()}
-              >
-                <Icon
-                  icon={Trash2}
-                  className="space-right"
-                  aria-hidden="true"
-                />
-                Delete this network
-              </Button>
-            </Authorized>
+            <span className="ml-2">
+              <Authorized authorizations="DockerNetworkDelete">
+                <DeleteButton
+                  data-cy="networkDetails-deleteNetwork"
+                  size="xsmall"
+                  onConfirmed={onRemoveNetworkClicked}
+                  confirmMessage="Do you want to delete the network?"
+                >
+                  Delete this network
+                </DeleteButton>
+              </Authorized>
+            </span>
           )}
         </DetailsTable.Row>
         <DetailsTable.Row label="Driver">{network.Driver}</DetailsTable.Row>

app/react/docker/networks/ListView/NetworksDatatable.tsx

@@ -1,4 +1,4 @@
-import { Plus, Network, Trash2 } from 'lucide-react';
+import { Network } from 'lucide-react';
 
 import { Authorized } from '@/react/hooks/useUser';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
@@ -10,12 +10,12 @@ import {
   refreshableSettings,
   RefreshableTableSettings,
 } from '@@/datatables/types';
-import { Button } from '@@/buttons';
+import { AddButton } from '@@/buttons';
 import { TableSettingsMenu } from '@@/datatables';
 import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
 import { useRepeater } from '@@/datatables/useRepeater';
 import { useTableState } from '@@/datatables/useTableState';
-import { Link } from '@@/Link';
+import { DeleteButton } from '@@/buttons/DeleteButton';
 
 import { useIsSwarm } from '../../proxy/queries/useInfo';
 
@@ -80,22 +80,16 @@ export function NetworksDatatable({ dataset, onRemove, onRefresh }: Props) {
           <Authorized
             authorizations={['DockerNetworkDelete', 'DockerNetworkCreate']}
           >
-            <Button
+            <DeleteButton
               disabled={selectedRows.length === 0}
-              color="dangerlight"
-              onClick={() => onRemove(selectedRows)}
-              icon={Trash2}
-            >
-              Remove
-            </Button>
+              confirmMessage="Do you want to remove the selected network(s)?"
+              onConfirmed={() => onRemove(selectedRows)}
+            />
           </Authorized>
-          <Authorized
-            authorizations="DockerNetworkCreate"
-            data-cy="network-addNetworkButton"
-          >
-            <Button icon={Plus} as={Link} props={{ to: '.new' }}>
+          <Authorized authorizations="DockerNetworkCreate">
+            <AddButton data-cy="network-addNetworkButton">
               Add network
-            </Button>
+            </AddButton>
           </Authorized>
         </div>
       )}