feat(app): limit the docker API version supported by the frontend (#11855)

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

@@ -4,15 +4,18 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { AccessControlPanel } from '@/react/portainer/access-control/AccessControlPanel/AccessControlPanel';
 import { ResourceControlType } from '@/react/portainer/access-control/types';
-import { DockerContainer } from '@/react/docker/containers/types';
+import { ContainerListViewModel } from '@/react/docker/containers/types';
 import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
-import { useContainers } from '@/react/docker/containers/queries/containers';
+import { useContainers } from '@/react/docker/containers/queries/useContainers';
+import { notifySuccess } from '@/portainer/services/notifications';
 
 import { PageHeader } from '@@/PageHeader';
 
-import { useNetwork, useDeleteNetwork } from '../queries';
+import { useDeleteNetwork } from '../queries/useDeleteNetworkMutation';
 import { isSystemNetwork } from '../network.helper';
 import { NetworkResponseContainers } from '../types';
+import { queryKeys } from '../queries/queryKeys';
+import { useNetwork } from '../queries/useNetwork';
 
 import { NetworkDetailsTable } from './NetworkDetailsTable';
 import { NetworkOptionsTable } from './NetworkOptionsTable';
@@ -27,7 +30,7 @@ export function ItemView() {
   } = useCurrentStateAndParams();
   const environmentId = useEnvironmentId();
   const networkQuery = useNetwork(environmentId, networkId, { nodeName });
-  const deleteNetworkMutation = useDeleteNetwork();
+  const deleteNetworkMutation = useDeleteNetwork(environmentId);
   const containersQuery = useContainers(environmentId, {
     filters: {
       network: [networkId],
@@ -69,13 +72,9 @@ export function ItemView() {
 
       <AccessControlPanel
         onUpdateSuccess={() =>
-          queryClient.invalidateQueries([
-            'environments',
-            environmentId,
-            'docker',
-            'networks',
-            networkId,
-          ])
+          queryClient.invalidateQueries(
+            queryKeys.item(environmentId, networkId)
+          )
         }
         resourceControl={resourceControl}
         resourceType={ResourceControlType.Network}
@@ -95,9 +94,10 @@ export function ItemView() {
 
   async function onRemoveNetworkClicked() {
     deleteNetworkMutation.mutate(
-      { environmentId, networkId },
+      { networkId },
       {
         onSuccess: () => {
+          notifySuccess('Network successfully removed', networkId);
           router.stateService.go('docker.networks');
         },
       }
@@ -107,7 +107,7 @@ export function ItemView() {
 
 function filterContainersInNetwork(
   networkContainers?: NetworkResponseContainers,
-  containers: DockerContainer[] = []
+  containers: ContainerListViewModel[] = []
 ) {
   if (!networkContainers) {
     return [];

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

@@ -3,6 +3,7 @@ import { Server, Trash2 } from 'lucide-react';
 import { Authorized } from '@/react/hooks/useUser';
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { Icon } from '@/react/components/Icon';
+import { notifySuccess } from '@/portainer/services/notifications';
 
 import { TableContainer, TableTitle } from '@@/datatables';
 import { DetailsTable } from '@@/DetailsTable';
@@ -10,7 +11,7 @@ import { Button } from '@@/buttons';
 import { Link } from '@@/Link';
 
 import { NetworkContainer, NetworkId } from '../types';
-import { useDisconnectContainer } from '../queries';
+import { useDisconnectContainer } from '../queries/useDisconnectContainerMutation';
 
 type Props = {
   networkContainers: NetworkContainer[];
@@ -33,7 +34,10 @@ export function NetworkContainersTable({
   environmentId,
   networkId,
 }: Props) {
-  const disconnectContainer = useDisconnectContainer();
+  const disconnectContainer = useDisconnectContainer({
+    environmentId,
+    networkId,
+  });
 
   if (networkContainers.length === 0) {
     return null;
@@ -72,11 +76,18 @@ export function NetworkContainersTable({
                   color="dangerlight"
                   onClick={() => {
                     if (container.Id) {
-                      disconnectContainer.mutate({
-                        containerId: container.Id,
-                        environmentId,
-                        networkId,
-                      });
+                      disconnectContainer.mutate(
+                        {
+                          containerId: container.Id,
+                        },
+                        {
+                          onSuccess: () =>
+                            notifySuccess(
+                              'Container successfully disconnected',
+                              networkId
+                            ),
+                        }
+                      );
                     }
                   }}
                 >