fix(file-manager): render transfer toasts without plugin hooks (#1546)

plugins/file-manager/src/frontend/FileManager.tsx

@@ -1416,10 +1416,13 @@ function FileManagerContent({
       const { downloadSSHFileStream } =
         await import("./api/ssh-file-operations-api");
 
-      toast.loading(<DownloadProgressToast fileName={file.name} loaded={0} />, {
+      toast.loading(
-        id: toastId,
+        <DownloadProgressToast t={t} fileName={file.name} loaded={0} />,
-        duration: Infinity,
+        {
-      });
+          id: toastId,
+          duration: Infinity,
+        },
+      );
 
       await downloadSSHFileStream(
         sshSessionId,
@@ -1438,6 +1441,7 @@ function FileManagerContent({
 
           toast.loading(
             <DownloadProgressToast
+              t={t}
               fileName={file.name}
               loaded={loaded}
               total={total}

plugins/file-manager/src/frontend/components/DiffViewer.tsx

@@ -134,7 +134,7 @@ export function DiffViewer({
 
   const handleDownloadFile = async (file: FileItem) => {
     const toastId = toast.loading(
-      <DownloadProgressToast fileName={file.name} loaded={0} />,
+      <DownloadProgressToast t={t} fileName={file.name} loaded={0} />,
       { duration: Infinity },
     );
     try {
@@ -145,6 +145,7 @@ export function DiffViewer({
         ({ loaded, total }) => {
           toast.loading(
             <DownloadProgressToast
+              t={t}
               fileName={file.name}
               loaded={loaded}
               total={total}

plugins/file-manager/src/frontend/components/DownloadProgressToast.tsx

@@ -1,9 +1,10 @@
 import { formatTransferMbPerSec } from "../api/transfer-api";
-import { useTranslation } from "@termix/plugin-sdk/frontend";
+import type { TranslateFn } from "@termix/plugin-sdk/frontend";
 import { ArrowDownToLine } from "lucide-react";
 import { TransferProgressBar } from "./TransferProgressBar";
 
 interface DownloadProgressToastProps {
+  t: TranslateFn;
   fileName: string;
   loaded: number;
   total?: number;
@@ -25,12 +26,12 @@ function formatBytes(bytes: number): string {
 }
 
 export function DownloadProgressToast({
+  t,
   fileName,
   loaded,
   total,
   mbPerSec,
 }: DownloadProgressToastProps) {
-  const { t } = useTranslation();
   const percent =
     total !== undefined && total > 0
       ? Math.min(100, Math.round((loaded / total) * 100))

plugins/file-manager/src/frontend/components/FileWindow.tsx

@@ -483,7 +483,7 @@ export function FileWindow({
 
   const handleDownload = async () => {
     const toastId = toast.loading(
-      <DownloadProgressToast fileName={file.name} loaded={0} />,
+      <DownloadProgressToast t={t} fileName={file.name} loaded={0} />,
       { duration: Infinity },
     );
     try {
@@ -495,6 +495,7 @@ export function FileWindow({
         ({ loaded, total }) => {
           toast.loading(
             <DownloadProgressToast
+              t={t}
               fileName={file.name}
               loaded={loaded}
               total={total}

plugins/file-manager/src/frontend/components/LocalTransferProgressToast.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@termix/plugin-sdk/ui";
-import { useTranslation } from "@termix/plugin-sdk/frontend";
+import type { TranslateFn } from "@termix/plugin-sdk/frontend";
 import { formatFileSize } from "../file-manager-utils.ts";
 
 export interface LocalTransferBatchStatus {
@@ -16,15 +16,16 @@ export interface LocalTransferBatchStatus {
 }
 
 interface LocalTransferProgressToastProps {
+  t: TranslateFn;
   status: LocalTransferBatchStatus;
   onCancel?: () => void;
 }
 
 export function LocalTransferProgressToast({
+  t,
   status,
   onCancel,
 }: LocalTransferProgressToastProps) {
-  const { t } = useTranslation();
   const percent =
     status.totalBytes > 0
       ? Math.min(100, Math.round((status.bytesDone / status.totalBytes) * 100))

plugins/file-manager/src/frontend/components/TransferProgressToast.tsx

@@ -4,7 +4,7 @@ import {
   getTransferProgressPercent,
   type TransferProgressResponse,
 } from "../api/transfer-api";
-import { useTranslation } from "@termix/plugin-sdk/frontend";
+import type { TranslateFn } from "@termix/plugin-sdk/frontend";
 import {
   Archive,
   ArchiveRestore,
@@ -16,6 +16,7 @@ import {
 import { TransferProgressBar } from "./TransferProgressBar";
 
 interface TransferProgressToastProps {
+  t: TranslateFn;
   status: TransferProgressResponse;
   liveMbPerSec?: number;
   stalled?: boolean;
@@ -25,6 +26,7 @@ interface TransferProgressToastProps {
 }
 
 export function TransferProgressToast({
+  t,
   status,
   liveMbPerSec,
   stalled = false,
@@ -32,7 +34,6 @@ export function TransferProgressToast({
   onCancel,
   cancelling = false,
 }: TransferProgressToastProps) {
-  const { t } = useTranslation();
   const percent = getTransferProgressPercent(status);
 
   let title = t("transfer.progressTransferring");

plugins/file-manager/src/frontend/hooks/useLocalTransfers.ts

@@ -193,6 +193,7 @@ export function useLocalTransfers({
       const render = () => {
         toast.loading(
           createElement(LocalTransferProgressToast, {
+            t,
             status: { ...status, cancelling },
             onCancel: () => {
               cancelled = true;

plugins/file-manager/src/frontend/transferProgressMonitor.tsx

@@ -38,6 +38,7 @@ function formatFileSize(bytes?: number): string {
 }
 
 function renderTransferProgressToast(
+  t: TFunction,
   toastId: string | number,
   status: TransferProgressResponse,
   liveMbPerSec?: number,
@@ -47,6 +48,7 @@ function renderTransferProgressToast(
 ): void {
   toast.loading(
     <TransferProgressToast
+      t={t}
       status={status}
       liveMbPerSec={liveMbPerSec}
       stalled={stalled}
@@ -265,6 +267,7 @@ export function beginTransferProgressMonitoring(
 
   const progressToast = toast.loading(
     <TransferProgressToast
+      t={t}
       status={initialStatus}
       formatSize={formatFileSize}
     />,
@@ -279,6 +282,7 @@ export function beginTransferProgressMonitoring(
     if (cancelling) return;
     cancelling = true;
     renderTransferProgressToast(
+      t,
       progressToast,
       { ...initialStatus, transferId },
       undefined,
@@ -294,6 +298,7 @@ export function beginTransferProgressMonitoring(
       options.onProgress?.(status);
       const { rate, stalled } = progressTracker.update(status);
       renderTransferProgressToast(
+        t,
         progressToast,
         status,
         rate,
@@ -333,6 +338,7 @@ export function beginTransferProgressMonitoring(
     });
 
   renderTransferProgressToast(
+    t,
     progressToast,
     initialStatus,
     undefined,

plugins/file-manager/tests/frontend/progress-toast-context.test.tsx

@@ -0,0 +1,54 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+vi.mock("@termix/plugin-sdk/frontend", () => ({
+  useTranslation: () => {
+    throw Error("No plugin scope in the global toaster");
+  },
+}));
+import { DownloadProgressToast } from "../../src/frontend/components/DownloadProgressToast";
+import { TransferProgressToast } from "../../src/frontend/components/TransferProgressToast";
+import { LocalTransferProgressToast } from "../../src/frontend/components/LocalTransferProgressToast";
+afterEach(cleanup);
+const t = (key: string) => key;
+it("renders download progress outside plugin scope", () => {
+  render(
+    <DownloadProgressToast t={t} fileName="test.txt" loaded={50} total={100} />,
+  );
+  expect(screen.getByRole("progressbar").getAttribute("aria-valuenow")).toBe(
+    "50",
+  );
+});
+it("renders host transfer progress outside plugin scope", () => {
+  render(
+    <TransferProgressToast
+      t={t}
+      status={{
+        transferId: "test",
+        status: "running",
+        phase: "transferring",
+        bytesTransferred: 50,
+        totalBytes: 100,
+      }}
+      formatSize={String}
+    />,
+  );
+  expect(screen.getByRole("progressbar")).toBeTruthy();
+});
+it("preserves cancellation on local transfers outside plugin scope", () => {
+  const cancel = vi.fn();
+  render(
+    <LocalTransferProgressToast
+      t={t}
+      status={{
+        direction: "upload",
+        totalFiles: 2,
+        completedFiles: 1,
+        bytesDone: 50,
+        totalBytes: 100,
+      }}
+      onCancel={cancel}
+    />,
+  );
+  fireEvent.click(screen.getByRole("button"));
+  expect(cancel).toHaveBeenCalledOnce();
+});