refactor(containers): migrate container item view to react BE-6582 (#1606)

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>

app/react/docker/containers/ItemView/ContainerNetworksDatatable/ConnectNetworkForm.tsx

@@ -1,10 +1,10 @@
 import { Form, Formik } from 'formik';
 import { SchemaOf, object, string } from 'yup';
-import { useRouter } from '@uirouter/react';
 
 import { useAuthorizations } from '@/react/hooks/useUser';
 import { useConnectContainerMutation } from '@/react/docker/networks/queries/useConnectContainerMutation';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { notifySuccess } from '@/portainer/services/notifications';
 
 import { FormControl } from '@@/form-components/FormControl';
 import { LoadingButton } from '@@/buttons';
@@ -27,7 +27,6 @@ export function ConnectNetworkForm({
   const environmentId = useEnvironmentId();
   const { authorized } = useAuthorizations('DockerNetworkConnect');
   const connectMutation = useConnectContainerMutation(environmentId);
-  const router = useRouter();
   if (!authorized) {
     return null;
   }
@@ -72,7 +71,7 @@ export function ConnectNetworkForm({
       { containerId, networkId, nodeName },
       {
         onSuccess() {
-          router.stateService.reload();
+          notifySuccess('Success', `Connected container to ${networkId}`);
         },
       }
     );

app/react/docker/containers/ItemView/ContainerNetworksDatatable/ContainerNetworksDatatable.tsx

@@ -19,11 +19,11 @@ const store = createPersistedStore(storageKey, 'name');
 
 export function ContainerNetworksDatatable({
   dataset,
-  container,
+  containerId,
   nodeName,
 }: {
   dataset: NetworkSettings['Networks'];
-  container: ContainerListViewModel;
+  containerId: ContainerListViewModel['Id'];
   nodeName?: string;
 }) {
   const tableState = useTableState(store, storageKey);
@@ -56,7 +56,7 @@ export function ContainerNetworksDatatable({
       )}
       description={
         <ConnectNetworkForm
-          containerId={container.Id}
+          containerId={containerId}
           nodeName={nodeName}
           selectedNetworks={networks.map((n) => n.id)}
         />
@@ -64,7 +64,7 @@ export function ContainerNetworksDatatable({
       extendTableOptions={mergeOptions(
         withMeta({
           table: 'container-networks',
-          containerId: container.Id,
+          containerId,
         })
       )}
       data-cy="container-networks-datatable"

app/react/docker/containers/ItemView/ContainerNetworksDatatable/actions.tsx

@@ -1,5 +1,4 @@
 import { CellContext } from '@tanstack/react-table';
-import { useRouter } from '@uirouter/react';
 
 import { Authorized } from '@/react/hooks/useUser';
 import { useDisconnectContainer } from '@/react/docker/networks/queries/useDisconnectContainerMutation';
@@ -25,7 +24,6 @@ export function buildActions({ nodeName }: { nodeName?: string } = {}) {
       options: { meta },
     },
   }: CellContext<TableNetwork, unknown>) {
-    const router = useRouter();
     const environmentId = useEnvironmentId();
     const disconnectMutation = useDisconnectContainer({
       environmentId,
@@ -60,7 +58,6 @@ export function buildActions({ nodeName }: { nodeName?: string } = {}) {
         {
           onSuccess() {
             notifySuccess('Container successfully disconnected', networkId);
-            router.stateService.reload();
           },
         }
       );