Styling issue in Quarkus Flow

.changeset/toast-notification-removed.md

@@ -0,0 +1,5 @@
+---
+"@openworkflowspec/diagram-editor": minor
+---
+
+Toast notification removed for side panel buttons

packages/open-workflow-diagram-editor/package.json

@@ -52,7 +52,6 @@
     "html-to-image": "catalog:",
     "js-yaml": "catalog:",
     "radix-ui": "catalog:",
-    "sonner": "catalog:",
     "use-sync-external-store": "catalog:"
   },
   "devDependencies": {

packages/open-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

@@ -27,7 +27,6 @@ import { useResolvedColorMode } from "../hooks/useResolvedColorMode";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { SidePanel } from "@/side-panel/SidePanel";
 import { DiagramEditorErrorBoundary } from "./error-pages/DiagramEditorErrorBoundary";
-import { Toaster } from "@/components/ui/sonner";
 
 /**
  * Imperative handle exposed by `DiagramEditor` via `ref`.
@@ -184,7 +183,6 @@ export const DiagramEditor = React.forwardRef<DiagramEditorRef, DiagramEditorPro
             editorRef={ref}
           />
         </I18nProvider>
-        <Toaster theme={resolvedColorMode} />
       </div>
     );
   },

packages/open-workflow-diagram-editor/src/i18n/locales/en.ts

@@ -43,7 +43,9 @@ export const en = {
   "sidebar.exportMermaid.copy": "Copy Mermaid Code",
   "sidebar.exportMermaid.download": "Download as Mermaid File",
   "sidebar.exportMermaid.copied": "Copied!",
+  "sidebar.export.downloaded": "Downloaded",
   "sidebar.exportPng.download": "Download as PNG",
+  "sidebar.exportPng.downloading": "Downloading...",
   "aria.minimap.hide": "Hide minimap",
   "aria.minimap.show": "Show minimap",
   "aria.badge": "Badge:",
@@ -53,9 +55,6 @@ export const en = {
   "aria.panel.exportActions": "Export actions",
   "workflowError.autoLayout.title": "Layout Error",
   "workflowError.autoLayout.message": "Failed to apply auto-layout to the diagram.",
-  "toast.clipboard.error": "Failed to copy",
-  "toast.download.success": "Download started",
-  "toast.download.error": "Download failed",
 } as const;
 
 export type TranslationKeys = keyof typeof en;

packages/open-workflow-diagram-editor/src/lib/download.ts

@@ -24,9 +24,7 @@ export function downloadFile(content: string, filename: string, mimeType = "text
   const link = document.createElement("a");
   link.href = url;
   link.download = filename;
-  document.body.appendChild(link);
   link.click();
-  document.body.removeChild(link);
   setTimeout(() => {
     URL.revokeObjectURL(url);
   }, 100);

packages/open-workflow-diagram-editor/src/side-panel/WorkflowActions.tsx

@@ -16,7 +16,7 @@
 
 import * as React from "react";
 import { useI18n } from "@openworkflowspec/i18n";
-import { ClipboardPen, Download, ClipboardCheck, FileImage } from "lucide-react";
+import { ClipboardPen, Download, ClipboardCheck, FileImage, Import } from "lucide-react";
 import { useReactFlow, useStore } from "@xyflow/react";
 import { Button } from "@/components/ui/button";
 import { exportToMermaid } from "@/core";
@@ -26,12 +26,13 @@ import { exportDiagramAsPng } from "@/lib/exportPng";
 import { sanitizeFilename } from "@/lib/utils";
 import { useDiagramEditorContext } from "@/store/DiagramEditorContext";
 import type { Specification } from "@openworkflowspec/sdk";
-import { toast } from "sonner";
 
 export function WorkflowActions({ model }: { model: Specification.Workflow }): React.JSX.Element {
   const { t } = useI18n();
   const [isCopied, setIsCopied] = React.useState(false);
+  const [downloadedType, setDownloadedType] = React.useState<"mermaid" | "png" | null>(null);
   const copyTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const downloadTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const reactFlowInstance = useReactFlow();
   const diagramDomNode = useStore((s) => s.domNode);
   const { isExporting, setIsExporting } = useDiagramEditorContext();
@@ -41,6 +42,10 @@ export function WorkflowActions({ model }: { model: Specification.Workflow }): R
       if (copyTimeoutRef.current) {
         clearTimeout(copyTimeoutRef.current);
       }
+
+      if (downloadTimeoutRef.current) {
+        clearTimeout(downloadTimeoutRef.current);
+      }
     };
   }, []);
 
@@ -59,9 +64,10 @@ export function WorkflowActions({ model }: { model: Specification.Workflow }): R
         copyTimeoutRef.current = null;
       }, 2000);
     } catch (error) {
-      toast.error(t("toast.clipboard.error"), {
-        description: error instanceof Error ? error.message : undefined,
-      });
+      console.error(
+        "Failed to copy Mermaid code:",
+        error instanceof Error ? error.message : undefined,
+      );
     }
   };
 
@@ -70,11 +76,21 @@ export function WorkflowActions({ model }: { model: Specification.Workflow }): R
       const mermaidCode = exportToMermaid(model);
       const filename = `${sanitizeFilename(model.document?.name)}.mmd`;
       downloadFile(mermaidCode, filename);
-      toast.success(t("toast.download.success"));
+      setDownloadedType("mermaid");
+
+      if (downloadTimeoutRef.current) {
+        clearTimeout(downloadTimeoutRef.current);
+      }
+
+      downloadTimeoutRef.current = setTimeout(() => {
+        setDownloadedType(null);
+        downloadTimeoutRef.current = null;
+      }, 2000);
     } catch (error) {
-      toast.error(t("toast.download.error"), {
-        description: error instanceof Error ? error.message : undefined,
-      });
+      console.error(
+        "Failed to download Mermaid file:",
+        error instanceof Error ? error.message : undefined,
+      );
     }
   };
 
@@ -86,11 +102,22 @@ export function WorkflowActions({ model }: { model: Specification.Workflow }): R
         `${sanitizeFilename(model.document?.name)}.png`,
         diagramDomNode,
       );
-      toast.success(t("toast.download.success"));
+
+      setDownloadedType("png");
+
+      if (downloadTimeoutRef.current) {
+        clearTimeout(downloadTimeoutRef.current);
+      }
+
+      downloadTimeoutRef.current = setTimeout(() => {
+        setDownloadedType(null);
+        downloadTimeoutRef.current = null;
+      }, 2000);
     } catch (error) {
-      toast.error(t("toast.download.error"), {
-        description: error instanceof Error ? error.message : undefined,
-      });
+      console.error(
+        "Failed to export diagram as PNG:",
+        error instanceof Error ? error.message : undefined,
+      );
     } finally {
       setIsExporting(false);
     }
@@ -113,8 +140,10 @@ export function WorkflowActions({ model }: { model: Specification.Workflow }): R
         size="sm"
         className="dec:cursor-pointer"
       >
-        <Download />
-        {t("sidebar.exportMermaid.download")}
+        {downloadedType === "mermaid" ? <Import /> : <Download />}
+        {downloadedType === "mermaid"
+          ? t("sidebar.export.downloaded")
+          : t("sidebar.exportMermaid.download")}
       </Button>
       <Button
         onClick={handleExportPng}
@@ -123,8 +152,12 @@ export function WorkflowActions({ model }: { model: Specification.Workflow }): R
         className="dec:cursor-pointer"
         disabled={isExporting}
       >
-        <FileImage />
-        {t("sidebar.exportPng.download")}
+        {downloadedType === "png" ? <Import /> : <FileImage />}
+        {isExporting
+          ? t("sidebar.exportPng.downloading")
+          : downloadedType === "png"
+            ? t("sidebar.export.downloaded")
+            : t("sidebar.exportPng.download")}
       </Button>
     </>
   );

packages/open-workflow-diagram-editor/src/styles.css

@@ -15,15 +15,28 @@
  */
 
 /* layer order (Priority: lowest -> highest) */
+
+@import 'tailwindcss' prefix(dec);
+@import './components/ui/shadcn.css';
+
+@layer base {
+  .dec-root,
+  .dec-root *,
+  .dec-root::before,
+  .dec-root::after,
+  .dec-root::backdrop,
+  .dec-root *::before,
+  .dec-root *::after,
+  .dec-root *::backdrop {
+    --tw-border-style: solid;
+  }
+}
+
 @layer base,
   side-panel,
   react-flow-overrides,
   custom-nodes,
-  custom-edge-labels,
-  sonner;
-
-@import 'tailwindcss' prefix(dec);
-@import './components/ui/shadcn.css';
+  custom-edge-labels;
 
 @custom-variant dark (&:where(.dec-root.dark, .dec-root.dark *));
 

packages/open-workflow-diagram-editor/tests/lib/download.test.ts

@@ -24,8 +24,6 @@ describe("downloadFile", () => {
 
   it("creates and triggers file download", () => {
     const mockClick = vi.fn();
-    const mockAppendChild = vi.fn();
-    const mockRemoveChild = vi.fn();
     const mockElement = {
       click: mockClick,
       href: "",
@@ -35,17 +33,15 @@ describe("downloadFile", () => {
     vi.spyOn(document, "createElement").mockReturnValue(
       mockElement as unknown as HTMLAnchorElement,
     );
-    vi.spyOn(document.body, "appendChild").mockImplementation(mockAppendChild);
-    vi.spyOn(document.body, "removeChild").mockImplementation(mockRemoveChild);
     vi.spyOn(URL, "createObjectURL").mockReturnValue("blob:mock-url");
     vi.spyOn(URL, "revokeObjectURL").mockImplementation(vi.fn());
 
     const testCode = "flowchart TD\n  A --> B";
     downloadFile(testCode, "test.mmd");
 
     expect(document.createElement).toHaveBeenCalledWith("a");
+    expect(mockElement.href).toBe("blob:mock-url");
+    expect(mockElement.download).toBe("test.mmd");
     expect(mockClick).toHaveBeenCalled();
-    expect(mockAppendChild).toHaveBeenCalled();
-    expect(mockRemoveChild).toHaveBeenCalled();
   });
 });