Canvas: Fix gateway copy button
Change-Id: Ic8af3fe65fbd2ba0530b67ac0f377122b364d767
diff --git a/apps/canvas/front/src/Gateways.tsx b/apps/canvas/front/src/Gateways.tsx
index e4785bd..6e02bc1 100644
--- a/apps/canvas/front/src/Gateways.tsx
+++ b/apps/canvas/front/src/Gateways.tsx
@@ -1,5 +1,5 @@
import { useEnv } from "./lib/state";
-import { Copy, Check } from "lucide-react";
+import { Copy, Check, ExternalLink } from "lucide-react";
import { Button } from "./components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/ui/tooltip";
import { useCallback, useMemo, useState } from "react";
@@ -68,22 +68,37 @@
setOpen(false);
}, 1000);
}, [content, setClicked, setOpen]);
+ const handleClick = useCallback(() => {
+ if (g.type === "https") {
+ window.open(content, "_blank");
+ } else {
+ copy();
+ }
+ }, [g.type, content, copy]);
+
return (
<TooltipProvider>
<Tooltip delayDuration={100} open={open} onOpenChange={setOpen}>
<TooltipTrigger asChild>
- <Button
- variant="ghost"
- onClick={g.type === "https" ? () => window.open(content, "_blank") : copy}
- className="!gap-1 !p-0 !h-fit"
- >
+ <Button variant="ghost" className="!gap-1 !p-0 !h-fit" onClick={handleClick}>
<AccessType access={g} className="w-4 h-4" />
<div className="hover:bg-gray-200 p-x-1">{hidden}</div>
</Button>
</TooltipTrigger>
- <TooltipContent side="right" className="!bg-transparent cursor-pointer !p-0" sideOffset={10}>
- {!clicked && <Copy className="w-4 h-4 !bg-transparent" color="black" />}
- {clicked && <Check className="w-4 h-4 !bg-transparent" color="black" />}
+ <TooltipContent
+ side="right"
+ className="!bg-transparent cursor-pointer !p-0"
+ sideOffset={10}
+ onClick={copy}
+ >
+ {g.type === "https" ? (
+ <ExternalLink className="w-4 h-4 !bg-transparent" color="black" />
+ ) : (
+ <>
+ {!clicked && <Copy className="w-4 h-4 !bg-transparent" color="black" />}
+ {clicked && <Check className="w-4 h-4 !bg-transparent" color="black" />}
+ </>
+ )}
</TooltipContent>
</Tooltip>
</TooltipProvider>