refactor(docker/containers): migrate networks table to react [EE-4665] (#10069)

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

@@ -0,0 +1,60 @@
+import { CellContext } from '@tanstack/react-table';
+import { useRouter } from '@uirouter/react';
+
+import { Authorized } from '@/react/hooks/useUser';
+import { useDisconnectContainer } from '@/react/docker/networks/queries';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { LoadingButton } from '@@/buttons';
+
+import { TableNetwork, isContainerNetworkTableMeta } from './types';
+import { columnHelper } from './helper';
+
+export const actions = columnHelper.display({
+  header: 'Actions',
+  cell: Cell,
+});
+
+function Cell({
+  row,
+  table: {
+    options: { meta },
+  },
+}: CellContext<TableNetwork, unknown>) {
+  const router = useRouter();
+  const environmentId = useEnvironmentId();
+  const disconnectMutation = useDisconnectContainer();
+
+  return (
+    <Authorized authorizations="DockerNetworkDisconnect">
+      <LoadingButton
+        color="dangerlight"
+        isLoading={disconnectMutation.isLoading}
+        loadingText="Leaving network..."
+        type="button"
+        onClick={handleSubmit}
+      >
+        Leave network
+      </LoadingButton>
+    </Authorized>
+  );
+
+  function handleSubmit() {
+    if (!isContainerNetworkTableMeta(meta)) {
+      throw new Error('Invalid row meta');
+    }
+
+    disconnectMutation.mutate(
+      {
+        environmentId,
+        networkId: row.original.id,
+        containerId: meta.containerId,
+      },
+      {
+        onSuccess() {
+          router.stateService.reload();
+        },
+      }
+    );
+  }
+}